@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@300;400&family=Montserrat:wght@300;400&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; } html{ scroll-behavior: smooth; } /* navbar styling */ nav{ position: fixed; width: 100%; padding: 15px 0; font-family: 'Montserrat', 'ubuntu', 'cursive'; transition: all 0.3s ease; z-index: 9999; } nav.sticky{ background-color: #8f7f32; padding: 0px; } .navbar{ max-width: 1700px; padding: 0px 30px; margin: auto; } nav .navbar{ display: flex; align-items: center; justify-content: space-between ; } nav div.left{ color: white; font-size: 2.5rem; font-weight: bold; } nav ul{ margin-bottom: 0; } nav ul li{ display: inline-block; list-style: none; } nav .menu .menu-item a{ display: block; color: white; font-size: 20px; font-weight: bold; margin-left: 25px; text-decoration: none; } /* menu button styling */ .menu-btn{ padding-right: 1rem!important; padding-left: 1rem!important; border-color: white; font-weight: 400; line-height: 1.5; text-align: center; vertical-align: middle; user-select: none; border: none; padding: .375rem .75rem; border-radius: .25rem; transition: color .15s ease-in-out; background-color: .15s ease-in-out; border-color: .15s ease-in-out; box-shadow: .15s ease-in-out; color: white; background: none; font-size: 22px; display: none; } /* scroll up button styling */ .scroll-up-btn{ position: fixed; height: 45px; width: 42px; background: #8f7f32; color: #1a242d; right: 30px; bottom: 10px; text-align: center; line-height: 45px; z-index: 99999; font-size: 30px; border-radius: 6px; cursor: pointer; opacity: 0; pointer-events: none; transition: all 0.3 ease; } .scroll-up-btn.show{ opacity: 1; pointer-events: auto; bottom: 30px; } /* home section styling */ .home{ display: flex; background: url("images/img1.jpg") no-repeat center; background-size: cover; height: 100vh; color: #cabf3f ; min-height: 500px; font-family: 'Montserrat', 'ubuntu', sans-serif; } .home .max-width{ margin: auto 0 auto 40px; } .home .home-content .text-1{ font-size: 27px; margin: 5px 0; font-weight: 500; } .home .home-content .text-2{ font-size: 60px; font-weight: 600; margin-left: -3px; color: white; } .home .home-content .text-3{ font-size: 40px; margin: 5px 0; } .home .home-content .text-3 span{ color: white; font-weight: 500; } .home .home-content .center { width: 180px; height: 60px; position: absolute; } .home .home-content .btn { width: 180px; height: 60px; cursor: pointer; background: transparent; border: 1px solid #cabf3f; outline: none; } .home .home-content .btn svg { position: absolute; left: 0; top: 0; fill: none; stroke: #cabf3f; stroke-width: 4; stroke-dasharray: 150 480; stroke-dashoffset: 150; transition: 1.5s ease-in-out; border: 2px solid white !important; } .home .home-content .btn:hover svg { stroke-dashoffset: -480; } .home .home-content .btn span { color: #cabf3f; font-size: 22px; font-weight: 100; } .home .home-content .btn:hover span { color: #cabf3f; font-size: 25px; font-weight: 100; transition: 1.5s ease; } /* about section styling */ section{ padding: 100px 0; } .about{ font-family: 'Montserrat', 'poppins', sans-serif; background-color: white; } .about .title{ text-align: center; font-weight: 700; font-size: 40px; margin-bottom: 60px; padding-bottom: 20px; font-family: 'Montserrat Alternates', 'ubuntu', sans-serif; text-decoration: underline; color: #1a242d; } .about .about-content{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: auto 50px auto 50px; } .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{ color: #cabf3f; font-size: 25px; font-weight: 600; margin-bottom: 10px; } .about .about-content .right .text span{ color: #1a242d; } .about .about-content .right p{ color: #1a242d; text-align: justify; } .about .about-content .right .CV{ display: inline-block; } .about .about-content .right .CV a{ display: block; font-size: 15px; padding: 10px 12px; margin-top: 20px; font-weight: 500; color: #cabf3f; border-radius: 6px; background-color: #1a242d; text-align: center; position: relative; transition: all .35s; text-decoration: none; } .about .about-content .right .CV a span{ position: relative; z-index: 2; } .about .about-content .right .CV a:after{ position: absolute; content: ""; top: 0; left: 0; width: 0; height: 100%; background: white; border-radius: 6px; transition: all .35s; } .about .about-content .right .CV a:hover{ color: #1a242d; } .about .about-content .right .CV a:hover:after{ width: 100%; transform: translateX(0%) skew(-20deg); } .about .about-content .right .socialmedia{ margin-top: 20px; } .about .about-content .right .socialmedia a{ font-size: 25px ; color: #1a242d; margin-left: 10px; justify-content: end; transition: all 0.3s ease; } .about .about-content .right .socialmedia a:hover{ font-size: 30px; } /* services content styling */ section{ padding: 100px 0; } .services{ font-family: 'Montserrat', 'poppins', sans-serif; background: #1a242d; color: #cabf3f; height: 100vh; } .services .title{ text-align: center; font-weight: 700; font-size: 40px; margin-bottom: 60px; padding-bottom: 20px; font-family: 'Montserrat Alternates', 'ubuntu', sans-serif; text-decoration: underline; } .services .serv-content{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: auto 50px auto 50px; } .services .serv-content .card{ width: calc(33% - 20px); background: #cabf3f; color: #1a242d; text-align: center; padding: 20px 25px; cursor: pointer; } .services .serv-content .card .box{ transition: all 0.3s ease; } .services .serv-content .card .box:hover{ transform: scale(1.05); } .services .serv-content .card i{ font-size: 50px; color: #1a242d; transition: color 0.3s ease; } .services .serv-content .card .text{ font-size: 25px; font-weight: 500; margin: 10px 0 7px 0; } /* education section styling */ .education{ font-family: 'Montserrat', 'poppins',sans-serif; background-color: white; } .education .title{ text-align: center; font-weight: 700; font-size: 40px; margin-bottom: 60px; padding-bottom: 20px; font-family: 'Montserrat Alternates', 'ubuntu', sans-serif; color: #1a242d; text-decoration: underline; } .education .ed-content{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: auto 50px auto 50px; } .education .ed-content .card{ background-color: #1a242d; color: #cabf3f; width: calc(33% - 20px); text-align: center; padding: 20px 25px; } .education .ed-content .card img{ width: 100%; } .education .ed-content .card h2{ font-size: 25px; font-weight: 500; margin: 10px 0 7px 0; } .education .ed-content .card p{ font-size: 14px; } /* skills section styling */ .skills{ font-family: 'Montserrat', 'poppins',sans-serif; background: #1a242d; color: #cabf3f; } .skills .title{ text-align: center; font-weight: 700; font-size: 40px; margin-bottom: 60px; padding-bottom: 20px; font-family: 'Montserrat Alternates', 'ubuntu', sans-serif; text-decoration: underline; } .skills .skills-content{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: auto 50px auto 50px; } .skills .skills-content .column{ width: calc(50% - 30px); } .skills .skills-content .left .text{ font-size: 25px; font-weight: 600; margin-bottom: 10px; } .skills .skills-content .left p{ text-align: justify; } .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; } /* contact section styling */ .contact{ font-family: 'Montserrat', 'poppins',sans-serif; background-color: white; color: #1a242d; } .contact .title{ text-align: center; font-weight: 700; font-size: 40px; margin-bottom: 60px; padding-bottom: 20px; font-family: 'Montserrat Alternates', 'ubuntu', sans-serif; text-decoration: underline; } .contact .contact-content{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: auto 50px auto 50px; } .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: 75px; align-items: center; } .contact .contact-content .row i{ font-size: 25px; color: #1a242d; } .contact .contact-content .info .head{ font-weight: 500; } .contact .contact-content .info .sub-title{ color: #8f7f32; text-decoration: none; } .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 .email{ margin-left: 10px; } .contact .right form .field input, .contact .right form .textarea textarea{ height: 100%; width: 100%; border-radius: 6px; border: none; outline: none; padding: 0 15px; font-size: 17px; font-family: 'Montserrat', 'poppins', sans-serif; background-color: #1a242d; color: #cabf3f; } .contact .right form .textarea textarea{ padding-top: 10px; resize: none; } .contact .right form .textarea textarea::placeholder, .contact .right form .field input::placeholder{ color: #cabf3f; } .contact .right form .textarea textarea{ padding-top: 10px; resize: none; } .contact .right .button { display: inline-block; height: 47px; width: 170px; font-size: 20px; margin-top: 20px; padding-top: 8px; font-weight: 500; border-radius: 6px; background-color: #1a242d; text-align: center; position: relative; } .contact .right .button div{ width: 100%; height: 100%; display: block; color: #cabf3f; transition: all .35s; text-decoration: none; } .contact .right .button div span{ position: relative; z-index: 2; } .contact .right .button a:after{ position: absolute; content: ""; top: 0; left: 0; width: 0; height: 100%; background: white; border-radius: 6px; transition: all .35s; } .contact .right .button div:hover{ color: #1a242d; } .contact .right .button div:hover:after{ width: 100%; transform: translateX(0%) skew(-20deg); } /* footer section styling */ footer{ font-family: 'Montserrat', 'poppins', sans-serif; background: #8f7f32; padding: 20px 23px; color: #1a242d; } footer span a{ color: white; text-decoration: none; } footer span a:hover{ text-decoration: underline; color: #1a242d; } /* responsive media query start */ @media (max-width: 700px) { .services .serv-content .card{ width: 100%; } .skills .skills-content .column{ width: 100%; margin-bottom: 35px; } .contact .contact-content .column{ width: 100%; margin-bottom: 35px; } } @media (max-width: 1080px){ .about .about-content .left img{ height: 300px; width: 300px; } } @media (max-width: 930px){ .navbar{ padding: 0px 15px; } .menu-btn{ display: block; z-index: 999; } .menu-btn i.active:before{ content: "\f00d"; } nav .menu{ position: fixed; background: #1a242d; height: 100vh; width: 100%; left: -100%; top: 0; text-align: center; padding-top: 80px; transition: all 0.3s ease; } nav .menu.active{ left: 0; } nav .menu .menu-item{ display: block; } nav .menu .menu-item a{ color: #cabf3f; } .home .home-content .text-2{ font-size: 40px; color: white; } .home .home-content .text-3{ font-size: 30px; } nav .menu .menu-item a{ display: inline-block; margin: 20px 0; font-size: 25px; } .max-width{ max-width: 800px } .about .title{ text-align: center; width: 100%; } .about .about-content .column{ width: 50%; } .about .about-content .left{ display: flex; flex: wrap; justify-content: center; margin: 0 auto 60px; } .about .about-content .right{ flex: 100%; } .services.serv-content .card{ width: calc(50% - 10px); margin-bottom: 20px; } .education .ed-content .card{ width: 100%; margin-bottom: 20px; } }