Skip to content

Commit dbd3867

Browse files
AbernachyAbernachy
authored
Merge pull request #15 from Aber-Learningforks/css/designs
started the designs section
2 parents bc66051 + 16cea43 commit dbd3867

22 files changed

+359
-64
lines changed

‎projectfolder/Design/chair-1.jpg

145 KB
Loading

‎projectfolder/Design/chair-2.jpg

70.2 KB
Loading

‎projectfolder/Design/chair-3.jpg

69.3 KB
Loading

‎projectfolder/Design/customers.jpg

196 KB
Loading

‎projectfolder/Design/hero.jpg

123 KB
Loading

‎projectfolder/Design/index.html

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
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+
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>
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>
36+
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>
46+
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>
58+
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>
73+
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>
102+
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>
127+
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>
162+
</html>

‎projectfolder/Design/style.css

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
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: sans-serif;
20+
}
21+
22+
.container {
23+
width: 960px;
24+
margin: 0 auto;
25+
}
26+
27+
header,
28+
section {
29+
margin-bottom: 48px;
30+
}
31+
32+
h2 {
33+
margin-bottom: 48px;
34+
}
35+
36+
.grid-3-cols {
37+
display: grid;
38+
grid-template-columns: repeat(3, 1fr);
39+
column-gap: 80px;
40+
}
41+
42+
/* ------------------------ */
43+
/* COMPONENT STYLES */
44+
/* ------------------------ */
45+
46+
/* HEADER */
47+
header {
48+
display: grid;
49+
grid-template-columns: repeat(2, 1fr);
50+
column-gap: 80px;
51+
margin-top: 48px;
52+
}
53+
54+
.header-text-box {
55+
align-self: center;
56+
}
57+
58+
h1 {
59+
margin-bottom: 24px;
60+
}
61+
62+
.header-text {
63+
margin-bottom: 24px;
64+
}
65+
66+
img {
67+
width: 100%;
68+
}
69+
70+
/* FEATURES */
71+
.features-icon {
72+
}
73+
74+
.features-title {
75+
margin-bottom: 16px;
76+
}
77+
78+
.features-text {
79+
}
80+
81+
/* TESTIMONIAL */
82+
.testimonial-section {
83+
}
84+
85+
.testimonial-box {
86+
grid-column: 2 / -1;
87+
align-self: center;
88+
}
89+
90+
.testimonial-box h2 {
91+
margin-bottom: 24px;
92+
}
93+
94+
.testimonial-text {
95+
font-style: italic;
96+
margin-bottom: 24px;
97+
}
98+
99+
/* CHAIRS */
100+
.chair-box {
101+
padding: 24px;
102+
}
103+
104+
h3 {
105+
margin-bottom: 24px;
106+
}
107+
108+
.chair-details {
109+
list-style: none;
110+
margin-bottom: 24px;
111+
}
112+
113+
.chair-details li {
114+
display: flex;
115+
align-items: center;
116+
gap: 12px;
117+
margin-bottom: 24px;
118+
}
119+
120+
.chair-details li:last-child {
121+
margin-bottom: 0;
122+
}
123+
124+
.chair-icon {
125+
}
126+
127+
.chair-price {
128+
display: flex;
129+
justify-content: space-between;
130+
}
131+
132+
footer {
133+
margin-bottom: 48px;
134+
}

‎projectfolder/content.txt renamed to ‎projectfolder/Fundies/content.txt

File renamed without changes.

‎projectfolder/css/shopStyle.css renamed to ‎projectfolder/Fundies/css/shopStyle.css

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,24 +15,22 @@ body {
1515
clear: both;
1616
}
1717

18-
.container {
19-
/* background-color: red; */
20-
display: flex;
21-
gap: 40px;
22-
}
23-
2418
.product-img {
2519
}
2620

2721
/* PRODUCT */
2822
.product {
23+
display: grid;
24+
grid-template-columns: 250px 1fr 1fr;
25+
column-gap: 40px;
2926
border: 4px solid black;
3027
width: 825px;
3128
margin: 50px auto;
3229
position: relative;
3330
}
3431

3532
.product-title {
33+
grid-column: 1 /-1;
3634
text-align: center;
3735
font-size: 22px;
3836
text-transform: uppercase;
@@ -150,6 +148,7 @@ body {
150148

151149
/* BUTTON */
152150
.add-cart {
151+
grid-column: 1 / -1;
153152
background-color: #000;
154153
border: none;
155154
color: #fff;

‎projectfolder/css/style.css renamed to ‎projectfolder/Fundies/css/style.css

File renamed without changes.

‎projectfolder/imgs/challenges.jpg renamed to ‎projectfolder/Fundies/imgs/challenges.jpg

File renamed without changes.

‎projectfolder/imgs/laura-jones.jpg renamed to ‎projectfolder/Fundies/imgs/laura-jones.jpg

File renamed without changes.

‎projectfolder/imgs/post-img.jpg renamed to ‎projectfolder/Fundies/imgs/post-img.jpg

File renamed without changes.

‎projectfolder/imgs/related-1.jpg renamed to ‎projectfolder/Fundies/imgs/related-1.jpg

File renamed without changes.

‎projectfolder/imgs/related-2.jpg renamed to ‎projectfolder/Fundies/imgs/related-2.jpg

File renamed without changes.

‎projectfolder/imgs/related-3.jpg renamed to ‎projectfolder/Fundies/imgs/related-3.jpg

File renamed without changes.

‎projectfolder/index.html renamed to ‎projectfolder/Fundies/index.html

File renamed without changes.

‎projectfolder/pages/blog.html renamed to ‎projectfolder/Fundies/pages/blog.html

File renamed without changes.

‎projectfolder/Fundies/pages/challenges.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lan="en">
3+
<meta charset="UTF-8" />
4+
<head>
5+
<title>Challenge 2 - Converse Shoe thingy</title>
6+
<link href="../css/shopStyle.css" rel="stylesheet" />
7+
</head>
8+
<body>
9+
<div class="product-container">
10+
<article class="product">
11+
<h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
12+
13+
<img
14+
src="../imgs/challenges.jpg"
15+
alt="Chuck Taylor All Star Shoe"
16+
height="250"
17+
width="250"
18+
class="product-img"
19+
/>
20+
<div class="product-info">
21+
<div class="product-price">
22+
<p class="price"><strong>$65.00</strong></p>
23+
<p class="shipping">Free shipping</p>
24+
</div>
25+
<p class="sale">Sale</p>
26+
27+
<p class="product-description">
28+
Ready to dress up or down, these classic canvas Chucks are an
29+
everyday wardrobe staple.
30+
</p>
31+
<a href="https://converse.com" target="_blank" class="more-info"
32+
>More information &rarr;</a
33+
>
34+
35+
<div class="product-colors">
36+
<div class="color"></div>
37+
<div class="color color-blue"></div>
38+
<div class="color color-red"></div>
39+
<div class="color color-yellow"></div>
40+
<div class="color color-green"></div>
41+
<div class="color color-brown"></div>
42+
</div>
43+
</div>
44+
45+
<div class="product-details">
46+
<h3 class="details-title">Product details</h3>
47+
<ul class="details-list">
48+
<li>Lightweight, durable canvas sneaker</li>
49+
<li>Lightly padded footbed for added comfort</li>
50+
<li>Iconic Chuck Taylor ankle patch.</li>
51+
</ul>
52+
</div>
53+
54+
<button class="add-cart">Add to cart</button>
55+
</article>
56+
</div>
57+
</body>
58+
</html>

‎projectfolder/pages/css-grid.html renamed to ‎projectfolder/Fundies/pages/css-grid.html

File renamed without changes.

‎projectfolder/pages/flexbox.html renamed to ‎projectfolder/Fundies/pages/flexbox.html

File renamed without changes.

0 commit comments

Comments
 (0)