Learn how to create beautiful card using css, this video can be followed by any beginners or intermediate.
Code :
<!DOCTYPE html>
<html>
<head>
<title>Crads</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
font-family: "Arial";
}
.card{
width: 440px;
height: 240px;
background: linear-gradient(to right, #F44336, #E91E63);
margin: 15%;
border-radius: 10px;
box-shadow: 0px 0px 10px #E91E63;
}
.card-image{
background-color: #e4e4e4;
width: 140px;
height: 140px;
border-radius: 50%;
position: relative;
top: 50px;
left: -70px;
box-shadow: 0px 0px 10px white;
}
.image{
width: 170px;
height: auto;
position: relative;
left: -10px;
transform: rotate(30deg);
}
.card-info{
background-color: none;
margin-left: 90px;
position: relative;
top: -125px;
}
.view-button, .buy-button{
width: 150px;
font-size: 21px;
outline: none;
border-radius: 5px;
border: none;
padding: 10px;
cursor: pointer;
}
.buy-button{
background-color: yellow;
transition: .5s;
}
.buy-button:hover{
background-color: black;
color: white;
}
h1,p{
color: white;
font-weight: lighter;
}
</style>
</head>
<body>
<div class="card">
<div class="card-image">
<img src="https://lh3.googleusercontent.com/-fbf1Va1Kgc0/XGer3LXmExI/AAAAAAAAAy8/u8VLUzlhJwImETianzlwAkdaazZWAhrnQCLcBGAs/h120/nike.png" class="image">
</div>
<div class="card-info">
<h1>
Nike O9Q</h1>
<p>Sell By Nike Cop</p>
<br/>
<h1>
Price : 200 $</h1>
<p>It is a Original Nike Shoe called O9Q, It is Made up of strongest Material.</p>
<br/>
<button class="view-button">View</button>
<button class="buy-button">Buy</button>
</div>
</div>
</body>
</html>
