Added Header and Footer (#39)

* Added Header and Footer * Added Header and Footer CSS * Added Header and Footer * Added Header and Footer CSS * Added Header and Footer * Added Header and Footer CSS * Added Header And Footer * Added Header and Footer CSS * Added Header and Footer * Added Header and Footer CSS * Add files via upload
nisha331 · Feb 19, 2023 · 4bb7bcb · 4bb7bcb
1 parent f4d31de
commit 4bb7bcb
Show file tree

Hide file tree

Showing 12 changed files with 689 additions and 279 deletions.
diff --git a/about.html b/about.html
@@ -5,63 +5,42 @@
     <title>ABOUT-US</title>
     <link rel="icon" href="icon.png" type="image/icon type">
     <link rel="stylesheet" href="css_files/styleaboutus.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dosis:400,700">
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
+    <!-- bootstrap icon link Used in Header and footer-->
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
+    <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
 
+    <!-- bootstrap icon link Used in Header and footer-->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dosis:400,700">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
   </head>
   <body>
-    <nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light">
-      <a href="#"
-      class="navbar-brand mb-0 h1"> 
-      <img class="d-inline-block align-top" 
-      src="icon.png"
-      width="30" height="30"/>
-      FLOW CYCLE
-      </a>
-      <button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" class="navbar-toggler"
-      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
 
-      </button>
-      <div class="collapse navbar-collapse" id="navbarNav">
+    <!-- Header -->
+      <header class="navbar navbar-expand-xxl navbar-light bg-white">
+      <div class="container-fluid">
+        <a href="index.html"class="navbar-brand"><img class="d-inline-block align-top image-border" src="images/icon.png" width="45" height="45"/></a><span><h3 class="head">FLOW CYCLE</h3> </span>
+        <button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" class="navbar-toggler" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
           <ul class="navbar-nav">
-              <li class="nav-item active">
-                  <a href="index.html" class="nav-link active">
-                      HOME
-                  </a>
-              </li>
-              <li class="nav-item dropdown">
-                <a href="#" class="nav-link dropdown-toggle"
-                id="navbarDropDown"
-                role="button"
-                data-bs-toggle="dropdown"
-                aria-expanded="false">
-                    ARTICLES AND INFORMATION
-                  </a>
-                  <ul class="dropdown-menu" aria-labelledby="navbarDropDown">
-                      <li><a href="womenhealth.html"
-                      class="dropdown-item">WOMEN HEALTH</a></li>
-                      <li><a href="menstrualcycle.html"
-                          class="dropdown-item">MENSTRUAL CYCLE</a></li>
-                       <li><a href="pregnancy.html"
-                          class="dropdown-item">PREGNANCY</a></li>
-                  </ul>
-              </li>
-
+
+            <li class="nav-item">
+              <a class="nav-link" href="#footer"><img class="d-inline-block align-top image-border" src="images/Calendar1.png" width="45" height="45"/></a>
+            </li>
+            <li class="nav-item active">
+              <a class="nav-link" href="index.html"><img class="d-inline-block align-top image-border" src="images/Girl.png" width="45" height="45"/></a>
+            </li>
           </ul>
-          <!--<form class="d-flex">
-              <input type="text" class="form-control me-2">
-              <button class="btn btn-outline-success">ENTER YOUR LAST MENSTRUAL DATE</button>
-          </form>-->
-         <!--<form class="d-flex">
-              <input type="text" class="form-control me-2">
-              <button class="btn btn-outline-success">ENTER YOUR LAST MENSTRUAL DATE</button>
-          </form>-->
+        </div>
       </div>
-
-</nav>
+    </header>
+
+
+    <!-- header -->
+
     <h1 class="heading">About Us</h1>
     <div class="information">
         <div class="info">
@@ -74,4 +53,42 @@ <h1 class="heading">About Us</h1>
           <p class="end"><b>EMBRACE YOURSELF. THE WORLD CAN WAIT!</b></p>
         </div>
     </div>
+
+
+    <!-- footer -->
+
+    <footer class="bg-pink text-black" id="footer">
+      <div class="container-fluid ">
+        <div class="row align-items-sm-center" >
+          <div class="col-md-4">
+            <a href="index.html" class="text-decoration-none" style="color:#ff0080; font-family: bold; font-size: 1.5rem; font-weight: bold;">
+              <img class="d-inline-block align-top image-border" src="images/icon.png" alt="Company Logo" width="40" height="40"/> FLOW CYCLE</a>
+          </div>
+          <div class="col-md-4">
+            <ul class="nav justify-content-center text-decoration-none" >
+              <li class="nav-item">
+                <a class="nav-link" href="index.html" style="color: #000;">Home</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#" style="color: #000;">About Us</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#footer" style="color: #000;">Contact Us</a>
+              </li>
+            </ul>
+          </div>
+          <div class="col-md-4">
+            <ul class="social-icons list-inline d-flex align-items-center justify-content-center">
+              <li class="list-inline-item"><a href="#"><i class="fab fa-facebook text-black"></i></a></li>
+              <li class="list-inline-item"><a href="#"><i class="fab fa-twitter text-black"></i></a></li>
+              <li class="list-inline-item"><a href="#"><i class="fab fa-instagram text-black"></i></a></li>
+              <li class="list-inline-item"><a href="#"><i class="fab fa-linkedin text-black"></i></a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </footer>
+
+    <!-- footer -->
   </body>
+</html>
diff --git a/css_files/style.css b/css_files/style.css
@@ -1,14 +1,53 @@
 .body-back{
     background-image:url("background.jpg");
+
+}
+
+/* header */
+.image-border{
+  border-radius: 100%;
+}
+.navbar {
+  padding: 1rem 0;
+
 }
+
+.head{
+  font-size: 1.5rem;
+  font-weight: bold;
+  color:#ff1a8c;
+  text-align: left;
+  position: static;
+}
+
+.navbar-nav .nav-link {
+  font-size: 1.2rem;
+  margin-left: 1rem;
+  color: #000;
+}
+
+.navbar-nav .nav-link:hover {
+  color: #ff4532;
+}
+
+.navbar-toggler {
+  border: none;
+}
+
+.bi {
+  font-size: 1.5rem;
+}
+
+
+/* header */
 .container {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
   }
-  
+
   .square {
     background-color: bisque;
     margin-top:150px;
@@ -26,15 +65,15 @@
     margin-left:400px;
     margin-top:50px;
   }
-  
+
   .square:after {
     content: "";
     display: block;
     margin-top:100px;
     padding-top:100%;
-    
+
   }
-  
+
   .content {
     position: absolute;
     width: 100%;
@@ -43,10 +82,10 @@
 
   .experi{
     background-color: rgb(199, 93, 109);
-    
+
     margin-top:25px;
     font-family: 'Times New Roman', Times, serif;
-    
+
   }
 
   footer{
@@ -61,4 +100,36 @@
     text-align:center;
     margin:25px;
   }
-
+
+  /* footer */
+
+  .bg-pink {
+  background-color: #FFC0CB;
+}
+
+.text-black {
+  color: #000000;
+}
+
+.footer-links li {
+  display: inline-block;
+  margin-right: 20px;
+}
+
+.social-links li {
+  display: inline-block;
+  margin-right: 20px;
+}
+.row{
+  padding-top: 60px;
+}
+.social-links i {
+  font-size: 20px;
+}
+
+.nav-link{
+  color: #000;
+}
+
+
+/* footer */
diff --git a/css_files/styleaboutus.css b/css_files/styleaboutus.css
@@ -2,6 +2,45 @@ body{
     background: url("backgroundabout.jpg");
 
 }
+
+/* header */
+.image-border{
+  border-radius: 100%;
+}
+.navbar {
+  padding: 1rem 0;
+
+}
+
+.head{
+  font-size: 1.5rem;
+  font-weight: bold;
+  color:#ff1a8c;
+  text-align: left;
+  position: static;
+}
+
+.navbar-nav .nav-link {
+  font-size: 1.2rem;
+  margin-left: 1rem;
+  color: #000;
+}
+
+.navbar-nav .nav-link:hover {
+  color: #ff4532;
+}
+
+.navbar-toggler {
+  border: none;
+}
+
+.bi {
+  font-size: 1.5rem;
+}
+
+
+/* header */
+
 .heading{
     text-align:center;
     font-family: 'Times New Roman', Times, serif;
@@ -24,3 +63,34 @@ body{
     font-style:italic;
     font-size:30px;
 }
+
+
+/* footer */
+.bg-pink {
+background-color: #FFC0CB;
+}
+
+.text-black {
+color: #000000;
+}
+
+.footer-links li {
+display: inline-block;
+margin-right: 20px;
+}
+
+.social-links li {
+display: inline-block;
+margin-right: 20px;
+}
+.row{
+padding-top: 60px;
+}
+.social-links i {
+font-size: 20px;
+}
+
+.nav-link{
+color: #000;
+}
+/* footer */