DevelopHowTo · parul44 · Apr 18, 2019 · Apr 18, 2019
diff --git a/client/images/color1.png b/client/images/color1.png
diff --git a/client/images/color2.png b/client/images/color2.png
diff --git a/client/images/color3.png b/client/images/color3.png
diff --git a/client/images/color4.png b/client/images/color4.png
diff --git a/client/images/color5.png b/client/images/color5.png
diff --git a/client/images/slides/04.jpg b/client/images/slides/04.jpg
diff --git a/client/images/slides/05.jpg b/client/images/slides/05.jpg
diff --git a/client/index.html b/client/index.html
@@ -1,3 +1,4 @@
+
 <!DOCTYPE html>
 <html lang="en">
 
@@ -7,11 +8,158 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="main.css">
     <title>Clean City</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
+    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+     integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
+ integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" 
+integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="style.css">
+    <script src="main.js"></script>
 </head>
 
 <body>
-    Clean City
-    <script src="./main.js"></script>
+
+    <header>
+        <nav class="navbar navbar-expand-lg navbar-light " >
+
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+              <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+              <ul class="navbar-nav mr-auto">
+                <li class="nav-item active ">
+                  <a class="nav-link scrolly" href="#home">Home <span class="sr-only"></span></a>
+                </li>
+                <li class="nav-item active">
+                  <a class="nav-link scrolly" href="#upload">Upload</a>
+                </li>
+                <li class="nav-item active">
+                    <a class="nav-link scrolly " href="#">About Us</a>
+                  </li>
+              </ul>
+
+            </div>
+          </nav>
+    </header>
+
+    <section id="home">
+        <div id="carouselExampleIndicators" data-interval="2000" class="carousel slide" data-ride="carousel">
+            <ol class="carousel-indicators">
+              <li data-target="#carouselExampleIndicators"  data-slide-to="0" class="active"></li>
+              <li data-target="#carouselExampleIndicators"  data-slide-to="1"></li>
+              <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+            </ol>
+            <div class="carousel-inner">
+              <div class="carousel-item active">
+                <img src="images/slides/04.jpg" style="height: 600px" class="d-block w-100" alt="...">
+              </div>
+              <div class="carousel-item">
+                <img src="images/slides/05.jpg" style="height: 600px" class="d-block w-100" alt="...">
+              </div>
+              <div class="carousel-item">
+                <img src="images/slides/04.jpg" style="height: 600px" class="d-block w-100" alt="...">
+              </div>
+            </div>
+            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+              <span class="sr-only">Previous</span>
+            </a>
+            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+              <span class="carousel-control-next-icon" aria-hidden="true"></span>
+              <span class="sr-only">Next</span>
+            </a>
+          </div>
+      <br>
+          <div class="container">
+            <div class="row">
+              <div class="col-md-4">
+                <div class="thumbnail">
+                    <img src="images/color5.png" alt="Lights" style="width:100%;height:300px">
+
+
+                </div>
+              </div>
+              <div class="col-md-4">
+                <div class="thumbnail">
+
+                    <img src="images/color2.png" alt="Nature" style="width:100%;height:300px">
+
+                </div>
+              </div>
+              <div class="col-md-4">
+                <div class="thumbnail">
+                     <img src="images/color3.png" alt="Fjords" style="width:100%;height:300px">
+
+                </div>
+              </div>
+
+
+            </div>
+          </div>
+          <br><br>
+    </section>
+    <section id="upload">
+
+        <div class="uploadform border border-primary rounded"></span>
+
+
+            <div style="padding: 20px">
+                    <h3>Any problems in your area?
+                    Post them here!</h3><br>
+        <form action="#">
+
+        <div class="container">
+            <div class="row">
+                <div class="col">
+                        <b>Name&emsp;&emsp;</b><input id="name" placeholder="Your name here"><br><br>
+                </div>
+                <div class="col">
+                        <b>Location&emsp;&emsp;</b><input id="location" placeholder="Location(area,state)"><br><br>
+                </div>
+            </div><br>
+            <div class="row">
+
+                            <label><b>&emsp;Description of the report&emsp;&emsp;</b></label>
+                            <textarea placeholder="Short Description" id="description" rows="2" cols="50"></textarea>
+                            <br><br>
+            </div>
+            <br>
+            <div class="row">
+                <div class="col">
+                        <div class="form-group">
+                                <label><b>Select type of report</b></label>
+                                <select class="form-control" id="problemtype">
+                                  <option>Garbage Heap</option>
+                                  <option>Accident</option>
+                                  <option>Water Shortage</option>
+                                  <option>Electricity cut off</option>
+                                  <option>Crime</option>
+                                </select>
+                              </div>
+                </div>
+                <div class="col">
+
+                        <div class="form-group">
+                                <label for="picfile"><b>Upload Image</b></label>
+                                <input type="file" class="form-control-file" id="picfile">
+                              </div>
+                </div>  
+            </div>
+        </div>
+
+        <button style="margin-left: 4em" type ="submit" class="btn btn-primary">Submit</button>
+
+        <button style="margin-left: 4em" type="reset" class="btn btn-primary">Reset</button>
+    </fieldset>
+    </form>
+        </div>
+        </div>
+        <br><br>
+    </section>
 </body>
 
 </html>
diff --git a/client/main.css b/client/main.css
@@ -0,0 +1,4 @@
+.uploadform{
+    width: 800px;
+    margin: 0 auto;
+}
diff --git a/client/main.js b/client/main.js
@@ -0,0 +1,7 @@
+
+	// Scrolly.
+    $('.scrolly')
+    .scrolly({
+        speed: 2000,
+        offset: $header.outerHeight()
+    });