Skip to content

Commit

Permalink
Explore more section (#86)
Browse files Browse the repository at this point in the history 
* Badges added

* Update README.md

* contributors section added

* edited badges

* issue fixed

* MIT license added

* explore more added
  • Loading branch information
@khushimarothi
khushimarothi authored Mar 5, 2023
1 parent 99f5ae9 commit dcbb0c4
Show file tree
Hide file tree
Showing 2 changed files with 171 additions and 4 deletions.
53 changes: 50 additions & 3 deletions css_files/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.body-back {
background-color: #EFB7C7;
font-family: 'Raleway', sans-serif;
overflow: hidden;

}
.loader {

Expand Down Expand Up @@ -67,7 +67,7 @@

.backgroundimage{
float: right;
height: 810px;
height: 88vh;
}

#infobox{
Expand Down Expand Up @@ -134,8 +134,13 @@
height: 70px;
width: 100%;
background-color: white;
text-align: center;
cursor:pointer;
}
.footernav a{
text-decoration: none;
color: #E82771;
}

.footernav>h2{
color: #EB1365;
text-align: center;
Expand All @@ -158,3 +163,45 @@
background-color: #E82771;;
color:white;
}


/*---------explore more section----------*/

.explore{
background-color: white;
}
.explore h2{
display:none;
color:#EB1365;
text-align:center;
}
.explore .card{
background:#ffd7e9 ;
border:none;
text-align:center;

}
.explore .card-title{
color: #EB1365;
font-weight:bold;
font-size: 30px;
font-family: 'Times New Roman', Times, serif;

}
.explore .card p{
font-weight: 500;
color:#EB1365;
font-size: 17px;
font-family: 'Times New Roman', Times, serif;
}
.explore .btn{
background:white;
color:#EB1365;
}
.explore .btn:hover{
background:white !important;
color:#EB1365!important;
cursor:pointer;
}

/*--------------------------*/
122 changes: 121 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,11 +76,131 @@ <h3 id="result"></h3>
<section>
<footer>
<div class="footernav">
<h2>EXPLORE MORE <img src="images/arrowdown.png" height="75px" alt=""></h2>
<a href="#myDIV" onclick="myFunction()"><h2>EXPLORE MORE <img src="images/arrowdown.png" height="75px" alt=""></h2></a>
</div>
</footer>
</section>




<section class="explore pt-1" id="myDIV">
<div class="container py-5" >
<div class="row" id="expl">
<h2>Explore More</h2>
</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>
</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="health.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>
</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>
</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>
</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>



<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>
<!--------------Preloader Script---------------->
Expand Down

0 comments on commit dcbb0c4

Please sign in to comment.