this is the landing page

fineanmol · Oct 5, 2023 · f507d7a · f507d7a
1 parent 0614cd3
commit f507d7a
Show file tree

Hide file tree

Showing 9 changed files with 199 additions and 0 deletions.
diff --git a/landing/banana.png b/landing/banana.png
diff --git a/landing/index.html b/landing/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="largebox">
+    <section>
+
+        <div class="header">
+            <div class="logo">
+                <h1>JUICES</h1>
+            </div>
+            <div class="nav">
+                <ul>
+                    <li>Home</li>
+                    <li>About</li>
+                    <li>Contact</li>
+                    <li>Login</li>
+
+
+                </ul>
+            </div>
+        </div>
+        <div class="box">
+
+        <div class="content">
+
+                <h1>Get yourself <br>
+                a refressing drink</h1>
+                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro, tempore nulla, nihil laboriosam
+                    ipsam modi aperiam
+                    vitae maiores odio minima ullam nostrum obcaecati quibusdam, nesciunt delectus rerum quo aspernatur
+                    ducimus
+                    voluptates totam asperiores illo excepturi eligendi consectetur. Dolores, labore neque!</p>
+
+                <div class="info">
+                    <a href="#">More Info</a>
+                </div>
+
+            </div>
+            <div class="imgbox">
+            <img src="strawberry.png" class="juice" alt=""></div>
+            </div>
+
+            <div class="pic">
+               <img src="mango.webp"  alt="">
+                <img src="strawberry.png" alt="">
+                <img src="pomegranate.png"  alt="">
+                <img src="orange.png" alt="">
+
+                <img src="banana.png"  alt="">
+
+                <img src="lemon.png"  alt="">
+            </div>
+
+        </div>
+
+    </section>
+</div>
+
+</body>
+
+</html>
diff --git a/landing/lemon.png b/landing/lemon.png
diff --git a/landing/mango.webp b/landing/mango.webp
diff --git a/landing/orange.png b/landing/orange.png
diff --git a/landing/pomegranate.png b/landing/pomegranate.png
diff --git a/landing/strawberry.png b/landing/strawberry.png
diff --git a/landing/style.css b/landing/style.css
@@ -0,0 +1,130 @@
+*{
+    margin:0;
+    padding:0;
+}
+section{
+    width:100%;
+    height:100%;
+    position: relative;
+    background: url(wallpaper2.jpg);
+    background-size: cover;
+    background-position: center;
+    border-radius: 30px;
+    box-shadow: 0px 5px 10px 0px;
+    background: transparent;
+
+
+}
+.largebox{
+    background-image: url(wallpaper2.jpg);
+    padding: 20px 100px;
+    background-size: cover;
+    background-position: center;
+    height: 100vh;
+
+
+
+}
+.header{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0px 50px;
+    position: relative;
+
+
+}
+.logo{
+    margin: 10px;
+    font-size: 25px;
+    font-weight: 500;
+    color: rgb(253, 79, 11);
+
+}
+.nav ul{
+
+    display: flex;
+    /* margin: 10px; */
+    float: right;
+
+
+}
+.nav ul li{
+    list-style: none;
+    margin: 10px 20px;
+    padding: 7px;
+    font-size: 20px;
+    border: 0px solid rgb(2, 2, 2);
+    border-radius: 30px;
+    color: rgb(245, 43, 43);
+    background-color:#fff051;
+
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
+.nav ul li:hover{
+    transform: scale(1.1);
+}
+.content{
+    margin:30px 60px;
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    padding: 0px 60px;
+    margin: 80px 0px 0px 0px;
+
+}
+.content h1{
+    font-size: 50px;
+    color:#29d500 ;
+
+}
+.content p{
+    margin: 35px 0px;
+    color:rgb(243, 152, 15);
+    font-size: 20px;
+    font-family:  sans-serif;
+
+}
+.box{
+    display: flex;
+    flex-direction: row;
+}
+.box img{
+    height:300px ;
+    margin: 70px 0px 0px 50px;
+}
+
+.info a{
+    color: white;
+    border-radius: 10px;
+    text-decoration: none;
+    padding: 10px;
+    background-color: rgb(28, 9, 133);
+    margin: 10px 10px;
+    font-weight: 600;
+
+
+
+}
+.info a:hover{
+    background: blue;
+}
+.pic{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: center;
+
+}
+.pic img{
+    width: 70px ;
+    margin: 20px ;
+
+}
+.pic img:hover{
+    transform: translateY(-15px);
+}
+
+.imgbox:hover{
+    transform: scale(1.2);
+}
diff --git a/landing/wallpaper2.jpg b/landing/wallpaper2.jpg