diff --git a/README.md b/README.md index 0cda80b..8d7fcb6 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,12 @@ -# Bruh_0x-Portfolio +# My personal website +This is my personal website (temporary) -ya know this is my portfolio :) +## Screenshots +- Default website with 3js animation +![Default](/screenshots/default.png) -# Credits +--- -- Codingnepal +- Website with fallback background image incase animation doesn't work +![Fallback](/screenshots/fallback.png) \ No newline at end of file diff --git a/images/banner.jpg b/images/banner.jpg deleted file mode 100644 index d460620..0000000 Binary files a/images/banner.jpg and /dev/null differ diff --git a/images/bruh0x_favicon.jpg b/images/bruh0x_favicon.jpg deleted file mode 100644 index 805d618..0000000 Binary files a/images/bruh0x_favicon.jpg and /dev/null differ diff --git a/images/itz-bruh0x.jpeg b/images/itz-bruh0x.jpeg deleted file mode 100644 index 479bfe5..0000000 Binary files a/images/itz-bruh0x.jpeg and /dev/null differ diff --git a/images/profile-1.jpeg b/images/profile-1.jpeg deleted file mode 100644 index 05a63c0..0000000 Binary files a/images/profile-1.jpeg and /dev/null differ diff --git a/images/profile-2.jpeg b/images/profile-2.jpeg deleted file mode 100644 index d67ae66..0000000 Binary files a/images/profile-2.jpeg and /dev/null differ diff --git a/images/profile-3.jpeg b/images/profile-3.jpeg deleted file mode 100644 index 1a2afc8..0000000 Binary files a/images/profile-3.jpeg and /dev/null differ diff --git a/images/profile-4.jpeg b/images/profile-4.jpeg deleted file mode 100644 index f251981..0000000 Binary files a/images/profile-4.jpeg and /dev/null differ diff --git a/index.html b/index.html deleted file mode 100644 index 4ba08f8..0000000 --- a/index.html +++ /dev/null @@ -1,177 +0,0 @@ - - - - - - - - - Bruh_0x - - - - - - - - - - -
- -
- - - -
-
-
-
-
Hi 👋️, You Know Me As
-
I'm Not A Bot
-
I'm a
- Contact Me -
-
-
-
- - -
-
-

About Me

-
-
- -
-
-
You Know Me Huh?
I am I'm Not A Bot! And I'm a
-

Yea Yea! I Think You Already Know About Me! So Why More Detailed Shits 🤔️?

-
-
-
-
- - -
-
-

My Skills

-
-
-
- -
Developer
-

I'm Developer (More like Noob) Who loves Python, Bash and JS

-
-
-
-
- -
Repacking
-

I was a Small Repacker! Like DODI-REPACKS My Repacks are Fast , Low Size and Cool 😂️!

-
-
-
-
- -
Logo Design
-

I know some logo designing things (No need to talk about this 😂️!)

-
-
-
-
- -
- - -
-
-

My Friends

-
-
-
- -
Sanura
-

Bot Dev! , Blogger! , Helper! and Also Student 😂️

-
-
-
-
- -
Danidu
-

Friend! , Movie Lover! , Blogger!, Blender Animator and Ya Know, a Student 😂️

-
-
-
-
- -
Indusha
-

Friend! A Learner! , Frontend Developer and Also a StUdEnT 😂️!

-
-
-
-
- -
Pulindu
-

Gamer! , Repacker! And Yes, A Student 😂️

-
-
-
-
-
- - -
-
-

Contact me

-
-
-

Need Help?

-

If you need help feel free to ask me! I will Help as Soon as Possible 😉️! but

Do Not,

⚝ Spam
⚝ Use Bad Words! That's All !☺️

-
-
-

Contact Me Via Email

-
-
- -
-
My Email
-
hello@itz-fork.xyz
-
-
-
-

Contact Me Via Social Platform

-

You Can Contact Me Via One Of These Social Platform! Better Use Telegram!

-

- -
-
-
-
- - - - - - diff --git a/screenshots/default.png b/screenshots/default.png new file mode 100644 index 0000000..490a89b Binary files /dev/null and b/screenshots/default.png differ diff --git a/screenshots/fallback.png b/screenshots/fallback.png new file mode 100644 index 0000000..9ec47ea Binary files /dev/null and b/screenshots/fallback.png differ diff --git a/script.js b/script.js deleted file mode 100644 index 7d20ef1..0000000 --- a/script.js +++ /dev/null @@ -1,72 +0,0 @@ -$(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: ["Blogger", "Bot Dev", "Student", "Fast Learner"], - typeSpeed: 100, - backSpeed: 60, - loop: true - }); - - var typed = new Typed(".typing-2", { - strings: ["Blogger", "Bot Dev", "Student", "Fast Learner"], - typeSpeed: 100, - backSpeed: 60, - loop: true - }); - - // owl carousel script - $('.carousel').owlCarousel({ - margin: 20, - loop: true, - autoplayTimeOut: 2000, - autoplayHoverPause: true, - responsive: { - 0:{ - items: 1, - nav: false - }, - 600:{ - items: 2, - nav: false - }, - 1000:{ - items: 3, - nav: false - } - } - }); -}); \ No newline at end of file diff --git a/site/data/background.jpg b/site/data/background.jpg new file mode 100644 index 0000000..177d36b Binary files /dev/null and b/site/data/background.jpg differ diff --git a/site/data/favicon.ico b/site/data/favicon.ico new file mode 100644 index 0000000..56c0417 Binary files /dev/null and b/site/data/favicon.ico differ diff --git a/site/index.html b/site/index.html new file mode 100644 index 0000000..9c2f56f --- /dev/null +++ b/site/index.html @@ -0,0 +1,151 @@ + + + + + + + + + Hirusha Himath - Itz-fork + + + +
+ +
+
+ Hi, I'm +

Hirusha

+ +

+ A random teenage boy from Sri Lanka who is passionate about the things + he does. My journey started by googling "center an image using css" to + thanking every night to the developers who directly/indirectly + contributed to Chat-GPT. Yes nothing changed, but along the way I + learned many programming languages such as + python, Js, + Ts, Dart, + and bash. With their blessing, I was also + able create countless (side)projects gaining little money and an + invaluable emotion called 'happiness'. +

+ + Read more... +

+ Within a span of 1.5 years, I was able to gain + followers 🫂 and + stars ✨ across + public repos 📚 on + github. Be sure to check out my + open-source projects! +
+
+
+ Hide - +

+
+ +
+ + + + + + + + + + + + + + + + +
+
+ + + + + + diff --git a/site/script.js b/site/script.js new file mode 100644 index 0000000..e4863c3 --- /dev/null +++ b/site/script.js @@ -0,0 +1,69 @@ +// Author: Hirusha Himath (https://github.com/Itz-fork) +// Repo: https://github.com/Itz-fork/itz-fork.github.io + +// Vanta.js configuration +VANTA.HALO({ + el: "#halo", + mouseControls: true, + touchControls: true, + gyroControls: false, + minHeight: 200.0, + minWidth: 200.0, + baseColor: "#f11a7b", + backgroundColor: "#191825", + size: window.innerWidth > 768 ? 1.2 : 0.8, +}); + +// Github stats +async function getStats() { + // Fetch basic user stats + let ftd = await (await fetch("https://api.github.com/users/Itz-fork")).json(); + let totalRepos = ftd.public_repos; + // Count total stars of a user + let totalStars = 0; + if (totalRepos > 100) { + let nos = totalRepos; + while (nos > 100) { + ( + await ( + await fetch( + "https://api.github.com/users/Itz-fork/repos?type=owner&per_page=100" + ) + ).json() + ).filter((obj) => (totalStars += obj.stargazers_count)); + nos = nos - 100; + } + ( + await ( + await fetch( + "https://api.github.com/users/Itz-fork/repos?type=owner&per_page=100" + ) + ).json() + ).filter((obj) => (totalStars += obj.stargazers_count)); + } else { + ( + await ( + await fetch( + "https://api.github.com/users/Itz-fork/repos?type=owner&per_page=100" + ) + ).json() + ).filter((obj) => (totalStars += obj.stargazers_count)); + } + // Assigning fetched data respective elements + document.getElementById("gh_followers").innerHTML = ftd.followers; + document.getElementById("gh_stars").innerHTML = totalStars; + document.getElementById("gh_repos").innerHTML = totalRepos; +} + +getStats(); + +// Read more and Read less functions +function readMore() { + document.querySelector(".stats").style.display = "block"; + document.querySelector(".moar").style.display = "none"; +} + +function readLess() { + document.querySelector(".stats").style.display = "none"; + document.querySelector(".moar").style.display = "table"; +} diff --git a/site/style.css b/site/style.css new file mode 100644 index 0000000..ec126db --- /dev/null +++ b/site/style.css @@ -0,0 +1,179 @@ +/* Fonts */ +@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Satisfy&display=swap"); + +/* ------------------------------ Background ------------------------------ */ +#halo { + position: fixed; + top: 0; + left: 0; + margin: 0; + padding: 0; + height: 100%; + width: 100%; + z-index: -1; + pointer-events: none; + overflow-x: auto; + /* Fallback incase animation got fucked up */ + background: url("data/background.jpg"); + background-size: 100% 100%; + filter: brightness(50%); +} + +/* ------------------------------ Main section ------------------------------ */ +.main { + color: #fff; + font-family: "Space Grotesk", sans-serif; + margin-top: 25vh; + margin-left: 4vw; + display: flex; + position: relative; + justify-content: space-between; + align-items: center; +} + +/* ------------------------------ Header Name ------------------------------ */ +.hi { + font-size: 2rem; +} + +.header_text { + color: #ffa3fd; + margin-top: 0rem; + margin-left: 1.5rem; + font-size: 3rem; + font-family: "Satisfy", cursive; + animation: fillit 3s linear infinite; +} + +@keyframes fillit { + 50% { + color: #ffffff; + filter: drop-shadow(-3px 6px 14px #e384ff); + } +} + +/* ------------------------------ About & Stats paragraphs ------------------------------ */ +.about_text, +.stats { + margin-right: 45vw; +} + +.pr_lang { + font-style: italic; + text-decoration: underline; + text-decoration-style: dotted; +} + +.moar, +.lesss { + text-decoration: none; + font-weight: bold; + position: relative; + margin-top: 2vh; +} + +.undernimation::before { + content: ""; + background-color: #e384ff; + position: absolute; + left: 0; + bottom: 3px; + width: 100%; + height: 3px; + z-index: -1; + transition: all 0.3s ease-in-out; +} + +.undernimation:hover::before { + bottom: 0; + height: 100%; +} + +.stats { + display: none; +} + +.gh_stats { + color: #2cd3e1; + text-decoration: underline; + text-decoration-style: dotted; +} + +.gh_projects { + text-decoration: none; + color: #ffa3fd; + text-decoration: underline; + text-decoration-style: dotted; +} + +/* ------------------------------ Socials Bar ------------------------------ */ +.socials { + width: fit-content; + gap: 0.8vw; + border-radius: 5px; + background: rgba(63, 59, 108, 0.76); + border-radius: 16px; + background: rgba(63, 59, 108, 0.36); + border-radius: 16px; + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(6.6px); + -webkit-backdrop-filter: blur(6.6px); + border: 1px solid rgba(63, 59, 108, 0.3); +} + +.sicon { + text-decoration: none; + margin: 2vw; + transition: 1s all ease-in-out; + &:hover { + animation: shadowit ease-in-out 0.5s forwards; + } +} + +@keyframes shadowit { + from { + transform: scale(1); + } + to { + transform: scale(1.3); + filter: drop-shadow(0px 6px 14px #97fff4); + } +} + +/* ------------------------------ Responsive ------------------------------ */ + +/* For mobile devices */ +@media only screen and (max-device-width: 768px) { + /* Social bar (bottom) */ + .socials { + margin: auto; + display: flex; + justify-content: center; + align-items: center; + position: fixed; + bottom: 0; + z-index: 5; + left: 0; + right: 0; + } + /* About text */ + .about_text { + margin-right: 30vw; + } +} + +/* For Desktops & Tablets */ +@media only screen and (min-device-width: 800px) { + /* Social bar (side) */ + .socials { + position: -webkit-sticky; + position: sticky; + vertical-align: middle; + } + + /* Header text */ + .header_text { + font-size: 5rem; + } +} diff --git a/style.css b/style.css deleted file mode 100644 index 74a1e1d..0000000 --- a/style.css +++ /dev/null @@ -1,725 +0,0 @@ -/* 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'); - -*{ - margin: 0; - padding: 0; - 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; -} - -/* all similar content styling codes */ -section{ - padding: 100px 0; -} -.max-width{ - max-width: 1300px; - padding: 0 80px; - margin: auto; -} -.about, .skills, .teams, .contact, footer{ - font-family: 'Poppins', sans-serif; -} -.about .about-content, -.skills .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: rgb(20, 197, 220); - padding: 0 5px; - background: rgb(247, 247, 247); - 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: rgb(20, 197, 220); -} -.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: rgb(20, 197, 220); - 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: rgb(20, 197, 220); -} -.navbar.sticky .menu li a:hover{ - color: #fff; -} - -/* menu btn styling */ -.menu-btn{ - color: #fff; - font-size: 23px; - cursor: pointer; - display: none; -} -.scroll-up-btn{ - position: fixed; - height: 45px; - width: 42px; - background: rgb(20, 197, 220); - 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%); - color: rgb(235, 235, 235); -} - - -/* 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: rgb(20, 197, 220); - font-weight: 500; -} -.home .home-content a{ - display: inline-block; - background: rgb(20, 197, 220); - color: #fff; - font-size: 25px; - padding: 12px 36px; - margin-top: 20px; - font-weight: 400; - border-radius: 6px; - border: 2px solid rgb(20, 197, 220); - transition: all 0.3s ease; -} -.home .home-content a:hover{ - color: rgb(20, 197, 220); - background: none; -} - -/* 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: rgb(20, 197, 220); -} -.about .about-content .right p{ - text-align: justify; -} -.about .about-content .right a{ - display: inline-block; - background: rgb(20, 197, 220); - color: #fff; - font-size: 20px; - font-weight: 500; - padding: 10px 30px; - margin-top: 20px; - border-radius: 6px; - border: 2px solid rgb(20, 197, 220); - transition: all 0.3s ease; -} -.about .about-content .right a:hover{ - color: rgb(20, 197, 220); - background: none; -} - -/* skills section styling */ -.skills, .teams{ - color:#fff; - background: #111; -} -.skills .title::before, -.teams .title::before{ - background: #fff; -} -.skills .title::after, -.teams .title::after{ - background: #111; - content: "Noob!"; -} -.skills .serv-content .card{ - width: calc(33% - 20px); - background: #222; - text-align: center; - border-radius: 6px; - padding: 35px 25px; - cursor: pointer; - transition: all 0.3s ease; -} -.skills .serv-content .card:hover{ - background: rgb(20, 197, 220); -} -.skills .serv-content .card .box{ - transition: all 0.3s ease; -} -.skills .serv-content .card:hover .box{ - transform: scale(1.05); -} -.skills .serv-content .card i{ - font-size: 50px; - color: rgb(20, 197, 220); - transition: color 0.3s ease; -} -.skills .serv-content .card:hover i{ - color: #fff; -} -.skills .serv-content .card .text{ - font-size: 25px; - font-weight: 500; - margin: 10px 0 7px 0; -} - -/* skills section styling */ - -.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: rgb(20, 197, 220); - color: #fff; - font-size: 18px; - font-weight: 500; - padding: 8px 16px; - margin-top: 20px; - border-radius: 6px; - border: 2px solid rgb(20, 197, 220); - transition: all 0.3s ease; -} -.skills .skills-content .left a:hover{ - color: rgb(20, 197, 220); - 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: rgb(20, 197, 220); -} -.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%; -} - -/* teams section styling */ -.teams .title::after{ - content: "Mates"; -} -.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: rgb(20, 197, 220); -} -.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 rgb(20, 197, 220); - 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 rgb(20, 197, 220) !important; - transition: all 0.3s ease; -} -.owl-dot.active{ - width: 35px; - border-radius: 14px; -} -.owl-dot.active, -.owl-dot:hover{ - background: rgb(20, 197, 220)!important; -} - -/* contact section styling */ -.contact .title::after{ - content: "Will Help You"; -} -.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: rgb(20, 197, 220); -} -.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: rgb(20, 197, 220); - border: 2px solid rgb(20, 197, 220); - transition: all 0.3s ease; -} -.right form .button-area button:hover{ - color: rgb(20, 197, 220); - background: none; -} -.contactico{ - color: blue; - align-items: center; - width: 30px!important; - height: 30px; - outline: none; -} -/* footer section styling */ -footer{ - background: #111; - padding: 15px 23px; - color: #fff; - text-align: center; -} -footer span a{ - color: rgb(9, 105, 117); - text-decoration: none; -} -footer span a:hover{ - color: rgb(96, 210, 238); - transition: .5s; -} - -/*Social Icons*/ -.social-icons { - text-align: center; - font-size: 1rem; - padding: 0.1em 0.1em; - transition: ease-in-out 1s; -} -.fa-telegram{ - background: rgb(242, 249, 250); - color: rgb(67, 219, 230); - border: rgb(67, 219, 230); - border-radius: 50px; -} -.fa-telegram:hover{ - box-shadow: 0 0 8px 0 #19acb1; -} -.fa-twitter{ - background: rgb(58, 218, 240); - color: rgb(234, 242, 243); - border: rgb(67, 219, 230); - border-radius: 50px; - padding: 0.1em 0.1em; - margin-left: 0.5em; -} -.fa-twitter:hover{ - box-shadow: 0 0 8px 0 #0da1a7; -} -.fa-github{ - background: rgb(255, 255, 255); - color: rgb(0, 0, 0); - border: rgb(255, 255, 255); - border-radius: 50px; - margin-left: 0.5em;; -} -.fa-github:hover{ - box-shadow: 0 0 8px 0 #1a1b1b; -} -/* responsive media query start */ -@media (max-width: 1104px) { - .about .about-content .left img{ - height: 350px; - width: 350px; - } -} - -@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%; - } - .skills .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; - } - .skills .serv-content .card{ - width: 100%; - } -} - -@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; - } - .right form .error-box{ - width: 150px; - } - .scroll-up-btn{ - right: 15px; - bottom: 15px; - height: 38px; - width: 35px; - font-size: 23px; - line-height: 38px; - } -}