├── index.html
├── main.js
└── styles.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 |
12 |
13 |
14 | Responsive Sidebar
15 |
16 |
17 |
67 |
68 |
69 |
79 |
80 |
83 |
84 |
87 |
88 |
91 |
92 |
95 |
96 |
99 |
100 |
101 |
102 |
103 |
104 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | const headerToggle = document.getElementById("header-toggle"),
2 | main = document.getElementById("main"),
3 | navClose = document.getElementById("nav-close");
4 |
5 | if (headerToggle) {
6 | headerToggle.addEventListener("click", () => {
7 | main.classList.add("show-menu");
8 | });
9 | }
10 |
11 | if (navClose) {
12 | navClose.addEventListener("click", () => {
13 | main.classList.remove("show-menu");
14 | });
15 | }
16 |
17 | const navLink = document.querySelectorAll(".nav-link");
18 |
19 | function linkAction() {
20 | const main = document.getElementById("main");
21 | main.classList.remove("show-menu");
22 | }
23 | navLink.forEach((n) => n.addEventListener("click", linkAction));
24 |
25 | function scrollHeader() {
26 | const header = document.getElementById("header");
27 | if (this.scrollY >= 50) header.classList.add("scroll-header");
28 | else header.classList.remove("scroll-header");
29 | }
30 | window.addEventListener("scroll", scrollHeader);
31 |
32 | const sections = document.querySelectorAll("section[id]");
33 |
34 | function scrollActive() {
35 | const scrollY = window.pageYOffset;
36 |
37 | sections.forEach((current) => {
38 | const sectionHeight = current.offsetHeight,
39 | sectionTop = current.offsetTop - 58,
40 | sectionId = current.getAttribute("id");
41 |
42 | if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
43 | document
44 | .querySelector(".nav-menu a[href*=" + sectionId + "]")
45 | .classList.add("active-link");
46 | } else {
47 | document
48 | .querySelector(".nav-menu a[href*=" + sectionId + "]")
49 | .classList.remove("active-link");
50 | }
51 | });
52 | }
53 | window.addEventListener("scroll", scrollActive);
54 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
2 |
3 | :root {
4 | --header-height: 3.5rem;
5 | --first-color: #482ef9;
6 | --first-color-shape: #467aec;
7 | --title-color: #191e3c;
8 | --text-color: #2d2d45;
9 | --body-color: #fcfcfc;
10 | --container-color: #fff;
11 | --title-color-dark: #f7fbfc;
12 | --text-color-dark: #8b9bb0;
13 | --container-color-dark: #041951;
14 |
15 | --body-font: "Poppins", sans-serif;
16 | --big-font-size: 1.5rem;
17 | --normal-font-size: 0.938rem;
18 | --small-font-size: 0.813rem;
19 | --z-fixed: 100;
20 | }
21 |
22 | @media screen and (min-width: 968px) {
23 | :root {
24 | --big-font-size: 2rem;
25 | --normal-font-size: 1rem;
26 | --small-font-size: 0.875rem;
27 | }
28 | }
29 |
30 | * {
31 | box-sizing: border-box;
32 | padding: 0;
33 | margin: 0;
34 | }
35 |
36 | html {
37 | scroll-behavior: smooth;
38 | overflow-x: hidden;
39 | }
40 |
41 | body {
42 | font-family: var(--body-font);
43 | font-size: var(--normal-font-size);
44 | color: var(--text-color);
45 | overflow-x: hidden;
46 | }
47 |
48 | h1,
49 | h2,
50 | h3 {
51 | color: var(--title-color);
52 | }
53 |
54 | ul {
55 | list-style: none;
56 | }
57 |
58 | a {
59 | text-decoration: none;
60 | }
61 |
62 | img {
63 | width: 100%;
64 | height: 100%;
65 | object-fit: cover;
66 | }
67 |
68 | .container {
69 | max-width: 1024px;
70 | }
71 |
72 | .section {
73 | padding: 4.5rem 0 1rem;
74 | display: flex;
75 | align-items: center;
76 | justify-content: center;
77 | }
78 |
79 | .section-height {
80 | height: 100vh;
81 | }
82 |
83 | .nav {
84 | background-color: var(--container-color-dark);
85 | padding-top: 2rem;
86 | position: fixed;
87 | top: 0;
88 | left: 0;
89 | width: 100%;
90 | height: 100vh;
91 | }
92 |
93 | .nav-shape {
94 | width: 200px;
95 | height: 200px;
96 | background-color: var(--first-color-shape);
97 | border-radius: 50%;
98 | position: absolute;
99 | top: -3rem;
100 | left: -2rem;
101 | filter: blur(90px);
102 | }
103 |
104 | .nav-close {
105 | position: relative;
106 | display: inline-flex;
107 | font-size: 1.8rem;
108 | color: var(--text-color-dark);
109 | cursor: pointer;
110 | margin-bottom: 3.5rem;
111 | }
112 |
113 | .nav-img {
114 | width: 100px;
115 | height: 100px;
116 | border-radius: 50%;
117 | }
118 |
119 | .nav-mask {
120 | width: 80px;
121 | height: 80px;
122 | border-radius: 1.5rem;
123 | overflow: hidden;
124 | display: flex;
125 | justify-content: center;
126 | margin-bottom: 1rem;
127 | object-fit: cover;
128 | }
129 |
130 | .nav-data {
131 | position: relative;
132 | margin-bottom: 3rem;
133 | }
134 |
135 | .nav-container {
136 | padding-left: 2rem;
137 | }
138 |
139 | .nav-greeting {
140 | display: block;
141 | color: var(--text-color-dark);
142 | font-size: var(--small-font-size);
143 | font-weight: 500;
144 | margin-bottom: 0.25rem;
145 | }
146 |
147 | .nav-name {
148 | color: var(--title-color-dark);
149 | font-size: var(--big-font-size);
150 | line-height: 130%;
151 | }
152 |
153 | .nav-list {
154 | display: flex;
155 | flex-direction: column;
156 | row-gap: 1.5rem;
157 | }
158 |
159 | .nav-link {
160 | color: var(--text-color-dark);
161 | display: inline-flex;
162 | align-items: center;
163 | column-gap: 1rem;
164 | font-size: var(--small-font-size);
165 | font-weight: 500;
166 | transition: 0.3s;
167 | }
168 |
169 | .nav-link i {
170 | font-size: 1.15rem;
171 | }
172 |
173 | .nav-link:hover {
174 | color: var(--title-color-dark);
175 | }
176 |
177 | .main {
178 | position: relative;
179 | background-color: var(--body-color);
180 | transition: 0.4s;
181 | }
182 |
183 | .header {
184 | width: 100%;
185 | background-color: var(--body-color);
186 | position: fixed;
187 | top: 0;
188 | left: 0;
189 | z-index: var(--z-fixed);
190 | }
191 |
192 | .header-nav {
193 | height: var(--header-height);
194 | display: flex;
195 | justify-content: space-between;
196 | align-items: center;
197 | }
198 |
199 | .header-logo,
200 | .header-toggle {
201 | color: var(--title-color);
202 | font-size: var(--big-font-size);
203 | line-height: 130%;
204 | }
205 |
206 | .header-logo {
207 | font-weight: 500;
208 | }
209 |
210 | .header-toggle {
211 | font-size: 1.15rem;
212 | cursor: pointer;
213 | }
214 |
215 | .show-menu {
216 | transform: translate(70%);
217 | }
218 |
219 | .scroll-header {
220 | box-shadow: 0 1px 4px rgba(40, 37, 37, 0.1);
221 | }
222 |
223 | .active-link {
224 | color: var(--title-color-dark);
225 | }
226 |
227 | @media screen and (max-width: 320px) {
228 | .container {
229 | margin-left: 1rem;
230 | margin-right: 1rem;
231 | }
232 | }
233 |
234 | @media screen and (min-width: 767px) {
235 | .show-menu {
236 | transform: translate(25%);
237 | }
238 | }
239 |
240 | @media screen and (min-width: 1024px) {
241 | .container {
242 | margin-left: auto;
243 | margin-right: auto;
244 | }
245 | .section {
246 | padding: 7rem 0 2rem;
247 | }
248 | .header-nav {
249 | height: calc(var(--header-height) + 1.5rem);
250 | }
251 | .nav-shape {
252 | width: 350px;
253 | height: 350px;
254 | }
255 | .nav-mask {
256 | width: 100px;
257 | height: 100px;
258 | border-radius: 2rem;
259 | margin-bottom: 2rem;
260 | }
261 | .nav-img {
262 | width: 100px;
263 | border-radius: 50%;
264 | }
265 | .nav-link {
266 | font-size: var(--normal-font-size);
267 | }
268 | .nav-link i {
269 | font-size: 1.25rem;
270 | }
271 | }
272 |
--------------------------------------------------------------------------------