1

manasvi-gaur · Dec 3, 2023 · 62347a4 · 62347a4
1 parent b81e24a
commit 62347a4
Show file tree

Hide file tree

Showing 8 changed files with 266 additions and 0 deletions.
diff --git a/LittleLemonLogo.jpg b/LittleLemonLogo.jpg
diff --git a/burger.jpg b/burger.jpg
diff --git a/cake.jpg b/cake.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/>
+    <title>Little Lemon</title>
+</head>
+<body>
+    <header class="header">
+        <left id="img">
+            <img src="LittleLemonLogo.jpg" alt="logo" width="250mvin">
+        </left>
+        <nav>
+            <a class="navMenu">Home</a>
+            <a class="navMenu">About</a>
+            <a class="navMenu">Log In</a>
+        </nav>
+    </header>
+    <main class="main">
+        <div class="attract">
+            <div class="content">
+                <h1>Little Lemon</h1>
+                <h3>Los Angeles</h3>
+                <div>
+                    <h4>A new way to eat your food!</h4>
+                    <p>Welcome To Our Restaurent!</p>
+                </div>
+                <div>
+                    <button id="reservation" type="submit">Explore More</button>
+                </div>
+            </div>
+            <div class="content-image">
+                <img id="content-image1" src="burger.jpg" alt="pasta" width="230vw" height="350vh">
+            </div>
+        </div>
+        <div class="discount">
+            <h1>30% discount</h1>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla ipsum, voluptatum tempore temporibus amet aut vero. Perspiciatis ad minima recusandae?</p>
+        </div>
+        <div class="cardView">
+            <div class="card">
+                <h3>New Menu</h3>
+                <img src="cake.jpg" alt="cake" height="300vmin" width="200vmin">
+                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo perspiciatis nostrum sequi impedit fuga alias?</p>
+                <a href="">see our new menu</a>
+            </div>
+            <div class="card">
+                <h3>Book A Table</h3>
+                <img src="momo.jpg" alt="cake" height="300vmin" width="200vmin">
+                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo perspiciatis nostrum sequi impedit fuga alias?</p>
+                <a href="">Book your table now</a>
+            </div>
+            <div class="card">
+                <h3>Opening Hours</h3>
+                <img src="salad.jpg" alt="cake" height="300vmin" width="200vmin">
+                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo perspiciatis nostrum sequi impedit fuga alias?</p>
+                <ul>
+                    <li><strong>Monday-Friday:</strong> 9AM - 9PM</li>
+                    <li><strong>Saturday:</strong> 7AM - 11PM</li>
+                    <li><strong>Sunday:</strong> 2PM - 11PM</li>
+                </ul>
+            </div>
+
+        </div>
+    </main>
+    <hr>
+    <footer class ="footer">
+            <div class="social">
+                <a href="https://instagram.com/r_nikhil_kumar" target="_blank"><i class="fa-brands fa-instagram" id="insta"></i></a>
+            </div>
+            <div class="social">
+                <a href="https://facebook.com/" target="_blank"><i class="fa-brands fa-facebook" id="facebook"></i></a>
+            </div>
+            <div class="social">
+                <a href="https://twitter.com/" target="_blank"><i class="fa-brands fa-x-twitter" id="twitter-x"></i></a>
+            </div>
+    </footer>
+</body>
+</html>
diff --git a/momo.jpg b/momo.jpg
diff --git a/pasta.jpg b/pasta.jpg
diff --git a/salad.jpg b/salad.jpg
diff --git a/styles.css b/styles.css
@@ -0,0 +1,184 @@
+body{
+    grid-template-columns: repeat(2);
+    margin: 0%;
+    padding: 0%;
+    grid-template-areas: "header header" "main main" "footer footer";
+}
+
+header{
+    grid-area: header;
+    display: flex;
+    justify-content: space-between;
+}
+
+nav{
+    padding: 10px;
+    display: flex;
+    gap:15px;
+    align-items: center;
+}
+.navMenu{
+    background-color: rgb(15,80,50);
+    border: 1px solid;
+    color: white;
+    font: bold;
+    padding: 0.7vw;
+    font-weight: 100;
+    border-radius: 8px;
+}
+
+.navMenu:hover{
+    background-color: rgb(214, 214, 158);
+    color:  rgb(15,80,50);
+    cursor: pointer;
+}
+#img:hover{
+    cursor: pointer;
+}
+
+.main{
+    grid-area: main;
+}
+.attract{
+    display: grid;
+    grid-template-columns: repeat(3);
+    grid-template-rows: auto;
+    grid-template-areas: "left left right";
+    background-color: rgb(15,80,50);
+    color: white;
+    height: 20em;
+    border: 1px solid;
+}
+.content{
+    margin-left: 5vmin;
+    grid-area: left;
+    padding: 2vmin;
+    width: 100%;
+}
+.content-image{
+    margin-right: 2vmin;
+    margin-top: 5vmin;
+    grid-area: right;
+    padding-top: 2vmin;
+}
+
+#content-image1{
+    border-radius: 10%;
+}
+
+.content > h1{
+    color:yellow
+}
+
+.content span{
+    text-align: left;
+}
+
+#reservation{
+    background-color: rgb(208, 208, 43);
+    border: none;
+    color: black;
+    padding: 2vmin;
+    margin-top: 3vmin;
+    border-radius:13cqmin;
+    border-bottom: 2px solid;
+    border-right: 2px solid;
+    font-weight: 200;
+    font-size: 1.2em;
+}
+
+#reservation:hover{
+    transition: all .2s ease-in-out;
+    transform: scale(1.05);
+    cursor: pointer;
+}
+
+.discount{
+    padding-left: 2vmin;
+    padding-top: 0.7vmin;
+    color: rgb(213, 234, 241);
+    background-image: url('pasta.jpg');
+    margin-top: 15vh;
+    grid-area: main;
+    margin-left: 25vmin;
+    margin-right: 25vmin;
+    padding-bottom: 5vmin;
+    border-radius: 10px;
+    height: 15vmin;
+
+}
+.discount>p{
+    color: rgb(232, 232, 132);
+}
+
+.discount:hover{
+    transition: all .2s ease-in-out;
+    transform: scale(1.03);
+    cursor: pointer;
+}
+
+.cardView{
+    margin-top: 5vmin;
+    display: flex;
+    gap: 5vmin;
+    justify-content: center;
+}
+
+.card{
+    width: 50vmin;
+    text-align: left;
+    box-shadow: 0 5px 6px 0 rgb(124, 89, 89);
+    background-color: antiquewhite;
+}
+
+.card:hover{
+    transition: all .2s ease-in-out;
+    transform: scale(1.05);
+    cursor: pointer;
+}
+.card > h3, .card > p, .card > a, .card li{
+    margin-left: 5px;
+    font-size: 2.5vmin;
+}
+
+.card > a:hover{
+    color: #d6249f;
+}
+
+.footer{
+    display: flex;
+    grid-area: footer;
+    height: 30mvin;
+    gap: 2.5vmin;
+    padding-top: 3vmin;
+    padding-left: 5vmin;
+    padding-bottom: 2vmin;
+}
+hr{
+    margin-top: 15px;
+    height: 3px;
+    background-color: black;
+}
+#insta,#twitter-x,#facebook{
+    font-size: 4vmin;
+    font-weight: 100;
+    color: rgb(25, 44, 62);
+    border-radius: 50%;
+    border: solid rgb(222, 92, 92) 1px;
+    padding: 1vmin;
+
+}
+
+#insta:hover{
+    background: #d6249f;
+    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
+    color:white;
+}
+#twitter-x:hover{
+    background-color: black;
+    color: white;
+}
+#facebook:hover{
+    background-color: white;
+    color: #3b5998;
+}