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>EMKO.</title>
<!-- // css style -->
<link rel="stylesheet" href="style.css">
<!-- //google font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Delicious+Handrawn&display=swap" rel="stylesheet">
</head>
<body>
<!-- /* // a class */ -->
<div class="a">
<!-- /* // b class */ -->
<div class="b">
<!-- /* // header id */ -->
<a id="Header" href="#">EMKO.</a>
<!-- /* // c class */ -->
<div class="c">
<a href="">Incorions</a>
<a href="">Furniture</a>
<a href="">Articlos</a>
</div>
</div>
<!-- /* // d class */ -->
<div class="d">
<!-- /* // e class */ -->
<div class="e"></div>
<!-- /* // f class */ -->
<div class="f">
<p id="h1">SR</p>
<p id="h2">Collection</p>
</div>
<!-- /* // g class */ -->
<div class="g">
<!-- /* // h class */ -->
<div class="h">
<p>© 2023 Copyright</p>
</div>
<!-- /* // i class */ -->
<div class="i">
<p>Designed by Abhay Gautam /B24</p>
</div>
<!-- /* // j class */ -->
<div class="j">
<p>Info</p>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
html,body{
width: 100%;
height: 100%;
background-color: rgb(4, 0, 18);
animation: animation 5s linear infinite;
}
@keyframes animation{
0%{
background-color: rgb(4, 0, 18);
}20%{
background-color: rgb(8, 58, 0);
}40%{
background-color: rgb(98, 1, 101);
}60%{
background-color: rgb(112, 74, 0);
}80%{
background-color: rgb(141, 2, 2);
}100%{
background-color: rgb(4, 0, 18);
}
}
/* // a class */
.a{
width: 100%;
height: 100%;
position: relative;
}
/* // b class */
.b{
display: flex;
width: 100%;
height: 10%;
/* background-color: black; */
position: relative;
}
/* header id */
.b #Header{
color: aliceblue;
text-decoration: none;
font-size: 25px;
position: absolute;
top: 30%;
font-family: 'Delicious Handrawn', cursive;
font-weight: 700;
left: 5vh;
}
/* // c class */
.c{
top: 35%;
position: absolute;
left: 20%;
}
.c a{
font-size: 16px;
color:aliceblue;
text-decoration: none;
margin-left: 30px;
font-weight: 500;
font-size: 18PX;
font-family: 'Delicious Handrawn', cursive;
}
/* // d class */
.d{
width: 100%;
height: 90vh;
/* background-color: blue;O */
position: relative;
}
/* // e class */
.e{
width: 25%;
height: 65vh;
background-color: white;
background-image: url("https://images.unsplash.com/photo-1560830889-96266c6dbe96?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80");
/* border-radius: 3px; */
background-position: center;
background-size: cover;
position: absolute;
top: 27.8%;
left: 37.5%;
}
/* // f class */
.f{
width:25.7%;
height: 25vh;
/* background-color: #fff; */
position: absolute;
top: 6vh;
left: 48%;
font-size: 90px;
font-weight: 600;
}
/* // h1 id */
#h1{
position: absolute;
right: 0;
color: #dedede;
font-weight: 500;
font-family: 'Poppins', sans-serif;
}
/* // h2 id */
#h2{
position: absolute;
top: 40%;
font-weight: 500;
color:#d9d9d9;
font-family: 'Poppins', sans-serif;
}
/* // g class */
.g{
/* background-color: #d9d9d9; */
width: 100%;
height: 10vh;
position: absolute;
top: 80vh;
display: flex;
color: #d9d9d9;
position: relative;
}
/* // h class */
.h{
position: absolute;
top: 30%;
left: 5vh;
font-weight: 600;
font-size: 14px;
}
/* // i class */
.i{
position: absolute;
top: 0;
left: 63.4%;
width: 12vh;
font-weight: 600;
font-size: 12px;
}
/* // j class */
.j{
position: absolute;
top: 30%;
right: 5vh;
font-weight: 600;
font-size: 14px;
}
output: -
إرسال تعليق