the final result will look like this
before we start coding, try to download these images because we will need them
index.html
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="card">
<div class="card_header">
</div>
<div class="card_body">
<h1>Cheese Pizza</h1>
<h2>Salt Pizza</h2>
<p>Indulge in our 11-inch chicken cheese burst pizzas. Loaded with your favorite toppings.</p>
<span class="price">Price: 45$</span><br>
<button>Order Now</button>
</div>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Open+Sans&family=Roboto&display=swap');
*{
margin: 0;
padding: 0;
outline: 0;
}
.card{
width: 300px;
height: 586px;
box-shadow: rgba(0,0,0,0.3) 0 3px 12px;
border-radius: 10px;
overflow: hidden;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
padding: 0;
}
.card_header{
width: 100%;
height: 50%;
background-color: #0053ff;
background-image: url("background.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
.card_header::after{
content: '';
position: absolute;
display: block;
background-image: url(mask.png);
left: 0;
top: 0;
bottom: 0;
right: 0;
background-size: cover;
background-position: bottom;
mix-blend-mode: screen;
}
.card_body{
padding: 12px;
position: relative;
top: -60px;
height: 50%;
}
.card_body h1{
font-family: 'Montserrat', sans-serif;
margin-bottom: 12px;
}
.card_body h2{
font-family:'Montserrat', sans-serif;
font-weight: 200;
font-size: 12px;
text-align: center;
margin-bottom: 18px;
padding: 8px 5px;
background-color: #FF5252;
width: 120px;
color: #fafafa;
border-radius: 50px;
}
.card_body p{
font-family: 'Open sans',sans-serif;
font-size: 18px;
margin-bottom: 18px;
}
.price{
font-weight: 800;
font-size: 26px;
font-family: 'Open Sans',sans-serif;
}
.card_body button{
padding: 12px 18px;
border: none;
background-color: #FF5252;
color: #fafafa;
font-family: 'Montserrat', sans-serif;
border-radius: 80px;
position: absolute;
bottom: -25px;
right: 0;
margin: 15px;
}
Make a Cool Card Effect in HTML and CSS
Reviewed by Medics
on
September 12, 2020
Rating:
Reviewed by Medics
on
September 12, 2020
Rating:
Get Postal Code
ReplyDelete