├── images
    ├── about.jpg
    ├── blog
    │   ├── 1.jpg
    │   ├── 2.jpg
    │   └── 3.jpg
    └── portfolio
    │   ├── 1.jpg
    │   ├── 2.jpg
    │   ├── 3.jpg
    │   ├── 4.jpg
    │   ├── 5.jpg
    │   └── 6.jpg
├── project-content
    ├── Body-Dark.jpg
    ├── Body-Light.jpg
    ├── style-skins.jpg
    ├── Section Screens
    │   ├── 1-home.jpg
    │   ├── 2-About.jpg
    │   ├── 5-Blog.jpg
    │   ├── 6-Contact.jpg
    │   ├── 3-Services.jpg
    │   └── 4-Portfolio.jpg
    └── text
├── js
    ├── styleSwitcher.js
    ├── ityped.min.js
    └── script.js
├── css
    ├── skins
    │   ├── blue.css
    │   ├── green.css
    │   ├── pink.css
    │   ├── orange.css
    │   └── yellow.css
    ├── styleSwitcher.css
    └── style.css
├── README.md
└── index.html


/images/about.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielSPF/personal-website/HEAD/images/about.jpg


--------------------------------------------------------------------------------
/images/blog/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielSPF/personal-website/HEAD/images/blog/1.jpg


--------------------------------------------------------------------------------
/images/blog/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielSPF/personal-website/HEAD/images/blog/2.jpg


--------------------------------------------------------------------------------
/images/blog/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielSPF/personal-website/HEAD/images/blog/3.jpg


--------------------------------------------------------------------------------
/images/portfolio/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielSPF/personal-website/HEAD/images/portfolio/1.jpg


--------------------------------------------------------------------------------
/images/portfolio/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielSPF/personal-website/HEAD/images/portfolio/2.jpg


--------------------------------------------------------------------------------
/images/portfolio/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielSPF/personal-website/HEAD/images/portfolio/3.jpg


--------------------------------------------------------------------------------
/images/portfolio/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielSPF/personal-website/HEAD/images/portfolio/4.jpg


--------------------------------------------------------------------------------
/images/portfolio/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielSPF/personal-website/HEAD/images/portfolio/5.jpg


--------------------------------------------------------------------------------
/images/portfolio/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielSPF/personal-website/HEAD/images/portfolio/6.jpg


--------------------------------------------------------------------------------
/project-content/Body-Dark.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielSPF/personal-website/HEAD/project-content/Body-Dark.jpg


--------------------------------------------------------------------------------
/project-content/Body-Light.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielSPF/personal-website/HEAD/project-content/Body-Light.jpg


--------------------------------------------------------------------------------
/project-content/style-skins.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielSPF/personal-website/HEAD/project-content/style-skins.jpg


--------------------------------------------------------------------------------
/project-content/Section Screens/1-home.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielSPF/personal-website/HEAD/project-content/Section Screens/1-home.jpg


--------------------------------------------------------------------------------
/project-content/Section Screens/2-About.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielSPF/personal-website/HEAD/project-content/Section Screens/2-About.jpg


--------------------------------------------------------------------------------
/project-content/Section Screens/5-Blog.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielSPF/personal-website/HEAD/project-content/Section Screens/5-Blog.jpg


--------------------------------------------------------------------------------
/project-content/Section Screens/6-Contact.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielSPF/personal-website/HEAD/project-content/Section Screens/6-Contact.jpg


--------------------------------------------------------------------------------
/project-content/Section Screens/3-Services.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielSPF/personal-website/HEAD/project-content/Section Screens/3-Services.jpg


--------------------------------------------------------------------------------
/project-content/Section Screens/4-Portfolio.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielSPF/personal-website/HEAD/project-content/Section Screens/4-Portfolio.jpg


--------------------------------------------------------------------------------
/js/styleSwitcher.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const links = document.querySelectorAll('.alternate-style'),
 3 |     totalLinks = links.length;
 4 | 
 5 | function setActiveStyle(color)
 6 | {
 7 |     for (let i = 0; i < totalLinks; i++) {
 8 |         if (color === links[i].getAttribute('title')) {
 9 |             links[i].removeAttribute('disabled');
10 |         } else {
11 |             links[i].setAttribute('disabled', true);
12 |         }
13 |     }
14 | }
15 | 
16 | // body skin
17 | 
18 | const bodySkin = document.querySelectorAll('.body-skin'),
19 |     totalBodySkin = bodySkin.length;
20 | 
21 | for (let i = 0; i < totalBodySkin; i++) {
22 |     bodySkin[i].addEventListener('change', function(){
23 |         if(this.value === 'dark'){
24 |             document.body.className = 'dark';
25 |         } else {
26 |             document.body.className = '';
27 |         }
28 |     });
29 | }
30 | 
31 | document.querySelector('.toggle-style-switcher').addEventListener('click', () => {
32 |     document.querySelector('.style-switcher').classList.toggle('open');
33 | });


--------------------------------------------------------------------------------
/css/skins/blue.css:
--------------------------------------------------------------------------------
 1 | .aside .logo a::before{
 2 |     border-top: 4px solid #2196f3;
 3 |     border-left: 4px solid #2196f3;
 4 | }
 5 | 
 6 | .aside .logo a::after{
 7 |     border-right: 4px solid #2196f3;
 8 |     border-bottom: 4px solid #2196f3;
 9 | }
10 | 
11 | .aside .nav li a:hover, 
12 | body.dark .aside .nav li a:hover,
13 | .blog .blog-item-inner .blog-info .blog-tags a,
14 | .portfolio .portfolio-item .portfolio-info .icon .fa,
15 | .lightbox .lightbox-controls .prev-item .fa,
16 | .contact .contact-info-item .icon .fa,
17 | .lightbox .lightbox-controls .next-item .fa,
18 | .about .about-content .about-text h3 span,
19 | .portfolio .portfolio-filter button.active,
20 | body.dark .portfolio .portfolio-filter button.active,
21 | .service .service-item .service-item-inner .icon .fa,
22 | body.dark .aside .nav li a.active,
23 | .aside .nav li a.active{
24 |     color: #2196f3;
25 | }
26 | 
27 | .btn,
28 | .service .service-item .service-item-inner:hover .icon,
29 | .about .about-content .timeline .circle-dot,
30 | .blog .blog-item-inner .blog-img .blog-date,
31 | .about .about-content .skills .skill-item .progress .progress-in,
32 | .about .about-content .timeline-item::before,
33 | .aside .nav-toggler span,
34 | .section-title h2::before,
35 | .section-title h2::after,
36 | .aside .nav-toggler span::before,
37 | .aside .nav-toggler span::after,
38 | .home .intro .social-links a{
39 |     background-color: #2196f3;
40 | }
41 | 
42 | .portfolio .portfolio-filter button.active{
43 |     border-color: #2196f3;
44 | }


--------------------------------------------------------------------------------
/css/skins/green.css:
--------------------------------------------------------------------------------
 1 | .aside .logo a::before{
 2 |     border-top: 4px solid #72b626;
 3 |     border-left: 4px solid #72b626;
 4 | }
 5 | 
 6 | .aside .logo a::after{
 7 |     border-right: 4px solid #72b626;
 8 |     border-bottom: 4px solid #72b626;
 9 | }
10 | 
11 | .aside .nav li a:hover, 
12 | body.dark .aside .nav li a:hover,
13 | .blog .blog-item-inner .blog-info .blog-tags a,
14 | .portfolio .portfolio-item .portfolio-info .icon .fa,
15 | .lightbox .lightbox-controls .prev-item .fa,
16 | .contact .contact-info-item .icon .fa,
17 | .lightbox .lightbox-controls .next-item .fa,
18 | .about .about-content .about-text h3 span,
19 | .portfolio .portfolio-filter button.active,
20 | body.dark .portfolio .portfolio-filter button.active,
21 | .service .service-item .service-item-inner .icon .fa,
22 | body.dark .aside .nav li a.active,
23 | .aside .nav li a.active{
24 |     color: #72b626;
25 | }
26 | 
27 | .btn,
28 | .service .service-item .service-item-inner:hover .icon,
29 | .about .about-content .timeline .circle-dot,
30 | .blog .blog-item-inner .blog-img .blog-date,
31 | .about .about-content .skills .skill-item .progress .progress-in,
32 | .about .about-content .timeline-item::before,
33 | .aside .nav-toggler span,
34 | .section-title h2::before,
35 | .section-title h2::after,
36 | .aside .nav-toggler span::before,
37 | .aside .nav-toggler span::after,
38 | .home .intro .social-links a{
39 |     background-color: #72b626;
40 | }
41 | 
42 | .portfolio .portfolio-filter button.active{
43 |     border-color: #72b626;
44 | }


--------------------------------------------------------------------------------
/css/skins/pink.css:
--------------------------------------------------------------------------------
 1 | .aside .logo a::before{
 2 |     border-top: 4px solid #ec1839;
 3 |     border-left: 4px solid #ec1839;
 4 | }
 5 | 
 6 | .aside .logo a::after{
 7 |     border-right: 4px solid #ec1839;
 8 |     border-bottom: 4px solid #ec1839;
 9 | }
10 | 
11 | .aside .nav li a:hover, 
12 | body.dark .aside .nav li a:hover,
13 | .blog .blog-item-inner .blog-info .blog-tags a,
14 | .portfolio .portfolio-item .portfolio-info .icon .fa,
15 | .lightbox .lightbox-controls .prev-item .fa,
16 | .contact .contact-info-item .icon .fa,
17 | .lightbox .lightbox-controls .next-item .fa,
18 | .about .about-content .about-text h3 span,
19 | .portfolio .portfolio-filter button.active,
20 | body.dark .portfolio .portfolio-filter button.active,
21 | .service .service-item .service-item-inner .icon .fa,
22 | body.dark .aside .nav li a.active,
23 | .aside .nav li a.active{
24 |     color: #ec1839;
25 | }
26 | 
27 | .btn,
28 | .service .service-item .service-item-inner:hover .icon,
29 | .about .about-content .timeline .circle-dot,
30 | .blog .blog-item-inner .blog-img .blog-date,
31 | .about .about-content .skills .skill-item .progress .progress-in,
32 | .about .about-content .timeline-item::before,
33 | .aside .nav-toggler span,
34 | .section-title h2::before,
35 | .section-title h2::after,
36 | .aside .nav-toggler span::before,
37 | .aside .nav-toggler span::after,
38 | .home .intro .social-links a{
39 |     background-color: #ec1839;
40 | }
41 | 
42 | .portfolio .portfolio-filter button.active{
43 |     border-color: #ec1839;
44 | }


--------------------------------------------------------------------------------
/css/skins/orange.css:
--------------------------------------------------------------------------------
 1 | .aside .logo a::before{
 2 |     border-top: 4px solid #fa5b0f;
 3 |     border-left: 4px solid #fa5b0f;
 4 | }
 5 | 
 6 | .aside .logo a::after{
 7 |     border-right: 4px solid #fa5b0f;
 8 |     border-bottom: 4px solid #fa5b0f;
 9 | }
10 | 
11 | .aside .nav li a:hover, 
12 | body.dark .aside .nav li a:hover,
13 | .blog .blog-item-inner .blog-info .blog-tags a,
14 | .portfolio .portfolio-item .portfolio-info .icon .fa,
15 | .lightbox .lightbox-controls .prev-item .fa,
16 | .contact .contact-info-item .icon .fa,
17 | .lightbox .lightbox-controls .next-item .fa,
18 | .about .about-content .about-text h3 span,
19 | .portfolio .portfolio-filter button.active,
20 | body.dark .portfolio .portfolio-filter button.active,
21 | .service .service-item .service-item-inner .icon .fa,
22 | body.dark .aside .nav li a.active,
23 | .aside .nav li a.active{
24 |     color: #fa5b0f;
25 | }
26 | 
27 | .btn,
28 | .service .service-item .service-item-inner:hover .icon,
29 | .about .about-content .timeline .circle-dot,
30 | .blog .blog-item-inner .blog-img .blog-date,
31 | .about .about-content .skills .skill-item .progress .progress-in,
32 | .about .about-content .timeline-item::before,
33 | .aside .nav-toggler span,
34 | .section-title h2::before,
35 | .section-title h2::after,
36 | .aside .nav-toggler span::before,
37 | .aside .nav-toggler span::after,
38 | .home .intro .social-links a{
39 |     background-color: #fa5b0f;
40 | }
41 | 
42 | .portfolio .portfolio-filter button.active{
43 |     border-color: #fa5b0f;
44 | }


--------------------------------------------------------------------------------
/css/skins/yellow.css:
--------------------------------------------------------------------------------
 1 | .aside .logo a::before{
 2 |     border-top: 4px solid #ffb400;
 3 |     border-left: 4px solid #ffb400;
 4 | }
 5 | 
 6 | .aside .logo a::after{
 7 |     border-right: 4px solid #ffb400;
 8 |     border-bottom: 4px solid #ffb400;
 9 | }
10 | 
11 | body.dark .aside .nav li a:hover, 
12 | .aside .nav li a:hover, 
13 | .blog .blog-item-inner .blog-info .blog-tags a,
14 | .portfolio .portfolio-item .portfolio-info .icon .fa,
15 | .lightbox .lightbox-controls .prev-item .fa,
16 | .contact .contact-info-item .icon .fa,
17 | .lightbox .lightbox-controls .next-item .fa,
18 | .about .about-content .about-text h3 span,
19 | .portfolio .portfolio-filter button.active,
20 | body.dark .portfolio .portfolio-filter button.active,
21 | .service .service-item .service-item-inner .icon .fa,
22 | body.dark .aside .nav li a.active,
23 | .aside .nav li a.active{
24 |     color: #ffb400;
25 | }
26 | 
27 | .btn,
28 | .service .service-item .service-item-inner:hover .icon,
29 | .about .about-content .timeline .circle-dot,
30 | .blog .blog-item-inner .blog-img .blog-date,
31 | .about .about-content .skills .skill-item .progress .progress-in,
32 | .about .about-content .timeline-item::before,
33 | .aside .nav-toggler span,
34 | .section-title h2::before,
35 | .section-title h2::after,
36 | .aside .nav-toggler span::before,
37 | .aside .nav-toggler span::after,
38 | .home .intro .social-links a{
39 |     background-color: #ffb400;
40 | }
41 | 
42 | .portfolio .portfolio-filter button.active{
43 |     border-color: #ffb400;
44 | }


--------------------------------------------------------------------------------
/js/ityped.min.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.ityped={})}(this,function(e){"use strict";e.init=function(e,t){var n=0,o=void 0,r=void 0,i=function(e,t){n===o&&t.loop&&(n=0),setTimeout(function(){a(e[n],t)},t.startDelay)},a=function(t,n){var o=0,r=t.length,i=setInterval(function(){if(n.placeholder?e.placeholder+=t[o]:e.textContent+=t[o],++o===r)return d(i,n)},n.typeSpeed)},d=function(e,t){return clearInterval(e),t.disableBackTyping&&n===o-1?t.onFinished():t.loop||n!==o-1?void setTimeout(function(){return c(t)},t.backDelay):t.onFinished()},c=function(t){var n=t.placeholder?e.placeholder:e.textContent,o=n.length,r=setInterval(function(){if(t.placeholder?e.placeholder=e.placeholder.substr(0,--o):e.textContent=n.substr(0,--o),0===o)return s(r,t)},t.backSpeed)},s=function(e,t){clearInterval(e),++n,i(r,t)};return function(t){var n=function(e){var t=e.strings,n=void 0===t?["Put your strings here...","and Enjoy!"]:t,o=e.typeSpeed,r=void 0===o?100:o,i=e.backSpeed,a=void 0===i?50:i,d=e.backDelay,c=void 0===d?500:d,s=e.startDelay,l=void 0===s?500:s,u=e.cursorChar,p=void 0===u?"|":u,f=e.placeholder,v=void 0!==f&&f,h=e.showCursor,y=void 0===h||h,b=e.disableBackTyping,g=void 0!==b&&b,C=e.onFinished,k=void 0===C?function(){}:C,m=e.loop;return{strings:n,typeSpeed:r,backSpeed:a,cursorChar:p,backDelay:c,placeholder:v,startDelay:l,showCursor:y,loop:void 0===m||m,disableBackTyping:g,onFinished:k}}(t||{}),a=n.strings;r=a,o=a.length,"string"==typeof e&&(e=document.querySelector(e)),n.showCursor&&function(e,t){var n=document.createElement("span");n.classList.add("ityped-cursor"),n.textContent="|",n.textContent=t.cursorChar,e.insertAdjacentElement("afterend",n)}(e,n),i(a,n)}(t)},Object.defineProperty(e,"__esModule",{value:!0})});
2 | //# sourceMappingURL=index.min.js.map
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Personal Portfolio Website Html Css Javascript
 2 | 
 3 | Upvesh is a  fully responsive personal, portfolio, resume template that consists of 5 colors, Light and Dark demos. It has many features of a business website. Upvesh is a simple, modern, creative and responsive template. It will help you to presents yourself or your business resume more smartly and easily. This is built with HTML5, CSS3, JAVASCRIPT. It’s 100% responsive with clean codes. All components used in the template are well commented, w3 validated and are well documented. 
 4 | 
 5 | ## Previews
 6 | 
 7 | | Home | About | Services
 8 | | --- | --- | --- |
 9 | | [![Home](https://github.com/DanielSPF/personal-website/blob/master/project-content/Section%20Screens/1-home.jpg)](https://github.com/DanielSPF/personal-website/blob/master/project-content/Section%20Screens/1-home.jpg) | [![About](https://github.com/DanielSPF/personal-website/blob/master/project-content/Section%20Screens/2-About.jpg)](https://github.com/https://github.com/DanielSPF/personal-website/blob/master/project-content/Section%20Screens/2-About.jpg) | [![Services](https://github.com/DanielSPF/personal-website/blob/master/project-content/Section%20Screens/3-Services.jpg)](https://github.com/DanielSPF/personal-website/blob/master/project-content/Section%20Screens/3-Services.jpg)
10 | 
11 | | Portfolio | Blog | Contact
12 | | --- | --- | --- |
13 | | [![Portfolio](https://github.com/DanielSPF/personal-website/blob/master/project-content/Section%20Screens/4-Portfolio.jpg)](https://github.com/DanielSPF/personal-website/blob/master/project-content/Section%20Screens/4-Portfolio.jpg) | [![Blog](https://github.com/DanielSPF/personal-website/blob/master/project-content/Section%20Screens/5-Blog.jpg)](https://github.com/DanielSPF/personal-website/blob/master/project-content/Section%20Screens/5-Blog.jpg) | [![Contact](https://github.com/DanielSPF/personal-website/blob/master/project-content/Section%20Screens/6-Contact.jpg)](https://github.com/DanielSPF/personal-website/blob/master/project-content/Section%20Screens/6-Contact.jpg)
14 | 
15 | ## Demo
16 | 
17 | - [Upvesh](https://danielspf.github.io/personal-website/)
18 | 
19 | ## Tutorial
20 | 
21 | - [The WebShala](https://www.youtube.com/watch?v=ONqgNVWJ-Dw)
22 | 
23 | if you watch this full tutorial you will learn lot of things.
24 | 
25 | What has been learned :
26 | - Responsive Layout
27 | - 5 Color Skins
28 | - Light/Dark
29 | - Smoooth transitions
30 | - Live Style Switcher
31 | - Clean Code
32 | - W3C Validated
33 | - HTML5 & CSS3 & JAVASCRIPT
34 | - Cross Browser Compatible
35 | - 100% Customizable, all colors can be customized
36 | - Project Image Format
37 | - Font Awesome Icons
38 | - Well-commented code
39 | - Google Fonts
40 | 
41 | 


--------------------------------------------------------------------------------
/css/styleSwitcher.css:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | .style-switcher{
  4 |     position: fixed;
  5 |     top: 20px;
  6 |     right: 0;
  7 |     z-index: 10;
  8 |     background-color: white;
  9 |     padding: 15px;
 10 |     border: 1px solid #d4d4e3;
 11 |     border-right: none;
 12 |     border-radius: 0 0 0 5px;
 13 |     transform: translateX(100%);
 14 |     -webkit-transform: translateX(100%);
 15 |     transition: all 0.3s ease;
 16 |     -webkit-transition: all 0.3s ease;
 17 | }
 18 | .style-switcher.open{
 19 |     transform: translateX(0%);
 20 |     -webkit-transform: translateX(0%);
 21 | }
 22 | .style-switcher h5{
 23 |     font-size: 16px;
 24 |     color: #302e4d;
 25 |     margin-bottom: 8px;
 26 |     padding-bottom: 5px;
 27 |     border-bottom: 1px solid #e8dfec;
 28 | }
 29 | .style-switcher ul{
 30 |     margin: 0;
 31 |     padding: 0;
 32 |     list-style: none;   
 33 |     display: block;
 34 |     margin-bottom: 5px;
 35 | }
 36 | .style-switcher ul li{
 37 |     display: inline-block;
 38 | }
 39 | .style-switcher ul li a{
 40 |     height: 30px;
 41 |     width: 30px;
 42 |     display: block;
 43 |     border-radius: 50%;
 44 |     cursor: pointer;
 45 |     text-decoration: none;
 46 |     margin-right: 2px;
 47 | }
 48 | .style-switcher .toggle-style-switcher{
 49 |     position: absolute;
 50 |     height: 45px;
 51 |     width: 45px;
 52 |     background-color: #ffffff;
 53 |     left: -46px;
 54 |     top: -1px;
 55 |     border: 1px solid #d4d4e3;
 56 |     border-right: none;
 57 |     text-align: center;
 58 |     cursor: pointer;
 59 |     border-radius: 5px 0 0 5px;
 60 | }
 61 | .style-switcher .toggle-style-switcher .fa{
 62 |     font-size: 20px;
 63 |     line-height: 43px;
 64 | }
 65 | 
 66 | /* Dark Body */
 67 | 
 68 | body.dark .section{
 69 |     background-color: #151515;
 70 | }
 71 | body.dark .aside,
 72 | body.dark .contact .contact-form .form-item .form-control,
 73 | body.dark .blog .blog-item-inner .blog-info,
 74 | body.dark .service .service-item .service-item-inner,
 75 | body.dark .about .about-content .timeline{
 76 |     background-color: #222222;
 77 | }
 78 | body.dark .aside .nav li a,
 79 | body.dark .blog .blog-item-inner .blog-info .blog-title,
 80 | body.dark .contact .contact-info-item h4,
 81 | body.dark .portfolio .portfolio-filter button,
 82 | body.dark .service .service-item .service-item-inner h4,
 83 | body.dark .about .about-content .timeline .timeline-title,
 84 | body.dark .about .about-content .skills .skill-item h5,
 85 | body.dark .about .about-content .personal-info .info-item p,
 86 | body.dark .about .about-content .about-text h3,
 87 | body.dark .home .intro h1,
 88 | body.dark .about .about-content h3.title,
 89 | body.dark .section-title h2,
 90 | body.dark .aside .logo a{
 91 |     color: #ffffff;
 92 | }
 93 | body.dark .home .intro span,
 94 | body.dark .contact .contact-form .form-item .form-control,
 95 | body.dark .blog .blog-item-inner .blog-info .blog-description,
 96 | body.dark .contact .contact-info-item p,
 97 | body.dark .blog .blog-item-inner .blog-info .blog-tags,
 98 | body.dark .service .service-item .service-item-inner p,
 99 | body.dark .about .about-content .timeline .timeline-text,
100 | body.dark .about .about-content .timeline .timeline-date,
101 | body.dark .about .about-content .skills .skill-item .skill-porcent,
102 | body.dark .about .about-content .personal-info .info-item p span,
103 | body.dark .about .about-content .about-text p{
104 |     color: #e9e9e9;
105 | }
106 | body.dark .about .about-content .personal-info .info-item p,
107 | body.dark .aside,
108 | body.dark .contact .contact-form .form-item .form-control,
109 | body.dark .blog .blog-item-inner,
110 | body.dark .portfolio .portfolio-item-innner,
111 | body.dark .service .service-item .service-item-inner,
112 | body.dark .about .about-content .timeline,
113 | body.dark .aside .nav li a{
114 |     border-color: #393939;
115 | }
116 | body.dark .shadow-dark{
117 |     -webkit-box-shadow: none;
118 |     box-shadow: none;
119 | }


--------------------------------------------------------------------------------
/project-content/text:
--------------------------------------------------------------------------------
  1 | 
  2 |     *** The WebShala ***
  3 | 
  4 |  --- Contents (Personal Portfolio Template) ---
  5 | 
  6 | 1. Aside Navbar
  7 | 
  8 |     - logo
  9 | 
 10 |       Nav       
 11 |     - icon (fa fa-home) font Awesome Icon         Home
 12 |     - icon (fa fa-user) font Awesome Icon         About
 13 |     - icon (fa fa-list) font Awesome Icon         Service
 14 |     - icon (fa fa-briefcase) font Awesome Icon    Portfolio
 15 |     - icon (fa fa-envelope) font Awesome Icon     Blog
 16 |     - icon (fa fa-comments) font Awesome Icon     Contact
 17 | 
 18 |     - copyright text
 19 | 
 20 | 1. Home Section
 21 | 
 22 |     - Photo
 23 |     - Upvesh Kumar
 24 |     - I'm a Web Developer
 25 |     
 26 |       Social Links
 27 |     - icon (fa fa-twitter) font Awesome Icon 
 28 |     - icon (fa fa-facebook) font Awesome Icon 
 29 |     - icon (fa fa-instagram) font Awesome Icon 
 30 |     - icon (fa fa-linkedin) font Awesome Icon 
 31 | 
 32 | 2. About Me
 33 |    
 34 |    - About Me
 35 |    - I'm Upvesh Kumar and Web Developer
 36 |    - Hi! My name is Upvesh Kumar. I am a Web Developer, and I'm very passionate and dedicated 
 37 |      to my work. With 10 years experience as a professional Web developer, I have acquired the skills and knowledge necessary to make your project a success. I enjoy every step of the design process, from discussion and collaboration. 
 38 |      
 39 |      Personal-info
 40 |    - Birthday : 5 June 1992
 41 |    - Age : 28
 42 |    - Website : www.domain.com
 43 |    - Email : info@gmail.com
 44 |    - Degree : M.Tech
 45 |    - Phone : +91 8800 000 000
 46 |    - City : Mumbai
 47 |    - Freelance : Available
 48 | 
 49 |      Button
 50 |    - Downolad, Hire Me
 51 | 
 52 |      Skills
 53 |    - Javascript 76%
 54 |    - Wordpress 90%
 55 |    - Java 80%
 56 |    - Bootstrap 60%
 57 | 
 58 |      Education
 59 |    - 2013 - 2015
 60 |    - Master In Computer Science
 61 |    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non 
 62 |      nisi semper, et elementum lorem ornare.
 63 | 
 64 |    - 2011 - 2013
 65 |    - Studied At Delhi University
 66 |    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non 
 67 |      nisi semper, et elementum lorem ornare.
 68 | 
 69 |    - 2008 - 2011
 70 |    - Bachelor Degree
 71 |    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non 
 72 |      nisi semper, et elementum lorem ornare.
 73 | 
 74 |      Experience
 75 |    - 2013 - 2015
 76 |    - Backend Developer
 77 |    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non 
 78 |      nisi semper, et elementum lorem ornare.
 79 | 
 80 |    - 2011 - 2013
 81 |    - Frontend Developer
 82 |    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non 
 83 |      nisi semper, et elementum lorem ornare.
 84 | 
 85 |    - 2008 - 2011
 86 |    - Graphic Designer
 87 |    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non 
 88 |      nisi semper, et elementum lorem ornare.
 89 | 
 90 | 3. Services
 91 | 
 92 |    - icon : fa fa-laptop (font awesome icon)
 93 |    - Web Design
 94 |    - Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum.
 95 | 
 96 |    - icon : fa fa-photo (font awesome icon)
 97 |    - Photography
 98 |    - Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum.
 99 | 
100 |    - icon : fa fa-code (font awesome icon)
101 |    - Web Development
102 |    - Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum.
103 | 
104 |    - icon : fa fa-film (font awesome icon)
105 |    - Video Editing
106 |    - Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum.
107 | 
108 |    - icon : fa fa-rocket (font awesome icon)
109 |    - Seo Optimization
110 |    - Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum.
111 | 
112 |    - icon : fa fa-paint-brush (font awesome icon)
113 |    - Logo Design
114 |    - Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum.
115 | 
116 | 4. Portfolio
117 | 
118 |    - All, Web, Design, Photography, Wordpress
119 | 
120 | 
121 | 5. Blog
122 | 
123 |    - 4 jun 2020
124 |    - Responsive Web Design
125 |    - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro rem quod illo 
126 |      quam, eum alias id, repellendus magni, quas.
127 |    - Tags : Html , css
128 | 
129 |    - 4 jun 2020
130 |    - Creative Slideshow
131 |    - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro rem quod illo 
132 |      quam, eum alias id, repellendus magni, quas.
133 |    - Tags : Html , Javascript
134 | 
135 |    - 4 jun 2020
136 |    - Image Gallery Lightbox
137 |    - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro rem quod illo 
138 |      quam, eum alias id, repellendus magni, quas.
139 |    - Tags : Javascript
140 | 
141 | 6. Contact Me
142 | 
143 |    - icon : fa fa-phone (font awesome icon)
144 |    - Call Us On
145 |    - +91 8800 000 000
146 | 
147 |    - icon : fa fa-map-marker (font awesome icon)
148 |    - Office
149 |    - +91 8800 000 000
150 | 
151 |    - icon : fa fa-envelope (font awesome icon)
152 |    - Email
153 |    - info@gmail.com
154 | 
155 |      Form Field
156 |    - Name, Email, Subject, Message, Button (Send Message) 
157 | 
158 | 
159 | 


--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
  1 | 
  2 | // Preloader
  3 | 
  4 | window.addEventListener('load', function(){
  5 |     document.querySelector('.preloader').classList.add('opacity-0');
  6 |     setTimeout(function(){
  7 |         document.querySelector('.preloader').style.display = 'none';
  8 |     }, 1000);
  9 | });
 10 | 
 11 | // iTyped 
 12 | 
 13 | window.ityped.init(document.querySelector('.iTyped'), {
 14 |     strings: ["I'm a Web Developer", 'I Love Html5', 'I Love CSS3', 'I Love Jquery', 'I Love Laravel'],
 15 |     loop: true
 16 | });
 17 | 
 18 | // Portfolio Item Filter
 19 | 
 20 | const filterContainer = document.querySelector('.portfolio-filter'),
 21 |     filterBtns = filterContainer.children,
 22 |     totalFilterBtn = filterBtns.length,
 23 |     portfolioItems = document.querySelectorAll('.portfolio-item'),
 24 |     totalPortfolioItem = portfolioItems.length;
 25 |     
 26 |     for (let i = 0; i < totalFilterBtn; i++) {
 27 |         filterBtns[i].addEventListener("click", function(){
 28 |             filterContainer.querySelector('.active').classList.remove('active');
 29 |             this.classList.add("active");
 30 | 
 31 |             const filterValue = this.getAttribute('data-filter');
 32 |             for (let k = 0; k < totalPortfolioItem; k++) {
 33 |                 if (filterValue === portfolioItems[k].getAttribute('data-category')) {
 34 |                     portfolioItems[k].classList.remove('hide');
 35 |                     portfolioItems[k].classList.add('show');
 36 |                 } else{
 37 |                     portfolioItems[k].classList.remove('show');
 38 |                     portfolioItems[k].classList.add('hide');
 39 |                 }
 40 |                 if (filterValue === 'all') {
 41 |                     portfolioItems[k].classList.remove('hide');
 42 |                     portfolioItems[k].classList.add('show');
 43 |                 }
 44 |             }
 45 |         });
 46 |     }
 47 | 
 48 | // Portfolio Lighbox
 49 | 
 50 | const lightbox = document.querySelector('.lightbox'),
 51 |     lightboxImg = lightbox.querySelector('.lightbox-img'),
 52 |     lightboxText = lightbox.querySelector('.caption-text'),
 53 |     lightboxClose = lightbox.querySelector('.lightbox-close'),
 54 |     lightboxCounter = lightbox.querySelector('.caption-counter');
 55 | 
 56 | let itemIndex = 0;
 57 | 
 58 | for (let i = 0; i < totalPortfolioItem; i++) {
 59 |     portfolioItems[i].addEventListener('click', function(){
 60 |         itemIndex = i;
 61 |         changeItem();
 62 |         toggleLightbox();
 63 |     });
 64 | }
 65 | 
 66 | function toggleLightbox() {
 67 |     lightbox.classList.toggle('open');
 68 | }
 69 | 
 70 | function changeItem() {
 71 |     let imgSrc = portfolioItems[itemIndex].querySelector('.portfolio-img img').getAttribute('src');
 72 |     lightboxImg.src = imgSrc;
 73 |     lightboxText.innerHTML = portfolioItems[itemIndex].querySelector('h4').innerHTML;
 74 |     lightboxCounter.innerHTML = (itemIndex + 1) + " of " + totalPortfolioItem;
 75 | }
 76 | 
 77 | function prevItem() {
 78 |     if (itemIndex === 0) {
 79 |         itemIndex = totalPortfolioItem - 1;
 80 |     } else {
 81 |         itemIndex--;
 82 |     }
 83 |     changeItem();
 84 | }
 85 | 
 86 | function nextItem() {
 87 |     if (itemIndex === totalPortfolioItem - 1) {
 88 |         itemIndex = 0;
 89 |     } else {
 90 |         itemIndex++;
 91 |     }
 92 |     changeItem();
 93 | }
 94 | 
 95 | // close lightbox
 96 | 
 97 | lightbox.addEventListener('click', function(event){
 98 |     if(event.target === lightboxClose || event.target === lightbox){
 99 |         toggleLightbox();
100 |     }
101 | });
102 | 
103 | // Aside Navbar
104 | 
105 | const nav = document.querySelector('.nav'),
106 |     navList = nav.querySelectorAll('li'),
107 |     totalNavList = navList.length,
108 |     allSection = document.querySelectorAll('.section'),
109 |     totalSection = allSection.length;
110 | 
111 | for (let i = 0; i < totalNavList; i++) {
112 |     const a = navList[i].querySelector('a');
113 |     a.addEventListener('click', function(){
114 |         // remove back section class
115 |         removeBackSectionClass();
116 | 
117 |         for (let j = 0; j < totalNavList; j++) {
118 |             if (navList[j].querySelector('a').classList.contains('active')) {
119 |                 // add back section class
120 |                 addBackSectionClass(j);
121 |             }
122 |             navList[j].querySelector('a').classList.remove('active');
123 |         }
124 | 
125 |         this.classList.add('active');
126 | 
127 |         showSection(this);
128 | 
129 |         if (window.innerWidth < 1200) {
130 |             asideSectionTogglerBtn();
131 |         }
132 | 
133 |     });
134 | }
135 | 
136 | function addBackSectionClass(num) 
137 | {
138 |     allSection[num].classList.add('back-section');
139 | }
140 | 
141 | function removeBackSectionClass() 
142 | {
143 |     for (let i = 0; i < totalSection; i++) {
144 |         allSection[i].classList.remove('back-section');
145 |     }
146 | }
147 | 
148 | function updateNav(element) 
149 | {
150 |     for (let i = 0; i < totalNavList; i++) {
151 |         navList[i].querySelector('a').classList.remove('active');
152 |         const target = element.getAttribute('href').split('#')[1];
153 |         if (target === navList[i].querySelector('a').getAttribute('href').split('#')[1]) {
154 |             navList[i].querySelector('a').classList.add('active');
155 |         }
156 |     }
157 | }
158 | 
159 | document.querySelector('.hire-me').addEventListener('click', function(){
160 |     const sectionIndex = this.getAttribute('data-section-index');
161 |     addBackSectionClass(sectionIndex);
162 |     showSection(this);
163 |     updateNav(this);
164 |     removeBackSectionClass();
165 | });
166 | 
167 | function showSection(element) 
168 | {
169 |     for (let i = 0; i < totalSection; i++) {
170 |         allSection[i].classList.remove('active');
171 |     }
172 | 
173 |     const target = element.getAttribute('href').split('#')[1];
174 | 
175 |     document.querySelector('#'+target).classList.add('active');
176 | }
177 | 
178 | const navTogglerBtn = document.querySelector('.nav-toggler'),
179 |     aside = document.querySelector('.aside');
180 | 
181 | navTogglerBtn.addEventListener('click', asideSectionTogglerBtn);
182 | 
183 | function asideSectionTogglerBtn() 
184 | {
185 |     aside.classList.toggle('open');
186 |     navTogglerBtn.classList.toggle('open');
187 |     for (let i = 0; i < totalSection; i++) {
188 |         allSection[i].classList.toggle('open');
189 |     }
190 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="pt-br">
  3 | 
  4 | <head>
  5 |   <title>Personal Portfolio Template</title>
  6 |   <meta charset="utf-8">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
  8 |   <!-- Template css Files -->
  9 |   <link rel="stylesheet" href="css/style.css" type="text/css">
 10 | 
 11 |   <!-- Live Style Switcher - Demo Only -->
 12 |   <link rel="stylesheet" class="alternate-style" title="pink" href="css/skins/pink.css" type="text/css">
 13 |   <link rel="stylesheet" class="alternate-style" title="blue" href="css/skins/blue.css" type="text/css" disabled>
 14 |   <link rel="stylesheet" class="alternate-style" title="green" href="css/skins/green.css" type="text/css" disabled>
 15 |   <link rel="stylesheet" class="alternate-style" title="orange" href="css/skins/orange.css" type="text/css" disabled>
 16 |   <link rel="stylesheet" class="alternate-style" title="yellow" href="css/skins/yellow.css" type="text/css" disabled>
 17 |   <link rel="stylesheet" href="css/styleSwitcher.css" type="text/css">
 18 | </head>
 19 | 
 20 | <body>
 21 | 
 22 |   <!-- Preloader -->
 23 |   <div class="preloader">
 24 |     <div class="loader">
 25 | 
 26 |     </div>
 27 |   </div>
 28 |   <!-- Preloader End -->
 29 | 
 30 |   <!-- Main Container -->
 31 |   <div class="main-container">
 32 |     <!-- Aside -->
 33 |     <div class="aside">
 34 |       <!-- Nav Toggler Btn -->
 35 |       <div class="nav-toggler">
 36 |         <span></span>
 37 |       </div>
 38 |       <div class="aside-inner">
 39 |         <!-- Logo -->
 40 |         <div class="logo">
 41 |           <a href="#">Upvesh</a>
 42 |         </div>
 43 |         <!-- Nav -->
 44 |         <ul class="nav">
 45 |           <li><a href="#home" class="active"><i class="fa fa-home"></i> Home</a></li>
 46 |           <li><a href="#about"><i class="fa fa-user"></i> About</a></li>
 47 |           <li><a href="#services"><i class="fa fa-list"></i> Services</a></li>
 48 |           <li><a href="#portfolio"><i class="fa fa-briefcase"></i> Portfolio</a></li>
 49 |           <li><a href="#blog"><i class="fa fa-envelope"></i> Blog</a></li>
 50 |           <li><a href="#contact"><i class="fa fa-comments"></i> Contact</a></li>
 51 |         </ul>
 52 |         <!-- Copyright -->
 53 |         <div class="copyright-text">
 54 |           &copy; 2020 The WebShala Template
 55 |         </div>
 56 |       </div>
 57 |     </div>
 58 |     <!-- Aside End -->
 59 |     <!-- Main Content -->
 60 |     <div class="main-content">
 61 | 
 62 |       <!-- Home Section -->
 63 |       <section class="home section active" id="home">
 64 |         <div class="container">
 65 |           <div class="intro">
 66 |             <img src="images/about.jpg" alt="profile" class="shadow-dark">
 67 |             <h1>Upvesh Kumar</h1>
 68 |             <span class="iTyped"></span>
 69 |             <div class="social-links">
 70 |               <a href="#"><i class="fa fa-twitter"></i></a>
 71 |               <a href="#"><i class="fa fa-facebook"></i></a>
 72 |               <a href="#"><i class="fa fa-instagram"></i></a>
 73 |               <a href="#"><i class="fa fa-linkedin"></i></a>
 74 |             </div>
 75 |           </div>
 76 |         </div>
 77 |       </section>
 78 |       <!-- Home Section End -->
 79 | 
 80 |       <!-- About Section -->
 81 |       <section class="about section" id="about">
 82 |         <div class="container">
 83 |           <div class="row">
 84 |             <div class="section-title padd-15">
 85 |               <h2>About Me</h2>
 86 |             </div>
 87 |           </div>
 88 |           <div class="row">
 89 |             <div class="about-content padd-15">
 90 |               <div class="row">
 91 |                 <div class="about-text padd-15">
 92 |                   <h3>I'm Upvesh Kumar and <span>Web Developer</span></h3>
 93 |                   <p>Hi! My name is Upvesh Kumar. I am a Web Developer, and I'm very passionate and dedicated
 94 |                     to my work. With 10 years experience as a professional Web developer, I have acquired the skills and knowledge necessary to make your project a success. I enjoy every step of the design process, from discussion and collaboration. </p>
 95 |                 </div>
 96 |               </div>
 97 |               <div class="row">
 98 |                 <div class="personal-info padd-15">
 99 |                   <div class="row">
100 |                     <div class="info-item padd-15">
101 |                       <p>Birthday : <span>5 June 1992</span></p>
102 |                     </div>
103 |                     <div class="info-item padd-15">
104 |                       <p>Age : <span>28</span></p>
105 |                     </div>
106 |                     <div class="info-item padd-15">
107 |                       <p>Website : <span>www.domain.com</span></p>
108 |                     </div>
109 |                     <div class="info-item padd-15">
110 |                       <p>Email : <span>info@gmail.com</span></p>
111 |                     </div>
112 |                     <div class="info-item padd-15">
113 |                       <p>Degree : <span>M.Tech</span></p>
114 |                     </div>
115 |                     <div class="info-item padd-15">
116 |                       <p>Phone : <span>+91 8800 000 000</span></p>
117 |                     </div>
118 |                     <div class="info-item padd-15">
119 |                       <p>City : <span>Mumbai</span></p>
120 |                     </div>
121 |                     <div class="info-item padd-15">
122 |                       <p>Freelance : <span>Available</span></p>
123 |                     </div>
124 |                   </div>
125 |                   <div class="row">
126 |                     <div class="buttons padd-15">
127 |                       <a href="#" class="btn">Download Cv</a>
128 |                       <a href="#contact" data-section-index="1" class="btn hire-me">Hire me</a>
129 |                     </div>
130 |                   </div>
131 |                 </div>
132 |                 <div class="skills padd-15">
133 |                   <div class="row">
134 |                     <div class="skill-item padd-15">
135 |                       <h5>Javascript</h5>
136 |                       <div class="progress">
137 |                         <div class="progress-in" style="width: 76%;"></div>
138 |                         <div class="skill-porcent">
139 |                           76%
140 |                         </div>
141 |                       </div>
142 |                     </div>
143 |                     <div class="skill-item padd-15">
144 |                       <h5>Wordpress</h5>
145 |                       <div class="progress">
146 |                         <div class="progress-in" style="width: 90%;"></div>
147 |                         <div class="skill-porcent">
148 |                           90%
149 |                         </div>
150 |                       </div>
151 |                     </div>
152 |                     <div class="skill-item padd-15">
153 |                       <h5>Java</h5>
154 |                       <div class="progress">
155 |                         <div class="progress-in" style="width: 80%;"></div>
156 |                         <div class="skill-porcent">
157 |                           80%
158 |                         </div>
159 |                       </div>
160 |                     </div>
161 |                     <div class="skill-item padd-15">
162 |                       <h5>Bootstrap</h5>
163 |                       <div class="progress">
164 |                         <div class="progress-in" style="width: 60%;"></div>
165 |                         <div class="skill-porcent">
166 |                           60%
167 |                         </div>
168 |                       </div>
169 |                     </div>
170 |                   </div>
171 |                 </div>
172 |               </div>
173 | 
174 |               <div class="row">
175 |                 <div class="education padd-15">
176 |                   <h3 class="title">Education</h3>
177 |                   <div class="row">
178 |                     <div class="timeline-box padd-15">
179 |                       <div class="timeline shadow-dark">
180 |                         <!-- timeline Item -->
181 |                         <div class="timeline-item">
182 |                           <div class="circle-dot"></div>
183 |                           <h6 class="timeline-date"><i class="fa fa-calendar"></i> 2013 - 2015</h6>
184 |                           <h4 class="timeline-title">Master In Computer Science</h4>
185 |                           <p class="timeline-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non
186 |                             nisi semper, et elementum lorem ornare.</p>
187 |                         </div>
188 |                         <!-- timeline Item End -->
189 |                         <!-- timeline Item -->
190 |                         <div class="timeline-item">
191 |                           <div class="circle-dot"></div>
192 |                           <h6 class="timeline-date"><i class="fa fa-calendar"></i> 2011 - 2013</h6>
193 |                           <h4 class="timeline-title">Studied At Delhi University</h4>
194 |                           <p class="timeline-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non
195 |                             nisi semper, et elementum lorem ornare.</p>
196 |                         </div>
197 |                         <!-- timeline Item End -->
198 |                         <!-- timeline Item -->
199 |                         <div class="timeline-item">
200 |                           <div class="circle-dot"></div>
201 |                           <h6 class="timeline-date"><i class="fa fa-calendar"></i> 2008 - 2011</h6>
202 |                           <h4 class="timeline-title">Bachelor Degree</h4>
203 |                           <p class="timeline-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non
204 |                             nisi semper, et elementum lorem ornare.</p>
205 |                         </div>
206 |                         <!-- timeline Item End -->
207 |                       </div>
208 |                     </div>
209 |                   </div>
210 |                 </div>
211 |                 <div class="experience padd-15">
212 |                   <h3 class="title">Experience</h3>
213 |                   <div class="row">
214 |                     <div class="timeline-box padd-15">
215 |                       <div class="timeline shadow-dark">
216 |                         <!-- timeline Item -->
217 |                         <div class="timeline-item">
218 |                           <div class="circle-dot"></div>
219 |                           <h6 class="timeline-date"><i class="fa fa-calendar"></i> 2013 - 2015</h6>
220 |                           <h4 class="timeline-title">Backend Developer</h4>
221 |                           <p class="timeline-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non
222 |                             nisi semper, et elementum lorem ornare.</p>
223 |                         </div>
224 |                         <!-- timeline Item End -->
225 |                         <!-- timeline Item -->
226 |                         <div class="timeline-item">
227 |                           <div class="circle-dot"></div>
228 |                           <h6 class="timeline-date"><i class="fa fa-calendar"></i> 2011 - 2013</h6>
229 |                           <h4 class="timeline-title">Frontend Developer</h4>
230 |                           <p class="timeline-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non
231 |                             nisi semper, et elementum lorem ornare.</p>
232 |                         </div>
233 |                         <!-- timeline Item End -->
234 |                         <!-- timeline Item -->
235 |                         <div class="timeline-item">
236 |                           <div class="circle-dot"></div>
237 |                           <h6 class="timeline-date"><i class="fa fa-calendar"></i> 2008 - 2011</h6>
238 |                           <h4 class="timeline-title">Graphic Designer</h4>
239 |                           <p class="timeline-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non
240 |                             nisi semper, et elementum lorem ornare.</p>
241 |                         </div>
242 |                         <!-- timeline Item End -->
243 |                       </div>
244 |                     </div>
245 |                   </div>
246 |                 </div>
247 |               </div>
248 | 
249 |             </div>
250 |           </div>
251 |         </div>
252 |       </section>
253 |       <!-- About Section End -->
254 | 
255 |       <!-- Service Section -->
256 |       <section class="service section" id="services">
257 |         <div class="container">
258 |           <div class="row">
259 |             <div class="section-title padd-15">
260 |               <h2>Services</h2>
261 |             </div>
262 |           </div>
263 |           <div class="row">
264 |             <!-- Service item -->
265 |             <div class="service-item padd-15">
266 |               <div class="service-item-inner">
267 |                 <div class="icon"><i class="fa fa-laptop"></i></div>
268 |                 <h4>Web Design</h4>
269 |                 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum.</p>
270 |               </div>
271 |             </div>
272 |             <!-- Service item End -->
273 |             <!-- Service item -->
274 |             <div class="service-item padd-15">
275 |               <div class="service-item-inner">
276 |                 <div class="icon"><i class="fa fa-photo"></i></div>
277 |                 <h4>Photography</h4>
278 |                 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum.</p>
279 |               </div>
280 |             </div>
281 |             <!-- Service item End -->
282 |             <!-- Service item -->
283 |             <div class="service-item padd-15">
284 |               <div class="service-item-inner">
285 |                 <div class="icon"><i class="fa fa-code"></i></div>
286 |                 <h4>Web Development</h4>
287 |                 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum.</p>
288 |               </div>
289 |             </div>
290 |             <!-- Service item End -->
291 |             <!-- Service item -->
292 |             <div class="service-item padd-15">
293 |               <div class="service-item-inner">
294 |                 <div class="icon"><i class="fa fa-film"></i></div>
295 |                 <h4>Video Editing</h4>
296 |                 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum.</p>
297 |               </div>
298 |             </div>
299 |             <!-- Service item End -->
300 |             <!-- Service item -->
301 |             <div class="service-item padd-15">
302 |               <div class="service-item-inner">
303 |                 <div class="icon"><i class="fa fa-rocket"></i></div>
304 |                 <h4>Seo Optimization</h4>
305 |                 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum.</p>
306 |               </div>
307 |             </div>
308 |             <!-- Service Item End -->
309 |             <!-- Service Item -->
310 |             <div class="service-item padd-15">
311 |               <div class="service-item-inner">
312 |                 <div class="icon"><i class="fa fa-paint-brush"></i></div>
313 |                 <h4>Logo Design</h4>
314 |                 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum.</p>
315 |               </div>
316 |             </div>
317 |             <!-- Service item End -->
318 |           </div>
319 |         </div>
320 |       </section>
321 |       <!-- Service Section End -->
322 | 
323 |       <!-- Portfolio Section -->
324 |       <section class="portfolio section" id="portfolio">
325 |         <div class="container">
326 |           <div class="row">
327 |             <div class="section-title padd-15">
328 |               <h2>Portfolio</h2>
329 |             </div>
330 |           </div>
331 |           <div class="row">
332 |             <div class="portfolio-filter padd-15">
333 |               <button type="button" class="active" data-filter="all">All</button>
334 |               <button type="button" data-filter="web-design">Web Design</button>
335 |               <button type="button" data-filter="photography">Photography</button>
336 |               <button type="button" data-filter="wordpress">Wordpress</button>
337 |             </div>
338 |           </div>
339 |           <div class="row">
340 |             <!-- Portfolio Item -->
341 |             <div class="portfolio-item padd-15" data-category="web-design">
342 |               <div class="portfolio-item-inner shadow-dark">
343 |                 <div class="portfolio-img">
344 |                   <img src="images/portfolio/1.jpg" alt="Web Design">
345 |                 </div>
346 |                 <div class="portfolio-info">
347 |                   <h4>Web Design</h4>
348 |                   <div class="icon">
349 |                     <i class="fa fa-search"></i>
350 |                   </div>
351 |                 </div>
352 |               </div>
353 |             </div>
354 |             <!-- Portfolio Item End -->
355 |             <!-- Portfolio Item -->
356 |             <div class="portfolio-item padd-15" data-category="photography">
357 |               <div class="portfolio-item-inner shadow-dark">
358 |                 <div class="portfolio-img">
359 |                   <img src="images/portfolio/2.jpg" alt="Photography">
360 |                 </div>
361 |                 <div class="portfolio-info">
362 |                   <h4>Photography</h4>
363 |                   <div class="icon">
364 |                     <i class="fa fa-search"></i>
365 |                   </div>
366 |                 </div>
367 |               </div>
368 |             </div>
369 |             <!-- Portfolio Item End -->
370 |             <!-- Portfolio Item -->
371 |             <div class="portfolio-item padd-15" data-category="wordpress">
372 |               <div class="portfolio-item-inner shadow-dark">
373 |                 <div class="portfolio-img">
374 |                   <img src="images/portfolio/3.jpg" alt="Wordpress">
375 |                 </div>
376 |                 <div class="portfolio-info">
377 |                   <h4>Wordpress</h4>
378 |                   <div class="icon">
379 |                     <i class="fa fa-search"></i>
380 |                   </div>
381 |                 </div>
382 |               </div>
383 |             </div>
384 |             <!-- Portfolio Item End -->
385 |             <!-- Portfolio Item -->
386 |             <div class="portfolio-item padd-15" data-category="web-design">
387 |               <div class="portfolio-item-inner shadow-dark">
388 |                 <div class="portfolio-img">
389 |                   <img src="images/portfolio/4.jpg" alt="portfolio">
390 |                 </div>
391 |                 <div class="portfolio-info">
392 |                   <h4>Web Design</h4>
393 |                   <div class="icon">
394 |                     <i class="fa fa-search"></i>
395 |                   </div>
396 |                 </div>
397 |               </div>
398 |             </div>
399 |             <!-- Portfolio Item End -->
400 |             <!-- Portfolio Item -->
401 |             <div class="portfolio-item padd-15" data-category="wordpress">
402 |               <div class="portfolio-item-inner shadow-dark">
403 |                 <div class="portfolio-img">
404 |                   <img src="images/portfolio/5.jpg" alt="Wordpress">
405 |                 </div>
406 |                 <div class="portfolio-info">
407 |                   <h4>Wordpress</h4>
408 |                   <div class="icon">
409 |                     <i class="fa fa-search"></i>
410 |                   </div>
411 |                 </div>
412 |               </div>
413 |             </div>
414 |             <!-- Portfolio Item End -->
415 |             <!-- Portfolio Item -->
416 |             <div class="portfolio-item padd-15" data-category="photography">
417 |               <div class="portfolio-item-inner shadow-dark">
418 |                 <div class="portfolio-img">
419 |                   <img src="images/portfolio/6.jpg" alt="Wordpress">
420 |                 </div>
421 |                 <div class="portfolio-info">
422 |                   <h4>Photography</h4>
423 |                   <div class="icon">
424 |                     <i class="fa fa-search"></i>
425 |                   </div>
426 |                 </div>
427 |               </div>
428 |             </div>
429 |             <!-- Portfolio Item End -->
430 |           </div>
431 |         </div>
432 |       </section>
433 |       <!-- Portfolio Section End -->
434 | 
435 |       <!-- Blog Section -->
436 |       <section class="blog section" id="blog">
437 |         <div class="container">
438 |           <div class="row">
439 |             <div class="section-title padd-15">
440 |               <h2>Latest Blog</h2>
441 |             </div>
442 |           </div>
443 |           <div class="row">
444 |             <!-- Blog Item -->
445 |             <div class="blog-item padd-15">
446 |               <div class="blog-item-inner shadow-dark">
447 |                 <div class="blog-img">
448 |                   <img src="images/blog/1.jpg" alt="">
449 |                   <div class="blog-date">
450 |                     4 jun 2020
451 |                   </div>
452 |                 </div>
453 |                 <div class="blog-info">
454 |                   <h4 class="blog-title">Responsive Web Design</h4>
455 |                   <p class="blog-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro rem quod illo
456 |                     quam, eum alias id, repellendus magni, quas.</p>
457 |                   <p class="blog-tags">Tags : <a href="#">Html</a> , <a href="#">css</a></p>
458 |                 </div>
459 |               </div>
460 |             </div>
461 |             <!-- Blog Item End -->
462 |             <!-- Blog Item -->
463 |             <div class="blog-item padd-15">
464 |               <div class="blog-item-inner shadow-dark">
465 |                 <div class="blog-img">
466 |                   <img src="images/blog/2.jpg" alt="">
467 |                   <div class="blog-date">
468 |                     4 jun 2020
469 |                   </div>
470 |                 </div>
471 |                 <div class="blog-info">
472 |                   <h4 class="blog-title">Creative Slideshow</h4>
473 |                   <p class="blog-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro rem quod illo
474 |                     quam, eum alias id, repellendus magni, quas.</p>
475 |                   <p class="blog-tags">Tags : <a href="#">Html</a> , <a href="#">Javascript</a></p>
476 |                 </div>
477 |               </div>
478 |             </div>
479 |             <!-- Blog Item End -->
480 |             <!-- Blog Item -->
481 |             <div class="blog-item padd-15">
482 |               <div class="blog-item-inner shadow-dark">
483 |                 <div class="blog-img">
484 |                   <img src="images/blog/3.jpg" alt="">
485 |                   <div class="blog-date">
486 |                     4 jun 2020
487 |                   </div>
488 |                 </div>
489 |                 <div class="blog-info">
490 |                   <h4 class="blog-title">Image Gallery Lightbox</h4>
491 |                   <p class="blog-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro rem quod illo
492 |                     quam, eum alias id, repellendus magni, quas.</p>
493 |                   <p class="blog-tags">Tags : <a href="#">Javascript</a></p>
494 |                 </div>
495 |               </div>
496 |             </div>
497 |             <!-- Blog Item End -->
498 |           </div>
499 |         </div>
500 |       </section>
501 |       <!-- Blog Section End -->
502 | 
503 |       <!-- Contact Section -->
504 |       <section class="contact section" id="contact">
505 |         <div class="container">
506 |           <div class="row">
507 |             <div class="section-title padd-15">
508 |               <h2>Contact Me</h2>
509 |             </div>
510 |           </div>
511 |           <div class="row">
512 |             <!-- contact-info-item  -->
513 |             <div class="contact-info-item padd-15">
514 |               <div class="icon">
515 |                 <i class="fa fa-phone"></i>
516 |                 <h4>Call Us On</h4>
517 |                 <p>+91 8800 000 000</p>
518 |               </div>
519 |             </div>
520 |             <!-- contact-info-item end -->
521 |             <!-- contact-info-item  -->
522 |             <div class="contact-info-item padd-15">
523 |               <div class="icon">
524 |                 <i class="fa fa-map-marker"></i>
525 |                 <h4>Office</h4>
526 |                 <p>44 Street, New Delhi, India</p>
527 |               </div>
528 |             </div>
529 |             <!-- contact-info-item end -->
530 |             <!-- contact-info-item  -->
531 |             <div class="contact-info-item padd-15">
532 |               <div class="icon">
533 |                 <i class="fa fa-envelope"></i>
534 |                 <h4>Email</h4>
535 |                 <p>info@gmail.com</p>
536 |               </div>
537 |             </div>
538 |             <!-- contact-info-item end -->
539 |           </div>
540 | 
541 |           <!-- Contact Form -->
542 |           <div class="row">
543 |             <form action="#" class="contact-form padd-15">
544 |               <div class="row">
545 |                 <div class="form-item col-6 padd-15">
546 |                   <div class="form-group">
547 |                     <input type="text" name="" class="form-control" placeholder="Name*">
548 |                   </div>
549 |                 </div>
550 |                 <div class="form-item col-6 padd-15">
551 |                   <div class="form-group">
552 |                     <input type="email" name="" class="form-control" placeholder="Email*">
553 |                   </div>
554 |                 </div>
555 |               </div>
556 |               <div class="row">
557 |                 <div class="form-item col-12 padd-15">
558 |                   <div class="form-group">
559 |                     <input type="text" name="" class="form-control" placeholder="Subject*">
560 |                   </div>
561 |                 </div>
562 |               </div>
563 |               <div class="row">
564 |                 <div class="form-item col-12 padd-15">
565 |                   <div class="form-group">
566 |                     <textarea class="form-control" name="" placeholder="Your Message..."></textarea>
567 |                   </div>
568 |                 </div>
569 |               </div>
570 |               <div class="row">
571 |                 <div class="col-12 padd-15">
572 |                   <button type="submit" class="btn">Send Message</button>
573 |                 </div>
574 |               </div>
575 |             </form>
576 |           </div>
577 |           <!-- Contact Form End -->
578 |         </div>
579 |       </section>
580 |       <!-- Contact Section End -->
581 | 
582 |     </div>
583 |     <!-- Main Content End -->
584 |   </div>
585 |   <!-- Main Container End -->
586 | 
587 |   <!-- Lightbox -->
588 |   <div class="lightbox">
589 |     <div class="lightbox-content">
590 |       <div class="lightbox-close">&times;</div>
591 |       <img src="" alt="" onclick="nextItem()" class="lightbox-img">
592 |       <div class="lightbox-caption">
593 |         <div class="caption-text"></div>
594 |         <div class="caption-counter"></div>
595 |       </div>
596 |     </div>
597 |     <div class="lightbox-controls">
598 |       <div class="prev-item" onclick="prevItem()"><i class="fa fa-angle-left"></i></div>
599 |       <div class="next-item" onclick="nextItem()"><i class="fa fa-angle-right"></i></div>
600 |     </div>
601 |   </div>
602 |   <!-- Lightbox End -->
603 | 
604 |   <!-- Live Style Switcher - Demo Only -->
605 |   <div class="style-switcher">
606 |     <div class="toggle-style-switcher">
607 |       <i class="fa fa-cog fa-spin"></i>
608 |     </div>
609 |     <h5>Style Switcher</h5>
610 |     <ul>
611 |       <li><a href="javascript:void(0);" title="pink" style="background-color: #ec1839;" onclick="setActiveStyle('pink')"></a></li>
612 |       <li><a href="javascript:void(0);" title="blue" style="background-color: #2196f3;" onclick="setActiveStyle('blue')"></a></li>
613 |       <li><a href="javascript:void(0);" title="orange" style="background-color: #fa5b0f;" onclick="setActiveStyle('orange')"></a></li>
614 |       <li><a href="javascript:void(0);" title="yellow" style="background-color: #ffb400;" onclick="setActiveStyle('yellow')"></a></li>
615 |       <li><a href="javascript:void(0);" title="green" style="background-color: #72b626;" onclick="setActiveStyle('green')"></a></li>
616 |     </ul>
617 |     <h5>Body Skin</h5>
618 |     <label>
619 |       <input type="radio" class="body-skin" name="body-skin" value="light" checked="true"> Light
620 |     </label>
621 |     <label>
622 |       <input type="radio" class="body-skin" name="body-skin" value="dark"> Dark
623 |     </label>
624 |   </div>
625 |   <!-- Live Style Switcher - Demo Only End -->
626 | 
627 |   <!-- Plugins -->
628 |   <script src="js/ityped.min.js"></script>
629 |   <!-- Template js -->
630 |   <script src="js/script.js"></script>
631 |   <!-- Live Style Js - Demo Only -->
632 |   <script src="js/styleSwitcher.js"></script>
633 | </body>
634 | 
635 | </html>


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
   1 | /*Font Awesome Free Icon*/
   2 | @import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
   3 | /*Google fonts*/
   4 | @import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');
   5 | @import url('https://fonts.googleapis.com/css?family=Rubik:500,700,900&display=swap');
   6 | 
   7 | /* General Style */
   8 | body {
   9 |     margin: 0;
  10 |     line-height: 1.5;
  11 |     font-size: 16px;
  12 |     font-family: 'Montserrat', sans-serif;
  13 |     font-weight: 400;
  14 | }
  15 | 
  16 | * {
  17 |     margin: 0;
  18 |     padding: 0;
  19 |     outline: none;
  20 |     text-decoration: none;
  21 |     box-sizing: border-box;
  22 | }
  23 | 
  24 | ::before,
  25 | ::after {
  26 |     box-sizing: border-box;
  27 | }
  28 | 
  29 | input,
  30 | textarea,
  31 | select {
  32 |     font-family: 'Montserrat', sans-serif;
  33 | }
  34 | 
  35 | .section {
  36 |     background-color: #f2f2fc;
  37 |     min-height: 100vh;
  38 |     display: block;
  39 |     padding: 0 30px;
  40 |     position: fixed;
  41 |     left: 270px;
  42 |     top: 0;
  43 |     right: 0;
  44 |     bottom: 0;
  45 |     z-index: 0;
  46 |     overflow-x: hidden;
  47 |     overflow-y: auto;
  48 |     opacity: 1;
  49 |     transition: all 0.3s ease;
  50 |     -webkit-transition: all 0.3s ease;
  51 | }
  52 | 
  53 | .section.active {
  54 |     opacity: 1;
  55 |     z-index: 2;
  56 |     animation: slideSection 1s ease;
  57 |     -webkit-animation: slideSection 1s ease;
  58 |     -moz-animation: slideSection 1s ease;
  59 |     -o-animation: slideSection 1s ease;
  60 | }
  61 | 
  62 | .section.back-section {
  63 |     z-index: 1;
  64 | }
  65 | 
  66 | @keyframes slideSection {
  67 |     0% {
  68 |         transform: translateX(100%);
  69 |         -webkit-transform: translateX(100%);
  70 |         -moz-transform: translateX(100%);
  71 |         -o-transform: translateX(100%);
  72 |     }
  73 | 
  74 |     100% {
  75 |         transform: translateX(0%);
  76 |         -webkit-transform: translateX(0%);
  77 |         -moz-transform: translateX(0%);
  78 |         -o-transform: translateX(0%);
  79 |     }
  80 | }
  81 | 
  82 | @-webkit-keyframes slideSection {
  83 |     0% {
  84 |         transform: translateX(100%);
  85 |         -webkit-transform: translateX(100%);
  86 |         -moz-transform: translateX(100%);
  87 |         -o-transform: translateX(100%);
  88 |     }
  89 | 
  90 |     100% {
  91 |         transform: translateX(0%);
  92 |         -webkit-transform: translateX(0%);
  93 |         -moz-transform: translateX(0%);
  94 |         -o-transform: translateX(0%);
  95 |     }
  96 | }
  97 | 
  98 | @-moz-keyframes slideSection {
  99 |     0% {
 100 |         transform: translateX(100%);
 101 |         -webkit-transform: translateX(100%);
 102 |         -moz-transform: translateX(100%);
 103 |         -o-transform: translateX(100%);
 104 |     }
 105 | 
 106 |     100% {
 107 |         transform: translateX(0%);
 108 |         -webkit-transform: translateX(0%);
 109 |         -moz-transform: translateX(0%);
 110 |         -o-transform: translateX(0%);
 111 |     }
 112 | }
 113 | 
 114 | @-o-keyframes slideSection {
 115 |     0% {
 116 |         transform: translateX(100%);
 117 |         -webkit-transform: translateX(100%);
 118 |         -moz-transform: translateX(100%);
 119 |         -o-transform: translateX(100%);
 120 |     }
 121 | 
 122 |     100% {
 123 |         transform: translateX(0%);
 124 |         -webkit-transform: translateX(0%);
 125 |         -moz-transform: translateX(0%);
 126 |         -o-transform: translateX(0%);
 127 |     }
 128 | }
 129 | 
 130 | .section .container {
 131 |     padding-top: 60px;
 132 |     padding-bottom: 70px;
 133 | }
 134 | 
 135 | .section-title {
 136 |     -ms-flex: 0 0 100%;
 137 |     flex: 0 0 100%;
 138 |     max-width: 100%;
 139 |     margin-bottom: 60px;
 140 | }
 141 | 
 142 | .section-title h2 {
 143 |     font-size: 40px;
 144 |     color: #302e4d;
 145 |     font-family: 'Rubik', sans-serif;
 146 |     font-weight: 700;
 147 |     margin: 0;
 148 |     position: relative;
 149 | }
 150 | 
 151 | .section-title h2::before {
 152 |     content: '';
 153 |     height: 4px;
 154 |     width: 50px;
 155 |     position: absolute;
 156 |     top: 100%;
 157 |     left: 0;
 158 | }
 159 | 
 160 | .section-title h2::after {
 161 |     content: '';
 162 |     height: 4px;
 163 |     width: 25px;
 164 |     position: absolute;
 165 |     top: 100%;
 166 |     left: 0;
 167 |     margin-top: 8px;
 168 | }
 169 | 
 170 | .row {
 171 |     display: -ms-flexbox;
 172 |     display: flex;
 173 |     -ms-flex-wrap: wrap;
 174 |     flex-wrap: wrap;
 175 |     margin-right: -15px;
 176 |     margin-left: -15px;
 177 |     position: relative;
 178 | }
 179 | 
 180 | .padd-15 {
 181 |     padding-left: 15px;
 182 |     padding-right: 15px;
 183 | }
 184 | 
 185 | .container {
 186 |     max-width: 1100px;
 187 |     width: 100%;
 188 |     margin: auto;
 189 | }
 190 | 
 191 | .shadow-dark {
 192 |     -webkit-box-shadow: 0 0 20px rgba(48, 46, 77, 0.15);
 193 |     box-shadow: 0 0 20px rgba(48, 46, 77, 0.15);
 194 | }
 195 | 
 196 | .btn {
 197 |     font-size: 16px;
 198 |     font-family: 'Rubik', sans-serif;
 199 |     font-weight: 500;
 200 |     padding: 12px 35px;
 201 |     color: #ffffff;
 202 |     border-radius: 40px;
 203 |     transition: all 0.3s ease;
 204 |     -webkit-transition: all 0.3s ease;
 205 |     display: inline-block;
 206 |     white-space: nowrap;
 207 |     border: none;
 208 |     cursor: pointer;
 209 | }
 210 | 
 211 | .btn:hover {
 212 |     -webkit-transform: scale(1.05);
 213 |     transform: scale(1.05);
 214 | }
 215 | 
 216 | .hidden {
 217 |     display: none !important;
 218 | }
 219 | 
 220 | /* Preloader */
 221 | .preloader {
 222 |     background-color: #222222;
 223 |     position: fixed;
 224 |     left: 0;
 225 |     top: 0;
 226 |     height: 100%;
 227 |     width: 100%;
 228 |     z-index: 150;
 229 |     display: flex;
 230 |     display: -ms-flexbox;
 231 |     -ms-flex-align: center;
 232 |     -ms-flex-pack: center;
 233 |     align-items: center;
 234 |     justify-content: center;
 235 |     transition: all 1s ease;
 236 |     -webkit-transition: all 1s ease;
 237 | }
 238 | 
 239 | .preloader.opacity-0 {
 240 |     opacity: 0;
 241 | }
 242 | 
 243 | .preloader .loader {
 244 |     height: 40px;
 245 |     width: 40px;
 246 |     border: 4px solid #e3e3e3;
 247 |     border-radius: 50%;
 248 |     border-top: 4px solid transparent;
 249 |     border-bottom: 4px solid transparent;
 250 |     animation: spin 2s linear infinite;
 251 |     -webkit-animation: spin 2s linear infinite;
 252 | }
 253 | 
 254 | @keyframes spin {
 255 |     0% {
 256 |         transform: rotate(0deg);
 257 |         -webkit-transform: rotate(0deg);
 258 |     }
 259 | 
 260 |     100% {
 261 |         transform: rotate(360deg);
 262 |         -webkit-transform: rotate(360deg);
 263 |     }
 264 | }
 265 | 
 266 | @-webkit-keyframes spin {
 267 |     0% {
 268 |         transform: rotate(0deg);
 269 |         -webkit-transform: rotate(0deg);
 270 |     }
 271 | 
 272 |     100% {
 273 |         transform: rotate(360deg);
 274 |         -webkit-transform: rotate(360deg);
 275 |     }
 276 | }
 277 | 
 278 | /* Aside */
 279 | 
 280 | .aside {
 281 |     width: 270px;
 282 |     background-color: #fdf9ff;
 283 |     position: fixed;
 284 |     height: 100%;
 285 |     left: 0;
 286 |     top: 0;
 287 |     z-index: 11;
 288 |     border-right: 1px solid #e8dfec;
 289 |     /* padding: 30px; */
 290 |     transition: all 0.3s ease;
 291 |     -webkit-transition: all 0.3s ease;
 292 |     /* overflow-y: auto; */
 293 | }
 294 | 
 295 | .aside .aside-inner {
 296 |     position: absolute;
 297 |     left: 0;
 298 |     top: 0;
 299 |     width: 100%;
 300 |     height: 100%;
 301 |     padding: 30px;
 302 |     overflow-y: auto;
 303 | }
 304 | 
 305 | .aside .logo {
 306 |     padding: 30px 0;
 307 | }
 308 | 
 309 | .aside .logo a {
 310 |     font-size: 40px;
 311 |     color: #302e4d;
 312 |     font-family: 'Rubik', sans-serif;
 313 |     font-weight: 700;
 314 |     text-decoration: none;
 315 |     display: inline-block;
 316 |     position: relative;
 317 |     padding: 0 10px;
 318 |     line-height: 50px;
 319 | }
 320 | 
 321 | .aside .logo a::before {
 322 |     content: '';
 323 |     height: 20px;
 324 |     width: 20px;
 325 |     position: absolute;
 326 |     top: 0;
 327 |     left: 0;
 328 | }
 329 | 
 330 | .aside .logo a::after {
 331 |     content: '';
 332 |     height: 20px;
 333 |     width: 20px;
 334 |     position: absolute;
 335 |     bottom: 0;
 336 |     right: 0;
 337 | }
 338 | 
 339 | .aside .nav-toggler {
 340 |     height: 40px;
 341 |     width: 45px;
 342 |     border: 1px solid #d4d4e3;
 343 |     cursor: pointer;
 344 |     position: fixed;
 345 |     left: 300px;
 346 |     top: 20px;
 347 |     z-index: 11;
 348 |     border-radius: 5px;
 349 |     background-color: #fdf9ff;
 350 |     /* display: -ms-flexbox;
 351 |     display: flex; */
 352 |     display: none;
 353 |     -ms-flex-align: center;
 354 |     align-items: center;
 355 |     justify-content: center;
 356 |     -ms-flex-pack: center;
 357 |     transition: all 0.3s ease;
 358 |     -webkit-transition: all 0.3s ease;
 359 | }
 360 | 
 361 | .aside .nav-toggler span {
 362 |     height: 2px;
 363 |     width: 18px;
 364 |     display: inline-block;
 365 |     position: relative;
 366 | }
 367 | 
 368 | .aside .nav-toggler.open span {
 369 |     background-color: transparent;
 370 | }
 371 | 
 372 | .aside .nav-toggler span::before {
 373 |     content: '';
 374 |     height: 2px;
 375 |     width: 18px;
 376 |     position: absolute;
 377 |     top: -6px;
 378 |     left: 0;
 379 | }
 380 | 
 381 | .aside .nav-toggler.open span::before {
 382 |     transform: rotate(45deg);
 383 |     -webkit-transform: rotate(45deg);
 384 |     top: 0px;
 385 | }
 386 | 
 387 | .aside .nav-toggler span::after {
 388 |     content: '';
 389 |     height: 2px;
 390 |     width: 18px;
 391 |     position: absolute;
 392 |     top: 6px;
 393 |     left: 0;
 394 | }
 395 | 
 396 | .aside .nav-toggler.open span::after {
 397 |     transform: rotate(-45deg);
 398 |     -webkit-transform: rotate(-45deg);
 399 |     top: 0px;
 400 | }
 401 | 
 402 | .aside .nav {
 403 |     list-style: none;
 404 |     margin: 70px 0;
 405 |     padding: 0;
 406 | }
 407 | 
 408 | .aside .nav li {
 409 |     display: block;
 410 | }
 411 | 
 412 | .aside .nav li a {
 413 |     font-size: 16px;
 414 |     font-weight: 600;
 415 |     color: #302e4d;
 416 |     text-decoration: none;
 417 |     line-height: 45px;
 418 |     display: block;
 419 |     border-bottom: 1px solid #e8dfec;
 420 |     -webkit-transition: all 0.3s ease;
 421 |     transition: all 0.3s ease;
 422 |     text-transform: capitalize;
 423 | }
 424 | 
 425 | .aside .nav li a:not(.active):hover {
 426 |     padding-left: 5px;
 427 | }
 428 | 
 429 | .aside .nav li a .fa {
 430 |     margin-right: 5px;
 431 | }
 432 | 
 433 | .aside .copyright-text {
 434 |     position: absolute;
 435 |     bottom: 5px;
 436 |     font-size: 13px;
 437 |     color: #7d7d7d;
 438 | }
 439 | 
 440 | /* Home Section */
 441 | 
 442 | .home {
 443 |     min-height: 100vh;
 444 |     display: -ms-flexbox;
 445 |     display: flex;
 446 | }
 447 | 
 448 | .home .intro {
 449 |     text-align: center;
 450 | }
 451 | 
 452 | .home .intro img {
 453 |     height: 200px;
 454 |     width: 200px;
 455 |     border-radius: 50%;
 456 |     display: inline-block;
 457 |     border: 8px solid #ffffff;
 458 | }
 459 | 
 460 | .home .intro h1 {
 461 |     font-size: 30px;
 462 |     color: #302e4d;
 463 |     font-family: 'Rubik', sans-serif;
 464 |     font-weight: 700;
 465 |     margin: 20px 0 5px;
 466 | }
 467 | 
 468 | .home .intro span {
 469 |     font-size: 16px;
 470 |     font-weight: 500;
 471 |     margin: 0;
 472 |     line-height: 22px;
 473 |     color: #504e70;
 474 | 
 475 | }
 476 | 
 477 | .home .intro .social-links {
 478 |     margin-top: 25px;
 479 | }
 480 | 
 481 | .home .intro .social-links a {
 482 |     height: 35px;
 483 |     width: 35px;
 484 |     display: inline-block;
 485 |     text-align: center;
 486 |     line-height: 35px;
 487 |     color: #ffffff;
 488 |     margin: 0 4px;
 489 |     border-radius: 40%;
 490 |     text-decoration: none;
 491 |     -webkit-transition: all 0.3s ease;
 492 |     transition: all 0.3s ease;
 493 | }
 494 | 
 495 | .home .intro .social-links a:hover {
 496 |     -webkit-transform: scale(1.1);
 497 |     transform: scale(1.1);
 498 | }
 499 | 
 500 | .ityped-cursor {
 501 |     /* font-size: 2.2rem; */
 502 |     opacity: 1;
 503 |     -webkit-animation: blink 0.3s infinite;
 504 |     -moz-animation: blink 0.3s infinite;
 505 |     animation: blink 0.3s infinite;
 506 |     animation-direction: alternate;
 507 | }
 508 | 
 509 | @keyframes blink {
 510 |     100% {
 511 |         opacity: 0;
 512 |     }
 513 | }
 514 | 
 515 | @-webkit-keyframes blink {
 516 |     100% {
 517 |         opacity: 0;
 518 |     }
 519 | }
 520 | 
 521 | @-moz-keyframes blink {
 522 |     100% {
 523 |         opacity: 0;
 524 |     }
 525 | }
 526 | 
 527 | /* About Section */
 528 | 
 529 | .about .about-content {
 530 |     -ms-flex: 0 0 100%;
 531 |     flex: 0 0 100%;
 532 |     max-width: 100%;
 533 | }
 534 | 
 535 | .about .about-content .about-text {
 536 |     -ms-flex: 0 0 100%;
 537 |     flex: 0 0 100%;
 538 |     max-width: 100%;
 539 | }
 540 | 
 541 | .about .about-content .about-text h3 {
 542 |     font-size: 24px;
 543 |     margin-bottom: 15px;
 544 |     font-weight: 700;
 545 |     color: #302e4d;
 546 | }
 547 | 
 548 | .about .about-content .about-text p {
 549 |     font-size: 16px;
 550 |     line-height: 25px;
 551 |     color: #020203;
 552 |     margin: 0;
 553 | }
 554 | 
 555 | .about .about-content .personal-info {
 556 |     -ms-flex: 0 0 60%;
 557 |     flex: 0 0 60%;
 558 |     max-width: 60%;
 559 |     margin-top: 40px;
 560 | }
 561 | 
 562 | .about .about-content .personal-info .info-item {
 563 |     -ms-flex: 0 0 50%;
 564 |     flex: 0 0 50%;
 565 |     max-width: 50%;
 566 | }
 567 | 
 568 | .about .about-content .personal-info .info-item p {
 569 |     font-weight: 600;
 570 |     padding: 10px 0;
 571 |     font-size: 16px;
 572 |     margin: 0;
 573 |     color: #302e4d;
 574 |     border-bottom: 1px solid #e8dfec;
 575 | }
 576 | 
 577 | .about .about-content .personal-info .info-item p span {
 578 |     font-weight: 400;
 579 |     color: #504e70;
 580 |     margin-left: 4px;
 581 |     display: inline-block;
 582 | }
 583 | 
 584 | .about .about-content .personal-info .buttons {
 585 |     margin-top: 30px;
 586 | }
 587 | 
 588 | .about .about-content .personal-info .buttons .btn {
 589 |     margin-right: 15px;
 590 |     margin-top: 10px;
 591 | }
 592 | 
 593 | .about .about-content .skills {
 594 |     -ms-flex: 0 0 40%;
 595 |     flex: 0 0 40%;
 596 |     max-width: 40%;
 597 |     margin-top: 40px;
 598 | }
 599 | 
 600 | .about .about-content .skills .skill-item {
 601 |     -ms-flex: 0 0 100%;
 602 |     flex: 0 0 100%;
 603 |     max-width: 100%;
 604 | }
 605 | 
 606 | .about .about-content .skills .skill-item h5 {
 607 |     line-height: 40px;
 608 |     font-weight: 600;
 609 |     font-size: 16px;
 610 |     color: #302e4d;
 611 |     text-transform: capitalize;
 612 |     margin: 0;
 613 | }
 614 | 
 615 | .about .about-content .skills .skill-item {
 616 |     margin-bottom: 30px;
 617 | }
 618 | 
 619 | .about .about-content .skills .skill-item .progress {
 620 |     background-color: #e3e3e3;
 621 |     height: 8px;
 622 |     border-radius: 4px;
 623 |     width: 100%;
 624 |     position: relative;
 625 | }
 626 | 
 627 | .about .about-content .skills .skill-item .progress .progress-in {
 628 |     position: absolute;
 629 |     left: 0;
 630 |     top: 0;
 631 |     height: 100%;
 632 |     border-radius: 4px;
 633 | }
 634 | 
 635 | .about .about-content .skills .skill-item .skill-porcent {
 636 |     line-height: 40px;
 637 |     position: absolute;
 638 |     right: 0;
 639 |     top: -40px;
 640 |     font-weight: 400;
 641 |     color: #302e4d;
 642 | }
 643 | 
 644 | .about .about-content .education {
 645 |     -ms-flex: 0 0 50%;
 646 |     flex: 0 0 50%;
 647 |     max-width: 50%;
 648 |     margin-top: 30px;
 649 | }
 650 | 
 651 | .about .about-content .experience {
 652 |     -ms-flex: 0 0 50%;
 653 |     flex: 0 0 50%;
 654 |     max-width: 50%;
 655 |     margin-top: 30px;
 656 | }
 657 | 
 658 | .about .about-content h3.title {
 659 |     font-size: 24px;
 660 |     margin-bottom: 30px;
 661 |     font-weight: 700;
 662 |     color: #302e4d;
 663 | }
 664 | 
 665 | .about .about-content .timeline {
 666 |     background-color: #fdf9ff;
 667 |     padding: 30px 15px;
 668 |     border: 1px solid #d4d4e3;
 669 |     border-radius: 10px;
 670 |     position: relative;
 671 |     width: 100%;
 672 | }
 673 | 
 674 | .about .about-content .timeline .timeline-item {
 675 |     position: relative;
 676 |     padding-left: 37px;
 677 |     padding-bottom: 50px;
 678 | }
 679 | 
 680 | .about .about-content .timeline .timeline-item::before {
 681 |     content: '';
 682 |     width: 1px;
 683 |     position: absolute;
 684 |     height: 100%;
 685 |     left: 7px;
 686 |     top: 0;
 687 | }
 688 | 
 689 | .about .about-content .timeline .timeline-item:last-child {
 690 |     padding-bottom: 0px;
 691 | }
 692 | 
 693 | .about .about-content .timeline-box {
 694 |     -ms-flex: 0 0 100%;
 695 |     flex: 0 0 100%;
 696 |     max-width: 100%;
 697 | }
 698 | 
 699 | .about .about-content .timeline .circle-dot {
 700 |     position: absolute;
 701 |     left: 0;
 702 |     top: 0px;
 703 |     height: 15px;
 704 |     width: 15px;
 705 |     left: 0px;
 706 |     border-radius: 50%;
 707 | }
 708 | 
 709 | .about .about-content .timeline .timeline-date {
 710 |     font-size: 14px;
 711 |     font-weight: 400;
 712 |     color: #504e70;
 713 |     margin-bottom: 12px;
 714 | }
 715 | 
 716 | .about .about-content .timeline .timeline-date .fa {
 717 |     margin-right: 5px;
 718 | }
 719 | 
 720 | .about .about-content .timeline .timeline-title {
 721 |     font-weight: 700;
 722 |     font-size: 18px;
 723 |     margin-bottom: 15px;
 724 |     text-transform: capitalize;
 725 |     color: #302e4d;
 726 | }
 727 | 
 728 | .about .about-content .timeline .timeline-text {
 729 |     font-size: 16px;
 730 |     line-height: 25px;
 731 |     color: #504e70;
 732 |     margin: 0;
 733 | }
 734 | 
 735 | /* Services Section */
 736 | 
 737 | .service .container {
 738 |     padding-bottom: 40px;
 739 | }
 740 | 
 741 | .service .service-item {
 742 |     flex: 0 0 33.33%;
 743 |     -ms-flex: 0 0 33.33%;
 744 |     max-width: 33.33%;
 745 |     margin-bottom: 30px;
 746 |     display: -ms-flexbox;
 747 |     display: flex;
 748 | }
 749 | 
 750 | .service .service-item .service-item-inner {
 751 |     background-color: #fdf9ff;
 752 |     border: 1px solid #d4d4e3;
 753 |     border-radius: 10px;
 754 |     padding: 30px 15px;
 755 |     text-align: center;
 756 |     transition: all 0.3s ease;
 757 |     -webkit-transition: all 0.3s ease;
 758 | }
 759 | 
 760 | .service .service-item .service-item-inner:hover {
 761 |     -webkit-box-shadow: 0 0 20px rgba(48, 46, 77, 0.15);
 762 |     box-shadow: 0 0 20px rgba(48, 46, 77, 0.15);
 763 | }
 764 | 
 765 | .service .service-item .service-item-inner .icon {
 766 |     height: 60px;
 767 |     width: 60px;
 768 |     display: block;
 769 |     margin: 0 auto 30px;
 770 |     text-align: center;
 771 |     border-radius: 50%;
 772 |     transition: all 0.3s ease;
 773 |     -webkit-transition: all 0.3s ease;
 774 | }
 775 | 
 776 | .service .service-item .service-item-inner .icon .fa {
 777 |     font-size: 40px;
 778 |     line-height: 60px;
 779 |     transition: all 0.3s ease;
 780 |     -webkit-transition: all 0.3s ease;
 781 | }
 782 | 
 783 | .service .service-item .service-item-inner:hover .icon .fa {
 784 |     font-size: 25px;
 785 |     color: #ffffff;
 786 | }
 787 | 
 788 | .service .service-item .service-item-inner h4 {
 789 |     font-size: 18px;
 790 |     margin-bottom: 15px;
 791 |     color: #302e4d;
 792 |     font-weight: 700;
 793 |     text-transform: capitalize;
 794 | }
 795 | 
 796 | .service .service-item .service-item-inner p {
 797 |     font-size: 16px;
 798 |     color: #504e70;
 799 |     line-height: 25px;
 800 |     margin: 0;
 801 | }
 802 | 
 803 | /* Portfolio Section */
 804 | 
 805 | .portfolio .container {
 806 |     padding-bottom: 40px;
 807 | }
 808 | 
 809 | .portfolio .portfolio-filter {
 810 |     flex: 0 0 100%;
 811 |     -ms-flex: 0 0 100%;
 812 |     max-width: 100%;
 813 |     text-align: center;
 814 |     margin-bottom: 40px;
 815 | }
 816 | 
 817 | .portfolio .portfolio-filter button {
 818 |     border: none;
 819 |     background-color: transparent;
 820 |     font-size: 18px;
 821 |     font-weight: 700;
 822 |     text-transform: capitalize;
 823 |     margin: 0 10px;
 824 |     color: #302e4d;
 825 |     cursor: pointer;
 826 |     border-bottom: 2px solid transparent;
 827 |     white-space: nowrap;
 828 |     padding-bottom: 2px;
 829 |     transition: all 0.3s ease;
 830 |     -webkit-transition: all 0.3s ease;
 831 | }
 832 | 
 833 | .portfolio .portfolio-item {
 834 |     flex: 0 0 33.33%;
 835 |     -ms-flex: 0 0 33.33%;
 836 |     max-width: 33.33%;
 837 |     margin-bottom: 30px;
 838 | }
 839 | 
 840 | .portfolio .portfolio-item.hide {
 841 |     display: none;
 842 | }
 843 | 
 844 | .portfolio .portfolio-item.show {
 845 |     display: block;
 846 |     animation: showItem 0.5s ease;
 847 | }
 848 | 
 849 | @keyframes showItem {
 850 |     0% {
 851 |         transform: scale(0.8);
 852 |         -webkit-transform: scale(0.8);
 853 |     }
 854 | 
 855 |     100% {
 856 |         transform: scale(1);
 857 |         -webkit-transform: scale(1);
 858 |     }
 859 | }
 860 | 
 861 | @-webkit-keyframes showItem {
 862 |     0% {
 863 |         transform: scale(0.8);
 864 |         -webkit-transform: scale(0.8);
 865 |         opacity: 0;
 866 |     }
 867 | 
 868 |     100% {
 869 |         transform: scale(1);
 870 |         -webkit-transform: scale(1);
 871 |         opacity: 1;
 872 |     }
 873 | }
 874 | 
 875 | .portfolio .portfolio-item-inner {
 876 |     border: 6px solid #fdf9ff;
 877 |     border-radius: 10px;
 878 |     overflow: hidden;
 879 |     cursor: pointer;
 880 |     position: relative;
 881 | }
 882 | 
 883 | .portfolio .portfolio-item-inner .portfolio-img img {
 884 |     width: 100%;
 885 |     display: block;
 886 | }
 887 | 
 888 | .portfolio .portfolio-item .portfolio-info {
 889 |     position: absolute;
 890 |     top: 0;
 891 |     left: 0;
 892 |     background-color: rgba(0, 0, 0, 0.8);
 893 |     height: 100%;
 894 |     width: 100%;
 895 |     z-index: 1;
 896 |     padding: 30px;
 897 |     opacity: 0;
 898 |     transition: all 0.3s ease;
 899 |     -webkit-transition: all 0.3s ease;
 900 | }
 901 | 
 902 | .portfolio .portfolio-item-inner:hover .portfolio-info {
 903 |     opacity: 1;
 904 | }
 905 | 
 906 | .portfolio .portfolio-item .portfolio-info h4 {
 907 |     font-size: 18px;
 908 |     font-weight: 700;
 909 |     color: #ffffff;
 910 |     text-transform: capitalize;
 911 |     transition: all 0.3s ease;
 912 |     -webkit-transition: all 0.3s ease;
 913 |     transform: translate(-20px);
 914 |     -webkit-transform: translate(-20px);
 915 |     opacity: 0;
 916 | }
 917 | 
 918 | .portfolio .portfolio-item-inner:hover .portfolio-info h4 {
 919 |     transform: translate(0px);
 920 |     -webkit-transform: translate(0px);
 921 |     opacity: 1;
 922 | }
 923 | 
 924 | .portfolio .portfolio-item .portfolio-info .icon {
 925 |     height: 40px;
 926 |     width: 40px;
 927 |     background-color: #ffffff;
 928 |     text-align: center;
 929 |     border-radius: 50%;
 930 |     position: absolute;
 931 |     right: 30px;
 932 |     bottom: 30px;
 933 |     transition: all 0.3s ease;
 934 |     -webkit-transition: all 0.3s ease;
 935 |     transform: translate(20px);
 936 |     -webkit-transform: translate(20px);
 937 |     opacity: 0;
 938 | }
 939 | 
 940 | .portfolio .portfolio-item-inner:hover .portfolio-info .icon {
 941 |     transform: translate(0px);
 942 |     -webkit-transform: translate(0px);
 943 |     opacity: 1;
 944 | }
 945 | 
 946 | .portfolio .portfolio-item .portfolio-info .icon .fa {
 947 |     line-height: 40px;
 948 | }
 949 | 
 950 | /* Lightbox */
 951 | 
 952 | .lightbox {
 953 |     position: fixed;
 954 |     left: 0;
 955 |     top: 0;
 956 |     width: 100%;
 957 |     height: 100%;
 958 |     background-color: rgba(0, 0, 0, 0.6);
 959 |     z-index: 100;
 960 |     display: none;
 961 |     align-items: center;
 962 |     -ms-flex-align: center;
 963 |     -ms-flex-pack: center;
 964 |     justify-content: center;
 965 |     cursor: zoom-out;
 966 |     padding: 30px;
 967 | }
 968 | 
 969 | .lightbox.open {
 970 |     display: flex;
 971 |     display: -ms-flexbox;
 972 | }
 973 | 
 974 | .lightbox .lightbox-content img {
 975 |     height: auto;
 976 |     width: auto;
 977 |     max-width: 100%;
 978 |     max-height: 500px;
 979 |     cursor: pointer;
 980 |     display: block;
 981 |     padding: 40px 0 30px;
 982 | }
 983 | 
 984 | .lightbox.open .lightbox-content {
 985 |     animation: lightboxImage .5s ease;
 986 | }
 987 | 
 988 | @keyframes lightboxImage {
 989 |     0% {
 990 |         transform: scale(0.8);
 991 |         -webkit-transform: scale(0.8);
 992 |     }
 993 | 
 994 |     100% {
 995 |         transform: scale(1);
 996 |         -webkit-transform: scale(1);
 997 |     }
 998 | }
 999 | 
1000 | @-webkit-keyframes lightboxImage {
1001 |     0% {
1002 |         transform: scale(0.8);
1003 |         -webkit-transform: scale(0.8);
1004 |     }
1005 | 
1006 |     100% {
1007 |         transform: scale(1);
1008 |         -webkit-transform: scale(1);
1009 |     }
1010 | }
1011 | 
1012 | .lightbox .lightbox-content {
1013 |     position: relative;
1014 | }
1015 | 
1016 | .lightbox .lightbox-content .lightbox-caption {
1017 |     position: absolute;
1018 |     bottom: 0;
1019 |     left: 0;
1020 |     width: 100%;
1021 |     display: -ms-flexbox;
1022 |     display: flex;
1023 |     -ms-flex-pack: space-between;
1024 |     justify-content: space-between;
1025 |     font-size: 16px;
1026 |     color: #ffffff;
1027 |     font-weight: 400;
1028 |     z-index: -1;
1029 | }
1030 | 
1031 | .lightbox .lightbox-content .lightbox-close {
1032 |     position: absolute;
1033 |     height: 40px;
1034 |     width: 40px;
1035 |     top: 0px;
1036 |     right: 0px;
1037 |     font-size: 32px;
1038 |     text-align: right;
1039 |     color: #ffffff;
1040 |     line-height: 40px;
1041 |     cursor: pointer;
1042 | }
1043 | 
1044 | .lightbox .lightbox-controls .prev-item,
1045 | .lightbox .lightbox-controls .next-item {
1046 |     position: absolute;
1047 |     height: 40px;
1048 |     width: 40px;
1049 |     background-color: #ffffff;
1050 |     text-align: center;
1051 |     border-radius: 50%;
1052 |     cursor: pointer;
1053 |     top: 50%;
1054 |     margin-top: -20px;
1055 |     z-index: 110;
1056 |     transition: all 0.3s ease;
1057 |     -webkit-transition: all 0.3s ease;
1058 | }
1059 | 
1060 | .lightbox .lightbox-controls .prev-item:active,
1061 | .lightbox .lightbox-controls .next-item:active {
1062 |     transform: scale(1.1);
1063 |     -webkit-transform: scale(1.1);
1064 | }
1065 | 
1066 | .lightbox .lightbox-controls .prev-item:hover,
1067 | .lightbox .lightbox-controls .next-item:hover {
1068 |     transform: scale(1);
1069 |     -webkit-transform: scale(1);
1070 | }
1071 | 
1072 | .lightbox .lightbox-controls .prev-item {
1073 |     left: 30px;
1074 | }
1075 | 
1076 | .lightbox .lightbox-controls .next-item {
1077 |     right: 30px;
1078 | }
1079 | 
1080 | .lightbox .lightbox-controls .prev-item .fa,
1081 | .lightbox .lightbox-controls .next-item .fa {
1082 |     font-size: 32px;
1083 |     line-height: 40px;
1084 | }
1085 | 
1086 | /* Blog Section */
1087 | 
1088 | .blog .container {
1089 |     padding-bottom: 40px;
1090 | }
1091 | 
1092 | .blog .blog-item {
1093 |     flex: 0 0 33.33%;
1094 |     -ms-flex: 0 0 33.33%;
1095 |     max-width: 33.33%;
1096 |     margin-bottom: 30px;
1097 | }
1098 | 
1099 | .blog .blog-item-inner {
1100 |     border-radius: 10px;
1101 |     overflow: hidden;
1102 |     border: 1px solid #d4d4e3;
1103 | }
1104 | 
1105 | .blog .blog-item-inner .blog-img {
1106 |     position: relative;
1107 |     overflow: hidden;
1108 | }
1109 | 
1110 | .blog .blog-item-inner .blog-img img {
1111 |     width: 100%;
1112 |     display: block;
1113 |     transition: all 0.5s ease;
1114 |     -webkit-transition: all 0.5s ease;
1115 | }
1116 | 
1117 | .blog .blog-item-inner:hover .blog-img img {
1118 |     transform: scale(1.1);
1119 |     -webkit-transform: scale(1.1);
1120 | }
1121 | 
1122 | .blog .blog-item-inner .blog-img .blog-date {
1123 |     position: absolute;
1124 |     padding: 4px 10px;
1125 |     border-radius: 5px;
1126 |     color: #ffffff;
1127 |     font-size: 14px;
1128 |     font-weight: 600;
1129 |     left: 15px;
1130 |     bottom: 15px;
1131 | }
1132 | 
1133 | .blog .blog-item-inner .blog-info {
1134 |     padding: 30px 15px;
1135 |     background-color: #fdf9ff;
1136 | }
1137 | 
1138 | .blog .blog-item-inner .blog-info .blog-title {
1139 |     font-size: 18px;
1140 |     font-weight: 700;
1141 |     color: #302e4d;
1142 |     text-transform: capitalize;
1143 |     margin-bottom: 10px;
1144 | }
1145 | 
1146 | .blog .blog-item-inner .blog-info .blog-description {
1147 |     font-size: 16px;
1148 |     line-height: 25px;
1149 |     color: #504e70;
1150 |     font-weight: 400;
1151 |     margin-bottom: 15px;
1152 | }
1153 | 
1154 | .blog .blog-item-inner .blog-info .blog-tags {
1155 |     font-size: 16px;
1156 |     line-height: 25px;
1157 |     color: #504e70;
1158 |     font-weight: 400;
1159 |     text-transform: capitalize;
1160 |     font-size: 14px;
1161 | }
1162 | 
1163 | .blog .blog-item-inner .blog-info .blog-tags a {
1164 |     text-decoration: none;
1165 |     font-weight: 600;
1166 | }
1167 | 
1168 | /* Contact Section */
1169 | 
1170 | .contact .contact-info-item {
1171 |     flex: 0 0 33.33%;
1172 |     -ms-flex: 0 0 33.33%;
1173 |     max-width: 33.33%;
1174 |     text-align: center;
1175 |     margin-bottom: 40px;
1176 | }
1177 | 
1178 | .contact .contact-info-item .icon {
1179 |     display: inline-block;
1180 | }
1181 | 
1182 | .contact .contact-info-item .icon .fa {
1183 |     font-size: 40px;
1184 | }
1185 | 
1186 | .contact .contact-info-item h4 {
1187 |     font-size: 18px;
1188 |     font-weight: 700;
1189 |     color: #302e4d;
1190 |     text-transform: capitalize;
1191 |     margin: 15px 0 5px;
1192 | }
1193 | 
1194 | .contact .contact-info-item p {
1195 |     font-size: 16px;
1196 |     line-height: 25px;
1197 |     color: #504e70;
1198 |     margin: 0;
1199 |     font-weight: 400;
1200 | }
1201 | 
1202 | .contact .contact-form {
1203 |     flex: 0 0 100%;
1204 |     -ms-flex: 0 0 100%;
1205 |     max-width: 100%;
1206 | }
1207 | 
1208 | .contact .contact-form .col-6 {
1209 |     flex: 0 0 50%;
1210 |     -ms-flex: 0 0 50%;
1211 |     max-width: 50%;
1212 | }
1213 | 
1214 | .contact .contact-form .col-12 {
1215 |     flex: 0 0 100%;
1216 |     -ms-flex: 0 0 100%;
1217 |     max-width: 100%;
1218 | }
1219 | 
1220 | .contact .contact-form .form-item {
1221 |     margin-bottom: 30px;
1222 | }
1223 | 
1224 | .contact .contact-form .form-item .form-control {
1225 |     width: 100%;
1226 |     height: 50px;
1227 |     border-radius: 25px;
1228 |     border: 1px solid #d4d4e3;
1229 |     padding: 10px 25px;
1230 |     font-size: 16px;
1231 |     color: #504e70;
1232 | }
1233 | 
1234 | .contact .contact-form .form-item .form-control:focus {
1235 |     -webkit-box-shadow: 0 0 20px rgba(48, 46, 77, 0.15);
1236 |     box-shadow: 0 0 20px rgba(48, 46, 77, 0.15);
1237 |     transition: all 0.3s ease;
1238 |     -webkit-transition: all 0.3s ease;
1239 | }
1240 | 
1241 | .contact .contact-form .form-item textarea.form-control {
1242 |     height: 140px;
1243 | }
1244 | 
1245 | .contact .contact-form .btn {
1246 |     height: 50px;
1247 |     padding: 0 50px;
1248 | }
1249 | 
1250 | /* Responsive */
1251 | 
1252 | @media(max-width: 1199px) {
1253 |     .section .container {
1254 |         padding-top: 70px;
1255 |     }
1256 | 
1257 |     .aside .nav-toggler {
1258 |         display: -ms-flexbox;
1259 |         display: flex;
1260 |         left: 30px;
1261 |     }
1262 | 
1263 |     .aside .nav-toggler.open {
1264 |         left: 300px;
1265 |     }
1266 | 
1267 |     .aside {
1268 |         left: -270px;
1269 |     }
1270 | 
1271 |     .aside.open {
1272 |         left: 0;
1273 |     }
1274 | 
1275 |     .section {
1276 |         left: 0;
1277 |     }
1278 | 
1279 |     .section.open {
1280 |         left: 270px;
1281 |     }
1282 | 
1283 |     .about .about-content .personal-info .info-item p span {
1284 |         display: block;
1285 |         margin-left: 0;
1286 |     }
1287 | }
1288 | 
1289 | @media(max-width: 991px) {
1290 | 
1291 |     .service .service-item,
1292 |     .blog .blog-item,
1293 |     .portfolio .portfolio-item {
1294 |         flex: 0 0 50%;
1295 |         -ms-flex: 0 0 50%;
1296 |         max-width: 50%;
1297 |     }
1298 | }
1299 | 
1300 | @media(max-width: 767px) {
1301 | 
1302 |     .about .about-content .personal-info,
1303 |     .contact .contact-form .col-6,
1304 |     .service .service-item,
1305 |     .blog .blog-item,
1306 |     .about .about-content .skills,
1307 |     .about .about-content .education,
1308 |     .about .about-content .experience {
1309 |         flex: 0 0 100%;
1310 |         -ms-flex: 0 0 100%;
1311 |         max-width: 100%;
1312 |     }
1313 | 
1314 |     .portfolio .portfolio-filter button {
1315 |         margin-bottom: 10px;
1316 |     }
1317 | }
1318 | 
1319 | @media(max-width: 575px) {
1320 | 
1321 |     .portfolio .portfolio-item,
1322 |     .contact .contact-info-item {
1323 |         flex: 0 0 100%;
1324 |         -ms-flex: 0 0 100%;
1325 |         max-width: 100%;
1326 |     }
1327 | }


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