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 class="a">
<div class="b">
<div class="c">
<p>+91 6260396658</p>
</div>
<div class="d">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis temporibus, fugit deleniti molestiae.</p>
</div>
<div class="e">
<a href="">En</a>
</div>
<div class="f">
<p>About</p>
<p id="menu">Menu</p>
<p id="team">Team</p>
</div>
</div>
<div class="g">
<div class="h"><p>BUILDING</p></div>
<div class="i"><p>VISION/</p></div>
<div class="j"><p>CREATING</p></div>
<div class="k"><p>REALITY</p></div>
</div>
<div class="l">
<p>Lorem ipsum dolor sit.</p>
</div>
</div>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'gilroy';
}
html,body{
width: 100%;
height: 100%;
background-color: black;
}
.a{
width: 100%;
height: 100vh;
background-image: url("https://images.unsplash.com/photo-1472224371017-08207f84aaae?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
background-position: center;
background-size: cover;
}
.b{
width: 100%;
height: 15vh;
/* background-color: aqua; */
display: flex;
}
.c{
width: 25%;
height: 15vh;
/* background-color: blue; */
position: relative;
}
.c p{
color: aliceblue;
position: absolute;
font-size: 16px;
top: 40%;
left: 10vh;
font-weight: 600;
}
.d{
width: 25%;
height: 15vh;
/* background-color: rgb(11, 189, 46); */
position: relative;
}
.d p{
font-size: 16px;
position: absolute;
color: aliceblue;
top: 30%;
font-weight: 600;
}
.e{
width: 25%;
height: 15vh;
/* background-color: rgb(188, 8, 38); */
position: relative;
}
.e a{
position: absolute;
font-size: 16px;
top: 35%;
left: 30vh;
color: aliceblue;
font-weight: 600;
}
.f{
width: 25%;
height: 15vh;
/* background-color: rgb(188, 104, 8); */
position: relative;
right: 10vh;
font-size: 16px;
color: aliceblue;
}
.f p{
position: absolute;
right: 5vh;
top: 15%;
letter-spacing: 3PX;
font-weight: 700;
}
.f #menu{
top: 33%;
}
.f #team{
top: 51%;
}
.g{
width: 100%;
height: 75vh;
/* background-color: rgb(3, 50, 50); */
position: relative;
color: rgb(234, 234, 234);
transition: 2s;
animation: ani 5s linear infinite;
}
@keyframes ani {
0%{
color: rgba(234, 234, 234, 0.785);
}20%{
color: rgba(200, 203, 30, 0.824);
}40%{
color: rgba(20, 79, 4, 0.751);
}60%{
color: rgba(4, 161, 164, 0.724);
}80%{
color: rgba(157, 5, 147, 0.655);
}100%{
color: rgba(234, 234, 234, 0.806);
}
}
.h{
position: relative;
margin-left: 10%;
width: 40%;
height: 16vh;
}
.i{
position: relative;
margin-left: 42%;
width: 40%;
height: 16vh;
/* background-color: rgb(102, 62, 9); */
}.j{
position: relative;
margin-left: 16%;
width: 40%;
height: 16vh;
/* background-color: rgb(240, 24, 9); */
}.k{
position: relative;
margin-left: 30%;
width: 40%;
height: 20vh;
/* background-color: rgb(21, 191, 18); */
}
.g P{
font-size: 140px;
font-weight: 500;
}
.l{
width: 100%;
height: 10vh;
/* background-color: blueviolet; */
color: aliceblue;
position: relative;
}
.l p{
position: absolute;
top: 35%;
left:10VH;
font-weight: 600;
}
output: -
إرسال تعليق