Skip to content

Commit a5227ed

Browse files
AbernachyAbernachy
committed
started colors
1 parent 16cea43 commit a5227ed

File tree

2 files changed

+245
-187
lines changed

2 files changed

+245
-187
lines changed

‎projectfolder/Design/index.html

Lines changed: 165 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -1,162 +1,177 @@
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+
/>
710

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>
11+
<link rel="stylesheet" href="style.css" />
12+
<link rel="preconnect" href="https://fonts.googleapis.com" />
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
14+
<link
15+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap"
16+
rel="stylesheet"
17+
/>
18+
<title>Lisbon Chair Shop</title>
19+
</head>
20+
<body>
21+
<div class="container">
22+
<header>
23+
<div class="header-text-box">
24+
<h1>We design and build better chairs, for a better life</h1>
25+
<p class="header-text">
26+
In a small shop in the heart of Lisbon, we spend our days
27+
relentlessly perfecting the chair. The result is a perfect
28+
blend of beauty and comfort, that will have a lasting impact on
29+
your health.
30+
</p>
31+
<a class="btn btn--big" href="#">Shop chairs</a>
32+
</div>
33+
<img src="hero.jpg" alt="Photo" />
34+
</header>
2535

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>
36+
<section>
37+
<h2>What makes our chairs special</h2>
38+
<div class="grid-3-cols">
39+
<div>
40+
<p class="features-title">
41+
<strong>Science meets design</strong>
42+
</p>
43+
<p class="features-text">
44+
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
45+
Natus similique adipisci praesentium.
46+
</p>
47+
</div>
3648

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

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

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

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

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

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

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

0 commit comments

Comments
 (0)