3rd commit for landing page

adithyaanilkumar · Nov 9, 2020 · 63ff309 · 63ff309
1 parent c869488
commit 63ff309
Show file tree

Hide file tree

Showing 7 changed files with 148 additions and 34 deletions.
diff --git a/Website/ZeWIT-Landing Page/aboutUs.html b/Website/ZeWIT-Landing Page/aboutUs.html
@@ -10,10 +10,13 @@
   <meta name="Description" content="Enter your description here" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css">
+
+  <!-- CSS source  -->
   <link rel="stylesheet" href="assets/css/aboutUs.css">
+  <link rel="stylesheet" type="text/css" href="assets/css/full-page-scroll.min.css">
 
   <!-- fonts  -->
-  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&family=Roboto:wght@400&display=swap" rel="stylesheet">
 
 </head>
 
@@ -25,14 +28,14 @@
       aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <a class="navbar-brand" href="./index.html">
+    <a class="navbar-brand" href="../../index.html">
       <img class="brand-img img-responsive" src="assets/media/zewit_logo.jpeg" alt="zewit-logo">
     </a>
 
     <div class="collapse navbar-collapse" id="navbarNav">
       <ul class="navbar-nav ml-auto">
         <li class="nav-item">
-          <a class="nav-link" href="../../index.html">About</a>
+          <a class="nav-link" href="./aboutUs.html">About</a>
         </li>
         <li class="nav-item">
           <a class="nav-link text-nowrap" href="#">Sponsor</a>
@@ -48,41 +51,59 @@
   </nav>
   <!-- navbar ends here  -->
 
-  <div class="content container">
-    <h3>Why ZeW - IT ?</h3>
-    <p>
+  <div id="main" class="scroll-container">
+    <section>
+      <h3>Why ZeW - IT ?</h3>
+      <p>
       The world is sinking into the sea of waste. Every narrow nooks and corner of the streets are being piled up with waste.
 
       Currently, there is no system of automatic waste segregation or collection implemented at the commercial level.
 
       Also, no such system exits whose purpose is to collect, segregate, manage waste as well as monitoring the whole process with minimum space and that is capable of being implemented in the general public.</p>
 
-    <h3>What is ZeW - IT ?</h3>
-    <p>
+    </section>
+    <section>
+      <h3>What is ZeW - IT ?</h3>
+      <p>
       ZeW-IT is an IoT based automatic waste segregation and management system. It is capable of automatically collecting and segregating up to 6 different types of waste namely organic, plastic, e-waste, metallic, glass and paper as they enter the bin.
-    </p>
-    <br>
-    <p>
+      </p>
+
+      <p>
       Converts biowaste to manure. The bin uses the converted manure and implants a seed , makes a pellet and gives it as a reward to the user. These can be planted by the user. It has the added benefit of being able to grow even if the user throws it away on the roadside.</p>
-    <br>
-    <p>
+
+      <p>
       The bin also measures the live status of the compartments.
       It alerts the driver when the bin is full, using an android application and sets the easiest route for the collection of the waste by the driver. 
 
       The consumer using an application can get reward points by dumping waste into our bin which can be redeemed for public transport or any other commercial purpose. Users can also navigate to the nearest bin by using this application and also view the status of the individual compartments.</p>
-
-    <h3>Advantages of ZeW - IT</h3>
-    <p>
+    </section>
+    <br>
+    <section>
+      <h3>Advantages of ZeW - IT</h3>
+      <p>
       ZeW-IT is fully automated and hence the user doesn’t need to worry about the selection of the type of waste that he puts into the bin. 
       The bin automatically detects the type of waste and puts it into the corresponding compartment. 
       This is done using artificial intelligence with an accuracy of 98%. 
       There is also a proper monitoring and reporting system within the app.</p>
+    </section>
+
   </div>
 
   <footer class="container-fluid">
     <p>FOOTER FOOTER FOOTER</p>
   </footer>
 
+  <script src="assets/js/full-page-scroll.min.js"></script>
+    <script type="text/javascript">
+      new fullScroll({
+        mainElement: "main",
+        displayDots: true,
+        dotsPosition: "left",
+        animateTime: 0.7,
+        animateFunction: "ease",
+      });
+    </script>
+
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>

diff --git a/Website/ZeWIT-Landing Page/assets/css/aboutUs.css b/Website/ZeWIT-Landing Page/assets/css/aboutUs.css
@@ -3,23 +3,72 @@
     padding: 0;
 }
 
+body{
+    background: url("../media/AboutUs_bg.png") no-repeat center center fixed;
+    background-size: cover;
+    font-family: 'Roboto', sans-serif;
+    font-size: 22px;
+}
+
+h3{
+    font-family: 'Noto Sans JP', sans-serif;
+}
+@media only screen and (max-width: 767px){
+    h3 {
+     font-size:25px;
+    }
+    p {
+        font-size: 19px;
+    }
+}
 /* navbar css starts here  */
 .bg-light{
     background-color: #ffffff!important;
 }
 
+.navbar{
+    position: static;
+}
+
 .nav-item{
     font-family: 'Noto Sans JP', sans-serif;
     font-size: 1.2rem;
     padding-left: 85px;
 }
 
+.nav-link{
+    position: relative;
+}
+
+.nav-link:before{
+    content: "";
+    height: 2px;
+    width: 100%;
+    visibility: hidden;
+    transform: scaleX(0);
+    transition: all 0.3s ease-in-out;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background-color: #000;
+}
+
+.nav-link:hover:before{
+    visibility: visible;
+    transform: scaleX(1);
+}
+
 .brand-img{
-    height: 35px;
+    height: 60px;
 }
 
 /* navbar css ends here*/
 
+section{
+    margin: 30px auto;
+    padding: 0px 125px;
+}
+
 /* footer css starts here */
 footer{
     background: linear-gradient(90deg, #6FA656 20.83%, #576755 56.87%);

diff --git a/Website/ZeWIT-Landing Page/assets/css/full-page-scroll.min.css b/Website/ZeWIT-Landing Page/assets/css/full-page-scroll.min.css
diff --git a/Website/ZeWIT-Landing Page/assets/css/style.css b/Website/ZeWIT-Landing Page/assets/css/style.css
@@ -8,15 +8,36 @@
     background-color: #ffffff!important;
 }
 
+.nav-link{
+    position: relative;
+}
+
+.nav-link:before{
+    content: "";
+    height: 2px;
+    width: 100%;
+    visibility: hidden;
+    transform: scaleX(0);
+    transition: all 0.3s ease-in-out;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background-color: #000;
+}
+
+.nav-link:hover:before{
+    visibility: visible;
+    transform: scaleX(1);
+}
+
 .nav-item{
     font-family: 'Noto Sans JP', sans-serif;
     font-size: 1.2rem;
     padding-left: 85px;
 }
 
 .brand-img{
-    width: 30%;
-    height: 30%;
+    height: 60px;
 }
 
 /* navbar css ends here*/
@@ -39,6 +60,14 @@
     width: 100%;
     padding: 1rem;
 }
+
+@media only screen and (max-width: 600px) {
+    #green-leaf-on-hero-content {
+      height: 25vh;
+      justify-content: center;
+    }
+}
+
 /* hero content css ends here  */
 
 /* our-mission css starts here */
@@ -47,7 +76,6 @@
     background-size: cover;
     padding-top: 10vh;
     background: linear-gradient(90.16deg, #4E82AA 26.31%, #172941 99.87%);
-
 }
 
 .our-mission-text{
@@ -80,25 +108,44 @@
     position: relative;
     top: 10px;
 }
+
+@media only screen and (max-width: 600px) {
+    .card{
+        height: 2px;
+    }    
+}
+
 /* our-mission css ends here */
 
 /* locate-nearest-bin css starts here */
 .locate-nearest-bin{
 
 }
 
+.bullet-point{
+    height: 33px;
+    padding-right: 5px;
+}
+
 .locate-nearest-bin p{
     font-size: 20px;
 }
 
-.bullet-point-img{
+.locate_nearest_bin_img{
     height: 100vh;
 }
+
+@media only screen and (max-width: 600px) {
+    .locate_nearest_bin_img {
+      height: 70vh;
+      text-align: center;
+    }
+}
+
 /* locate-nearest-bin css ends here */
 /* abrakadabra css starts here  */
 .abra-kadabra{
     background-color: #f2f2f2;
-
     width: 100%;
     text-align: center;
 }
@@ -149,11 +196,6 @@
 
 /* footer css starts here */
 footer{
-    position: absolute;
-    left: 25.84%;
-    right: 54.07%;
-    top: 99.16%;
-    bottom: -2.28%;
     background: linear-gradient(90deg, #6FA656 20.83%, #576755 56.87%);
 }
 /* footer css ends here */
diff --git a/Website/ZeWIT-Landing Page/assets/js/full-page-scroll.min.js b/Website/ZeWIT-Landing Page/assets/js/full-page-scroll.min.js
diff --git a/Website/ZeWIT-Landing Page/assets/media/AboutUs_bg.png b/Website/ZeWIT-Landing Page/assets/media/AboutUs_bg.png
diff --git a/index.html b/index.html
@@ -115,16 +115,16 @@ <h2 class="display-2">OUR MISSION</h2>
     </div>
   </div>
 
-  <div class="locate-nearest-bin container-fluid text-center">
+  <div class="locate-nearest-bin container-fluid text-center align-items-center">
     <div class="row">
-      <div class="col-md-6 col-sm-12">
-        <h2><img src="Website/ZeWIT-Landing Page/assets/media/bullet_point1.png" alt="">Locate Nearest Bin</h2>
+      <div class="col-md-6 col-sm-12 align-items-center">
+        <h2><img class="bullet-point" src="Website/ZeWIT-Landing Page/assets/media/bullet_point1.png" alt="">Locate Nearest Bin</h2>
         <br>
         <br>
         <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae, provident!</p>
       </div>
       <div class="col-md-6 col-sm-12">
-        <img class="bullet-point-img" src="Website/ZeWIT-Landing Page/assets/media/locate_nearest_bin.png" alt="">
+        <img class="locate_nearest_bin_img" src="Website/ZeWIT-Landing Page/assets/media/locate_nearest_bin.png" alt="">
       </div>
     </div>
   </div>
@@ -135,7 +135,7 @@ <h2><img src="Website/ZeWIT-Landing Page/assets/media/bullet_point1.png" alt="">
         <img id="abraka-dabra-img" src="Website/ZeWIT-Landing Page/assets/media/abra_kadabra.jpeg" alt="">
       </div>
       <div class="col-md-6 col-sm-12">
-        <h2><img src="Website/ZeWIT-Landing Page/assets/media/bullet_point2.png" alt="">Abra , Kadabra , ZeW-IT!</h2>
+        <h2><img class="bullet-point" src="Website/ZeWIT-Landing Page/assets/media/bullet_point2.png" alt="">Abra , Kadabra , ZeW-IT!</h2>
         <p>Dump the waste into our bin and ZeW-IT will automatically segregate the waste into its compartments</p>
       </div>
     </div>
@@ -144,7 +144,7 @@ <h2><img src="Website/ZeWIT-Landing Page/assets/media/bullet_point2.png" alt="">
   <div class="get-rewarded container-fluid text-center">
     <div class="row">
       <div class="col-md-6 col-sm-12">
-        <h2><img src="Website/ZeWIT-Landing Page/assets/media/bullet_point3.png" alt="">Get Rewarded!</h2>
+        <h2><img class="bullet-point" src="Website/ZeWIT-Landing Page/assets/media/bullet_point3.png" alt="">Get Rewarded!</h2>
         <br>
         <br>
         <p>Get Rewarded everytime you use ZeW - IT.</p>
@@ -194,7 +194,7 @@ <h2>The world is
   </div>
 
   <footer class="rectangle-5">
-
+    Footer Footerz
   </footer>