1
+
1
2
<!DOCTYPE html>
2
3
< html lang ="en ">
3
4
7
8
< meta http-equiv ="X-UA-Compatible " content ="ie=edge ">
8
9
< link rel ="stylesheet " href ="main.css ">
9
10
< title > Clean City</ title >
11
+ < link rel ="stylesheet " href ="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css "
12
+ integrity ="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T " crossorigin ="anonymous ">
13
+ < script src ="https://code.jquery.com/jquery-3.3.1.slim.min.js "
14
+ integrity ="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo " crossorigin ="anonymous "> </ script >
15
+ < script src ="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js "
16
+ integrity ="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1 " crossorigin ="anonymous "> </ script >
17
+ < script src ="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js "
18
+ integrity ="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM " crossorigin ="anonymous "> </ script >
19
+ < link rel ="stylesheet " href ="style.css ">
20
+ < script src ="main.js "> </ script >
10
21
</ head >
11
22
12
23
< body >
13
- Clean City
14
- < script src ="./main.js "> </ script >
24
+
25
+ < header >
26
+ < nav class ="navbar navbar-expand-lg navbar-light " >
27
+
28
+ < button class ="navbar-toggler " type ="button " data-toggle ="collapse " data-target ="#navbarSupportedContent " aria-controls ="navbarSupportedContent " aria-expanded ="false " aria-label ="Toggle navigation ">
29
+ < span class ="navbar-toggler-icon "> </ span >
30
+ </ button >
31
+
32
+ < div class ="collapse navbar-collapse " id ="navbarSupportedContent ">
33
+ < ul class ="navbar-nav mr-auto ">
34
+ < li class ="nav-item active ">
35
+ < a class ="nav-link scrolly " href ="#home "> Home < span class ="sr-only "> </ span > </ a >
36
+ </ li >
37
+ < li class ="nav-item active ">
38
+ < a class ="nav-link scrolly " href ="#upload "> Upload</ a >
39
+ </ li >
40
+ < li class ="nav-item active ">
41
+ < a class ="nav-link scrolly " href ="# "> About Us</ a >
42
+ </ li >
43
+ </ ul >
44
+
45
+ </ div >
46
+ </ nav >
47
+ </ header >
48
+
49
+ < section id ="home ">
50
+ < div id ="carouselExampleIndicators " data-interval ="2000 " class ="carousel slide " data-ride ="carousel ">
51
+ < ol class ="carousel-indicators ">
52
+ < li data-target ="#carouselExampleIndicators " data-slide-to ="0 " class ="active "> </ li >
53
+ < li data-target ="#carouselExampleIndicators " data-slide-to ="1 "> </ li >
54
+ < li data-target ="#carouselExampleIndicators " data-slide-to ="2 "> </ li >
55
+ </ ol >
56
+ < div class ="carousel-inner ">
57
+ < div class ="carousel-item active ">
58
+ < img src ="images/slides/04.jpg " style ="height: 600px " class ="d-block w-100 " alt ="... ">
59
+ </ div >
60
+ < div class ="carousel-item ">
61
+ < img src ="images/slides/05.jpg " style ="height: 600px " class ="d-block w-100 " alt ="... ">
62
+ </ div >
63
+ < div class ="carousel-item ">
64
+ < img src ="images/slides/04.jpg " style ="height: 600px " class ="d-block w-100 " alt ="... ">
65
+ </ div >
66
+ </ div >
67
+ < a class ="carousel-control-prev " href ="#carouselExampleIndicators " role ="button " data-slide ="prev ">
68
+ < span class ="carousel-control-prev-icon " aria-hidden ="true "> </ span >
69
+ < span class ="sr-only "> Previous</ span >
70
+ </ a >
71
+ < a class ="carousel-control-next " href ="#carouselExampleIndicators " role ="button " data-slide ="next ">
72
+ < span class ="carousel-control-next-icon " aria-hidden ="true "> </ span >
73
+ < span class ="sr-only "> Next</ span >
74
+ </ a >
75
+ </ div >
76
+ < br >
77
+ < div class ="container ">
78
+ < div class ="row ">
79
+ < div class ="col-md-4 ">
80
+ < div class ="thumbnail ">
81
+ < img src ="images/color5.png " alt ="Lights " style ="width:100%;height:300px ">
82
+
83
+
84
+ </ div >
85
+ </ div >
86
+ < div class ="col-md-4 ">
87
+ < div class ="thumbnail ">
88
+
89
+ < img src ="images/color2.png " alt ="Nature " style ="width:100%;height:300px ">
90
+
91
+ </ div >
92
+ </ div >
93
+ < div class ="col-md-4 ">
94
+ < div class ="thumbnail ">
95
+ < img src ="images/color3.png " alt ="Fjords " style ="width:100%;height:300px ">
96
+
97
+ </ div >
98
+ </ div >
99
+
100
+
101
+ </ div >
102
+ </ div >
103
+ < br > < br >
104
+ </ section >
105
+ < section id ="upload ">
106
+
107
+ < div class ="uploadform border border-primary rounded "> </ span >
108
+
109
+
110
+ < div style ="padding: 20px ">
111
+ < h3 > Any problems in your area?
112
+ Post them here!</ h3 > < br >
113
+ < form action ="# ">
114
+
115
+ < div class ="container ">
116
+ < div class ="row ">
117
+ < div class ="col ">
118
+ < b > Name  </ b > < input id ="name " placeholder ="Your name here "> < br > < br >
119
+ </ div >
120
+ < div class ="col ">
121
+ < b > Location  </ b > < input id ="location " placeholder ="Location(area,state) "> < br > < br >
122
+ </ div >
123
+ </ div > < br >
124
+ < div class ="row ">
125
+
126
+ < label > < b >  Description of the report  </ b > </ label >
127
+ < textarea placeholder ="Short Description " id ="description " rows ="2 " cols ="50 "> </ textarea >
128
+ < br > < br >
129
+ </ div >
130
+ < br >
131
+ < div class ="row ">
132
+ < div class ="col ">
133
+ < div class ="form-group ">
134
+ < label > < b > Select type of report</ b > </ label >
135
+ < select class ="form-control " id ="problemtype ">
136
+ < option > Garbage Heap</ option >
137
+ < option > Accident</ option >
138
+ < option > Water Shortage</ option >
139
+ < option > Electricity cut off</ option >
140
+ < option > Crime</ option >
141
+ </ select >
142
+ </ div >
143
+ </ div >
144
+ < div class ="col ">
145
+
146
+ < div class ="form-group ">
147
+ < label for ="picfile "> < b > Upload Image</ b > </ label >
148
+ < input type ="file " class ="form-control-file " id ="picfile ">
149
+ </ div >
150
+ </ div >
151
+ </ div >
152
+ </ div >
153
+
154
+ < button style ="margin-left: 4em " type ="submit " class ="btn btn-primary "> Submit</ button >
155
+
156
+ < button style ="margin-left: 4em " type ="reset " class ="btn btn-primary "> Reset</ button >
157
+ </ fieldset >
158
+ </ form >
159
+ </ div >
160
+ </ div >
161
+ < br > < br >
162
+ </ section >
15
163
</ body >
16
164
17
165
</ html >
0 commit comments