html css card

Awesome css responsive card

Cards are very important in website design nowadays because they have a lot of interactive content and information about the products, etc. Knowing how to make them will surely help you to polish your website design.

Today we will make some awesome looking cards using HTML and CSS with minimum use of code. To achieve this we will use a CSS grid layout system. We will also use some cool CSS property to cut some pieces of design.

If you prefer video over written tutorial you can watch it from down below.

The source code for this card will be on the bottom of the page.

https://vimeo.com/553651026

HTML Part

Let’s begin with HTML first. On the top of our HTML boilerplate include path to CSS, google font and to the font awesome.

We will need font-awesome for icons at the top of the card.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Card</title>
<!-- Custom style -->
<link rel="stylesheet" href="css/style.css">
<!-- Font -->
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>

In our body, we have a container that serves us to adjust the space around the cards and to make a layout. For the layout, we will use the CSS grid. I will explain how we will set it up later in the CSS part of the tutorial.

Inside the container, we have 3 cards. Cards consist of two parts: card-top and card-body. Inside card-top is the icon, and inside card-body is text and the button.

Here is the whole HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Card</title>
<!-- Custom style -->
<link rel="stylesheet" href="css/style.css">
<!-- Font -->
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>
<body>
<div>
<div>
<div>
<i></i>
</div>
<div>
<h1>Birthday Party</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi veritatis architecto enim consequatur, assumenda ipsum molestiae nemo, amet voluptas aspernatur.</p>
<a href="#">Book Now &rarr;</a>
</div>
</div>
<div>
<div>
<i></i>
</div>
<div>
<h1>Birthday Party</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi veritatis architecto enim consequatur, assumenda ipsum molestiae nemo, amet voluptas aspernatur.</p>
<a href="#">Book Now &rarr;</a>
</div>
</div>
<div>
<div>
<i></i>
</div>
<div>
<h1>Birthday Party</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi veritatis architecto enim consequatur, assumenda ipsum molestiae nemo, amet voluptas aspernatur.</p>
<a href="#">Book Now &rarr;</a>
</div>
</div>
</div>
</body>
</html>

CSS

In the body element, we have included our font, we have reset our HTML with the margin set to 0, and we have included border, padding, and margin in the total size of body element by setting box-sizing to border-box.

 

body {
font-family: 'Raleway', sans-serif;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

In the div with the class we have set how will our layout look and background image.

The background-size is cover to cover the whole element, and background-repeat is set to no-repeat to not repeat.

The layout is dictated by the CSS grid. In order to achieve responsive design we have set: grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)).

This means that the columns will repeat and auto-fit with minimal width of 350px, and maximal width of 1fr.

1fr stands for one part of the available space.

Grid-column-gap is space between cards on the horizontal axis, grid-row-gap is space between cards on the vertical axis. We need to add a grid-row-gap for the mobile layout. If we don’t do that then cards will overlap each other.

And lastly, padding is for some space around cards.

.container {
background-image: url('../img/cover.jpg');
background-size: cover;
background-repeat: no-repeat;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-column-gap: 30px;
grid-row-gap: 150px;
padding: 200px;
}

To move the top of the card(icon)  in the center on the horizontal axis we will set card display to the grid, and align-items to center. We will also add the position property and set it to the relative in order to move the card top element to the top -120px.

card top

Card top

The width and height of this element are 200px. The position property is set to absolute because the card position is relative and we will move this element according to the parent element in this case .card.

Card-top currently looks like this

So how we gonna achieve that skewed look? We will use the clip-path property.

With clip-path property, we decide which parts to shown and which do not show. In this case, we will use clip-path with the value of polygon(). Inside these parentheses, we add x and y coordinates. For example clip-path: polygon(40% 100%), this means the x coordinate is on 40% and we will see what is between 0 and 40% rest will be clipped, while for the y is 100% and we will see the whole element on the y-axis.

Our clip-path is clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

clip path

First value: x is 50% from the left and Y is 0% from the top.

Second is X 100% from left, Y 50% from the top, and so on.

We have added a background color, moved the element to the top 100px and centered icon using the CSS grid layout. To change the color of the icon we use font  awesome icon class.

.card-top {
width: 200px;
height: 200px;
background-color: rgba(255, 255, 255, .85);
position: absolute;
top: -120px;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
display: grid;
justify-content: center;
align-items: center;
}
.fas {
color: red;
font-size: 50px;
}

Next is a card-body element. We have added some space to the elements inside the card-body by adding padding. 80px to the top, 30px to the right and left and 70px to the bottom. Text align to the center.

We also need to add a clip-path property to this element. The easiest way to achieve precise number is to put some initial numbers and open developer tools and increase and decrease numbers like this:

card body clip path

.card-body {
background-color: rgba(255, 255, 255, .85);
padding: 80px 30px 70px;
text-align: center;
clip-path: polygon(0 0, 20% 0, 50% 28%, 80% 0, 100% 0, 100% 100%, 0 100%);
}

We have transformed our heading to uppercase and added margin to the top because we have moved our card-top to top.

The card text is also moved a little bit to the bottom using margin.

.card-heading {
color: red;
margin-top: 70px;
text-transform: uppercase;
}
.card-text {
margin-bottom: 30px;
}

The underline for the button was removed setting text-decoration property to none. Text color for the button is red, space around text in button is adjusted by padding.

The nice border on the bottom is set by the border-bottom property. We have used transition property to set the speed of the hover state for the button.

On hover our button becomes red and text color changes to white.

.btn {
color: red;
text-decoration: none;
border-bottom: 2px solid red;
padding: 5px 10px;
font-size: 18px;
transition: all .3s;
}
.btn:hover {
background-color: red;
color: #fff;
}

The only thing we need to set up in order to achieve our cards to be mobile responsive is to decrease padding on our container div and maybe you will need to change card-body clip-path values a little bit depending on what is the width of your device.

@media screen and (max-width: 768px) {
.container {
padding: 100px 5px;
}
.card-body {
clip-path: polygon(0 0, 20% 0, 50% 25%, 80% 0, 100% 0, 100% 100%, 0 100%);
}
}

Leave a Reply

Your email address will not be published.