Skip to content

Commit 1a5561f

Browse files
xyzdeletexyzdelete
committed
Build Footer, Sidebar, Header, Realtors-section, Media Queries
1 parent c8bd208 commit 1a5561f

11 files changed

+396
-282
lines changed

‎css/style.css

+1-270
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

+90-4
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,64 @@
1515
<title>nexter &mdash; your home, your freedom</title>
1616
</head>
1717
<body class="container">
18-
<div class="sidebar">Sidebar</div>
19-
<header class="header">Header</header>
20-
<div class="realtors">Top 3 realtors</div>
18+
<div class="sidebar">
19+
<button class="nav-btn"></button>
20+
</div>
21+
22+
<header class="header">
23+
<img src="img/logo.png" alt="Nexter logo" class="header__logo" />
24+
25+
<h3 class="heading-3">Your own home</h3>
26+
27+
<h1 class="heading-1">The ultimate personal freedom</h1>
28+
29+
<button class="btn header__btn">View our properties</button>
30+
31+
<div class="header__seenon-text">As seen on</div>
32+
33+
<div class="header__seenon-logos">
34+
<img src="img/logo-bbc.png" alt="Seen on logo 1" />
35+
<img src="img/logo-forbes.png" alt="Seen on logo 2" />
36+
<img src="img/logo-techcrunch.png" alt="Seen on logo 3" />
37+
<img src="img/logo-bi.png" alt="Seen on logo 4" />
38+
</div>
39+
</header>
40+
41+
<div class="realtors">
42+
<h3 class="heading-3">Top 3 Realtors</h3>
43+
44+
<div class="realtors__list">
45+
<img
46+
src="img/realtor-1.jpeg"
47+
alt="Realtor 1"
48+
class="realtors__img"
49+
/>
50+
<div class="realtors__details">
51+
<h4 class="heading-4 heading-4--light">Erik Feinman</h4>
52+
<p class="realtors__sold">245 houses sold</p>
53+
</div>
54+
55+
<img
56+
src="img/realtor-2.jpeg"
57+
alt="Realtor 2"
58+
class="realtors__img"
59+
/>
60+
<div class="realtors__details">
61+
<h4 class="heading-4 heading-4--light">Kim Brown</h4>
62+
<p class="realtors__sold">212 houses sold</p>
63+
</div>
64+
65+
<img
66+
src="img/realtor-3.jpeg"
67+
alt="Realtor 3"
68+
class="realtors__img"
69+
/>
70+
<div class="realtors__details">
71+
<h4 class="heading-4 heading-4--light">Toby Ramsey</h4>
72+
<p class="realtors__sold">196 houses sold</p>
73+
</div>
74+
</div>
75+
</div>
2176
<section class="features">
2277
<div class="feature">
2378
<svg class="feature__icon">
@@ -436,6 +491,37 @@ <h5 class="home__name">Modern Family Apartment</h5>
436491
/>
437492
</figure>
438493
</section>
439-
<footer class="footer">Footer</footer>
494+
<footer class="footer">
495+
<ul class="nav">
496+
<li class="nav__item">
497+
<a href="#" class="nav__link">Find your dream home</a>
498+
</li>
499+
<li class="nav__item">
500+
<a href="#" class="nav__link">Request proposal</a>
501+
</li>
502+
<li class="nav__item">
503+
<a href="#" class="nav__link">Download home planner</a>
504+
</li>
505+
<li class="nav__item">
506+
<a href="#" class="nav__link">Contact us</a>
507+
</li>
508+
<li class="nav__item">
509+
<a href="#" class="nav__link">Submit your property</a>
510+
</li>
511+
<li class="nav__item">
512+
<a href="#" class="nav__link">Come work with us!</a>
513+
</li>
514+
</ul>
515+
516+
<p class="copyright">
517+
Web development project "Nexter". It was built by
518+
<a class="author" href="https://www.linkedin.com/in/xyzdelete/"
519+
>Arturs Anikins</a
520+
>
521+
during completion of the online course by Jonas Schmedtmann
522+
"Advanced CSS and Sass: Flexbox, Grid, Animations and More!".
523+
Everything is used for learning purposes only.
524+
</p>
525+
</footer>
440526
</body>
441527
</html>

‎sass/_base.scss

+25-1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ $color-grey-dark-2: #6d5d4b;
1414
$font-primary: "Nunito", sans-serif;
1515
$font-display: "Josefin Sans", sans-serif;
1616

17+
// Responsive breakpoints
18+
$bp-large: 75em; // 1200px
19+
1720
*,
1821
::before,
1922
::after {
@@ -25,6 +28,10 @@ $font-display: "Josefin Sans", sans-serif;
2528
html {
2629
box-sizing: border-box;
2730
font-size: 62.5%; // 10px / 16px = 62.5%
31+
32+
@media only screen and (max-width: $bp-large) {
33+
font-size: 50%;
34+
}
2835
}
2936

3037
body {
@@ -36,7 +43,7 @@ body {
3643

3744
.container {
3845
display: grid;
39-
grid-template-rows: 80vh min-content 40vw repeat(3, min-content);
46+
grid-template-rows: 80vh 20vh min-content repeat(3, min-content);
4047
grid-template-columns:
4148
[sidebar-start] 8rem [sidebar-end full-start] minmax(6rem, 1fr)
4249
[center-start] repeat(
@@ -46,4 +53,21 @@ body {
4653
[center-end]
4754
minmax(6rem, 1fr)
4855
[full-end];
56+
57+
@media only screen and (max-width: $bp-large) {
58+
grid-template-rows: 6rem 80vh 20vh min-content repeat(3, min-content);
59+
grid-template-columns:
60+
[full-start] minmax(6rem, 1fr)
61+
[center-start] repeat(
62+
8,
63+
[col-start] minmax(min-content, 14rem) [col-end]
64+
)
65+
[center-end]
66+
minmax(6rem, 1fr)
67+
[full-end];
68+
}
69+
70+
@media only screen and (max-width: $bp-large) {
71+
grid-template-rows: 6rem 100vh repeat(5, min-content);
72+
}
4973
}

‎sass/_footer.scss

+69
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,73 @@
11
.footer {
22
background-color: $color-secondary;
33
grid-column: full-start / full-end;
4+
padding: 8rem;
5+
}
6+
7+
.nav {
8+
list-style: none;
9+
10+
display: grid;
11+
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
12+
grid-gap: 2rem;
13+
align-items: center;
14+
15+
&__link:link,
16+
&__link:visited {
17+
font-size: 1.4rem;
18+
color: #fff;
19+
text-decoration: none;
20+
font-family: $font-display;
21+
text-transform: uppercase;
22+
text-align: center;
23+
padding: 1.5rem;
24+
display: block;
25+
transition: all 0.2s;
26+
}
27+
28+
&__link:hover,
29+
&__link:active {
30+
background-color: rgba(#fff, 0.05);
31+
transform: translateY(-5%);
32+
}
33+
34+
&__link:hover {
35+
box-shadow: 0rem 2rem 3rem rgba($color-primary, 0.5);
36+
}
37+
38+
&__link:active {
39+
box-shadow: 0rem 1rem 1.5rem rgba($color-primary, 0.25);
40+
transform: translateY(0);
41+
}
42+
43+
li a {
44+
border-radius: 2px;
45+
}
46+
}
47+
48+
.copyright {
49+
font-size: 1.4rem;
50+
color: $color-grey-light-2;
51+
margin-right: auto;
52+
margin-left: auto;
53+
margin-top: 5rem;
54+
text-align: center;
55+
width: 70%;
56+
57+
.author {
58+
display: inline-block;
59+
color: $color-primary;
60+
text-decoration: none;
61+
transition: all 0.2s;
62+
font-weight: 600;
63+
64+
&:hover {
65+
box-shadow: 0rem 2px 4px rgba($color-primary, 0.5);
66+
transform: translateY(-5%);
67+
}
68+
&:active {
69+
box-shadow: 0rem 1px 3px rgba($color-primary, 0.25);
70+
transform: translateY(0);
71+
}
72+
}
473
}

‎sass/_gallery.scss

+3-2
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@
55
display: grid;
66
grid-template-columns: repeat(8, 1fr);
77
grid-template-rows: repeat(7, 5vw);
8-
grid-gap: 1.5rem;
9-
padding: 1.5rem;
8+
grid-gap: 0.5rem;
9+
padding: 0.5rem;
1010

1111
&__item {
1212
overflow: hidden;
1313

1414
img {
1515
transition: all 0.2s;
16+
border-radius: 2px;
1617
}
1718

1819
img:hover {

‎sass/_header.scss

+66-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,69 @@
11
.header {
22
background-color: $color-grey-dark-1;
3-
grid-column: full-start / col-end 6;
3+
grid-column: full-start / full-end;
4+
5+
background-image: linear-gradient(
6+
rgba($color-secondary, 0.93),
7+
rgba($color-secondary, 0.93)
8+
),
9+
url("../img/hero.jpeg");
10+
11+
background-size: cover;
12+
background-position: center;
13+
14+
padding: 8rem;
15+
padding-top: 4rem;
16+
17+
display: grid;
18+
grid-template-rows: 1fr minmax(6rem, min-content) 1fr;
19+
grid-template-columns: minmax(min-content, max-content);
20+
grid-row-gap: 1.5rem;
21+
justify-content: center;
22+
23+
&__logo {
24+
height: 3rem;
25+
justify-self: center;
26+
}
27+
28+
&__btn {
29+
align-self: start;
30+
justify-self: start;
31+
border-radius: 2px;
32+
}
33+
34+
&__seenon-text {
35+
display: grid;
36+
37+
font-size: 1.6rem;
38+
color: $color-grey-light-2;
39+
40+
grid-template-columns: 1fr max-content 1fr;
41+
grid-column-gap: 2rem;
42+
align-items: center;
43+
44+
&::before,
45+
&::after {
46+
content: "";
47+
height: 1px;
48+
display: block;
49+
background-color: currentColor;
50+
}
51+
}
52+
53+
&__seenon-logos {
54+
display: grid;
55+
grid-template-columns: repeat(4, 1fr);
56+
grid-column-gap: 3rem;
57+
justify-items: center;
58+
align-items: center;
59+
img {
60+
max-height: 2.5rem;
61+
max-width: 100%;
62+
filter: brightness(70%);
63+
}
64+
}
65+
66+
@media only screen and (max-width: $bp-large) {
67+
grid-column: 1 / -1;
68+
}
469
}

‎sass/_homes.scss

+12-2
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@
2323
box-shadow: 0rem 3rem 5rem rgba($color-primary, 0.6);
2424
}
2525

26+
&__btn {
27+
justify-self: stretch;
28+
}
29+
2630
&__img {
2731
width: 100%;
2832
grid-row: 1 / 2;
@@ -59,6 +63,7 @@
5963
font-weight: 400;
6064

6165
transform: translateY(50%);
66+
border-radius: 2px;
6267
}
6368

6469
&__location,
@@ -71,11 +76,13 @@
7176
&__area,
7277
&__price {
7378
font-size: 1.5rem;
74-
margin-left: 2rem;
7579

7680
display: flex;
7781
align-items: center;
7882

83+
justify-content: flex-start;
84+
margin-left: 3rem;
85+
margin-right: auto;
7986
svg {
8087
fill: $color-primary;
8188
height: 2rem;
@@ -84,7 +91,10 @@
8491
}
8592
}
8693

87-
&__btn {
94+
.btn {
8895
grid-column: 1 / -1;
96+
border-radius: 0;
8997
}
98+
border-radius: 2px;
99+
overflow: hidden;
90100
}

0 commit comments

Comments
 (0)