Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@manuchaitanya17
manuchaitanya17 authored Jul 12, 2024
1 parent 21ed865 commit f21e22f
Showing 1 changed file with 254 additions and 0 deletions.
254 changes: 254 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,254 @@
<!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>Test</title>
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<link
href="https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans&family=Lato:wght@700&family=Michroma&family=Montserrat:wght@400;800&family=Nanum+Gothic:wght@700&family=Pinyon+Script&display=swap"
rel="stylesheet">

<style>
/* CSS Reset: FOR THE COMPLETE BODY SETUP */
body {
margin: 0px;
padding: 0px;
font-family: 'Montserrat', sans-serif;
background-color: black;
background-image: url('../img/bg.jpg');
background-size: 100%;
color: white;
}
/* COMPLETE CONTAINER-1 */
.container-1 {
height: 50px;
/* border: 2px red solid; */
margin: 10px 30px;
position: relative;
font-family: 'DM Sans', sans-serif;
}

/* BOX-1 IN CONTANER-1 */
.boxes-c1 {
/* border: blue solid 2px; */
height: 50px;
margin: 0px;
}

/* ACTUALLY BOX-1(AS BOX-1 WAS REMOVED) */
#box-2{
width: 70%;
display: block;
margin: 0px auto;
text-align: center;
}

#box-3 {
width: 15%;
display: inline-block;
position: absolute;
right: 0px;
top: 0px;
}

.container-2 {
/* border: 2px green solid; */
height: 800px;
margin: 30px;
position: relative;
}

.boxes-c2 {
margin: 10px;
/* border: 2px yellow solid; */
height: 150px;
}

#box-4 {
width: 50%;
height: 400px;
display: inline-block;
position: absolute;
top: 380px;
left: 30px;
font-family: 'Montserrat', sans-serif;
font-size: 65px;
font-weight: 800;
}

#box-5 {
width: 80%;
font-family: 'Montserrat', sans-serif;
text-align: center;
font-size: 50px;

display: inline-block;
position: absolute;
right: 140px;
top: 40px;
height: 100px;
}

div>img {
filter: invert(100%);
width: 170px;
}

.boxes-c1 {}

div>h1 {
margin: 4px;
}

div ul li a {
text-decoration: none;
padding: 85px;
font-size: 16px;
color: white;
box-sizing: border-box;
}

div ul li {
display: inline-block;
}

div ul li a:hover {
color: grey;
/* font-size: 25px; */
/* BETTER TO BE DONE THROUGH TRANSITION */
box-sizing: border-box;
}


div button {
font-size: 20px;
border-radius: 10px;
color: white;
background-color: grey;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
width: 300px;
transition: width 0.4s ease-in-out;
}

div button:hover {
background-color: rgb(64, 64, 55);
width: 50%;
height: 50px;
}
/* STYLING FOR BOX-5 */
h1 {
font-size: 130px;
font-weight: 700;
font-family: 'Anton', sans-serif;
max-width: 40ch;
text-align: center;
transform: scale(0.94);
animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
}

@keyframes scale {
100% {
transform: scale(1);
}
}

span {
display: inline-block;
opacity: 0;
filter: blur(4px);
}

span:nth-child(1) {
animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(2) {
animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(3) {
animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(4) {
animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(5) {
animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(6) {
animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(7) {
animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

span:nth-child(8) {
animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

@keyframes fade-in {
100% {
opacity: 1;
filter: blur(0);
}
}

div button a {
color: white;
text-decoration: none;
}
</style>
</head>

<body>
<!-- CONTAINER-1(NAVIGATION BAR) HEADER-> NAV-> UL-> LI -->
<header class="container-1">
<!-- BOX-2(ACTUALLY BOX-1, AS BOX-1 WAS REMOVED) -->
<div class="boxes-c1" id="box-2">
<nav style="margin: 0px ;">
<ul style="margin:auto;">
<li class="tabs" id="tab1"><a href="test.html">HOME</a></li>
<li class="tabs" id="tab1"><a href="about.html">ABOUT</a></li>
<li class="tabs" id="tab1"><a href="orders.html">ORDERS</a></li>
<li class="tabs" id="tab1"><a href="store.html">STORES</a></li>
</ul>
</nav>
</div>
</header>

<!-- CONATAINER-2(LENSSHUB+ EXP THE CLEARITY+ SIGNUP) -->
<div class="container-2">
<!-- BOX-4(ACTUALLY BOX-2, AS BOX-1 AND BOX-3 WAS REMOVED) -->
<div class="boxes-c2" id="box-4">Experience the clearity in your <br> <span style="color:grey;">वि-SION.</span>
<p style="font-size: 20px; margin: 0px;">SIGN-UP AND GET 50% INSTANT DISCOUNT ON YOUR FIRST PURCHASE.</p>
<button><a href="signup.html">SIGN-UP</a>
</button>
</div>

<!-- BOX-2(ACTUALLY BOX-5, AS BOX-1 AND BOX-3 WAS REMOVED) -->
<div class="boxes-c2" id="box-5">
<h1>
<span style="color:rgb(0, 0, 0);">L</span>
<span style="color:rgb(30, 30, 30);">E</span>
<span style="color:rgb(80, 80, 80);">N</span>
<span style="color:rgb(90, 90, 90);">S</span>
<span style="color:rgb(120, 120, 120);">S</span>
<span style="color:rgb(180, 180, 180);">H</span>
<span style="color:rgb(210, 210, 210);">U</span>
<span style="color:rgb(250,250, 250);">B</span>
</h1>
</div>
</div>
</body>
</html>

0 comments on commit f21e22f

Please sign in to comment.