index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Jungle</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<h1>Welcome to Jungle</h1>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</body>
</html>
style.css
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: horror area;
}
html,body{
width: 100%;
height: 100%;
}
#main{
width: 100%;
height: 100%;
background-image: url(https://images.unsplash.com/photo-1514813621023-7a1e3fca8c1b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);
background-position: center;
background-size: cover;
display: flex;
justify-content: space-evenly;
align-items: center;
}
#main .card{
width: 300px;
height: 400px;
background-color: rgba(0,0,0,0.5);
border-radius: 10px;
padding: 20px;
transition: all ease 1s;
background-image: url(https://images.unsplash.com/photo-1513326738677-b964603b136d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=449&q=80);
background-size:cover;
background-position: center;
}#main .card:nth-child(2){
width: 300px;
height: 400px;
background-size:cover;
background-position: center;
border-radius: 10px;
padding: 20px;
transition: all ease 1s;
background-image: url(https://images.unsplash.com/photo-1520106212299-d99c443e4568?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80);
}#main .card:nth-child(3){
width: 300px;
height: 400px;
border-radius: 10px;
padding: 20px;
background-size:cover;
background-position: center;
transition: all ease 1s;
background-image: url(https://images.unsplash.com/photo-1512495039889-52a3b799c9bc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60);
}
#main .card:hover{
scale: 1.1;
}
#main h1{
position: absolute;
top: 10%;
color: white;
font-size: 40px;
letter-spacing: 2px;
}
output: -
Post a Comment