\<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>UI CARD DESIGN</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<div class="text">
<h2>Gaming Mouse</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
tenetur necessitatibus veniam? Repudiandae in consequatur fuga eaque culpa veniam
perferendis!</p>
<div class="pricing">
<span class="price">$70</span>
<button class="btn">Buy Now</button>
</div>
</div>
<div class="img-sec">
<img src="img.png" alt="">
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
font-family: Century Gothic;
box-sizing: border-box;
}
body{
background: #dfe6e9;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.box{
width: 50%;
background: #ecf0f1;
box-shadow:
0 5px 16.4px rgba(0, 0, 0, 0.036),
0 10.2px 29.3px rgba(0, 0, 0, 0.049),
0 16.1px 38.5px rgba(0, 0, 0, 0.056),
0 24.6px 44.3px rgba(0, 0, 0, 0.061),
0 41.1px 49.7px rgba(0, 0, 0, 0.065),
0 100px 80px rgba(0, 0, 0, 0.07);
padding: 50px;
border-radius: 8px;
}
.text{
float: left;
width: 50%;
}
.text h2{
margin-bottom: 30px;
border-bottom: 2px solid #4cd137;
width: 70%;
font-weight: 500;
}
.pricing{
margin-top: 50px;
}
.pricing span{
font-size: 30px;
letter-spacing: 2px;
}
.pricing .btn{
margin-left: 80px;
padding: 10px 7px;
width: 50%;
border: none;
outline: none;
background: #4cd137;
color: #ffffff;
font-size: 16px;
border-radius: 8px;
letter-spacing: 2px;
cursor: pointer;
transition: .5s ease;
}
.btn:hover{
transform: rotate(360deg);
}
.img-sec{
float: right;
}
.img-sec img{
height: 300px;
}
Comments
Post a Comment