Add files via upload

Siddharthmarko · Oct 12, 2023 · ec70e34 · ec70e34
1 parent 0dcdc50
commit ec70e34
Show file tree

Hide file tree

Showing 22 changed files with 800 additions and 0 deletions.
diff --git a/Page2/images/BG.jpg b/Page2/images/BG.jpg
diff --git a/Page2/images/Ellipse 2.jpg b/Page2/images/Ellipse 2.jpg
diff --git a/Page2/images/Ellipse 3.jpg b/Page2/images/Ellipse 3.jpg
diff --git a/Page2/images/Ellipse 4.jpg b/Page2/images/Ellipse 4.jpg
diff --git a/Page2/images/Ellipse 5.jpg b/Page2/images/Ellipse 5.jpg
diff --git a/Page2/images/Ellipse 6.jpg b/Page2/images/Ellipse 6.jpg
diff --git a/Page2/images/IMG1-1.jpg b/Page2/images/IMG1-1.jpg
diff --git a/Page2/images/IMG1.jpg b/Page2/images/IMG1.jpg
diff --git a/Page2/images/IMG2-1.jpg b/Page2/images/IMG2-1.jpg
diff --git a/Page2/images/IMG2.jpg b/Page2/images/IMG2.jpg
diff --git a/Page2/images/IMG3-1.jpg b/Page2/images/IMG3-1.jpg
diff --git a/Page2/images/IMG3.jpg b/Page2/images/IMG3.jpg
diff --git a/Page2/images/IMG4.jpg b/Page2/images/IMG4.jpg
diff --git a/Page2/images/Rectangle 15.jpg b/Page2/images/Rectangle 15.jpg
diff --git a/Page2/images/Rectangle 16.jpg b/Page2/images/Rectangle 16.jpg
diff --git a/Page2/images/Rectangle 17.jpg b/Page2/images/Rectangle 17.jpg
diff --git a/Page2/images/team1.jpg b/Page2/images/team1.jpg
diff --git a/Page2/images/team2.jpg b/Page2/images/team2.jpg
diff --git a/Page2/images/team3.jpg b/Page2/images/team3.jpg
diff --git a/Page2/index.html b/Page2/index.html
@@ -0,0 +1,213 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Figma First</title>
+    <link rel="stylesheet" href="style.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
+    integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <!-- <script src="javascript.js"></script> -->
+
+</head>
+<body>
+    <!-- ------------------------ first section -------------  -->
+    <section class="hero">
+        <nav class="navigation">
+            <h2 class="logo">INTERIA</h2>
+            <ul class="nav">
+                <div class="ic"> 
+            <i class="fa-solid fa-xmark d" style="color: hwb(0 100% 0%);"></i>
+                </div>
+                <li>Home </li>
+                <li>Pages</li>
+                <li class="to-Section">Service</li>
+                <li class="to-Section">Team</li>
+                <li class="to-Section" >Blog</li>  
+            </ul>    
+            <button class="btn zoom">GET STARTED</button> 
+            <div class="ic"> 
+                <i class="fa-solid fa-bars d" style="color: #ffffff;"></i>
+            </div>
+
+        </nav>
+        <div class="hero-inner">
+            <!-- <p class="swipe">SWIPE DOWN</p> -->
+                <h1 class="zoom" >We design your room aesthetic</h1>
+                <p class="light-text zoom" >Lectus quam id leo in vitae turpis nisi porta lorem mollis.</p>
+             <i class="fa-solid fa-circle-play play zoom"></i>
+        </div>
+    </section>
+
+    <!-- -----------------second section -------------------  -->
+    <section class="mileston">
+    <div class="mileston-head">
+        <h2>About</h2>
+        <h1>We are the best interior design studio in london</h1>
+        <p class="light-text">Posuere urna nec tincidunt praesent. Egestas maecenas pharetra convallis posuere. Ipsum nunc aliquet bibendum enim. Sem integer vitae justo eget magna fermentum iaculis eu non.</p> 
+    </div>
+    <div class="mileston-main" >
+    <div class="mileston-main-img">
+        <img src="images/IMG1.jpg" alt="">
+        <img src="images/IMG2.jpg" alt="">
+        <img src="images/IMG3.jpg" alt="">
+    </div>
+    <div class="mileston-data">
+        <div>
+        <h1>2k+</h1>
+        <p>PROJECTSDONE</p>
+        </div>
+        <div>
+        <h1>20+</h1>
+        <p>PRO TEAM</p>
+        </div>
+        <div>
+        <h1>300+</h1>
+        <p>GLOBAL CLIENT</p>
+        </div>
+        <div>
+        <button class="btn"> Learn About</button>
+        </div>
+    </div>
+    </div>
+    </section>
+
+    <!-- ------------------------- third section ------------ -->
+    <section>
+        <div class="hireUs">
+        <img src="images/Ellipse 2.jpg" alt="">
+        <div>
+            <h1 class="hireUs-head" >Blending creativity and <br>
+                functionality in every design</h1>
+            <button class="btn">Hire Us Now</button>
+        </div>
+        </div>
+    </section>
+
+    <!-- ------------------------- fourth section ------------ -->
+    <section>
+        <div id="team" class="team">
+        <div class="team-left">
+            <div class="team-content">
+            <h2>Teams</h2>
+            <h1>Projects are handled by <br> professional certified <br> teams</h1>
+            <p class="light-text">Posuere urna nec tincidunt praesent egestas <br> maecenas pharetra convallis posuere ipsum nunc aliquet <br> bibendum enim consectetur adipiscing.</p>
+            </div>
+            <div class="team-review">
+                <div class="team-review-img">
+                    <img src="images/Ellipse 3.jpg" alt="">
+                    <img src="images/Ellipse 4.jpg" alt="">
+                    <img src="images/Ellipse 5.jpg" alt="">
+                    <img src="images/Ellipse 6.jpg" alt="">
+                </div>
+                <div class="team-rating">
+                    <p> <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i> (5 reviews)</p>
+                </div>
+                <p class="light-text">TRUSTED BY CUSTOMERS</p>
+            </div>
+        </div>
+        <div class="team-right">
+            <div>
+            <img src="images/team1.jpg" alt="">
+            <img src="images/team2.jpg" alt="">
+            </div>
+            <div class="team-hide">
+                <img src="images/team3.jpg" alt="">
+                <button class="btn">LEARN TEAM </button>
+            </div>
+        </div>
+        </div>
+</section>
+<!-- --------------------------------------fifth section-------------- -->
+<section>
+    <div id="service" class="service">
+        <div class="service1">
+            <h1>01. Interior design</h1>
+            <div>
+            <p class="light-text" >Posuere urna nec tincidunt praesent egestas <br>
+                 maecenas pharetra convallis posuere ipsum nunc aliquet <br>
+                 bibendum enim consectetur adipiscing.</p>
+            <p>LEARN MORE <i class="fa-solid fa-chevron-right"></i> </p>
+                </div>
+        </div>
+        <div class="service1">
+            <h1>02. Furniture design</h1>
+            <div>
+            <p class="light-text">Posuere urna nec tincidunt praesent egestas <br>
+                 maecenas pharetra convallis posuere ipsum nunc aliquet <br>
+                 bibendum enim consectetur adipiscing.</p>
+            <p>LEARN MORE <i class="fa-solid fa-chevron-right"></i> </p> 
+            </div>
+        </div>
+        <div class="service1">
+            <h1>03. Landscape design</h1>
+            <div>
+            <p class="light-text">Posuere urna nec tincidunt praesent egestas <br>
+                 maecenas pharetra convallis posuere ipsum nunc aliquet <br>
+                 bibendum enim consectetur adipiscing.</p>
+                <p>LEARN MORE <i class="fa-solid fa-chevron-right"></i> </p>
+            </div>
+        </div>
+    </div>
+</section>
+<!-- --------------------------------- sixth section --------------  -->
+<section class="gellery" >
+    <img src="images/IMG1-1.jpg" alt="">
+    <img src="images/IMG2-1.jpg" alt="">
+    <img src="images/IMG3-1.jpg" alt="">
+    <img src="images/IMG4.jpg" alt="">
+</section>
+<!-- ----------------------------------seventh section -------------------  -->
+<section id="blog" class="blog">
+    <h2>BLOG</h2>
+    <h1>The latest article</h1>
+    <div class="blog-post">
+        <div class="blog-post-content">
+            <img src="images/Rectangle 15.jpg" alt="">
+            <div>
+            <p class="light-text">Posuere urna nec tincidunt praesent egestas maecenas.</p>
+            <p>LEARN MORE <i class="fa-solid fa-chevron-right"></i> </p> 
+            </div>
+        </div>
+        <div class="blog-post-content">
+            <img src="images/Rectangle 16.jpg" alt="">
+            <div>
+            <p class="light-text">Posuere urna nec tincidunt praesent egestas maecenas.</p>
+            <p>LEARN MORE <i class="fa-solid fa-chevron-right"></i> </p> 
+            </div>
+        </div>
+        <div class="blog-post-content">
+            <img src="images/Rectangle 17.jpg" alt="">
+            <div>
+            <p class="light-text">Posuere urna nec tincidunt praesent egestas maecenas.</p>
+            <p>LEARN MORE <i class="fa-solid fa-chevron-right"></i> </p> 
+            </div>
+        </div>
+    </div>
+</section>
+<!-- -------------------------------------EIGHTH SECTION ----------------------- -->
+<section class="newsletter">
+    <h1>Newsletter</h1>
+    <p>Enter your email</p>
+    <div>
+    <button class="btn">
+        SUBSCRIBE
+    </button>
+    </div>
+</section>
+<!-- ---------------------------footer -------------------------  -->
+<footer>
+            <div class="footer-footer">
+                <p>© Copyright by --------------– All right reserved.</p>
+                <div class="footer-social">
+                    <i class="fa-brands fa-facebook icon"></i>
+                    <i class="fa-brands fa-twitter icon"></i>
+                    <i class="fa-brands fa-linkedin-in icon"></i>
+                    <i class="fa-brands fa-instagram icon"></i>
+                </div>
+            </div>
+</footer>
+<script src="javascript.js"></script>
+</body>
+</html>
diff --git a/Page2/javascript.js b/Page2/javascript.js
@@ -0,0 +1,18 @@
+const nav = document.querySelector('.nav'); 
+document.addEventListener("click",(event) =>{
+    const classList = event.target.classList;
+    if (classList.contains("fa-solid")){
+        nav.classList.toggle('toggle');
+    }
+    if (classList == "to-Section"){
+        let name = event.target.textContent;
+        name = name.toLowerCase();
+        let element = document.getElementById(name);
+        element.scrollIntoView({ 
+            behavior: "smooth" 
+        });
+        console.log(name);
+    }
+    console.log("REACH TO THE END");
+})
+