How to Design Best card for website 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
How to design Best product card hoverin 2020?
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 ofanimation 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 profile card design using pure html and CSS.
card.html
<!DOCTYPE html>
<html>
<head>
<title>Planics Dev</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css">
<style>
*{
box-sizing: border-box;
}
.card{
padding: 1.3rem 0 1.3rem 0;
box-shadow: 0 0 5px #b4b4b4;
color: #ffffff;
background-color: rgb(243,24,24);
background-image:
-webkit-linear-gradient(right,rgb(181,21,0),rgb(255,21,21));
border-radius: 20px;
}
.profile-img{
max-width: 100px;
border-radius: 50%;
box-shadow: 0 0 100px #b4b4b4;
}
.profile-name{
font-weight: 400;
text-transform: uppercase;
font-size: 1.6rem;
margin-top: .5rem;
}
.profile-username{
font-weight: 300;
text-transform: lowercase;
font-size: 1rem;
margin-top: .5rem;
}
.btns{
padding: 1rem;
padding-top: .4rem;
}
.follow-btn{
border-radius: 35px;
padding-left:1rem;
padding-right: 1rem;
background-color: #000000;
border: 1px solid #ffffff;
box-shadow: none;
}
.follow-btn:hover,.follow-btn:active{
background-color: #ffffff !important;
color: #000000 !important;
border: 1px solid #000000 !important;
box-shadow: 0 0 6px #2b2b2b;
}
</style>
</head>
<body>
<div
class="container">
<div
class="row">
<div class="col-md-5">
<div class="mt-3">
<div class="card">
<div class="container">
<div
class="text-center">
<div
class="pp">
<img class="profile-img"
src="https://yt3.ggpht.com/a/AATXAJw1u95ZoJvBWZNwufXlivO1ESXWzFQyW4DooA=s176-c-k-c0x00ffffff-no-rj"
alt="">
</div>
<div
class="names">
<h2 class="profile-name">Planics Dev</h2>
<h4
class="Profile-username">@planicsdevloper</h4>
</div>
<div
class="btns">
<a
href="https://www.youtube.com/channel/UCB8w1E55m074Tapi8MrQ6Qg?sub_confirmation=1"
class="btn btn-success btn-sm follow-btn"> <i class="fa
fa-user-plus"></i> follow
</a>
<a
href="https://www.youtube.com/channel/UCB8w1E55m074Tapi8MrQ6Qg/about"
class="btn btn-success btn-sm follow-btn"> <i class="fa
fa-eye"></i> visit profile
</a>
</div>
<div
class="about">
<p>
Thank you
for Subscribing! If you have not, Subscribe now!
This
channel is provide latest designing , IT ( information technology ) related
video and also download web template
and web pages from our website. our main aim is providing best web template
and web development tutorial. we are trying to provide best learning resource
to you , our team provide html ,CSS ,bootstrap ,JavaScript ,PHP ,java
,SEO etc.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="mt-3">
<div class="card">
<div class="container">
<div
class="text-center">
<div
class="pp">
<img class="profile-img"
src="https://yt3.ggpht.com/a/AATXAJw1u95ZoJvBWZNwufXlivO1ESXWzFQyW4DooA=s176-c-k-c0x00ffffff-no-rj"
alt="">
</div>
<div
class="names">
<h2 class="profile-name">Planics Dev</h2>
<h4
class="Profile-username">@planicsdevloper</h4>
</div>
<div
class="btns">
<a
href="https://www.youtube.com/channel/UCB8w1E55m074Tapi8MrQ6Qg?sub_confirmation=1"
class="btn btn-success btn-sm follow-btn"> <i class="fa
fa-user-plus"></i> follow
</a>
<a
href="https://planicsdevloper.blogspot.com/" class="btn
btn-success btn-sm follow-btn"> <i class="fa
fa-eye"></i> visit profile
</a>
</div>
<div
class="about">
<p>
Thank you for Subscribing! If you
have not, Subscribe now!
This
channel is provide latest designing , IT ( information technology ) related
video and also download web template
and web pages from our website. our main aim is providing best web template
and web development tutorial. we are trying to provide best learning resource
to you , our team provide html ,CSS ,bootstrap ,JavaScript ,PHP ,java
,SEO etc.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
0 coment�rios: