Skip to content

Commit edcd989

Browse files
AbernachyAbernachy
authored
Merge pull request #16 from Aber-Learningforks/icons
started icons
2 parents dbd3867 + 63b96e5 commit edcd989

File tree

2 files changed

+228
-188
lines changed

2 files changed

+228
-188
lines changed

‎projectfolder/Design/index.html

Lines changed: 165 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -1,162 +1,176 @@
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" />
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0"
9+
/>
10+
<link rel="preconnect" href="https://fonts.googleapis.com" />
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
12+
<link
13+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
14+
rel="stylesheet"
15+
/>
16+
<link rel="stylesheet" href="style.css" />
17+
<title>Lisbon Chair Shop</title>
18+
</head>
19+
<body>
20+
<div class="container">
21+
<header>
22+
<div class="header-text-box">
23+
<h1>We design and build better chairs, for a better life</h1>
24+
<p class="header-text">
25+
In a small shop in the heart of Lisbon, we spend our days
26+
relentlessly perfecting the chair. The result is a perfect
27+
blend of beauty and comfort, that will have a lasting impact on
28+
your health.
29+
</p>
30+
<a class="btn btn--big" href="#">Shop chairs</a>
31+
</div>
32+
<img src="hero.jpg" alt="Photo" />
33+
</header>
734

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.
20-
</p>
21-
<a class="btn btn--big" href="#">Shop chairs</a>
22-
</div>
23-
<img src="hero.jpg" alt="Photo" />
24-
</header>
35+
<section>
36+
<h2>What makes our chairs special</h2>
37+
<div class="grid-3-cols">
38+
<div>
39+
<p class="features-title">
40+
<strong>Science meets design</strong>
41+
</p>
42+
<p class="features-text">
43+
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
44+
Natus similique adipisci praesentium.
45+
</p>
46+
</div>
2547

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>
48+
<div>
49+
<p class="features-title">
50+
<strong>Maximal comfort</strong>
51+
</p>
52+
<p class="features-text">
53+
Reprehenderit optio placeat quasi excepturi architecto,
54+
explicabo facilis perspiciatis error maxime magnam.
55+
</p>
56+
</div>
3657

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>
58+
<div>
59+
<p class="features-title">
60+
<strong>Ethical and sustainable</strong>
61+
</p>
62+
<p class="features-text">
63+
Deleniti recusandae quidem nesciunt, eos dolorum iure,
64+
quaerat omnis est laudantium voluptatem voluptas!
65+
</p>
66+
</div>
67+
</div>
68+
</section>
4669

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>
56-
</div>
57-
</section>
70+
<section class="testimonial-section">
71+
<div class="grid-3-cols">
72+
<img src="customers.jpg" alt="People sitting on chairs" />
73+
<div class="testimonial-box">
74+
<h2>"We couldn't live without these chairs anymore"</h2>
75+
<blockquote class="testimonial-text">
76+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
77+
Dolor repellat at, nesciunt quia cum minima ipsum culpa totam
78+
sapiente recusandae earum debitis doloribus in quasi
79+
voluptatibus!
80+
</blockquote>
81+
<p class="testimonial-author">
82+
&mdash; Mary and Sarah Johnson
83+
</p>
84+
</div>
85+
</div>
86+
</section>
5887

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>
71-
</div>
72-
</section>
88+
<section>
89+
<h2>Our bestselling chairs</h2>
90+
<div class="grid-3-cols">
91+
<figure class="chair">
92+
<img src="chair-1.jpg" alt="Chair" />
93+
<div class="chair-box">
94+
<h3>The Laid Back</h3>
95+
<ul class="chair-details">
96+
<li>
97+
<!-- Span is a generic INLINE text element, it doesn't have any meaning. It's like a div element, but inline -->
98+
<span>Leisure and relaxing</span>
99+
</li>
100+
<li>
101+
<span>Comfortable for 4h</span>
102+
</li>
103+
<li>
104+
<span>Vegan leather</span>
105+
</li>
106+
<li>
107+
<span>Weighs 16 kg</span>
108+
</li>
109+
</ul>
110+
<div class="chair-price">
111+
<strong>250€</strong>
112+
<a href="#" class="btn btn--small">Add to cart</a>
113+
</div>
114+
</div>
115+
</figure>
73116

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>
100-
</div>
101-
</figure>
117+
<figure class="chair">
118+
<img src="chair-2.jpg" alt="Chair" />
119+
<div class="chair-box">
120+
<h3>The Worker Bee</h3>
121+
<ul class="chair-details">
122+
<li>
123+
<span>Work</span>
124+
</li>
125+
<li>
126+
<span>Comfortable for 8h</span>
127+
</li>
128+
<li>
129+
<span>Vegan leather</span>
130+
</li>
131+
<li>
132+
<span>Weighs 22 kg</span>
133+
</li>
134+
</ul>
135+
<div class="chair-price">
136+
<strong>525€</strong>
137+
<a href="#" class="btn btn--small">Add to cart</a>
138+
</div>
139+
</div>
140+
</figure>
102141

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>
125-
</div>
126-
</figure>
142+
<figure class="chair">
143+
<img src="chair-3.jpg" alt="Chair" />
144+
<div class="chair-box">
145+
<h3>The Chair 4/2</h3>
146+
<ul class="chair-details">
147+
<li>
148+
<span>Leisure and relaxing</span>
149+
</li>
150+
<li>
151+
<span>Comfortable all day!</span>
152+
</li>
153+
<li>
154+
<span>Organic cotton</span>
155+
</li>
156+
<li>
157+
<span>Weighs 80 kg</span>
158+
</li>
159+
</ul>
160+
<div class="chair-price">
161+
<strong>1450€</strong>
162+
<a href="#" class="btn btn--small">Add to cart</a>
163+
</div>
164+
</div>
165+
</figure>
166+
</div>
167+
</section>
127168

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>
150-
</div>
151-
</figure>
152-
</div>
153-
</section>
154-
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>
169+
<footer>
170+
Copyright &copy; 2027 by Jonas Schmedtmann. Part of "Build
171+
Responsive Real-World Websites with HTML and CSS" online course.
172+
Use for learning purposes only.
173+
</footer>
174+
</div>
175+
</body>
162176
</html>

0 commit comments

Comments
 (0)