Skip to content

Commit a710870

Browse files
AbernachyAbernachy
committed
started the component building. I've also started applying outside knowledge to these lessons to reinforce JS and CSS units
1 parent 204432f commit a710870

File tree

9 files changed

+943
-0
lines changed

9 files changed

+943
-0
lines changed

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

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
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
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0"
9+
/>
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap"
12+
rel="stylesheet"
13+
/>
14+
<link rel="stylesheet" href="accordion.css" />
15+
<title>Accordion Component</title>
16+
<style></style>
17+
</head>
18+
<body>
19+
<div class="accordion">
20+
<div id="item1" class="item">
21+
<p class="number">01</p>
22+
<p class="text">Am I depressed?</p>
23+
<svg
24+
xmlns="http://www.w3.org/2000/svg"
25+
class="icon"
26+
fill="none"
27+
viewBox="0 0 24 24"
28+
stroke="currentColor"
29+
stroke-width="2"
30+
>
31+
<path
32+
stroke-linecap="round"
33+
stroke-linejoin="round"
34+
d="M19 9l-7 7-7-7"
35+
/>
36+
</svg>
37+
38+
<div class="hiddenBox">
39+
<p>
40+
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
41+
Debitis, sunt adipisci commodi rem velit autem voluptate. Enim,
42+
natus nihil eum commodi quas facilis voluptate aliquam!
43+
</p>
44+
<ul>
45+
<li>
46+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
47+
Saepe sapiente, nisi, voluptatem ad ipsum excepturi
48+
temporibus laboriosam ullam in obcaecati
49+
</li>
50+
<li>
51+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
52+
Voluptatem fuga nobis placeat deserunt reprehenderit eaque!
53+
</li>
54+
<li>
55+
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
56+
Mollitia, quisquam exercitationem modi minima sit, recusandae
57+
ullam natus, aspernatur illo possimus delectus fugiat vel.
58+
</li>
59+
</ul>
60+
</div>
61+
</div>
62+
63+
<div id="item2" class="item">
64+
<p class="number">02</p>
65+
<p class="text">How long do I have to live?</p>
66+
<svg
67+
xmlns="http://www.w3.org/2000/svg"
68+
class="icon"
69+
fill="none"
70+
viewBox="0 0 24 24"
71+
stroke="currentColor"
72+
stroke-width="2"
73+
>
74+
<path
75+
stroke-linecap="round"
76+
stroke-linejoin="round"
77+
d="M19 9l-7 7-7-7"
78+
/>
79+
</svg>
80+
<div class="hiddenBox">
81+
<p>
82+
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
83+
Debitis, sunt adipisci commodi rem velit autem voluptate. Enim,
84+
natus nihil eum commodi quas facilis voluptate aliquam!
85+
</p>
86+
<ul>
87+
<li>
88+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
89+
Saepe sapiente, nisi, voluptatem ad ipsum excepturi
90+
temporibus laboriosam ullam in obcaecati
91+
</li>
92+
<li>
93+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
94+
Voluptatem fuga nobis placeat deserunt reprehenderit eaque!
95+
</li>
96+
<li>
97+
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
98+
Mollitia, quisquam exercitationem modi minima sit, recusandae
99+
ullam natus, aspernatur illo possimus delectus fugiat vel.
100+
</li>
101+
</ul>
102+
</div>
103+
</div>
104+
105+
<div id="item3" class="item">
106+
<p class="number">03</p>
107+
<p class="text">Is that an Auditory Hallucination?</p>
108+
<svg
109+
xmlns="http://www.w3.org/2000/svg"
110+
class="icon"
111+
fill="none"
112+
viewBox="0 0 24 24"
113+
stroke="currentColor"
114+
stroke-width="2"
115+
>
116+
<path
117+
stroke-linecap="round"
118+
stroke-linejoin="round"
119+
d="M19 9l-7 7-7-7"
120+
/>
121+
</svg>
122+
<div class="hiddenBox">
123+
<p>
124+
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
125+
Debitis, sunt adipisci commodi rem velit autem voluptate. Enim,
126+
natus nihil eum commodi quas facilis voluptate aliquam!
127+
</p>
128+
<ul>
129+
<li>
130+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
131+
Saepe sapiente, nisi, voluptatem ad ipsum excepturi
132+
temporibus laboriosam ullam in obcaecati
133+
</li>
134+
<li>
135+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
136+
Voluptatem fuga nobis placeat deserunt reprehenderit eaque!
137+
</li>
138+
</ul>
139+
</div>
140+
</div>
141+
</div>
142+
</body>
143+
<script src="accordion.js"></script>
144+
</html>

‎projectfolder/06-Components/01-accordion/accordion.css

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
/*
2+
SPACING SYSTEM (px)
3+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
4+
(rems) (divide by 10)
5+
.2/.4/.8./1.2/1.6 ....
6+
7+
FONT SIZE SYSTEM (px)
8+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
9+
(rems) divide by 10
10+
1 / 1.2 / 1.4/ 1.6 ...
11+
*/
12+
13+
/* Main Color: #087f5b
14+
Grey Color: #343a40
15+
16+
*/
17+
:root {
18+
--MainColor: #087f5b;
19+
--SecondaryColor: #343a40;
20+
}
21+
22+
* {
23+
margin: 0;
24+
padding: 0;
25+
box-sizing: border-box;
26+
}
27+
28+
/* ------------------------ */
29+
/* GENERAL STYLES */
30+
/* ------------------------ */
31+
body {
32+
/* font-family: sans-serif; */
33+
34+
font-family: 'Poppins' sans-serif;
35+
color: var(--SecondaryColor);
36+
37+
font-size: 10;
38+
line-height: 1;
39+
}
40+
41+
.accordion {
42+
width: 700px;
43+
margin: 100px auto;
44+
display: flex;
45+
flex-direction: column;
46+
gap: 2.4rem;
47+
}
48+
49+
.active,
50+
.item:hover {
51+
background-color: #e9ecef;
52+
}
53+
54+
.item {
55+
box-shadow: 0 0 3.2rem rgba(0, 0, 0, 0.1);
56+
padding: 2.4rem;
57+
58+
display: grid;
59+
grid-template-columns: auto 1fr auto;
60+
column-gap: 2.4rem;
61+
row-gap: 3.2rem;
62+
align-items: center;
63+
}
64+
.number,
65+
.text {
66+
font-size: 2.4rem;
67+
font-weight: 500;
68+
/* color: var(--MainColor); */
69+
}
70+
71+
.number {
72+
color: #ced4da;
73+
}
74+
.icon {
75+
width: 2.4rem;
76+
height: 2.4 rem;
77+
stroke: var(--MainColor);
78+
}
79+
80+
.hiddenBox {
81+
grid-column: 2;
82+
display: none;
83+
}
84+
.hiddenBox ul {
85+
color: #868e96;
86+
margin-left: 2rem;
87+
88+
display: flex;
89+
flex-direction: column;
90+
gap: 1.2rem;
91+
}
92+
.hiddenBox p {
93+
line-height: 1.6;
94+
margin-bottom: 2.4rem;
95+
}
96+
97+
/* .hiddenBox li {
98+
margin-bottom: 1.2rem;
99+
} */
100+
101+
/* Open State */
102+
103+
.open {
104+
border-top: 0.4rem solid var(--MainColor);
105+
}
106+
107+
.open .hiddenBox {
108+
display: block;
109+
}
110+
111+
.open .number,
112+
.open .text {
113+
color: var(--MainColor);
114+
}

‎projectfolder/06-Components/01-accordion/accordion.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
var item = document.getElementsByClassName('item')
2+
var i
3+
4+
// So yea, classlist.toggle("open") will add or remove "open" from the class name
5+
6+
for (i = 0; i < item.length; i++) {
7+
item[i].addEventListener('click', function () {
8+
this.classList.toggle('open')
9+
})
10+
}

‎projectfolder/06-Components/base designs/baseCSS.css

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/*
2+
SPACING SYSTEM (px)
3+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
4+
(rems) (divide by 10)
5+
.2/.4/.8./1.2/1.6 ....
6+
7+
FONT SIZE SYSTEM (px)
8+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
9+
(rems) divide by 10
10+
1 / 1.2 / 1.4/ 1.6 ...
11+
*/
12+
13+
/* Main Color: #087f5b
14+
Grey Color: #343a40
15+
16+
*/
17+
:root {
18+
--MainColor: #087f5b;
19+
--SecondaryColor: #343a40;
20+
}
21+
22+
* {
23+
margin: 0;
24+
padding: 0;
25+
box-sizing: border-box;
26+
}
27+
28+
/* ------------------------ */
29+
/* GENERAL STYLES */
30+
/* ------------------------ */
31+
body {
32+
/* font-family: sans-serif; */
33+
34+
font-family: 'Poppins' sans-serif;
35+
color: var(--SecondaryColor);
36+
border-bottom: 8px solid var(--MainColor);
37+
font-size: 10;
38+
}

‎projectfolder/06-Components/base designs/baseIndex.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0"
9+
/>
10+
<title>Document</title>
11+
</head>
12+
<body></body>
13+
</html>

‎projectfolder/06-Components/hero.jpg

551 KB
Loading

0 commit comments

Comments
 (0)