In this tutorial, we will see how to create a Card in HTML and will give
it some style effects using CSS. In this tutorial we will create a Artist
Card. You can edit this card on your own if you want card for different
things like your profile card etc.
Introduction:
In this, we will be creating 3 cards and will use display:flex; property to align them horizontally.
Also, we will use Font Awesome icon pack for Social media icons and give them :hover style.
Let's start with HTML code firstly.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="Cards.css" />
</head>
<body>
<!--Card container starts here-->
<div class="card-container">
<div class="card1-container" style="display: flexbox">
<div class="artist-image">
<img height="400" src="Media/Artist3.jpg" />
</div>
<div class="artist-name">
<p>Ed Sheeran</p>
</div>
<br />
<div class="artist-description">
<p style="text-align: center">Singer, Writer, Musician.</p>
<br />
</div>
<div class="artist-social-media">
<ul class="social-media-list" style="list-style: none; display: inline-flex">
<li class="instagram">
<a href="#insta" title="Instagram" style="color: black">
<i class="fa fa-instagram"></i>
</a>
</li>
<li class="facebook">
<a href="#fb" title="Facebook" style="color: black">
<i class="fa fa-facebook"></i></a>
</li>
<li class="twitter">
<a href="#twitter" title="Twitter" style="color: black">
<i class="fa fa-twitter"></i>
</a>
</li>
</ul>
</div>
<div class="artist-button">
<input type="Button" value="See Full Profile" />
</div>
</div>
</div>
<!--Card container ends here-->
</body>
</html>
ADVERTISEMENT
Now we have created our HTML Structure for cards, Let's apply some CSS Properties to give this card a good look.
CSS
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
.card-container {
width: max-content;
margin: auto;
justify-content: space-between;
display: flex;
}
.card1-container {
margin: 20px;
width: 300px;
border: 1px solid black;
text-align: center;
height: max-content;
box-shadow: 0 5px 10px rgba(0, 0, 0.2);
}
.card1-container img {
width: 100%;
}
.artist-image {
width: 300px;
}
.artist-description {
padding: 10px;
text-align: justify;
line-height: 1.5;
}
.artist-name {
color: #000;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
}
.social-media-list > li {
text-align: center;
font-size: 21px;
padding-right: 20px;
}
.artist-button input[type="button"] {
background-color: transparent;
border: none;
color: #679bcf;
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
font-weight: bold;
font-size: 14px;
padding: 15px;
letter-spacing: 2px;
}
.artist-button input[type="button"]:hover {
background: #444d55;
letter-spacing: 1px;
-webkit-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
box-shadow: 5px 40px -10px rgba(0, 0, 0, 0.57);
transition: all 0.4s ease 0s;
}
.fa-instagram:hover {
color: #dd2a7b;
transition: 0.2s ease-in;
}
.fa-facebook:hover {
color: rgb(38, 38, 204);
transition: 0.2s ease-in;
}
.fa-twitter:hover {
color: #13a3b5;
transition: 0.2s ease-in;
}
Output:
ED Sheeran image credits: Wikipedia
Live Example:
Credits:Codepen
In this codepen example, we have used 2 cards in which display:flex; property is
used.
See the Pen
Cards in HTML using CSS by Abhishek Raj (@_abhishek_raj_)
on CodePen.
