Add files via upload

Tavish108 · Feb 8, 2023 · a697b56 · a697b56
commit a697b56
Show file tree

Hide file tree

Showing 15 changed files with 688 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,8 @@
+##  Flow-Cycle
+
+A guide to a woman's menstruation cycle as well as the time taken to get her next period.
+Also we have been focussing on the women health and hygiene so that they donot face any problem in her upcoming periods.
+<p> We also focussed on pregnancy and the time when they might get the most pregnant. To educate the women about the ovulation cycle and menstrual cycle, we have created a different section.</p>
+
+
+
diff --git a/about.html b/about.html
@@ -0,0 +1,73 @@
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>ABOUT-US</title>
+    <link rel="icon" href="icon.png" type="image/icon type">
+    <link rel="stylesheet" href="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">
+
+
+    <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">
+          <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>
+
+          </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>-->
+      </div>
+
+</nav>
+    <h1 class="heading">About Us</h1>
+    <div class="information">
+        <div class="info">
+          <p>This is a project built collectively by <a href="https://github.com/taniaban2712" target="_blank" style="color:black">Tania Banerjee</a> and <a href="https://github.com/nisha331" target="_blank" style="color:black">Nisha Yadav.</a> This was made for all the women out there who face problems with their periods and also for educating the women out there so that they are aware about their body more.</p>
+          <p>SheBuilds Hackathon gave us the platform to make such a project and help the woman out there.</p>
+          <p></p>
+          <p>Women had been oppressed by this patriachal society for a long time but now they have emerged confident as ever and embraced their body. Yet some girls who feel underconfident about their body or puberty and people who still think that sex is a taboo, we want them to know, its normal to speak about these and educate themselves.</p>
+          <p>We should normalise talking about sex-ed and menstruation. Also, some women get anxiety regarding pregnancies and there are many superstitions regarding pregnancies, but we want to show the people through this project that they are the best.</p>
+
+          <p class="end"><b>EMBRACE YOURSELF. THE WORLD CAN WAIT!</b></p>
+        </div>
+    </div>
+  </body>
diff --git a/background.jpg b/background.jpg
diff --git a/backgroundabout.jpg b/backgroundabout.jpg
diff --git a/backgrounddropdown.png b/backgrounddropdown.png
diff --git a/icon.png b/icon.png
diff --git a/index.html b/index.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>FLOW-CYCLE</title>
+    <link rel="icon" href="icon.png" type="image/icon type">
+    <link rel="stylesheet" href="style.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">
+
+
+    <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 class="body-back">
+
+
+    <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">
+                <ul class="navbar-nav">
+                    <li class="nav-item active">
+                        <a href="#" 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>
+
+                </ul>
+
+            </div>
+
+    </nav>
+
+
+
+
+<div class="container">
+    <div class="square">
+      <div id="content">
+        <h2>Did you Just start your periods.</h2>
+        <p>
+            <input type="button" 
+                value="Log your periods" 
+                id="bt" 
+                onclick="toggle(this)">
+        </p>
+        <div style="border:solid 1px #ddd; 
+        padding:10px; 
+        display:none;" 
+        id="cont"><input type=date id = "Day">
+
+        <!-- Choose a date and enter in input field -->
+        <button type="submit" onclick = "Calculator()"> date </button> <br><br>
+        <h3 style="color:32A80F" id="result" align="center"></h3> </div>
+
+
+      </div>
+    </div>
+  </div>
+
+<div id="mens"><b>is the date when you will have your next periods.</b></div>
+
+<div class="experi">
+    <h3></h3>
+    <ul class="wlist">
+        <li></li>
+    </ul>
+</div>
+<footer class="text-dark pt-5 pt-4">
+    <div class="container text-center text-md-left">
+        <div class="row text-center text-md-left">
+            <div class="col-md-3 col-lg col-xl-3 mx-auto mt-3">
+                <h5 class="text-uppercase mb-4 font-weight-bold text-warning"></h5>
+                <p>
+
+                </p>
+            </div>
+            <div class="col-md-2 col-lg col-xl-2 mx-auto mt-2">
+                <h5 class="text-uppercase mb-4 font-weight-bold text-warning"></h5>
+                <p>
+
+                </p>
+            </div>
+        </div>
+    </div>
+</footer>
+
+
+
+
+
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
+    <script>
+        function toggle(ele) {
+            var cont = document.getElementById('cont');
+            cont.style.display = cont.style.display == 'none' ? 'block' : 'none';
+        }
+        function Calculator() {
+console.log("In");
+    var userinput = document.getElementById("Day").value;
+    var dt = new Date(userinput);
+    if(userinput==null || userinput=='') {
+      document.getElementById("result").innerHTML = "**Choose a date please!";  
+      return false; 
+    } else {
+var res = new Date();
+
+res.setDate(dt.getDate()+28);
+var monthNames = ["January", "February", "March", "April", "May", "June",
+  "July", "August", "September", "October", "November", "December"
+];
+
+var res_date=res.getDate();
+var res_mon=res.getMonth();
+
+
+     document.getElementById("result").innerHTML =  
+             res_date + " " +monthNames[res_mon-1];
+    }
+}
+    </script>
+</body>
+</html>
+
+
diff --git a/menstrualcycle.html b/menstrualcycle.html
@@ -0,0 +1,94 @@
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>MENSTRUAL-CYCLE</title>
+    <link rel="icon" href="icon.png" type="image/icon type">
+    <link rel="stylesheet" href="stylemenstrualcycle.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">
+
+
+    <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">
+          <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>
+
+
+          </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>-->
+      </div>
+
+</nav>
+
+
+
+
+    <h1 class="heading">Menstrual Cycle</h1>
+    <div class="information">
+        <div class="inf">
+          <p class="exclaim">Its all about knowing yourself better, and <b>say goodbye to the unexpected dates!</b></p>
+          <p>Your menstrual cycle days begin from the first day of your last period and end on the first day of your next. The length of normal menstrual cycle days is different for different women, but the average length of a cycle can be anywhere between 24 to 38 days.</p>
+          <p>The length of period cycle days is also dynamic. It keeps changing between your <b>menarche </b>(when your periods first arrive during puberty) and <b>menopause</b> (when your periods stop forever).</p>
+          <p>The key elements involved in and affecting women's menstrual cycle is a complex interaction between your brain, female hormones: oestrogen and progesterone, the uterus, and the ovaries.</p>
+          <p>The pituitary gland situated at the base of your brain signals your ovaries to secrete oestrogen and progesterone that prepare the body for a possible pregnancy. Thus, commencing the menstrual period cycle which progresses in four main phases:</p>
+
+          <ul>
+            <li><b>Menstruation:</b></li>
+            <p></p>
+            <p>During this phase, a menstrual fluid consisting of blood, mucus, and the cells of the uterine lining is eliminated through the vaginal opening. This is your period. It can last anywhere between 2 to 7 days.</p>
+            <li><b>The Follicular Phase:</b></li>
+            <p></p>
+            <p>The follicular phase of your menstrual cycle begins from the first day of your period and lasts up until ovulation. In the course of this phase, oestrogen levels rise, and the ovaries prepare for the release of an egg for possible fertilization.
+              The follicular phase also stimulates the phase where the uterine lining begins to build again.</p>
+            <li><b>Ovulation:</b></li>
+            <p></p>
+            <p>In this phase, ovaries release the egg. It travels through the fallopian tubes and implants itself into the lining along the walls of your uterus.
+              This phase usually occurs around two weeks prior to your periods. During this process, the oestrogen level peaks and drops just shortly after.
+              The typical life span of this egg is about 24 hours. Unless it is fertilised by a sperm cell during this window, it dies and is shed along with the uterine lining.</p>
+            <li><b>The Luteal Phase:</b></li>
+            <p>The phase that occurs between ovulation and the first day of your period is called the luteal phase. This phase sees a rise in the level of progesterone, required to maintain the thickness of the uterine lining to nurture the fertilised egg. Now, if during that time, pregnancy does not occur, progesterone levels drop. This causes the uterine lining to break down and shed away, along with other menstrual fluid.</p>
+          </ul>
+        </div>
+    </div>
+  </body>