Skip to content

Commit 95f8623

Browse files
CodeRustyProCodeRustyPro
authored
Added All files
1 parent e8487a2 commit 95f8623

36 files changed

+4352
-0
lines changed

‎Information.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title></title>
6+
<link rel="stylesheet" type="text/css" href="faq.css">
7+
</head>
8+
9+
<body>
10+
<div class="container"> <button class="accordion">What is SSI?</button>
11+
<div class="panel">
12+
<p>Lorem ipsum...</p>
13+
</div>
14+
<button class="accordion">How do you use it?</button>
15+
<div class="panel">
16+
<p>Lorem ipsum...</p>
17+
</div>
18+
<button class="accordion">Section 3</button>
19+
<div class="panel">
20+
<p>Lorem ipsum...</p>
21+
</div>
22+
</details>
23+
</div>
24+
<script type="text/javascript">
25+
var acc = document.getElementsByClassName("accordion");
26+
var i;
27+
28+
for (i = 0; i < acc.length; i++) {
29+
acc[i].addEventListener("click", function() {
30+
/* Toggle between adding and removing the "active" class,
31+
to highlight the button that controls the panel */
32+
this.classList.toggle("active");
33+
34+
/* Toggle between hiding and showing the active panel */
35+
var panel = this.nextElementSibling;
36+
if (panel.style.display === "block") {
37+
panel.style.display = "none";
38+
} else {
39+
panel.style.display = "block";
40+
}
41+
});
42+
}
43+
</script>
44+
</body>
45+
46+
</html>

‎app.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
const menu = document.querySelector('#mobile-menu');
2+
const menuLinks = document.querySelector('.navbar__menu');
3+
const navLogo = document.querySelector('#navbar__logo');
4+
5+
// Display Mobile Menu
6+
const mobileMenu = () => {
7+
menu.classList.toggle('is-active');
8+
menuLinks.classList.toggle('active');
9+
};
10+
11+
menu.addEventListener('click', mobileMenu);
12+
13+
// Show active menu when scrolling
14+
const highlightMenu = () => {
15+
const elem = document.querySelector('.highlight');
16+
const homeMenu = document.querySelector('#home-page');
17+
const aboutMenu = document.querySelector('#about-page');
18+
const servicesMenu = document.querySelector('#services-page');
19+
let scrollPos = window.scrollY;
20+
// console.log(scrollPos);
21+
22+
// adds 'highlight' class to my menu items
23+
if (window.innerWidth > 960 && scrollPos < 600) {
24+
homeMenu.classList.add('highlight');
25+
aboutMenu.classList.remove('highlight');
26+
return;
27+
} else if (window.innerWidth > 960 && scrollPos < 1400) {
28+
aboutMenu.classList.add('highlight');
29+
homeMenu.classList.remove('highlight');
30+
servicesMenu.classList.remove('highlight');
31+
return;
32+
} else if (window.innerWidth > 960 && scrollPos < 2345) {
33+
servicesMenu.classList.add('highlight');
34+
aboutMenu.classList.remove('highlight');
35+
return;
36+
}
37+
38+
if ((elem && window.innerWIdth < 960 && scrollPos < 600) || elem) {
39+
elem.classList.remove('highlight');
40+
}
41+
};
42+
43+
window.addEventListener('scroll', highlightMenu);
44+
window.addEventListener('click', highlightMenu);
45+
46+
// Close mobile Menu when clicking on a menu item
47+
const hideMobileMenu = () => {
48+
const menuBars = document.querySelector('.is-active');
49+
if (window.innerWidth <= 768 && menuBars) {
50+
menu.classList.toggle('is-active');
51+
menuLinks.classList.remove('active');
52+
}
53+
};
54+
55+
menuLinks.addEventListener('click', hideMobileMenu);
56+
navLogo.addEventListener('click', hideMobileMenu);

‎border.png‎

17.4 KB
Loading

‎decide.css‎

Lines changed: 270 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
2+
@import url('https://fonts.googleapis.com/css2?family=Nova+Flat&display=swap');
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: 'Poppins', sans-serif;
8+
font-weight: 1000;
9+
}
10+
11+
body {
12+
background:url(decidebg.png);
13+
overflow: hidden;
14+
}
15+
16+
body::-webkit-scrollbar {
17+
width: 1em;
18+
border-radius: 20px;
19+
}
20+
21+
body::-webkit-scrollbar-track {
22+
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
23+
border-radius: 20px;
24+
}
25+
26+
body::-webkit-scrollbar-thumb {
27+
background-color: #798;
28+
border-radius: 20px;
29+
}
30+
31+
.navbar {
32+
color: black;
33+
background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 2px, transparent 2px, transparent 4px), linear-gradient(45deg, rgb(18, 105, 233), rgb(166, 255, 155));
34+
border-radius: 20px;
35+
height: 60px;
36+
display: flex;
37+
justify-content: center;
38+
align-items: center;
39+
font-size: 1.2rem;
40+
position: sticky;
41+
top: 0;
42+
z-index: 999;
43+
}
44+
45+
.navbar__container {
46+
display: flex;
47+
justify-content: space-between;
48+
height: 80px;
49+
z-index: 1;
50+
width: 100%;
51+
max-width: 1300px;
52+
margin: 0 auto;
53+
padding: 0 50px;
54+
}
55+
56+
#navbar__logo {
57+
background-color: #ff8177;
58+
background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
59+
background-size: 100%;
60+
-webkit-background-clip: text;
61+
-moz-background-clip: text;
62+
-webkit-text-fill-color: transparent;
63+
-moz-text-fill-color: transparent;
64+
display: flex;
65+
align-items: center;
66+
cursor: pointer;
67+
text-decoration: none;
68+
font-size: 2rem;
69+
}
70+
71+
.navbar__menu {
72+
display: flex;
73+
align-items: center;
74+
list-style: none;
75+
}
76+
77+
.navbar__item {
78+
height: 80px;
79+
}
80+
81+
.navbar__links {
82+
color: #111;
83+
display: flex;
84+
align-items: center;
85+
justify-content: center;
86+
width: 125px;
87+
text-decoration: none;
88+
height: 100%;
89+
transition: all 0.3s ease;
90+
}
91+
92+
.navbar__btn {
93+
display: flex;
94+
justify-content: center;
95+
align-items: center;
96+
padding: 0 1rem;
97+
}
98+
99+
.button {
100+
display: flex;
101+
justify-content: center;
102+
align-items: center;
103+
text-decoration: none;
104+
padding: 10px 20px;
105+
height: 100%;
106+
width: 100%;
107+
border: none;
108+
outline: none;
109+
border-radius: 4px;
110+
background: #833ab4;
111+
background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
112+
background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
113+
color: #fff;
114+
transition: all 0.3s ease;
115+
}
116+
117+
.navbar__links:hover {
118+
color: #9518fc;
119+
transition: all 0.3s ease;
120+
}
121+
122+
@media screen and (max-width: 960px) {
123+
.navbar__container {
124+
display: flex;
125+
justify-content: space-between;
126+
height: 80px;
127+
z-index: 1;
128+
width: 100%;
129+
max-width: 1300px;
130+
padding: 0;
131+
}
132+
133+
.navbar__menu {
134+
display: grid;
135+
grid-template-columns: auto;
136+
margin: 0;
137+
width: 100%;
138+
position: absolute;
139+
top: -1000px;
140+
opacity: 1;
141+
transition: all 0.5s ease;
142+
z-index: -1;
143+
}
144+
145+
.navbar__menu.active {
146+
background: #fff;
147+
top: 100%;
148+
opacity: 1;
149+
transition: all 0.5s ease;
150+
z-index: 99;
151+
height: 60vh;
152+
font-size: 1.6rem;
153+
}
154+
155+
#navbar__logo {
156+
padding-left: 25px;
157+
}
158+
159+
.navbar__toggle .bar {
160+
width: 25px;
161+
height: 3px;
162+
margin: 5px auto;
163+
transition: all 0.3s ease-in-out;
164+
background: #fff;
165+
}
166+
167+
.navbar__item {
168+
width: 100%;
169+
}
170+
171+
.navbar__links {
172+
text-align: center;
173+
padding: 2rem;
174+
width: 100%;
175+
display: table;
176+
}
177+
178+
.navbar__btn {
179+
padding-bottom: 2rem;
180+
}
181+
182+
.button {
183+
display: flex;
184+
justify-content: center;
185+
align-items: center;
186+
width: 80%;
187+
height: 80px;
188+
margin: 0;
189+
}
190+
191+
#mobile-menu {
192+
position: absolute;
193+
top: 20%;
194+
right: 5%;
195+
transform: translate(5%, 20%);
196+
}
197+
198+
.navbar__toggle .bar {
199+
display: block;
200+
cursor: pointer;
201+
}
202+
203+
#mobile-menu.is-active .bar:nth-child(2) {
204+
opacity: 0;
205+
}
206+
207+
#mobile-menu.is-active .bar:nth-child(1) {
208+
transform: translateY(8px) rotate(45deg);
209+
}
210+
211+
#mobile-menu.is-active .bar:nth-child(3) {
212+
transform: translateY(-8px) rotate(-45deg);
213+
}
214+
}
215+
216+
section {
217+
border-radius: 20px;
218+
position: relative;
219+
width: 100%;
220+
height: 100vh;
221+
display: flex;
222+
justify-content: space-between;
223+
align-items: flex-start;
224+
padding: 100px;
225+
box-sizing: border-box;
226+
background:url(decidebg.png);
227+
background-size: 100% 100%;
228+
background-blend-mode: soft-light;
229+
}
230+
231+
section .content {
232+
max-width: 700px;
233+
}
234+
235+
section button {
236+
cursor: pointer;
237+
color: white;
238+
background-color: #111;
239+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='30' viewBox='0 0 1000 120'%3E%3Cg fill='none' stroke='%23222' stroke-width='10' %3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3C/g%3E%3C/svg%3E");
240+
padding: 12px 12px;
241+
border-radius: 20px;
242+
border: none;
243+
outline: none;
244+
transition: 0.3s ease;
245+
z-index: 999;
246+
}
247+
248+
section button:hover {
249+
background-color: #00bb77;
250+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpolygon fill='%23000' fill-opacity='.1' points='120 0 120 60 90 30 60 0 0 0 0 0 60 60 0 120 60 120 90 90 120 60 120 0'/%3E%3C/svg%3E");
251+
}
252+
253+
section img {
254+
position: relative;
255+
max-width: 320px;
256+
z-index: 1
257+
}
258+
section h1{
259+
font-family: 'Nova Flat', cursive;
260+
margin: 1px;
261+
padding: 2px 2px;
262+
font-weight: 5000;
263+
font-size: 4vw;
264+
}
265+
266+
.wave {
267+
position: absolute;
268+
bottom: 0;
269+
left: 0;
270+
}

0 commit comments

Comments
 (0)