From b2d95fbfca676e0dfa8bf273628bcb5a185cc28d Mon Sep 17 00:00:00 2001 From: Aaryan Singh <94289067+AaryanSingh0017@users.noreply.github.com> Date: Thu, 6 Oct 2022 23:17:16 +0530 Subject: [PATCH 1/5] Create index.html --- Simple Portfolio/index.html | 40 +++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 Simple Portfolio/index.html diff --git a/Simple Portfolio/index.html b/Simple Portfolio/index.html new file mode 100644 index 0000000..3b76380 --- /dev/null +++ b/Simple Portfolio/index.html @@ -0,0 +1,40 @@ + + + + + + + + + Your Name + + +
+
+ +

FirstName LastName

+

City,Country.

+ + + +
+
+

About

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis quas sint et nihil iusto eius nostrum sit error, repellat optio quisquam! Magnam dolore iusto cumque. Nostrum error iste neque maiores.

+

Experience

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis in maiores autem quidem.

+ +

Skills

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis in maiores autem quidem obcaecati excepturi! Cupiditate eaque itaque magni voluptatibus neque nobis est dolor? Atque sunt minus ipsa asperiores. At.

+

Projects

+ Project 1 + Project 2 + Project 3 + Project 4 + Project 5 +

Contact

+

myEmail@email.com

+
+
+ + From 8a1a1dbb964f66066c264f87188532e74b85d398 Mon Sep 17 00:00:00 2001 From: Aaryan Singh <94289067+AaryanSingh0017@users.noreply.github.com> Date: Thu, 6 Oct 2022 23:17:53 +0530 Subject: [PATCH 2/5] Create style.css --- Simple Portfolio/style.css | 104 +++++++++++++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 Simple Portfolio/style.css diff --git a/Simple Portfolio/style.css b/Simple Portfolio/style.css new file mode 100644 index 0000000..d17f3e7 --- /dev/null +++ b/Simple Portfolio/style.css @@ -0,0 +1,104 @@ +/* global */ +@import url('https://fonts.googleapis.com/css?family=Roboto'); + +.grid-2{ + display: grid; + grid-template-columns: repeat(2,1fr); +} + +body{ + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; + background-color: #101214; + color: #7A7C80; + +} + +h2,.white{ + color: #fff; +} + +a{ + color: #7A7C80; + text-decoration: none; +} +/* section 1 */ +.section-1{ + padding-top: 40vh; + text-align: center; +} + +.section-1 p{ + font-size: 1.1rem; + padding-bottom: 10px; + margin:0; +} + +.section-1 h2{ + font-size: 1.7rem; + margin-bottom: 10px; +} + +.section-1 a{ + font-size: 1.5rem; + padding: 10px; +} +/* section 2 */ +.section-2{ + padding-top: 10vh; + width: 70%; +} + +.section-2 h2{ + font-size: 1.7rem; + margin-bottom: 10px; +} + +.section-2 p{ + font-size: 1.1rem; + padding-bottom: 10px; + margin:0; +} + +.section-2 a{ + display: block; + padding: 5px; + font-size: 1.2rem; + padding-left: 0; + width: 100px; +} +/* animations / utilities */ +.section-2 a:hover{ + font-size: 1.3rem; + color: #fff; + cursor: pointer; + transition: 0.2s; +} + +.section-1 a:hover{ + color: #fff; + cursor: pointer; + transition: 0.3s; +} + +.white:hover{ + position: relative; + padding-left: 10px; +} + +/* media queres */ +@media(max-width:780px){ + .grid-2{ + grid-template-columns: 1fr; + } + .section-1{ + padding:0; + padding-top: 5rem; + } + .section-2{ + padding: 0; + padding-left: 1.5rem; + padding-top: 2rem; + } +} From 1991e74f2b1ef73941852e124d3b1aefd2b83e0d Mon Sep 17 00:00:00 2001 From: Aaryan Singh <94289067+AaryanSingh0017@users.noreply.github.com> Date: Fri, 7 Oct 2022 00:07:40 +0530 Subject: [PATCH 3/5] Update index.html --- Simple Portfolio/index.html | 273 ++++++++++++++++++++++++++++++++---- 1 file changed, 245 insertions(+), 28 deletions(-) diff --git a/Simple Portfolio/index.html b/Simple Portfolio/index.html index 3b76380..a28f945 100644 --- a/Simple Portfolio/index.html +++ b/Simple Portfolio/index.html @@ -3,38 +3,255 @@ - - + Personal Portfolio Website - Your Name + + + + + + + -
-
- -

FirstName LastName

-

City,Country.

- - - +
+ +
+ + + +
+
+
+
Hello, my name is
+
Prakash Shahi
+
And I'm a
+ Hire me +
-
+ + + +
+
+

About me

+
+
+ +
+
+
I'm Prakash and I'm a
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi ut voluptatum eveniet doloremque autem excepturi eaque, sit laboriosam voluptatem nisi delectus. Facere explicabo hic minus accusamus alias fuga nihil dolorum quae. Explicabo illo unde, odio consequatur ipsam possimus veritatis, placeat, ab molestiae velit inventore exercitationem consequuntur blanditiis omnis beatae. Dolor iste excepturi ratione soluta quas culpa voluptatum repudiandae harum non.

+ Download CV +
+
+
+
+ + +
+
+

My services

+
+
+
+ +
Web Design
+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem quia sunt, quasi quo illo enim.

+
+
+
+
+ +
Advertising
+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem quia sunt, quasi quo illo enim.

+
+
+
+
+ +
Apps Design
+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem quia sunt, quasi quo illo enim.

+
+
+
+
+
+ + + +
+
+

My skills

+
+
+
My creative skills & experiences.
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, ratione error est recusandae consequatur, iusto illum deleniti quidem impedit, quos quaerat quis minima sequi. Cupiditate recusandae laudantium esse, harum animi aspernatur quisquam et delectus ipsum quam alias quaerat? Quasi hic quidem illum. Ad delectus natus aut hic explicabo minus quod.

+ Read more +
+
+
+
+ HTML + 90% +
+
+
+
+
+ CSS + 60% +
+
+
+
+
+ JavaScript + 80% +
+
+
+
+
+ PHP + 50% +
+
+
+
+
+ MySQL + 70% +
+
+
+
+
+
+
+ + +
+
+

My teams

+
+
+
+ +
Someone name
+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+
+
+
+
+ +
Someone name
+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+
+
+
+
+ +
Someone name
+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+
+
+
+
+ +
Someone name
+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+
+
+
+
+ +
Someone name
+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+
+
+
+
+
+ + +
+
+

Contact me

+
+
+
Get in Touch
+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos harum corporis fuga corrupti. Doloribus quis soluta nesciunt veritatis vitae nobis?

+
+
+ +
+
Name
+
Prakash Shahi
+
+
+
+ +
+
Address
+
Surkhet, Nepal
+
+
+
+ +
+
Email
+
abc@gmail.com
+
+
+
+
+
+
Message me
+
+
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+ + + + + From 4d525dec29dc093ba059b4a19377ce39589545ef Mon Sep 17 00:00:00 2001 From: Aaryan Singh <94289067+AaryanSingh0017@users.noreply.github.com> Date: Fri, 7 Oct 2022 00:08:49 +0530 Subject: [PATCH 4/5] Update style.css --- Simple Portfolio/style.css | 710 +++++++++++++++++++++++++++++++++---- 1 file changed, 643 insertions(+), 67 deletions(-) diff --git a/Simple Portfolio/style.css b/Simple Portfolio/style.css index d17f3e7..17b5387 100644 --- a/Simple Portfolio/style.css +++ b/Simple Portfolio/style.css @@ -1,104 +1,680 @@ -/* global */ -@import url('https://fonts.googleapis.com/css?family=Roboto'); +/* import google fonts */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap'); -.grid-2{ - display: grid; - grid-template-columns: repeat(2,1fr); -} - -body{ +*{ margin: 0; padding: 0; - font-family: 'Roboto', sans-serif; - background-color: #101214; - color: #7A7C80; + box-sizing: border-box; + text-decoration: none; +} +html{ + scroll-behavior: smooth; +} +/* custom scroll bar */ +::-webkit-scrollbar { + width: 10px; +} +::-webkit-scrollbar-track { + background: #f1f1f1; +} +::-webkit-scrollbar-thumb { + background: #888; +} + +::-webkit-scrollbar-thumb:hover { + background: #555; } -h2,.white{ +/* all similar content styling codes */ +section{ + padding: 100px 0; +} +.max-width{ + max-width: 1300px; + padding: 0 80px; + margin: auto; +} +.about, .services, .skills, .teams, .contact, footer{ + font-family: 'Poppins', sans-serif; +} +.about .about-content, +.services .serv-content, +.skills .skills-content, +.contact .contact-content{ + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; +} +section .title{ + position: relative; + text-align: center; + font-size: 40px; + font-weight: 500; + margin-bottom: 60px; + padding-bottom: 20px; + font-family: 'Ubuntu', sans-serif; +} +section .title::before{ + content: ""; + position: absolute; + bottom: 0px; + left: 50%; + width: 180px; + height: 3px; + background: #111; + transform: translateX(-50%); +} +section .title::after{ + position: absolute; + bottom: -8px; + left: 50%; + font-size: 20px; + color: crimson; + padding: 0 5px; + background: #fff; + transform: translateX(-50%); +} + +/* navbar styling */ +.navbar{ + position: fixed; + width: 100%; + z-index: 999; + padding: 30px 0; + font-family: 'Ubuntu', sans-serif; + transition: all 0.3s ease; +} +.navbar.sticky{ + padding: 15px 0; + background: crimson; +} +.navbar .max-width{ + display: flex; + align-items: center; + justify-content: space-between; +} +.navbar .logo a{ + color: #fff; + font-size: 35px; + font-weight: 600; +} +.navbar .logo a span{ + color: crimson; + transition: all 0.3s ease; +} +.navbar.sticky .logo a span{ + color: #fff; +} +.navbar .menu li{ + list-style: none; + display: inline-block; +} +.navbar .menu li a{ + display: block; + color: #fff; + font-size: 18px; + font-weight: 500; + margin-left: 25px; + transition: color 0.3s ease; +} +.navbar .menu li a:hover{ + color: crimson; +} +.navbar.sticky .menu li a:hover{ color: #fff; } -a{ - color: #7A7C80; - text-decoration: none; +/* menu btn styling */ +.menu-btn{ + color: #fff; + font-size: 23px; + cursor: pointer; + display: none; } -/* section 1 */ -.section-1{ - padding-top: 40vh; +.scroll-up-btn{ + position: fixed; + height: 45px; + width: 42px; + background: crimson; + right: 30px; + bottom: 10px; text-align: center; + line-height: 45px; + color: #fff; + z-index: 9999; + font-size: 30px; + border-radius: 6px; + border-bottom-width: 2px; + cursor: pointer; + opacity: 0; + pointer-events: none; + transition: all 0.3s ease; +} +.scroll-up-btn.show{ + bottom: 30px; + opacity: 1; + pointer-events: auto; +} +.scroll-up-btn:hover{ + filter: brightness(90%); } -.section-1 p{ - font-size: 1.1rem; - padding-bottom: 10px; - margin:0; + +/* home section styling */ +.home{ + display: flex; + background: url("images/banner.jpg") no-repeat center; + height: 100vh; + color: #fff; + min-height: 500px; + background-size: cover; + background-attachment: fixed; + font-family: 'Ubuntu', sans-serif; +} +.home .max-width{ + width: 100%; + display: flex; +} +.home .max-width .row{ + margin-right: 0; +} +.home .home-content .text-1{ + font-size: 27px; +} +.home .home-content .text-2{ + font-size: 75px; + font-weight: 600; + margin-left: -3px; +} +.home .home-content .text-3{ + font-size: 40px; + margin: 5px 0; +} +.home .home-content .text-3 span{ + color: crimson; + font-weight: 500; +} +.home .home-content a{ + display: inline-block; + background: crimson; + color: #fff; + font-size: 25px; + padding: 12px 36px; + margin-top: 20px; + font-weight: 400; + border-radius: 6px; + border: 2px solid crimson; + transition: all 0.3s ease; +} +.home .home-content a:hover{ + color: crimson; + background: none; } -.section-1 h2{ - font-size: 1.7rem; +/* about section styling */ +.about .title::after{ + content: "who i am"; +} +.about .about-content .left{ + width: 45%; +} +.about .about-content .left img{ + height: 400px; + width: 400px; + object-fit: cover; + border-radius: 6px; +} +.about .about-content .right{ + width: 55%; +} +.about .about-content .right .text{ + font-size: 25px; + font-weight: 600; margin-bottom: 10px; } +.about .about-content .right .text span{ + color: crimson; +} +.about .about-content .right p{ + text-align: justify; +} +.about .about-content .right a{ + display: inline-block; + background: crimson; + color: #fff; + font-size: 20px; + font-weight: 500; + padding: 10px 30px; + margin-top: 20px; + border-radius: 6px; + border: 2px solid crimson; + transition: all 0.3s ease; +} +.about .about-content .right a:hover{ + color: crimson; + background: none; +} -.section-1 a{ - font-size: 1.5rem; - padding: 10px; +/* services section styling */ +.services, .teams{ + color:#fff; + background: #111; } -/* section 2 */ -.section-2{ - padding-top: 10vh; - width: 70%; +.services .title::before, +.teams .title::before{ + background: #fff; } +.services .title::after, +.teams .title::after{ + background: #111; + content: "what i provide"; +} +.services .serv-content .card{ + width: calc(33% - 20px); + background: #222; + text-align: center; + border-radius: 6px; + padding: 50px 25px; + cursor: pointer; + transition: all 0.3s ease; +} +.services .serv-content .card:hover{ + background: crimson; +} +.services .serv-content .card .box{ + transition: all 0.3s ease; +} +.services .serv-content .card:hover .box{ + transform: scale(1.05); +} +.services .serv-content .card i{ + font-size: 50px; + color: crimson; + transition: color 0.3s ease; +} +.services .serv-content .card:hover i{ + color: #fff; +} +.services .serv-content .card .text{ + font-size: 25px; + font-weight: 500; + margin: 10px 0 7px 0; +} + +/* skills section styling */ -.section-2 h2{ - font-size: 1.7rem; +.skills .title::after{ + content: "what i know"; +} +.skills .skills-content .column{ + width: calc(50% - 30px); +} +.skills .skills-content .left .text{ + font-size: 20px; + font-weight: 600; margin-bottom: 10px; } +.skills .skills-content .left p{ + text-align: justify; +} +.skills .skills-content .left a{ + display: inline-block; + background: crimson; + color: #fff; + font-size: 18px; + font-weight: 500; + padding: 8px 16px; + margin-top: 20px; + border-radius: 6px; + border: 2px solid crimson; + transition: all 0.3s ease; +} +.skills .skills-content .left a:hover{ + color: crimson; + background: none; +} +.skills .skills-content .right .bars{ + margin-bottom: 15px; +} +.skills .skills-content .right .info{ + display: flex; + margin-bottom: 5px; + align-items: center; + justify-content: space-between; +} +.skills .skills-content .right span{ + font-weight: 500; + font-size: 18px; +} +.skills .skills-content .right .line{ + height: 5px; + width: 100%; + background: lightgrey; + position: relative; +} +.skills .skills-content .right .line::before{ + content: ""; + position: absolute; + height: 100%; + left: 0; + top: 0; + background: crimson; +} +.skills-content .right .html::before{ + width: 90%; +} +.skills-content .right .css::before{ + width: 60%; +} +.skills-content .right .js::before{ + width: 80%; +} +.skills-content .right .php::before{ + width: 50%; +} +.skills-content .right .mysql::before{ + width: 70%; +} -.section-2 p{ - font-size: 1.1rem; - padding-bottom: 10px; - margin:0; +/* teams section styling */ +.teams .title::after{ + content: "who with me"; +} +.teams .carousel .card{ + background: #222; + border-radius: 6px; + padding: 25px 35px; + text-align: center; + overflow: hidden; + transition: all 0.3s ease; +} +.teams .carousel .card:hover{ + background: crimson; +} +.teams .carousel .card .box{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + transition: all 0.3s ease; +} +.teams .carousel .card:hover .box{ + transform: scale(1.05); +} +.teams .carousel .card .text{ + font-size: 25px; + font-weight: 500; + margin: 10px 0 7px 0; +} +.teams .carousel .card img{ + height: 150px; + width: 150px; + object-fit: cover; + border-radius: 50%; + border: 5px solid crimson; + transition: all 0.3s ease; +} +.teams .carousel .card:hover img{ + border-color: #fff; +} +.owl-dots{ + text-align: center; + margin-top: 20px; +} +.owl-dot{ + height: 13px; + width: 13px; + margin: 0 5px; + outline: none!important; + border-radius: 50%; + border: 2px solid crimson!important; + transition: all 0.3s ease; +} +.owl-dot.active{ + width: 35px; + border-radius: 14px; +} +.owl-dot.active, +.owl-dot:hover{ + background: crimson!important; } -.section-2 a{ - display: block; - padding: 5px; - font-size: 1.2rem; - padding-left: 0; - width: 100px; -} -/* animations / utilities */ -.section-2 a:hover{ - font-size: 1.3rem; +/* contact section styling */ +.contact .title::after{ + content: "get in touch"; +} +.contact .contact-content .column{ + width: calc(50% - 30px); +} +.contact .contact-content .text{ + font-size: 20px; + font-weight: 600; + margin-bottom: 10px; +} +.contact .contact-content .left p{ + text-align: justify; +} +.contact .contact-content .left .icons{ + margin: 10px 0; +} +.contact .contact-content .row{ + display: flex; + height: 65px; + align-items: center; +} +.contact .contact-content .row .info{ + margin-left: 30px; +} +.contact .contact-content .row i{ + font-size: 25px; + color: crimson; +} +.contact .contact-content .info .head{ + font-weight: 500; +} +.contact .contact-content .info .sub-title{ + color: #333; +} +.contact .right form .fields{ + display: flex; +} +.contact .right form .field, +.contact .right form .fields .field{ + height: 45px; + width: 100%; + margin-bottom: 15px; +} +.contact .right form .textarea{ + height: 80px; + width: 100%; +} +.contact .right form .name{ + margin-right: 10px; +} +.contact .right form .field input, +.contact .right form .textarea textarea{ + height: 100%; + width: 100%; + border: 1px solid lightgrey; + border-radius: 6px; + outline: none; + padding: 0 15px; + font-size: 17px; + font-family: 'Poppins', sans-serif; + transition: all 0.3s ease; +} +.contact .right form .field input:focus, +.contact .right form .textarea textarea:focus{ + border-color: #b3b3b3; +} +.contact .right form .textarea textarea{ + padding-top: 10px; + resize: none; +} +.contact .right form .button-area{ + display: flex; + align-items: center; +} +.right form .button-area button{ + color: #fff; + display: block; + width: 160px!important; + height: 45px; + outline: none; + font-size: 18px; + font-weight: 500; + border-radius: 6px; + cursor: pointer; + flex-wrap: nowrap; + background: crimson; + border: 2px solid crimson; + transition: all 0.3s ease; +} +.right form .button-area button:hover{ + color: crimson; + background: none; +} +/* footer section styling */ +footer{ + background: #111; + padding: 15px 23px; color: #fff; - cursor: pointer; - transition: 0.2s; + text-align: center; +} +footer span a{ + color: crimson; + text-decoration: none; +} +footer span a:hover{ + text-decoration: underline; } -.section-1 a:hover{ - color: #fff; - cursor: pointer; - transition: 0.3s; + +/* responsive media query start */ +@media (max-width: 1104px) { + .about .about-content .left img{ + height: 350px; + width: 350px; + } } -.white:hover{ - position: relative; - padding-left: 10px; +@media (max-width: 991px) { + .max-width{ + padding: 0 50px; + } +} +@media (max-width: 947px){ + .menu-btn{ + display: block; + z-index: 999; + } + .menu-btn i.active:before{ + content: "\f00d"; + } + .navbar .menu{ + position: fixed; + height: 100vh; + width: 100%; + left: -100%; + top: 0; + background: #111; + text-align: center; + padding-top: 80px; + transition: all 0.3s ease; + } + .navbar .menu.active{ + left: 0; + } + .navbar .menu li{ + display: block; + } + .navbar .menu li a{ + display: inline-block; + margin: 20px 0; + font-size: 25px; + } + .home .home-content .text-2{ + font-size: 70px; + } + .home .home-content .text-3{ + font-size: 35px; + } + .home .home-content a{ + font-size: 23px; + padding: 10px 30px; + } + .max-width{ + max-width: 930px; + } + .about .about-content .column{ + width: 100%; + } + .about .about-content .left{ + display: flex; + justify-content: center; + margin: 0 auto 60px; + } + .about .about-content .right{ + flex: 100%; + } + .services .serv-content .card{ + width: calc(50% - 10px); + margin-bottom: 20px; + } + .skills .skills-content .column, + .contact .contact-content .column{ + width: 100%; + margin-bottom: 35px; + } +} + +@media (max-width: 690px) { + .max-width{ + padding: 0 23px; + } + .home .home-content .text-2{ + font-size: 60px; + } + .home .home-content .text-3{ + font-size: 32px; + } + .home .home-content a{ + font-size: 20px; + } + .services .serv-content .card{ + width: 100%; + } } -/* media queres */ -@media(max-width:780px){ - .grid-2{ - grid-template-columns: 1fr; +@media (max-width: 500px) { + .home .home-content .text-2{ + font-size: 50px; + } + .home .home-content .text-3{ + font-size: 27px; + } + .about .about-content .right .text, + .skills .skills-content .left .text{ + font-size: 19px; + } + .contact .right form .fields{ + flex-direction: column; + } + .contact .right form .name, + .contact .right form .email{ + margin: 0; } - .section-1{ - padding:0; - padding-top: 5rem; + .right form .error-box{ + width: 150px; } - .section-2{ - padding: 0; - padding-left: 1.5rem; - padding-top: 2rem; + .scroll-up-btn{ + right: 15px; + bottom: 15px; + height: 38px; + width: 35px; + font-size: 23px; + line-height: 38px; } } From 9e373a12a9c4b2e423b9faedfcd296daeb7421b8 Mon Sep 17 00:00:00 2001 From: Aaryan Singh <94289067+AaryanSingh0017@users.noreply.github.com> Date: Fri, 7 Oct 2022 00:09:49 +0530 Subject: [PATCH 5/5] Create Web.js --- Simple Portfolio/Web.js | 73 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 Simple Portfolio/Web.js diff --git a/Simple Portfolio/Web.js b/Simple Portfolio/Web.js new file mode 100644 index 0000000..1e87c6a --- /dev/null +++ b/Simple Portfolio/Web.js @@ -0,0 +1,73 @@ +$(document).ready(function(){ + $(window).scroll(function(){ + // sticky navbar on scroll script + if(this.scrollY > 20){ + $('.navbar').addClass("sticky"); + }else{ + $('.navbar').removeClass("sticky"); + } + + // scroll-up button show/hide script + if(this.scrollY > 500){ + $('.scroll-up-btn').addClass("show"); + }else{ + $('.scroll-up-btn').removeClass("show"); + } + }); + + // slide-up script + $('.scroll-up-btn').click(function(){ + $('html').animate({scrollTop: 0}); + // removing smooth scroll on slide-up button click + $('html').css("scrollBehavior", "auto"); + }); + + $('.navbar .menu li a').click(function(){ + // applying again smooth scroll on menu items click + $('html').css("scrollBehavior", "smooth"); + }); + + // toggle menu/navbar script + $('.menu-btn').click(function(){ + $('.navbar .menu').toggleClass("active"); + $('.menu-btn i').toggleClass("active"); + }); + + // typing text animation script + var typed = new Typed(".typing", { + strings: ["YouTuber", "Developer", "Blogger", "Designer", "Freelancer"], + typeSpeed: 100, + backSpeed: 60, + loop: true + }); + + var typed = new Typed(".typing-2", { + strings: ["YouTuber", "Developer", "Blogger", "Designer", "Freelancer"], + typeSpeed: 100, + backSpeed: 60, + loop: true + }); + + // owl carousel script + $('.carousel').owlCarousel({ + margin: 20, + loop: true, + autoplay: true, + autoplayTimeOut: 2000, + autoplayHoverPause: true, + responsive: { + 0:{ + items: 1, + nav: false + }, + 600:{ + items: 2, + nav: false + }, + 1000:{ + items: 3, + nav: false + } + } + }); +});