├── assets
    ├── images
    │   ├── blog-1.jpg
    │   ├── blog-2.jpg
    │   ├── blog-3.jpg
    │   ├── hero-bg.jpg
    │   ├── rotate-img.png
    │   ├── about-banner.jpg
    │   ├── hero-banner.jpg
    │   ├── portfolio-1.jpg
    │   ├── portfolio-2.jpg
    │   ├── portfolio-3.jpg
    │   ├── portfolio-4.jpg
    │   └── absolute-image.jpg
    ├── js
    │   └── script.js
    └── css
    │   └── style.css
├── favicon.svg
├── README.md
└── index.html


/assets/images/blog-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/U7P4L-IN/my-portfolio/HEAD/assets/images/blog-1.jpg


--------------------------------------------------------------------------------
/assets/images/blog-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/U7P4L-IN/my-portfolio/HEAD/assets/images/blog-2.jpg


--------------------------------------------------------------------------------
/assets/images/blog-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/U7P4L-IN/my-portfolio/HEAD/assets/images/blog-3.jpg


--------------------------------------------------------------------------------
/assets/images/hero-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/U7P4L-IN/my-portfolio/HEAD/assets/images/hero-bg.jpg


--------------------------------------------------------------------------------
/assets/images/rotate-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/U7P4L-IN/my-portfolio/HEAD/assets/images/rotate-img.png


--------------------------------------------------------------------------------
/assets/images/about-banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/U7P4L-IN/my-portfolio/HEAD/assets/images/about-banner.jpg


--------------------------------------------------------------------------------
/assets/images/hero-banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/U7P4L-IN/my-portfolio/HEAD/assets/images/hero-banner.jpg


--------------------------------------------------------------------------------
/assets/images/portfolio-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/U7P4L-IN/my-portfolio/HEAD/assets/images/portfolio-1.jpg


--------------------------------------------------------------------------------
/assets/images/portfolio-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/U7P4L-IN/my-portfolio/HEAD/assets/images/portfolio-2.jpg


--------------------------------------------------------------------------------
/assets/images/portfolio-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/U7P4L-IN/my-portfolio/HEAD/assets/images/portfolio-3.jpg


--------------------------------------------------------------------------------
/assets/images/portfolio-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/U7P4L-IN/my-portfolio/HEAD/assets/images/portfolio-4.jpg


--------------------------------------------------------------------------------
/assets/images/absolute-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/U7P4L-IN/my-portfolio/HEAD/assets/images/absolute-image.jpg


--------------------------------------------------------------------------------
/favicon.svg:
--------------------------------------------------------------------------------
1 | <svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M24.5 13.25C24.5 19.4632 19.4632 24.5 13.25 24.5H2V13.25C2 7.03679 7.03679 2 13.25 2C19.4632 2 24.5 7.03679 24.5 13.25Z" fill="#17B7EA"/>
3 | <path d="M24.5 35.75C24.5 29.5368 29.5368 24.5 35.75 24.5H47V35.75C47 41.9632 41.9632 47 35.75 47C29.5368 47 24.5 41.9632 24.5 35.75Z" fill="#17B7EA"/>
4 | <path d="M2 35.75C2 41.9632 7.03679 47 13.25 47H24.5V35.75C24.5 29.5368 19.4632 24.5 13.25 24.5C7.03679 24.5 2 29.5368 2 35.75Z" fill="#17B7EA"/>
5 | <path d="M47 13.25C47 7.03679 41.9632 2 35.75 2H24.5V13.25C24.5 19.4632 29.5368 24.5 35.75 24.5C41.9632 24.5 47 19.4632 47 13.25Z" fill="#17B7EA"/>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   
 3 |   ![GitHub repo size](https://img.shields.io/github/repo-size/U7P4L-IN/my-portfolio)
 4 |   ![GitHub stars](https://img.shields.io/github/stars/U7P4L-IN/my-portfolio?style=social)
 5 |   ![GitHub forks](https://img.shields.io/github/forks/U7P4L-IN/my-portfolio?style=social)
 6 |  
 7 |   <br />
 8 |   <br />
 9 | 
10 |   <h2 align="center">Prsonal Portfolio Website</h2>
11 | 
12 |   This Is A Fully Responsive Personal Portfolio Website,<br />Responsive for all devices, build using HTML, CSS, and JavaScript.
13 | 
14 |   <a href="https://u7p4l-in.github.io/my-portfolio/"><strong>➥ Live Demo</strong></a>
15 | 
16 | </div>
17 | 
18 | <br />
19 | 
20 | ### License
21 | 
22 | [MIT](https://choosealicense.com/licenses/mit/)
23 | 


--------------------------------------------------------------------------------
/assets/js/script.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | 
 4 | 
 5 | /**
 6 |  * navbar toggle
 7 |  */
 8 | 
 9 | const header = document.querySelector("[data-header]");
10 | const navToggleBtn = document.querySelector("[data-nav-toggle-btn]");
11 | 
12 | navToggleBtn.addEventListener("click", function () {
13 |   header.classList.toggle("nav-active");
14 |   this.classList.toggle("active");
15 | });
16 | 
17 | /**
18 |  * toggle the navbar when click any navbar link
19 |  */
20 | 
21 | const navbarLinks = document.querySelectorAll("[data-nav-link]");
22 | 
23 | for (let i = 0; i < navbarLinks.length; i++) {
24 |   navbarLinks[i].addEventListener("click", function () {
25 |     header.classList.toggle("nav-active");
26 |     navToggleBtn.classList.toggle("active");
27 |   });
28 | }
29 | 
30 | 
31 | 
32 | 
33 | 
34 | /**
35 |  * back to top & header
36 |  */
37 | 
38 | const backTopBtn = document.querySelector("[data-back-to-top]");
39 | 
40 | window.addEventListener("scroll", function () {
41 |   if (window.scrollY >= 100) {
42 |     header.classList.add("active");
43 |     backTopBtn.classList.add("active");
44 |   } else {
45 |     header.classList.remove("active");
46 |     backTopBtn.classList.remove("active");
47 |   }
48 | });


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |   <title>Utpal Mallick Ongkon - Web Developer from Bangladesh</title>
  9 | 
 10 |   <!-- 
 11 |     - favicon
 12 |   -->
 13 |   <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
 14 | 
 15 |   <!-- 
 16 |     - custom css link
 17 |   -->
 18 |   <link rel="stylesheet" href="./assets/css/style.css">
 19 | 
 20 |   <!-- 
 21 |     - google font link
 22 |   -->
 23 |   <link rel="preconnect" href="https://fonts.googleapis.com">
 24 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 25 |   <link
 26 |     href="https://fonts.googleapis.com/css2?family=Barlow:wght@600;700&family=Open+Sans:wght@400;500;700&family=Poppins:wght@400;600&display=swap"
 27 |     rel="stylesheet">
 28 | </head>
 29 | 
 30 | <body id="top">
 31 | 
 32 |   <!-- 
 33 |     - #HEADER
 34 |   -->
 35 | 
 36 |   <header class="header" data-header>
 37 |     <div class="container">
 38 | 
 39 |       <a href="#">
 40 |         <h1 class="logo">Utpal Mallick Ongkon</h1>
 41 |       </a>
 42 | 
 43 |       <button class="nav-toggle-btn" aria-label="Toggle Menu" data-nav-toggle-btn>
 44 |         <ion-icon name="menu-outline" class="menu-icon"></ion-icon>
 45 |         <ion-icon name="close-outline" class="close-icon"></ion-icon>
 46 |       </button>
 47 | 
 48 |       <nav class="navbar container">
 49 |         <ul class="navbar-list">
 50 | 
 51 |           <li>
 52 |             <a href="#home" class="navbar-link" data-nav-link>Home</a>
 53 |           </li>
 54 | 
 55 |           <li>
 56 |             <a href="#about" class="navbar-link" data-nav-link>About</a>
 57 |           </li>
 58 | 
 59 |           <li>
 60 |             <a href="#portfolio" class="navbar-link" data-nav-link>Portfolio</a>
 61 |           </li>
 62 | 
 63 |           <li>
 64 |             <a href="#skills" class="navbar-link" data-nav-link>Skills</a>
 65 |           </li>
 66 | 
 67 |           <li>
 68 |             <a href="#contact" class="navbar-link" data-nav-link>Contact</a>
 69 |           </li>
 70 | 
 71 |           <li>
 72 |             <a href="#blog" class="navbar-link" data-nav-link>Blog</a>
 73 |           </li>
 74 | 
 75 |           <li>
 76 |             <a href="#" class="btn btn-primary">Download CV</a>
 77 |           </li>
 78 | 
 79 |         </ul>
 80 |       </nav>
 81 | 
 82 |     </div>
 83 |   </header>
 84 | 
 85 | 
 86 | 
 87 | 
 88 | 
 89 |   <main>
 90 |     <article>
 91 | 
 92 |       <!-- 
 93 |         - #HERO
 94 |       -->
 95 | 
 96 |       <section class="hero" id="home">
 97 |         <div class="container">
 98 | 
 99 |           <div class="hero-banner">
100 | 
101 |             <img src="./assets/images/hero-banner.jpg" width="800" height="864" loading="lazy" alt="Ethan's Photo"
102 |               class="img-cover">
103 | 
104 |             <div class="elem elem-1">
105 |               <p class="elem-title">12</p>
106 | 
107 |               <p class="elem-text">Years of Success</p>
108 |             </div>
109 | 
110 |             <div class="elem elem-2">
111 |               <p class="elem-title">800+</p>
112 | 
113 |               <p class="elem-text">Projects Completed</p>
114 |             </div>
115 | 
116 |             <div class="elem elem-3">
117 |               <ion-icon name="trophy"></ion-icon>
118 |             </div>
119 | 
120 |             <img src="./assets/images/rotate-img.png" width="169" height="172" alt="I'm developer from New York"
121 |               class="rotate-img">
122 | 
123 |           </div>
124 | 
125 |           <div class="hero-content">
126 | 
127 |             <h2 class="hero-title">
128 |               <span>Hello I'm</span>
129 |               <strong>Utpal Mallick Ongkon</strong> Web Developer From Bangladesh
130 |             </h2>
131 | 
132 |             <p class="hero-text">
133 |               Undergraduate Developer.Neither Does Any Pleasure Drive Them Away, And They Do Not Know How Long It Will Take Them All.
134 |             </p>
135 | 
136 |             <div class="btn-group">
137 |               <a href="#contact" class="btn btn-primary blue">Get a Quote</a>
138 | 
139 |               <a href="#about" class="btn">About Me</a>
140 |             </div>
141 | 
142 |           </div>
143 | 
144 |         </div>
145 |       </section>
146 | 
147 | 
148 | 
149 | 
150 | 
151 |       <!-- 
152 |         - #ABOUT
153 |       -->
154 | 
155 |       <section class="section about" id="about">
156 |         <div class="container">
157 | 
158 |           <figure class="about-banner">
159 | 
160 |             <img src="./assets/images/about-banner.jpg" width="800" height="652" loading="lazy" alt="Ethan's Photo"
161 |               class="img-cover">
162 | 
163 |             <img src="./assets/images/absolute-image.jpg" width="800" height="717" loading="lazy" alt="Ethan's Photo"
164 |               class="abs-img">
165 | 
166 |             <div class="abs-icon abs-icon-1">
167 |               <ion-icon name="logo-css3"></ion-icon>
168 |             </div>
169 | 
170 |             <div class="abs-icon abs-icon-2">
171 |               <ion-icon name="logo-javascript"></ion-icon>
172 |             </div>
173 | 
174 |             <div class="abs-icon abs-icon-3">
175 |               <ion-icon name="logo-angular"></ion-icon>
176 |             </div>
177 | 
178 |           </figure>
179 | 
180 |           <div class="about-content">
181 | 
182 |             <p class="section-subtitle">I'm a Developer</p>
183 | 
184 |             <h2 class="h2 section-title">I Develop Application that Help People</h2>
185 | 
186 |             <p class="section-text">
187 |               I'm Web developer & Software developer . I enjoy turning complex problems into simple, 
188 |               beautiful and intuitive designs.
189 |             </p>
190 | 
191 |             <p class="section-text">
192 |               My work is to build your website so that it is functional and user-friendly but at the same time attractive. 
193 |               Moreover, I add personal touch to your product and make sure that is eye-catching and easy to use. 
194 |               My aim is to bring across your message and identity in the most creative way. I created web design for many famous brand companies.
195 |             </p>
196 | 
197 |             <a href="#portfolio" class="btn btn-primary blue">View Portfolio</a>
198 | 
199 |           </div>
200 | 
201 |         </div>
202 |       </section>
203 | 
204 | 
205 | 
206 | 
207 | 
208 |       <!-- 
209 |         - #PORTFOLIO
210 |       -->
211 | 
212 |       <section class="section portfolio" id="portfolio">
213 |         <div class="container">
214 | 
215 |           <p class="section-subtitle">Portfolio</p>
216 | 
217 |           <h2 class="h2 section-title">My Amazing Works</h2>
218 | 
219 |           <p class="section-text">
220 |               I enjoy turning complex problems into simple, 
221 |               beautiful and intuitive designs.
222 |           </p>
223 | 
224 |           <ul class="portfolio-list">
225 | 
226 |             <li>
227 |               <a href="#" class="portfolio-card" style="background-image: url('./assets/images/portfolio-1.jpg')">
228 |                 <div class="card-content">
229 | 
230 |                   <p class="card-subtitle">Youtube</p>
231 | 
232 |                   <h3 class="h3 card-title">Web Application for Desiverse</h3>
233 | 
234 |                   <span class="btn-link">
235 |                     <span>View Project</span>
236 | 
237 |                     <ion-icon name="arrow-forward"></ion-icon>
238 |                   </span>
239 | 
240 |                 </div>
241 |               </a>
242 |             </li>
243 | 
244 |             <li>
245 |               <a href="#" class="portfolio-card" style="background-image: url('./assets/images/portfolio-2.jpg')">
246 |                 <div class="card-content">
247 | 
248 |                   <p class="card-subtitle">Vimeo</p>
249 | 
250 |                   <h3 class="h3 card-title">Web Application for Desiverse</h3>
251 | 
252 |                   <span class="btn-link">
253 |                     <span>View Project</span>
254 | 
255 |                     <ion-icon name="arrow-forward"></ion-icon>
256 |                   </span>
257 | 
258 |                 </div>
259 |               </a>
260 |             </li>
261 | 
262 |             <li>
263 |               <a href="#" class="portfolio-card" style="background-image: url('./assets/images/portfolio-3.jpg')">
264 |                 <div class="card-content">
265 | 
266 |                   <p class="card-subtitle">Soundcloud</p>
267 | 
268 |                   <h3 class="h3 card-title">Web Application for Desiverse</h3>
269 | 
270 |                   <span class="btn-link">
271 |                     <span>View Project</span>
272 | 
273 |                     <ion-icon name="arrow-forward"></ion-icon>
274 |                   </span>
275 | 
276 |                 </div>
277 |               </a>
278 |             </li>
279 | 
280 |             <li>
281 |               <a href="#" class="portfolio-card" style="background-image: url('./assets/images/portfolio-4.jpg')">
282 |                 <div class="card-content">
283 | 
284 |                   <p class="card-subtitle">Details</p>
285 | 
286 |                   <h3 class="h3 card-title">Web Application for Desiverse</h3>
287 | 
288 |                   <span class="btn-link">
289 |                     <span>View Project</span>
290 | 
291 |                     <ion-icon name="arrow-forward"></ion-icon>
292 |                   </span>
293 | 
294 |                 </div>
295 |               </a>
296 |             </li>
297 | 
298 |           </ul>
299 | 
300 |         </div>
301 |       </section>
302 | 
303 | 
304 | 
305 | 
306 | 
307 |       <!-- 
308 |         - #SKILLS
309 |       -->
310 | 
311 |       <section class="section skills" id="skills">
312 |         <div class="container">
313 | 
314 |           <p class="section-subtitle">My Skills</p>
315 | 
316 |           <h2 class="h2 section-title">I Develop Skills Regularly</h2>
317 | 
318 |           <p class="section-text">
319 |             I enjoy turning complex problems into simple, 
320 |               beautiful and intuitive designs.
321 |           </p>
322 | 
323 |           <ul class="skills-list">
324 | 
325 |             <li class="skills-item">
326 |               <div class="wrapper" style="width: 95%">
327 |                 <h3 class=" skills-title">CSS</h3>
328 | 
329 |                 <data class="skills-data" value="95">95%</data>
330 |               </div>
331 | 
332 |               <div class="skills-progress-box">
333 |                 <div class="skills-progress" style="width: 95%"></div>
334 |               </div>
335 |             </li>
336 | 
337 |             <li class="skills-item">
338 |               <div class="wrapper" style="width: 75%">
339 |                 <h3 class="skills-title">React</h3>
340 | 
341 |                 <data class="skills-data" value="75">75%</data>
342 |               </div>
343 | 
344 |               <div class="skills-progress-box">
345 |                 <div class="skills-progress" style="width: 75%"></div>
346 |               </div>
347 |             </li>
348 | 
349 |             <li class="skills-item">
350 |               <div class="wrapper" style="width: 90%">
351 |                 <h3 class="skills-title">MongoDB</h3>
352 | 
353 |                 <data class="skills-data" value="90">90%</data>
354 |               </div>
355 | 
356 |               <div class="skills-progress-box">
357 |                 <div class="skills-progress" style="width: 90%"></div>
358 |               </div>
359 |             </li>
360 | 
361 |             <li class="skills-item">
362 |               <div class="wrapper" style="width: 70%">
363 |                 <h3 class="skills-title">Python</h3>
364 | 
365 |                 <data class="skills-data" value="70">70%</data>
366 |               </div>
367 | 
368 |               <div class="skills-progress-box">
369 |                 <div class="skills-progress" style="width: 70%"></div>
370 |               </div>
371 |             </li>
372 | 
373 |             <li class="skills-item">
374 |               <div class="wrapper" style="width: 80%">
375 |                 <h3 class="skills-title">PHP</h3>
376 | 
377 |                 <data class="skills-data" value="80">80%</data>
378 |               </div>
379 | 
380 |               <div class="skills-progress-box">
381 |                 <div class="skills-progress" style="width: 80%"></div>
382 |               </div>
383 |             </li>
384 | 
385 |             <li class="skills-item">
386 |               <div class="wrapper" style="width: 75%">
387 |                 <h3 class="skills-title">JavaScript</h3>
388 | 
389 |                 <data class="skills-data" value="75">75%</data>
390 |               </div>
391 | 
392 |               <div class="skills-progress-box">
393 |                 <div class="skills-progress" style="width: 75%"></div>
394 |               </div>
395 |             </li>
396 | 
397 |           </ul>
398 | 
399 |         </div>
400 |       </section>
401 | 
402 | 
403 | 
404 | 
405 | 
406 |       <!-- 
407 |         - #CONTACT
408 |       -->
409 | 
410 |       <section class="section contact" id="contact">
411 |         <div class="container">
412 | 
413 |           <div class="contact-card">
414 | 
415 |             <p class="card-subtitle">Don't be shy</p>
416 | 
417 |             <h2 class="h2 section-title">Drop Me a Line</h2>
418 | 
419 |             <div class="wrapper">
420 | 
421 |               <form action="" class="contact-form">
422 | 
423 |                 <input type="text" name="name" placeholder="Name" required class="contact-input">
424 | 
425 |                 <input type="email" name="email" placeholder="Email" required class="contact-input">
426 | 
427 |                 <textarea name="message" placeholder="Message" required class="contact-input"></textarea>
428 | 
429 |                 <button type="submit" class="btn-submit">Submit Message</button>
430 | 
431 |               </form>
432 | 
433 |               <ul class="contact-list">
434 | 
435 |                 <li class="contact-item">
436 | 
437 |                   <div class="contact-icon">
438 |                     <ion-icon name="location"></ion-icon>
439 |                   </div>
440 | 
441 |                   <div>
442 |                     <h3 class="contact-item-title">Address</h3>
443 | 
444 |                     <address class="contact-item-link">
445 |                       120, Cox’s Bazar, Bangladesh
446 |                     </address>
447 |                   </div>
448 | 
449 |                 </li>
450 | 
451 |                 <li class="contact-item">
452 | 
453 |                   <div class="contact-icon">
454 |                     <ion-icon name="mail"></ion-icon>
455 |                   </div>
456 | 
457 |                   <div>
458 |                     <h3 class="contact-item-title">Email</h3>
459 | 
460 |                     <a href="mailto:hello@utpal.com" class="contact-item-link">hello@utpal.com</a>
461 |                   </div>
462 | 
463 |                 </li>
464 | 
465 |                 <li class="contact-item">
466 | 
467 |                   <div class="contact-icon">
468 |                     <ion-icon name="call"></ion-icon>
469 |                   </div>
470 | 
471 |                   <div>
472 |                     <h3 class="contact-item-title">Phone</h3>
473 | 
474 |                     <a href="tel:+1234567890" class="contact-item-link">+123 456 7890</a>
475 |                   </div>
476 | 
477 |                 </li>
478 | 
479 |               </ul>
480 | 
481 |             </div>
482 | 
483 |           </div>
484 | 
485 |         </div>
486 |       </section>
487 | 
488 | 
489 | 
490 | 
491 | 
492 |       <!-- 
493 |         - #BLOG
494 |       -->
495 | 
496 |       <section class="section blog" id="blog">
497 |         <div class="container">
498 | 
499 |           <p class="section-subtitle">Latest News</p>
500 | 
501 |           <h2 class="h2 section-title">Checkout My Recent Blogs</h2>
502 | 
503 |           <p class="section-text">
504 |             I enjoy turning complex problems into simple, 
505 |               beautiful and intuitive designs.
506 |           </p>
507 | 
508 |           <ul class="blog-list">
509 | 
510 |             <li>
511 |               <div class="blog-card">
512 | 
513 |                 <figure class="card-banner">
514 |                   <a href="#">
515 |                     <img src="./assets/images/blog-1.jpg" width="1181" height="843" loading="lazy"
516 |                       alt="Shoha Says when the musics over turn off the light" class="img-cover">
517 |                   </a>
518 |                 </figure>
519 | 
520 |                 <a href="#" class="card-tag">Web Development</a>
521 | 
522 |                 <h3 class="card-title">
523 |                   <a href="#">Shoha Says when the musics over turn off the light</a>
524 |                 </h3>
525 | 
526 |               </div>
527 |             </li>
528 | 
529 |             <li>
530 |               <div class="blog-card">
531 | 
532 |                 <figure class="card-banner">
533 |                   <a href="#">
534 |                     <img src="./assets/images/blog-2.jpg" width="1181" height="843" loading="lazy"
535 |                       alt="Shoha Says when the musics over turn off the light" class="img-cover">
536 |                   </a>
537 |                 </figure>
538 | 
539 |                 <a href="#" class="card-tag">Web Development</a>
540 | 
541 |                 <h3 class="card-title">
542 |                   <a href="#">Shoha Says when the musics over turn off the light</a>
543 |                 </h3>
544 | 
545 |               </div>
546 |             </li>
547 | 
548 |             <li>
549 |               <div class="blog-card">
550 | 
551 |                 <figure class="card-banner">
552 |                   <a href="#">
553 |                     <img src="./assets/images/blog-3.jpg" width="1181" height="843" loading="lazy"
554 |                       alt="Shoha Says when the musics over turn off the light" class="img-cover">
555 |                   </a>
556 |                 </figure>
557 | 
558 |                 <a href="#" class="card-tag">Web Development</a>
559 | 
560 |                 <h3 class="card-title">
561 |                   <a href="#">Shoha Says when the musics over turn off the light</a>
562 |                 </h3>
563 | 
564 |               </div>
565 |             </li>
566 | 
567 |           </ul>
568 | 
569 |         </div>
570 |       </section>
571 | 
572 |     </article>
573 |   </main>
574 | 
575 | 
576 | 
577 | 
578 | 
579 |   <!-- 
580 |     - #FOOTER
581 |   -->
582 | 
583 |   <footer class="footer">
584 |     <div class="container">
585 | 
586 |       <p class="copyright">
587 |         &copy; 2022 <a href="#" class="copyright-link">U7P4L-IN</a>. All Rights Reseverd
588 |       </p>
589 | 
590 |       <ul class="footer-list">
591 |         <li>
592 |           <a href="#" class="footer-link">Terms & Condition</a>
593 |         </li>
594 | 
595 |         <li>
596 |           <a href="#" class="footer-link">Privacy Policy</a>
597 |         </li>
598 |       </ul>
599 | 
600 |     </div>
601 |   </footer>
602 | 
603 | 
604 | 
605 | 
606 | 
607 |   <!-- 
608 |     - #BACK TO TOP
609 |   -->
610 | 
611 |   <a href="#top" class="back-to-top" data-back-to-top>BACK TOP</a>
612 | 
613 | 
614 | 
615 | 
616 | 
617 |   <!-- 
618 |     - custom js link
619 |   -->
620 |   <script src="./assets/js/script.js"></script>
621 | 
622 |   <!-- 
623 |     - ionicon link
624 |   -->
625 |   <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
626 |   <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
627 | 
628 | </body>
629 | 
630 | </html>


--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
   1 | /*-----------------------------------*\
   2 |   #style.css
   3 | \*-----------------------------------*/
   4 | 
   5 | /**
   6 |  * copyright 2022 codewithsadee
   7 |  */
   8 | 
   9 | 
  10 | 
  11 | 
  12 | 
  13 | /*-----------------------------------*\
  14 |   #CUSTOM PROPERTY
  15 | \*-----------------------------------*/
  16 | 
  17 | :root {
  18 | 
  19 |   /**
  20 |    * colors
  21 |    */
  22 | 
  23 |   --cadet-blue-crayola: hsl(240, 10%, 70%);
  24 |   --gold-web-golden: hsl(50, 100%, 54%);
  25 |   --vivid-sky-blue: hsl(196, 84%, 63%);
  26 |   --midnight-blue: hsl(231, 83%, 25%);
  27 |   --minion-yellow: hsl(50, 100%, 64%);
  28 |   --independence: hsl(225, 24%, 27%);
  29 |   --orange-soda: hsl(7, 96%, 61%);
  30 |   --space-cadet: hsl(243, 23%, 18%);
  31 |   --fiery-rose: hsl(353, 83%, 65%);
  32 |   --klein-blue: hsl(230, 80%, 39%);
  33 |   --bluetiful: hsl(222, 88%, 55%);
  34 |   --glaucous: hsl(230, 52%, 63%);
  35 |   --manatee: hsl(254, 7%, 65%);
  36 |   --rufous: hsl(2, 85%, 35%);
  37 |   --black: hsl(0, 0%, 0%);
  38 |   --white: hsl(0, 0%, 100%);
  39 | 
  40 |   /**
  41 |    * typography
  42 |    */
  43 | 
  44 |   --ff-open-sans: 'Open Sans', sans-serif;
  45 |   --ff-barlow: 'Barlow', sans-serif;
  46 |   --ff-poppins: 'Poppins', sans-serif;
  47 | 
  48 |   --fs-1: 3.5rem;
  49 |   --fs-2: 3rem;
  50 |   --fs-3: 2.4rem;
  51 |   --fs-4: 2rem;
  52 |   --fs-5: 1.8rem;
  53 |   --fs-6: 1.3rem;
  54 | 
  55 |   --fw-600: 600;
  56 |   --fw-700: 700;
  57 | 
  58 |   /**
  59 |    * border radius
  60 |    */
  61 | 
  62 |   --radius-5: 5px;
  63 |   --radius-10: 10px;
  64 |   --radius-15: 15px;
  65 |   --radius-20: 20px;
  66 | 
  67 |   /**
  68 |    * spacing
  69 |    */
  70 | 
  71 |   --section-padding: 60px;
  72 | 
  73 |   /**
  74 |    * shadow
  75 |    */
  76 | 
  77 |   --shadow: 0 -5px 10px var(--manatee);
  78 | 
  79 |   /**
  80 |    * transition
  81 |    */
  82 | 
  83 |   --transition-1: 0.05s ease;
  84 |   --transition-2: 0.25s ease;
  85 |   --cubic-out: cubic-bezier(0.33, 0.85, 0.56, 1.02);
  86 | 
  87 | }
  88 | 
  89 | 
  90 | 
  91 | 
  92 | 
  93 | /*-----------------------------------*\
  94 |   #RESET
  95 | \*-----------------------------------*/
  96 | 
  97 | *,
  98 | *::before,
  99 | *::after {
 100 |   margin: 0;
 101 |   padding: 0;
 102 |   box-sizing: border-box;
 103 | }
 104 | 
 105 | li { list-style: none; }
 106 | 
 107 | a {
 108 |   text-decoration: none;
 109 |   color: inherit;
 110 | }
 111 | 
 112 | a,
 113 | img,
 114 | span,
 115 | input,
 116 | strong,
 117 | button,
 118 | textarea,
 119 | ion-icon { display: block; }
 120 | 
 121 | img { height: auto; }
 122 | 
 123 | ion-icon {
 124 |   pointer-events: none;
 125 |   color: var(--white);
 126 | }
 127 | 
 128 | button,
 129 | input,
 130 | textarea {
 131 |   background: none;
 132 |   border: none;
 133 |   font: inherit;
 134 | }
 135 | 
 136 | button { cursor: pointer; }
 137 | 
 138 | input,
 139 | textarea { width: 100%; }
 140 | 
 141 | address { font-style: normal; }
 142 | 
 143 | html {
 144 |   font-size: 10px;
 145 |   font-family: var(--ff-open-sans);
 146 |   scroll-behavior: smooth;
 147 | }
 148 | 
 149 | body {
 150 |   background-color: var(--space-cadet);
 151 |   color: var(--cadet-blue-crayola);
 152 |   font-size: 1.6rem;
 153 |   line-height: 1.6;
 154 |   overflow-x: hidden;
 155 | }
 156 | 
 157 | :focus-visible { outline-offset: 4px; }
 158 | 
 159 | ::-webkit-scrollbar { width: 15px; }
 160 | 
 161 | ::-webkit-scrollbar-track { background-color: hsl(0, 0%, 95%); }
 162 | 
 163 | ::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }
 164 | 
 165 | ::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }
 166 | 
 167 | 
 168 | 
 169 | 
 170 | 
 171 | /*-----------------------------------*\
 172 |   #REUSED STYLE
 173 | \*-----------------------------------*/
 174 | 
 175 | .container { padding-inline: 20px; }
 176 | 
 177 | .btn {
 178 |   color: var(--white);
 179 |   font-family: var(--ff-barlow);
 180 |   font-size: var(--fs-5);
 181 |   font-weight: var(--fw-600);
 182 |   max-width: max-content;
 183 |   padding: var(--padding, 10px 40px);
 184 |   border-radius: 50px;
 185 |   transition: var(--transition-2);
 186 | }
 187 | 
 188 | .btn-primary.blue { background-color: var(--klein-blue); }
 189 | 
 190 | .btn-primary.blue:is(:hover, :focus) { background-color: var(--orange-soda); }
 191 | 
 192 | .img-cover {
 193 |   width: 100%;
 194 |   height: 100%;
 195 |   object-fit: cover;
 196 | }
 197 | 
 198 | .section { padding-block: var(--section-padding); }
 199 | 
 200 | .section-subtitle {
 201 |   color: var(--orange-soda);
 202 |   font-family: var(--ff-barlow);
 203 |   font-size: var(--fs-4);
 204 |   text-align: center;
 205 | }
 206 | 
 207 | .h2,
 208 | .h3 {
 209 |   color: var(--white);
 210 |   font-family: var(--ff-barlow);
 211 |   font-weight: var(--fw-600);
 212 |   line-height: 1.3;
 213 | }
 214 | 
 215 | .h2 { font-size: var(--fs-2); }
 216 | 
 217 | .h3 { font-size: var(--fs-3); }
 218 | 
 219 | .section-title,
 220 | .section-text { text-align: center; }
 221 | 
 222 | 
 223 | 
 224 | 
 225 | 
 226 | /*-----------------------------------*\
 227 |   #HEADER
 228 | \*-----------------------------------*/
 229 | 
 230 | .header {
 231 |   position: fixed;
 232 |   padding-block: 15px;
 233 |   width: 100%;
 234 |   background-color: var(--space-cadet);
 235 |   height: 65px;
 236 |   box-shadow: var(--shadow);
 237 |   overflow: hidden;
 238 |   transition: 0.25s var(--cubic-out);
 239 |   z-index: 4;
 240 | }
 241 | 
 242 | .header.nav-active {
 243 |   height: 335px;
 244 |   transition-duration: 0.35s;
 245 | }
 246 | 
 247 | .header > .container {
 248 |   display: flex;
 249 |   justify-content: space-between;
 250 |   align-items: center;
 251 | }
 252 | 
 253 | .logo {
 254 |   color: var(--white);
 255 |   font-family: var(--ff-poppins);
 256 |   font-size: 2.4rem;
 257 | }
 258 | 
 259 | .nav-toggle-btn { font-size: 3rem; }
 260 | 
 261 | .nav-toggle-btn .close-icon,
 262 | .nav-toggle-btn.active .menu-icon { display: none; }
 263 | 
 264 | .nav-toggle-btn.active .close-icon,
 265 | .nav-toggle-btn .menu-icon { display: block; }
 266 | 
 267 | .navbar {
 268 |   position: absolute;
 269 |   top: 65px;
 270 |   left: 0;
 271 |   width: 100%;
 272 |   padding-inline: 20px;
 273 |   visibility: hidden;
 274 |   opacity: 0;
 275 |   transition: var(--transition-2);
 276 | }
 277 | 
 278 | .header.nav-active .navbar {
 279 |   visibility: visible;
 280 |   opacity: 1;
 281 | }
 282 | 
 283 | .navbar-link {
 284 |   color: var(--white);
 285 |   font-family: var(--ff-barlow);
 286 |   padding-block: 3px;
 287 |   transition: var(--transition-1);
 288 | }
 289 | 
 290 | .navbar-link:is(:hover, :focus) { color: var(--orange-soda); }
 291 | 
 292 | .navbar .btn {
 293 |   background-color: var(--orange-soda);
 294 |   margin-block-start: 15px;
 295 | }
 296 | 
 297 | 
 298 | 
 299 | 
 300 | 
 301 | /*-----------------------------------*\
 302 |   #HERO
 303 | \*-----------------------------------*/
 304 | 
 305 | .elem,
 306 | .rotate-img { display: none; }
 307 | 
 308 | .hero {
 309 |   background-image: url("../images/hero-bg.jpg");
 310 |   background-repeat: no-repeat;
 311 |   background-size: cover;
 312 |   background-position: center;
 313 |   padding-block: 100px var(--section-padding);
 314 |   min-height: 100vh;
 315 |   display: grid;
 316 |   place-items: center;
 317 | }
 318 | 
 319 | .hero-banner {
 320 |   width: 150px;
 321 |   height: 172px;
 322 |   background-color: var(--independence);
 323 |   border-radius: var(--radius-10);
 324 |   margin-inline: auto;
 325 |   margin-block-end: 30px;
 326 | }
 327 | 
 328 | .hero-banner img { border-radius: inherit; }
 329 | 
 330 | .hero-content {
 331 |   text-align: center;
 332 |   color: var(--white);
 333 | }
 334 | 
 335 | .hero-title {
 336 |   font-family: var(--ff-barlow);
 337 |   font-size: var(--fs-5);
 338 |   font-weight: var(--fw-600);
 339 |   line-height: 1.3;
 340 |   margin-block-end: 14px;
 341 | }
 342 | 
 343 | .hero-title strong {
 344 |   font-size: var(--fs-1);
 345 |   font-weight: inherit;
 346 |   margin-block-end: 8px;
 347 | }
 348 | 
 349 | .hero-text { margin-block-end: 25px; }
 350 | 
 351 | .btn-group {
 352 |   display: flex;
 353 |   flex-wrap: wrap;
 354 |   justify-content: center;
 355 |   align-items: center;
 356 |   gap: 10px;
 357 | }
 358 | 
 359 | 
 360 | 
 361 | 
 362 | 
 363 | /*-----------------------------------*\
 364 |   #ABOUT
 365 | \*-----------------------------------*/
 366 | 
 367 | .abs-img,
 368 | .abs-icon { display: none; }
 369 | 
 370 | .about { padding-block-start: 120px; }
 371 | 
 372 | .about-banner {
 373 |   background-color: var(--independence);
 374 |   border-radius: var(--radius-10);
 375 |   margin-block-end: 30px;
 376 | }
 377 | 
 378 | .about-banner > .img-cover { border-radius: inherit; }
 379 | 
 380 | .about :is(.section-title, .section-subtitle, .section-text) { text-align: left; }
 381 | 
 382 | .about :is(.section-title, .section-text) { margin-block-end: 30px; }
 383 | 
 384 | 
 385 | 
 386 | 
 387 | 
 388 | /*-----------------------------------*\
 389 |   #PORTFOLIO
 390 | \*-----------------------------------*/
 391 | 
 392 | .portfolio .section-title { margin-block-end: 18px; }
 393 | 
 394 | .portfolio .section-text { margin-block-end: 80px; }
 395 | 
 396 | .portfolio-list {
 397 |   display: grid;
 398 |   gap: 60px;
 399 | }
 400 | 
 401 | .portfolio-card {
 402 |   background-color: var(--independence);
 403 |   background-repeat: no-repeat;
 404 |   background-size: cover;
 405 |   background-position: center;
 406 |   padding: 120px 20px;
 407 |   border-radius: var(--radius-20);
 408 |   font-family: var(--ff-barlow);
 409 |   color: var(--white);
 410 |   font-weight: var(--fw-600);
 411 |   transition: var(--transition-2);
 412 | }
 413 | 
 414 | .portfolio-list > li:nth-child(even) .card-content { margin-inline-start: auto; }
 415 | 
 416 | .portfolio-card .card-subtitle {
 417 |   color: var(--orange-soda);
 418 |   margin-block-end: 5px;
 419 | }
 420 | 
 421 | .portfolio-card .card-title {
 422 |   max-width: 20ch;
 423 |   margin-block-end: 20px;
 424 | }
 425 | 
 426 | .portfolio-card .btn-link {
 427 |   display: flex;
 428 |   align-items: center;
 429 |   gap: 5px;
 430 |   font-size: var(--fs-6);
 431 |   text-transform: uppercase;
 432 | }
 433 | 
 434 | .portfolio-card .btn-link ion-icon {
 435 |   color: var(--orange-soda);
 436 |   font-size: 1.6rem;
 437 | }
 438 | 
 439 | 
 440 | 
 441 | 
 442 | 
 443 | /*-----------------------------------*\
 444 |   #SKILLS
 445 | \*-----------------------------------*/
 446 | 
 447 | .skills .section-title { margin-block-end: 20px; }
 448 | 
 449 | .skills .section-text { margin-block-end: 70px; }
 450 | 
 451 | .skills-list {
 452 |   display: grid;
 453 |   gap: 25px;
 454 | }
 455 | 
 456 | .skills-item .wrapper {
 457 |   display: flex;
 458 |   justify-content: space-between;
 459 |   align-items: center;
 460 |   margin-block-end: 10px;
 461 | }
 462 | 
 463 | .skills-title,
 464 | .skills-data {
 465 |   color: var(--white);
 466 |   font-size: var(--fs-5);
 467 |   font-family: var(--ff-barlow);
 468 |   font-weight: var(--fw-600);
 469 | }
 470 | 
 471 | .skills-progress-box {
 472 |   background-color: var(--white);
 473 |   height: 8px;
 474 |   border-radius: var(--radius-10);
 475 | }
 476 | 
 477 | .skills-progress {
 478 |   background-color: var(--orange-soda);
 479 |   height: 100%;
 480 |   border-radius: inherit;
 481 | }
 482 | 
 483 | 
 484 | 
 485 | 
 486 | 
 487 | /*-----------------------------------*\
 488 |   #CONTACT
 489 | \*-----------------------------------*/
 490 | 
 491 | .contact-card {
 492 |   background-color: var(--midnight-blue);
 493 |   padding: 50px 25px;
 494 |   border-radius: var(--radius-20);
 495 | }
 496 | 
 497 | .contact-card .card-subtitle {
 498 |   color: var(--orange-soda);
 499 |   font-family: var(--ff-barlow);
 500 |   font-size: var(--fs-4);
 501 |   font-weight: var(--fw-600);
 502 | }
 503 | 
 504 | .contact .section-title {
 505 |   text-align: left;
 506 |   margin-block-end: 30px;
 507 | }
 508 | 
 509 | .contact-form { margin-block-end: 50px; }
 510 | 
 511 | .contact-input {
 512 |   background-color: var(--white);
 513 |   color: var(--manatee);
 514 |   border-radius: var(--radius-5);
 515 |   padding: 15px 25px;
 516 |   font-size: var(--fs-5);
 517 |   margin-block-end: 15px;
 518 | }
 519 | 
 520 | .contact-input::placeholder { color: inherit; }
 521 | 
 522 | textarea.contact-input {
 523 |   resize: vertical;
 524 |   min-height: 100px;
 525 |   height: 180px;
 526 |   max-height: 300px;
 527 | }
 528 | 
 529 | .btn-submit {
 530 |   background-color: var(--orange-soda);
 531 |   color: var(--white);
 532 |   font-family: var(--ff-barlow);
 533 |   font-size: var(--fs-5);
 534 |   width: 100%;
 535 |   padding: 10px;
 536 |   border-radius: var(--radius-5);
 537 |   transition: var(--transition-2);
 538 | }
 539 | 
 540 | .btn-submit:is(:hover, :focus) {
 541 |   background-color: var(--white);
 542 |   color: var(--black);
 543 | }
 544 | 
 545 | .contact-item {
 546 |   display: flex;
 547 |   align-items: center;
 548 |   gap: 15px;
 549 | }
 550 | 
 551 | .contact-item:not(:last-child) { margin-block-end: 20px; }
 552 | 
 553 | .contact-icon {
 554 |   background-color: var(--glaucous);
 555 |   font-size: 2.4rem;
 556 |   padding: 20px;
 557 |   border-radius: 50%;
 558 | }
 559 | 
 560 | .contact-item-title {
 561 |   color: var(--white);
 562 |   font-family: var(--ff-barlow);
 563 |   font-size: var(--fs-4);
 564 |   font-weight: var(--fw-600);
 565 | }
 566 | 
 567 | .contact-item-link { transition: var(--transition-1); }
 568 | 
 569 | .contact-item-link:not(address):is(:hover, :focus) { color: var(--white); }
 570 | 
 571 | 
 572 | 
 573 | 
 574 | 
 575 | /*-----------------------------------*\
 576 |   #BLOG
 577 | \*-----------------------------------*/
 578 | 
 579 | .blog { padding-block-end: 120px; }
 580 | 
 581 | .blog .section-title { margin-block-end: 20px; }
 582 | 
 583 | .blog .section-text { margin-block-end: 80px; }
 584 | 
 585 | .blog-list {
 586 |   display: grid;
 587 |   gap: 40px;
 588 | }
 589 | 
 590 | .blog-card { font-family: var(--ff-barlow); }
 591 | 
 592 | .blog-card .card-banner {
 593 |   background-color: var(--independence);
 594 |   border-radius: var(--radius-15);
 595 |   overflow: hidden;
 596 |   margin-block-end: 20px;
 597 | }
 598 | 
 599 | .blog-card .card-banner img { transition: var(--transition-2); }
 600 | 
 601 | .blog-card .card-banner a:is(:hover, :focus) img { transform: scale(1.1); }
 602 | 
 603 | .blog-card .card-banner:focus-within {
 604 |   outline: 2px solid var(--white);
 605 |   outline-offset: 4px;
 606 | }
 607 | 
 608 | .blog-card .card-tag {
 609 |   color: var(--orange-soda);
 610 |   margin-block-end: 5px;
 611 | }
 612 | 
 613 | .blog-card .card-title {
 614 |   color: var(--white);
 615 |   font-weight: var(--fw-600);
 616 |   line-height: 1.3;
 617 | }
 618 | 
 619 | .blog-card .card-title a { transition: var(--transition-2); }
 620 | 
 621 | .blog-card .card-title a:is(:hover, :focus) { color: var(--orange-soda); }
 622 | 
 623 | 
 624 | 
 625 | 
 626 | 
 627 | /*-----------------------------------*\
 628 |   #FOOTER
 629 | \*-----------------------------------*/
 630 | 
 631 | .footer {
 632 |   background-color: var(--independence);
 633 |   padding-block: 60px;
 634 | }
 635 | 
 636 | .copyright {
 637 |   max-width: max-content;
 638 |   margin-inline: auto;
 639 |   margin-block-end: 10px;
 640 | }
 641 | 
 642 | .copyright-link {
 643 |   display: inline-block;
 644 |   transition: var(--transition-2);
 645 |   font-weight: var(--fw-600);
 646 | }
 647 | 
 648 | .copyright-link:is(:hover, :focus) { color: var(--white); }
 649 | 
 650 | .footer-list {
 651 |   max-width: max-content;
 652 |   margin-inline: auto;
 653 | }
 654 | 
 655 | .footer-list * { display: inline-block; }
 656 | 
 657 | .footer-list > li:not(:last-child) { margin-inline-end: 40px; }
 658 | 
 659 | .footer-link { transition: var(--transition-2); }
 660 | 
 661 | .footer-link:is(:hover, :focus) { color: var(--white); }
 662 | 
 663 | 
 664 | 
 665 | 
 666 | 
 667 | /*-----------------------------------*\
 668 |   #BACK TO TOP
 669 | \*-----------------------------------*/
 670 | 
 671 | .back-to-top {
 672 |   color: var(--white);
 673 |   font-size: 1.3rem;
 674 |   position: fixed;
 675 |   bottom: 160px;
 676 |   right: -30px;
 677 |   transform: rotate(0.25turn);
 678 |   opacity: 0;
 679 |   visibility: hidden;
 680 |   transition: var(--transition-2);
 681 |   z-index: 1;
 682 | }
 683 | 
 684 | .back-to-top.active {
 685 |   right: -5px;
 686 |   opacity: 1;
 687 |   visibility: visible;
 688 | }
 689 | 
 690 | .back-to-top::after {
 691 |   content: "";
 692 |   position: absolute;
 693 |   top: 10px;
 694 |   left: calc(100% + 7px);
 695 |   width: 100px;
 696 |   height: 1px;
 697 |   background-color: var(--white);
 698 | }
 699 | 
 700 | 
 701 | 
 702 | 
 703 | 
 704 | /*-----------------------------------*\
 705 |   #MEDIA QUERIES
 706 | \*-----------------------------------*/
 707 | 
 708 | /**
 709 |  * responsive for larger than 600px screen
 710 |  */
 711 | 
 712 | @media (min-width: 600px) {
 713 | 
 714 |   /**
 715 |    * PORTFOLIO
 716 |    */
 717 | 
 718 |   .portfolio-list li:nth-child(even) .card-content { margin-inline-start: 50%; }
 719 | 
 720 | }
 721 | 
 722 | 
 723 | 
 724 | 
 725 | 
 726 | /**
 727 |  * responsive for larger than 768px screen
 728 |  */
 729 | 
 730 | @media (min-width: 768px) {
 731 | 
 732 |   /**
 733 |    * PORTFOLIO
 734 |    */
 735 | 
 736 |   .portfolio-card {
 737 |     background-size: 115%;
 738 |     padding-inline: 80px;
 739 |   }
 740 | 
 741 |   .portfolio-card:is(:hover, :focus) { background-size: 130%; }
 742 | 
 743 | 
 744 | 
 745 |   /**
 746 |    * SKILLS, BLOG
 747 |    */
 748 | 
 749 |   .skills-list,
 750 |   .blog-list {
 751 |     grid-template-columns: 1fr 1fr;
 752 |     column-gap: 50px;
 753 |   }
 754 | 
 755 | }
 756 | 
 757 | 
 758 | 
 759 | 
 760 | 
 761 | /**
 762 |  * responsive for larger than 992px screen
 763 |  */
 764 | 
 765 | @media (min-width: 992px) {
 766 | 
 767 |   /**
 768 |    * CUSTOM PROPERTY
 769 |    */
 770 | 
 771 |   :root {
 772 | 
 773 |     /**
 774 |      * typography
 775 |      */
 776 | 
 777 |     --fs-1: 6.4rem;
 778 |     --fs-2: 3.5rem;
 779 |     --fs-3: 3.6rem;
 780 | 
 781 |     /**
 782 |      * spacing
 783 |      */
 784 | 
 785 |     --section-padding: 80px;
 786 | 
 787 |   }
 788 | 
 789 | 
 790 | 
 791 |   /**
 792 |    * REUSED STYLE
 793 |    */
 794 | 
 795 |   .container {
 796 |     max-width: 1050px;
 797 |     margin-inline: auto;
 798 |   }
 799 | 
 800 | 
 801 | 
 802 |   /**
 803 |    * HEADER
 804 |    */
 805 | 
 806 |   .nav-toggle-btn { display: none; }
 807 | 
 808 |   .header,
 809 |   .header.nav-active {
 810 |     background-color: transparent;
 811 |     box-shadow: none;
 812 |     height: unset;
 813 |     padding-block: 30px;
 814 |   }
 815 | 
 816 |   .header.active {
 817 |     background-color: var(--space-cadet);
 818 |     box-shadow: var(--shadow);
 819 |     padding-block: 20px;
 820 |   }
 821 | 
 822 |   .navbar { all: unset; }
 823 | 
 824 |   .navbar-list {
 825 |     display: flex;
 826 |     align-items: center;
 827 |     gap: 30px;
 828 |   }
 829 | 
 830 |   .navbar .btn {
 831 |     margin-block-start: 0;
 832 |     --padding: 7px 30px;
 833 |   }
 834 | 
 835 | 
 836 | 
 837 |   /**
 838 |    * HERO
 839 |    */
 840 | 
 841 |   .hero .container {
 842 |     display: grid;
 843 |     grid-template-columns: 1fr 1fr;
 844 |     align-items: center;
 845 |   }
 846 | 
 847 |   .hero-content { text-align: left; }
 848 | 
 849 |   .btn-group { justify-content: flex-start; }
 850 | 
 851 |   .hero-title span { font-size: 3rem; }
 852 | 
 853 |   .hero-title {
 854 |     --fs-5: 2.2rem;
 855 |     margin-block-end: 25px;
 856 |   }
 857 | 
 858 |   .hero-text {
 859 |     margin-block-end: 25px;
 860 |     font-size: var(--fs-5);
 861 |   }
 862 | 
 863 |   .hero-banner {
 864 |     position: relative;
 865 |     margin-block-end: 0;
 866 |     order: 1;
 867 |     width: 340px;
 868 |     height: 390px;
 869 |     margin-inline: 0;
 870 |     margin-inline-start: auto;
 871 |   }
 872 | 
 873 |   .elem {
 874 |     position: absolute;
 875 |     display: flex;
 876 |     align-items: center;
 877 |     gap: 10px;
 878 |     background-color: var(--white);
 879 |     border-radius: var(--radius-10);
 880 |     padding: 20px;
 881 |   }
 882 | 
 883 |   .elem-1 {
 884 |     top: 20px;
 885 |     left: -130px;
 886 |   }
 887 | 
 888 |   .elem-1 .elem-title { color: var(--vivid-sky-blue); }
 889 | 
 890 |   .elem-2 {
 891 |     bottom: 30px;
 892 |     right: -80px;
 893 |   }
 894 | 
 895 |   .elem-2 .elem-title { color: var(--fiery-rose); }
 896 | 
 897 |   .elem-title {
 898 |     font-size: 4.5rem;
 899 |     line-height: 1.1;
 900 |   }
 901 | 
 902 |   .elem-text {
 903 |     max-width: 10ch;
 904 |     color: var(--black);
 905 |     font-weight: var(--fw-700);
 906 |     line-height: 1.1;
 907 |   }
 908 | 
 909 |   .elem-3 {
 910 |     top: -40px;
 911 |     right: -30px;
 912 |   }
 913 | 
 914 |   .elem-3 ion-icon {
 915 |     color: var(--minion-yellow);
 916 |     font-size: 6rem;
 917 |   }
 918 | 
 919 |   .rotate-img {
 920 |     display: block;
 921 |     position: absolute;
 922 |     bottom: -60px;
 923 |     left: -60px;
 924 |     width: 120px;
 925 |     animation: rotate360 15s linear infinite reverse;
 926 |   }
 927 | 
 928 |   @keyframes rotate360 {
 929 |     0% { transform: rotate(0); }
 930 |     100% { transform: rotate(1turn); }
 931 |   }
 932 | 
 933 | 
 934 | 
 935 |   /**
 936 |    * ABOUT
 937 |    */
 938 | 
 939 |   .about { padding-block: 180px; }
 940 | 
 941 |   .about .container {
 942 |     display: grid;
 943 |     grid-template-columns: 1fr 1fr;
 944 |     align-items: center;
 945 |     gap: 80px;
 946 |   }
 947 | 
 948 |   .about-banner {
 949 |     position: relative;
 950 |     margin-block-end: 0;
 951 |   }
 952 | 
 953 |   .abs-img,
 954 |   .abs-icon {
 955 |     display: block;
 956 |     position: absolute;
 957 |   }
 958 | 
 959 |   .abs-img {
 960 |     width: 250px;
 961 |     height: 250px;
 962 |     object-fit: cover;
 963 |     border-radius: inherit;
 964 |     bottom: -150px;
 965 |     left: -100px;
 966 |   }
 967 | 
 968 |   .abs-icon {
 969 |     font-size: 5rem;
 970 |     padding: 20px;
 971 |     border-radius: inherit;
 972 |   }
 973 | 
 974 |   .abs-icon-1 {
 975 |     top: 50px;
 976 |     left: -120px;
 977 |     background-color: var(--bluetiful);
 978 |   }
 979 | 
 980 |   .abs-icon-2 {
 981 |     top: -40px;
 982 |     right: -40px;
 983 |     background-color: var(--gold-web-golden);
 984 |   }
 985 | 
 986 |   .abs-icon-3 {
 987 |     bottom: -40px;
 988 |     left: 250px;
 989 |     background-color: var(--rufous);
 990 |   }
 991 | 
 992 | 
 993 | 
 994 |   /**
 995 |    * PORTFOLIO
 996 |    */
 997 | 
 998 |   .portfolio-card .card-subtitle { font-size: var(--fs-5); }
 999 | 
1000 |   .portfolio-card .btn-link { --fs-6: 1.6rem; }
1001 | 
1002 | 
1003 | 
1004 |   /**
1005 |    * SKILLS
1006 |    */
1007 | 
1008 |   .skills-list { column-gap: 100px; }
1009 | 
1010 | 
1011 | 
1012 |   /**
1013 |    * CONTACT
1014 |    */
1015 | 
1016 |   .contact-card { padding: 100px; }
1017 | 
1018 |   .contact .wrapper {
1019 |     display: grid;
1020 |     grid-template-columns: 1fr 1fr;
1021 |     gap: 80px;
1022 |   }
1023 | 
1024 |   .contact-form { margin-block-end: 0; }
1025 | 
1026 |   .contact-item { gap: 25px; }
1027 | 
1028 |   .contact-icon { padding: 30px; }
1029 | 
1030 | 
1031 | 
1032 |   /**
1033 |    * BLOG
1034 |    */
1035 | 
1036 |   .blog { padding-block-end: 180px; }
1037 | 
1038 |   .blog-list {
1039 |     grid-template-columns: repeat(3, 1fr);
1040 |     gap: 25px;
1041 |   }
1042 | 
1043 |   
1044 | 
1045 |   /**
1046 |    * FOOTER
1047 |    */
1048 | 
1049 |   .footer .container {
1050 |     display: flex;
1051 |     justify-content: space-between;
1052 |     align-items: center;
1053 |   }
1054 | 
1055 |   .copyright,
1056 |   .footer-list { margin-inline: 0; }
1057 | 
1058 | }


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