Milescoded · Collins07 · May 26, 2023 · May 26, 2023 · May 26, 2023 · May 26, 2023
diff --git a/README.md → BlissVerse/README.md b/README.md → BlissVerse/README.md
diff --git a/BlissVerse/images/mental12.jpg b/BlissVerse/images/mental12.jpg
diff --git a/BlissVerse/images/mental15.png b/BlissVerse/images/mental15.png
diff --git a/BlissVerse/images/mental5.jpg b/BlissVerse/images/mental5.jpg
diff --git a/BlissVerse/images/poem.jpg b/BlissVerse/images/poem.jpg
diff --git a/BlissVerse/images/undraw_Grandma_re_rnv1 (1).png b/BlissVerse/images/undraw_Grandma_re_rnv1 (1).png
diff --git a/BlissVerse/index.css b/BlissVerse/index.css
@@ -0,0 +1,186 @@
+#nav{
+    font-weight: bold;
+
+    margin-left: 45%;
+}
+#heart{
+    color: white;
+    font-size: 50px;
+}
+#contact{
+    margin-left: 35%;
+    border: 2px solid #000C40;
+    color: #000C40;
+}
+#contact:hover{
+    color: white;
+    background-color: #000C40;
+}
+#title{
+    font-weight: bold;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    font-size: 30px;
+    color: white;
+    margin-left: 3%;
+}
+#nav-link{
+    color: rgb(248, 224, 193);
+    font-size: 20px;
+    margin-left: 15%;
+}
+#nav-link:hover{
+    color: black;
+
+}
+#navbar{
+    background: #F0F2F0;  /* fallback for old browsers */
+background: -webkit-linear-gradient(to right, #000C40, #F0F2F0);  /* Chrome 10-25, Safari 5.1-6 */
+background: linear-gradient(to right, #000C40, #F0F2F0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+}
+#button{
+    background-color: #313b69;
+    border: none;
+    color: white;
+    font-weight: bold;
+}
+#button2{
+    background-color: #000C40;
+    border: none;
+    color: white;
+}
+h3{
+    color: #000C40;
+    text-align: start;
+    font-weight: bold;
+    text-decoration: underline;
+}
+#more{
+    color: #000C40;
+    font-weight: bold;
+    text-decoration: none;
+    border: none;
+    background-color: white;
+}
+.continuation{
+    display: none;
+}
+#button2{
+    display: none;
+}
+
+
+.header{
+    margin-top: 3%;
+    font-weight: bold;
+    color: #000C40;
+}
+.poem-intro{
+    font-size: 20px;
+    font-weight: 70;
+}
+
+#hero-description{
+    color: #000C40;
+}
+#blissverse{
+    font-family: bold;
+}
+
+
+/* mind matters */
+.p1, .p2{
+    margin-left: 3%;
+    font-size: 17px;
+}
+.txt_view {
+    overflow:hidden;
+    position:relative;
+    width:978px;
+    height:300px;
+    border:2px solid #000C40;
+    background-color:#fff;
+     box-sizing:border-box;
+    -webkit-box-sizing:border-box;
+    -moz-box-sizing:border-box;
+}
+.actionTxtType5 {
+    position:relative;
+    padding:40px 0;
+    height:100%;
+    border-top:none;
+    background-color:#fff;
+    text-align:center;
+    box-sizing:border-box;
+    -webkit-box-sizing:border-box;
+    -moz-box-sizing:border-box;
+}
+.actionTxtType5:after {
+    position:absolute;
+    z-index:0;
+    top:0;
+    left:0;
+    display:block;
+    content:'';
+    height:100%;
+    width:5px;
+    background-color:#000C40;
+    transition:width .45s;
+    -webkit-transition:width .45s;
+    -moz-transition:width .45s;
+}
+.actionTxtType5:hover:after {
+    width:100%;
+}
+.actionTxtType5 .view_tit{
+    position:relative;
+     z-index:10;
+    font-size:30px;
+    line-height:35px;
+    text-transform:uppercase;
+    font-weight:700;
+    padding-bottom:20px;
+    text-shadow:1px 1px 10px rgba(68,68,68,0.4);
+    transition:all .7s;
+    -webkit-transition:all .7s;
+    -moz-transition:all .7s;
+}
+.actionTxtType5 .view_txt {
+    position:relative;
+    z-index:10;
+    transition:color .7s;
+    -webkit-transition:color .7s;
+    -moz-transition:color .7s;
+}
+.actionTxtType5:hover .view_tit {
+    color:#fff;
+    text-shadow:1px 1px 10px rgba(255,255,255,0.4);
+}
+.actionTxtType5:hover .view_txt {
+    color:#fff;
+}
+
+#poem-page{
+    text-align: center;
+    font-size: 25px;
+}
+
+#subscribe{
+    background-color: #000C40;
+    border: 1px solid #000C40;
+}
+
+    /* Poems page */
+    #poems{
+        border: 1px solid #000C40;
+        padding: 3%;
+        margin-top: 2%;
+        border-radius: 0px 70px;
+        box-shadow: #6a75a7 0px 30px 60px -12px inset, #364485 0px 18px 36px -18px inset;
+        margin-bottom: 5%;
+    }
+
+#happy, #anxious, #depression, #empty{
+    font-size: 19px;
+    display: none;
+}    
diff --git a/BlissVerse/index.html b/BlissVerse/index.html
@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Demo</title>
+    <link rel="stylesheet" href="index.css">
+    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+</head>
+<body>
+
+    <nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light">
+        <div class="container-fluid">
+          <a id="title" class="navbar-brand" href="#">BlissVerse</a>
+          <i id="heart" class='bx bxs-heart'></i>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div  class="collapse navbar-collapse" id="nav">
+            <div class="navbar-nav">
+              <a id="nav-link" class="nav-link active" aria-current="page" href="index.html">Home</a>
+              <a id="nav-link" class="nav-link active" aria-current="page" href="poems.html">Poems</a>
+
+              <button id="contact" type="button" class="btn btn-outline-secondary btn-md px-4">Contact</button>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      <!-- hero section -->
+
+      <div class="b-example-divider"></div>
+
+  <div class="container col-xxl-12 px-4 py-2">
+    <div class="row flex-lg-row-reverse align-items-center g-2 py-2">
+      <div class="col-10 col-sm-8 col-lg-6">
+        <img src="images/undraw_Grandma_re_rnv1 (1).png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="500" height="250" loading="lazy">
+      </div>
+      <div class="col-lg-6">
+        <h1 id="hero-description" class="display-5 fw-bold lh-1 mb-1">Mental health is Wealth</h1>
+        <br>
+        <p class="lead">
+          It is a joy to see people take their mental health seriously. I often use the analogy that, just
+          as you would service a car, or seek medical attention to an ailing body part, is the same
+          way the brain  needs to be serviced and attended to. I know, I may sound like a wannabe
+          psychiatrist, apparently us GenZ are known to make a fuss about mental illness, in my
+          opinion I think we just utilize the resources given to us to better ourselves.
+          <span id="blissverse">Let BlissVerse lift your mood with poems !!</span>
+        </p>
+        <div class="d-grid gap-2 d-md-flex justify-content-md-start">
+          <a href="poems.html" id="button" type="button" class="btn  btn-lg px-4 me-md-2">Get your Poem</a>
+          <!-- <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button> -->
+        </div>
+
+
+      </div>
+    </div>
+  </div>
+
+
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <h2 class="pb-2 mb-4 border-bottom">Mind Matters</h2>
+        <div class="actionTxtType5">
+          <div class="view_tit">
+            Why poems !
+          </div>
+          <div class="view_txt">
+            <p class="p1">
+              Poetry's therapeutic essence lies in its ability to uplift spirits and 
+              promote mental awareness. Through poignant verses, it weaves
+              words into a tapestry of emotions, providing solace and fostering 
+              connection. Poems become beacons of hope, offering comfort, 
+              inspiration, and healing, as they navigate the depths of the human psyche with grace and empathy.
+            </p>
+            <br>
+            <p class="p2">
+              Poems serve as gentle reminders that even in the midst of darkness, light can be found.
+              They invite readers to pause, reflect, and embrace the beauty of the present moment. 
+              With their rhythmic cadence and evocative imagery, poems awaken dormant emotions, offering catharsis and release. 
+              They spark introspection, encouraging individuals to explore their inner landscapes and find resilience amidst adversity. 
+              In the realm of mental awareness, poems become a source of empowerment, compassion, and renewed hope for those seeking solace and strength.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+      <div class="container mt-5 px-4 py-5" id="custom-cards">
+        <h2 class="pb-2 border-bottom">How may I help </h2>
+
+        <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
+          <div class="col">
+            <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('images/mental12.jpg');">
+              <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
+                <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">How do you cope with depression ?</h3>
+
+              </div>
+            </div>
+          </div>
+
+          <div class="col">
+            <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('images/mental15.png');">
+              <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
+                <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Do you feel dejected sometimes ?</h3>
+
+              </div>
+            </div>
+          </div>
+
+          <div class="col">
+            <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('images/mental5.jpg');">
+              <div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1">
+                <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Have you suffered from indecision or anxiety before ?</h3>
+
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <p id="poem-page"> Don't worry, visit our <a href="poems.html">Poems page</a> and let us uplift your mood &#128512;</p>
+      </div>
+
+
+      <!-- Footer -->
+
+      <div class="container">
+        <h2 class="pb-2 border-bottom">Contact Us </h2>
+
+        <footer class="py-5">
+          <div class="row">
+            <div class="col-6 col-md-2 mb-3">
+              <h5>Tel. No</h5>
+              <ul class="nav flex-column">
+                <li class="nav-item mb-2"><a href="#" class=" fw-bold nav-link p-0 text-body-secondary">0718074023</a></li>
+                <li class="nav-item mb-2"><a href="#" class="fw-bold nav-link p-0 text-body-secondary">0753422466</a></li>
+
+              </ul>
+            </div>
+
+            <div class="col-6 col-md-2 mb-3">
+              <h5>Email Address</h5>
+              <ul class="nav flex-column">
+                <li class="nav-item mb-2"><a href="#" class="fw-bold nav-link p-0 text-body-secondary">collinsabaya07@gmail.com</a></li>
+                <li class="nav-item mb-2"><a href="#" class="fw-bold nav-link p-0 text-body-secondary">collinsnyakoe07@gmail.com</a></li>
+
+              </ul>
+            </div>
+
+
+
+            <div class="col-md-5 offset-md-1 mb-3">
+              <form>
+                <h5>Subscribe to our newsletter</h5>
+                <p>Monthly digest of what's new and exciting from us.</p>
+                <div class="d-flex flex-column flex-sm-row w-100 gap-2">
+                  <label for="newsletter1" class="visually-hidden">Email address</label>
+                  <input id="newsletter1" type="text" class="form-control" placeholder="Email address">
+                  <button id="subscribe" class="btn btn-primary" type="button">Subscribe</button>
+                </div>
+              </form>
+            </div>
+          </div>
+
+          <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
+            <p>&copy; 2023 BlissVerse, Inc. All rights reserved.</p>
+            <ul class="list-unstyled d-flex">
+              <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
+              <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
+              <li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
+            </ul>
+          </div>
+        </footer>
+      </div>
+
+
+
+
+    <script src="index.js"></script>
+</body>
+</html>