Skip to content

Commit b6ff266

Browse files
iamserdaiamserda
committed
minor css updates
1 parent 1cfc3bb commit b6ff266

File tree

2 files changed

+376
-178
lines changed

2 files changed

+376
-178
lines changed

‎starter/05-Design/index.html‎

Lines changed: 219 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -1,162 +1,236 @@
11
<!DOCTYPE html>
22
<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" />
73

8-
<link rel="stylesheet" href="style.css" />
9-
<title>Lisbon Chair Shop</title>
10-
</head>
11-
<body>
12-
<div class="container">
13-
<header>
14-
<div class="header-text-box">
15-
<h1>We design and build better chairs, for a better life</h1>
16-
<p class="header-text">
17-
In a small shop in the heart of Lisbon, we spend our days
18-
relentlessly perfecting the chair. The result is a perfect blend of
19-
beauty and comfort, that will have a lasting impact on your health.
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
9+
10+
<link rel="stylesheet" href="style.css" />
11+
<title>Inwood Seats</title>
12+
</head>
13+
14+
<body>
15+
<div class="container">
16+
<header>
17+
<div class="header-text-box">
18+
<h1>We design chairs you will love.</h1>
19+
<p class="header-text">
20+
In a small shop in the heart of Inwood, we work tireless to design and bring you the perfect chair and seating
21+
experience.The result is a perfect blend of elegance and comfort. A product designed to have a lasting impact
22+
on your health.
23+
</p>
24+
<a class="btn btn-large" href="#">Shop chairs</a>
25+
</div>
26+
<img src="hero.jpg" alt="Photo" />
27+
</header>
28+
29+
<section>
30+
<h2>Our chairs are special</h2>
31+
<div class="grid-3-cols">
32+
<div>
33+
<p class="features-title">
34+
<svg xmlns="http://www.w3.org/2000/svg" class="icons" viewBox="0 0 20 20" fill="currentColor">
35+
<path fill-rule="evenodd"
36+
d="M7 2a1 1 0 00-.707 1.707L7 4.414v3.758a1 1 0 01-.293.707l-4 4C.817 14.769 2.156 18 4.828 18h10.343c2.673 0 4.012-3.231 2.122-5.121l-4-4A1 1 0 0113 8.172V4.414l.707-.707A1 1 0 0013 2H7zm2 6.172V4h2v4.172a3 3 0 00.879 2.12l1.027 1.028a4 4 0 00-2.171.102l-.47.156a4 4 0 01-2.53 0l-.563-.187a1.993 1.993 0 00-.114-.035l1.063-1.063A3 3 0 009 8.172z"
37+
clip-rule="evenodd" />
38+
</svg>
39+
<strong>Science meets design</strong>
40+
</p>
41+
<p class="features-text">
42+
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus
43+
similique adipisci praesentium.
2044
</p>
21-
<a class="btn btn--big" href="#">Shop chairs</a>
2245
</div>
23-
<img src="hero.jpg" alt="Photo" />
24-
</header>
25-
26-
<section>
27-
<h2>What makes our chairs special</h2>
28-
<div class="grid-3-cols">
29-
<div>
30-
<p class="features-title"><strong>Science meets design</strong></p>
31-
<p class="features-text">
32-
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus
33-
similique adipisci praesentium.
34-
</p>
35-
</div>
3646

37-
<div>
38-
<p class="features-title">
39-
<strong>Maximal comfort</strong>
40-
</p>
41-
<p class="features-text">
42-
Reprehenderit optio placeat quasi excepturi architecto, explicabo
43-
facilis perspiciatis error maxime magnam.
44-
</p>
45-
</div>
47+
<div>
48+
<p class="features-title">
49+
<svg xmlns="http://www.w3.org/2000/svg" class="icons" fill="none" viewBox="0 0 24 24" stroke="currentColor">
50+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
51+
d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
52+
</svg>
53+
<strong>Maximal comfort</strong>
54+
</p>
55+
<p class="features-text">
56+
Reprehenderit optio placeat quasi excepturi architecto, explicabo
57+
facilis perspiciatis error maxime magnam.
58+
</p>
59+
</div>
4660

47-
<div>
48-
<p class="features-title">
49-
<strong>Ethical and sustainable</strong>
50-
</p>
51-
<p class="features-text">
52-
Deleniti recusandae quidem nesciunt, eos dolorum iure, quaerat
53-
omnis est laudantium voluptatem voluptas!
54-
</p>
55-
</div>
61+
<div>
62+
<p class="features-title">
63+
<svg xmlns="http://www.w3.org/2000/svg" class="icons" fill="none" viewBox="0 0 24 24" stroke="currentColor">
64+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
65+
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
66+
</svg>
67+
<strong>Ethical and sustainable</strong>
68+
</p>
69+
<p class="features-text">
70+
Deleniti recusandae quidem nesciunt, eos dolorum iure, quaerat
71+
omnis est laudantium voluptatem voluptas!
72+
</p>
5673
</div>
57-
</section>
74+
</div>
75+
</section>
5876

59-
<section class="testimonial-section">
60-
<div class="grid-3-cols">
61-
<img src="customers.jpg" alt="People sitting on chairs" />
62-
<div class="testimonial-box">
63-
<h2>"We couldn't live without these chairs anymore"</h2>
64-
<blockquote class="testimonial-text">
65-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
66-
repellat at, nesciunt quia cum minima ipsum culpa totam sapiente
67-
recusandae earum debitis doloribus in quasi voluptatibus!
68-
</blockquote>
69-
<p class="testimonial-author">&mdash; Mary and Sarah Johnson</p>
70-
</div>
77+
<section class="testimonial-section">
78+
<div class="grid-3-cols">
79+
<img src="customers.jpg" alt="People sitting on chairs" />
80+
<div class="testimonial-box">
81+
<h2>"We couldn't live without these chairs anymore"</h2>
82+
<blockquote class="testimonial-text">
83+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
84+
repellat at, nesciunt quia cum minima ipsum culpa totam sapiente
85+
recusandae earum debitis doloribus in quasi voluptatibus!
86+
</blockquote>
87+
<p class="testimonial-author">&mdash; Mary and Sarah Johnson</p>
7188
</div>
72-
</section>
89+
</div>
90+
</section>
7391

74-
<section>
75-
<h2>Our bestselling chairs</h2>
76-
<div class="grid-3-cols">
77-
<figure class="chair">
78-
<img src="chair-1.jpg" alt="Chair" />
79-
<div class="chair-box">
80-
<h3>The Laid Back</h3>
81-
<ul class="chair-details">
82-
<li>
83-
<!-- Span is a generic INLINE text element, it doesn't have any meaning. It's like a div element, but inline -->
84-
<span>Leisure and relaxing</span>
85-
</li>
86-
<li>
87-
<span>Comfortable for 4h</span>
88-
</li>
89-
<li>
90-
<span>Vegan leather</span>
91-
</li>
92-
<li>
93-
<span>Weighs 16 kg</span>
94-
</li>
95-
</ul>
96-
<div class="chair-price">
97-
<strong>250€</strong>
98-
<a href="#" class="btn btn--small">Add to cart</a>
99-
</div>
92+
<section>
93+
<h2>Our bestselling chairs</h2>
94+
<div class="grid-3-cols">
95+
<figure class="chair">
96+
<img src="chair-1.jpg" alt="Chair" />
97+
<div class="chair-box">
98+
<h3>The Laid Back</h3>
99+
<ul class="chair-details">
100+
<li>
101+
<!-- Span is a generic INLINE text element, it doesn't have any meaning. It's like a div element, but inline -->
102+
<svg xmlns="http://www.w3.org/2000/svg" class="chair-icons" fill="none" viewBox="0 0 24 24"
103+
stroke="currentColor">
104+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
105+
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
106+
</svg>
107+
<span>Leisure and relaxing</span>
108+
</li>
109+
<li>
110+
<svg xmlns="http://www.w3.org/2000/svg" class="chair-icons" fill="none" viewBox="0 0 24 24"
111+
stroke="currentColor">
112+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
113+
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
114+
</svg>
115+
<span>Comfortable for 4h</span>
116+
</li>
117+
<li>
118+
<svg xmlns="http://www.w3.org/2000/svg" class="chair-icons" fill="none" viewBox="0 0 24 24"
119+
stroke="currentColor">
120+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
121+
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
122+
</svg>
123+
<span>Vegan leather</span>
124+
</li>
125+
<li>
126+
<svg xmlns="http://www.w3.org/2000/svg" class="chair-icons" fill="none" viewBox="0 0 24 24"
127+
stroke="currentColor">
128+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
129+
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
130+
</svg>
131+
<span>Weighs 16 kg</span>
132+
</li>
133+
</ul>
134+
<div class="chair-price">
135+
<strong>250€</strong>
136+
<a href="#" class="btn btn-small">Add to cart</a>
100137
</div>
101-
</figure>
138+
</div>
139+
</figure>
102140

103-
<figure class="chair">
104-
<img src="chair-2.jpg" alt="Chair" />
105-
<div class="chair-box">
106-
<h3>The Worker Bee</h3>
107-
<ul class="chair-details">
108-
<li>
109-
<span>Work</span>
110-
</li>
111-
<li>
112-
<span>Comfortable for 8h</span>
113-
</li>
114-
<li>
115-
<span>Vegan leather</span>
116-
</li>
117-
<li>
118-
<span>Weighs 22 kg</span>
119-
</li>
120-
</ul>
121-
<div class="chair-price">
122-
<strong>525€</strong>
123-
<a href="#" class="btn btn--small">Add to cart</a>
124-
</div>
141+
<figure class="chair">
142+
<img src="chair-2.jpg" alt="Chair" />
143+
<div class="chair-box">
144+
<h3>The Worker Bee</h3>
145+
<ul class="chair-details">
146+
<li>
147+
<svg xmlns="http://www.w3.org/2000/svg" class="chair-icons" fill="none" viewBox="0 0 24 24"
148+
stroke="currentColor">
149+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
150+
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
151+
</svg>
152+
153+
<span>Work</span>
154+
</li>
155+
<li>
156+
<svg xmlns="http://www.w3.org/2000/svg" class="chair-icons" fill="none" viewBox="0 0 24 24"
157+
stroke="currentColor">
158+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
159+
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
160+
</svg>
161+
<span>Comfortable for 8h</span>
162+
</li>
163+
<li>
164+
<svg xmlns="http://www.w3.org/2000/svg" class="chair-icons" fill="none" viewBox="0 0 24 24"
165+
stroke="currentColor">
166+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
167+
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
168+
</svg>
169+
<span>Vegan leather</span>
170+
</li>
171+
<li>
172+
<svg xmlns="http://www.w3.org/2000/svg" class="chair-icons" fill="none" viewBox="0 0 24 24"
173+
stroke="currentColor">
174+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
175+
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
176+
</svg>
177+
<span>Weighs 22 kg</span>
178+
</li>
179+
</ul>
180+
<div class="chair-price">
181+
<strong>525€</strong>
182+
<a href="#" class="btn btn-small">Add to cart</a>
125183
</div>
126-
</figure>
184+
</div>
185+
</figure>
127186

128-
<figure class="chair">
129-
<img src="chair-3.jpg" alt="Chair" />
130-
<div class="chair-box">
131-
<h3>The Chair 4/2</h3>
132-
<ul class="chair-details">
133-
<li>
134-
<span>Leisure and relaxing</span>
135-
</li>
136-
<li>
137-
<span>Comfortable all day!</span>
138-
</li>
139-
<li>
140-
<span>Organic cotton</span>
141-
</li>
142-
<li>
143-
<span>Weighs 80 kg</span>
144-
</li>
145-
</ul>
146-
<div class="chair-price">
147-
<strong>1450€</strong>
148-
<a href="#" class="btn btn--small">Add to cart</a>
149-
</div>
187+
<figure class="chair">
188+
<img src="chair-3.jpg" alt="Chair" />
189+
<div class="chair-box">
190+
<h3>The Chair 4/2</h3>
191+
<ul class="chair-details">
192+
<li><svg xmlns="http://www.w3.org/2000/svg" class="chair-icons" fill="none" viewBox="0 0 24 24"
193+
stroke="currentColor">
194+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
195+
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
196+
</svg>
197+
<span>Leisure and relaxing</span>
198+
</li>
199+
<li><svg xmlns="http://www.w3.org/2000/svg" class="chair-icons" fill="none" viewBox="0 0 24 24"
200+
stroke="currentColor">
201+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
202+
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
203+
</svg>
204+
<span>Comfortable all day!</span>
205+
</li>
206+
<li><svg xmlns="http://www.w3.org/2000/svg" class="chair-icons" fill="none" viewBox="0 0 24 24"
207+
stroke="currentColor">
208+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
209+
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
210+
</svg>
211+
<span>Organic cotton</span>
212+
</li>
213+
<li><svg xmlns="http://www.w3.org/2000/svg" class="chair-icons" fill="none" viewBox="0 0 24 24"
214+
stroke="currentColor">
215+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
216+
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
217+
</svg>
218+
<span>Weighs 80 kg</span>
219+
</li>
220+
</ul>
221+
<div class="chair-price">
222+
<strong>1450€</strong>
223+
<a href="#" class="btn btn-small">Add to cart</a>
150224
</div>
151-
</figure>
152-
</div>
153-
</section>
225+
</div>
226+
</figure>
227+
</div>
228+
</section>
229+
230+
</div>
231+
<footer>
232+
<p>Made with ❤️ in Inwood. Circa 2020-2021.</p>
233+
</footer>
234+
</body>
154235

155-
<footer>
156-
Copyright &copy; 2027 by Jonas Schmedtmann. Part of "Build Responsive
157-
Real-World Websites with HTML and CSS" online course. Use for learning
158-
purposes only.
159-
</footer>
160-
</div>
161-
</body>
162-
</html>
236+
</html>

0 commit comments

Comments
 (0)