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
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
- Responsive Landing Page Design Using HTML and CSS Only
- Responsive Image Gallery Design Using HTML and CSS Only
- Working Digital Clock Design Using HTML, CSS and JavaScript
- Beautiful Card Design Tutorials HTML and CSS Only
- Beautiful Animated Button Using CSS
- Card UI Design Using CSS
- Toggle Button Design Using CSS
- iPhone Animation Using CSS
- Scrolling effect Using CSS
