Skip to content

Commit accb13b

Browse files
jrandjjrandj
committed
Add progress for section 5
1 parent 10de6bc commit accb13b

File tree

7 files changed

+318
-0
lines changed

7 files changed

+318
-0
lines changed

‎attempt/05-Design/chair-1.jpg

145 KB
Loading

‎attempt/05-Design/chair-2.jpg

70.2 KB
Loading

‎attempt/05-Design/chair-3.jpg

69.3 KB
Loading

‎attempt/05-Design/customers.jpg

196 KB
Loading

‎attempt/05-Design/hero.jpg

123 KB
Loading

‎attempt/05-Design/index.html

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<link rel="stylesheet" href="style.css" />
14+
<title>Lisbon Chair Shop</title>
15+
</head>
16+
<body>
17+
<div class="container">
18+
<header>
19+
<div class="header-text-box">
20+
<h1>We design and build better chairs, for a better life</h1>
21+
<p class="header-text">
22+
In a small shop in the heart of Lisbon, we spend our days
23+
relentlessly perfecting the chair. The result is a perfect blend of
24+
beauty and comfort, that will have a lasting impact on your health.
25+
</p>
26+
<a class="btn btn--big" href="#">Shop chairs</a>
27+
</div>
28+
<img src="hero.jpg" alt="Photo" />
29+
</header>
30+
31+
<section>
32+
<h2>What makes our chairs special</h2>
33+
<div class="grid-3-cols">
34+
<div>
35+
<p class="features-title"><strong>Science meets design</strong></p>
36+
<p class="features-text">
37+
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus
38+
similique adipisci praesentium.
39+
</p>
40+
</div>
41+
42+
<div>
43+
<p class="features-title">
44+
<strong>Maximal comfort</strong>
45+
</p>
46+
<p class="features-text">
47+
Reprehenderit optio placeat quasi excepturi architecto, explicabo
48+
facilis perspiciatis error maxime magnam.
49+
</p>
50+
</div>
51+
52+
<div>
53+
<p class="features-title">
54+
<strong>Ethical and sustainable</strong>
55+
</p>
56+
<p class="features-text">
57+
Deleniti recusandae quidem nesciunt, eos dolorum iure, quaerat
58+
omnis est laudantium voluptatem voluptas!
59+
</p>
60+
</div>
61+
</div>
62+
</section>
63+
64+
<section class="testimonial-section">
65+
<div class="grid-3-cols">
66+
<img src="customers.jpg" alt="People sitting on chairs" />
67+
<div class="testimonial-box">
68+
<h2>"We couldn't live without these chairs anymore"</h2>
69+
<blockquote class="testimonial-text">
70+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
71+
repellat at, nesciunt quia cum minima ipsum culpa totam sapiente
72+
recusandae earum debitis doloribus in quasi voluptatibus!
73+
</blockquote>
74+
<p class="testimonial-author">&mdash; Mary and Sarah Johnson</p>
75+
</div>
76+
</div>
77+
</section>
78+
79+
<section>
80+
<h2>Our bestselling chairs</h2>
81+
<div class="grid-3-cols">
82+
<figure class="chair">
83+
<img src="chair-1.jpg" alt="Chair" />
84+
<div class="chair-box">
85+
<h3>The Laid Back</h3>
86+
<ul class="chair-details">
87+
<li>
88+
<!-- Span is a generic INLINE text element, it doesn't have any meaning. It's like a div element, but inline -->
89+
<span>Leisure and relaxing</span>
90+
</li>
91+
<li>
92+
<span>Comfortable for 4h</span>
93+
</li>
94+
<li>
95+
<span>Vegan leather</span>
96+
</li>
97+
<li>
98+
<span>Weighs 16 kg</span>
99+
</li>
100+
</ul>
101+
<div class="chair-price">
102+
<strong>250€</strong>
103+
<a href="#" class="btn btn--small">Add to cart</a>
104+
</div>
105+
</div>
106+
</figure>
107+
108+
<figure class="chair">
109+
<img src="chair-2.jpg" alt="Chair" />
110+
<div class="chair-box">
111+
<h3>The Worker Bee</h3>
112+
<ul class="chair-details">
113+
<li>
114+
<span>Work</span>
115+
</li>
116+
<li>
117+
<span>Comfortable for 8h</span>
118+
</li>
119+
<li>
120+
<span>Vegan leather</span>
121+
</li>
122+
<li>
123+
<span>Weighs 22 kg</span>
124+
</li>
125+
</ul>
126+
<div class="chair-price">
127+
<strong>525€</strong>
128+
<a href="#" class="btn btn--small">Add to cart</a>
129+
</div>
130+
</div>
131+
</figure>
132+
133+
<figure class="chair">
134+
<img src="chair-3.jpg" alt="Chair" />
135+
<div class="chair-box">
136+
<h3>The Chair 4/2</h3>
137+
<ul class="chair-details">
138+
<li>
139+
<span>Leisure and relaxing</span>
140+
</li>
141+
<li>
142+
<span>Comfortable all day!</span>
143+
</li>
144+
<li>
145+
<span>Organic cotton</span>
146+
</li>
147+
<li>
148+
<span>Weighs 80 kg</span>
149+
</li>
150+
</ul>
151+
<div class="chair-price">
152+
<strong>1450€</strong>
153+
<a href="#" class="btn btn--small">Add to cart</a>
154+
</div>
155+
</div>
156+
</figure>
157+
</div>
158+
</section>
159+
160+
<footer>
161+
Copyright &copy; 2027 by Jonas Schmedtmann. Part of "Build Responsive
162+
Real-World Websites with HTML and CSS" online course. Use for learning
163+
purposes only.
164+
</footer>
165+
</div>
166+
</body>
167+
</html>

‎attempt/05-Design/style.css

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
/*
2+
SPACING SYSTEM (px)
3+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
4+
5+
FONT SIZE SYSTEM (px)
6+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
7+
*/
8+
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
}
14+
15+
/* ------------------------ */
16+
/* GENERAL STYLES */
17+
/* ------------------------ */
18+
body {
19+
font-family: "Inter", sans-serif;
20+
font-size: 18px;
21+
line-height: 1.6;
22+
}
23+
24+
.container {
25+
width: 960px;
26+
margin: 0 auto;
27+
}
28+
29+
header,
30+
section {
31+
margin-bottom: 48px;
32+
}
33+
34+
h2 {
35+
margin-bottom: 48px;
36+
font-size: 36px;
37+
letter-spacing: -0.5px;
38+
}
39+
40+
.grid-3-cols {
41+
display: grid;
42+
grid-template-columns: repeat(3, 1fr);
43+
column-gap: 80px;
44+
}
45+
46+
/* ------------------------ */
47+
/* COMPONENT STYLES */
48+
/* ------------------------ */
49+
50+
/* HEADER */
51+
header {
52+
display: grid;
53+
grid-template-columns: repeat(2, 1fr);
54+
column-gap: 80px;
55+
margin-top: 48px;
56+
}
57+
58+
.header-text-box {
59+
align-self: center;
60+
}
61+
62+
h1 {
63+
margin-bottom: 24px;
64+
font-size: 44px;
65+
line-height: 1.1;
66+
letter-spacing: -1px;
67+
}
68+
69+
.header-text {
70+
margin-bottom: 24px;
71+
}
72+
73+
img {
74+
width: 100%;
75+
}
76+
77+
/* FEATURES */
78+
.features-icon {
79+
}
80+
81+
.features-title {
82+
margin-bottom: 16px;
83+
line-height: 1.7;
84+
font-size: 20px;
85+
}
86+
87+
.features-text {
88+
font-size: 18px;
89+
line-height: 1.7;
90+
}
91+
92+
/* TESTIMONIAL */
93+
.testimonial-section {
94+
}
95+
96+
.testimonial-box {
97+
grid-column: 2 / -1;
98+
align-self: center;
99+
}
100+
101+
.testimonial-box h2 {
102+
margin-bottom: 24px;
103+
font-size: 24px;
104+
}
105+
106+
.testimonial-text {
107+
font-style: italic;
108+
margin-bottom: 24px;
109+
font-size: 18px;
110+
line-height: 1.7;
111+
}
112+
113+
/* CHAIRS */
114+
.chair-box {
115+
padding: 24px;
116+
}
117+
118+
h3 {
119+
margin-bottom: 24px;
120+
font-size: 20px;
121+
}
122+
123+
.chair-details {
124+
list-style: none;
125+
margin-bottom: 24px;
126+
}
127+
128+
.chair-details li {
129+
display: flex;
130+
align-items: center;
131+
gap: 12px;
132+
margin-bottom: 24px;
133+
}
134+
135+
.chair-details li:last-child {
136+
margin-bottom: 0;
137+
}
138+
139+
.chair-icon {
140+
}
141+
142+
.chair-price {
143+
display: flex;
144+
justify-content: space-between;
145+
font-size: 20px;
146+
}
147+
148+
footer {
149+
margin-bottom: 48px;
150+
font-size: 14px;
151+
}

0 commit comments

Comments
 (0)