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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<div id="card">
<div class="header">
<div class="logo"><img src="logo.jpg" alt=""></div>
<div class="title"><p>SR Application Limited</p></div>
<div class="menu"><img src="ic_menu.svg" width="20px" alt=""></div>
</div>
<div class="thumbnail">
<div class="likes"><img id="white-heart" src="heart.png" alt=""></div>
<img src="logo.jpg" alt="">
</div>
<div class="footer">
<div class="footer1">
<div class="like"><img src="heart.png" alt=""></div>
<div class="message"><img src="message.png" alt=""></div>
<div class="send"><img src="send_home.png" alt=""></div>
</div>
<div class="slide">
<div class="a1"></div>
<div class="a1"></div>
<div class="a1"></div>
<div class="a1"></div>
</div>
<div class="save"><img src="save_instagram.png" alt=""></div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
html,body{
width: 100%;
height: 100%;
}
#main{
width: 100%;
height: 100vh;
position: relative;
animation: back 5s linear infinite;
}
@keyframes back{
0%{
background-color: black;
}20%{
background-color: rgb(188, 213, 0);
}40%{
background-color: rgb(215, 7, 7);
}60%{
background-color: rgb(9, 144, 11);
}80%{
background-color: rgb(120, 6, 111);
}100%{
background-color: black;
}
}
#card{
width: 20%;
height: 60vh;
background-color: rgb(255, 255, 255);
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-shadow: 0 0 20px black;
border-radius:5px;
transition: 2s;
}
#card:hover{
width: 20%;
height: 60vh;
transition: 2s;
background-color: rgb(255, 255, 255);
position: relative;
/* position: absolute; */
top: 50%;
left: 50%;
transform: translate(-50%,-55%);
box-shadow: 0 0 20px black;
border-radius:5px;
}
#main .header{
width: 100%;
height: 10%;
padding: 2px;
position: relative;
display: flex;
}
.logo{
width: 40px;
width: 40px;
background:linear-gradient(#da520e,#fff,#0c9d04);
border-radius:50px;
position: relative;
overflow: hidden;
}
.logo img{
width: 96%;
height: 96%;
position: absolute;
top: 50%;
left: 50%;
border-radius:50px;
transform: translate(-50%,-50%);
object-fit: cover;
object-position: center;
}
.title{
position: absolute;
top: 25%;
left: 15%;
}
.menu{
position: absolute;
right: 5px;
top: 25%;
}
/* //thumbnail */
.thumbnail{
width: 100%;
height: 80%;
position: relative;
border-radius:10px;
/* overflow: hidden; */
}
.thumbnail img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
padding: 2px;
}
.likes{
width: 70px;
height: 70px;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
opacity: 0;
}
.likes:hover{
opacity: 1;
}
/* //footer */
.footer{
width: 100%;
height: 10%;
display: flex;
position: relative;
}
.footer1{
width: 45%;
height: 90%;
position: relative;
}
.footer1 .like{
width: 30px;
height: 30px;
position: absolute;
top: 50%;
left: 15%;
transform: translate(-50%,-50%);
}
.footer1 .like img{
width: 25px;
height: 25px;
position: absolute;
top: 10%;
left: 10%;
}
.footer1 .message{
width: 30px;
height: 30px;
position: absolute;
top: 50%;
left: 45%;
transform: translate(-50%,-50%);
}
.footer1 .message img{
width: 25px;
height: 25px;
position: absolute;
top: 10%;
left: 10%;
}
.footer1 .send{
width: 30px;
height: 30px;
position: absolute;
top: 50%;
left: 75%;
transform: translate(-50%,-50%);
}
.footer1 .send img{
width: 25px;
height: 25px;
position: absolute;
top: 10%;
left: 10%;
}
.footer .slide{
width: 20%;
width: 20%;
display: flex;
position: relative;
margin-left: -5px;
}
.slide .a1{
width: 5px;
height: 5px;
margin-left: 5px;
background-color: #2f2f2f;
margin-top: 30%;
border-radius: 50px;
margin-left: 3px;
}
.footer .save{
width: 40px;
height: 40px;
position: absolute;
right: 5px;
top: 5%;
}
.footer .save img{
width: 30px;
height: 30px;
position: absolute;
top: 10%;
left: 10%;
}
output: -
Post a Comment