How to Design Skill Card using html and CSS
Hello guys, Planics Devloper is
providing HTML,CSS,BootStrap,JavaScript,PHP. If you want any design then
copy code from our post otherwise watch our video on blog.
If you want to design card hover or
something then click here and get latest design
free Click here
design beautiful card hover amination
using html and CSS . you learn in this video how to flip card using html and
CSS.
How to design different type of
animation in one loader using html and css?
Free Cards Effect in HTML with CSS
how to design animated card for website
so please check it out in YouTube.
Here we show, skill card using html and
CSS. You can free use for as product card or review Card.
card.html
<!<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta
charset="utf-8">
<title>Planics dev</title>
<link
href="https://fonts.googleapis.com/css?family=Quicksand&display=swap"
rel="stylesheet">
<link
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<link
href="https://fonts.googleapis.com/css?family=Righteous&display=swap"
rel="stylesheet">
<style>
body{
background-color:#fcfcfc;
}
.container{
background-image:radial-gradient(#4b56f3,#400e9788);
width:
250pt;
height:
330pt;
position:
absolute;
top: 50%;
left: 50%;
transform:
translate(-50%,-50%);
display:
grid;
place-items:
center;
overflow:
hidden;
text-align:
center;
border-radius: 20px; }
.box{
width:
400pt;
height:
240pt;
border: 3pt
solid rgba(255,255,255,.1);
position:
absolute;
}
.b1{
transform:
rotate(30deg);
}
.b2{
transform:
rotate(-30deg);
}
.profile{
position:
absolute;
width:
80pt;
height:
80pt;
display:
grid;
place-items: center;
top: 22pt;
border: 3px
solid rgba(255,255,255,.2);
border-radius: 0 0 50% 50%;
}
img{
position:
absolute;
width:
50pt;
height:
50pt;
border-radius: 50%;
border: 2pt
solid white;
}
.planics{
color:
#700a0a;
position:
absolute;
top: 50pt;
font-size:20pt ;
text-shadow: 2px 2px 2px #c7f6ee;
font-family: 'Quicksand',sans-serif;
letter-spacing: 3pt;
word-spacing: 3pt;
text-decoration: underline;
}
.skills{
width:
150pt;
height:
150pt;
position:
absolute;
left: 50%;
top:
135pt;
transform:
translateX(-50%);
font-family: cursive;
overflow:
hidden;
text-align: center;
}
.skill{
color:
white;
font-size:
18pt;
position:
relative;
top:
-10pt;
}
li{
color:
white;
position:
absolute;
left:
15pt;
top:40pt;
font-size:
15pt;
}
li:nth-child(2){
top:
70pt;;
}
li:nth-child(3){
top:
100pt;
}
.html,.css,.js{
border:
2px solid rgba(32,32,32,.6);
width:
120pt;
height:
5pt;
border-radius: 10pt;
position:
absolute;
left:50%;
transform:
translateX(-50%);
}
.html{
top:60pt;
}
.css{
top:88pt;
}
.js{
top:
120pt;
}
.h{
background-image: linear-gradient(to
right,rgb(248,49,14),rgb(150,16,16));
width:
80%;
height:
3pt;
border-radius: 10px;
animation:h 2s ease-out;
box-shadow: 0px 0px 2pt blue;
}
@keyframes
h{
0%{
width:
0;
}
}
.c{
background-image: linear-gradient(to right,orange,red);
width:
85%;
height:
3pt;
border-radius: 10px;
animation:
c 2s ease-out;
box-shadow: 0px 0px 2pt red;
}
@keyframes
c{
0%{
width:
0;
}
}
.j{
background-image:
linear-gradient(to right,#22ff8d,green);
width:
30%;
height:
3pt;
border-radius: 10px;
animation:
j 2s ease-out;
box-shadow: 0px 0px 2pt #22ff8d;
}
@keyframes
j{
0%{
width:
0;
}
}
.location{
width:
50pt;
height:
50pt;
position:
absolute;
bottom:
10pt;
color:
white;
letter-spacing: 3pt;
font-family: 'Righteous',cursive;
display:
grid;
place-items: center;
border-bottom:2px solid rgba(255,255,255,.3) ;
border-radius: 0 0 50% 50%;
}
.fa{
position:
absolute;
top: 3pt;
}
.India{
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(to right,orange,white,green);
position:
absolute;
top: 5pt;
}
</style>
</head>
<body>
<div
class="container">
<div
class="b1 box">
</div>
<div class="b2
box">
</div>
<div
class="profile">
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtsQd1ScyjOEm3vBVFwvc3nYPK19M4FSNdgkV6m9mQeLs7gQSc7RK1v-qj1cvGV39Fo31kf7CcwHMqunX-hLKZnvQ7CNKnT27O1bDonWrk8NDzsIANDJxAUJ261KkUq1W49MV9j8AbdtPF/s320/IMG_20200511_233739_720.png"
alt="">
<p
class="planics">Planics Dev</p>
</div>
<div
class="skills">
<p
class="skill">My Skills</p>
<ul>
<li>Html</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<div
class="html">
<div class="h"></div>
</div>
<div
class="css">
<div class="c"></div>
</div>
<div
class="js">
<div class="j"></div>
</div>
</div>
<div
class="location">
<i
class="fa fa-map-marker"></i><br>
<p
class="India"><b>India</b></p>
</div>
</div>
</body>
</html>
|
0 coment�rios: