Skip to content

Commit 17eb457

Browse files
coder-abdocoder-abdo
committed
Finishing Gallery Section And Footer
1 parent b357bad commit 17eb457

File tree

4 files changed

+253
-8
lines changed

4 files changed

+253
-8
lines changed

‎css/style.css

+84-4
Original file line numberDiff line numberDiff line change
@@ -198,9 +198,89 @@ body {
198198
grid-column: 1 / -1; }
199199

200200
.gallery {
201-
background-color: orange;
202-
grid-column: full-start / full-end; }
201+
background-color: #f9f7f6;
202+
grid-column: full-start / full-end;
203+
display: grid;
204+
grid-template-rows: repeat(7, 5vw);
205+
grid-template-columns: repeat(8, 1fr);
206+
grid-gap: 1.5rem;
207+
padding: 1.5rem; }
208+
.gallery__item--1 {
209+
grid-row: 1 / span 2;
210+
grid-column: 1 / span 2; }
211+
.gallery__item--2 {
212+
grid-row: 1 / span 3;
213+
grid-column: 3 / span 3; }
214+
.gallery__item--3 {
215+
grid-row: 1 / span 2; }
216+
.gallery__item--4 {
217+
grid-row: 1 / span 2;
218+
grid-column: 7 / span 2; }
219+
.gallery__item--5 {
220+
grid-row: 3 / span 3;
221+
grid-column: 1 / span 2; }
222+
.gallery__item--6 {
223+
grid-row: 4 / span 2;
224+
grid-column: 3 / span 2; }
225+
.gallery__item--7 {
226+
grid-row: 4 / span 1;
227+
grid-column: 5 / span 1; }
228+
.gallery__item--8 {
229+
grid-row: 3 / span 2;
230+
grid-column: 6 / span 2; }
231+
.gallery__item--9 {
232+
grid-row: 3 / span 3;
233+
grid-column: 8 / span 1; }
234+
.gallery__item--10 {
235+
grid-row: 6 / span 2;
236+
grid-column: 1 / span 1; }
237+
.gallery__item--11 {
238+
grid-row: 6 / span 2;
239+
grid-column: 2 / span 2; }
240+
.gallery__item--12 {
241+
grid-row: 6 / span 2;
242+
grid-column: 4 / span 1; }
243+
.gallery__item--13 {
244+
grid-row: 5 / span 3;
245+
grid-column: 5 / span 3; }
246+
.gallery__item--14 {
247+
grid-row: 6 / span 2;
248+
grid-column: 8 / span 1; }
249+
.gallery__img {
250+
display: block;
251+
width: 100%;
252+
height: 100%;
253+
object-fit: cover; }
203254

204255
.footer {
205-
background-color: olivedrab;
206-
grid-column: full-start / full-end; }
256+
background-color: #101d2c;
257+
grid-column: full-start / full-end;
258+
padding: 8rem; }
259+
260+
.nav {
261+
list-style: none;
262+
display: grid;
263+
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
264+
grid-gap: 2rem;
265+
align-items: center; }
266+
.nav__link:link, .nav__link:visited {
267+
display: block;
268+
padding: 1.5rem;
269+
text-decoration: none;
270+
font-family: "Josefin Sans", sans-serif;
271+
font-weight: 400;
272+
font-size: 1.4rem;
273+
color: #fff;
274+
text-align: center;
275+
text-transform: uppercase;
276+
transition: background-color .25s, transform .25s; }
277+
.nav__link:hover, .nav__link:active {
278+
background-color: rgba(255, 255, 255, 0.05);
279+
transform: translateY(-3px); }
280+
281+
.copyright {
282+
font-size: 1.4rem;
283+
text-align: center;
284+
margin-top: 6rem;
285+
color: #aaa;
286+
text-transform: capitalize; }

‎index.html

+64-2
Original file line numberDiff line numberDiff line change
@@ -300,10 +300,72 @@ <h5 class="home__name">Modern Family Apartement</h5>
300300
</div>
301301
</section>
302302
<section class="gallery">
303-
Gallery
303+
<figure class="gallery__item gallery__item--1">
304+
<img src="images/gal-1.jpeg" alt="Gallery Img 1" class="gallery__img">
305+
</figure>
306+
307+
<figure class="gallery__item gallery__item--2">
308+
<img src="images/gal-2.jpeg" alt="Gallery Img 2" class="gallery__img">
309+
</figure>
310+
311+
<figure class="gallery__item gallery__item--3">
312+
<img src="images/gal-3.jpeg" alt="Gallery Img 3" class="gallery__img">
313+
</figure>
314+
315+
<figure class="gallery__item gallery__item--4">
316+
<img src="images/gal-4.jpeg" alt="Gallery Img 4" class="gallery__img">
317+
</figure>
318+
319+
<figure class="gallery__item gallery__item--5">
320+
<img src="images/gal-5.jpeg" alt="Gallery Img 5" class="gallery__img">
321+
</figure>
322+
323+
<figure class="gallery__item gallery__item--6">
324+
<img src="images/gal-6.jpeg" alt="Gallery Img 6" class="gallery__img">
325+
</figure>
326+
327+
<figure class="gallery__item gallery__item--7">
328+
<img src="images/gal-7.jpeg" alt="Gallery Img 7" class="gallery__img">
329+
</figure>
330+
331+
<figure class="gallery__item gallery__item--8">
332+
<img src="images/gal-8.jpeg" alt="Gallery Img 8" class="gallery__img">
333+
</figure>
334+
335+
<figure class="gallery__item gallery__item--9">
336+
<img src="images/gal-9.jpeg" alt="Gallery Img 9" class="gallery__img">
337+
</figure>
338+
339+
<figure class="gallery__item gallery__item--10">
340+
<img src="images/gal-10.jpeg" alt="Gallery Img 10" class="gallery__img">
341+
</figure>
342+
343+
<figure class="gallery__item gallery__item--11">
344+
<img src="images/gal-11.jpeg" alt="Gallery Img 11" class="gallery__img">
345+
</figure>
346+
347+
<figure class="gallery__item gallery__item--12">
348+
<img src="images/gal-12.jpeg" alt="Gallery Img 12" class="gallery__img">
349+
</figure>
350+
351+
<figure class="gallery__item gallery__item--13">
352+
<img src="images/gal-13.jpeg" alt="Gallery Img 13" class="gallery__img">
353+
</figure>
354+
355+
<figure class="gallery__item gallery__item--14">
356+
<img src="images/gal-14.jpeg" alt="Gallery Img 14" class="gallery__img">
357+
</figure>
304358
</section>
305359
<footer class="footer">
306-
Footer
360+
<ul class="nav">
361+
<li class="nav__item"><a href="#" class="nav__link">Find Your Dream Home</a></li>
362+
<li class="nav__item"><a href="#" class="nav__link">Request Proposal</a></li>
363+
<li class="nav__item"><a href="#" class="nav__link">Download The Home Planner</a></li>
364+
<li class="nav__item"><a href="#" class="nav__link">Contact Us</a></li>
365+
<li class="nav__item"><a href="#" class="nav__link">Submit Your property</a></li>
366+
<li class="nav__item"><a href="#" class="nav__link">Come Work With Us</a></li>
367+
</ul>
368+
<p class="copyright">&copy; copyright 2018 by jonas shmedtmann</p>
307369
</footer>
308370
</body>
309371
</html>

‎sass/_footer.scss

+34-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,37 @@
11
.footer {
2-
background-color: olivedrab;
2+
background-color: $color-secondary;
33
grid-column: full-start / full-end;
4+
padding: 8rem;
5+
}
6+
.nav {
7+
list-style: none;
8+
display: grid;
9+
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
10+
grid-gap: 2rem;
11+
align-items: center;
12+
&__link:link,
13+
&__link:visited {
14+
display: block;
15+
padding: 1.5rem;
16+
text-decoration: none;
17+
font-family: $font-display;
18+
font-weight: 400;
19+
font-size: 1.4rem;
20+
color: #fff;
21+
text-align: center;
22+
text-transform: uppercase;
23+
transition: background-color .25s, transform .25s;
24+
}
25+
&__link:hover,
26+
&__link:active {
27+
background-color: rgba(#fff, .05);
28+
transform: translateY(-3px);
29+
}
30+
}
31+
.copyright {
32+
font-size: 1.4rem;
33+
text-align: center;
34+
margin-top: 6rem;
35+
color: $color-grey-light-2;
36+
text-transform: capitalize;
437
}

‎sass/_gallery.scss

+71-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,74 @@
11
.gallery {
2-
background-color: orange;
2+
background-color: $color-grey-light-1;
33
grid-column: full-start / full-end;
4+
display: grid;
5+
grid-template-rows: repeat(7, 5vw);
6+
grid-template-columns: repeat(8, 1fr);
7+
grid-gap: 1.5rem;
8+
padding: 1.5rem;
9+
10+
&__item {
11+
&--1 {
12+
grid-row: 1 / span 2;
13+
grid-column: 1 / span 2;
14+
}
15+
&--2 {
16+
grid-row: 1 / span 3;
17+
grid-column: 3 / span 3;
18+
}
19+
&--3 {
20+
grid-row: 1 / span 2;
21+
}
22+
&--4 {
23+
grid-row: 1 / span 2;
24+
grid-column: 7 / span 2;
25+
}
26+
&--5 {
27+
grid-row: 3 / span 3;
28+
grid-column: 1 / span 2;
29+
}
30+
&--6 {
31+
grid-row: 4 / span 2;
32+
grid-column: 3 / span 2;
33+
}
34+
&--7 {
35+
grid-row: 4 / span 1;
36+
grid-column: 5 / span 1;
37+
}
38+
&--8 {
39+
grid-row: 3 / span 2;
40+
grid-column: 6 / span 2;
41+
}
42+
&--9 {
43+
grid-row: 3 / span 3;
44+
grid-column: 8 / span 1;
45+
}
46+
&--10 {
47+
grid-row: 6 / span 2;
48+
grid-column: 1 / span 1;
49+
}
50+
&--11 {
51+
grid-row: 6 / span 2;
52+
grid-column: 2 / span 2;
53+
}
54+
&--12 {
55+
grid-row: 6 / span 2;
56+
grid-column: 4 / span 1;
57+
}
58+
&--13 {
59+
grid-row: 5 / span 3;
60+
grid-column: 5 / span 3;
61+
}
62+
&--14 {
63+
grid-row: 6 / span 2;
64+
grid-column: 8 / span 1;
65+
}
66+
67+
}
68+
&__img {
69+
display: block;
70+
width: 100%;
71+
height: 100%;
72+
object-fit: cover;
73+
}
474
}

0 commit comments

Comments
 (0)