How to Create Cards Using HTML and CSS

Categories: CSS TutorialHTML TutorialWeb Designs

How to Create Cards Using HTML and CSS

cards design using html and css

Contents hide

2 More HTML and CSS Designs With Code and Tutorials

Learn How to create cards using html and css only, this tutorial can be followed by any buddy beginners and intermediates just a basic knowledge of HTML and CSS is required for this tutorial if you don’t have knowledge of html and css.

I will suggest you to check out our HTML and CSS tutorials on YouTube – Check Here

View 10 Best Web Development Books

Tutorial

Code

<!DOCTYPE html>
<html>
<head>
 <title>Cards</title>
</head>

<style type="text/css">


*{
 margin: 0px;
 padding: 0px;
}
body{
 font-family: arial;
}
.main{

 margin: 2%;
}

.card{
     width: 20%;
     display: inline-block;
     box-shadow: 2px 2px 20px black;
     border-radius: 5px; 
     margin: 2%;
    }

.image img{
  width: 100%;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  

 
 }

.title{
 
  text-align: center;
  padding: 10px;
  
 }

h1{
  font-size: 20px;
 }

.des{
  padding: 3px;
  text-align: center;
 
  padding-top: 10px;
        border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
button{
  margin-top: 40px;
  margin-bottom: 10px;
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
  padding:10px;
}
button:hover{
  background-color: black;
  color: white;
  transition: .5s;
  cursor: pointer;
}

</style>
<body>

<div class="main">

 <!--cards -->

<div class="card">

<div class="image">
   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Gfp-missouri-st-louis-clubhouse-pond-and-scenery.jpg/1199px-Gfp-missouri-st-louis-clubhouse-pond-and-scenery.jpg">
</div>
<div class="title">
 <h1>
Write title Here</h1>
</div>
<div class="des">
 <p>You can Add Desccription Here...</p>
<button>Read More...</button>
</div>
</div>
<!--cards -->


<div class="card">

<div class="image">
   <img src="https://cdn.pixabay.com/photo/2018/01/09/03/49/the-natural-scenery-3070808_1280.jpg">
</div>
<div class="title">
 <h1>
Write title Here</h1>
</div>
<div class="des">
 <p>You can Add Desccription Here...</p>
<button>Read More...</button>
</div>
</div>
<!--cards -->


<div class="card">

<div class="image">
   <img src="https://cdn.pixabay.com/photo/2015/11/07/11/41/lake-1031405_1280.jpg">
</div>
<div class="title">
 <h1>
Write title Here</h1>
</div>
<div class="des">
 <p>You can Add Desccription Here...</p>
<button>Read More...</button>
</div>
</div>
<!--cards -->


<div class="card">

<div class="image">
   <img src="https://cdn.pixabay.com/photo/2018/01/09/03/49/the-natural-scenery-3070808_1280.jpg">
</div>
<div class="title">
 <h1>
Write title Here</h1>
</div>
<div class="des">
 <p>You can Add Desccription Here...</p>
<button>Read More...</button>
</div>
</div>
<!--cards -->


<div class="card">

<div class="image">
   <img src="https://cdn.pixabay.com/photo/2018/01/09/03/49/the-natural-scenery-3070808_1280.jpg">
</div>
<div class="title">
 <h1>
Write title Here</h1>
</div>
<div class="des">
 <p>You can Add Desccription Here...</p>
<button>Read More...</button>
</div>
</div>
<!--cards -->

<div class="card">

<div class="image">
   <img src="https://cdn.pixabay.com/photo/2018/01/09/03/49/the-natural-scenery-3070808_1280.jpg">
</div>
<div class="title">
 <h1>
Write title Here</h1>
</div>
<div class="des">
 <p>You can Add Desccription Here...</p>
<button>Read More...</button>
</div>
</div>
<!--cards -->

<div class="card">

<div class="image">
   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Gfp-missouri-st-louis-clubhouse-pond-and-scenery.jpg/1199px-Gfp-missouri-st-louis-clubhouse-pond-and-scenery.jpg">
</div>
<div class="title">
 <h1>
Write title Here</h1>
</div>
<div class="des">
 <p>You can Add Desccription Here...</p>
<button>Read More...</button>

</div>
</div>
<!--cards -->


<div class="card">

<div class="image">
   <img src="https://cdn.pixabay.com/photo/2018/01/09/03/49/the-natural-scenery-3070808_1280.jpg">
</div>
<div class="title">
 <h1>
Write title Here</h1>
</div>
<div class="des">
 <p>You can Add Desccription Here...</p>
<button>Read More...</button>
</div>
</div>
<!--cards -->


<div class="card">

<div class="image">
   <img src="https://cdn.pixabay.com/photo/2015/11/07/11/41/lake-1031405_1280.jpg">
</div>
<div class="title">
 <h1>
Write title Here</h1>
</div>
<div class="des">
 <p>You can Add Desccription Here...</p>
<button>Read More...</button>
</div>
</div>
</div>
</body>
</html>

More HTML and CSS Designs With Code and Tutorials

reecry

Next How to Create Login /Sign In form Using HTML and CSS (JavaScript) »

Previous « Dropdown Menu with Sub menu Using HTML and CSS only

View Comments

Unknown says:

November 13, 2019 at 12:38 pm

How can we use the read more button so that when we click it it shows the left paragraph
Happypackers.in says:

November 13, 2019 at 12:38 pm

Packers and movers pune http://happypackers.in
Moshe Gradel says:

April 25, 2020 at 9:37 pm

First time visiting your website, I enjoy your blog!