Skip to content

Commit 0319e4e

Browse files
AbernachyAbernachy
authored
Merge pull request #17 from Aber-Learningforks/nuc-designs
Nuc designs
2 parents edcd989 + 0be389a commit 0319e4e

File tree

2 files changed

+68
-22
lines changed

2 files changed

+68
-22
lines changed

‎projectfolder/Design/index.html

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,15 @@
77
name="viewport"
88
content="width=device-width, initial-scale=1.0"
99
/>
10+
11+
12+
<link rel="stylesheet" href="style.css" />
1013
<link rel="preconnect" href="https://fonts.googleapis.com" />
1114
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
1215
<link
13-
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
16+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap"
1417
rel="stylesheet"
1518
/>
16-
<link rel="stylesheet" href="style.css" />
1719
<title>Lisbon Chair Shop</title>
1820
</head>
1921
<body>
@@ -109,6 +111,11 @@ <h3>The Laid Back</h3>
109111
</ul>
110112
<div class="chair-price">
111113
<strong>250€</strong>
114+
<span>Weighs 22 kg</span>
115+
</li>
116+
</ul>
117+
<div class="chair-price">
118+
<strong>525€</strong>
112119
<a href="#" class="btn btn--small">Add to cart</a>
113120
</div>
114121
</div>
@@ -134,6 +141,7 @@ <h3>The Worker Bee</h3>
134141
</ul>
135142
<div class="chair-price">
136143
<strong>525€</strong>
144+
137145
<a href="#" class="btn btn--small">Add to cart</a>
138146
</div>
139147
</div>
@@ -165,7 +173,6 @@ <h3>The Chair 4/2</h3>
165173
</figure>
166174
</div>
167175
</section>
168-
169176
<footer>
170177
Copyright &copy; 2027 by Jonas Schmedtmann. Part of "Build
171178
Responsive Real-World Websites with HTML and CSS" online course.

‎projectfolder/Design/style.css

Lines changed: 58 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ FONT SIZE SYSTEM (px)
66
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
77
*/
88

9+
10+
/* Main Color: #087f5b
11+
Grey Color: #343a40
12+
13+
*/
914
:root {
1015
--MainColor: #087f5b;
1116
--SecondaryColor: #343a40;
@@ -21,6 +26,9 @@ FONT SIZE SYSTEM (px)
2126
/* GENERAL STYLES */
2227
/* ------------------------ */
2328
body {
29+
30+
/* font-family: sans-serif; */
31+
2432
font-family: 'Poppins' sans-serif;
2533
color: var(--SecondaryColor);
2634
border-bottom: 8px solid var(--MainColor);
@@ -38,12 +46,41 @@ section {
3846

3947
h2 {
4048
margin-bottom: 48px;
49+
font-size: 30px;
50+
letter-spacing: -1px;
4151
}
4252

4353
.grid-3-cols {
4454
display: grid;
4555
grid-template-columns: repeat(3, 1fr);
4656
column-gap: 80px;
57+
58+
}
59+
60+
.btn:link,
61+
.btn:visited {
62+
background-color: #087f5b;
63+
color: #fff;
64+
text-decoration: none;
65+
text-transform: uppercase;
66+
67+
display: inline-block;
68+
font-weight: 500;
69+
}
70+
71+
.btn:hover,
72+
.btn:active {
73+
background-color: #099268;
74+
}
75+
76+
.btn--big {
77+
padding: 16px 32px;
78+
font-size: 18px;
79+
}
80+
81+
.btn--small {
82+
font-size: 14px;
83+
padding: 8px 12px;
4784
}
4885

4986
/* ------------------------ */
@@ -64,10 +101,17 @@ header {
64101

65102
h1 {
66103
margin-bottom: 24px;
104+
font-size: 44px;
105+
/* / 44 / 52 / 62 / */
106+
line-height: 1.1;
107+
letter-spacing: -2px;
67108
}
68109

69110
.header-text {
70111
margin-bottom: 24px;
112+
/* 16 / 18 / 20 */
113+
font-size: 18px;
114+
line-height: 1.7;
71115
}
72116

73117
img {
@@ -80,13 +124,19 @@ img {
80124

81125
.features-title {
82126
margin-bottom: 16px;
127+
font-size: 20px;
83128
}
84129

85130
.features-text {
131+
font-size: 18px;
132+
line-height: 1.7;
86133
}
87134

88135
/* TESTIMONIAL */
89136
.testimonial-section {
137+
background-color: #087f5b;
138+
color: white;
139+
padding: 24px;
90140
}
91141

92142
.testimonial-box {
@@ -96,11 +146,15 @@ img {
96146

97147
.testimonial-box h2 {
98148
margin-bottom: 24px;
149+
/* 20 / 24 / 30 */
150+
font-size: 24px;
99151
}
100152

101153
.testimonial-text {
102154
font-style: italic;
103155
margin-bottom: 24px;
156+
font-size: 18px;
157+
line-height: 1.7;
104158
}
105159

106160
/* CHAIRS */
@@ -110,6 +164,7 @@ img {
110164

111165
h3 {
112166
margin-bottom: 24px;
167+
font-size: 20px;
113168
}
114169

115170
.chair-details {
@@ -134,27 +189,11 @@ h3 {
134189
.chair-price {
135190
display: flex;
136191
justify-content: space-between;
192+
font-size: 20px;
137193
}
138194

139195
footer {
140196
margin-bottom: 48px;
141-
}
142-
/* Buttons */
143-
144-
.btn {
145-
text-decoration: none;
146-
}
147-
.btn--big {
148-
border-color: var(--MainColor);
149-
font-size: 18;
150-
padding: 14px 28px;
151-
color: white;
152-
background-color: var(--MainColor);
153-
}
154-
.btn--small {
155-
border-color: var(--MainColor);
156-
font-size: 12;
157-
padding: 14px 28px;
158-
color: white;
159-
background-color: var(--MainColor);
197+
font-size: 14px;
198+
color: #868e96;
160199
}

0 commit comments

Comments
 (0)