├── .gitignore
├── app.js
├── img
    ├── blog1.jpg
    ├── blog2.jpg
    ├── blog3.jpg
    ├── hero.png
    ├── port1.jpg
    ├── port2.jpg
    ├── port3.jpg
    ├── port4.jpg
    ├── port5.jpg
    ├── port6.jpg
    └── port7.jpg
├── index.html
└── styles
    ├── _media.scss
    ├── styles.css
    ├── styles.css.map
    └── styles.scss


/.gitignore:
--------------------------------------------------------------------------------
1 | # PHPStorm
2 | .idea


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | (function () {
 2 |     [...document.querySelectorAll(".control")].forEach(button => {
 3 |         button.addEventListener("click", function() {
 4 |             document.querySelector(".active-btn").classList.remove("active-btn");
 5 |             this.classList.add("active-btn");
 6 |             document.querySelector(".active").classList.remove("active");
 7 |             document.getElementById(button.dataset.id).classList.add("active");
 8 |         })
 9 |     });
10 |     document.querySelector(".theme-btn").addEventListener("click", () => {
11 |         document.body.classList.toggle("light-mode");
12 |     })
13 | })();
14 | 


--------------------------------------------------------------------------------
/img/blog1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maclinz/JS_CSS_PortfolioProject/d375f35c5ca3ef851695885207901fe9979290b1/img/blog1.jpg


--------------------------------------------------------------------------------
/img/blog2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maclinz/JS_CSS_PortfolioProject/d375f35c5ca3ef851695885207901fe9979290b1/img/blog2.jpg


--------------------------------------------------------------------------------
/img/blog3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maclinz/JS_CSS_PortfolioProject/d375f35c5ca3ef851695885207901fe9979290b1/img/blog3.jpg


--------------------------------------------------------------------------------
/img/hero.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maclinz/JS_CSS_PortfolioProject/d375f35c5ca3ef851695885207901fe9979290b1/img/hero.png


--------------------------------------------------------------------------------
/img/port1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maclinz/JS_CSS_PortfolioProject/d375f35c5ca3ef851695885207901fe9979290b1/img/port1.jpg


--------------------------------------------------------------------------------
/img/port2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maclinz/JS_CSS_PortfolioProject/d375f35c5ca3ef851695885207901fe9979290b1/img/port2.jpg


--------------------------------------------------------------------------------
/img/port3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maclinz/JS_CSS_PortfolioProject/d375f35c5ca3ef851695885207901fe9979290b1/img/port3.jpg


--------------------------------------------------------------------------------
/img/port4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maclinz/JS_CSS_PortfolioProject/d375f35c5ca3ef851695885207901fe9979290b1/img/port4.jpg


--------------------------------------------------------------------------------
/img/port5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maclinz/JS_CSS_PortfolioProject/d375f35c5ca3ef851695885207901fe9979290b1/img/port5.jpg


--------------------------------------------------------------------------------
/img/port6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maclinz/JS_CSS_PortfolioProject/d375f35c5ca3ef851695885207901fe9979290b1/img/port6.jpg


--------------------------------------------------------------------------------
/img/port7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maclinz/JS_CSS_PortfolioProject/d375f35c5ca3ef851695885207901fe9979290b1/img/port7.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  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>Portfolio</title>
  8 |     <link rel="stylesheet" href="styles/styles.css">
  9 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 10 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 11 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 12 |     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 13 | </head>
 14 | <body class="main-content">
 15 |     <header class="container header active" id="home">
 16 |         <div class="header-content">
 17 |             <div class="left-header">
 18 |                 <div class="h-shape"></div>
 19 |                 <div class="image">
 20 |                     <img src="img/hero.png" alt="">
 21 |                 </div>
 22 |             </div>
 23 |             <div class="right-header">
 24 |                 <h1 class="name">
 25 |                     Hi, I'm <span>Solano Milan Diaz.</span>
 26 |                     A Web Developer.
 27 |                 </h1>
 28 |                 <p>
 29 |                     I'm a Web Developer, I love to create beautiful and functional websites.
 30 |                     Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, libero?
 31 |                     Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque blanditiis sed aut!
 32 |                 </p>
 33 |                 <div class="btn-con">
 34 |                     <a href="" class="main-btn">
 35 |                         <span class="btn-text">Download CV</span>
 36 |                         <span class="btn-icon"><i class="fas fa-download"></i></span>
 37 |                     </a>
 38 |                 </div>
 39 |             </div>
 40 |         </div>
 41 |     </header>
 42 |     <main>
 43 |         <section class="container about" id="about">
 44 |             <div class="main-title">
 45 |                 <h2>About <span>me</span><span class="bg-text">my stats</span></h2>
 46 |             </div>
 47 |             <div class="about-container">
 48 |                 <div class="left-about">
 49 |                     <h4>Information About me</h4>
 50 |                     <p>
 51 |                         Lorem ipsum dolor sit amet consectetur adipisicing elit. 
 52 |                         Eveniet labore nihil obcaecati consequatur. Debitis error doloremque, 
 53 |                         vero eos vel nemo eius voluptatem dicta tenetur modi. <br /> <br /> La musica
 54 |                         delectus dolore fugiat exercitationem a, 
 55 |                         ipsum quidem quo enim natus accusamus labore dolores nam. Unde.
 56 |                         Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
 57 |                         Harum non necessitatibus deleniti eum soluta.
 58 |                     </p>
 59 |                     <div class="btn-con">
 60 |                         <a href="#" class="main-btn">
 61 |                             <span class="btn-text">Download CV</span>
 62 |                             <span class="btn-icon"><i class="fas fa-download"></i></span>
 63 |                         </a>
 64 |                     </div>
 65 |                 </div>
 66 |                 <div class="right-about">
 67 |                     <div class="about-item">
 68 |                         <div class="abt-text">
 69 |                             <p class="large-text">650+</p>
 70 |                             <p class="small-text">Projects <br /> Completed</p>
 71 |                         </div>
 72 |                     </div>
 73 |                     <div class="about-item">
 74 |                         <div class="abt-text">
 75 |                             <p class="large-text">10+</p>
 76 |                             <p class="small-text">Years of <br /> experience</p>
 77 |                         </div>
 78 |                     </div>
 79 |                     <div class="about-item">
 80 |                         <div class="abt-text">
 81 |                             <p class="large-text">300+</p>
 82 |                             <p class="small-text">Happy <br /> Clients</p>
 83 |                         </div>
 84 |                     </div>
 85 |                     <div class="about-item">
 86 |                         <div class="abt-text">
 87 |                             <p class="large-text">400+</p>
 88 |                             <p class="small-text">Customer <br /> reviews</p>
 89 |                         </div>
 90 |                     </div>
 91 |                 </div>
 92 |             </div>
 93 |             <div class="about-stats">
 94 |                 <h4 class="stat-title">My Skills</h4>
 95 |                 <div class="progress-bars">
 96 |                     <div class="progress-bar">
 97 |                         <p class="prog-title">html5</p>
 98 |                         <div class="progress-con">
 99 |                             <p class="prog-text">80%</p>
100 |                             <div class="progress">
101 |                                 <span class="html"></span>
102 |                             </div>
103 |                         </div>
104 |                     </div>
105 |                     <div class="progress-bar">
106 |                         <p class="prog-title">css3</p>
107 |                         <div class="progress-con">
108 |                             <p class="prog-text">95%</p>
109 |                             <div class="progress">
110 |                                 <span class="css"></span>
111 |                             </div>
112 |                         </div>
113 |                     </div>
114 |                     <div class="progress-bar">
115 |                         <p class="prog-title">javascript</p>
116 |                         <div class="progress-con">
117 |                             <p class="prog-text">75%</p>
118 |                             <div class="progress">
119 |                                 <span class="js"></span>
120 |                             </div>
121 |                         </div>
122 |                     </div>
123 |                     <div class="progress-bar">
124 |                         <p class="prog-title">ReactJS</p>
125 |                         <div class="progress-con">
126 |                             <p class="prog-text">75%</p>
127 |                             <div class="progress">
128 |                                 <span class="react"></span>
129 |                             </div>
130 |                         </div>
131 |                     </div>
132 |                     <div class="progress-bar">
133 |                         <p class="prog-title">NodeJS</p>
134 |                         <div class="progress-con">
135 |                             <p class="prog-text">87%</p>
136 |                             <div class="progress">
137 |                                 <span class="node"></span>
138 |                             </div>
139 |                         </div>
140 |                     </div>
141 |                     <div class="progress-bar">
142 |                         <p class="prog-title">Python</p>
143 |                         <div class="progress-con">
144 |                             <p class="prog-text">70%</p>
145 |                             <div class="progress">
146 |                                 <span class="python"></span>
147 |                             </div>
148 |                         </div>
149 |                     </div>
150 |                 </div>
151 |             </div>
152 |             <h4 class="stat-title">My Timeline</h4>
153 |             <div class="timeline">
154 |                 <div class="timeline-item">
155 |                     <div class="tl-icon">
156 |                         <i class="fas fa-briefcase"></i>
157 |                     </div>
158 |                     <p class="tl-duration">2010 - present</p>
159 |                     <h5>Web Developer<span> - Vircrosoft</span></h5>
160 |                     <p>
161 |                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
162 |                     </p>
163 |                 </div>
164 |                 <div class="timeline-item">
165 |                     <div class="tl-icon">
166 |                         <i class="fas fa-briefcase"></i>
167 |                     </div>
168 |                     <p class="tl-duration">2008 - 2011</p>
169 |                     <h5>Software Engineer<span> - Boogle, Inc.</span></h5>
170 |                     <p>
171 |                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
172 |                     </p>
173 |                 </div>
174 |                 <div class="timeline-item">
175 |                     <div class="tl-icon">
176 |                         <i class="fas fa-briefcase"></i>
177 |                     </div>
178 |                     <p class="tl-duration">2016 - 2017</p>
179 |                     <h5>C++ Programmer<span> - Slime Tech</span></h5>
180 |                     <p>
181 |                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
182 |                     </p>
183 |                 </div>
184 |                 <div class="timeline-item">
185 |                     <div class="tl-icon">
186 |                         <i class="fas fa-briefcase"></i>
187 |                     </div>
188 |                     <p class="tl-duration">2009 - 2013</p>
189 |                     <h5>Business Degree<span> - Sussex University</span></h5>
190 |                     <p>
191 |                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
192 |                     </p>
193 |                 </div>
194 |                 <div class="timeline-item">
195 |                     <div class="tl-icon">
196 |                         <i class="fas fa-briefcase"></i>
197 |                     </div>
198 |                     <p class="tl-duration">2013 - 2016</p>
199 |                     <h5>Computer Science Degree<span> - Brookes University</span></h5>
200 |                     <p>
201 |                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
202 |                     </p>
203 |                 </div>
204 |                 <div class="timeline-item">
205 |                     <div class="tl-icon">
206 |                         <i class="fas fa-briefcase"></i>
207 |                     </div>
208 |                     <p class="tl-duration">2017 - present</p>
209 |                     <h5>3d Animation<span> - Brighton University</span></h5>
210 |                     <p>
211 |                         Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
212 |                     </p>
213 |                 </div>
214 |             </div>
215 |         </section>
216 |         <section class="container" id="portfolio">
217 |             <div class="main-title">
218 |                 <h2>My <span>Portfolio</span><span class="bg-text">My Work</span></h2>
219 |             </div>
220 |             <p class="port-text">
221 |                 Here is some of my work that I've done in various programming languages.
222 |             </p>
223 |             <div class="portfolios">
224 |                 <div class="portfolio-item">
225 |                     <div class="image">
226 |                         <img src="img/port1.jpg" alt="">
227 |                     </div>
228 |                     <div class="hover-items">
229 |                         <h3>Project Source</h3>
230 |                         <div class="icons">
231 |                             <a href="#" class="icon">
232 |                                 <i class="fab fa-github"></i>
233 |                             </a>
234 |                             <a href="#" class="icon">
235 |                                 <i class="fab fa-behance"></i>
236 |                             </a>
237 |                             <a href="#" class="icon">
238 |                                 <i class="fab fa-youtube"></i>
239 |                             </a>
240 |                         </div>
241 |                     </div>
242 |                 </div>
243 |                 <div class="portfolio-item">
244 |                     <div class="image">
245 |                         <img src="img/port2.jpg" alt="">
246 |                     </div>
247 |                     <div class="hover-items">
248 |                         <h3>Project Source</h3>
249 |                         <div class="icons">
250 |                             <a href="#" class="icon">
251 |                                 <i class="fab fa-github"></i>
252 |                             </a>
253 |                             <a href="#" class="icon">
254 |                                 <i class="fab fa-behance"></i>
255 |                             </a>
256 |                             <a href="#" class="icon">
257 |                                 <i class="fab fa-youtube"></i>
258 |                             </a>
259 |                         </div>
260 |                     </div>
261 |                 </div>
262 |                 <div class="portfolio-item">
263 |                     <div class="image">
264 |                         <img src="img/port3.jpg" alt="">
265 |                     </div>
266 |                     <div class="hover-items">
267 |                         <h3>Project Source</h3>
268 |                         <div class="icons">
269 |                             <a href="#" class="icon">
270 |                                 <i class="fab fa-github"></i>
271 |                             </a>
272 |                             <a href="#" class="icon">
273 |                                 <i class="fab fa-behance"></i>
274 |                             </a>
275 |                             <a href="#" class="icon">
276 |                                 <i class="fab fa-youtube"></i>
277 |                             </a>
278 |                         </div>
279 |                     </div>
280 |                 </div>
281 |                 <div class="portfolio-item">
282 |                     <div class="image">
283 |                         <img src="img/port4.jpg" alt="">
284 |                     </div>
285 |                     <div class="hover-items">
286 |                         <h3>Project Source</h3>
287 |                         <div class="icons">
288 |                             <a href="#" class="icon">
289 |                                 <i class="fab fa-github"></i>
290 |                             </a>
291 |                             <a href="#" class="icon">
292 |                                 <i class="fab fa-behance"></i>
293 |                             </a>
294 |                             <a href="#" class="icon">
295 |                                 <i class="fab fa-youtube"></i>
296 |                             </a>
297 |                         </div>
298 |                     </div>
299 |                 </div>
300 |                 <div class="portfolio-item">
301 |                     <div class="image">
302 |                         <img src="img/port5.jpg" alt="">
303 |                     </div>
304 |                     <div class="hover-items">
305 |                         <h3>Project Source</h3>
306 |                         <div class="icons">
307 |                             <a href="#" class="icon">
308 |                                 <i class="fab fa-github"></i>
309 |                             </a>
310 |                             <a href="#" class="icon">
311 |                                 <i class="fab fa-behance"></i>
312 |                             </a>
313 |                             <a href="#" class="icon">
314 |                                 <i class="fab fa-youtube"></i>
315 |                             </a>
316 |                         </div>
317 |                     </div>
318 |                 </div>
319 |                 <div class="portfolio-item">
320 |                     <div class="image">
321 |                         <img src="img/port2.jpg" alt="">
322 |                     </div>
323 |                     <div class="hover-items">
324 |                         <h3>Project Source</h3>
325 |                         <div class="icons">
326 |                             <a href="#" class="icon">
327 |                                 <i class="fab fa-github"></i>
328 |                             </a>
329 |                             <a href="#" class="icon">
330 |                                 <i class="fab fa-behance"></i>
331 |                             </a>
332 |                             <a href="#" class="icon">
333 |                                 <i class="fab fa-youtube"></i>
334 |                             </a>
335 |                         </div>
336 |                     </div>
337 |                 </div>
338 |                 <div class="portfolio-item">
339 |                     <div class="image">
340 |                         <img src="img/port7.jpg" alt="">
341 |                     </div>
342 |                     <div class="hover-items">
343 |                         <h3>Project Source</h3>
344 |                         <div class="icons">
345 |                             <a href="#" class="icon">
346 |                                 <i class="fab fa-github"></i>
347 |                             </a>
348 |                             <a href="#" class="icon">
349 |                                 <i class="fab fa-behance"></i>
350 |                             </a>
351 |                             <a href="#" class="icon">
352 |                                 <i class="fab fa-youtube"></i>
353 |                             </a>
354 |                         </div>
355 |                     </div>
356 |                 </div>
357 |             </div>
358 |         </section>
359 |         <section class="container" id="blogs">
360 |             <div class="blogs-content">
361 |                 <div class="main-title">
362 |                     <h2>My <span>Blogs</span><span class="bg-text">My Blogs</span></h2>
363 |                 </div>
364 |                 <div class="blogs">
365 |                     <div class="blog">
366 |                         <img src="img/port6.jpg" alt="">
367 |                         <div class="blog-text">
368 |                             <h4>
369 |                                 How to Create Your Own Website
370 |                             </h4>
371 |                             <p>
372 |                                 Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
373 |                                 Doloribus natus voluptas, eos obcaecati recusandae amet?
374 |                             </p>
375 |                         </div>
376 |                     </div>
377 |                     <div class="blog">
378 |                         <img src="img/blog1.jpg" alt="">
379 |                         <div class="blog-text">
380 |                             <h4>
381 |                                 How to Become an Expert in Web Design
382 |                             </h4>
383 |                             <p>
384 |                                 Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
385 |                                 Doloribus natus voluptas, eos obcaecati recusandae amet?
386 |                             </p>
387 |                         </div>
388 |                     </div>
389 |                     <div class="blog">
390 |                         <img src="img/blog2.jpg" alt="">
391 |                         <div class="blog-text">
392 |                             <h4>
393 |                                 Become a Web Designer in 10 Days
394 |                             </h4>
395 |                             <p>
396 |                                 Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
397 |                                 Doloribus natus voluptas, eos obcaecati recusandae amet?
398 |                             </p>
399 |                         </div>
400 |                     </div>
401 |                     <div class="blog">
402 |                         <img src="img/blog3.jpg" alt="">
403 |                         <div class="blog-text">
404 |                             <h4>
405 |                                 Debbuging made easy with Web Inspector
406 |                             </h4>
407 |                             <p>
408 |                                 Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
409 |                                 Doloribus natus voluptas, eos obcaecati recusandae amet?
410 |                             </p>
411 |                         </div>
412 |                     </div>
413 |                     <div class="blog">
414 |                         <img src="img/port1.jpg" alt="">
415 |                         <div class="blog-text">
416 |                             <h4>
417 |                                 Get started with Web Design and UI Design
418 |                             </h4>
419 |                             <p>
420 |                                 Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
421 |                                 Doloribus natus voluptas, eos obcaecati recusandae amet?
422 |                             </p>
423 |                         </div>
424 |                     </div>
425 |                     <div class="blog">
426 |                         <img src="img/port3.jpg" alt="">
427 |                         <div class="blog-text">
428 |                             <h4>
429 |                                 This is what you need to know about Web Design
430 |                             </h4>
431 |                             <p>
432 |                                 Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
433 |                                 Doloribus natus voluptas, eos obcaecati recusandae amet?
434 |                             </p>
435 |                         </div>
436 |                     </div>
437 |                 </div>
438 |             </div>
439 |         </section>
440 |         <section class="container contact" id="contact">
441 |             <div class="contact-container">
442 |                 <div class="main-title">
443 |                     <h2>Contact <span>Me</span><span class="bg-text">Contact</span></h2>
444 |                 </div>
445 |                 <div class="contact-content-con">
446 |                     <div class="left-contact">
447 |                         <h4>Contact me here</h4>
448 |                         <p>
449 |                             Lorem ipsum dolor sit amet consectetur adipisicing elit. 
450 |                             In, laborum numquam? Quam excepturi perspiciatis quas quasi.
451 |                         </p>
452 |                         <div class="contact-info">
453 |                             <div class="contact-item">
454 |                                 <div class="icon">
455 |                                     <i class="fas fa-map-marker-alt"></i>
456 |                                     <span>Location</span>
457 |                                 </div>
458 |                                 <p>
459 |                                     : London, united Kingdom
460 |                                 </p>
461 |                             </div>
462 |                             <div class="contact-item">
463 |                                 <div class="icon">
464 |                                     <i class="fas fa-envelope"></i>
465 |                                     <span>Email</span>
466 |                                 </div>
467 |                                 <p>
468 |                                     <span>: maclinzuniversal@gmail.com</span>
469 |                                 </p>
470 |                             </div>
471 |                             <div class="contact-item">
472 |                                 <div class="icon">
473 |                                     <i class="fas fa-user-graduate"></i>
474 |                                     <span>Education</span>
475 |                                 </div>
476 |                                 <p>
477 |                                     <span>: Sussex University, East Sussex</span>
478 |                                 </p>
479 |                             </div>
480 |                             <div class="contact-item">
481 |                                 <div class="icon">
482 |                                     <i class="fas fa-user-graduate"></i>
483 |                                     <span>Mobile Number</span>
484 |                                 </div>
485 |                                 <p>
486 |                                     <span>: 07522670617</span>
487 |                                 </p>
488 |                             </div>
489 |                             <div class="contact-item">
490 |                                 <div class="icon">
491 |                                     <i class="fas fa-globe-africa"></i>
492 |                                     <span>Languages</span>
493 |                                 </div>
494 |                                 <p>
495 |                                     <span>: Afrikaans, English, Spanish</span>
496 |                                 </p>
497 |                             </div>
498 |                         </div>
499 |                         <div class="contact-icons">
500 |                             <div class="contact-icon">
501 |                                 <a href="www.facebook.com" target="_blank">
502 |                                     <i class="fab fa-facebook-f"></i>
503 |                                 </a>
504 |                                 <a href="#" target="_blank">
505 |                                     <i class="fab fa-twitter"></i>
506 |                                 </a>
507 |                                 <a href="#" target="_blank">
508 |                                     <i class="fab fa-github"></i>
509 |                                 </a>
510 |                                 <a href="#" target="_blank">
511 |                                     <i class="fab fa-youtube"></i>
512 |                                 </a>
513 |                             </div>
514 |                         </div>
515 |                     </div>
516 |                     <div class="right-contact">
517 |                         <form action="" class="contact-form">
518 |                             <div class="input-control i-c-2">
519 |                                 <input type="text" required placeholder="YOUR NAME">
520 |                                 <input type="email" required placeholder="YOUR EMAIL">
521 |                             </div>
522 |                             <div class="input-control">
523 |                                 <input type="text" required placeholder="ENTER SUBJECT">
524 |                             </div>
525 |                             <div class="input-control">
526 |                                 <textarea name="" id="" cols="15" rows="8" placeholder="Message Here..."></textarea>
527 |                             </div>
528 |                             <div class="submit-btn">
529 |                                 <a href="#" class="main-btn">
530 |                                     <span class="btn-text">Download CV</span>
531 |                                     <span class="btn-icon"><i class="fas fa-download"></i></span>
532 |                                 </a>
533 |                             </div>
534 |                         </form>
535 |                     </div>
536 |                 </div>
537 |             </div>
538 |         </section>
539 |     </main>
540 | 
541 |     <div class="controls">
542 |         <div class="control active-btn" data-id="home" >
543 |             <i class="fas fa-home"></i>
544 |         </div>
545 |         <div class="control" data-id="about">
546 |             <i class="fas fa-user"></i>
547 |         </div>
548 |         <div class="control" data-id="portfolio">
549 |             <i class="fas fa-briefcase"></i>
550 |         </div>
551 |         <div class="control" data-id="blogs">
552 |             <i class="far fa-newspaper"></i>
553 |         </div>
554 |         <div class="control" data-id="contact">
555 |             <i class="fas fa-envelope-open"></i>
556 |         </div>
557 |     </div>
558 |     <div class="theme-btn">
559 |         <i class="fas fa-adjust"></i>
560 |     </div>
561 |     <script src="app.js"></script>
562 | </body>
563 | </html>


--------------------------------------------------------------------------------
/styles/_media.scss:
--------------------------------------------------------------------------------
  1 | .about-container .left-about p{
  2 |     padding-left: 0;
  3 | }
  4 | 
  5 | @media screen and (max-width: 600px) {
  6 |     header{
  7 |         padding: 0 !important;
  8 |     }
  9 |     .theme-btn{
 10 |         width: 50px;
 11 |         height: 50px;
 12 |     }
 13 |     .header-content{
 14 |         grid-template-columns: repeat(1, 1fr);
 15 |         padding-bottom: 6rem;
 16 |     }
 17 | 
 18 |     .left-header{
 19 |         .h-shape{
 20 |             display: none;
 21 |         }
 22 |     }
 23 |     .right-header{
 24 |         grid-row: 1;
 25 |         padding-right: 0rem !important;
 26 |         width: 90%;
 27 |         margin: 0 auto;
 28 |         .name{
 29 |             font-size: 2.5rem !important;
 30 |             text-align: center;
 31 |             padding-top: 3rem;
 32 |         }
 33 |     }
 34 |     .header-content .left-header .image{
 35 |         margin: 0 auto;
 36 |         width: 90%;
 37 |     }
 38 | 
 39 |     .controls{
 40 |         top: auto;
 41 |         bottom: 0;
 42 |         flex-direction: row;
 43 |         justify-content: center;
 44 |         left: 50%;
 45 |         transform: translateX(-50%);
 46 |         width: 100%;
 47 |         background-color: var(--color-grey-5);
 48 |         .control{
 49 |             margin: 1rem .3rem;
 50 |         }
 51 |     }
 52 | 
 53 |     .about-container{
 54 |         grid-template-columns: repeat(1, 1fr);
 55 |         .right-about{
 56 |             grid-template-columns: repeat(1, 1fr);
 57 |             padding-top: 2.5rem;
 58 |         }
 59 |         .left-about{
 60 |             padding-right: 0;
 61 |             p{
 62 |                 padding-left: 0;
 63 |             }
 64 |         }
 65 |     }
 66 | 
 67 |     .timeline{
 68 |         grid-template-columns: repeat(1, 1fr);
 69 |         padding-bottom: 6rem;
 70 |     }
 71 | 
 72 |     .container{
 73 |         padding: 2rem 2.5rem !important;
 74 |     }
 75 | 
 76 |     .about-stats{
 77 |         .progress-bars{
 78 |             grid-template-columns: repeat(1, 1fr);
 79 |         }
 80 |     }
 81 | 
 82 |     .portfolios{
 83 |         grid-template-columns: repeat(1, 1fr);
 84 |         padding-bottom: 6rem;
 85 |         margin-top: 1rem;
 86 |     }
 87 | 
 88 |     .blogs{
 89 |         grid-template-columns: repeat(1, 1fr);
 90 |         padding-bottom: 6rem;
 91 |     }
 92 | 
 93 |     .contact-content-con{
 94 |         flex-direction: column;
 95 |         .right-contact{
 96 |             margin-left: 0;
 97 |             margin-top: 2.5rem;
 98 |         }
 99 |         
100 |     }
101 |     .contact-content-con .right-contact .i-c-2{
102 |         flex-direction: column;
103 |     }
104 |     .contact-content-con .right-contact .i-c-2 :last-child{
105 |         margin-left: 0;
106 |         margin-top: 1.5rem;
107 |     }
108 | 
109 |     .contact-content-con .right-contact{
110 |         margin-bottom: 6rem;
111 |     }
112 | 
113 |     .contact-item{
114 |         flex-direction: column;
115 |         margin: 1rem 0;
116 |         p{
117 |             font-size: 15px;
118 |             color: var(--color-grey-2);
119 |         }
120 |         span{
121 |             font-size: 15px;
122 |         }
123 |         .icon{
124 |             grid-template-columns: 25px 1fr;
125 |         }
126 |     }
127 | 
128 | 
129 |     .main-title{
130 |         h2{
131 |             font-size: 2rem;
132 |             span{
133 |                 font-size: 2.3rem;
134 |             }
135 |             .bg-text{
136 |                 font-size: 2.3rem;
137 |             }
138 |         }
139 |     }
140 | }
141 | 
142 | @media screen and (max-width:1432px){
143 |     .container{
144 |         padding: 7rem 11rem;
145 |     }
146 | 
147 |     .contact-content-con{
148 |         flex-direction: column;
149 |         .right-contact{
150 |             margin-left: 0;
151 |             margin-top: 2.5rem;
152 |         }
153 |         
154 |     }
155 |     .contact-content-con .right-contact .i-c-2{
156 |         flex-direction: column;
157 |     }
158 |     .contact-content-con .right-contact .i-c-2 :last-child{
159 |         margin-left: 0;
160 |         margin-top: 1.5rem;
161 |     }
162 | 
163 |     .contact-content-con .right-contact{
164 |         margin-bottom: 6rem;
165 |     }
166 | 
167 |     .main-title{
168 |         h2{
169 |             .bg-text{
170 |                 font-size: 5.5rem;
171 |             }
172 |         }
173 |     }
174 |     
175 | }
176 | 
177 | 
178 | 
179 | 
180 | @media screen and (max-width:1250px){
181 |     .blogs{
182 |         grid-template-columns: repeat(2, 1fr);
183 |         margin-top: 6rem;
184 |     }
185 |     .portfolios{
186 |         grid-template-columns: repeat(2, 1fr);
187 |     }
188 |     .header-content .right-header{
189 |         padding-right: 9rem;
190 |     }
191 | 
192 | }
193 | @media screen and (max-width:660px){
194 |     .blogs{
195 |         grid-template-columns: repeat(1, 1fr);
196 |     }
197 |     .portfolios{
198 |         grid-template-columns: repeat(1, 1fr);
199 |     }
200 | }
201 | 
202 | @media screen and (max-width:1070px){
203 |     .about-container{
204 |         grid-template-columns: repeat(1, 1fr);
205 |         .right-about{
206 |             padding-top: 2.5rem;
207 |         }
208 |     }
209 |     .main-title{
210 |         h2{
211 |             font-size: 4rem;
212 |             span{
213 |                 font-size: 4rem;
214 |             }
215 |             .bg-text{
216 |                 font-size: 4.5rem;
217 |             }
218 |         }
219 |     }
220 | }
221 | 
222 | @media screen and (max-width:970px){
223 |     .container{
224 |         padding: 7rem 6rem;
225 |     }
226 |     .about-container .left-about{
227 |         padding-right: 0rem;
228 |     }
229 |     .header-content{
230 |         grid-template-columns: repeat(1, 1fr);
231 |         padding-bottom: 6rem;
232 |     }
233 | 
234 |     .left-header{
235 |         .h-shape{
236 |             display: none;
237 |         }
238 |         .image{
239 |             width: 90% !important;
240 |             margin: 0 auto !important;
241 |             
242 |         }
243 |     }
244 |     .right-header{
245 |         grid-row: 1;
246 |         padding-right: 0rem !important;
247 |         width: 90%;
248 |         margin: 0 auto;
249 |         .name{
250 |             font-size: 2.5rem !important;
251 |             text-align: center;
252 |             padding-top: 3rem;
253 |         }
254 |     }
255 | }
256 | @media screen and (max-width:700px){
257 |     .container{
258 |         padding: 7rem 3rem;
259 |     }
260 |     .about-stats .progress-bars{
261 |         grid-template-columns: repeat(1, 1fr);
262 |     }
263 |     .about-container .right-about{
264 |         grid-template-columns: repeat(1, 1fr);
265 |     }
266 | 
267 |     .timeline{
268 |         grid-template-columns: repeat(1, 1fr);
269 |     }
270 |     .main-title{
271 |         h2{
272 |             font-size: 3rem;
273 |             span{
274 |                 font-size: 3rem;
275 |             }
276 |             .bg-text{
277 |                 font-size: 4rem;
278 |             }
279 |         }
280 |     }
281 | }


--------------------------------------------------------------------------------
/styles/styles.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   box-sizing: border-box;
  5 |   list-style: none;
  6 | }
  7 | 
  8 | :root {
  9 |   --color-primary: #191d2b;
 10 |   --color-secondary: #27AE60;
 11 |   --color-white: #FFFFFF;
 12 |   --color-black: #000;
 13 |   --color-grey0: #f8f8f8;
 14 |   --color-grey-1: #dbe1e8;
 15 |   --color-grey-2: #b2becd;
 16 |   --color-grey-3: #6c7983;
 17 |   --color-grey-4: #454e56;
 18 |   --color-grey-5: #2a2e35;
 19 |   --color-grey-6: #12181b;
 20 |   --br-sm-2: 14px;
 21 |   --box-shadow-1: 0 3px 15px rgba(0,0,0,.3);
 22 | }
 23 | 
 24 | .light-mode {
 25 |   --color-primary: #FFFFFF;
 26 |   --color-secondary: #F56692;
 27 |   --color-white: #454e56;
 28 |   --color-black: #000;
 29 |   --color-grey0: #f8f8f8;
 30 |   --color-grey-1: #6c7983;
 31 |   --color-grey-2: #6c7983;
 32 |   --color-grey-3: #6c7983;
 33 |   --color-grey-4: #454e56;
 34 |   --color-grey-5: #f8f8f8;
 35 |   --color-grey-6: #12181b;
 36 | }
 37 | 
 38 | body {
 39 |   background-color: var(--color-primary);
 40 |   font-family: "Poppins", sans-serif;
 41 |   font-size: 1.1rem;
 42 |   color: var(--color-white);
 43 |   transition: all 0.4s ease-in-out;
 44 | }
 45 | 
 46 | a {
 47 |   display: inline-block;
 48 |   text-decoration: none;
 49 |   color: inherit;
 50 |   font-family: inherit;
 51 | }
 52 | 
 53 | header {
 54 |   min-height: 100vh;
 55 |   color: var(--color-white);
 56 |   overflow: hidden;
 57 |   padding: 0 !important;
 58 | }
 59 | 
 60 | section {
 61 |   min-height: 100vh;
 62 |   width: 100%;
 63 |   position: absolute;
 64 |   left: 0;
 65 |   top: 0;
 66 |   padding: 3rem 18rem;
 67 | }
 68 | 
 69 | .container {
 70 |   display: none;
 71 |   transform: translateY(-100%) scale(0);
 72 |   transition: all 0.4s ease-in-out;
 73 |   background-color: var(--color-primary);
 74 | }
 75 | 
 76 | .active {
 77 |   display: block;
 78 |   animation: appear 1s ease-in-out;
 79 |   transform: translateY(0) scaleY(1);
 80 | }
 81 | @keyframes appear {
 82 |   0% {
 83 |     transform: translateY(-100%) scaleY(0);
 84 |   }
 85 |   100% {
 86 |     transform: translateY(0) scaleY(1);
 87 |   }
 88 | }
 89 | 
 90 | .controls {
 91 |   position: fixed;
 92 |   z-index: 10;
 93 |   top: 50%;
 94 |   right: 3%;
 95 |   display: flex;
 96 |   flex-direction: column;
 97 |   align-items: center;
 98 |   justify-content: center;
 99 |   transform: translateY(-50%);
100 | }
101 | .controls .control {
102 |   padding: 1rem;
103 |   cursor: pointer;
104 |   background-color: var(--color-grey-4);
105 |   width: 55px;
106 |   height: 55px;
107 |   border-radius: 50%;
108 |   display: flex;
109 |   justify-content: center;
110 |   align-items: center;
111 |   margin: 0.7rem 0;
112 |   box-shadow: var(--box-shadow-1);
113 | }
114 | .controls .control i {
115 |   font-size: 1.2rem;
116 |   color: var(--color-grey-2);
117 |   pointer-events: none;
118 | }
119 | .controls .active-btn {
120 |   background-color: var(--color-secondary);
121 |   transition: all 0.4s ease-in-out;
122 | }
123 | .controls .active-btn i {
124 |   color: var(--color-white);
125 | }
126 | 
127 | .theme-btn {
128 |   top: 5%;
129 |   right: 3%;
130 |   width: 70px;
131 |   height: 70px;
132 |   border-radius: 50%;
133 |   background-color: var(--color-grey-4);
134 |   cursor: pointer;
135 |   position: fixed;
136 |   display: flex;
137 |   justify-content: center;
138 |   align-items: center;
139 |   box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3);
140 |   transition: all 0.1s ease-in-out;
141 | }
142 | .theme-btn:active {
143 |   transform: translateY(-3px);
144 | }
145 | .theme-btn i {
146 |   font-size: 1.4rem;
147 |   color: var(--color-grey-2);
148 |   pointer-events: none;
149 | }
150 | 
151 | /*Header-content*/
152 | .header-content {
153 |   display: grid;
154 |   grid-template-columns: repeat(2, 1fr);
155 |   min-height: 100vh;
156 | }
157 | .header-content .left-header {
158 |   display: flex;
159 |   align-items: center;
160 |   position: relative;
161 | }
162 | .header-content .left-header .h-shape {
163 |   transition: all 0.4s ease-in-out;
164 |   width: 65%;
165 |   height: 100%;
166 |   background-color: var(--color-secondary);
167 |   position: absolute;
168 |   left: 0;
169 |   top: 0;
170 |   z-index: -1;
171 |   clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%);
172 | }
173 | .header-content .left-header .image {
174 |   border-radius: var(--br-sm-2);
175 |   height: 90%;
176 |   width: 68%;
177 |   margin-left: 4rem;
178 |   background-color: var(--color-black);
179 |   transition: all 0.4s ease-in-out;
180 | }
181 | .header-content .left-header .image img {
182 |   width: 100%;
183 |   height: 100%;
184 |   object-fit: cover;
185 |   transition: all 0.4s ease-in-out;
186 |   filter: grayscale(100%);
187 | }
188 | .header-content .left-header .image img:hover {
189 |   filter: grayscale(0);
190 | }
191 | .header-content .right-header {
192 |   display: flex;
193 |   flex-direction: column;
194 |   justify-content: center;
195 |   padding-right: 18rem;
196 | }
197 | .header-content .right-header .name {
198 |   font-size: 3rem;
199 | }
200 | .header-content .right-header .name span {
201 |   color: var(--color-secondary);
202 | }
203 | .header-content .right-header p {
204 |   margin: 1.5rem 0;
205 |   line-height: 2rem;
206 | }
207 | 
208 | /*About*/
209 | .about-container {
210 |   display: grid;
211 |   grid-template-columns: repeat(2, 1fr);
212 |   padding-top: 3.5rem;
213 |   padding-bottom: 5rem;
214 | }
215 | .about-container .right-about {
216 |   display: grid;
217 |   grid-template-columns: repeat(2, 1fr);
218 |   grid-gap: 2rem;
219 | }
220 | .about-container .right-about .about-item {
221 |   border: 1px solid var(--color-grey-5);
222 |   border-radius: 5px;
223 |   transition: all 0.4s ease-in-out;
224 |   box-shadow: 1px 2px 15px rgba(0, 0, 0, 0.1);
225 | }
226 | .about-container .right-about .about-item:hover {
227 |   cursor: default;
228 |   transform: translateY(-5px);
229 |   border: 1px solid var(--color-secondary);
230 |   box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32);
231 | }
232 | .about-container .right-about .about-item .abt-text {
233 |   padding: 1.5rem;
234 |   display: flex;
235 |   flex-direction: column;
236 | }
237 | .about-container .right-about .about-item .abt-text .large-text {
238 |   font-size: 3rem;
239 |   font-weight: 700;
240 |   color: var(--color-secondary);
241 | }
242 | .about-container .right-about .about-item .abt-text .small-text {
243 |   padding-left: 3rem;
244 |   position: relative;
245 |   text-transform: uppercase;
246 |   font-size: 1.2rem;
247 |   color: var(--color-grey-1);
248 |   letter-spacing: 2px;
249 | }
250 | .about-container .right-about .about-item .abt-text .small-text::before {
251 |   content: "";
252 |   position: absolute;
253 |   left: 0;
254 |   top: 15px;
255 |   width: 2rem;
256 |   height: 2px;
257 |   background-color: var(--color-grey-5);
258 | }
259 | .about-container .left-about {
260 |   padding-right: 5rem;
261 | }
262 | .about-container .left-about p {
263 |   line-height: 2rem;
264 |   padding: 1rem;
265 |   color: var(--color-grey-1);
266 | }
267 | .about-container .left-about h4 {
268 |   font-size: 2rem;
269 |   text-transform: uppercase;
270 | }
271 | 
272 | .about-stats {
273 |   padding-bottom: 4rem;
274 | }
275 | .about-stats .progress-bars {
276 |   display: grid;
277 |   grid-template-columns: repeat(2, 1fr);
278 |   grid-gap: 2rem;
279 | }
280 | .about-stats .progress-bars .progress-bar {
281 |   display: flex;
282 |   flex-direction: column;
283 | }
284 | .about-stats .progress-bars .progress-bar .prog-title {
285 |   text-transform: uppercase;
286 |   font-weight: 500;
287 | }
288 | .about-stats .progress-bars .progress-bar .progress-con {
289 |   display: flex;
290 |   align-items: center;
291 | }
292 | .about-stats .progress-bars .progress-bar .progress-con .prog-text {
293 |   color: var(--color-grey-2);
294 | }
295 | .about-stats .progress-bars .progress-bar .progress-con .progress {
296 |   width: 100%;
297 |   height: 0.45rem;
298 |   background-color: var(--color-grey-4);
299 |   margin-left: 1rem;
300 |   position: relative;
301 | }
302 | .about-stats .progress-bars .progress-bar .progress-con .progress span {
303 |   position: absolute;
304 |   top: 0;
305 |   left: 0;
306 |   height: 100%;
307 |   background-color: var(--color-secondary);
308 |   transition: all 0.4s ease-in-out;
309 |   width: 60%;
310 | }
311 | .about-stats .progress-bars .progress-bar .progress-con .progress .html {
312 |   width: 80%;
313 | }
314 | .about-stats .progress-bars .progress-bar .progress-con .progress .css {
315 |   width: 95%;
316 | }
317 | .about-stats .progress-bars .progress-bar .progress-con .progress .js {
318 |   width: 75%;
319 | }
320 | .about-stats .progress-bars .progress-bar .progress-con .progress .react {
321 |   width: 60%;
322 | }
323 | .about-stats .progress-bars .progress-bar .progress-con .progress .node {
324 |   width: 87%;
325 | }
326 | .about-stats .progress-bars .progress-bar .progress-con .progress .python {
327 |   width: 70%;
328 | }
329 | 
330 | .stat-title {
331 |   text-transform: uppercase;
332 |   font-size: 1.4rem;
333 |   text-align: center;
334 |   padding: 3.5rem 0;
335 |   position: relative;
336 | }
337 | .stat-title::before {
338 |   content: "";
339 |   position: absolute;
340 |   left: 50%;
341 |   top: 0;
342 |   width: 40%;
343 |   height: 1px;
344 |   background-color: var(--color-grey-5);
345 |   transform: translateX(-50%);
346 | }
347 | 
348 | /*Timeline*/
349 | .timeline {
350 |   display: grid;
351 |   grid-template-columns: repeat(2, 1fr);
352 |   grid-gap: 2rem;
353 |   padding-bottom: 3rem;
354 | }
355 | .timeline .timeline-item {
356 |   position: relative;
357 |   padding-left: 3rem;
358 |   border-left: 1px solid var(--color-grey-5);
359 | }
360 | .timeline .timeline-item .tl-icon {
361 |   position: absolute;
362 |   left: -27px;
363 |   top: 0;
364 |   background-color: var(--color-secondary);
365 |   width: 50px;
366 |   height: 50px;
367 |   border-radius: 50%;
368 |   display: flex;
369 |   align-items: center;
370 |   justify-content: center;
371 | }
372 | .timeline .timeline-item .tl-icon i {
373 |   font-size: 1.3rem;
374 | }
375 | .timeline .timeline-item .tl-duration {
376 |   padding: 0.2rem 0.6rem;
377 |   background-color: var(--color-grey-5);
378 |   border-radius: 15px;
379 |   display: inline-block;
380 |   font-size: 0.8rem;
381 |   text-transform: uppercase;
382 |   font-weight: 500;
383 | }
384 | .timeline .timeline-item h5 {
385 |   padding: 1rem 0;
386 |   text-transform: uppercase;
387 |   font-size: 1.3rem;
388 |   font-weight: 600;
389 | }
390 | .timeline .timeline-item h5 span {
391 |   color: var(--color-grey-2);
392 |   font-weight: 500;
393 |   font-size: 1.2rem;
394 | }
395 | .timeline .timeline-item p {
396 |   color: var(--color-grey-2);
397 | }
398 | 
399 | .port-text {
400 |   padding: 2rem 0;
401 |   text-align: center;
402 | }
403 | 
404 | .portfolios {
405 |   display: grid;
406 |   grid-template-columns: repeat(3, 1fr);
407 |   grid-gap: 2rem;
408 |   margin-top: 3rem;
409 | }
410 | .portfolios .portfolio-item {
411 |   position: relative;
412 |   border-radius: 15px;
413 | }
414 | .portfolios .portfolio-item img {
415 |   width: 100%;
416 |   height: 300px;
417 |   object-fit: cover;
418 |   border-radius: 15px;
419 | }
420 | .portfolios .portfolio-item .hover-items {
421 |   width: 100%;
422 |   height: 100%;
423 |   background-color: var(--color-secondary);
424 |   position: absolute;
425 |   left: 0;
426 |   top: 0;
427 |   border-radius: 15px;
428 |   display: flex;
429 |   justify-content: center;
430 |   align-items: center;
431 |   flex-direction: column;
432 |   opacity: 0;
433 |   transform: scale(0);
434 |   transition: all 0.4s ease-in-out;
435 | }
436 | .portfolios .portfolio-item .hover-items h3 {
437 |   font-size: 1.5rem;
438 |   color: var(--color-white);
439 |   margin-bottom: 1.5rem;
440 | }
441 | .portfolios .portfolio-item .hover-items .icons {
442 |   display: flex;
443 |   justify-content: center;
444 |   align-items: center;
445 | }
446 | .portfolios .portfolio-item .hover-items .icons .icon {
447 |   background-color: var(--color-primary);
448 |   border-radius: 50%;
449 |   width: 50px;
450 |   height: 50px;
451 |   display: flex;
452 |   align-items: center;
453 |   justify-content: center;
454 |   margin: 0 1rem;
455 |   cursor: pointer;
456 |   transition: all 0.4s ease-in-out;
457 | }
458 | .portfolios .portfolio-item .hover-items .icons .icon i {
459 |   font-size: 1.5rem;
460 |   color: var(--color-white);
461 |   margin: 0 1rem;
462 | }
463 | .portfolios .portfolio-item .hover-items .icons .icon:hover {
464 |   background-color: var(--color-white);
465 | }
466 | .portfolios .portfolio-item .hover-items .icons .icon:hover i {
467 |   color: var(--color-primary);
468 | }
469 | 
470 | .portfolio-item:hover .hover-items {
471 |   opacity: 1;
472 |   transform: scale(1);
473 | }
474 | 
475 | .blogs {
476 |   display: grid;
477 |   grid-template-columns: repeat(3, 1fr);
478 |   grid-gap: 2rem;
479 |   margin-top: 3rem;
480 | }
481 | .blogs .blog {
482 |   position: relative;
483 |   background-color: var(--color-grey-5);
484 |   border-radius: 5px;
485 |   box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.1);
486 |   transition: all 0.4s ease-in-out;
487 | }
488 | .blogs .blog:hover {
489 |   box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.3);
490 |   transform: translateY(-5px);
491 |   transition: all 0.4s ease-in-out;
492 | }
493 | .blogs .blog:hover img {
494 |   filter: grayscale(0);
495 |   transform: scale(1.1);
496 |   box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.8);
497 | }
498 | .blogs .blog img {
499 |   width: 100%;
500 |   height: 300px;
501 |   object-fit: cover;
502 |   border-top-left-radius: 5px;
503 |   border-top-right-radius: 5px;
504 |   filter: grayscale(100%);
505 |   transition: all 0.4s ease-in-out;
506 | }
507 | .blogs .blog .blog-text {
508 |   margin-top: -7px;
509 |   padding: 1.1rem;
510 |   border-top: 8px solid var(--color-secondary);
511 | }
512 | .blogs .blog .blog-text h4 {
513 |   font-size: 1.5rem;
514 |   margin-bottom: 0.7rem;
515 |   transition: all 0.4s ease-in-out;
516 |   cursor: pointer;
517 | }
518 | .blogs .blog .blog-text h4:hover {
519 |   color: var(--color-secondary);
520 | }
521 | .blogs .blog .blog-text p {
522 |   color: var(--color-grey-2);
523 |   line-height: 2rem;
524 |   padding-bottom: 1rem;
525 | }
526 | 
527 | .contact-content-con {
528 |   display: flex;
529 |   padding-top: 3.5rem;
530 | }
531 | .contact-content-con .left-contact {
532 |   flex: 2;
533 | }
534 | .contact-content-con .left-contact h4 {
535 |   margin-top: 1rem;
536 |   font-size: 2rem;
537 |   text-transform: uppercase;
538 | }
539 | .contact-content-con .left-contact p {
540 |   margin: 1rem 0;
541 |   line-height: 2rem;
542 | }
543 | .contact-content-con .left-contact .contact-info .contact-item {
544 |   display: flex;
545 |   align-items: center;
546 |   justify-content: space-between;
547 | }
548 | .contact-content-con .left-contact .contact-info .contact-item p {
549 |   margin: 0.3rem 0 !important;
550 |   padding: 0 !important;
551 | }
552 | .contact-content-con .left-contact .contact-info .contact-item .icon {
553 |   display: grid;
554 |   grid-template-columns: 40px 1fr;
555 | }
556 | .contact-content-con .left-contact .contact-info .contact-item .icon i {
557 |   display: flex;
558 |   align-items: center;
559 |   font-size: 1.3rem;
560 | }
561 | .contact-content-con .left-contact .contact-icon {
562 |   display: flex;
563 |   margin-top: 2rem;
564 | }
565 | .contact-content-con .left-contact .contact-icon a {
566 |   display: flex;
567 |   align-items: center;
568 |   color: var(--color-white);
569 |   background-color: var(--color-grey-5);
570 |   cursor: pointer;
571 |   justify-content: center;
572 |   width: 50px;
573 |   height: 50px;
574 |   border-radius: 50%;
575 |   margin: 0 0.4rem;
576 |   transition: all 0.4s ease-in-out;
577 | }
578 | .contact-content-con .left-contact .contact-icon a:hover {
579 |   background-color: var(--color-secondary);
580 | }
581 | .contact-content-con .left-contact .contact-icon a:hover i {
582 |   color: var(--color-primary);
583 | }
584 | .contact-content-con .left-contact .contact-icon a i {
585 |   display: flex;
586 |   align-items: center;
587 |   justify-content: center;
588 |   font-size: 1.3rem;
589 | }
590 | .contact-content-con .right-contact {
591 |   flex: 3;
592 |   margin-left: 3rem;
593 | }
594 | .contact-content-con .right-contact .input-control {
595 |   margin: 1.5rem 0;
596 | }
597 | .contact-content-con .right-contact .input-control input, .contact-content-con .right-contact .input-control textarea {
598 |   border-radius: 30px;
599 |   font-weight: inherit;
600 |   font-size: inherit;
601 |   font-family: inherit;
602 |   padding: 0.8rem 1.1rem;
603 |   outline: none;
604 |   border: none;
605 |   background-color: var(--color-grey-5);
606 |   width: 100%;
607 |   color: var(--color-white);
608 |   resize: none;
609 | }
610 | .contact-content-con .right-contact .i-c-2 {
611 |   display: flex;
612 | }
613 | .contact-content-con .right-contact .i-c-2 :last-child {
614 |   margin-left: 1.5rem;
615 | }
616 | .contact-content-con .right-contact .submit-btn {
617 |   display: flex;
618 |   justify-content: flex-start;
619 | }
620 | 
621 | /*Independed components*/
622 | .btn-con {
623 |   display: flex;
624 |   align-self: flex-start;
625 | }
626 | 
627 | .main-btn {
628 |   border-radius: 30px;
629 |   color: inherit;
630 |   font-weight: 600;
631 |   position: relative;
632 |   border: 1px solid var(--color-secondary);
633 |   display: flex;
634 |   align-self: flex-start;
635 |   align-items: center;
636 |   overflow: hidden;
637 | }
638 | .main-btn .btn-text {
639 |   padding: 0 2rem;
640 | }
641 | .main-btn .btn-icon {
642 |   background-color: var(--color-secondary);
643 |   display: flex;
644 |   align-items: center;
645 |   justify-content: center;
646 |   border-radius: 50%;
647 |   padding: 1rem;
648 | }
649 | .main-btn::before {
650 |   content: "";
651 |   position: absolute;
652 |   top: 0;
653 |   right: 0;
654 |   transform: translateX(100%);
655 |   transition: all 0.4s ease-out;
656 |   z-index: -1;
657 | }
658 | .main-btn:hover {
659 |   transition: all 0.4s ease-out;
660 | }
661 | .main-btn:hover::before {
662 |   width: 100%;
663 |   height: 100%;
664 |   background-color: var(--color-secondary);
665 |   transform: translateX(0);
666 |   transition: all 0.4s ease-out;
667 | }
668 | 
669 | .main-title {
670 |   text-align: center;
671 | }
672 | .main-title h2 {
673 |   position: relative;
674 |   text-transform: uppercase;
675 |   font-size: 4rem;
676 |   font-weight: 700;
677 | }
678 | .main-title h2 span {
679 |   color: var(--color-secondary);
680 | }
681 | .main-title h2 .bg-text {
682 |   position: absolute;
683 |   top: 50%;
684 |   left: 50%;
685 |   color: var(--color-grey-5);
686 |   transition: all 0.4s ease-in-out;
687 |   z-index: -1;
688 |   transform: translate(-50%, -50%);
689 |   font-weight: 800;
690 |   font-size: 6.3rem;
691 | }
692 | 
693 | .about-container .left-about p {
694 |   padding-left: 0;
695 | }
696 | 
697 | @media screen and (max-width: 600px) {
698 |   header {
699 |     padding: 0 !important;
700 |   }
701 | 
702 |   .theme-btn {
703 |     width: 50px;
704 |     height: 50px;
705 |   }
706 | 
707 |   .header-content {
708 |     grid-template-columns: repeat(1, 1fr);
709 |     padding-bottom: 6rem;
710 |   }
711 | 
712 |   .left-header .h-shape {
713 |     display: none;
714 |   }
715 | 
716 |   .right-header {
717 |     grid-row: 1;
718 |     padding-right: 0rem !important;
719 |     width: 90%;
720 |     margin: 0 auto;
721 |   }
722 |   .right-header .name {
723 |     font-size: 2.5rem !important;
724 |     text-align: center;
725 |     padding-top: 3rem;
726 |   }
727 | 
728 |   .header-content .left-header .image {
729 |     margin: 0 auto;
730 |     width: 90%;
731 |   }
732 | 
733 |   .controls {
734 |     top: auto;
735 |     bottom: 0;
736 |     flex-direction: row;
737 |     justify-content: center;
738 |     left: 50%;
739 |     transform: translateX(-50%);
740 |     width: 100%;
741 |     background-color: var(--color-grey-5);
742 |   }
743 |   .controls .control {
744 |     margin: 1rem 0.3rem;
745 |   }
746 | 
747 |   .about-container {
748 |     grid-template-columns: repeat(1, 1fr);
749 |   }
750 |   .about-container .right-about {
751 |     grid-template-columns: repeat(1, 1fr);
752 |     padding-top: 2.5rem;
753 |   }
754 |   .about-container .left-about {
755 |     padding-right: 0;
756 |   }
757 |   .about-container .left-about p {
758 |     padding-left: 0;
759 |   }
760 | 
761 |   .timeline {
762 |     grid-template-columns: repeat(1, 1fr);
763 |     padding-bottom: 6rem;
764 |   }
765 | 
766 |   .container {
767 |     padding: 2rem 2.5rem !important;
768 |   }
769 | 
770 |   .about-stats .progress-bars {
771 |     grid-template-columns: repeat(1, 1fr);
772 |   }
773 | 
774 |   .portfolios {
775 |     grid-template-columns: repeat(1, 1fr);
776 |     padding-bottom: 6rem;
777 |     margin-top: 1rem;
778 |   }
779 | 
780 |   .blogs {
781 |     grid-template-columns: repeat(1, 1fr);
782 |     padding-bottom: 6rem;
783 |   }
784 | 
785 |   .contact-content-con {
786 |     flex-direction: column;
787 |   }
788 |   .contact-content-con .right-contact {
789 |     margin-left: 0;
790 |     margin-top: 2.5rem;
791 |   }
792 | 
793 |   .contact-content-con .right-contact .i-c-2 {
794 |     flex-direction: column;
795 |   }
796 | 
797 |   .contact-content-con .right-contact .i-c-2 :last-child {
798 |     margin-left: 0;
799 |     margin-top: 1.5rem;
800 |   }
801 | 
802 |   .contact-content-con .right-contact {
803 |     margin-bottom: 6rem;
804 |   }
805 | 
806 |   .contact-item {
807 |     flex-direction: column;
808 |     margin: 1rem 0;
809 |   }
810 |   .contact-item p {
811 |     font-size: 15px;
812 |     color: var(--color-grey-2);
813 |   }
814 |   .contact-item span {
815 |     font-size: 15px;
816 |   }
817 |   .contact-item .icon {
818 |     grid-template-columns: 25px 1fr;
819 |   }
820 | 
821 |   .main-title h2 {
822 |     font-size: 2rem;
823 |   }
824 |   .main-title h2 span {
825 |     font-size: 2.3rem;
826 |   }
827 |   .main-title h2 .bg-text {
828 |     font-size: 2.3rem;
829 |   }
830 | }
831 | @media screen and (max-width: 1432px) {
832 |   .container {
833 |     padding: 7rem 11rem;
834 |   }
835 | 
836 |   .contact-content-con {
837 |     flex-direction: column;
838 |   }
839 |   .contact-content-con .right-contact {
840 |     margin-left: 0;
841 |     margin-top: 2.5rem;
842 |   }
843 | 
844 |   .contact-content-con .right-contact .i-c-2 {
845 |     flex-direction: column;
846 |   }
847 | 
848 |   .contact-content-con .right-contact .i-c-2 :last-child {
849 |     margin-left: 0;
850 |     margin-top: 1.5rem;
851 |   }
852 | 
853 |   .contact-content-con .right-contact {
854 |     margin-bottom: 6rem;
855 |   }
856 | 
857 |   .main-title h2 .bg-text {
858 |     font-size: 5.5rem;
859 |   }
860 | }
861 | @media screen and (max-width: 1250px) {
862 |   .blogs {
863 |     grid-template-columns: repeat(2, 1fr);
864 |     margin-top: 6rem;
865 |   }
866 | 
867 |   .portfolios {
868 |     grid-template-columns: repeat(2, 1fr);
869 |   }
870 | 
871 |   .header-content .right-header {
872 |     padding-right: 9rem;
873 |   }
874 | }
875 | @media screen and (max-width: 660px) {
876 |   .blogs {
877 |     grid-template-columns: repeat(1, 1fr);
878 |   }
879 | 
880 |   .portfolios {
881 |     grid-template-columns: repeat(1, 1fr);
882 |   }
883 | }
884 | @media screen and (max-width: 1070px) {
885 |   .about-container {
886 |     grid-template-columns: repeat(1, 1fr);
887 |   }
888 |   .about-container .right-about {
889 |     padding-top: 2.5rem;
890 |   }
891 | 
892 |   .main-title h2 {
893 |     font-size: 4rem;
894 |   }
895 |   .main-title h2 span {
896 |     font-size: 4rem;
897 |   }
898 |   .main-title h2 .bg-text {
899 |     font-size: 4.5rem;
900 |   }
901 | }
902 | @media screen and (max-width: 970px) {
903 |   .container {
904 |     padding: 7rem 6rem;
905 |   }
906 | 
907 |   .about-container .left-about {
908 |     padding-right: 0rem;
909 |   }
910 | 
911 |   .header-content {
912 |     grid-template-columns: repeat(1, 1fr);
913 |     padding-bottom: 6rem;
914 |   }
915 | 
916 |   .left-header .h-shape {
917 |     display: none;
918 |   }
919 |   .left-header .image {
920 |     width: 90% !important;
921 |     margin: 0 auto !important;
922 |   }
923 | 
924 |   .right-header {
925 |     grid-row: 1;
926 |     padding-right: 0rem !important;
927 |     width: 90%;
928 |     margin: 0 auto;
929 |   }
930 |   .right-header .name {
931 |     font-size: 2.5rem !important;
932 |     text-align: center;
933 |     padding-top: 3rem;
934 |   }
935 | }
936 | @media screen and (max-width: 700px) {
937 |   .container {
938 |     padding: 7rem 3rem;
939 |   }
940 | 
941 |   .about-stats .progress-bars {
942 |     grid-template-columns: repeat(1, 1fr);
943 |   }
944 | 
945 |   .about-container .right-about {
946 |     grid-template-columns: repeat(1, 1fr);
947 |   }
948 | 
949 |   .timeline {
950 |     grid-template-columns: repeat(1, 1fr);
951 |   }
952 | 
953 |   .main-title h2 {
954 |     font-size: 3rem;
955 |   }
956 |   .main-title h2 span {
957 |     font-size: 3rem;
958 |   }
959 |   .main-title h2 .bg-text {
960 |     font-size: 4rem;
961 |   }
962 | }
963 | 
964 | /*# sourceMappingURL=styles.css.map */
965 | 


--------------------------------------------------------------------------------
/styles/styles.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sourceRoot":"","sources":["styles.scss","_media.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;;AACA;EACI;IAAI;;EACJ;IAAM;;;;AAKd;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EACI;EACA;;AACA;EAAI;;;AAIZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAAU;;AACV;EACI;EACA;EACA;;;AAKR;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;;AAMhB;EACI;EACA;EACA;EACA;;AACA;EACI;;AACA;EAAO;;AAEX;EACI;EACA;;;AAKZ;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAOpB;EACI;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;;;AAKZ;EACI;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AACA;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EAAQ;;AACR;EAAO;;AACP;EAAM;;AACN;EAAQ;;AACR;EAAO;;AACP;EAAS;;;AAM7B;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIR;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAAI;;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EAAG;;;AAKX;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;;AACA;EAAI;;;AAQ5B;EACI;EACA;;;AAIJ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EAAU;;AAEd;EACI;EACA;EACA;;;AAQhB;EACI;EACA;;AACA;EACI;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAIA;EACI;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AACA;EACI;EACA;EACA;;AAMhB;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EAAI;;AAER;EACI;EACA;EACA;EACA;;AAMhB;EACI;EACA;;AACA;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGR;EACI;;AACA;EACI;;AAGR;EACI;EACA;;;AAMZ;AACA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAAY;;AACZ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;;;AAMZ;EACI;;AACA;EACI;EACA;EACA;EACA;;AACA;EAAO;;AACP;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzpBZ;EACI;;;AAGJ;EACI;IACI;;;EAEJ;IACI;IACA;;;EAEJ;IACI;IACA;;;EAIA;IACI;;;EAGR;IACI;IACA;IACA;IACA;;EACA;IACI;IACA;IACA;;;EAGR;IACI;IACA;;;EAGJ;IACI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EACA;IACI;;;EAIR;IACI;;EACA;IACI;IACA;;EAEJ;IACI;;EACA;IACI;;;EAKZ;IACI;IACA;;;EAGJ;IACI;;;EAIA;IACI;;;EAIR;IACI;IACA;IACA;;;EAGJ;IACI;IACA;;;EAGJ;IACI;;EACA;IACI;IACA;;;EAIR;IACI;;;EAEJ;IACI;IACA;;;EAGJ;IACI;;;EAGJ;IACI;IACA;;EACA;IACI;IACA;;EAEJ;IACI;;EAEJ;IACI;;;EAMJ;IACI;;EACA;IACI;;EAEJ;IACI;;;AAMhB;EACI;IACI;;;EAGJ;IACI;;EACA;IACI;IACA;;;EAIR;IACI;;;EAEJ;IACI;IACA;;;EAGJ;IACI;;;EAKI;IACI;;;AAUhB;EACI;IACI;IACA;;;EAEJ;IACI;;;EAEJ;IACI;;;AAIR;EACI;IACI;;;EAEJ;IACI;;;AAIR;EACI;IACI;;EACA;IACI;;;EAIJ;IACI;;EACA;IACI;;EAEJ;IACI;;;AAMhB;EACI;IACI;;;EAEJ;IACI;;;EAEJ;IACI;IACA;;;EAIA;IACI;;EAEJ;IACI;IACA;;;EAIR;IACI;IACA;IACA;IACA;;EACA;IACI;IACA;IACA;;;AAIZ;EACI;IACI;;;EAEJ;IACI;;;EAEJ;IACI;;;EAGJ;IACI;;;EAGA;IACI;;EACA;IACI;;EAEJ;IACI","file":"styles.css"}


--------------------------------------------------------------------------------
/styles/styles.scss:
--------------------------------------------------------------------------------
  1 | * {
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     box-sizing: border-box;
  5 |     list-style: none;
  6 | }
  7 | 
  8 | :root {
  9 |     --color-primary: #191d2b;
 10 |     --color-secondary: #27AE60;
 11 |     --color-white: #FFFFFF;
 12 |     --color-black: #000;
 13 |     --color-grey0: #f8f8f8;
 14 |     --color-grey-1: #dbe1e8;
 15 |     --color-grey-2: #b2becd;
 16 |     --color-grey-3: #6c7983;
 17 |     --color-grey-4: #454e56;
 18 |     --color-grey-5: #2a2e35;
 19 |     --color-grey-6: #12181b;
 20 |     --br-sm-2: 14px;
 21 |     --box-shadow-1: 0 3px 15px rgba(0,0,0,.3);
 22 | }
 23 | 
 24 | .light-mode {
 25 |     --color-primary: #FFFFFF;
 26 |     --color-secondary: #F56692;
 27 |     --color-white: #454e56;
 28 |     --color-black: #000;
 29 |     --color-grey0: #f8f8f8;
 30 |     --color-grey-1: #6c7983;
 31 |     --color-grey-2: #6c7983;
 32 |     --color-grey-3: #6c7983;
 33 |     --color-grey-4: #454e56;
 34 |     --color-grey-5: #f8f8f8;
 35 |     --color-grey-6: #12181b;
 36 | }
 37 | 
 38 | body {
 39 |     background-color: var(--color-primary);
 40 |     font-family: 'Poppins', sans-serif;
 41 |     font-size: 1.1rem;
 42 |     color: var(--color-white);
 43 |     transition: all .4s ease-in-out;
 44 | }
 45 | 
 46 | a {
 47 |     display: inline-block;
 48 |     text-decoration: none;
 49 |     color: inherit;
 50 |     font-family: inherit;
 51 | }
 52 | 
 53 | header {
 54 |     min-height: 100vh;
 55 |     color: var(--color-white);
 56 |     overflow: hidden;
 57 |     padding: 0 !important;
 58 | }
 59 | 
 60 | section {
 61 |     min-height: 100vh;
 62 |     width: 100%;
 63 |     position: absolute;
 64 |     left: 0;
 65 |     top: 0;
 66 |     padding: 3rem 18rem;
 67 | }
 68 | 
 69 | .container {
 70 |     display: none;
 71 |     transform: translateY(-100%) scale(0);
 72 |     transition: all .4s ease-in-out;
 73 |     background-color: var(--color-primary);
 74 | }
 75 | 
 76 | 
 77 | .active {
 78 |     display: block;
 79 |     animation: appear 1s ease-in-out;
 80 |     transform: translateY(0) scaleY(1);
 81 |     @keyframes appear {
 82 |         0%{ transform: translateY(-100%) scaleY(0); }
 83 |         100%{ transform: translateY(0) scaleY(1); }
 84 |     }
 85 | }
 86 | 
 87 | //Controls
 88 | .controls {
 89 |     position: fixed;
 90 |     z-index: 10;
 91 |     top: 50%;
 92 |     right: 3%;
 93 |     display: flex;
 94 |     flex-direction: column;
 95 |     align-items: center;
 96 |     justify-content: center;
 97 |     transform: translateY(-50%);
 98 |     .control{
 99 |         padding: 1rem;
100 |         cursor: pointer;
101 |         background-color: var(--color-grey-4);
102 |         width: 55px;
103 |         height: 55px;
104 |         border-radius: 50%;
105 |         display: flex;
106 |         justify-content: center;
107 |         align-items: center;
108 |         margin: .7rem 0;
109 |         box-shadow: var(--box-shadow-1) ;
110 |         i {
111 |             font-size: 1.2rem;
112 |             color: var(--color-grey-2);
113 |             pointer-events: none;
114 |         }
115 |     }
116 |     .active-btn {
117 |         background-color: var(--color-secondary);
118 |         transition: all .4s ease-in-out;
119 |         i { color: var(--color-white); }
120 |     }
121 | }
122 | 
123 | .theme-btn {
124 |     top: 5%;
125 |     right: 3%;
126 |     width: 70px;
127 |     height: 70px;
128 |     border-radius: 50%;
129 |     background-color: var(--color-grey-4);
130 |     cursor: pointer;
131 |     position: fixed;
132 |     display: flex;
133 |     justify-content: center;
134 |     align-items: center;
135 |     box-shadow: 0 3px 15px rgba(0,0,0,.3);
136 |     transition: all .1s ease-in-out;
137 |     &:active{ transform: translateY(-3px); }
138 |     i{
139 |         font-size: 1.4rem;
140 |         color: var(--color-grey-2);
141 |         pointer-events: none;
142 |     }
143 | }
144 | 
145 | 
146 | /*Header-content*/
147 | .header-content {
148 |     display: grid;
149 |     grid-template-columns: repeat(2, 1fr);
150 |     min-height: 100vh;
151 |     .left-header {
152 |         display: flex;
153 |         align-items: center;
154 |         position: relative;
155 |         .h-shape {
156 |             transition: all .4s ease-in-out;
157 |             width: 65%;
158 |             height: 100%;
159 |             background-color: var(--color-secondary);
160 |             position: absolute;
161 |             left: 0;
162 |             top: 0;
163 |             z-index: -1;
164 |             clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%);
165 |         }
166 |         .image {
167 |             border-radius: var(--br-sm-2);
168 |             height: 90%;
169 |             width: 68%;
170 |             margin-left: 4rem;
171 |             background-color: var(--color-black);
172 |             transition: all .4s ease-in-out;
173 |             img {
174 |                 width: 100%;
175 |                 height: 100%;
176 |                 object-fit: cover;
177 |                 transition: all .4s ease-in-out;
178 |                 filter: grayscale(100%);
179 |                 &:hover{
180 |                     filter: grayscale(0);
181 |                 }
182 |             }
183 |         }
184 |     }
185 | 
186 |     .right-header {
187 |         display: flex;
188 |         flex-direction: column;
189 |         justify-content: center;
190 |         padding-right: 18rem;
191 |         .name {
192 |             font-size: 3rem;
193 |             span { color: var(--color-secondary); }
194 |         }
195 |         p {
196 |             margin: 1.5rem 0;
197 |             line-height: 2rem;
198 |         }
199 |     }
200 | }
201 | 
202 | /*About*/
203 | .about-container {
204 |     display: grid;
205 |     grid-template-columns: repeat(2, 1fr);
206 |     padding-top: 3.5rem;
207 |     padding-bottom: 5rem;
208 |     .right-about {
209 |         display: grid;
210 |         grid-template-columns: repeat(2, 1fr);
211 |         grid-gap: 2rem;
212 |         .about-item {
213 |             border: 1px solid var(--color-grey-5);
214 |             border-radius: 5px;
215 |             transition: all .4s ease-in-out;
216 |             box-shadow: 1px 2px 15px rgba(0,0,0,.1);
217 |             &:hover {
218 |                 cursor: default;
219 |                 transform: translateY(-5px);
220 |                 border: 1px solid var(--color-secondary);
221 |                 box-shadow: 1px 4px 15px rgba(0,0,0,.32);
222 |             }
223 |             .abt-text {
224 |                 padding: 1.5rem;
225 |                 display: flex;
226 |                 flex-direction: column;
227 |                 .large-text {
228 |                     font-size: 3rem;
229 |                     font-weight: 700;
230 |                     color: var(--color-secondary);
231 |                 }
232 |                 .small-text {
233 |                     padding-left: 3rem;
234 |                     position: relative;
235 |                     text-transform: uppercase;
236 |                     font-size: 1.2rem;
237 |                     color: var(--color-grey-1);
238 |                     letter-spacing: 2px;
239 |                     &::before {
240 |                         content: '';
241 |                         position: absolute;
242 |                         left: 0;
243 |                         top: 15px;
244 |                         width: 2rem;
245 |                         height: 2px;
246 |                         background-color: var(--color-grey-5);
247 |                     }
248 |                 }
249 |             }
250 |         }
251 |     }
252 | 
253 |     .left-about {
254 |         padding-right: 5rem;
255 |         p {
256 |             line-height: 2rem;
257 |             padding: 1rem;
258 |             color: var(--color-grey-1);
259 |         }
260 |         h4 {
261 |             font-size: 2rem;
262 |             text-transform: uppercase;
263 |         }
264 |     }
265 | }
266 | 
267 | .about-stats {
268 |     padding-bottom: 4rem;
269 |     .progress-bars {
270 |         display: grid;
271 |         grid-template-columns: repeat(2, 1fr);
272 |         grid-gap: 2rem;
273 |         .progress-bar {
274 |             display: flex;
275 |             flex-direction: column;
276 |             .prog-title {
277 |                 text-transform: uppercase;
278 |                 font-weight: 500;
279 |             }
280 |             .progress-con {
281 |                 display: flex;
282 |                 align-items: center;
283 |                 .prog-text {
284 |                     color: var(--color-grey-2);
285 |                 }
286 |                 .progress {
287 |                     width: 100%;
288 |                     height: .45rem;
289 |                     background-color: var(--color-grey-4);
290 |                     margin-left: 1rem;
291 |                     position: relative;
292 |                     span {
293 |                         position: absolute;
294 |                         top: 0;
295 |                         left: 0;
296 |                         height: 100%;
297 |                         background-color: var(--color-secondary);
298 |                         transition: all .4s ease-in-out;
299 |                         width: 60%;
300 |                     }
301 |                     .html { width: 80%; }
302 |                     .css { width: 95%; }
303 |                     .js { width: 75%; }
304 |                     .react{ width: 60%; }
305 |                     .node{ width: 87%; }
306 |                     .python{ width: 70%; }
307 |                 }
308 |             }
309 |         }
310 |     }
311 | }
312 | .stat-title {
313 |     text-transform: uppercase;
314 |     font-size: 1.4rem;
315 |     text-align: center;
316 |     padding: 3.5rem 0;
317 |     position: relative;
318 |     &::before {
319 |         content: '';
320 |         position: absolute;
321 |         left: 50%;
322 |         top: 0;
323 |         width: 40%;
324 |         height: 1px;
325 |         background-color: var(--color-grey-5);
326 |         transform: translateX(-50%);
327 |     }
328 | }
329 | 
330 | /*Timeline*/
331 | .timeline {
332 |     display: grid;
333 |     grid-template-columns: repeat(2, 1fr);
334 |     grid-gap: 2rem;
335 |     padding-bottom: 3rem;
336 |     .timeline-item {
337 |         position: relative;
338 |         padding-left: 3rem;
339 |         border-left: 1px solid var(--color-grey-5);
340 |         .tl-icon {
341 |             position: absolute;
342 |             left: -27px;
343 |             top: 0;
344 |             background-color: var(--color-secondary);
345 |             width: 50px;
346 |             height: 50px;
347 |             border-radius: 50%;
348 |             display: flex;
349 |             align-items: center;
350 |             justify-content: center;
351 |             i { font-size: 1.3rem; }
352 |         }
353 |         .tl-duration {
354 |             padding: .2rem .6rem;
355 |             background-color: var(--color-grey-5);
356 |             border-radius: 15px;
357 |             display: inline-block;
358 |             font-size: .8rem;
359 |             text-transform: uppercase;
360 |             font-weight: 500;
361 |         }
362 |         h5 {
363 |             padding: 1rem 0;
364 |             text-transform: uppercase;
365 |             font-size: 1.3rem;
366 |             font-weight: 600;
367 |             span {
368 |                 color: var(--color-grey-2);
369 |                 font-weight: 500;
370 |                 font-size: 1.2rem;
371 |             }
372 |         }
373 |         p{ color: var(--color-grey-2); }
374 |     }
375 | }
376 | 
377 | //Portfolios
378 | .port-text {
379 |     padding: 2rem 0;
380 |     text-align: center;
381 | }
382 | 
383 | .portfolios {
384 |     display: grid;
385 |     grid-template-columns: repeat(3, 1fr);
386 |     grid-gap: 2rem;
387 |     margin-top: 3rem;
388 |     .portfolio-item {
389 |         position: relative;
390 |         border-radius: 15px;
391 |         img {
392 |             width: 100%;
393 |             height: 300px;
394 |             object-fit: cover;
395 |             border-radius: 15px;
396 |         }
397 |         .hover-items {
398 |             width: 100%;
399 |             height: 100%;
400 |             background-color: var(--color-secondary);
401 |             position: absolute;
402 |             left: 0;
403 |             top: 0;
404 |             border-radius: 15px;
405 |             display: flex;
406 |             justify-content: center;
407 |             align-items: center;
408 |             flex-direction: column;
409 |             opacity: 0;
410 |             transform: scale(0);
411 |             transition: all .4s ease-in-out;
412 |             h3 {
413 |                 font-size: 1.5rem;
414 |                 color: var(--color-white);
415 |                 margin-bottom: 1.5rem;
416 |             }
417 |             .icons {
418 |                 display: flex;
419 |                 justify-content: center;
420 |                 align-items: center;
421 |                 .icon {
422 |                     background-color: var(--color-primary);
423 |                     border-radius: 50%;
424 |                     width: 50px;
425 |                     height: 50px;
426 |                     display: flex;
427 |                     align-items: center;
428 |                     justify-content: center;
429 |                     margin: 0 1rem;
430 |                     cursor: pointer;
431 |                     transition: all .4s ease-in-out;
432 |                     i {
433 |                         font-size: 1.5rem;
434 |                         color: var(--color-white);
435 |                         margin: 0 1rem;
436 |                     }
437 |                     &:hover {
438 |                         background-color: var(--color-white);
439 |                         i { color: var(--color-primary); }
440 |                     }
441 |                 }
442 |             }
443 |         }
444 |     }
445 | }
446 | 
447 | .portfolio-item:hover .hover-items {
448 |     opacity: 1;
449 |     transform: scale(1);
450 | }
451 | 
452 | //Blogs Section
453 | .blogs {
454 |     display: grid;
455 |     grid-template-columns: repeat(3, 1fr);
456 |     grid-gap: 2rem;
457 |     margin-top: 3rem;
458 |     .blog {
459 |         position: relative;
460 |         background-color: var(--color-grey-5);
461 |         border-radius: 5px;
462 |         box-shadow: 1px 1px 20px rgba(0,0,0,.1);
463 |         transition: all .4s ease-in-out;
464 |         &:hover {
465 |             box-shadow: 1px 1px 20px rgba(0,0,0,.3);
466 |             transform: translateY(-5px);
467 |             transition: all .4s ease-in-out;
468 |             img {
469 |                 filter: grayscale(0);
470 |                 transform: scale(1.1);
471 |                 box-shadow: 0px 4px 15px rgba(0,0,0,0.8);
472 |             }
473 |         }
474 |         img {
475 |             width: 100%;
476 |             height: 300px;
477 |             object-fit: cover;
478 |             border-top-left-radius: 5px;
479 |             border-top-right-radius: 5px;
480 |             filter: grayscale(100%);
481 |             transition: all .4s ease-in-out;
482 |         }
483 |         .blog-text {
484 |             margin-top: -7px;
485 |             padding: 1.1rem;
486 |             border-top: 8px solid var(--color-secondary);
487 |             h4 {
488 |                 font-size: 1.5rem;
489 |                 margin-bottom: .7rem;
490 |                 transition: all .4s ease-in-out;
491 |                 cursor: pointer;
492 |                 &:hover { color: var(--color-secondary); }
493 |             }
494 |             p{
495 |                 color: var(--color-grey-2);
496 |                 line-height: 2rem;
497 |                 padding-bottom: 1rem;
498 |             }
499 |         }
500 |     }
501 | }
502 | 
503 | 
504 | //Contact section
505 | .contact-content-con {
506 |     display: flex;
507 |     padding-top: 3.5rem;
508 |     .left-contact {
509 |         flex: 2;
510 |         h4 {
511 |             margin-top: 1rem;
512 |             font-size: 2rem;
513 |             text-transform: uppercase;
514 |         }
515 |         p {
516 |             margin: 1rem 0;
517 |             line-height: 2rem;
518 |         }
519 | 
520 |         .contact-info {
521 |             .contact-item {
522 |                 display: flex;
523 |                 align-items: center;
524 |                 justify-content: space-between;
525 |                 p {
526 |                     margin: .3rem 0 !important;
527 |                     padding: 0 !important;
528 |                 }
529 |                 .icon {
530 |                     display: grid;
531 |                     grid-template-columns: 40px 1fr;
532 |                     i {
533 |                         display: flex;
534 |                         align-items: center;
535 |                         font-size: 1.3rem;
536 |                     }
537 |                 }
538 |             }
539 |         }
540 | 
541 |         .contact-icon {
542 |             display: flex;
543 |             margin-top: 2rem;
544 |             a {
545 |                 display: flex;
546 |                 align-items: center;
547 |                 color: var(--color-white);
548 |                 background-color: var(--color-grey-5);
549 |                 cursor: pointer;
550 |                 justify-content: center;
551 |                 width: 50px;
552 |                 height: 50px;
553 |                 border-radius: 50%;
554 |                 margin: 0 .4rem;
555 |                 transition: all .4s ease-in-out;
556 |                 &:hover {
557 |                     background-color: var(--color-secondary);
558 |                     i { color: var(--color-primary); }
559 |                 }
560 |                 i {
561 |                     display: flex;
562 |                     align-items: center;
563 |                     justify-content: center;
564 |                     font-size: 1.3rem;
565 |                 }
566 |             }
567 |         }
568 |     }
569 | 
570 |     .right-contact {
571 |         flex: 3;
572 |         margin-left: 3rem;
573 |         .input-control {
574 |             margin: 1.5rem 0;
575 |             input, textarea {
576 |                 border-radius: 30px;
577 |                 font-weight: inherit;
578 |                 font-size: inherit;
579 |                 font-family: inherit;
580 |                 padding: .8rem 1.1rem;
581 |                 outline: none;
582 |                 border: none;
583 |                 background-color: var(--color-grey-5);
584 |                 width: 100%;
585 |                 color: var(--color-white);
586 |                 resize: none;
587 |             }
588 |         }
589 |         .i-c-2 {
590 |             display: flex;
591 |             :last-child{
592 |                 margin-left: 1.5rem;
593 |             }
594 |         }
595 |         .submit-btn {
596 |             display: flex;
597 |             justify-content: flex-start;
598 |         }
599 |     }
600 | }
601 | 
602 | 
603 | /*Independed components*/
604 | .btn-con {
605 |     display: flex;
606 |     align-self: flex-start;
607 | }
608 | .main-btn {
609 |     border-radius: 30px;
610 |     color: inherit;
611 |     font-weight: 600;
612 |     position: relative;
613 |     border: 1px solid var(--color-secondary);
614 |     display: flex;
615 |     align-self: flex-start;
616 |     align-items: center;
617 |     overflow: hidden;
618 |     .btn-text { padding: 0 2rem; }
619 |     .btn-icon {
620 |         background-color: var(--color-secondary);
621 |         display: flex;
622 |         align-items: center;
623 |         justify-content: center;
624 |         border-radius: 50%;
625 |         padding: 1rem;
626 |     }
627 |     &::before {
628 |         content: '';
629 |         position: absolute;
630 |         top: 0;
631 |         right: 0;
632 |         transform: translateX(100%);
633 |         transition: all .4s ease-out;
634 |         z-index: -1;
635 |     }
636 |     &:hover {
637 |         transition: all .4s ease-out;
638 |         &::before {
639 |             width: 100%;
640 |             height: 100%;
641 |             background-color: var(--color-secondary);
642 |             transform: translateX(0);
643 |             transition: all .4s ease-out;
644 |         }
645 |     }
646 | 
647 | }
648 | 
649 | .main-title {
650 |     text-align: center;
651 |     h2 {
652 |         position: relative;
653 |         text-transform: uppercase;
654 |         font-size: 4rem;
655 |         font-weight: 700;
656 |         span { color: var(--color-secondary); }
657 |         .bg-text {
658 |             position: absolute;
659 |             top: 50%;
660 |             left: 50%;
661 |             color: var(--color-grey-5);
662 |             transition: all .4s ease-in-out;
663 |             z-index: -1;
664 |             transform: translate(-50%, -50%);
665 |             font-weight: 800;
666 |             font-size: 6.3rem;
667 |         }
668 |     }
669 | }
670 | 
671 | @import './media';


--------------------------------------------------------------------------------