Skip to content

Commit 47da7c6

Browse files
solygambassolygambas
committed
add tabs, form and footer
1 parent f0d7397 commit 47da7c6

File tree

4 files changed

+179
-61
lines changed

4 files changed

+179
-61
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ This repo is made of 3 projects:
1010

1111
A recipe website to understand Tailwind CSS basics.
1212

13+
[See Demo on CodePen](https://codepen.io/solygambas/full/bGqpPJJ)
14+
1315
[See food-ninja folder](https://github.com/solygambas/html-css-frameworks/tree/master/food-ninja)
1416

1517
<p align="center">

‎photo-ninja/index.html

Lines changed: 133 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,14 @@
3131
><i class="material-icons">menu</i></a
3232
>
3333
<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>
3737
</ul>
3838
<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>
4242
</ul>
4343
</div>
4444
</nav>
@@ -54,7 +54,7 @@
5454
/>
5555
</div>
5656
<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>
5858
<p>
5959
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti,
6060
quia laboriosam amet alias quasi excepturi voluptatem quas! Iure,
@@ -71,7 +71,7 @@ <h2 class="indigo-text text-darken-4">Portraits</h2>
7171
/>
7272
</div>
7373
<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>
7575
<p>
7676
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti,
7777
quia laboriosam amet alias quasi excepturi voluptatem quas! Iure,
@@ -88,7 +88,7 @@ <h2 class="indigo-text text-darken-4">Cityscapes</h2>
8888
/>
8989
</div>
9090
<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>
9292
<p>
9393
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti,
9494
quia laboriosam amet alias quasi excepturi voluptatem quas! Iure,
@@ -108,32 +108,48 @@ <h2 class="indigo-text text-darken-4">Nature</h2>
108108
</div>
109109
</section>
110110
<!-- 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>
137153
</section>
138154
<!-- parallax -->
139155
<section class="parallax-container">
@@ -146,34 +162,90 @@ <h2 class="indigo-text text-darken-4">Nature</h2>
146162
</div>
147163
</section>
148164
<!-- 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>
175215
</section>
176216
<!-- 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 &copy;
242+
<script>
243+
document.write(new Date().getFullYear());
244+
</script>
245+
Photo Ninja
246+
</p>
247+
</div>
248+
</footer>
177249
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
178250
<script src="index.js"></script>
179251
</body>

‎photo-ninja/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
const sidenav = document.querySelector(".sidenav");
22
const lightboxes = document.querySelectorAll(".materialboxed");
33
const parallaxes = document.querySelectorAll(".parallax");
4+
const tabs = document.querySelector(".tabs");
5+
const datepicker = document.querySelector(".datepicker");
46

57
M.Sidenav.init(sidenav);
68
M.Materialbox.init(lightboxes);
79
M.Parallax.init(parallaxes);
10+
M.Tabs.init(tabs);
11+
M.Datepicker.init(datepicker, { disableWeekends: true });

‎photo-ninja/style.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,46 @@ header {
99
padding: 4vw 0;
1010
}
1111

12+
.tabs .indicator {
13+
background-color: #b64a53;
14+
}
15+
16+
.tabs .tab a:focus,
17+
.tabs .tab a:focus.active {
18+
background-color: transparent;
19+
}
20+
21+
.input-field input:focus + label,
22+
.input-field textarea:focus + label {
23+
color: #b64a53 !important;
24+
}
25+
26+
.input-field input:focus,
27+
.input-field textarea:focus {
28+
border-bottom: 1px solid #b64a53 !important;
29+
box-shadow: 0 1px 0 0 #b64a53 !important;
30+
}
31+
32+
.input-field .prefix.active,
33+
.datepicker-cancel,
34+
.datepicker-clear,
35+
.datepicker-today,
36+
.datepicker-done,
37+
.datepicker-table td.is-today,
38+
.dropdown-content li > span {
39+
color: #b64a53;
40+
}
41+
42+
.datepicker-date-display,
43+
.datepicker-table td.is-selected {
44+
background-color: #b64a53;
45+
}
46+
47+
.input-field input[type="checkbox"].filled-in:checked + span:not(.lever):after {
48+
border: 2px solid #b64a53;
49+
background-color: #b64a53;
50+
}
51+
1252
@media screen and (max-width: 670px) {
1353
header {
1454
min-height: 50vh;

0 commit comments

Comments
 (0)