<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=div, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="card">
<h1>Iphone 14 pro max</h1>
<h2>Rs 1,49,999/-</h2>
<ul>
<li>1TB Storage</li>
<li>16GB RAM</li>
</ul>
<button>Buy Now</button>
</div>
<div class="card">
<h1>Iphone 14 pro </h1>
<h2>Rs 1,39,999/-</h2>
<ul>
<li>1TB Storage</li>
<li>16GB RAM</li>
</ul>
<button>Buy Now</button>
</div>
<div class="card">
<h1>Iphone 14 plus</h1>
<h2>Rs 89,999/-</h2>
<ul>
<li>1TB Storage</li>
<li>16GB RAM</li>
</ul>
<button>Buy Now</button>
</div>
<div class="card">
<h1>Iphone 14</h1>
<h2>Rs 79,999/-</h2>
<ul>
<li>1TB Storage</li>
<li>16GB RAM</li>
</ul>
<button>Buy Now</button>
</div>
</div>
</body>
</html>
.container{
width: 100%;
height: 600px;
background-color: rgb(33, 32, 32);
position: relative;
display: flex;
}
.container .card{
width: 300px;
height: 400px;
border: none;
border-radius: 35px;
background-color: rgb(52, 50, 50);
box-shadow: 10px 10px 20px rgb(68, 67, 67);
margin: 50px 0 50px 50px;
}
.container .card:hover {
box-shadow: 10px 10px 20px rgb(101, 101, 101);
}
.container .card h1{
font-size: 20px;
color: rgb(158, 155, 155);
padding: 15px 10px 10px 10px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.container .card h2{
font-size: 25px;
color: rgb(221, 215, 215);
padding: 15px 10px 10px 10px;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.container .card ul li{
font-family: 12px;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 10px;
}
.container .card button{
font-size: 15px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
border: 2px solid white;
background-color: transparent;
padding: 10px 80px 10px 80px;
margin: 50px 0 0 30px;
border-radius: 10px;
}
.container .card button:hover{
border: 2px solid rgb(0, 235, 0);
}