Skip to content

Commit 09cd1cb

Browse files
daviskamaudaviskamau
authored
html,css,js
1 parent 5955c82 commit 09cd1cb

15 files changed

Lines changed: 806 additions & 0 deletions

File tree

‎faq-collapse/index.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>FAQ</title>
9+
</head>
10+
<body>
11+
<h1>Frequently Asked Questions</h1>
12+
<div class="faq-container">
13+
<div class="faq active">
14+
<h3 class="faq-title">
15+
Why shouldn't we trust atoms?
16+
</h3>
17+
18+
<p class="faq-text">
19+
They make up everything
20+
</p>
21+
22+
<button class="faq-toggle">
23+
<i class="fas fa-chevron-down"></i>
24+
<i class="fas fa-times"></i>
25+
</button>
26+
</div>
27+
28+
<div class="faq">
29+
<h3 class="faq-title">
30+
What do you call someone with no body and no nose?
31+
</h3>
32+
<p class="faq-text">
33+
Nobody knows.
34+
</p>
35+
<button class="faq-toggle">
36+
<i class="fas fa-chevron-down"></i>
37+
<i class="fas fa-times"></i>
38+
</button>
39+
</div>
40+
41+
<div class="faq">
42+
<h3 class="faq-title">
43+
What's the object-oriented way to become wealthy?
44+
</h3>
45+
<p class="faq-text">
46+
Inheritance.
47+
</p>
48+
<button class="faq-toggle">
49+
<i class="fas fa-chevron-down"></i>
50+
<i class="fas fa-times"></i>
51+
</button>
52+
</div>
53+
54+
<div class="faq">
55+
<h3 class="faq-title">
56+
How many tickles does it take to tickle an octopus?
57+
</h3>
58+
<p class="faq-text">
59+
Ten-tickles!
60+
</p>
61+
<button class="faq-toggle">
62+
<i class="fas fa-chevron-down"></i>
63+
<i class="fas fa-times"></i>
64+
</button>
65+
</div>
66+
67+
<div class="faq">
68+
<h3 class="faq-title">
69+
What is: 1 + 1?
70+
</h3>
71+
<p class="faq-text">
72+
Depends on who are you asking.
73+
</p>
74+
<button class="faq-toggle">
75+
<i class="fas fa-chevron-down"></i>
76+
<i class="fas fa-times"></i>
77+
</button>
78+
</div>
79+
</div>
80+
<script src="script.js"></script>
81+
</body>
82+
</html>

‎faq-collapse/script.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const toggles = document.querySelectorAll('.faq-toggle')
2+
3+
toggles.forEach(toggle => {
4+
toggle.addEventListener('click', () => {
5+
toggle.parentNode.classList.toggle('active')
6+
})
7+
})

‎faq-collapse/style.css‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: 'Muli', sans-serif;
9+
background-color: #f0f0f0;
10+
}
11+
12+
h1 {
13+
margin: 50px 0 30px;
14+
text-align: center;
15+
}
16+
17+
.faq-container {
18+
max-width: 600px;
19+
margin: 0 auto;
20+
}
21+
22+
.faq {
23+
background-color: transparent;
24+
border: 1px solid #9fa4a8;
25+
border-radius: 10px;
26+
margin: 20px 0;
27+
padding: 30px;
28+
position: relative;
29+
overflow: hidden;
30+
transition: 0.3s ease;
31+
}
32+
33+
.faq.active {
34+
background-color: #fff;
35+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
36+
}
37+
38+
.faq.active::before,
39+
.faq.active::after {
40+
content: '\f075';
41+
font-family: 'Font Awesome 5 Free';
42+
color: #2ecc71;
43+
font-size: 7rem;
44+
position: absolute;
45+
opacity: 0.2;
46+
top: 20px;
47+
left: 20px;
48+
z-index: 0;
49+
}
50+
51+
.faq.active::before {
52+
color: #3498db;
53+
top: -10px;
54+
left: -30px;
55+
transform: rotateY(180deg);
56+
}
57+
58+
.faq-title {
59+
margin: 0 35px 0 0;
60+
}
61+
62+
.faq-text {
63+
display: none;
64+
margin: 30px 0 0;
65+
}
66+
67+
.faq.active .faq-text {
68+
display: block;
69+
}
70+
71+
.faq-toggle {
72+
background-color: transparent;
73+
border: 0;
74+
border-radius: 50%;
75+
cursor: pointer;
76+
display: flex;
77+
align-items: center;
78+
justify-content: center;
79+
font-size: 16px;
80+
padding: 0;
81+
position: absolute;
82+
top: 30px;
83+
right: 30px;
84+
height: 30px;
85+
width: 30px;
86+
}
87+
88+
.faq-toggle:focus {
89+
outline: 0;
90+
}
91+
92+
.faq-toggle .fa-times {
93+
display: none;
94+
}
95+
96+
.faq.active .faq-toggle .fa-times {
97+
color: #fff;
98+
display: block;
99+
}
100+
101+
.faq.active .faq-toggle .fa-chevron-down {
102+
display: none;
103+
}
104+
105+
.faq.active .faq-toggle {
106+
background-color: #9fa4a8;
107+
}

‎feedback-ui-design/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>Let Us Know Your Feedback</title>
9+
</head>
10+
<body>
11+
<div id="panel" class="panel-container">
12+
<strong>How satisfied are you with our <br /> customer support performance?</strong>
13+
<div class="ratings-container">
14+
<div class="rating">
15+
<img src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-17.png" alt="">
16+
<small>Unhappy</small>
17+
</div>
18+
19+
<div class="rating">
20+
<img src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-3.png" alt=""/>
21+
<small>Neutral</small>
22+
</div>
23+
24+
<div class="rating active">
25+
<img src="https://img.icons8.com/external-neu-royyan-wijaya/64/000000/external-emoji-neumojis-smiley-neu-royyan-wijaya-30.png" alt=""/>
26+
<small>Satisfied</small>
27+
</div>
28+
</div>
29+
<button class="btn" id="send">Send Review</button>
30+
</div>
31+
<script src="script.js"></script>
32+
</body>
33+
</html>

‎feedback-ui-design/script.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
const ratings = document.querySelectorAll('.rating')
2+
const ratingsContainer = document.querySelector('.ratings-container')
3+
const sendBtn = document.querySelector('#send')
4+
const panel = document.querySelector('#panel')
5+
let selectedRating = 'Satisfied'
6+
7+
ratingsContainer.addEventListener('click', (e) => {
8+
if(e.target.parentNode.classList.contains('rating') && e.target.nextElementSibling) {
9+
removeActive()
10+
e.target.parentNode.classList.add('active')
11+
selectedRating = e.target.nextElementSibling.innerHTML
12+
} else if(
13+
e.target.parentNode.classList.contains('rating') &&
14+
e.target.previousSibling &&
15+
e.target.previousElementSibling.nodeName === 'IMG'
16+
) {
17+
removeActive()
18+
e.target.parentNode.classList.add('active')
19+
selectedRating = e.target.innerHTML
20+
}
21+
22+
})
23+
24+
sendBtn.addEventListener('click', (e) => {
25+
panel.innerHTML = `
26+
<i class="fas fa-heart"></i>
27+
<strong>Thank You!</strong>
28+
<br>
29+
<strong>Feedback: ${selectedRating}</strong>
30+
<p>We'll use your feedback to improve our customer support</p>
31+
`
32+
})
33+
34+
function removeActive() {
35+
for(let i = 0; i < ratings.length; i++) {
36+
ratings[i].classList.remove('active')
37+
}
38+
}

‎feedback-ui-design/style.css‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #fef9f2;
9+
font-family: 'Montserrat', sans-serif;
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
height: 100vh;
14+
overflow: hidden;
15+
margin: 0;
16+
}
17+
18+
.panel-container {
19+
background-color: #fff;
20+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
21+
border-radius: 4px;
22+
font-size: 90%;
23+
display: flex;
24+
flex-direction: column;
25+
justify-content: center;
26+
align-items: center;
27+
text-align: center;
28+
padding: 30px;
29+
max-width: 400px;
30+
}
31+
32+
.panel-container strong {
33+
line-height: 20px;
34+
}
35+
36+
.ratings-container {
37+
display: flex;
38+
margin: 20px 0;
39+
}
40+
41+
.rating {
42+
flex: 1;
43+
cursor: pointer;
44+
padding: 20px;
45+
margin: 10px 5px;
46+
}
47+
48+
.rating:hover,
49+
.rating.active {
50+
border-radius: 4px;
51+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
52+
}
53+
54+
.rating img {
55+
width: 40px;
56+
}
57+
58+
.rating small {
59+
color: #555;
60+
display: inline-block;
61+
margin: 10px 0 0;
62+
}
63+
64+
.rating:hover small,
65+
.rating.active small {
66+
color: #111;
67+
}
68+
69+
.btn {
70+
background-color: #302d2b;
71+
color: #fff;
72+
border: 0;
73+
border-radius: 4px;
74+
padding: 12px 30px;
75+
cursor: pointer;
76+
}
77+
78+
.btn:focus {
79+
outline: 0;
80+
}
81+
82+
.btn:active {
83+
transform: scale(0.98);
84+
}
85+
86+
.fa-heart {
87+
color: red;
88+
font-size: 30px;
89+
margin-bottom: 10px;
90+
}

‎github-profiles/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Github Profiles</title>
8+
</head>
9+
<body>
10+
<form class="user-form" id="form">
11+
<input type="text" id="search" placeholder="Search a Github User">
12+
</form>
13+
14+
<main id="main"></main>
15+
16+
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js" integrity="sha512-DZqqY3PiOvTP9HkjIWgjO6ouCbq+dxqWoJZ/Q+zPYNHmlnI2dQnbJ5bxAHpAMw+LXRm4D72EIRXzvcHQtE8/VQ==" crossorigin="anonymous"></script>
17+
<script src="script.js"></script>
18+
</body>
19+
</html>

0 commit comments

Comments
 (0)