#CARD DESIGNING:- (VIDEO 29)
SOURCE CODE:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercise 3 - Design this Card</title>
<style>
body {
font-family: sans-serif;
}
.img>img {
width: 540px;
position: relative;
left: 20px;
top: 20px;
border-radius: 25px;
}
.card {
background-color: rgb(255, 255, 255);
height: 75vh;
width: 30vw;
margin: 100px auto;
position: relative;
border-radius: 25px;
border: 2px solid rgb(0, 191, 255);
}
.capsule1 {
background-color: rgb(192, 207, 255);
position: relative;
left: 50px;
top: 50px;
padding: 5px 20px;
font-weight: 400;
border-radius: 15px;
}
.capsule2 {
background-color: rgb(192, 207, 255);
position: relative;
left: 100px;
top: 50px;
font-weight: 400;
padding: 5px 20px;
border-radius: 15px;
}
.text {
position: relative;
top: 90px;
margin: 0 50px;
font-weight: 900;
}
.para {
position: relative;
top: 110px;
margin: 0 50px;
color: rgb(176, 176, 176);
}
button{
position: relative;
top: 200px;
left:232px;
padding: 10px 20px;
border-radius: 15px;
color: blue;
background-color: rgb(171, 216, 255);
border: none;
}
button:hover{
background-color:rgb(0, 136, 255);
color: white;
}
.card:hover{
border: 2px solid rgb(0, 191, 255);
box-shadow: 7px 20px 30px rgb(87, 87, 87);
}
</style>
</head>
<body>
<div class="card">
<div class="img">
<img src="img.jpg" alt="">
</div>
<span class="capsule1">Nature</span>
<span class="capsule2">Lake</span>
<div class="text">
Shivam Garade
</div>
<div class="para">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident rem velit mollitia nesciunt non nam,
reiciendis quis cumque at pariatur, enim expedita totam.
reiciendis quis cumque at pariatur, enim expedita totam.
reiciendis quis cumque at pariatur, enim expedita totam.
reiciendis quis cumque at pariatur, enim expedita totam.
</div>
<button>Read More</button>
</div>
</body>
</html>
Comments
Post a Comment