Skip to content

Commit 3574d14

Browse files
N0sBaN0sBa
committed
update
1 parent 7142c84 commit 3574d14

File tree

2 files changed

+106
-1
lines changed

2 files changed

+106
-1
lines changed

‎starter/05-Design/style.css‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
2+
13
/*
24
SPACING SYSTEM (px)
35
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
46
57
FONT SIZE SYSTEM (px)
68
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
9+
10+
MAIN COLOR: #087f5b
11+
GREY COLOR: #343a40
712
*/
813

14+
15+
916
* {
1017
margin: 0;
1118
padding: 0;
@@ -16,7 +23,8 @@ FONT SIZE SYSTEM (px)
1623
/* GENERAL STYLES */
1724
/* ------------------------ */
1825
body {
19-
font-family: sans-serif;
26+
font-family: 'Inter', sans-serif;
27+
color: #343a40;
2028
}
2129

2230
.container {
@@ -39,6 +47,23 @@ h2 {
3947
column-gap: 80px;
4048
}
4149

50+
.btn:link,
51+
.btn:visited {
52+
background-color: #087f5b;
53+
color: #fff;
54+
text-decoration: none;
55+
text-transform: uppercase;
56+
padding: 16px 32px;
57+
font-weight: 500;
58+
font-size: 18px;
59+
display: inline-block;
60+
}
61+
62+
.btn:hover,
63+
.btn:active {
64+
background-color: #099268;
65+
}
66+
4267
/* ------------------------ */
4368
/* COMPONENT STYLES */
4469
/* ------------------------ */
@@ -57,10 +82,16 @@ header {
5782

5883
h1 {
5984
margin-bottom: 24px;
85+
font-size: 44px;
86+
line-height: 1.1;
87+
letter-spacing: -1px;
6088
}
6189

6290
.header-text {
6391
margin-bottom: 24px;
92+
font-size: 18px;
93+
line-height: 1.6;
94+
letter-spacing: 0.5px;
6495
}
6596

6697
img {

‎starter/06-Components/01-accordion.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
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+
<title>Accordion Component</title>
8+
<style>
9+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
10+
/*
11+
SPACING SYSTEM (px)
12+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
13+
14+
FONT SIZE SYSTEM (px)
15+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
16+
17+
MAIN COLOR: #087f5b
18+
GREY COLOR: #343a40
19+
*/
20+
21+
* {
22+
margin: 0;
23+
padding: 0;
24+
box-sizing: border-box;
25+
}
26+
27+
body {
28+
font-family: 'Inter', sans-serif;
29+
color: #343a40;
30+
}
31+
32+
.accordion {
33+
width: 700px;
34+
margin: 100px auto;
35+
display: grid;
36+
grid-template-columns: auto 1fr auto;
37+
gap: 12px;
38+
box-shadow: 0 0 2px 1px rgba(0,0,0,0.2);
39+
padding: 16px;
40+
/* border-radius: 8px; */
41+
border-top: 4px solid #087f5b;
42+
}
43+
.number {
44+
font-size: 24px;
45+
}
46+
.title {
47+
font-size: 24px;
48+
}
49+
.icon {
50+
width: 24px;
51+
}
52+
.content {
53+
grid-column: 2;
54+
}
55+
</style>
56+
</head>
57+
<body>
58+
<div class="accordion">
59+
<div class="number">01</div>
60+
<div class="title">What is HTML?</div>
61+
<svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
62+
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
63+
</svg>
64+
<div class="content">
65+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam consequatur fugit itaque tempore qui aliquid! Quod impedit cumque tenetur odit?</p>
66+
<ul>
67+
<li>Lorem ipsum dolor sit amet.</li>
68+
<li>Eius illum pariatur ad quas!</li>
69+
<li>Minima dignissimos accusantium in doloremque!</li>
70+
</ul>
71+
</div>
72+
</div>
73+
</body>
74+
</html>

0 commit comments

Comments
 (0)