From a98f098fe3d217e43d482874e3fc284d6273ae9d Mon Sep 17 00:00:00 2001
From: Pooranjoy Bhattacharya <pooranjoyb2016@gmail.com>
Date: Sun, 12 Mar 2023 23:49:26 +0530
Subject: [PATCH] Changed relative locations of files (#112)

---
 about.html => src/about.html                  |   22 +-
 {Design => src/assets/Design}/Home-1.png      |  Bin
 {Design => src/assets/Design}/Home-2.png      |  Bin
 {images => src/assets/img}/Chevron.svg        |    0
 {images => src/assets/img}/arrowdown.png      |  Bin
 {images => src/assets/img}/bg.png             |  Bin
 {images => src/assets/img}/calendar.png       |  Bin
 {images => src/assets/img}/face1.png          |  Bin
 {images => src/assets/img}/face2.jpeg         |  Bin
 {images => src/assets/img}/face3.jpeg         |  Bin
 {images => src/assets/img}/face4.jpeg         |  Bin
 {images => src/assets/img}/face5.jpeg         |  Bin
 {images => src/assets/img}/face6.jpeg         |  Bin
 {images => src/assets/img}/icon.png           |  Bin
 {images => src/assets/img}/upButton.png       |  Bin
 wave.jpg => src/assets/img/wave.jpg           |  Bin
 {images => src/assets/img}/woman.png          |  Bin
 articlestyle.css => src/css/articlestyle.css  |    0
 faq.css => src/css/faq.css                    |    0
 {css_files => src/css}/go_to_top.css          |    0
 {css_files => src/css}/quiz.css               | 1008 ++++++++---------
 {css_files => src/css}/scrolltoTop.css        |    0
 {css_files => src/css}/style.css              |    0
 .../css}/stylemenstrualcycle.css              |    0
 {css_files => src/css}/swiper-bundle.min.css  |    0
 {css_files => src/css}/testimonial.css        |    0
 {css_files => src/css}/utils.css              |    0
 exercises.html => src/exercises.html          |   22 +-
 faq.html => src/faq.html                      |   22 +-
 hygiene.html => src/hygiene.html              |   22 +-
 index.html => src/index.html                  |  227 ++--
 faq.js => src/js/faq.js                       |    0
 {js_files => src/js}/go_to_top.js             |    0
 {js_files => src/js}/index.js                 |    0
 {js_files => src/js}/question.js              |  236 ++--
 {js_files => src/js}/script.js                |  420 +++----
 {js_files => src/js}/swiper-bundle.min.js     |    0
 {js_files => src/js}/testimonial.js           |    0
 .../menstrualcycle.html                       |   22 +-
 ovulation.html => src/ovulation.html          |   22 +-
 pregnancy.html => src/pregnancy.html          |   22 +-
 quiz.html => src/quiz.html                    |  236 ++--
 testimonial.html => src/testimonial.html      |   32 +-
 womenhealth.html => src/womenhealth.html      |   22 +-
 44 files changed, 1159 insertions(+), 1176 deletions(-)
 rename about.html => src/about.html (87%)
 rename {Design => src/assets/Design}/Home-1.png (100%)
 rename {Design => src/assets/Design}/Home-2.png (100%)
 rename {images => src/assets/img}/Chevron.svg (100%)
 rename {images => src/assets/img}/arrowdown.png (100%)
 rename {images => src/assets/img}/bg.png (100%)
 rename {images => src/assets/img}/calendar.png (100%)
 rename {images => src/assets/img}/face1.png (100%)
 rename {images => src/assets/img}/face2.jpeg (100%)
 rename {images => src/assets/img}/face3.jpeg (100%)
 rename {images => src/assets/img}/face4.jpeg (100%)
 rename {images => src/assets/img}/face5.jpeg (100%)
 rename {images => src/assets/img}/face6.jpeg (100%)
 rename {images => src/assets/img}/icon.png (100%)
 rename {images => src/assets/img}/upButton.png (100%)
 rename wave.jpg => src/assets/img/wave.jpg (100%)
 rename {images => src/assets/img}/woman.png (100%)
 rename articlestyle.css => src/css/articlestyle.css (100%)
 rename faq.css => src/css/faq.css (100%)
 rename {css_files => src/css}/go_to_top.css (100%)
 rename {css_files => src/css}/quiz.css (94%)
 rename {css_files => src/css}/scrolltoTop.css (100%)
 rename {css_files => src/css}/style.css (100%)
 rename {css_files => src/css}/stylemenstrualcycle.css (100%)
 rename {css_files => src/css}/swiper-bundle.min.css (100%)
 rename {css_files => src/css}/testimonial.css (100%)
 rename {css_files => src/css}/utils.css (100%)
 rename exercises.html => src/exercises.html (91%)
 rename faq.html => src/faq.html (95%)
 rename hygiene.html => src/hygiene.html (91%)
 rename index.html => src/index.html (54%)
 rename faq.js => src/js/faq.js (100%)
 rename {js_files => src/js}/go_to_top.js (100%)
 rename {js_files => src/js}/index.js (100%)
 rename {js_files => src/js}/question.js (95%)
 rename {js_files => src/js}/script.js (97%)
 rename {js_files => src/js}/swiper-bundle.min.js (100%)
 rename {js_files => src/js}/testimonial.js (100%)
 rename menstrualcycle.html => src/menstrualcycle.html (90%)
 rename ovulation.html => src/ovulation.html (90%)
 rename pregnancy.html => src/pregnancy.html (89%)
 rename quiz.html => src/quiz.html (86%)
 rename testimonial.html => src/testimonial.html (88%)
 rename womenhealth.html => src/womenhealth.html (90%)

diff --git a/about.html b/src/about.html
similarity index 87%
rename from about.html
rename to src/about.html
index c09d322..bcb2317 100644
--- a/about.html
+++ b/src/about.html
@@ -3,10 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="css_files/utils.css">
-    <link rel="stylesheet" href="articlestyle.css">
-    <link rel="stylesheet" href="css_files/stylemenstrualcycle.css">
-    <link rel="stylesheet" href="css_files/style.css">
+    <link rel="stylesheet" href="./css/utils.css">
+    <link rel="stylesheet" href="./css/articlestyle.css">
+    <link rel="stylesheet" href="./css/stylemenstrualcycle.css">
+    <link rel="stylesheet" href="./css/style.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap" rel="stylesheet">
@@ -15,20 +15,20 @@
     <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">
   
    
-    <link rel="stylesheet" href="css_files/go_to_top.css">
-    <link rel="icon" href="images/icon.png">
+    <link rel="stylesheet" href="./css/go_to_top.css">
+    <link rel="icon" href="./assets/img/icon.png">
     <title>About Us</title>
   
 </head>
 <body>
     <button class="gotop">
-        <img src="images/upButton.png" alt="arrow up">
+        <img src="./assets/img/upButton.png" alt="arrow up">
     </button>
     <section class="navigation-bar">
       <nav class="navbar navbar-expand-sm me-0 p-0" style="background-color: white;">
         
         <div class="container-fluid">
-          <a class="navbar-brand p-0"href="index.html"><img src="images/icon.png" height="70" alt="flow cycle logo"><p class="logoheading">FLOW CYCLE</p></a>
+          <a class="navbar-brand p-0"href="index.html"><img src="./assets/img/icon.png" height="70" alt="flow cycle logo"><p class="logoheading">FLOW CYCLE</p></a>
         </div>
 
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
@@ -38,10 +38,10 @@
         <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
-              <a class="nav-link active" aria-current="page" href="#"><img src="images/calendar.png" height="70" alt=""></a>
+              <a class="nav-link active" aria-current="page" href="#"><img src="./assets/img/calendar.png" height="70" alt=""></a>
             </li>
             <li class="nav-item">
-              <a class="nav-link mx-4" href="#"><img src="images/woman.png" height="70" alt=""></a>
+              <a class="nav-link mx-4" href="#"><img src="./assets/img/woman.png" height="70" alt=""></a>
             </li>
           </ul>
         </div>
@@ -122,6 +122,6 @@ <h1 class="heading">About Us</h1>
       nomodule
       src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
     ></script>
-    <script src="js_files/go_to_top.js"></script>
+    <script src="./js/go_to_top.js"></script>
 </body>
 </html>
diff --git a/Design/Home-1.png b/src/assets/Design/Home-1.png
similarity index 100%
rename from Design/Home-1.png
rename to src/assets/Design/Home-1.png
diff --git a/Design/Home-2.png b/src/assets/Design/Home-2.png
similarity index 100%
rename from Design/Home-2.png
rename to src/assets/Design/Home-2.png
diff --git a/images/Chevron.svg b/src/assets/img/Chevron.svg
similarity index 100%
rename from images/Chevron.svg
rename to src/assets/img/Chevron.svg
diff --git a/images/arrowdown.png b/src/assets/img/arrowdown.png
similarity index 100%
rename from images/arrowdown.png
rename to src/assets/img/arrowdown.png
diff --git a/images/bg.png b/src/assets/img/bg.png
similarity index 100%
rename from images/bg.png
rename to src/assets/img/bg.png
diff --git a/images/calendar.png b/src/assets/img/calendar.png
similarity index 100%
rename from images/calendar.png
rename to src/assets/img/calendar.png
diff --git a/images/face1.png b/src/assets/img/face1.png
similarity index 100%
rename from images/face1.png
rename to src/assets/img/face1.png
diff --git a/images/face2.jpeg b/src/assets/img/face2.jpeg
similarity index 100%
rename from images/face2.jpeg
rename to src/assets/img/face2.jpeg
diff --git a/images/face3.jpeg b/src/assets/img/face3.jpeg
similarity index 100%
rename from images/face3.jpeg
rename to src/assets/img/face3.jpeg
diff --git a/images/face4.jpeg b/src/assets/img/face4.jpeg
similarity index 100%
rename from images/face4.jpeg
rename to src/assets/img/face4.jpeg
diff --git a/images/face5.jpeg b/src/assets/img/face5.jpeg
similarity index 100%
rename from images/face5.jpeg
rename to src/assets/img/face5.jpeg
diff --git a/images/face6.jpeg b/src/assets/img/face6.jpeg
similarity index 100%
rename from images/face6.jpeg
rename to src/assets/img/face6.jpeg
diff --git a/images/icon.png b/src/assets/img/icon.png
similarity index 100%
rename from images/icon.png
rename to src/assets/img/icon.png
diff --git a/images/upButton.png b/src/assets/img/upButton.png
similarity index 100%
rename from images/upButton.png
rename to src/assets/img/upButton.png
diff --git a/wave.jpg b/src/assets/img/wave.jpg
similarity index 100%
rename from wave.jpg
rename to src/assets/img/wave.jpg
diff --git a/images/woman.png b/src/assets/img/woman.png
similarity index 100%
rename from images/woman.png
rename to src/assets/img/woman.png
diff --git a/articlestyle.css b/src/css/articlestyle.css
similarity index 100%
rename from articlestyle.css
rename to src/css/articlestyle.css
diff --git a/faq.css b/src/css/faq.css
similarity index 100%
rename from faq.css
rename to src/css/faq.css
diff --git a/css_files/go_to_top.css b/src/css/go_to_top.css
similarity index 100%
rename from css_files/go_to_top.css
rename to src/css/go_to_top.css
diff --git a/css_files/quiz.css b/src/css/quiz.css
similarity index 94%
rename from css_files/quiz.css
rename to src/css/quiz.css
index b5c9b49..123f502 100644
--- a/css_files/quiz.css
+++ b/src/css/quiz.css
@@ -1,504 +1,504 @@
-/* importing google fonts */
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
-*{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Poppins', sans-serif;
-}
-
-body{
-    background: #c5868f;
-}
-
-::selection{
-    color: #fff;
-    background: #c5868f;
-}
-
-.start_btn,
-.info_box,
-.quiz_box,
-.result_box{
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
-                0 6px 20px 0 rgba(0, 0, 0, 0.19);
-}
-
-.info_box.activeInfo,
-.quiz_box.activeQuiz,
-.result_box.activeResult{
-    opacity: 1;
-    z-index: 5;
-    pointer-events: auto;
-    transform: translate(-50%, -50%) scale(1);
-}
-
-.start_btn button{
-    font-size: 25px;
-    font-weight: 500;
-    color: #c5868f;
-    padding: 15px 30px;
-    outline: none;
-    border: none;
-    border-radius: 5px;
-    background: #fff;
-    cursor: pointer;
-}
-
-.info_box{
-    width: 540px;
-    background: #fff;
-    border-radius: 5px;
-    transform: translate(-50%, -50%) scale(0.9);
-    opacity: 0;
-    pointer-events: none;
-    transition: all 0.3s ease;
-}
-
-.info_box .info-title{
-    height: 60px;
-    width: 100%;
-    border-bottom: 1px solid lightgrey;
-    display: flex;
-    align-items: center;
-    padding: 0 30px;
-    border-radius: 5px 5px 0 0;
-    font-size: 20px;
-    font-weight: 600;
-}
-
-.info_box .info-list{
-    padding: 15px 30px;
-}
-
-.info_box .info-list .info{
-    margin: 5px 0;
-    font-size: 17px;
-}
-
-.info_box .info-list .info span{
-    font-weight: 600;
-    color: #c5868f;
-}
-.info_box .buttons{
-    height: 60px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    padding: 0 30px;
-    border-top: 1px solid lightgrey;
-}
-
-.info_box .buttons button{
-    margin: 0 5px;
-    height: 40px;
-    width: 100px;
-    font-size: 16px;
-    font-weight: 500;
-    cursor: pointer;
-    border: none;
-    outline: none;
-    border-radius: 5px;
-    border: 1px solid #c5868f;
-    transition: all 0.3s ease;
-}
-
-.quiz_box{
-    width: 550px;
-    background: #fff;
-    border-radius: 5px;
-    transform: translate(-50%, -50%) scale(0.9);
-    opacity: 0;
-    pointer-events: none;
-    transition: all 0.3s ease;
-}
-
-.quiz_box header{
-    position: relative;
-    z-index: 2;
-    height: 70px;
-    padding: 0 30px;
-    background: #fff;
-    border-radius: 5px 5px 0 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.1);
-}
-
-.quiz_box header .title{
-    font-size: 20px;
-    font-weight: 600;
-}
-
-.quiz_box header .timer{
-    color: #004085;
-    background: #cce5ff;
-    border: 1px solid #b8daff;
-    height: 45px;
-    padding: 0 8px;
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 145px;
-}
-
-.quiz_box header .timer .time_left_txt{
-    font-weight: 400;
-    font-size: 17px;
-    user-select: none;
-}
-
-.quiz_box header .timer .timer_sec{
-    font-size: 18px;
-    font-weight: 500;
-    height: 30px;
-    width: 45px;
-    color: #fff;
-    border-radius: 5px;
-    line-height: 30px;
-    text-align: center;
-    background: #343a40;
-    border: 1px solid #343a40;
-    user-select: none;
-}
-
-.quiz_box header .time_line{
-    position: absolute;
-    bottom: 0px;
-    left: 0px;
-    height: 3px;
-    background: #c5868f;
-}
-
-section{
-    padding: 25px 30px 20px 30px;
-    background: #fff;
-}
-
-section .que_text{
-    font-size: 25px;
-    font-weight: 600;
-}
-
-section .option_list{
-    padding: 20px 0px;
-    display: block;   
-}
-
-section .option_list .option{
-    background: aliceblue;
-    border: 1px solid #84c5fe;
-    border-radius: 5px;
-    padding: 8px 15px;
-    font-size: 17px;
-    margin-bottom: 15px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-section .option_list .option:last-child{
-    margin-bottom: 0px;
-}
-
-section .option_list .option:hover{
-    color: #c5868f;
-    background: #cce5ff;
-    border: 1px solid #b8daff;
-}
-
-
-section .option_list .option.disabled{
-    pointer-events: none;
-}
-
-section .option_list .option .icon{
-    height: 26px;
-    width: 26px;
-    border: 2px solid transparent;
-    border-radius: 50%;
-    text-align: center;
-    font-size: 13px;
-    pointer-events: none;
-    transition: all 0.3s ease;
-    line-height: 24px;
-}
-.option_list .option .icon.tick{
-    color: #23903c;
-    border-color: #23903c;
-    background: #d4edda;
-}
-
-.option_list .option .icon.cross{
-    color: #a42834;
-    background: #f8d7da;
-    border-color: #a42834;
-}
-
-footer{
-    height: 60px;
-    padding: 0 30px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    border-top: 1px solid lightgrey;
-}
-
-footer .total_que span{
-    display: flex;
-    user-select: none;
-}
-
-footer .total_que span p{
-    font-weight: 500;
-    padding: 0 5px;
-}
-
-footer .total_que span p:first-child{
-    padding-left: 0px;
-}
-
-footer button{
-    height: 40px;
-    padding: 0 13px;
-    font-size: 18px;
-    font-weight: 400;
-    cursor: pointer;
-    border: none;
-    outline: none;
-    color: #fff;
-    border-radius: 5px;
-    background: #c5868f;
-    border: 1px solid #c5868f;
-    line-height: 10px;
-    opacity: 0;
-    pointer-events: none;
-    transform: scale(0.95);
-    transition: all 0.3s ease;
-}
-
-footer button:hover{
-    background: #c5868f;
-}
-
-footer button.show{
-    opacity: 1;
-    pointer-events: auto;
-    transform: scale(1);
-}
-
-.result_box{
-    background: #fff;
-    border-radius: 5px;
-    display: flex;
-    padding: 25px 30px;
-    width: 450px;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-    transform: translate(-50%, -50%) scale(0.9);
-    opacity: 0;
-    pointer-events: none;
-    transition: all 0.3s ease;
-}
-
-.result_box .icon{
-    font-size: 100px;
-    color: #c5868f;
-    margin-bottom: 10px;
-}
-
-.result_box .complete_text{
-    font-size: 20px;
-    font-weight: 500;
-}
-
-.result_box .score_text span{
-    display: flex;
-    margin: 10px 0;
-    font-size: 18px;
-    font-weight: 500;
-}
-
-.result_box .score_text span p{
-    padding: 0 4px;
-    font-weight: 600;
-}
-
-.result_box .buttons{
-    display: flex;
-    margin: 20px 0;
-}
-
-.result_box .buttons button{
-    margin: 0 10px;
-    height: 45px;
-    padding: 0 20px;
-    font-size: 18px;
-    font-weight: 500;
-    cursor: pointer;
-    border: none;
-    outline: none;
-    border-radius: 5px;
-    border: 1px solid #c5868f;
-    transition: all 0.3s ease;
-}
-
-.buttons button.restart{
-    color: #fff;
-    background: #c5868f;
-}
-
-.buttons button.restart:hover{
-    background: #c5868f;
-}
-
-.buttons button.quit{
-    color: #c5868f;
-    background: #fff;
-}
-
-.buttons button.quit:hover{
-    color: #fff;
-    background: #c5868f;
-}
-
-.score_text{
-    text-align: center;
-}
-.good>h4{
-    color:yellow;
-}
-.bad>h4{
-    color:red;
-}
-/*nav*/
-* {
-    margin: 0;
-    padding: 0; 
-  }
-  
-  body{
-    background-color: pink;
-  }
-  
-
-  
-  @keyframes bounce {
-    50% {
-        transform: translateY(16px);
-    }
-  
-    100% {
-        transform: translateY(0);
-    }
-  }
-  
-  /*=================================*/
-  
-  .navigation {
-    margin-top: 25px;
-    font-family: var(--font1);
-    /* height: 74px;  */
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  
-  .nav-left {
-    display: flex;
-  }
-  
-  .nav-left span {
-    font-size: 35px;
-    padding-top: 10px;
-  }
-  
-  .nav-left ul {
-    display: flex;
-    align-items: center;
-    margin: 0 77px;
-    font-size: 22px;
-    padding-bottom: 23px;
-  }
-  
-  .nav-left ul li {
-    list-style: none;
-    margin: 0 14px;
-    font-family: var(--font2);
-    transition: all 0.3s ease-in-out;
-  }
-  
-  .nav-left ul li a {
-    text-decoration: none;
-    color: black;
-    font-family: sans-serif;
-  }
-  
-  .dark ul li a{
-    color: #fff;
-  }
-  .dark .grey{
-    color: black !important;
-  }
-  .dark .main1{
-    color: white;
-  }
-  .nav-left ul li a:hover {
-    color: var(--main-bg-color);
-    transform: scale(1.009);
-    transition: 1ms linear;
-    /* z-index: 2; */
-    /* box-shadow: 1px 1px 2px .5px var(--main-bg-color); */
-    border-bottom: 2px solid var(--main-bg-color);
-    padding: 4px;
-  }
-  
-  .content {
-    height: 100%;
-    display: flex;
-    margin-top: 32px;
-    padding: 9px;
-    position: relative;
-  }
-  
-  .content::after {
-    content: "";
-    background-image: url("../img/11.svg");
-    position: absolute;
-    width: 100%;
-    height: inherit;
-    opacity: 0.15;
-    border-radius: 12px;
-  }
-  
-  .content-left {
-    font-family: var(--font1);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 49px;
-    z-index: 1;
-  }
-  
-  .content-right {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  .content-right img {
-    height: 355px;
-    border: 2px solid black;
-    border-radius: 200px;
-  }
-  
-  
+/* importing google fonts */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+body{
+    background: #c5868f;
+}
+
+::selection{
+    color: #fff;
+    background: #c5868f;
+}
+
+.start_btn,
+.info_box,
+.quiz_box,
+.result_box{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
+                0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+.info_box.activeInfo,
+.quiz_box.activeQuiz,
+.result_box.activeResult{
+    opacity: 1;
+    z-index: 5;
+    pointer-events: auto;
+    transform: translate(-50%, -50%) scale(1);
+}
+
+.start_btn button{
+    font-size: 25px;
+    font-weight: 500;
+    color: #c5868f;
+    padding: 15px 30px;
+    outline: none;
+    border: none;
+    border-radius: 5px;
+    background: #fff;
+    cursor: pointer;
+}
+
+.info_box{
+    width: 540px;
+    background: #fff;
+    border-radius: 5px;
+    transform: translate(-50%, -50%) scale(0.9);
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.3s ease;
+}
+
+.info_box .info-title{
+    height: 60px;
+    width: 100%;
+    border-bottom: 1px solid lightgrey;
+    display: flex;
+    align-items: center;
+    padding: 0 30px;
+    border-radius: 5px 5px 0 0;
+    font-size: 20px;
+    font-weight: 600;
+}
+
+.info_box .info-list{
+    padding: 15px 30px;
+}
+
+.info_box .info-list .info{
+    margin: 5px 0;
+    font-size: 17px;
+}
+
+.info_box .info-list .info span{
+    font-weight: 600;
+    color: #c5868f;
+}
+.info_box .buttons{
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0 30px;
+    border-top: 1px solid lightgrey;
+}
+
+.info_box .buttons button{
+    margin: 0 5px;
+    height: 40px;
+    width: 100px;
+    font-size: 16px;
+    font-weight: 500;
+    cursor: pointer;
+    border: none;
+    outline: none;
+    border-radius: 5px;
+    border: 1px solid #c5868f;
+    transition: all 0.3s ease;
+}
+
+.quiz_box{
+    width: 550px;
+    background: #fff;
+    border-radius: 5px;
+    transform: translate(-50%, -50%) scale(0.9);
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.3s ease;
+}
+
+.quiz_box header{
+    position: relative;
+    z-index: 2;
+    height: 70px;
+    padding: 0 30px;
+    background: #fff;
+    border-radius: 5px 5px 0 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.1);
+}
+
+.quiz_box header .title{
+    font-size: 20px;
+    font-weight: 600;
+}
+
+.quiz_box header .timer{
+    color: #004085;
+    background: #cce5ff;
+    border: 1px solid #b8daff;
+    height: 45px;
+    padding: 0 8px;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 145px;
+}
+
+.quiz_box header .timer .time_left_txt{
+    font-weight: 400;
+    font-size: 17px;
+    user-select: none;
+}
+
+.quiz_box header .timer .timer_sec{
+    font-size: 18px;
+    font-weight: 500;
+    height: 30px;
+    width: 45px;
+    color: #fff;
+    border-radius: 5px;
+    line-height: 30px;
+    text-align: center;
+    background: #343a40;
+    border: 1px solid #343a40;
+    user-select: none;
+}
+
+.quiz_box header .time_line{
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    height: 3px;
+    background: #c5868f;
+}
+
+section{
+    padding: 25px 30px 20px 30px;
+    background: #fff;
+}
+
+section .que_text{
+    font-size: 25px;
+    font-weight: 600;
+}
+
+section .option_list{
+    padding: 20px 0px;
+    display: block;   
+}
+
+section .option_list .option{
+    background: aliceblue;
+    border: 1px solid #84c5fe;
+    border-radius: 5px;
+    padding: 8px 15px;
+    font-size: 17px;
+    margin-bottom: 15px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+section .option_list .option:last-child{
+    margin-bottom: 0px;
+}
+
+section .option_list .option:hover{
+    color: #c5868f;
+    background: #cce5ff;
+    border: 1px solid #b8daff;
+}
+
+
+section .option_list .option.disabled{
+    pointer-events: none;
+}
+
+section .option_list .option .icon{
+    height: 26px;
+    width: 26px;
+    border: 2px solid transparent;
+    border-radius: 50%;
+    text-align: center;
+    font-size: 13px;
+    pointer-events: none;
+    transition: all 0.3s ease;
+    line-height: 24px;
+}
+.option_list .option .icon.tick{
+    color: #23903c;
+    border-color: #23903c;
+    background: #d4edda;
+}
+
+.option_list .option .icon.cross{
+    color: #a42834;
+    background: #f8d7da;
+    border-color: #a42834;
+}
+
+footer{
+    height: 60px;
+    padding: 0 30px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-top: 1px solid lightgrey;
+}
+
+footer .total_que span{
+    display: flex;
+    user-select: none;
+}
+
+footer .total_que span p{
+    font-weight: 500;
+    padding: 0 5px;
+}
+
+footer .total_que span p:first-child{
+    padding-left: 0px;
+}
+
+footer button{
+    height: 40px;
+    padding: 0 13px;
+    font-size: 18px;
+    font-weight: 400;
+    cursor: pointer;
+    border: none;
+    outline: none;
+    color: #fff;
+    border-radius: 5px;
+    background: #c5868f;
+    border: 1px solid #c5868f;
+    line-height: 10px;
+    opacity: 0;
+    pointer-events: none;
+    transform: scale(0.95);
+    transition: all 0.3s ease;
+}
+
+footer button:hover{
+    background: #c5868f;
+}
+
+footer button.show{
+    opacity: 1;
+    pointer-events: auto;
+    transform: scale(1);
+}
+
+.result_box{
+    background: #fff;
+    border-radius: 5px;
+    display: flex;
+    padding: 25px 30px;
+    width: 450px;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    transform: translate(-50%, -50%) scale(0.9);
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.3s ease;
+}
+
+.result_box .icon{
+    font-size: 100px;
+    color: #c5868f;
+    margin-bottom: 10px;
+}
+
+.result_box .complete_text{
+    font-size: 20px;
+    font-weight: 500;
+}
+
+.result_box .score_text span{
+    display: flex;
+    margin: 10px 0;
+    font-size: 18px;
+    font-weight: 500;
+}
+
+.result_box .score_text span p{
+    padding: 0 4px;
+    font-weight: 600;
+}
+
+.result_box .buttons{
+    display: flex;
+    margin: 20px 0;
+}
+
+.result_box .buttons button{
+    margin: 0 10px;
+    height: 45px;
+    padding: 0 20px;
+    font-size: 18px;
+    font-weight: 500;
+    cursor: pointer;
+    border: none;
+    outline: none;
+    border-radius: 5px;
+    border: 1px solid #c5868f;
+    transition: all 0.3s ease;
+}
+
+.buttons button.restart{
+    color: #fff;
+    background: #c5868f;
+}
+
+.buttons button.restart:hover{
+    background: #c5868f;
+}
+
+.buttons button.quit{
+    color: #c5868f;
+    background: #fff;
+}
+
+.buttons button.quit:hover{
+    color: #fff;
+    background: #c5868f;
+}
+
+.score_text{
+    text-align: center;
+}
+.good>h4{
+    color:yellow;
+}
+.bad>h4{
+    color:red;
+}
+/*nav*/
+* {
+    margin: 0;
+    padding: 0; 
+  }
+  
+  body{
+    background-color: pink;
+  }
+  
+
+  
+  @keyframes bounce {
+    50% {
+        transform: translateY(16px);
+    }
+  
+    100% {
+        transform: translateY(0);
+    }
+  }
+  
+  /*=================================*/
+  
+  .navigation {
+    margin-top: 25px;
+    font-family: var(--font1);
+    /* height: 74px;  */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .nav-left {
+    display: flex;
+  }
+  
+  .nav-left span {
+    font-size: 35px;
+    padding-top: 10px;
+  }
+  
+  .nav-left ul {
+    display: flex;
+    align-items: center;
+    margin: 0 77px;
+    font-size: 22px;
+    padding-bottom: 23px;
+  }
+  
+  .nav-left ul li {
+    list-style: none;
+    margin: 0 14px;
+    font-family: var(--font2);
+    transition: all 0.3s ease-in-out;
+  }
+  
+  .nav-left ul li a {
+    text-decoration: none;
+    color: black;
+    font-family: sans-serif;
+  }
+  
+  .dark ul li a{
+    color: #fff;
+  }
+  .dark .grey{
+    color: black !important;
+  }
+  .dark .main1{
+    color: white;
+  }
+  .nav-left ul li a:hover {
+    color: var(--main-bg-color);
+    transform: scale(1.009);
+    transition: 1ms linear;
+    /* z-index: 2; */
+    /* box-shadow: 1px 1px 2px .5px var(--main-bg-color); */
+    border-bottom: 2px solid var(--main-bg-color);
+    padding: 4px;
+  }
+  
+  .content {
+    height: 100%;
+    display: flex;
+    margin-top: 32px;
+    padding: 9px;
+    position: relative;
+  }
+  
+  .content::after {
+    content: "";
+    background-image: url("../img/11.svg");
+    position: absolute;
+    width: 100%;
+    height: inherit;
+    opacity: 0.15;
+    border-radius: 12px;
+  }
+  
+  .content-left {
+    font-family: var(--font1);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 49px;
+    z-index: 1;
+  }
+  
+  .content-right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .content-right img {
+    height: 355px;
+    border: 2px solid black;
+    border-radius: 200px;
+  }
+  
+  
diff --git a/css_files/scrolltoTop.css b/src/css/scrolltoTop.css
similarity index 100%
rename from css_files/scrolltoTop.css
rename to src/css/scrolltoTop.css
diff --git a/css_files/style.css b/src/css/style.css
similarity index 100%
rename from css_files/style.css
rename to src/css/style.css
diff --git a/css_files/stylemenstrualcycle.css b/src/css/stylemenstrualcycle.css
similarity index 100%
rename from css_files/stylemenstrualcycle.css
rename to src/css/stylemenstrualcycle.css
diff --git a/css_files/swiper-bundle.min.css b/src/css/swiper-bundle.min.css
similarity index 100%
rename from css_files/swiper-bundle.min.css
rename to src/css/swiper-bundle.min.css
diff --git a/css_files/testimonial.css b/src/css/testimonial.css
similarity index 100%
rename from css_files/testimonial.css
rename to src/css/testimonial.css
diff --git a/css_files/utils.css b/src/css/utils.css
similarity index 100%
rename from css_files/utils.css
rename to src/css/utils.css
diff --git a/exercises.html b/src/exercises.html
similarity index 91%
rename from exercises.html
rename to src/exercises.html
index ea8c2e1..6957514 100644
--- a/exercises.html
+++ b/src/exercises.html
@@ -3,10 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="css_files/utils.css">
-    <link rel="stylesheet" href="articlestyle.css">
-    <link rel="stylesheet" href="css_files/stylemenstrualcycle.css">
-    <link rel="stylesheet" href="css_files/style.css">
+    <link rel="stylesheet" href="./css/utils.css">
+    <link rel="stylesheet" href="./css/articlestyle.css">
+    <link rel="stylesheet" href="./css/stylemenstrualcycle.css">
+    <link rel="stylesheet" href="./css/style.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap" rel="stylesheet">
@@ -14,20 +14,20 @@
     <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">
      
-    <link rel="stylesheet" href="css_files/go_to_top.css">
-    <link rel="icon" href="images/icon.png">
+    <link rel="stylesheet" href="./css/go_to_top.css">
+    <link rel="icon" href="./assets/img/icon.png">
     <title>Exercises</title>
   
 </head>
 <body>
     <button class="gotop">
-        <img src="images/upButton.png" alt="arrow up">
+        <img src="./assets/img/upButton.png" alt="arrow up">
     </button>
     <section class="navigation-bar">
       <nav class="navbar navbar-expand-sm me-0 p-0" style="background-color: white;">
         
         <div class="container-fluid">
-          <a class="navbar-brand p-0"href="index.html"><img src="images/icon.png" height="70" alt="flow cycle logo"><p class="logoheading">FLOW CYCLE</p></a>
+          <a class="navbar-brand p-0"href="index.html"><img src="./assets/img/icon.png" height="70" alt="flow cycle logo"><p class="logoheading">FLOW CYCLE</p></a>
         </div>
 
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
@@ -37,10 +37,10 @@
         <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
-              <a class="nav-link active" aria-current="page" href="#"><img src="images/calendar.png" height="70" alt=""></a>
+              <a class="nav-link active" aria-current="page" href="#"><img src="./assets/img/calendar.png" height="70" alt=""></a>
             </li>
             <li class="nav-item">
-              <a class="nav-link mx-4" href="#"><img src="images/woman.png" height="70" alt=""></a>
+              <a class="nav-link mx-4" href="#"><img src="./assets/img/woman.png" height="70" alt=""></a>
             </li>
           </ul>
         </div>
@@ -143,6 +143,6 @@ <h2>List of exercises you can do during your menstrual cycle : </h2>
       nomodule
       src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
     ></script>
-    <script src="js_files/go_to_top.js"></script>
+    <script src="./js/go_to_top.js"></script>
 </body>
 </html>
diff --git a/faq.html b/src/faq.html
similarity index 95%
rename from faq.html
rename to src/faq.html
index 2e7ebef..5ccd578 100644
--- a/faq.html
+++ b/src/faq.html
@@ -4,9 +4,9 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>FAQ - Frequently Asked Questions</title>
-  <link rel="icon" href="icon.png" type="image/icon type">
-  <link rel="stylesheet" href="faq.css">
-  <link rel="stylesheet" href="css_files/scrolltoTop.css">
+  <link rel="icon" href="./assets/img/icon.png" type="image/icon type">
+  <link rel="stylesheet" href="./css/faq.css">
+  <link rel="stylesheet" href="./css/scrolltoTop.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">
 
@@ -19,7 +19,7 @@
 
   <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" />
+      <img class="d-inline-block align-top" src="./assets/img/icon.png" width="30" height="30" />
       FLOW CYCLE
     </a>
     <button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" class="navbar-toggler"
@@ -30,7 +30,7 @@
     <div class="collapse navbar-collapse" id="navbarNav">
       <ul class="navbar-nav">
         <li class="nav-item active">
-          <a href="index.html" class="nav-link active">
+          <a href="./index.html" class="nav-link active">
             HOME
           </a>
         </li>
@@ -40,10 +40,10 @@
             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>
-            <li><a href="faq.html" class="dropdown-item">FAQ</a></li>
+            <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>
+            <li><a href="./faq.html" class="dropdown-item">FAQ</a></li>
           </ul>
         </li>
       </ul>
@@ -414,10 +414,10 @@ <h1 class="heading">FAQ - Frequently Asked Questions</h1>
   </div>
   <div class="scrollToTopContainer">
     <button id="scrollToButton" class="HideElement scrollToTopButton" title="Click to scroll top">
-      <img src="images/Chevron.svg" alt="Scroll-To-Top" />
+      <img src="./assets/img/Chevron.svg" alt="Scroll-To-Top" />
     </button>
   </div>
-  <script src="./faq.js">
+  <script src="./js/faq.js">
   </script>
 </body>
 <script>
diff --git a/hygiene.html b/src/hygiene.html
similarity index 91%
rename from hygiene.html
rename to src/hygiene.html
index a69b42b..98e9a20 100644
--- a/hygiene.html
+++ b/src/hygiene.html
@@ -3,9 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="css_files/utils.css">
-    <link rel="stylesheet" href="articlestyle.css">
-    <link rel="stylesheet" href="css_files/stylemenstrualcycle.css">
+    <link rel="stylesheet" href="./css/utils.css">
+    <link rel="stylesheet" href="./css/articlestyle.css">
+    <link rel="stylesheet" href="./css/stylemenstrualcycle.css">
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -13,21 +13,21 @@
     <link href="https://fonts.googleapis.com/css2?family=PT+Serif+Caption&display=swap" rel="stylesheet">
     <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">
-    <link rel="stylesheet" href="css_files/style.css">
-    <link rel="stylesheet" href="css_files/go_to_top.css">
-    <link rel="icon" href="images/icon.png">
+    <link rel="stylesheet" href="./css/style.css">
+    <link rel="stylesheet" href="./css/go_to_top.css">
+    <link rel="icon" href="./assets/img/icon.png">
     <title>Health Care & Hygiene</title>
   
 </head>
 <body>
     <button class="gotop">
-        <img src="images/upButton.png" alt="arrow up">
+        <img src="./assets/img/upButton.png" alt="arrow up">
     </button>
     <section class="navigation-bar">
       <nav class="navbar navbar-expand-sm me-0 p-0" style="background-color: white;">
         
         <div class="container-fluid">
-          <a class="navbar-brand p-0"href="index.html"><img src="images/icon.png" height="70" alt="flow cycle logo"><p class="logoheading">FLOW CYCLE</p></a>
+          <a class="navbar-brand p-0"href="index.html"><img src="./assets/img/icon.png" height="70" alt="flow cycle logo"><p class="logoheading">FLOW CYCLE</p></a>
         </div>
 
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
@@ -37,10 +37,10 @@
         <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
-              <a class="nav-link active" aria-current="page" href="#"><img src="images/calendar.png" height="70" alt=""></a>
+              <a class="nav-link active" aria-current="page" href="#"><img src="./assets/img/calendar.png" height="70" alt=""></a>
             </li>
             <li class="nav-item">
-              <a class="nav-link mx-4" href="#"><img src="images/woman.png" height="70" alt=""></a>
+              <a class="nav-link mx-4" href="#"><img src="./assets/img/woman.png" height="70" alt=""></a>
             </li>
           </ul>
         </div>
@@ -141,6 +141,6 @@ <h4>Don t use soaps or vaginal hygiene products</h4>
       nomodule
       src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
     ></script>
-    <script src="js_files/go_to_top.js"></script>
+    <script src="./js/go_to_top.js"></script>
 </body>
 </html>
diff --git a/index.html b/src/index.html
similarity index 54%
rename from index.html
rename to src/index.html
index 7de6389..3938b35 100644
--- a/index.html
+++ b/src/index.html
@@ -4,9 +4,9 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>FLOW-CYCLE</title>
-    <link rel="icon" href="images/icon.png" type="image/icon type">
-    <link rel="stylesheet" href="css_files/style.css">
- <link rel="stylesheet" href="articlestyle.css">
+    <link rel="icon" href="./assets/img/icon.png" type="image/icon type">
+    <link rel="stylesheet" href="./css/style.css">
+ <link rel="stylesheet" href="./css/articlestyle.css">
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -26,7 +26,7 @@
       <nav class="navbar navbar-expand-sm me-0 p-0" style="background-color: white;">
         
         <div class="container-fluid">
-          <a class="navbar-brand p-0"href="#"><img src="images/icon.png" height="70" alt="flow cycle logo"><p class="logoheading">FLOW CYCLE</p></a>
+          <a class="navbar-brand p-0"href="#"><img src="./assets/img/icon.png" height="70" alt="flow cycle logo"><p class="logoheading">FLOW CYCLE</p></a>
         </div>
 
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
@@ -36,10 +36,10 @@
         <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
-              <a class="nav-link active" aria-current="page" href="#"><img src="images/calendar.png" height="70" alt=""></a>
+              <a class="nav-link active" aria-current="page" href="#"><img src="./assets/img/calendar.png" height="70" alt=""></a>
             </li>
             <li class="nav-item">
-              <a class="nav-link mx-4" href="#"><img src="images/woman.png" height="70" alt=""></a>
+              <a class="nav-link mx-4" href="#"><img src="./assets/img/woman.png" height="70" alt=""></a>
             </li>
           </ul>
         </div>
@@ -73,7 +73,7 @@ <h3 id="result"></h3>
             </div>
             <div class="col-md-5 ">
               <div class="main-section-image">
-                <img src="images/bg.png" alt="" class="image "  >
+                <img src="./assets/img/bg.png" alt="" class="image "  >
               </div>
             </div>
           </div>
@@ -112,7 +112,8 @@ <h3 id="result"></h3>
           <section>
             <footer>
               <div class="footernav">
-                <a  onclick="myfunction()"><h2 id="p2" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="demo1 demo2 demo3">EXPLORE MORE <img src="images/arrowdown.png" height="75px" alt=""></h2></a>
+                <a href="#myDIV" onclick="myFunction()"><h2>EXPLORE MORE <img src="./assets/img/arrowdown.png" height="75px" alt=""></h2></a>
+                
               </div>
             </footer>
           </section>
@@ -123,138 +124,138 @@ <h3 id="result"></h3>
                   <h2>Explore More</h2>
                 </div>
                 
-                <div id="demo1" class="collapse multi-collapse">
-                  <div class="row p-5 g-4">
-                    <div class="col-sm-4 mb-3 mb-sm-0">
-                      <div class="card h-100">
-                        <div class="card-body p-4">
-                          <h5 class="card-title mb-3">About</h5>
-                          <p class="card-text">Before Starting !!! Let's Know about the motive and background of this Project...</p>
-                          <a href="about.html" class="btn">Explore</a>
-                        </div>
+                <div class="row p-5 g-4">
+                  <div class="col-sm-4 mb-3 mb-sm-0">
+                    <div class="card h-100">
+                      <div class="card-body p-4">
+                        <h5 class="card-title mb-3">About</h5>
+                        <p class="card-text">Before Starting !!! Let's Know about the motive and background of this Project...</p>
+                        <a href="./about.html" class="btn">Explore</a>
                       </div>
                     </div>
+                  </div>
 
-                    <div class="col-sm-4 mb-3 mb-sm-0">
-                      <div class="card h-100">
-                        <div class="card-body p-4">
-                          <h5 class="card-title mb-3">Exercises</h5>
-                          <p class="card-text mb-3">Let's know about some exercises to keep our body fit and fine...</p>
-                          <a href="exercises.html" class="btn ">Explore</a>
-                        </div>
+                  <div class="col-sm-4 mb-3 mb-sm-0">
+                    <div class="card h-100">
+                      <div class="card-body p-4">
+                        <h5 class="card-title mb-3">Exercises</h5>
+                        <p class="card-text mb-3">Let's know about some exercises to keep our body fit and fine...</p>
+                        <a href="./exercises.html" class="btn ">Explore</a>
                       </div>
                     </div>
+                  </div>
 
-                    <div class="col-sm-4 mb-3 mb-sm-0">
-                      <div class="card h-100">
-                        <div class="card-body p-4">
-                          <h5 class="card-title mb-3">FAQ</h5>
-                          <p class="card-text mb-3">Do You have any Query? <br> If yes !!! Do check FAQ's to get them resolved...</p>
-                          <a href="faq.html" class="btn">Explore</a>
-                        </div>
+                  <div class="col-sm-4 mb-3 mb-sm-0">
+                    <div class="card h-100">
+                      <div class="card-body p-4">
+                        <h5 class="card-title mb-3">FAQ</h5>
+                        <p class="card-text mb-3">Do You have any Query? <br> If yes !!! Do check FAQ's to get them resolved...</p>
+                        <a href="./faq.html" class="btn">Explore</a>
                       </div>
                     </div>
+                  </div>
 
-                    <div class="col-sm-4 mb-3 mb-sm-0">
-                      <div class="card h-100">
-                        <div class="card-body p-4">
-                          <h5 class="card-title mb-3">Health</h5>
-                          <p class="card-text mb-3">Come let's know about health care for girls & womens during their menstrual cycle..</p>
-                          <a href="hygiene.html" class="btn ">Explore</a>
-                        </div>
+                  <div class="col-sm-4 mb-3 mb-sm-0">
+                    <div class="card h-100">
+                      <div class="card-body p-4">
+                        <h5 class="card-title mb-3">Health</h5>
+                        <p class="card-text mb-3">Come let's know about health care for girls & womens during their menstrual cycle..</p>
+                        <a href="./hygiene.html" class="btn ">Explore</a>
                       </div>
                     </div>
+                  </div>
 
-                    <div class="col-sm-4 mb-3 mb-sm-0">
-                      <div class="card h-100">
-                        <div class="card-body p-4">
-                          <h5 class="card-title mb-3"> Menstrual Cycle</h5>
-                          <p class="card-text mb-3">Its all about knowing yourself better, and say goodbye to the unexpected dates!</p>
-                          <a href="menstrualcycle.html" class="btn ">Explore</a>
-                        </div>
+                  <div class="col-sm-4 mb-3 mb-sm-0">
+                    <div class="card h-100">
+                      <div class="card-body p-4">
+                        <h5 class="card-title mb-3"> Menstrual Cycle</h5>
+                        <p class="card-text mb-3">Its all about knowing yourself better, and say goodbye to the unexpected dates!</p>
+                        <a href="./menstrualcycle.html" class="btn ">Explore</a>
                       </div>
                     </div>
+                  </div>
 
-                    <div class="col-sm-4 mb-3 mb-sm-0">
-                      <div class="card h-100">
-                        <div class="card-body p-4">
-                          <h5 class="card-title mb-3">Ovulation</h5>
-                          <p class="card-text mb-3"> Stay aware about the internal process and system of body. How it happens, etc...</p>
-                          <a href="ovulation.html" class="btn ">Explore</a>
-                        </div>
+                  <div class="col-sm-4 mb-3 mb-sm-0">
+                    <div class="card h-100">
+                      <div class="card-body p-4">
+                        <h5 class="card-title mb-3">Ovulation</h5>
+                        <p class="card-text mb-3"> Stay aware about the internal process and system of body. How it happens, etc...</p>
+                        <a href="./ovulation.html" class="btn ">Explore</a>
                       </div>
                     </div>
+                  </div>
 
-                    <div class="col-sm-4 mb-3 mb-sm-0">
-                      <div class="card h-100">
-                        <div class="card-body p-4">
-                          <h5 class="card-title mb-3">Pregnancy</h5>
-                          <p class="card-text mb-3">Pregnancies might be overwhelming and scary at the same time. Click explore to know everything about pregnancy...</p>
-                          <a href="pregnancy.html" class="btn ">Explore</a>
-                        </div>
+                  <div class="col-sm-4 mb-3 mb-sm-0">
+                    <div class="card h-100">
+                      <div class="card-body p-4">
+                        <h5 class="card-title mb-3">Pregnancy</h5>
+                        <p class="card-text mb-3">Pregnancies might be overwhelming and scary at the same time. Click explore to know everything about pregnancy...</p>
+                        <a href="./pregnancy.html" class="btn ">Explore</a>
                       </div>
                     </div>
+                  </div>
 
-                    <div class="col-sm-4 mb-3 mb-sm-0">
-                      <div class="card h-100">
-                        <div class="card-body p-4">
-                          <h5 class="card-title mb-3">Quiz</h5>
-                          <p class="card-text mb-3">Give yourself sometime and take the quiz to know more about your body...</p>
-                          <a href="quiz.html" class="btn ">Explore</a>
-                        </div>
+                  <div class="col-sm-4 mb-3 mb-sm-0">
+                    <div class="card h-100">
+                      <div class="card-body p-4">
+                        <h5 class="card-title mb-3">Quiz</h5>
+                        <p class="card-text mb-3">Give yourself sometime and take the quiz to know more about your body...</p>
+                        <a href="./quiz.html" class="btn ">Explore</a>
                       </div>
                     </div>
+                  </div>
 
-                    <div class="col-sm-4 mb-3 mb-sm-0">
-                      <div class="card h-100">
-                        <div class="card-body p-4">
-                          <h5 class="card-title mb-3">Testimonial</h5>
-                          <p class="card-text mb-3">Know what our users say about us...</p>
-                          <a href="testimonial.html" class="btn ">Explore</a>
-                        </div>
+                  <div class="col-sm-4 mb-3 mb-sm-0">
+                    <div class="card h-100">
+                      <div class="card-body p-4">
+                        <h5 class="card-title mb-3">Testimonial</h5>
+                        <p class="card-text mb-3">Know what our users say about us...</p>
+                        <a href="./testimonial.html" class="btn ">Explore</a>
                       </div>
                     </div>
+                  </div>
 
-                    <div class="col-sm-4 mb-3 mb-sm-0">
-                      <div class="card h-100">
-                        <div class="card-body p-4">
-                          <h5 class="card-title mb-3">Women Health</h5>
-                          <p class="card-text mb-3">Here's to all the women out there!Here's to how you can lead a better and healthy Lifestyle.</p>
-                          <a href="womenhealth.html" class="btn ">Explore</a>
-                        </div>
+                  <div class="col-sm-4 mb-3 mb-sm-0">
+                    <div class="card h-100">
+                      <div class="card-body p-4">
+                        <h5 class="card-title mb-3">Women Health</h5>
+                        <p class="card-text mb-3">Here's to all the women out there!Here's to how you can lead a better and healthy Lifestyle.</p>
+                        <a href="./womenhealth.html" class="btn ">Explore</a>
                       </div>
                     </div>
                   </div>
+
                 </div>
 
 
 
             </div>
           </section>
-       <section id="news" class="collapse multi-collapse" id="demo3">
-          <form id="newsin">
-            <div>
-              <h1>Subscribe to our Newsletter</h1>
-              </br>
-              <p>Make sure you don't miss any updates regarding our latest articles</p>
-            </div>
+       <section class="news">
+        <form id="newsin">
+        <div>
+           <h1>Subscribe to our Newsletter</h1>
+          </br>
+           <p>Make sure you don't miss any updates regarding our latest articles</p>
+        </div>
 
-            <div id="info" style="background-color:white">
-              <label for="nameuser">Name :</label>
-              <input id="nameuser" type="text" placeholder="Name" name="name" required>
-              </br>
-              <label for="nameuser">Email :</label>
-              <input id="nameuser" type="text" placeholder="Email address" name="mail" required>
-              </br> 
-              <label>
-                <input id="checkedbox" type="checkbox" checked="checked" name="subscribe"> Daily Newsletter
-              </label>
-            </div>
-            <div>
-              <input id="submitnews" type="submit" value="Subscribe">
-            </div>
-          </form>
-        </section>
+     <div id="info" style="background-color:white">
+       <label for="nameuser">Name :</label>
+       <input id="nameuser" type="text" placeholder="Name" name="name" required>
+     </br>
+       <label for="nameuser">Email :</label>
+       <input id="nameuser" type="text" placeholder="Email address" name="mail" required>
+   </br> 
+       <label>
+         <input id="checkedbox" type="checkbox" checked="checked" name="subscribe"> Daily Newsletter
+       </label>
+     </div>
+
+     <div>
+       <input id="submitnews" type="submit" value="Subscribe">
+     </div>
+   </form>
+  </section>
 
         <div class="footer" id="about">
           <footer>
@@ -316,7 +317,7 @@ <h1>Subscribe to our Newsletter</h1>
 
 
     <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 src="js_files/index.js"></script>
+  <script src="./js/index.js"></script>
 
    <!--------------Preloader Script---------------->
    <script>
@@ -353,24 +354,6 @@ <h1>Subscribe to our Newsletter</h1>
   loader.classList.add("disppear");
 
 }
-function myfunction(){
-  let x=document.getElementById("p2");
-  const y=document.getElementById("myDIV");
-  const z=document.getElementById("about");
-  const t=document.getElementById("news")
-  console.log(x.ariaExpanded);
-  if(x.ariaExpanded=="true"){
-    y.style.display="block";
-    t.style.display="block";
-    z.style.display="block";
-  }
-  else{
-    t.style.display="none";
-    y.style.display="none";
-    z.style.display="none";
-    
-  }
-}
 </script>
  
   
diff --git a/faq.js b/src/js/faq.js
similarity index 100%
rename from faq.js
rename to src/js/faq.js
diff --git a/js_files/go_to_top.js b/src/js/go_to_top.js
similarity index 100%
rename from js_files/go_to_top.js
rename to src/js/go_to_top.js
diff --git a/js_files/index.js b/src/js/index.js
similarity index 100%
rename from js_files/index.js
rename to src/js/index.js
diff --git a/js_files/question.js b/src/js/question.js
similarity index 95%
rename from js_files/question.js
rename to src/js/question.js
index dd2386b..18e3da7 100644
--- a/js_files/question.js
+++ b/src/js/question.js
@@ -1,119 +1,119 @@
-// creating an array and passing the number, questions, options, and answers
-let questions = [
-  {
-    numb: 1,
-    question: "On a scale of 1 to 10, how stressful is your day?",
-    answer: "A. Less than 5",
-    options: [
-      "A. Less than 5",
-      "B. More than 5"
-    ]
-  },
-  {
-    numb: 2,
-    question: "Are you noticing sudden weight gain?",
-    answer: "B. No, I work really hard to manage it",
-    options: [
-      "A. Oh yes",
-      "B. No, I work really hard to manage it",
-    ]
-  },
-  {
-    numb: 3,
-    question: "Do you use hormonal birth control pills?",
-    answer: "A. Yeah",
-    options: [
-      "A. Yeah",
-      "B. No",
-    ]
-  },
-  {
-    numb: 4,
-    question: "	How often do you exercise?",
-    answer: "B. Oh I’m a fitness freak",
-    options: [
-      "A. I’m not that regular",
-      "B. Oh I’m a fitness freak",
-    ]
-  },
-  {
-    numb: 5,
-    question: "Do your periods often go missing?",
-    answer: "B. Thankfully, no",
-    options: [
-      "A. Sometimes",
-      "B. Thankfully, no",
-    ]
-  },
-
-  {
-    numb: 6,
-    question: "How long do your periods usually last?",
-    answer: "A. 4 to 7 days",
-    options: [
-      "A. 4 to 7 days",
-      "B. More than 7 days",
-    ]
-  },
-
-  {
-    numb: 7,
-    question: "What about cramps – how bad do they get?",
-    answer: "A.  Mild cramps right before it arrives and some pain during the first few days",
-    options: [
-      "A.   Mild cramps right before it arrives and some pain during the first few days",
-      "B. SERIOUS pain, often the can’t get out of bed kind",
-    ]
-  },
-
-  {
-    numb: 8,
-    question: "Do you have a sweet tooth?",
-    answer: "A. Yes, big time",
-    options: [
-      "A. Yes, big time",
-      "B. Not really",
-    ]
-  },
-
-  {
-    numb: 9,
-    question: "Do you have pre-existing health issues?",
-    answer: "B. No",
-    options: [
-      "A. Yes",
-      "B. No",
-    ]
-  },
-
-  {
-    numb: 10,
-    question: "How often do you get your period?",
-    answer: "B. Like clockwork, every 28 to 30 days",
-    options: [
-      "A.  Sometimes it comes a week early or a week later",
-      "B. Like clockwork, every 28 to 30 days",
-    ]
-  },
-
-  {
-    numb: 11,
-    question: "	What’s your sleep cycle like?",
-    answer: "B. I sleep 7 to 8 hours a day",
-    options: [
-      "A. It’s very disrupted",
-      "B. I sleep 7 to 8 hours a day",
-    ]
-  },
-
-  {
-    numb: 12,
-    question: " How long is your luteal phase?",
-    answer: "B. 14 days, all time, every time. I have used it accurately to conceive and have been successful",
-    options: [
-      "A. My period is so irregular I never know",
-      "B. 14 days, all time, every time. I have used it accurately to conceive and have been successful",
-    ]
-  },
-
+// creating an array and passing the number, questions, options, and answers
+let questions = [
+  {
+    numb: 1,
+    question: "On a scale of 1 to 10, how stressful is your day?",
+    answer: "A. Less than 5",
+    options: [
+      "A. Less than 5",
+      "B. More than 5"
+    ]
+  },
+  {
+    numb: 2,
+    question: "Are you noticing sudden weight gain?",
+    answer: "B. No, I work really hard to manage it",
+    options: [
+      "A. Oh yes",
+      "B. No, I work really hard to manage it",
+    ]
+  },
+  {
+    numb: 3,
+    question: "Do you use hormonal birth control pills?",
+    answer: "A. Yeah",
+    options: [
+      "A. Yeah",
+      "B. No",
+    ]
+  },
+  {
+    numb: 4,
+    question: "	How often do you exercise?",
+    answer: "B. Oh I’m a fitness freak",
+    options: [
+      "A. I’m not that regular",
+      "B. Oh I’m a fitness freak",
+    ]
+  },
+  {
+    numb: 5,
+    question: "Do your periods often go missing?",
+    answer: "B. Thankfully, no",
+    options: [
+      "A. Sometimes",
+      "B. Thankfully, no",
+    ]
+  },
+
+  {
+    numb: 6,
+    question: "How long do your periods usually last?",
+    answer: "A. 4 to 7 days",
+    options: [
+      "A. 4 to 7 days",
+      "B. More than 7 days",
+    ]
+  },
+
+  {
+    numb: 7,
+    question: "What about cramps – how bad do they get?",
+    answer: "A.  Mild cramps right before it arrives and some pain during the first few days",
+    options: [
+      "A.   Mild cramps right before it arrives and some pain during the first few days",
+      "B. SERIOUS pain, often the can’t get out of bed kind",
+    ]
+  },
+
+  {
+    numb: 8,
+    question: "Do you have a sweet tooth?",
+    answer: "A. Yes, big time",
+    options: [
+      "A. Yes, big time",
+      "B. Not really",
+    ]
+  },
+
+  {
+    numb: 9,
+    question: "Do you have pre-existing health issues?",
+    answer: "B. No",
+    options: [
+      "A. Yes",
+      "B. No",
+    ]
+  },
+
+  {
+    numb: 10,
+    question: "How often do you get your period?",
+    answer: "B. Like clockwork, every 28 to 30 days",
+    options: [
+      "A.  Sometimes it comes a week early or a week later",
+      "B. Like clockwork, every 28 to 30 days",
+    ]
+  },
+
+  {
+    numb: 11,
+    question: "	What’s your sleep cycle like?",
+    answer: "B. I sleep 7 to 8 hours a day",
+    options: [
+      "A. It’s very disrupted",
+      "B. I sleep 7 to 8 hours a day",
+    ]
+  },
+
+  {
+    numb: 12,
+    question: " How long is your luteal phase?",
+    answer: "B. 14 days, all time, every time. I have used it accurately to conceive and have been successful",
+    options: [
+      "A. My period is so irregular I never know",
+      "B. 14 days, all time, every time. I have used it accurately to conceive and have been successful",
+    ]
+  },
+
 ];
\ No newline at end of file
diff --git a/js_files/script.js b/src/js/script.js
similarity index 97%
rename from js_files/script.js
rename to src/js/script.js
index d7695c5..fa14ce0 100644
--- a/js_files/script.js
+++ b/src/js/script.js
@@ -1,211 +1,211 @@
-
-//selecting all required elements
-const start_btn = document.querySelector(".start_btn button");
-const info_box = document.querySelector(".info_box");
-const exit_btn = info_box.querySelector(".buttons .quit");
-const continue_btn = info_box.querySelector(".buttons .restart");
-const quiz_box = document.querySelector(".quiz_box");
-const result_box = document.querySelector(".result_box");
-const option_list = document.querySelector(".option_list");
-const time_line = document.querySelector("header .time_line");
-const timeText = document.querySelector(".timer .time_left_txt");
-const ScoreText1=document.querySelector(".score_text");
-const ScoreText=document.getElementsByClassName("score_text");
-const timeCount = document.querySelector(".timer .timer_sec");
-
-// if startQuiz button clicked
-start_btn.onclick = ()=>{
-    info_box.classList.add("activeInfo"); //show info box
-}
-
-// if exitQuiz button clicked
-exit_btn.onclick = ()=>{
-    info_box.classList.remove("activeInfo"); //hide info box
-}
-
-// if continueQuiz button clicked
-continue_btn.onclick = ()=>{
-    info_box.classList.remove("activeInfo"); //hide info box
-    quiz_box.classList.add("activeQuiz"); //show quiz box
-    showQuetions(0); //calling showQestions function
-    queCounter(1); //passing 1 parameter to queCounter
-    startTimer(15); //calling startTimer function
-    startTimerLine(0); //calling startTimerLine function
-}
-
-let timeValue =  15;
-let que_count = 0;
-let que_numb = 1;
-let userScore = 0;
-let counter;
-let counterLine;
-let widthValue = 0;
-
-const restart_quiz = result_box.querySelector(".buttons .restart");
-const quit_quiz = result_box.querySelector(".buttons .quit");
-
-// if restartQuiz button clicked
-restart_quiz.onclick = ()=>{
-    quiz_box.classList.add("activeQuiz"); //show quiz box
-    result_box.classList.remove("activeResult"); //hide result box
-    ScoreText1.classList.remove("good");
-    ScoreText1.classList.remove("bad");
-    console.log(ScoreText);
-    clearcontent(ScoreText);
-    console.log(ScoreText);
-    timeValue = 15; 
-    que_count = 0;
-    que_numb = 1;
-    userScore = 0;
-    widthValue = 0;
-    showQuetions(que_count); //calling showQestions function
-    queCounter(que_numb); //passing que_numb value to queCounter
-    clearInterval(counter); //clear counter
-    clearInterval(counterLine); //clear counterLine
-    startTimer(timeValue); //calling startTimer function
-    startTimerLine(widthValue); //calling startTimerLine function
-    timeText.textContent = "Time Left"; //change the text of timeText to Time Left
-    next_btn.classList.remove("show"); //hide the next button
-}
-
-// if quitQuiz button clicked
-quit_quiz.onclick = ()=>{
-    window.location.reload(); //reload the current window
-}
-
-const next_btn = document.querySelector("footer .next_btn");
-const bottom_ques_counter = document.querySelector("footer .total_que");
-
-// if Next Question button clicked
-next_btn.onclick = ()=>{
-    if(que_count < questions.length - 1){ //if question count is less than total question length
-        que_count++; //increment the que_count value
-        que_numb++; //increment the que_numb value
-        showQuetions(que_count); //calling showQestions function
-        queCounter(que_numb); //passing que_numb value to queCounter
-        clearInterval(counter); //clear counter
-        clearInterval(counterLine); //clear counterLine
-        startTimer(timeValue); //calling startTimer function
-        startTimerLine(widthValue); //calling startTimerLine function
-        timeText.textContent = "Time Left"; //change the timeText to Time Left
-        next_btn.classList.remove("show"); //hide the next button
-    }else{
-        clearInterval(counter); //clear counter
-        clearInterval(counterLine); //clear counterLine
-        showResult(); //calling showResult function
-    }
-}
-
-// getting questions and options from array
-function showQuetions(index){
-    const que_text = document.querySelector(".que_text");
-
-    //creating a new span and div tag for question and option and passing the value using array index
-    let que_tag = '<span>'+ questions[index].numb + ". " + questions[index].question +'</span>';
-    let option_tag = '<div class="option"><span>'+ questions[index].options[0] +'</span></div>'
-    + '<div class="option"><span>'+ questions[index].options[1] +'</span></div>'
-    que_text.innerHTML = que_tag; //adding new span tag inside que_tag
-    option_list.innerHTML = option_tag; //adding new div tag inside option_tag
-    
-    const option = option_list.querySelectorAll(".option");
-
-    // set onclick attribute to all available options
-    for(i=0; i < option.length; i++){
-        option[i].setAttribute("onclick", "optionSelected(this)");
-    }
-}
-// creating the new div tags which for icons
-let dotCircle = '<div class="dot circle"><i class="fa-regular fa-circle-dot"></i></div>';
-let crossIconTag = '<div class="icon cross"><i class="fas fa-times"></i></div>';
-
-//if user clicked on option
-function optionSelected(answer){
-    clearInterval(counter); //clear counter
-    clearInterval(counterLine); //clear counterLine
-    let userAns = answer.textContent; //getting user selected option
-    let correcAns = questions[que_count].answer; //getting correct answer from array
-    const allOptions = option_list.children.length; //getting all option items
-    answer.insertAdjacentHTML("beforeend", dotCircle);
-    console.log(userAns);
-    console.log(correcAns);
-    if(userAns == correcAns){ //if user selected option is equal to array's correct answer
-        userScore += 1; //upgrading score value with 1
-        console.log("Correct Answer");
-        console.log("Your correct answers = " + userScore);
-    }else{
-        console.log("Wrong Answer");
-    }
-    for(i=0; i < allOptions; i++){
-        option_list.children[i].classList.add("disabled"); //once user select an option then disabled all options
-    }
-    next_btn.classList.add("show"); //show the next button if user selected any option
-}
-
-function showResult(){
-    info_box.classList.remove("activeInfo"); //hide info box
-    quiz_box.classList.remove("activeQuiz"); //hide quiz box
-    result_box.classList.add("activeResult"); //show result box
-    const scoreText = result_box.querySelector(".score_text");
-    console.log('s');
-    if(userScore >=8){ // if user scored more than equal to 8
-        let scoreTag1 = '<h4>Congrats! Your menstrual health rocks girl</h4><br>';
-        let scoreTag2= '<p>You are doing everything right to maintain a healthy menstrual cycle. So, keep at it!</p>'
-        scoreText.innerHTML+= scoreTag1;
-        scoreText.innerHTML+=scoreTag2;
-        scoreText.classList.add("good");
-    }
-    else{ // if user scored less than 8
-        let scoreTag1 = '<h4>You are very close to getting an abnormal period. Watch out!</h4><br>';
-        let scoreTag2= '<p>You have to consult to any doctor so that you can fix those abnormality and make your lifestyle normal';
-        scoreText.innerHTML+= scoreTag1;
-        scoreText.innerHTML+=scoreTag2;
-        scoreText.classList.add("bad");
-    }
-    console.log(scoreText);
-    
-
-}
-
-function startTimer(time){
-    counter = setInterval(timer, 1000);
-    function timer(){
-        timeCount.textContent = time; //changing the value of timeCount with time value
-        time--; //decrement the time value
-        if(time < 9){ //if timer is less than 9
-            let addZero = timeCount.textContent; 
-            timeCount.textContent = "0" + addZero; //add a 0 before time value
-        }
-        if(time < 0){ //if timer is less than 0
-            clearInterval(counter); //clear counter
-            timeText.textContent = "Time Off"; //change the time text to time off
-            const allOptions = option_list.children.length; //getting all option items
-            for(i=0; i < allOptions; i++){
-                option_list.children[i].classList.add("disabled"); //once user select an option then disabled all options
-            }
-            next_btn.classList.add("show"); //show the next button if user selected any option
-        }
-    }
-}
-
-function startTimerLine(time){
-    counterLine = setInterval(timer, 29);
-    function timer(){
-        time += 1; //upgrading time value with 1
-        time_line.style.width = time + "px"; //increasing width of time_line with px by time value
-        if(time > 549){ //if time value is greater than 549
-            clearInterval(counterLine); //clear counterLine
-        }
-    }
-}
-
-function queCounter(index){
-    //creating a new span tag and passing the question number and total question
-    let totalQueCounTag = '<span><p>'+ index +'</p> of <p>'+ questions.length +'</p> Questions</span>';
-    bottom_ques_counter.innerHTML = totalQueCounTag;  //adding new span tag inside bottom_ques_counter
-}
-
-function clearcontent(element){
-    console.log(element[0]);
-    element[0].innerHTML = "";
-    console.log('d');
+
+//selecting all required elements
+const start_btn = document.querySelector(".start_btn button");
+const info_box = document.querySelector(".info_box");
+const exit_btn = info_box.querySelector(".buttons .quit");
+const continue_btn = info_box.querySelector(".buttons .restart");
+const quiz_box = document.querySelector(".quiz_box");
+const result_box = document.querySelector(".result_box");
+const option_list = document.querySelector(".option_list");
+const time_line = document.querySelector("header .time_line");
+const timeText = document.querySelector(".timer .time_left_txt");
+const ScoreText1=document.querySelector(".score_text");
+const ScoreText=document.getElementsByClassName("score_text");
+const timeCount = document.querySelector(".timer .timer_sec");
+
+// if startQuiz button clicked
+start_btn.onclick = ()=>{
+    info_box.classList.add("activeInfo"); //show info box
+}
+
+// if exitQuiz button clicked
+exit_btn.onclick = ()=>{
+    info_box.classList.remove("activeInfo"); //hide info box
+}
+
+// if continueQuiz button clicked
+continue_btn.onclick = ()=>{
+    info_box.classList.remove("activeInfo"); //hide info box
+    quiz_box.classList.add("activeQuiz"); //show quiz box
+    showQuetions(0); //calling showQestions function
+    queCounter(1); //passing 1 parameter to queCounter
+    startTimer(15); //calling startTimer function
+    startTimerLine(0); //calling startTimerLine function
+}
+
+let timeValue =  15;
+let que_count = 0;
+let que_numb = 1;
+let userScore = 0;
+let counter;
+let counterLine;
+let widthValue = 0;
+
+const restart_quiz = result_box.querySelector(".buttons .restart");
+const quit_quiz = result_box.querySelector(".buttons .quit");
+
+// if restartQuiz button clicked
+restart_quiz.onclick = ()=>{
+    quiz_box.classList.add("activeQuiz"); //show quiz box
+    result_box.classList.remove("activeResult"); //hide result box
+    ScoreText1.classList.remove("good");
+    ScoreText1.classList.remove("bad");
+    console.log(ScoreText);
+    clearcontent(ScoreText);
+    console.log(ScoreText);
+    timeValue = 15; 
+    que_count = 0;
+    que_numb = 1;
+    userScore = 0;
+    widthValue = 0;
+    showQuetions(que_count); //calling showQestions function
+    queCounter(que_numb); //passing que_numb value to queCounter
+    clearInterval(counter); //clear counter
+    clearInterval(counterLine); //clear counterLine
+    startTimer(timeValue); //calling startTimer function
+    startTimerLine(widthValue); //calling startTimerLine function
+    timeText.textContent = "Time Left"; //change the text of timeText to Time Left
+    next_btn.classList.remove("show"); //hide the next button
+}
+
+// if quitQuiz button clicked
+quit_quiz.onclick = ()=>{
+    window.location.reload(); //reload the current window
+}
+
+const next_btn = document.querySelector("footer .next_btn");
+const bottom_ques_counter = document.querySelector("footer .total_que");
+
+// if Next Question button clicked
+next_btn.onclick = ()=>{
+    if(que_count < questions.length - 1){ //if question count is less than total question length
+        que_count++; //increment the que_count value
+        que_numb++; //increment the que_numb value
+        showQuetions(que_count); //calling showQestions function
+        queCounter(que_numb); //passing que_numb value to queCounter
+        clearInterval(counter); //clear counter
+        clearInterval(counterLine); //clear counterLine
+        startTimer(timeValue); //calling startTimer function
+        startTimerLine(widthValue); //calling startTimerLine function
+        timeText.textContent = "Time Left"; //change the timeText to Time Left
+        next_btn.classList.remove("show"); //hide the next button
+    }else{
+        clearInterval(counter); //clear counter
+        clearInterval(counterLine); //clear counterLine
+        showResult(); //calling showResult function
+    }
+}
+
+// getting questions and options from array
+function showQuetions(index){
+    const que_text = document.querySelector(".que_text");
+
+    //creating a new span and div tag for question and option and passing the value using array index
+    let que_tag = '<span>'+ questions[index].numb + ". " + questions[index].question +'</span>';
+    let option_tag = '<div class="option"><span>'+ questions[index].options[0] +'</span></div>'
+    + '<div class="option"><span>'+ questions[index].options[1] +'</span></div>'
+    que_text.innerHTML = que_tag; //adding new span tag inside que_tag
+    option_list.innerHTML = option_tag; //adding new div tag inside option_tag
+    
+    const option = option_list.querySelectorAll(".option");
+
+    // set onclick attribute to all available options
+    for(i=0; i < option.length; i++){
+        option[i].setAttribute("onclick", "optionSelected(this)");
+    }
+}
+// creating the new div tags which for icons
+let dotCircle = '<div class="dot circle"><i class="fa-regular fa-circle-dot"></i></div>';
+let crossIconTag = '<div class="icon cross"><i class="fas fa-times"></i></div>';
+
+//if user clicked on option
+function optionSelected(answer){
+    clearInterval(counter); //clear counter
+    clearInterval(counterLine); //clear counterLine
+    let userAns = answer.textContent; //getting user selected option
+    let correcAns = questions[que_count].answer; //getting correct answer from array
+    const allOptions = option_list.children.length; //getting all option items
+    answer.insertAdjacentHTML("beforeend", dotCircle);
+    console.log(userAns);
+    console.log(correcAns);
+    if(userAns == correcAns){ //if user selected option is equal to array's correct answer
+        userScore += 1; //upgrading score value with 1
+        console.log("Correct Answer");
+        console.log("Your correct answers = " + userScore);
+    }else{
+        console.log("Wrong Answer");
+    }
+    for(i=0; i < allOptions; i++){
+        option_list.children[i].classList.add("disabled"); //once user select an option then disabled all options
+    }
+    next_btn.classList.add("show"); //show the next button if user selected any option
+}
+
+function showResult(){
+    info_box.classList.remove("activeInfo"); //hide info box
+    quiz_box.classList.remove("activeQuiz"); //hide quiz box
+    result_box.classList.add("activeResult"); //show result box
+    const scoreText = result_box.querySelector(".score_text");
+    console.log('s');
+    if(userScore >=8){ // if user scored more than equal to 8
+        let scoreTag1 = '<h4>Congrats! Your menstrual health rocks girl</h4><br>';
+        let scoreTag2= '<p>You are doing everything right to maintain a healthy menstrual cycle. So, keep at it!</p>'
+        scoreText.innerHTML+= scoreTag1;
+        scoreText.innerHTML+=scoreTag2;
+        scoreText.classList.add("good");
+    }
+    else{ // if user scored less than 8
+        let scoreTag1 = '<h4>You are very close to getting an abnormal period. Watch out!</h4><br>';
+        let scoreTag2= '<p>You have to consult to any doctor so that you can fix those abnormality and make your lifestyle normal';
+        scoreText.innerHTML+= scoreTag1;
+        scoreText.innerHTML+=scoreTag2;
+        scoreText.classList.add("bad");
+    }
+    console.log(scoreText);
+    
+
+}
+
+function startTimer(time){
+    counter = setInterval(timer, 1000);
+    function timer(){
+        timeCount.textContent = time; //changing the value of timeCount with time value
+        time--; //decrement the time value
+        if(time < 9){ //if timer is less than 9
+            let addZero = timeCount.textContent; 
+            timeCount.textContent = "0" + addZero; //add a 0 before time value
+        }
+        if(time < 0){ //if timer is less than 0
+            clearInterval(counter); //clear counter
+            timeText.textContent = "Time Off"; //change the time text to time off
+            const allOptions = option_list.children.length; //getting all option items
+            for(i=0; i < allOptions; i++){
+                option_list.children[i].classList.add("disabled"); //once user select an option then disabled all options
+            }
+            next_btn.classList.add("show"); //show the next button if user selected any option
+        }
+    }
+}
+
+function startTimerLine(time){
+    counterLine = setInterval(timer, 29);
+    function timer(){
+        time += 1; //upgrading time value with 1
+        time_line.style.width = time + "px"; //increasing width of time_line with px by time value
+        if(time > 549){ //if time value is greater than 549
+            clearInterval(counterLine); //clear counterLine
+        }
+    }
+}
+
+function queCounter(index){
+    //creating a new span tag and passing the question number and total question
+    let totalQueCounTag = '<span><p>'+ index +'</p> of <p>'+ questions.length +'</p> Questions</span>';
+    bottom_ques_counter.innerHTML = totalQueCounTag;  //adding new span tag inside bottom_ques_counter
+}
+
+function clearcontent(element){
+    console.log(element[0]);
+    element[0].innerHTML = "";
+    console.log('d');
 }
\ No newline at end of file
diff --git a/js_files/swiper-bundle.min.js b/src/js/swiper-bundle.min.js
similarity index 100%
rename from js_files/swiper-bundle.min.js
rename to src/js/swiper-bundle.min.js
diff --git a/js_files/testimonial.js b/src/js/testimonial.js
similarity index 100%
rename from js_files/testimonial.js
rename to src/js/testimonial.js
diff --git a/menstrualcycle.html b/src/menstrualcycle.html
similarity index 90%
rename from menstrualcycle.html
rename to src/menstrualcycle.html
index d103427..66f304a 100644
--- a/menstrualcycle.html
+++ b/src/menstrualcycle.html
@@ -3,13 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="css_files/utils.css">
-    <link rel="stylesheet" href="articlestyle.css">
-    <link rel="stylesheet" href="css_files/stylemenstrualcycle.css">
+    <link rel="stylesheet" href="./css/utils.css">
+    <link rel="stylesheet" href="./css/articlestyle.css">
+    <link rel="stylesheet" href="./css/stylemenstrualcycle.css">
 
-    <link rel="stylesheet" href="css_files/style.css">
-    <link rel="stylesheet" href="css_files/go_to_top.css">
-    <link rel="icon" href="images/icon.png">
+    <link rel="stylesheet" href="./css/style.css">
+    <link rel="stylesheet" href="./css/go_to_top.css">
+    <link rel="icon" href="./assets/img/icon.png">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap" rel="stylesheet">
@@ -22,13 +22,13 @@
 </head>
 <body>
     <button class="gotop">
-        <img src="images/upButton.png" alt="arrow up">
+        <img src="./assets/img/upButton.png" alt="arrow up">
     </button>
     <section class="navigation-bar">
       <nav class="navbar navbar-expand-sm me-0 p-0" style="background-color: white;">
         
         <div class="container-fluid">
-          <a class="navbar-brand p-0"href="index.html"><img src="images/icon.png" height="70" alt="flow cycle logo"><p class="logoheading">FLOW CYCLE</p></a>
+          <a class="navbar-brand p-0"href="index.html"><img src="./assets/img/icon.png" height="70" alt="flow cycle logo"><p class="logoheading">FLOW CYCLE</p></a>
         </div>
 
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
@@ -38,10 +38,10 @@
         <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
-              <a class="nav-link active" aria-current="page" href="#"><img src="images/calendar.png" height="70" alt=""></a>
+              <a class="nav-link active" aria-current="page" href="#"><img src="./assets/img/calendar.png" height="70" alt=""></a>
             </li>
             <li class="nav-item">
-              <a class="nav-link mx-4" href="#"><img src="images/woman.png" height="70" alt=""></a>
+              <a class="nav-link mx-4" href="#"><img src="./assets/img/woman.png" height="70" alt=""></a>
             </li>
           </ul>
         </div>
@@ -136,6 +136,6 @@ <h1 class="heading">Menstrual Cycle</h1>
       nomodule
       src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
     ></script>
-    <script src="js_files/go_to_top.js"></script>
+    <script src="./js/go_to_top.js"></script>
 </body>
 </html>
diff --git a/ovulation.html b/src/ovulation.html
similarity index 90%
rename from ovulation.html
rename to src/ovulation.html
index e92a301..f403fb3 100644
--- a/ovulation.html
+++ b/src/ovulation.html
@@ -3,9 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="css_files/utils.css">
-    <link rel="stylesheet" href="articlestyle.css">
-    <link rel="stylesheet" href="css_files/stylemenstrualcycle.css">
+    <link rel="stylesheet" href="./css/utils.css">
+    <link rel="stylesheet" href="./css/articlestyle.css">
+    <link rel="stylesheet" href="./css/stylemenstrualcycle.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap" rel="stylesheet">
@@ -13,21 +13,21 @@
     <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">
   
-    <link rel="stylesheet" href="css_files/style.css">
-    <link rel="stylesheet" href="css_files/go_to_top.css">
-    <link rel="icon" href="images/icon.png">
+    <link rel="stylesheet" href="./css/style.css">
+    <link rel="stylesheet" href="./css/go_to_top.css">
+    <link rel="icon" href="./assets/img/icon.png">
     <title>Ovulation</title>
   
 </head>
 <body>
     <button class="gotop">
-        <img src="images/upButton.png" alt="arrow up">
+        <img src="./assets/img/upButton.png" alt="arrow up">
     </button>
     <section class="navigation-bar">
       <nav class="navbar navbar-expand-sm me-0 p-0" style="background-color: white;">
         
         <div class="container-fluid">
-          <a class="navbar-brand p-0"href="index.html"><img src="images/icon.png" height="70" alt="flow cycle logo"><p class="logoheading">FLOW CYCLE</p></a>
+          <a class="navbar-brand p-0"href="index.html"><img src="./assets/img/icon.png" height="70" alt="flow cycle logo"><p class="logoheading">FLOW CYCLE</p></a>
         </div>
 
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
@@ -37,10 +37,10 @@
         <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
-              <a class="nav-link active" aria-current="page" href="#"><img src="images/calendar.png" height="70" alt=""></a>
+              <a class="nav-link active" aria-current="page" href="#"><img src="./assets/img/calendar.png" height="70" alt=""></a>
             </li>
             <li class="nav-item">
-              <a class="nav-link mx-4" href="#"><img src="images/woman.png" height="70" alt=""></a>
+              <a class="nav-link mx-4" href="#"><img src="./assets/img/woman.png" height="70" alt=""></a>
             </li>
           </ul>
         </div>
@@ -139,6 +139,6 @@ <h1 class="heading">Ovulation</h1>
       nomodule
       src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
     ></script>
-    <script src="js_files/go_to_top.js"></script>
+    <script src="./js/go_to_top.js"></script>
 </body>
 </html>
diff --git a/pregnancy.html b/src/pregnancy.html
similarity index 89%
rename from pregnancy.html
rename to src/pregnancy.html
index 670d465..a2d069a 100644
--- a/pregnancy.html
+++ b/src/pregnancy.html
@@ -3,9 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="css_files/utils.css">
-    <link rel="stylesheet" href="articlestyle.css">
-    <link rel="stylesheet" href="css_files/stylemenstrualcycle.css">
+    <link rel="stylesheet" href="./css/utils.css">
+    <link rel="stylesheet" href="./css/articlestyle.css">
+    <link rel="stylesheet" href="./css/stylemenstrualcycle.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap" rel="stylesheet">
@@ -13,21 +13,21 @@
     <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">
   
-    <link rel="stylesheet" href="css_files/style.css">
-    <link rel="stylesheet" href="css_files/go_to_top.css">
-    <link rel="icon" href="images/icon.png">
+    <link rel="stylesheet" href="./css/style.css">
+    <link rel="stylesheet" href="./css/go_to_top.css">
+    <link rel="icon" href="./assets/img/icon.png">
     <title>Pregnancy</title>
   
 </head>
 <body>
     <button class="gotop">
-        <img src="images/upButton.png" alt="arrow up">
+        <img src="./assets/img/upButton.png" alt="arrow up">
     </button>
     <section class="navigation-bar">
       <nav class="navbar navbar-expand-sm me-0 p-0" style="background-color: white;">
         
         <div class="container-fluid">
-          <a class="navbar-brand p-0"href="index.html"><img src="images/icon.png" height="70" alt="flow cycle logo"><p class="logoheading">FLOW CYCLE</p></a>
+          <a class="navbar-brand p-0"href="index.html"><img src="./assets/img/icon.png" height="70" alt="flow cycle logo"><p class="logoheading">FLOW CYCLE</p></a>
         </div>
 
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
@@ -37,10 +37,10 @@
         <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
-              <a class="nav-link active" aria-current="page" href="#"><img src="images/calendar.png" height="70" alt=""></a>
+              <a class="nav-link active" aria-current="page" href="#"><img src="./assets/img/calendar.png" height="70" alt=""></a>
             </li>
             <li class="nav-item">
-              <a class="nav-link mx-4" href="#"><img src="images/woman.png" height="70" alt=""></a>
+              <a class="nav-link mx-4" href="#"><img src="./assets/img/woman.png" height="70" alt=""></a>
             </li>
           </ul>
         </div>
@@ -139,6 +139,6 @@ <h1 class="heading">Pregnancy</h1>
       nomodule
       src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
     ></script>
-    <script src="js_files/go_to_top.js"></script>
+    <script src="./js/go_to_top.js"></script>
 </body>
 </html>
diff --git a/quiz.html b/src/quiz.html
similarity index 86%
rename from quiz.html
rename to src/quiz.html
index 661b0b2..1db2e03 100644
--- a/quiz.html
+++ b/src/quiz.html
@@ -1,118 +1,118 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Quiz App</title>
-    <link rel="stylesheet" href="css_files/quiz.css">
-    <!-- FontAweome CDN Link for Icons -->
-    <link rel="stylesheet" href="css_files/utils.css">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=PT+Serif+Caption&display=swap" rel="stylesheet">
-    <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">
-    <link rel="stylesheet" href="css_files/style.css">
-    <link rel="stylesheet" href="css_files/stylemenstrualcycle.css">
-
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"/>
-</head>
-<body>
-   
-    <section class="navigation-bar">
-        <nav class="navbar navbar-expand-sm me-0 p-0" style="background-color: white;">
-          
-          <div class="container-fluid">
-            <a class="navbar-brand p-0"href="index.html"><img src="images/icon.png" height="70" alt="flow cycle logo"><p class="logoheading">FLOW CYCLE</p></a>
-          </div>
-  
-          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-          </button>
-  
-          <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
-            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-              <li class="nav-item">
-                <a class="nav-link active" aria-current="page" href="#"><img src="images/calendar.png" height="70" alt=""></a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link mx-4" href="#"><img src="images/woman.png" height="70" alt=""></a>
-              </li>
-            </ul>
-          </div>
-        </nav>
-      </section>
-    <!-- start Quiz button -->
-    <div class="start_btn"><button>Start Quiz</button></div>
-
-    <!-- Info Box -->
-    <div class="info_box">
-        <div class="info-title"><span>Some Rules of this Quiz</span></div>
-        <div class="info-list">
-            <div class="info">1. You will have only <span>15 seconds</span> per each question.</div>
-            <div class="info">2. Once you select your answer, it can't be undone.</div>
-            <div class="info">3. You can't select any option once time goes off.</div>
-            <div class="info">4. You can't exit from the Quiz while you're playing.</div>
-            <div class="info">5. You'll get points on the basis of your correct answers.</div>
-        </div>
-        <div class="buttons">
-            <button class="quit">Exit Quiz</button>
-            <button class="restart">Continue</button>
-        </div>
-    </div>
-
-    <!-- Quiz Box -->
-    <div class="quiz_box">
-        <header>
-            <div class="title">Mcq Type Question</div>
-            <div class="timer">
-                <div class="time_left_txt">Time Left</div>
-                <div class="timer_sec">15</div>
-            </div>
-            <div class="time_line"></div>
-        </header>
-        <section>
-            <div class="que_text">
-                <!-- Here I've inserted question from JavaScript -->
-            </div>
-            <div class="option_list">
-                <!-- Here I've inserted options from JavaScript -->
-            </div>
-        </section>
-
-        <!-- footer of Quiz Box -->
-        <footer class="quiz">
-            <div class="total_que">
-                <!-- Here I've inserted Question Count Number from JavaScript -->
-            </div>
-            <button class="next_btn">Next Question</button>
-        </footer>
-    </div>
-
-    <!-- Result Box -->
-    <div class="result_box">
-        <div class="icon">
-            <i class="fas fa-crown"></i>
-        </div>
-        <div class="complete_text">You've completed the Quiz!</div>
-        <div class="score_text">
-            <!-- Here I've inserted Score Result from JavaScript -->
-        </div>
-        <div class="buttons">
-            <button class="restart">Replay Quiz</button>
-            <button class="quit">Quit Quiz</button>
-        </div>
-    </div>
-
-    
-
-    <!-- Inside this JavaScript file I've inserted Questions and Options only -->
-    <script src="js_files/question.js"></script>
-
-    <!-- Inside this JavaScript file I've coded all Quiz Codes -->
-    <script src="js_files/script.js"></script>
-
-</body>
-</html>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Quiz App</title>
+    <link rel="stylesheet" href="./css/quiz.css">
+    <!-- FontAweome CDN Link for Icons -->
+    <link rel="stylesheet" href="./css/utils.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=PT+Serif+Caption&display=swap" rel="stylesheet">
+    <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">
+    <link rel="stylesheet" href="./css/style.css">
+    <link rel="stylesheet" href="./css/stylemenstrualcycle.css">
+    <link rel="icon" href="./assets/img/icon.png">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"/>
+</head>
+<body>
+   
+    <section class="navigation-bar">
+        <nav class="navbar navbar-expand-sm me-0 p-0" style="background-color: white;">
+          
+          <div class="container-fluid">
+            <a class="navbar-brand p-0"href="index.html"><img src="./assets/img/icon.png" height="70" alt="flow cycle logo"><p class="logoheading">FLOW CYCLE</p></a>
+          </div>
+  
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+  
+          <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page" href="#"><img src="./assets/img/calendar.png" height="70" alt=""></a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link mx-4" href="#"><img src="./assets/img/woman.png" height="70" alt=""></a>
+              </li>
+            </ul>
+          </div>
+        </nav>
+      </section>
+    <!-- start Quiz button -->
+    <div class="start_btn"><button>Start Quiz</button></div>
+
+    <!-- Info Box -->
+    <div class="info_box">
+        <div class="info-title"><span>Some Rules of this Quiz</span></div>
+        <div class="info-list">
+            <div class="info">1. You will have only <span>15 seconds</span> per each question.</div>
+            <div class="info">2. Once you select your answer, it can't be undone.</div>
+            <div class="info">3. You can't select any option once time goes off.</div>
+            <div class="info">4. You can't exit from the Quiz while you're playing.</div>
+            <div class="info">5. You'll get points on the basis of your correct answers.</div>
+        </div>
+        <div class="buttons">
+            <button class="quit">Exit Quiz</button>
+            <button class="restart">Continue</button>
+        </div>
+    </div>
+
+    <!-- Quiz Box -->
+    <div class="quiz_box">
+        <header>
+            <div class="title">Mcq Type Question</div>
+            <div class="timer">
+                <div class="time_left_txt">Time Left</div>
+                <div class="timer_sec">15</div>
+            </div>
+            <div class="time_line"></div>
+        </header>
+        <section>
+            <div class="que_text">
+                <!-- Here I've inserted question from JavaScript -->
+            </div>
+            <div class="option_list">
+                <!-- Here I've inserted options from JavaScript -->
+            </div>
+        </section>
+
+        <!-- footer of Quiz Box -->
+        <footer class="quiz">
+            <div class="total_que">
+                <!-- Here I've inserted Question Count Number from JavaScript -->
+            </div>
+            <button class="next_btn">Next Question</button>
+        </footer>
+    </div>
+
+    <!-- Result Box -->
+    <div class="result_box">
+        <div class="icon">
+            <i class="fas fa-crown"></i>
+        </div>
+        <div class="complete_text">You've completed the Quiz!</div>
+        <div class="score_text">
+            <!-- Here I've inserted Score Result from JavaScript -->
+        </div>
+        <div class="buttons">
+            <button class="restart">Replay Quiz</button>
+            <button class="quit">Quit Quiz</button>
+        </div>
+    </div>
+
+    
+
+    <!-- Inside this JavaScript file I've inserted Questions and Options only -->
+    <script src="./js/question.js"></script>
+
+    <!-- Inside this JavaScript file I've coded all Quiz Codes -->
+    <script src="./js/script.js"></script>
+
+</body>
+</html>
+</html>
diff --git a/testimonial.html b/src/testimonial.html
similarity index 88%
rename from testimonial.html
rename to src/testimonial.html
index 14c94e7..626bc17 100644
--- a/testimonial.html
+++ b/src/testimonial.html
@@ -6,10 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Testimonial</title>
 
-    <link rel="stylesheet" href="css_files/swiper-bundle.min.css">
-
-    <link rel="stylesheet" href="css_files/scrolltoTop.css">
-    <link rel="stylesheet" href="css_files/testimonial.css">
+    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
+    <link rel="icon" href="./assets/img/icon.png">
+    <link rel="stylesheet" href="./css/scrolltoTop.css">
+    <link rel="stylesheet" href="./css/testimonial.css">
 
 </head>
 
@@ -25,7 +25,7 @@ <h2>-What People Think-</h2>
                     <span class="overlay"> </span>
 
                     <div class="card-image">
-                        <img src="images/face1.png" alt=" " class="card-img">
+                        <img src="./assets/img/face1.png" alt=" " class="card-img">
                     </div>
                 </div>
                 <div class="card-content">
@@ -42,7 +42,7 @@ <h2 class="name">Amelia </h2>
                         <span class="overlay"> </span>
     
                         <div class="card-image">
-                            <img src="images/face2.jpeg" alt=" " class="card-img">
+                            <img src="./assets/img/face2.jpeg" alt=" " class="card-img">
                         </div>
                     </div>
                     <div class="card-content">
@@ -59,7 +59,7 @@ <h2 class="name">Abigale</h2>
                             <span class="overlay"> </span>
         
                             <div class="card-image">
-                                <img src="images/face3.jpeg" alt=" " class="card-img">
+                                <img src="./assets/img/face3.jpeg" alt=" " class="card-img">
                             </div>
                         </div>
                         <div class="card-content">
@@ -77,7 +77,7 @@ <h2 class="name">Caroline</h2>
                                 <span class="overlay"> </span>
             
                                 <div class="card-image">
-                                    <img src="images/face4.jpeg" alt=" " class="card-img">
+                                    <img src="./assets/img/face4.jpeg" alt=" " class="card-img">
                                 </div>
                             </div>
                             <div class="card-content">
@@ -95,7 +95,7 @@ <h2 class="name">Pearl</h2>
                                     <span class="overlay"> </span>
                 
                                     <div class="card-image">
-                                        <img src="images/face5.jpeg" alt=" " class="card-img">
+                                        <img src="./assets/img/face5.jpeg" alt=" " class="card-img">
                                     </div>
                                 </div>
                                 <div class="card-content">
@@ -113,7 +113,7 @@ <h2 class="name">Eliza</h2>
                                         <span class="overlay"> </span>
                     
                                         <div class="card-image">
-                                            <img src="images/face6.jpeg" alt=" " class="card-img">
+                                            <img src="./assets/img/face6.jpeg" alt=" " class="card-img">
                                         </div>
                                     </div>
                                     <div class="card-content">
@@ -131,7 +131,7 @@ <h2 class="name">Margarate</h2>
                                             <span class="overlay"> </span>
                         
                                             <div class="card-image">
-                                                <img src="images/face1.png" alt=" " class="card-img">
+                                                <img src="./assets/img/face1.png" alt=" " class="card-img">
                                             </div>
                                         </div>
                                         <div class="card-content">
@@ -149,7 +149,7 @@ <h2 class="name">Olivia</h2>
                                                 <span class="overlay"> </span>
                             
                                                 <div class="card-image">
-                                                    <img src="images/face3.jpeg" alt=" " class="card-img">
+                                                    <img src="./assets/img/face3.jpeg" alt=" " class="card-img">
                                                 </div>
                                             </div>
                                             <div class="card-content">
@@ -167,7 +167,7 @@ <h2 class="name">Helen</h2>
                             <span class="overlay"> </span>
         
                             <div class="card-image">
-                                <img src="images/face6.jpeg" alt=" " class="card-img">
+                                <img src="./assets/img/face6.jpeg" alt=" " class="card-img">
                             </div>
                         </div>
                         <div class="card-content">
@@ -190,12 +190,12 @@ <h2 class="name">Emilia K.</h2>
     </div>
     <div class="scrollToTopContainer">
         <button id="scrollToButton" class="HideElement scrollToTopButton" title="Click to scroll top">
-          <img src="images/Chevron.svg" alt="Scroll-To-Top" />
+          <img src="./assets/img/Chevron.svg" alt="Scroll-To-Top" />
         </button>
 </body>
 
-<script src="js_files/swiper-bundle.min.js"></script>
-<script src="js_files/testimonial.js"></script>
+<script src="./js/swiper-bundle.min.js"></script>
+<script src="./js/testimonial.js"></script>
 <script>
     const scrollToTopHandler = () => {
   let btn = document.getElementById("scrollToButton");
diff --git a/womenhealth.html b/src/womenhealth.html
similarity index 90%
rename from womenhealth.html
rename to src/womenhealth.html
index 9719ff1..904fca4 100644
--- a/womenhealth.html
+++ b/src/womenhealth.html
@@ -3,10 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="css_files/utils.css">
-    <link rel="stylesheet" href="articlestyle.css">
-    <link rel="stylesheet" href="css_files/stylemenstrualcycle.css">
-    <link rel="stylesheet" href="css_files/style.css">
+    <link rel="stylesheet" href="./css/utils.css">
+    <link rel="stylesheet" href="./css/articlestyle.css">
+    <link rel="stylesheet" href="./css/stylemenstrualcycle.css">
+    <link rel="stylesheet" href="./css/style.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap" rel="stylesheet">
@@ -14,20 +14,20 @@
     <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">
      
-    <link rel="stylesheet" href="css_files/go_to_top.css">
-    <link rel="icon" href="images/icon.png">
+    <link rel="stylesheet" href="./css/go_to_top.css">
+    <link rel="icon" href="./assets/img/icon.png">
     <title>Women Health</title>
   
 </head>
 <body>
     <button class="gotop">
-        <img src="images/upButton.png" alt="arrow up">
+        <img src="./assets/img/upButton.png" alt="arrow up">
     </button>
     <section class="navigation-bar">
       <nav class="navbar navbar-expand-sm me-0 p-0" style="background-color: white;">
         
         <div class="container-fluid">
-          <a class="navbar-brand p-0"href="index.html"><img src="images/icon.png" height="70" alt="flow cycle logo"><p class="logoheading">FLOW CYCLE</p></a>
+          <a class="navbar-brand p-0"href="index.html"><img src="./assets/img/icon.png" height="70" alt="flow cycle logo"><p class="logoheading">FLOW CYCLE</p></a>
         </div>
 
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
@@ -37,10 +37,10 @@
         <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
-              <a class="nav-link active" aria-current="page" href="#"><img src="images/calendar.png" height="70" alt=""></a>
+              <a class="nav-link active" aria-current="page" href="#"><img src="./assets/img/calendar.png" height="70" alt=""></a>
             </li>
             <li class="nav-item">
-              <a class="nav-link mx-4" href="#"><img src="images/woman.png" height="70" alt=""></a>
+              <a class="nav-link mx-4" href="#"><img src="./assets/img/woman.png" height="70" alt=""></a>
             </li>
           </ul>
         </div>
@@ -146,6 +146,6 @@ <h1 class="heading">Women Health</h1>
       nomodule
       src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
     ></script>
-    <script src="js_files/go_to_top.js"></script>
+    <script src="./js/go_to_top.js"></script>
 </body>
 </html>