12/6/21

Author: azmolnar

css/styles.css

@@ -13,20 +13,36 @@ opacity: 1;
     color: red;
 }
 
-#navbar2 {height: 80px;
+#navbar2 {
+    height: 80px;
+
+}
+
+
+
+#navbar-title {
+    font-weight: 400;
+    font-size: xx-large;
+ 
+}
+
+.calendar{
+    margin-left: 750px;
+    top: 200px;
+    position: absolute;
 
 }
 
 .logo-image{
     width: 75px;
     height: 75px;
-    margin-left: 20px;
+    margin-left: 250px;
 }
 
-.title {top: 73px;
+.title {top: 70px;
     left: 469px;
     width: 300px;
-    height: 68px;
+    height: 80px;
     /* UI Properties */
     color: var(--unnamed-color-000000);
     text-align: left;
@@ -39,6 +55,7 @@ opacity: 1;
 .herobg {
     background-image: url(/images/jonas-geschke-C8wjnVxmVUI-unsplash.jpg);
     background-size: cover;
+    height: 700px;
 }
 
 .herotext {
@@ -48,7 +65,17 @@ opacity: 1;
     margin-top: 5rem;
 }
 
-.hero {padding-bottom: 15rem;}
+.quotetext{
+    background-color: white;
+    padding: 1rem;
+    border-radius: 1rem;
+    margin-top: 5rem;
+}
+
+.hero {padding-bottom: 15rem;
+    margin-bottom: 400px;
+
+}
 
 .card-custom-text { 
     text-align: center;

images/Meeting Calendar.png

@@ -18,10 +18,8 @@
           <img src="images/logo.png" class="logo-image">
         </div>
       </a>
-
-      
       <div class="container-fluid">
-        <a class="navbar-brand" href="#">Wellbriety</a>
+        <a id="navbar-title" class="navbar-brand" href="#">Wellbriety</a>
             </li>
           </ul>
           <form class="d-flex">
@@ -33,7 +31,6 @@
     </nav>
     <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #660000;">
       <div class="container-fluid">
-        <a class="navbar-brand" href="#">Wellbriety</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>
@@ -65,28 +62,25 @@
     </nav>
     <div class="container-fluid herobg">
       <div class="container hero">
-      <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
-        <div class="col-10 col-sm-8 col-lg-6">
-         
-        </div>
+      <div class="row">
         <div class="col-lg-6">
           <h1 class="display-5 fw-bold lh-1 mb-3 herotext">Get the help you deserve now <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
-            <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_nzGclg.json"  background="transparent"  speed="1"  style="width: 150px; height: 150px; position: absolute; top: 174px; right: 620px;"  loop autoplay></lottie-player></h1>
-          
-          <p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
-          <div class="d-grid gap-2 d-md-flex justify-content-md-start">
-            <button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button>
-            <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button>
-          </div>
+            <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_nzGclg.json"  background="transparent"  speed="1"  style="width: 150px; height: 200px; position: absolute;top: 180px; right: 700px;"  loop autoplay></lottie-player></h1>
+          <h2 class="display-10 fw-light lh-1 mb-3 quotetext">“Life, the circle, a measurement with no beginning and no end."
+          </h2>
         </div>
       </div>
+      </div>
+      <div class="col-lg-6"> 
+        <img src="images/Meeting Calendar.png" class="calendar">
+      </div>
     </div>
     </div>
     <div class="container-fluid">
       <div class="row" style="pad: 20px;">
         <div class="col">
           <div class="card" style="width: 30rem; z-index: 3; ; box-shadow: 0px 3px 10px #00000029; bottom: 60px; border-radius: 9px;">
-            <img  style="border-radius: 10em; padding: 20px; height: 200px; width: 200px; margin: auto;"src="https://via.placeholder.com/150" class="card-img-top" alt="...">
+            <img  style="border-radius: 10em; padding: 20px; height: 150px; width: 150px; margin: auto;"src="https://via.placeholder.com/150" class="card-img-top" alt="...">
             <div class="card-body">
               <h4 class="card-text card-custom-title"> Robert, 23</h4>
               <p class="card-text card-custom-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -95,7 +89,7 @@ <h4 class="card-text card-custom-title"> Robert, 23</h4>
         </div>
         <div class="col">
           <div class="card" style="width: 30rem; z-index: 3; ; box-shadow: 0px 3px 10px #00000029; bottom: 60px; border-radius: 9px;">
-            <img  style="border-radius: 10em; padding: 20px; height: 200px; width: 200px; margin: auto;"src="https://via.placeholder.com/150" class="card-img-top" alt="...">
+            <img  style="border-radius: 10em; padding: 20px; height: 150px; width: 150px; margin: auto;"src="https://via.placeholder.com/150" class="card-img-top" alt="...">
             <div class="card-body">
               <h4 class="card-text card-custom-title"> Robert, 23</h4>
               <p class="card-text card-custom-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@@ -104,7 +98,7 @@ <h4 class="card-text card-custom-title"> Robert, 23</h4>
         </div>
         <div class="col">
           <div class="card" style="width: 30rem; z-index: 3; ; box-shadow: 0px 3px 10px #00000029; bottom: 60px; border-radius: 9px;">
-            <img  style="border-radius: 10em; padding: 20px; height: 200px; width: 200px; margin: auto;"src="https://via.placeholder.com/150" class="card-img-top" alt="...">
+            <img  style="border-radius: 10em; padding: 20px; height: 150px; width: 150px; margin: auto;"src="https://via.placeholder.com/150" class="card-img-top" alt="...">
             <div class="card-body">
               <h4 class="card-text card-custom-title"> Robert, 23</h4>
               <p class="card-text card-custom-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>