Added new footer

bijaycodes · Oct 11, 2022 · 2b7572a · 2b7572a
1 parent 5c11058
commit 2b7572a
Show file tree

Hide file tree

Showing 3 changed files with 321 additions and 9 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/index.css b/index.css
@@ -122,6 +122,7 @@ body {
     margin-bottom: 2rem;
 }
 
+
 @media only screen and (max-width:700px) {
     .container {
         box-shadow: 5px 10px 5px black;
@@ -148,10 +149,7 @@ body {
         text-align: center;
     }
 
-    .footer-copyright {
-        background-color: white;
-        color: black;
-    }
+
 
     .container button {
         width: 100px;
@@ -173,3 +171,271 @@ body {
     }
 
 }
+.footer {
+    background: #282727;
+    padding: 1rem 7%;
+}
+
+.footer .box-container {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.footer .box-container .box {
+    flex: 1 1 25rem;
+    margin: 2rem;
+}
+
+.footer .box-container .box h3 {
+    font-size: 2.5rem;
+    color: #fff;
+    padding: 1rem 0;
+    font-weight: normal;
+}
+
+.footer .box-container .box p {
+    font-size: 1.7rem;
+    color: #eee;
+    padding: 1rem 0;
+}
+
+.footer .box-container .box a {
+    font-size: 1.7rem;
+    color: #eee;
+    padding: 1rem 0;
+    display: block;
+}
+
+.footer .box-container .box a:hover {
+    color: var(--yellow);
+}
+
+.footer .box-container .box p i {
+    padding-right: .5rem;
+    color: var(--yellow);
+}
+
+.footer .credit {
+    font-size: 2rem;
+    text-align: center;
+    border-top: .2rem solid rgba(255, 255, 255, .7);
+    padding: 2rem 1rem;
+    font-weight: normal;
+    letter-spacing: .1rem;
+    color: #fff;
+}
+
+.footer .credit a {
+    color: var(--yellow);
+}
+:root {
+    --yellow: #F7CA3E;
+}
+
+* {
+    font-family: 'Roboto', sans-serif;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    text-decoration: none;
+    outline: none;
+    border: none;
+    text-transform: capitalize;
+    transition: all .2s linear;
+}
+
+h1,
+h3 {
+    font-family: 'Oswald', sans-serif;
+}
+
+*::selection {
+    background: var(--yellow);
+    color: #fff;
+}
+
+html {
+    font-size: 62.5%;
+    overflow-x: hidden;
+}
+
+body {
+    overflow-x: hidden;
+    /* height:200rem; */
+}
+
+html::-webkit-scrollbar {
+    width: 1.4rem;
+}
+
+html::-webkit-scrollbar-track {
+    background: #333;
+}
+
+html::-webkit-scrollbar-thumb {
+    background: var(--yellow);
+}
+
+section {
+    min-height: 100vh;
+    padding: 1rem 10%;
+    padding-top: 8.5rem;
+}
+
+.btn {
+    font-size: 1.7rem;
+    padding: .7rem 4rem;
+    border-radius: 5rem;
+    margin-top: 1rem;
+    background: none;
+    color: #333;
+    cursor: pointer;
+    border: .2rem solid var(--yellow);
+}
+
+.btn:hover {
+    background: var(--yellow);
+}
+
+.heading {
+    text-align: center;
+    font-size: 4rem;
+    padding: 0 .5rem;
+    color: #333;
+}
+
+.heading span {
+    color: var(--yellow);
+}
+section {
+    min-height: 100vh;
+    padding: 1rem 10%;
+    padding-top: 8.5rem;
+}
+
+
+
+.heading {
+    text-align: center;
+    font-size: 4rem;
+    padding: 0 .5rem;
+    color: #333;
+}
+
+.heading span {
+    color: var(--yellow);
+}
+
+header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    width: 100%;
+    background: #fff;
+    padding: 1.5rem 10%;
+    box-shadow: 0 .3rem 2rem rgba(0, 0, 0, .1);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+header .logo img {
+    height: 5rem;
+}
+
+header .navbar ul {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    list-style: none;
+}
+
+header .navbar ul li {
+    margin-left: 3rem;
+}
+
+header .navbar ul li a {
+    font-size: 1.7rem;
+    color: #666;
+}
+
+header .navbar ul li a.active,
+header .navbar ul li a:hover {
+    color: var(--yellow);
+}
+
+header #menu-bar {
+    font-size: 3rem;
+    color: #666;
+    cursor: pointer;
+    display: none;
+}
+
+.home {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    position: relative;
+    z-index: 0;
+    overflow: hidden;
+}
+
+.home::before,
+.home::after {
+    content: '';
+    position: absolute;
+    top: 5rem;
+    right: -6rem;
+    background: var(--yellow);
+    border-radius: 3rem;
+    transform: rotate(-45deg);
+    height: 40rem;
+    width: 70rem;
+    z-index: -2;
+    animation: animte 1s linear 1;
+}
+
+@keyframes animte {
+    0% {
+        transform: rotate(45deg) translateY(-40rem);
+    }
+}
+
+.home::before {
+    top: -7rem;
+    background: #fff;
+    box-shadow: 0 1rem 4rem rgba(0, 0, 0, .1);
+    z-index: -1;
+}
+
+.home .image {
+    flex: 1 1 39rem;
+}
+
+.home .image img {
+    width: 100%;
+}
+
+.home .content {
+    flex: 1 1 39rem;
+}
+
+.home .content h3 {
+    color: #333;
+    font-size: 6rem;
+}
+
+.home .content p {
+    color: #666;
+    font-size: 2rem;
+    padding: 1rem 0;
+}
+
+.about {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+}
diff --git a/index.html b/index.html
@@ -66,7 +66,7 @@ <h1 class="mx-auto maintext">JOIN THE BEST GYM</h1>
     </form>
   </div>
   <div class="aboutus" id="AboutUs">
-    <h2 class="abttitle">About Us</h2>
+    <h1 class="abttitle">About Us</h2>
     Fitness Factory Fitness Institute was started on 4th October 2011.
     It’s been more than a decade of educating people in fitness.
     Every year 1000+ students pass out of the institute.
@@ -77,8 +77,55 @@ <h2 class="abttitle">About Us</h2>
     Becoming a Fitness Factory Fitness Institute certified Advanced Personal trainer is your foundation for success. It
     offers you complete approach to fitness, wellness and business skills.
     Make an investment in yourself and become a Fitness Factory Fitness Institute certified personal trainer.
+
+
+
   </div>
 
+
+<div class="footer">
+
+    <div class="box-container">
+
+        <div class="box">
+            <h3>contact info</h3>
+            <p> <i class="fas fa-map-marker-alt"></i> mumbai, indai 400104 </p>
+            <p> <i class="fas fa-envelope"></i> [email protected] </p>
+            <p> <i class="fas fa-phone"></i> +123-456-7890 </p>
+            <p> <i class="fas fa-phone"></i> +111-222-333 </p>
+        </div>
+
+        <div class="box">
+            <h3>branch location</h3>
+            <a href="#">india</a>
+            <a href="#">USA</a>
+            <a href="#">france</a>
+            <a href="#">russia</a>
+        </div>
+
+        <div class="box">
+            <h3>quick links </h3>
+            <a href="#">home</a>
+            <a href="#">about us </a>
+            <a href="#">Contact us</a>
+            <a href="#">Fitness Calculator</a>
+            <a href="#">Email us</a>
+
+        </div>
+
+        <div class="box">
+            <h3>follow us</h3>
+            <a href="#">instagram</a>
+            <a href="#">facebook</a>
+            <a href="#">twitter</a>
+            <a href="#">linkedin</a>
+        </div>
+
+    </div>
+
+    <h1 class="credit">create by <a href="#">Pallavi Bahekar</a> all rights reserved. </h1>
+
+</div>
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
     integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
     crossorigin="anonymous"></script>
@@ -88,11 +135,7 @@ <h2 class="abttitle">About Us</h2>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
     integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
     crossorigin="anonymous"></script>
-  <footer id="sticky-footer" class=" foot py-2 bg-light text-center font-weight-bold text-dark-100">
-
-    <small>Copyright &copy; Fitness Factory</small>
 
-  </footer>
 </body>