How to create a New Style Card in html and css || How to make a card in html and css by techno sunita
html code
bootstrap responsive cards<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=2, minimum-scale=1">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" media="all">
</head>
<body>
<section class="cardSection">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="cardBlock">
<img src="./images/bouquet-of-flowers-1149099_960_720.jpg" alt="" />
<div class="contenBox">
<h3> Bouquet of Flowers </h3>
<p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci obcaecati neque et, dignissimos molestias unde soluta delectus exercitationem minima! Architecto officia doloremque eligendi blanditiis eum enim repudiandae.
Aperiam, asperiores incidunt! </p>
</div>
</div>
</div>
<div class=" col-md-4 ">
<div class="cardBlock">
<img src="./images/beach-1854076_960_720.jpg" alt="" />
<div class="contenBox">
<h3> Bouquet of Flowers </h3>
<p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci obcaecati neque et, dignissimos molestias unde soluta delectus exercitationem minima! Architecto officia doloremque eligendi blanditiis eum enim repudiandae.
Aperiam, asperiores incidunt! </p>
</div>
</div>
</div>
<div class="col-md-4 ">
<div class="cardBlock">
<img src="./images/bouquet-of-flowers-1149099_960_720.jpg" alt="" />
<div class="contenBox">
<h3> Bouquet of Flowers </h3>
<p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci obcaecati neque et, dignissimos molestias unde soluta delectus exercitationem minima! Architecto officia doloremque eligendi blanditiis eum enim repudiandae.
Aperiam, asperiores incidunt! </p>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
CSS code
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
body {
font-family: 'Open Sans', sans-serif;
color: #292929;
background-color: #fff
}
.cardSection {
padding: 100px 0px;
}
.cardBlock {
border-top: 2px solid red;
border-left: 2px solid red;
border-right: 2px solid red;
border-bottom: 8px solid red;
border-radius: 200px 200px 0px 0px;
transition: ease .3s all;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}
.cardBlock:hover {
border-width: 2px 2px 8px 2px;
border-style: solid;
border-color: lawngreen;
}
.cardBlock>img {
max-width: 100%;
height: 260px;
border-radius: 200px 200px 0px 0px;
}
.contenBox {
padding: 15px;
}
.contenBox h3 {
text-align: center;
font-size: 25px;
font-weight: 600;
text-align: center;
margin-bottom: 20px;
margin-top: 15px;
}
.contenBox p {
font-size: 16px;
font-weight: 300px;
text-align: center;
}
No comments:
Post a Comment