Completed Navigation bar

Rushberry · Aug 14, 2024 · 672de9b · 672de9b
1 parent c67585a
commit 672de9b
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -5,30 +5,42 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Fitness</title>
     <link rel="stylesheet" href="style.css">
-    <script src="https://kit.fontawesome.com/db694bdc3c.js" crossorigin="anonymous"></script>
-    <link rel="shortcut icon" href="assets/favicon.png" type="image/x-icon"> <!--<a href="https://www.flaticon.com/free-icons/gym" title="gym icons">Gym icons created by Freepik - Flaticon</a>-->
+    <link rel="shortcut icon" href="assets/favicon.png" type="image/x-icon">
+    <!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
 </head>
 <body>
-    <!-- <header>
+    <header>
         <nav>
             <div class="nav-logo">
-                <a href="#" target="_blank" style="text-decoration: none;"><h1>Fitness</h1></a>
+                <h1>Fitness</h1>
             </div>
+            <svg class="bars" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#ffffff" d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
             <div class="nav-options">
                 <ul>
                     <li><a href="#Home">Home</a></li>
                     <li><a href="#Service">Service</a></li>
                     <li><a href="#Contact">Contact</a></li>
                     <li><a href="#About">About</a></li>
-                    <i class="fa-solid-fa-bars bars"></i>
                 </ul>
             </div>
         </nav>
-    </header> -->
+    </header>
     <main>
         <section id="Home">
             <div class="home">
-
+                <div class="head">
+                    <h1>Get body in <span class="shape">shape</span> & stay healthy</h1>
+                    <p>A huge selection of health and fitness content, healthy recipes and transformation stories to help you get fit and stay fit!</p>
+                    <div class="btns">
+                        <button class="btn1 btn">
+                            <a href="https://www.fitbangladesh.com/product/fit-fitness-health-club-membership" target="_blank">Join Club Now</a>
+                        </button>
+                        <button class="btn2 btn">
+                            <a href="https://play.google.com/store/apps/details?id=homeworkout.homeworkouts.noequipment&hl=en" target="_blank">Download App</a>
+                        </button>
+
+                    </div>
+                </div>
             </div>
         </section>
         <section id="Service">
@@ -65,7 +77,7 @@ <h3>Weight Loss</h3>
                     <h1>Run an Extra 
                         Mile Easily</h1>
                     <p>We believe fitness should be accessible to everyone, everywhere, regardless of income or access to a gym. With hundreds of professional workouts.</p>
-                    <a href="https://medium.com/@ThisIsShubhangi/running-taking-an-extra-mile-%EF%B8%8F-24598fbe2e4" target="_blank"><button>Join Now</button></a>
+                    <a href="https://www.fitbangladesh.com/product/fit-fitness-health-club-membership" target="_blank"><button>Join Now</button></a>
                 </div>
                 <div class="img"></div>
             </div>

diff --git a/style.css b/style.css
@@ -7,18 +7,19 @@
     padding: 0;
 }
 
-
+/* Header Section Starts Here */
 
 header{
     padding-top: 57px;
-    background: linear-gradient(0deg, rgb(17, 17, 17), rgba(119, 119, 119, 0) 100%), rgb(34, 34, 34);
+    background: linear-gradient(180deg, rgb(17, 17, 17), rgba(119, 119, 119, 0) 100%), rgb(34, 34, 34);
 }
 
 nav{
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin: 0px 190px;
+    flex-direction: row;
 }
 
 nav > .nav-logo{
@@ -67,6 +68,80 @@ nav a:hover, li:first-child a{
     display: none;
 }
 
+/* Home Section Starts Here */
+
+#Home{
+    background: linear-gradient(0deg, rgb(17, 17, 17), rgba(119, 119, 119, 0) 100%), rgb(34, 34, 34);
+    display: flex;
+    justify-content: center;
+}
+
+.home{
+    display: flex;
+    flex-direction: row;
+    gap: 167px;
+}
+
+.btns{
+    display: flex;
+    gap: 14px;
+    flex-direction: row;
+}
+
+.btns a{
+    text-decoration: none;
+    color: white;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.btn{
+    padding: 16px 40px 16px 40px;
+    border-radius: 42px;
+    border: none;
+}
+
+.btn1{
+    background: rgb(230, 83, 60);
+}
+
+.btn2{
+    background: none;
+    border: 1px solid white;
+}
+
+.head{
+    width: 520px;
+    margin-top: 65px;
+    margin-bottom: 60px;
+}
+
+.head h1 {
+    font-size: 78px;
+    font-weight: 900;
+    line-height: 120%;
+    text-align: left;
+    color: white;
+}
+
+.head p{
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0.5px;
+    margin-top: 28px;
+    margin-bottom: 28px;
+}
+
+
+.shape{
+    font-weight: 400;
+    font-family: 'miama';
+    font-size: 150px;
+}
+/* Service Section Starts Here */
+
 #Service{
     background-color:rgb(0, 0, 0);
     display: flex;
@@ -672,18 +747,29 @@ footer p {
 
 
 /* Responsive Media for Mobile*/
+
 @media screen and (max-width: 576px){
-
+    /* Responsive ~ Header Section Starts Here */
     nav li{
         display: none;
     }
 
     .bars{
-        display: inline;
-        color: white;
+        display: block;
+        width: 24px;
+        height: 24px;
     }
 
-
+    nav{
+        margin: 0px 20px;
+    }
+    .nav-options{
+        display: none;
+    }
+    /* Responsive ~ Home Section Starts Here */
+
+
+    /* Responsive ~ Service Section Starts Here */
     .service{
         padding-top: 0px;
         padding-bottom: 66px;