Merge pull request #9 from Lokesh-MV/main

Home Page Redesign.
csiddu · Oct 3, 2023 · af1b94a · af1b94a
2 parents 808f2be + e261567
commit af1b94a
Show file tree

Hide file tree

Showing 4 changed files with 243 additions and 108 deletions.
diff --git a/bg.jpg b/bg.jpg
diff --git a/images/wb.png b/images/wb.png
diff --git a/index.html b/index.html
@@ -1,29 +1,100 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width,initial-scale=1.0">
-        <title>
-            project
-        </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" />
-    </head>
-    <body>
-        <header>
-            <input type="checkbox" name="" id="chk1">
-            <div class="logo"><h1>Frontend Treasure</h1></div>
-            <div class="search-box">
-                <form action="">
-                    <input type="text" name="search" id="srch" placeholder="Search">
-                    <button type="submit"><i class="fa fa-search"></i></button>
-                </form>
-            </div>
-            <div class="menu">
-                <label for="chk1">
-                    <i class="fa fa-bars"></i>
-                </label>
-            </div>
-        </header>
-    </body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>Frontend Treasure</title>
+    <!-- CSS Section -->
+    <!-- bootstrap CSS -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
+      crossorigin="anonymous"
+    />
+
+    <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"
+    />
+  </head>
+  <body>
+    <!-- Navbar Section -->
+    <nav class="navbar navbar-expand-lg bg-none">
+      <div class="container-fluid">
+        <a class="navbar-brand" href="index.html">Frontend Treasure</a>
+        <button
+          class="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarSupportedContent"
+        >
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+            <li class="nav-item">
+              <a class="nav-link active" href="index.html">Home</a>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link"> Components </a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Contact</a>
+            </li>
+          </ul>
+          <form class="d-flex" role="search">
+            <input
+              class="form-control me-3"
+              type="search"
+              placeholder="Search for the components"
+              aria-label="Search"
+            />
+            <button class="btn btn-outline-success" type="submit">
+              Search
+            </button>
+          </form>
+        </div>
+      </div>
+    </nav>
+
+    <section id="hero">
+      <div class="row">
+        <div class="col-md-6" id="hero-left">
+          <img src="images/wb.png" id="hero-img" />
+        </div>
+        <div class="col-md-6" id="hero-right">
+          <p id="hero-head">Code your Dreams!</p>
+          <p id="hero-text">
+            Frontend Treasure: Simplify web development. Copy, paste, and create
+            stunning websites effortlessly. Explore, customize, and bring your
+            ideas to life.
+          </p>
+          <form class="d-flex" role="search">
+            <input
+              class="form-control me-2"
+              type="search"
+              placeholder="Search by name, component & more... "
+            />
+            <button class="btn btn-outline-success" type="submit">
+              Search
+            </button>
+          </form>
+        </div>
+      </div>
+    </section>
+    <!-- JS Section -->
+    <!-- Bootstrap JS -->
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
+      crossorigin="anonymous"
+    ></script>
+  </body>
 </html>
+
+<!-- "Unlock a World of Frontend Magic! -->
diff --git a/style.css b/style.css
@@ -1,121 +1,185 @@
+@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: Arial;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: Arial;
 }
 
 body {
-    background-image: url(bg.jpg);
-    background-size: cover;
-    height: 100vh;
-    background-position: center;
+  /* background-image: url(bg.jpg);` */
+  background-color: #f0f0f0;
+  /* background-size: cover; */
+  /* height: 100vh; */
+  /* background-position: center; */
+  padding: 0 3%;
+  font-family: "Lato", sans-serif;
 }
 
 header {
-    width: 100%;
-    height: 100px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    position: fixed;
-    z-index: 99;
-    box-shadow: 0 0 10px #0000;
-    background: rgba(0, 0, 0, 0.5);
+  width: 100%;
+  height: 100px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  z-index: 99;
+  box-shadow: 0 0 10px #0000;
+  background: rgba(0, 0, 0, 0.5);
 }
 
 #chk1 {
-    display: none;
+  display: none;
 }
 
-
 i {
-    color: #fff;
-    cursor: pointer;
+  color: #fff;
+  cursor: pointer;
 }
 
 header .logo {
-    flex: 1;
-    color: #fff;
-    margin-left: 50px;
-    text-transform: uppercase;
-    font-size: 15px;
+  flex: 1;
+  color: #fff;
+  margin-left: 50px;
+  text-transform: uppercase;
+  font-size: 15px;
 }
 
 header .search-box {
-    flex: 1;
-    position: relative;
+  flex: 1;
+  position: relative;
 }
 
 .search-box input {
-    width: 100%;
-    height: 30px;
-    border: none;
-    outline: none;
-    background: #f2f2f2;
-    border-radius: 30px;
-    color: gray;
-    font-size: 14px;
-    text-align: center;
-    padding-left: 5px;
-    padding-right: 40px;
+  width: 100%;
+  height: 30px;
+  border: none;
+  outline: none;
+  background: #f2f2f2;
+  border-radius: 30px;
+  color: gray;
+  font-size: 14px;
+  text-align: center;
+  padding-left: 5px;
+  padding-right: 40px;
 }
 
 .search-box button {
-    cursor: pointer;
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    border: none;
-    position: absolute;
-    top: 0;
-    right: 5px;
-    transform: scale(0.9);
-    background: green;
+  cursor: pointer;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: none;
+  position: absolute;
+  top: 0;
+  right: 5px;
+  transform: scale(0.9);
+  background: green;
 }
 
 header .menu {
-    font-size: 2.5em;
-    display: none;
+  font-size: 2.5em;
+  display: none;
 }
 
 @media (max-width: 1000px) {
-    .search-box button {
-        position: absolute;
-    }
+  .search-box button {
+    position: absolute;
+  }
 
-    header ul {
-        position: fixed;
-        top: 100px;
-        right: -100%;
-        background: rgba(0, 0, 0, 0.5);
-        height: calc(100vh - 100px);
-        width: 50%;
-        flex-direction: column;
-        align-items: center;
-        transition: right 0.5s linear;
-    }
+  header ul {
+    position: fixed;
+    top: 100px;
+    right: -100%;
+    background: rgba(0, 0, 0, 0.5);
+    height: calc(100vh - 100px);
+    width: 50%;
+    flex-direction: column;
+    align-items: center;
+    transition: right 0.5s linear;
+  }
 
-    header .menu {
-        display: block;
-        width: 100px;
-        text-align: center;
-    }
+  header .menu {
+    display: block;
+    width: 100px;
+    text-align: center;
+  }
 
-    #chk1:checked ~ ul {
-        right: 0;
-    }
+  #chk1:checked ~ ul {
+    right: 0;
+  }
 }
 
 @media (max-width: 600px) {
-    header .logo {
-        font-size: 10px;
-        margin-left: 8px;
-    }
+  header .logo {
+    font-size: 10px;
+    margin-left: 8px;
+  }
 
-    header ul {
-        width: 100%;
-        flex-wrap: wrap;
-        justify-content: center;
-    }
+  header ul {
+    width: 100%;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}
+.navbar-brand {
+  color: #2a2a2a;
+  font-size: 200%;
+  font-weight: 600;
+  width: 60%;
+}
+.nav-item {
+  margin: 0 20px;
+}
+#hero-img {
+  width: 100%;
+}
+#hero-left {
+  padding: 7% 0;
+}
+#hero-head {
+  color: #4483e5;
+  font-size: 290%;
+  font-weight: bold;
+}
+#hero-right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+#hero-text {
+  color: #2a2a2a;
+  font-size: 21px;
+}
+#hero-right form {
+  margin-top: 5%;
+}
+#hero-right form input {
+  width: 350px;
+}
+.row {
+  width: 100%;
+}
+@media only screen and (max-width: 600px) {
+  .navbar-brand {
+    width: 70%;
+  }
+  #hero-right form input {
+    width: 250px;
+  }
+  #hero-head {
+    font-size: 200%;
+  }
+  #hero-left {
+    text-align: center;
+  }
+  #hero-text {
+    font-size: 16px;
+  }
+}
+@media only screen and (max-width: 450px) {
+  .navbar-brand {
+    font-size: 150%;
+  }
 }