31
31
> < i class ="material-icons "> menu</ i > </ a
32
32
>
33
33
< ul class ="right hide-on-med-and-down ">
34
- < li > < a href ="# "> Portfolio</ a > </ li >
35
- < li > < a href ="# "> Services</ a > </ li >
36
- < li > < a href ="# "> Contact</ a > </ li >
34
+ < li > < a href ="#photos "> Portfolio</ a > </ li >
35
+ < li > < a href ="#services "> Services</ a > </ li >
36
+ < li > < a href ="#contact "> Contact</ a > </ li >
37
37
</ ul >
38
38
< ul class ="sidenav grey lighten-2 " id ="mobile-menu ">
39
- < li > < a href ="# "> Portfolio</ a > </ li >
40
- < li > < a href ="# "> Services</ a > </ li >
41
- < li > < a href ="# "> Contact</ a > </ li >
39
+ < li > < a href ="#photos "> Portfolio</ a > </ li >
40
+ < li > < a href ="#services "> Services</ a > </ li >
41
+ < li > < a href ="#contact "> Contact</ a > </ li >
42
42
</ ul >
43
43
</ div >
44
44
</ nav >
54
54
/>
55
55
</ div >
56
56
< div class ="col s12 l6 offset-l1 ">
57
- < h2 class ="indigo -text text-darken-4 "> Portraits</ h2 >
57
+ < h2 class ="grey -text text-darken-4 "> Portraits</ h2 >
58
58
< p >
59
59
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti,
60
60
quia laboriosam amet alias quasi excepturi voluptatem quas! Iure,
@@ -71,7 +71,7 @@ <h2 class="indigo-text text-darken-4">Portraits</h2>
71
71
/>
72
72
</ div >
73
73
< div class ="col s12 l6 pull-l5 right-align offset-l1 ">
74
- < h2 class ="indigo -text text-darken-4 "> Cityscapes</ h2 >
74
+ < h2 class ="grey -text text-darken-4 "> Cityscapes</ h2 >
75
75
< p >
76
76
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti,
77
77
quia laboriosam amet alias quasi excepturi voluptatem quas! Iure,
@@ -88,7 +88,7 @@ <h2 class="indigo-text text-darken-4">Cityscapes</h2>
88
88
/>
89
89
</ div >
90
90
< div class ="col s12 l6 offset-l1 ">
91
- < h2 class ="indigo -text text-darken-4 "> Nature</ h2 >
91
+ < h2 class ="grey -text text-darken-4 "> Nature</ h2 >
92
92
< p >
93
93
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti,
94
94
quia laboriosam amet alias quasi excepturi voluptatem quas! Iure,
@@ -108,32 +108,48 @@ <h2 class="indigo-text text-darken-4">Nature</h2>
108
108
</ div >
109
109
</ section >
110
110
<!-- services / tabs -->
111
- < section class ="container ">
112
- < p >
113
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur
114
- possimus, voluptatum, quidem iste doloribus dignissimos quod aliquid
115
- similique laborum soluta veniam optio obcaecati quibusdam ex aut
116
- numquam, ipsa reprehenderit! Laudantium, nisi. Beatae sequi doloribus,
117
- odit rerum quo, illum et adipisci dolorem ipsum nihil, animi sit quidem
118
- esse! Laborum quasi consectetur accusantium deserunt, molestiae error
119
- vero! Veritatis placeat odio et, debitis possimus laudantium ipsa quos
120
- obcaecati dolore cum natus, quasi unde enim aspernatur nemo mollitia,
121
- consectetur beatae odit fugit? Minus accusamus mollitia aperiam enim
122
- labore. Pariatur culpa assumenda, asperiores ab odit nihil! Commodi
123
- pariatur minus facere aspernatur repudiandae dolores sint, culpa
124
- possimus deserunt! Accusantium doloremque perferendis pariatur deserunt
125
- soluta, eaque cupiditate vero eligendi ratione veritatis laborum officia
126
- distinctio omnis asperiores sapiente, placeat cum dolorum optio! Libero
127
- quasi animi veniam nihil. Tenetur hic nihil iusto eos placeat qui
128
- veritatis, dolore explicabo quia ipsam ab optio laudantium, sed
129
- asperiores architecto expedita, numquam adipisci veniam perferendis
130
- pariatur animi accusantium aliquam! Explicabo perferendis, voluptatum
131
- qui nam corporis maxime in ratione laborum optio ut quis delectus?
132
- Dolores mollitia omnis aperiam id voluptas, iusto sit ea ex odio
133
- perferendis ullam eaque soluta, accusantium voluptates facilis impedit
134
- similique at assumenda obcaecati cupiditate nam odit magni totam.
135
- Suscipit, quo.
136
- </ p >
111
+ < section class ="container section " id ="services ">
112
+ < div class ="row ">
113
+ < div class ="col s12 l4 ">
114
+ < h2 class ="grey-text text-darken-4 "> What I do...</ h2 >
115
+ < p >
116
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam,
117
+ repudiandae?
118
+ </ p >
119
+ < p >
120
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam,
121
+ repudiandae?
122
+ </ p >
123
+ </ div >
124
+ < div class ="col s12 l6 offset-l2 ">
125
+ < ul class ="tabs ">
126
+ < li class ="tab col s6 ">
127
+ < a href ="#photography " class ="grey-text text-darken-4 "
128
+ > Photography</ a
129
+ >
130
+ </ li >
131
+ < li class ="tab col s6 ">
132
+ < a href ="#editing " class ="grey-text text-darken-4 "> Editing</ a >
133
+ </ li >
134
+ </ ul >
135
+ < div class ="col s12 " id ="photography ">
136
+ < p class ="flow-text grey-text text-darken-4 "> PHOTOGRAPHY</ p >
137
+ < p >
138
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita
139
+ hic beatae quidem dolor alias voluptates natus quibusdam?
140
+ Doloribus, praesentium cumque.
141
+ </ p >
142
+ </ div >
143
+ < div class ="col s12 " id ="editing ">
144
+ < p class ="flow-text grey-text text-darken-4 "> EDITING</ p >
145
+ < p >
146
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita
147
+ hic beatae quidem dolor alias voluptates natus quibusdam?
148
+ Doloribus, praesentium cumque.
149
+ </ p >
150
+ </ div >
151
+ </ div >
152
+ </ div >
137
153
</ section >
138
154
<!-- parallax -->
139
155
< section class ="parallax-container ">
@@ -146,34 +162,90 @@ <h2 class="indigo-text text-darken-4">Nature</h2>
146
162
</ div >
147
163
</ section >
148
164
<!-- contact form -->
149
- < section class ="container ">
150
- < p >
151
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur
152
- possimus, voluptatum, quidem iste doloribus dignissimos quod aliquid
153
- similique laborum soluta veniam optio obcaecati quibusdam ex aut
154
- numquam, ipsa reprehenderit! Laudantium, nisi. Beatae sequi doloribus,
155
- odit rerum quo, illum et adipisci dolorem ipsum nihil, animi sit quidem
156
- esse! Laborum quasi consectetur accusantium deserunt, molestiae error
157
- vero! Veritatis placeat odio et, debitis possimus laudantium ipsa quos
158
- obcaecati dolore cum natus, quasi unde enim aspernatur nemo mollitia,
159
- consectetur beatae odit fugit? Minus accusamus mollitia aperiam enim
160
- labore. Pariatur culpa assumenda, asperiores ab odit nihil! Commodi
161
- pariatur minus facere aspernatur repudiandae dolores sint, culpa
162
- possimus deserunt! Accusantium doloremque perferendis pariatur deserunt
163
- soluta, eaque cupiditate vero eligendi ratione veritatis laborum officia
164
- distinctio omnis asperiores sapiente, placeat cum dolorum optio! Libero
165
- quasi animi veniam nihil. Tenetur hic nihil iusto eos placeat qui
166
- veritatis, dolore explicabo quia ipsam ab optio laudantium, sed
167
- asperiores architecto expedita, numquam adipisci veniam perferendis
168
- pariatur animi accusantium aliquam! Explicabo perferendis, voluptatum
169
- qui nam corporis maxime in ratione laborum optio ut quis delectus?
170
- Dolores mollitia omnis aperiam id voluptas, iusto sit ea ex odio
171
- perferendis ullam eaque soluta, accusantium voluptates facilis impedit
172
- similique at assumenda obcaecati cupiditate nam odit magni totam.
173
- Suscipit, quo.
174
- </ p >
165
+ < section class ="container section " id ="contact ">
166
+ < div class ="row ">
167
+ < div class ="col s12 l5 ">
168
+ < h2 class ="grey-text text-darken-4 "> Get In Touch</ h2 >
169
+ < p >
170
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate
171
+ est voluptate sapiente pariatur corporis, labore, adipisci numquam
172
+ dolorum perspiciatis hic accusamus esse, quas rerum ex quod autem
173
+ doloremque magnam dignissimos.
174
+ </ p >
175
+ </ div >
176
+ < div class ="col s12 l5 offset-l2 ">
177
+ < form >
178
+ < div class ="input-field ">
179
+ < i class ="material-icons prefix "> email</ i >
180
+ < input type ="email " id ="email " />
181
+ < label for ="email "> Your Email</ label >
182
+ </ div >
183
+ < div class ="input-field ">
184
+ < i class ="material-icons prefix "> message</ i >
185
+ < textarea id ="message " class ="materialize-textarea "> </ textarea >
186
+ < label for ="message "> Your Message</ label >
187
+ </ div >
188
+ < div class ="input-field ">
189
+ < input type ="text " id ="date " class ="datepicker " />
190
+ < label for ="date "> Choose a date you need me for...</ label >
191
+ </ div >
192
+ < div class ="input-field ">
193
+ < p > Services required:</ p >
194
+ < p >
195
+ < label >
196
+ < input type ="checkbox " class ="filled-in " />
197
+ < span > Photography</ span >
198
+ </ label >
199
+ </ p >
200
+ < p >
201
+ < label >
202
+ < input type ="checkbox " class ="filled-in " />
203
+ < span > Editing</ span >
204
+ </ label >
205
+ </ p >
206
+ </ div >
207
+ < div class ="input-field center ">
208
+ < button class ="btn grey darken-4 " onclick ="return false; ">
209
+ Submit
210
+ </ button >
211
+ </ div >
212
+ </ form >
213
+ </ div >
214
+ </ div >
175
215
</ section >
176
216
<!-- footer -->
217
+ < footer class ="page-footer grey darken-3 ">
218
+ < div class ="container ">
219
+ < div class ="row ">
220
+ < div class ="col s12 l6 ">
221
+ < h5 > About Me</ h5 >
222
+ < p >
223
+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam,
224
+ necessitatibus.
225
+ </ p >
226
+ </ div >
227
+ < div class ="col s12 l4 offset-l2 ">
228
+ < h5 > Connect</ h5 >
229
+ < ul >
230
+ < li >
231
+ < a href ="# " class ="grey-text text-lighten-3 "> Instagram</ a >
232
+ </ li >
233
+ < li > < a href ="# " class ="grey-text text-lighten-3 "> Facebook</ a > </ li >
234
+ < li > < a href ="# " class ="grey-text text-lighten-3 "> Twitter</ a > </ li >
235
+ </ ul >
236
+ </ div >
237
+ </ div >
238
+ </ div >
239
+ < div class ="footer-copyright grey darken-4 ">
240
+ < p class ="container center-align ">
241
+ Copyright ©
242
+ < script >
243
+ document . write ( new Date ( ) . getFullYear ( ) ) ;
244
+ </ script >
245
+ Photo Ninja
246
+ </ p >
247
+ </ div >
248
+ </ footer >
177
249
< script src ="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js "> </ script >
178
250
< script src ="index.js "> </ script >
179
251
</ body >
0 commit comments