Nathan Precious
How to create aesthetically pleasing cards using HTML and CSS.

How to create aesthetically pleasing cards using HTML and CSS.

Nathan Precious's photo
Nathan Precious
·

3 min read

Hey besties,

I'll be showing us a quick one on;

HOW TO CREATE A BEAUTIFUL CARD ANIMATION USING HTML AND CSS. (This article is written with the new frontend developer in mind.)

Let's go,

First off open a new file in HTML and save it using an extension ".html" e.g cards.html Repeat for your CSS file, and save using the extension ".css" e.g cards.css Link your CSS file to your html page using the tag.

Alright! For the HTMl part, Create divisions using the div tag and press enter tag and give them their various classes or .div-class and press Enter.

Here is what your first div should look like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cards</title>
</head>
<body>
<div class="gencard-div"></div>
</body>
</html>

A general div. Create another div in it, and give it another class name. You should have this;

<div class="gencard-div">
<div class="card-container>
</div>
</div>

In this div, create an image tag Give it a class; E.g . image-container

This sequence will follow, but this time you will wrapping different tags in their divisions. Like this,

<div class="gencard-div">
<div class="card-container"
<div class="image-container"
<img src-"( put in any image/image link of your choice " alt="(general name for your image">
</div>
<div class="content-container">
<h2 class="heading">e.g Lunch Ideas</h2>
<span class="content" e.g Having trouble choosing lunch? We can be of help.</span>
</div>
<div class=btn-container">to
<a href="" class="btn">Read More</a>
</div>
</div>
</div>

If you have successfully put this code up then, Welldone, you are done with the HTMl part. Feel free to copy and paste.

For the CSS part; Give the body a styling;

body{
background: rgb(59,  4,  59);
font-family: cursive;
padding: 10px; 
margin: 0;
}

Now, we start styling the different classes. Don't forget to feel free to copy, paste and analyze.

 gencard-div {
width: 840px;
margin: auto;
display: block;
margin-top: 10%;
}

. card-container {
float:left;
margin:20px;
display: flex;
align-items: center;
flex-direction: column;
width:240px;
height:320px;
overflow: hidden;
background: @rgba(209, 203, 203, 0.87);
border-radius: 5px;
box-shadow: 0 0 3px 0 rgb(7,7);
transition: all 0.4s;
}

. image-container:hover{
border:2px solid plum;
transform: translateY(-10px);
box-shadow:0px 10px  15px  15px  rgb(125, 125, 131)
}

.image-container{
display: block;
width:100%;
height:180px;
overflow:hidden;
}

. image-container  img{
width:100%;
}

. content-container{
display: flex;
align-items: center;
flex-direction: column;
height:140px;
padding: 10px 10px;

. content-container  .title{
padding:0;
margin:10px0;
font-size:20px;
color: blueviolet;
}

. content-container . content {
font-size: 15px;
text-align: center;
color: black;

. btn-container {
display: flex;
align-items: center;
height: 40px;
}

. btn-container .btn{
width: 100%;
padding: 6px 5px;
text-decoration: none;
background: 1iner-gradient ();
color: beige;
border radius:6px;
font-size: 15px;
transition: all 0.3s;
margin-bottom:20px;
}

. btn-container .btn:hover{
padding-left:15px;
}

Hey besties, The color choices in the CSS part were randomly selected (not professionally). I will work on giving you a web page worthy UI.

I hope you learn something new from this or refresh your memory on card styling using HTML and CSS.

HTMLCSS