├── 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 | | [](https://github.com/DanielSPF/personal-website/blob/master/project-content/Section%20Screens/1-home.jpg) | [](https://github.com/https://github.com/DanielSPF/personal-website/blob/master/project-content/Section%20Screens/2-About.jpg) | [](https://github.com/DanielSPF/personal-website/blob/master/project-content/Section%20Screens/3-Services.jpg)
10 |
11 | | Portfolio | Blog | Contact
12 | | --- | --- | --- |
13 | | [](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/5-Blog.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 |
2 |
3 |
4 |
5 | Personal Portfolio Template
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
43 |
44 |
52 |
53 |
54 | © 2020 The WebShala Template
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
Upvesh Kumar
68 |
69 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
About Me
86 |
87 |
88 |
89 |
90 |
91 |
92 |
I'm Upvesh Kumar and Web Developer
93 |
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.
95 |
96 |
97 |
98 |
99 |
100 |
101 |
Birthday : 5 June 1992
102 |
103 |
106 |
107 |
Website : www.domain.com
108 |
109 |
110 |
Email : info@gmail.com
111 |
112 |
113 |
Degree : M.Tech
114 |
115 |
116 |
Phone : +91 8800 000 000
117 |
118 |
119 |
City : Mumbai
120 |
121 |
122 |
Freelance : Available
123 |
124 |
125 |
131 |
132 |
133 |
134 |
135 |
Javascript
136 |
137 |
138 |
139 | 76%
140 |
141 |
142 |
143 |
144 |
Wordpress
145 |
146 |
147 |
148 | 90%
149 |
150 |
151 |
152 |
153 |
Java
154 |
155 |
156 |
157 | 80%
158 |
159 |
160 |
161 |
162 |
Bootstrap
163 |
164 |
165 |
166 | 60%
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
Education
177 |
178 |
179 |
180 |
181 |
182 |
183 |
2013 - 2015
184 |
Master In Computer Science
185 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non
186 | nisi semper, et elementum lorem ornare.
187 |
188 |
189 |
190 |
191 |
192 |
2011 - 2013
193 |
Studied At Delhi University
194 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non
195 | nisi semper, et elementum lorem ornare.
196 |
197 |
198 |
199 |
200 |
201 |
2008 - 2011
202 |
Bachelor Degree
203 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non
204 | nisi semper, et elementum lorem ornare.
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
Experience
213 |
214 |
215 |
216 |
217 |
218 |
219 |
2013 - 2015
220 |
Backend Developer
221 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non
222 | nisi semper, et elementum lorem ornare.
223 |
224 |
225 |
226 |
227 |
228 |
2011 - 2013
229 |
Frontend Developer
230 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non
231 | nisi semper, et elementum lorem ornare.
232 |
233 |
234 |
235 |
236 |
237 |
2008 - 2011
238 |
Graphic Designer
239 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non
240 | nisi semper, et elementum lorem ornare.
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 |
260 |
Services
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 |
Web Design
269 |
Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum.
270 |
271 |
272 |
273 |
274 |
275 |
276 |
277 |
Photography
278 |
Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum.
279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
Web Development
287 |
Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum.
288 |
289 |
290 |
291 |
292 |
293 |
294 |
295 |
Video Editing
296 |
Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum.
297 |
298 |
299 |
300 |
301 |
302 |
303 |
304 |
Seo Optimization
305 |
Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum.
306 |
307 |
308 |
309 |
310 |
311 |
312 |
313 |
Logo Design
314 |
Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum.
315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 |
323 |
324 |
325 |
326 |
327 |
328 |
Portfolio
329 |
330 |
331 |
332 |
333 | All
334 | Web Design
335 | Photography
336 | Wordpress
337 |
338 |
339 |
340 |
341 |
342 |
343 |
344 |
345 |
346 |
347 |
Web Design
348 |
349 |
350 |
351 |
352 |
353 |
354 |
355 |
356 |
357 |
358 |
359 |
360 |
361 |
362 |
Photography
363 |
364 |
365 |
366 |
367 |
368 |
369 |
370 |
371 |
372 |
373 |
374 |
375 |
376 |
377 |
Wordpress
378 |
379 |
380 |
381 |
382 |
383 |
384 |
385 |
386 |
387 |
388 |
389 |
390 |
391 |
392 |
Web Design
393 |
394 |
395 |
396 |
397 |
398 |
399 |
400 |
401 |
402 |
403 |
404 |
405 |
406 |
407 |
Wordpress
408 |
409 |
410 |
411 |
412 |
413 |
414 |
415 |
416 |
417 |
418 |
419 |
420 |
421 |
422 |
Photography
423 |
424 |
425 |
426 |
427 |
428 |
429 |
430 |
431 |
432 |
433 |
434 |
435 |
436 |
437 |
438 |
439 |
440 |
Latest Blog
441 |
442 |
443 |
444 |
445 |
446 |
447 |
448 |
449 |
450 | 4 jun 2020
451 |
452 |
453 |
454 |
Responsive Web Design
455 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro rem quod illo
456 | quam, eum alias id, repellendus magni, quas.
457 |
Tags : Html , css
458 |
459 |
460 |
461 |
462 |
463 |
464 |
465 |
466 |
467 |
468 | 4 jun 2020
469 |
470 |
471 |
472 |
Creative Slideshow
473 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro rem quod illo
474 | quam, eum alias id, repellendus magni, quas.
475 |
Tags : Html , Javascript
476 |
477 |
478 |
479 |
480 |
481 |
482 |
483 |
484 |
485 |
486 | 4 jun 2020
487 |
488 |
489 |
490 |
Image Gallery Lightbox
491 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, porro rem quod illo
492 | quam, eum alias id, repellendus magni, quas.
493 |
Tags : Javascript
494 |
495 |
496 |
497 |
498 |
499 |
500 |
501 |
502 |
503 |
504 |
580 |
581 |
582 |
583 |
584 |
585 |
586 |
587 |
588 |
589 |
590 |
×
591 |
592 |
596 |
597 |
601 |
602 |
603 |
604 |
605 |
606 |
607 |
608 |
609 |
Style Switcher
610 |
611 |
612 |
613 |
614 |
615 |
616 |
617 |
Body Skin
618 |
619 | Light
620 |
621 |
622 | Dark
623 |
624 |
625 |
626 |
627 |
628 |
629 |
630 |
631 |
632 |
633 |
634 |
635 |
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------