third commit

Author: shivanshu1086

css/style.css

@@ -26,7 +26,7 @@ html,body{
     padding-right: 50px;
 }
 .nav-link{
-    color: rgb(255,0,0)!important;
+    color: #e71952!important;
     transition-duration: .8s;
     /* font-size: 1.1rem !important; */
 }

img/img1-01.jpg

@@ -41,7 +41,7 @@
                         <a href="#" class="nav-link">What SiNext?</a>
                     </li>
                     <li class="nav-item wow fadeInRight">
-                        <a href="" class="nav-link">About Us</a>
+                        <a href="#about" class="nav-link">About Us</a>
                     </li>
                 </ul>
             </div>
@@ -55,31 +55,31 @@
     <div class="carousel slide" data-ride="carousel" id="carouselExampleControls">
         <div class="carousel-inner">
             <div class="carousel-item active">
-                <img src="./img/2.jpg" alt="Carousel Image">
+                <img src="./img/slider 1-01.jpg" alt="Carousel Image">
                 <div class="carousel-caption">
-                    <h2>Layout</h2>
+                    <!-- <h2>Layout</h2>
                     <h3>Demo Layout</h3>
-                    <button class="btn btn-primary btn-lg" type="button">Learn More</button>
+                    <button class="btn btn-primary btn-lg" type="button">Learn More</button> -->
                 </div>
             </div>
-            <div class="carousel-item">
-                <img src="./img/2.jpg" alt="Second Image">
+            <!-- <div class="carousel-item">
+                <img src="./img/img1-01.jpg" alt="Second Image">
                 <div class="carousel-caption">
                     <h2>Layout</h2>
                     <h3>Demo Layout</h3>
                     <button class="btn btn-primary btn-lg" type="button">Learn More</button>
                 </div>
-            </div>
-            <div class="carousel-item">
+            </div> -->
+            <!-- <div class="carousel-item">
                 <img src="./img/2.jpg" alt="Third Image">
                 <div class="carousel-caption">
                     <h2>Layout</h2>
                     <h3>Demo Layout</h3>
                     <button class="btn btn-primary btn-lg" type="button">Learn More</button>
                 </div>
-            </div>
+            </div> -->
         </div>
-        <a class="carousel-control-prev" role="button" data-slide="prev" href="#carouselExampleControls">
+        <a class="carousel-control-prev" role="button" data-slide="prev" href="#carouselExampleControls" style="color: black;">
             <span class="carousel-control-prev-icon" aria-hidden="true"></span>
             <span class="sr-only">Previous</span>
         </a>
@@ -90,7 +90,7 @@ <h3>Demo Layout</h3>
         <ul class="carousel-indicators">
             <li class="active" data-target="#carouselExampleControls" data-slide-to="0"></li>
             <li data-target="#carouselExampleControls" data-slide-to="1"></li>
-            <li data-target="#carouselExampleControls" data-slide-to="2"></li>
+            <!-- <li data-target="#carouselExampleControls" data-slide-to="2"></li> -->
         </ul>
     </div>
 <!-- Carousel ends -->
@@ -173,30 +173,31 @@ <h2 class="display-3">Connect</h2>
 
 
 <!-- Footer -->
-<footer class="container-fluid padding">
+<footer class="container-fluid padding" id="about"> 
     <div class="row text-center">
         <div class="col-md-4">
-             <img src="./img/logo.png" alt="icon"><hr class="light">
-             <p><a href="tel:198" class="Phone">198</a></p>
-             <p>abc@xyz.com</p>
-             <p>Address</p>
-             <p>Area</p>
+             <h5>About Us</h5><hr class="light">
+             <ul >
+                 <li>Aryan</li>
+                 <li>Ayush Gupta</li>
+                 <li>Aryendra Prakash Singh</li>
+                 <li>Piyush Kumar</li>
+                 <li>Shivanshu Bajpai</li>
+                 <li>Vrati Pandey</li>
+             </ul>
         </div>
         <div class="col-md-4">
             <hr class="light">
-            <h5>Working hours</h5>
+            <h5>OUR VISION</h5>
             <hr class="light">
-            <P>Monday To Saturday</P>
-            <p>(7am - 12:30pm)</p>
-            <p>Sunday OFF</p>
+            <p style="text-transform: uppercase;font-size:50px">Power of actions</p>
         </div>
         <div class="col-md-4">
                 <hr class="light">
-                <h5>Working hours</h5>
+                <h5>OUR MISSION</h5>
                 <hr class="light">
-                <P>Monday To Saturday</P>
-                <p>(7am - 12:30pm)</p>
-                <p>Sunday OFF</p>
+                <P>Our mission is to help the deaf and dumb people who are unable to communicate with the smart assistant through voice.</P>
+                
             </div>
         <div class="col-12">
            <hr class="light-100">

img/slider 1-01.jpg

@@ -23,8 +23,6 @@ <h2>Hey there!! Welcome to SiNext!</h2>
       <div class="modal-body">
         <p>This uses TENSORFLOW.JS and your webcam to envoke the smart assistant.The main aim to build it is:-</p> 
         <p><b><em>"If voice is the future of computing what about those who cannot hear or speak?"</em></b></p>
-        <!-- <p>You can find the code for this demo on <a href="https://github.com/shekit/alexa-sign-language-translator" target="_blank">github</a> or watch a <a href="https://www.youtube.com/watch?v=kS53y6GWm0w" target="_blank">video</a> of it in action.</p> -->
-        <!-- <p style="font-size:12px;"><em>Note: This demo runs entirely in your browser without any data sent to any server</em></p> -->
       </div>
     </div>
   </div>

index.html

@@ -1,5 +1,7 @@
-body{
-  font-family: "Helvetica Neue", "sans-serif";
+@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
+  
+  body{
+    font-family: 'Poppins', 'sans-serif';
   margin: 0;
   padding: 0;
 }
@@ -18,7 +20,9 @@ body{
   height: 13rem;
   width: 23rem;
 }
-
+.subtext{
+  font-family: 'Poppins', 'sans-serif';
+}
 #status{
   width: 300px;
   height: 50px;
@@ -76,7 +80,7 @@ h1 .subtext {
   padding-top: 20px;
   padding-bottom: 20px;
   border-right: 5px solid black;
-  background:tomato;
+  background: #e71952;
 }
 
 .split-left h1{
@@ -186,17 +190,22 @@ h1 .subtext {
     overflow: auto; /* Enable scroll if needed */
     background-color: rgb(0,0,0); /* Fallback color */
     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    border-radius: 5px;
 }
 
 /* Modal Header */
 .modal-header {
     padding: 2px 16px;
-    background-color: deepskyblue;
+    background-color: #e77272;
     color: white;
+    border-radius: 10px;
 }
 
 /* Modal Body */
-.modal-body {padding: 2px 16px;}
+.modal-body {
+  padding: 45px 16px;
+  text-align: center;
+}
 
 /* Modal Footer */
 .modal-footer {
@@ -212,12 +221,14 @@ h1 .subtext {
     margin: auto;
     padding: 0;
     border: 1px solid #888;
+    height: 30%;
     width: 40%;
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
     animation-name: animatetop;
     animation-duration: 0.4s;
     top: 10%;
     text-align: center;
+    border-radius: 10px;
 }
 
 /* Add Animation */