-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1 lines (1 loc) · 37.5 KB
/
index.html
1
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.min.css"/> <link rel="stylesheet" href="assets/libs/aos/dist/aos.css"/> <script src="assets/js/demo.min.js"></script> <link rel="stylesheet" href="assets/css/home.css"/> <link href="assets/css/past.css"/> <title>Astha Garhewal | Portfolio</title><!-- <style>.loading{display: flex; height: 100vh; justify-content: center; align-items: center; background: #222;}.loading{display: flex;}.loading .dot{position: relative; width: 2em; height: 2em; margin: 0.8em; border-radius: 50%;}.loading .dot::before{position: absolute; content: ""; width: 100%; height: 100%; background: inherit; border-radius: inherit; animation: wave 2s ease-out infinite;}.loading .dot:nth-child(1){background: #7ef9ff;}.loading .dot:nth-child(1)::before{animation-delay: 0.2s;}.loading .dot:nth-child(2){background: #89cff0;}.loading .dot:nth-child(2)::before{animation-delay: 0.4s;}.loading .dot:nth-child(3){background: #4682b4;}.loading .dot:nth-child(3)::before{animation-delay: 0.6s;}.loading .dot:nth-child(4){background: #0f52ba;}.loading .dot:nth-child(4)::before{animation-delay: 0.8s;}.loading .dot:nth-child(5){background: #000080;}.loading .dot:nth-child(5)::before{animation-delay: 1s;}@keyframes wave{50%, 75%{transform: scale(2.5);}80%, 100%{opacity: 0;}}</style> <script>(function (){window.onload=function (){var preloader=document.querySelector(".loading"); preloader.classList.remove("active"); setTimeout(function (){preloader.remove();}, 3000);};})(); </script> --> </head> <body><!-- <div class="loading"> <div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>--> <nav class="navbar navbar-expand-lg navbar-light"> <div class="container-lg"> <a class="navbar-brand d-lg-none" href="index.html">A S T H A</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav justify-content-end w-100"> <li class="nav-item"> <a class="nav-link" href="#home" role="button" aria-haspopup="true" aria-expanded="false" > Home </a> </li><li class="nav-item"> <a class="nav-link" href="#project" role="button" aria-haspopup="true" aria-expanded="false" > Projects </a> </li><li class="nav-item"> <a class="nav-link" href="#benefit" role="button" aria-haspopup="true" aria-expanded="false" > Benefits </a> </li></ul> <a class="navbar-brand d-none d-lg-block px-lg-6" href="index.html" >A S T H A</a > <ul class="navbar-nav justify-content-start w-100"> <li class="nav-item"> <a class="nav-link" href="#about" role="button" aria-haspopup="true" aria-expanded="false" > About </a> </li><li class="nav-item"> <a class="nav-link" href="#skill" role="button" aria-haspopup="true" aria-expanded="false" > Skills </a> </li><li class="nav-item"> <a class="nav-link" href="contact.html" role="button" aria-haspopup="true" aria-expanded="false" > Contact Me </a> </li></ul> </div></div></nav> <section class="d-flex align-items-center position-relative bg-dark bg-size-cover bg-position-center min-vh-100 overflow-hidden pt-6 pb-lg-5" style="background-color: #121212" id="home" > <div class="container-fluid pt-4 pb-5 py-lg-5"> <div class="row align-items-center py-3"> <div class="col-xl-6 col-lg-5 d-flex justify-content-end"> <div class="pt-2 mx-auto mb-5 mb-lg-0 ms-lg-0 me-xl-7 text-center text-lg-start" style="max-width: 495px" > <h1 class="display-4 text-light pb-2"> <h4 data-aos="rotate-c" data-aos-duration="1000" data-aos-easing="ease-in-sine" style="color: #f2f2f2;">H E Y ! 😄 I A M </h4> </h1> <h1 data-aos="fade-right" style="color: #fff;"><span>Astha Garhewal</span></h1> <h2 data-aos="fade-left" data-aos-delay="400" style="color:#fff">I am a <span style="color: aliceblue; font-family: 'Lobster';">Front-end Developer.</span></h2> <a href="https://drive.google.com/file/d/1XmH3HJL13E_NhQ86ZZD3dwkt6Uf-hXD_/preview"><button class="button1">My Resume</button></a> <style>button{margin: 1em auto; display: block; -webkit-appearance: none; border: 6px solid rgba(255,255,255,0.85); border-radius: 50px; padding: 0.5em 1.5em; background-repeat: no-repeat; background-size: 100%; background-clip: padding-box; position: relative; color: #FFF;}button:before{content: ""; width: 100%; height:100%; position: absolute; top: 5px; left: 5px; border-radius: 50px; z-index: -1; filter: blur(14px);}button:after{content: ""; width: 100%; height:100%; position: absolute; top: 5px; right: 5px; border-radius: 50px; z-index: -1; filter: blur(14px);}.button1{background-image: linear-gradient(90deg, #7b81ec, #3bd1d3);}.button1:before{background-image: linear-gradient(90deg, #7b81ec, transparent);}.button1:after{background-image: linear-gradient(90deg, transparent, #3bd1d3);}</style> <hr class="hr-light mt-0 mb-5"/> <div class="row"> </div></div></div><div class="col-xl-6 col-lg-7"> <div class="parallax ms-lg-n5" style="max-width: 920px"> <div class="parallax-layer position-relative" data-depth="0.1"> <img src="assets/img/demo/presentation/intro/layer01.png" alt="Layer"/> </div><div class="parallax-layer" style="z-index: 2" data-depth="0.3"> <img src="assets/img/demo/presentation/intro/layer02.png" alt="Layer"/> </div><div class="parallax-layer" data-depth="0.2"> <img src="assets/img/demo/presentation/intro/layer03.png" alt="Layer"/> </div><div class="parallax-layer" style="z-index: 3" data-depth="0.1"> <img src="assets/img/demo/presentation/intro/layer04.png" alt="Layer"/> </div><div class="parallax-layer" data-depth="0.15"> <img src="assets/img/demo/presentation/intro/layer05.png" alt="Layer"/> </div><div class="parallax-layer" style="z-index: 4" data-depth="0.25"> <img src="assets/img/demo/presentation/intro/layer061.png" alt="Layer"/> </div><div class="parallax-layer" data-depth="0.3"> <img src="assets/img/demo/presentation/intro/layer071.png" alt="Layer"/> </div><div class="parallax-layer" data-depth="0.4"> <img src="assets/img/demo/presentation/intro/layer081.png" alt="Layer"/> </div><div class="parallax-layer" data-depth="0.35"> <img src="assets/img/demo/presentation/intro/layer091.png" alt="Layer"/> </div></div></div></div></div></section> <div class="position-relative"> <div class="shape shape-fluid-x shape-bottom text-white pb-18"> <div class="shape-img pb-9 pb-md-15"> <svg viewBox="0 0 100 50" preserveAspectRatio="none"> <path d="M0 0h100v25H75L25 50H0z" fill="currentColor"/> </svg> </div></div></div><section class="pt-10 pt-md-12 bg-dark" id="project"> <div class="container-lg"> <div class="row"> <div class="col-12"> <div class="section-title text-center"> <h3 style="color: #fff; margin-bottom: 35px;">Have a glance at my projects</h3> </div><div class="position-absolute top-center top-md-left text-warning mt-n8 ml-md-n8" > <svg width="185" height="186" viewBox="0 0 185 186" fill="none" xmlns="http://www.w3.org/2000/svg" > <circle cx="2" cy="2" r="2" fill="currentColor"/> <circle cx="22" cy="2" r="2" fill="currentColor"/> <circle cx="42" cy="2" r="2" fill="currentColor"/> <circle cx="62" cy="2" r="2" fill="currentColor"/> <circle cx="82" cy="2" r="2" fill="currentColor"/> <circle cx="102" cy="2" r="2" fill="currentColor"/> <circle cx="122" cy="2" r="2" fill="currentColor"/> <circle cx="142" cy="2" r="2" fill="currentColor"/> <circle cx="162" cy="2" r="2" fill="currentColor"/> <circle cx="182" cy="2" r="2" fill="currentColor"/> <circle cx="2" cy="22" r="2" fill="currentColor"/> <circle cx="22" cy="22" r="2" fill="currentColor"/> <circle cx="42" cy="22" r="2" fill="currentColor"/> <circle cx="62" cy="22" r="2" fill="currentColor"/> <circle cx="82" cy="22" r="2" fill="currentColor"/> <circle cx="102" cy="22" r="2" fill="currentColor"/> <circle cx="122" cy="22" r="2" fill="currentColor"/> <circle cx="142" cy="22" r="2" fill="currentColor"/> <circle cx="162" cy="22" r="2" fill="currentColor"/> <circle cx="182" cy="22" r="2" fill="currentColor"/> <circle cx="2" cy="42" r="2" fill="currentColor"/> <circle cx="22" cy="42" r="2" fill="currentColor"/> <circle cx="42" cy="42" r="2" fill="currentColor"/> <circle cx="62" cy="42" r="2" fill="currentColor"/> <circle cx="82" cy="42" r="2" fill="currentColor"/> <circle cx="102" cy="42" r="2" fill="currentColor"/> <circle cx="122" cy="42" r="2" fill="currentColor"/> <circle cx="142" cy="42" r="2" fill="currentColor"/> <circle cx="162" cy="42" r="2" fill="currentColor"/> <circle cx="182" cy="42" r="2" fill="currentColor"/> <circle cx="2" cy="62" r="2" fill="currentColor"/> <circle cx="22" cy="62" r="2" fill="currentColor"/> <circle cx="42" cy="62" r="2" fill="currentColor"/> <circle cx="62" cy="62" r="2" fill="currentColor"/> <circle cx="82" cy="62" r="2" fill="currentColor"/> <circle cx="102" cy="62" r="2" fill="currentColor"/> <circle cx="122" cy="62" r="2" fill="currentColor"/> <circle cx="142" cy="62" r="2" fill="currentColor"/> <circle cx="162" cy="62" r="2" fill="currentColor"/> <circle cx="182" cy="62" r="2" fill="currentColor"/> <circle cx="2" cy="82" r="2" fill="currentColor"/> <circle cx="22" cy="82" r="2" fill="currentColor"/> <circle cx="42" cy="82" r="2" fill="currentColor"/> <circle cx="62" cy="82" r="2" fill="currentColor"/> <circle cx="82" cy="82" r="2" fill="currentColor"/> <circle cx="102" cy="82" r="2" fill="currentColor"/> <circle cx="122" cy="82" r="2" fill="currentColor"/> <circle cx="142" cy="82" r="2" fill="currentColor"/> <circle cx="162" cy="82" r="2" fill="currentColor"/> <circle cx="182" cy="82" r="2" fill="currentColor"/> <circle cx="2" cy="102" r="2" fill="currentColor"/> <circle cx="22" cy="102" r="2" fill="currentColor"/> <circle cx="42" cy="102" r="2" fill="currentColor"/> <circle cx="62" cy="102" r="2" fill="currentColor"/> <circle cx="82" cy="102" r="2" fill="currentColor"/> <circle cx="102" cy="102" r="2" fill="currentColor"/> <circle cx="122" cy="102" r="2" fill="currentColor"/> <circle cx="142" cy="102" r="2" fill="currentColor"/> <circle cx="162" cy="102" r="2" fill="currentColor"/> <circle cx="182" cy="102" r="2" fill="currentColor"/> <circle cx="2" cy="122" r="2" fill="currentColor"/> <circle cx="22" cy="122" r="2" fill="currentColor"/> <circle cx="42" cy="122" r="2" fill="currentColor"/> <circle cx="62" cy="122" r="2" fill="currentColor"/> <circle cx="82" cy="122" r="2" fill="currentColor"/> <circle cx="102" cy="122" r="2" fill="currentColor"/> <circle cx="122" cy="122" r="2" fill="currentColor"/> <circle cx="142" cy="122" r="2" fill="currentColor"/> <circle cx="162" cy="122" r="2" fill="currentColor"/> <circle cx="182" cy="122" r="2" fill="currentColor"/> <circle cx="2" cy="142" r="2" fill="currentColor"/> <circle cx="22" cy="142" r="2" fill="currentColor"/> <circle cx="42" cy="142" r="2" fill="currentColor"/> <circle cx="62" cy="142" r="2" fill="currentColor"/> <circle cx="82" cy="142" r="2" fill="currentColor"/> <circle cx="102" cy="142" r="2" fill="currentColor"/> <circle cx="122" cy="142" r="2" fill="currentColor"/> <circle cx="142" cy="142" r="2" fill="currentColor"/> <circle cx="162" cy="142" r="2" fill="currentColor"/> <circle cx="182" cy="142" r="2" fill="currentColor"/> <circle cx="2" cy="162" r="2" fill="currentColor"/> <circle cx="22" cy="162" r="2" fill="currentColor"/> <circle cx="42" cy="162" r="2" fill="currentColor"/> <circle cx="62" cy="162" r="2" fill="currentColor"/> <circle cx="82" cy="162" r="2" fill="currentColor"/> <circle cx="102" cy="162" r="2" fill="currentColor"/> <circle cx="122" cy="162" r="2" fill="currentColor"/> <circle cx="142" cy="162" r="2" fill="currentColor"/> <circle cx="162" cy="162" r="2" fill="currentColor"/> <circle cx="182" cy="162" r="2" fill="currentColor"/> <circle cx="2" cy="182" r="2" fill="currentColor"/> <circle cx="22" cy="182" r="2" fill="currentColor"/> <circle cx="42" cy="182" r="2" fill="currentColor"/> <circle cx="62" cy="182" r="2" fill="currentColor"/> <circle cx="82" cy="182" r="2" fill="currentColor"/> <circle cx="102" cy="182" r="2" fill="currentColor"/> <circle cx="122" cy="182" r="2" fill="currentColor"/> <circle cx="142" cy="182" r="2" fill="currentColor"/> <circle cx="162" cy="182" r="2" fill="currentColor"/> <circle cx="182" cy="182" r="2" fill="currentColor"/> </svg> </div><div class="card-stack"> <div class="card-stack-item mb-9"> <div class="card card-lg rounded overflow-hidden"> <div class="row no-gutters"> <div class="col-md order-md-1 d-flex align-items-end bg-primary" > <a href=#"> <img class="card-img-top" src="assets/video/5.gif" alt="..."/> </a> </div><div class="col-md-5 order-md-0 d-flex align-items-center bg-white" > <div class="card-body text-center"> <div class="icon text-primary-light mx-auto mb-4"> <img src="assets/img/icons/swords.png"/> </div><h1 class="font-family-sans-serif mb-4 mt-auto"> The Frontline Warriors </h1> <p> This website is made in recognition for the frontend warriors of the pandemic. </p><!-- <a class="h6 text-uppercase text-decoration-none mt-auto" href="robo-advisor.html" > View Landing <i class="fe fe-arrow-right"></i> </a> --> </div></div></div></div></div><div class="card-stack-item mb-9"> <div class="card card-lg rounded overflow-hidden"> <div class="row no-gutters"> <div class="col-md order-md-1 d-flex align-items-end bg-primary" > <a href="#"> <img class="card-img-top" src="assets/video/4.gif" alt="..."/> </a> </div><div class="col-md-5 order-md-0 d-flex align-items-center bg-white" > <div class="card-body text-center"> <div class="icon text-primary-light mx-auto mb-4"> <img src="assets/img/icons/programmer.png"/> </div><h1 class="font-family-sans-serif mb-4 mt-auto"> Girlscript Bilaspur </h1> <p> GirlScript is the fastest growing tech-community in India. It is a non-profit project brought to you by GirlScript Foundation to help beginners in technology. This website is made to connect people with same mindset and who wants to grow in field of technology. </p><!-- <a class="h6 text-uppercase text-decoration-none mt-auto" href="analytics-saas.html" > View Landing <i class="fe fe-arrow-right"></i> </a> --> </div></div></div></div></div><div class="card-stack-item mb-9"> <div class="card card-lg rounded overflow-hidden"> <div class="row no-gutters"> <div class="col-md order-md-1 d-flex align-items-end bg-primary" > <a href="e-commerce-platform.html"> <img class="card-img-top" src="assets/video/8.gif" alt="..."/> </a> </div><div class="col-md-5 order-md-0 d-flex align-items-center bg-white" > <div class="card-body text-center"> <div class="icon text-primary-light mx-auto mb-4"> <img src="assets/img/icons/support.png"/> </div><h1 class="font-family-sans-serif mb-4 mt-auto"> Sahaay </h1> <p> A mobile application to help the needy the ones by donating them food and articles. </p><!-- <a class="h6 text-uppercase text-decoration-none mt-auto" href="e-commerce-platform.html" > View Landing <i class="fe fe-arrow-right"></i> </a> --> </div></div></div></div></div><div class="card-stack-item mb-9"> <div class="card card-lg rounded overflow-hidden"> <div class="row no-gutters"> <div class="col-md order-md-1 d-flex align-items-end bg-primary" > <a href="#"> <img class="card-img-top" src="assets/video/1.gif" alt="..."/> </a> </div><div class="col-md-5 order-md-0 d-flex align-items-center bg-white" > <div class="card-body text-center"> <div class="icon text-primary-light mx-auto mb-4"> <img src="assets/img/icons/feedback.png"/ height="64px" width="64px"> </div><h1 class="font-family-sans-serif mb-4 mt-auto"> Online Feedback System </h1> <p> Online Feedback system for College is generally used in the college to rate the faculties, universityand others based on the performance. </p><!-- <a class="h6 text-uppercase text-decoration-none mt-auto" href="coworking.html" > View Landing <i class="fe fe-arrow-right"></i> </a> --> </div></div></div></div></div><div class="card-stack-item mb-9"> <div class="card card-lg rounded overflow-hidden"> <div class="row no-gutters"> <div class="col-md order-md-1 d-flex align-items-end bg-primary" > <a href="#"> <img class="card-img-top" src="assets/video/7.gif" alt="..."/> </a> </div><div class="col-md-5 order-md-0 d-flex align-items-center bg-white" > <div class="card-body text-center"> <div class="icon text-primary-light mx-auto mb-4"> <img src="assets/img/icons/helmet.png"/> </div><h1 class="font-family-sans-serif mb-4 mt-auto"> Helmet Detection System </h1> <p> A system for detection of motorcyclist without helmet. </p><!-- <a class="h6 text-uppercase text-decoration-none mt-auto" href="course.html" > View Landing <i class="fe fe-arrow-right"></i> </a> --> </div></div></div></div></div><div class="card-stack-item mb-9"> <div class="card card-lg rounded overflow-hidden"> <div class="row no-gutters"> <div class="col-md order-md-1 d-flex align-items-end bg-primary" > <a href="#"> <img class="card-img-top" src="assets/video/2.gif" alt="..."/> </a> </div><div class="col-md-5 order-md-0 d-flex align-items-center bg-white" > <div class="card-body text-center"> <div class="icon text-primary-light mx-auto mb-4"> <img src="assets/img/icons/club.png"/> </div><h1 class="font-family-sans-serif mb-4 mt-auto"> Developer Student Club, GGV </h1> <p> This website is made for Developer Student Club of our University, which helps the students to connect with us, learn from us and to participate in various other technical events. </p><!-- <a class="h6 text-uppercase text-decoration-none mt-auto" href="hiring-agency.html" > View Landing <i class="fe fe-arrow-right"></i> </a> --> </div></div></div></div></div><div class="card-stack-item mb-9"> <div class="card card-lg rounded overflow-hidden"> <div class="row no-gutters"> <div class="col-md order-md-1 d-flex align-items-end bg-primary" > <a href="mobile-chat-app.html"> <img class="card-img-top" src="assets/video/3.gif" alt="..."/> </a> </div><div class="col-md-5 order-md-0 d-flex align-items-center bg-white" > <div class="card-body text-center"> <div class="icon text-primary-light mx-auto mb-4"> <img src="assets/img/icons/hackathon.png"/> </div><h1 class="font-family-sans-serif mb-4 mt-auto"> Hackfest GGV </h1> <p> This website is made for conducting University level 48 hours long Hackathon. </p><!-- <a class="h6 text-uppercase text-decoration-none mt-auto" href="mobile-chat-app.html" > View Landing <i class="fe fe-arrow-right"></i> </a> --> </div></div></div></div></div><div class="card-stack-item mb-9"> <div class="card card-lg rounded overflow-hidden"> <div class="row no-gutters"> <div class="col-md order-md-1 d-flex align-items-end bg-primary" > <a href="#"> <img class="card-img-top" src="assets/video/6.gif" alt="..."/> </a> </div><div class="col-md-5 order-md-0 d-flex align-items-center bg-white" > <div class="card-body text-center"> <div class="icon text-primary-light mx-auto mb-4"> <img src="assets/img/icons/license-plate.png"/> </div><h1 class="font-family-sans-serif mb-4 mt-auto"> Automatic License Plate Detection System </h1> <p> Automatic number-plate recognition (ANPR; see also other names below) is a technology that uses optical character recognition on images to read vehicle registration plates to create vehicle location data. </p><!-- <a class="h6 text-uppercase text-decoration-none mt-auto" href="software-automation.html" > View Landing <i class="fe fe-arrow-right"></i> </a> --> </div></div></div></div></div></div></div></div></div></section> <section class="position-relative" style="background-color: #121212;" id="about"> <div class="position-absolute top-0 start-0 w-100 h-100 bg-primary opacity-65" ></div><div class="position-relative zindex-5 container-fluid"> <div class="row align-items-center"> <div class="col-lg-7 col-md-7 order-md-2 overflow-hidden"> <div class="parallax me-n7 me-md-0" style="max-width: 1030px"> <img class="d-block" src="assets/img/demo/marketing-seo/hero/lines.png" alt="Lines"/> <div class="parallax-layer" style="z-index: 2" data-depth="0.13"> <img src="assets/img/demo/marketing-seo/hero/image.png" alt="Image"/> </div><div class="parallax-layer" style="z-index: 3" data-depth="0.25"> <img src="assets/img/demo/marketing-seo/hero/shape-1.png" alt="Badge"/> </div><div class="parallax-layer" data-depth="0.2"> <img src="assets/img/demo/marketing-seo/hero/shape-2.png" alt="Shape"/> </div><div class="parallax-layer" style="z-index: 3" data-depth="0.5"> <img src="assets/img/demo/marketing-seo/hero/shape-3.png" alt="Badge"/> </div><div class="parallax-layer" style="z-index: 3" data-depth="0.45"> <img src="assets/img/demo/marketing-seo/hero/shape-4.png" alt="Badge"/> </div></div></div><div class="col-lg-5 col-md-5 pt-4 pb-5 py-md-5"> <div class="mx-auto me-lg-4 ps-xl-3 order-md-1 text-center text-md-start" style="max-width: 420px" > <h1 class="text-light mb-3">Let Me Induct Myself!</h1> <p class="text-light fs-lg" data-aos="fade-left"> Hey, My name is Astha and I am a Web Developer with a penchant for Web designing, Looking for Cool job opportunities. <br>I am a proud geek with over one year of Experience, obsessed with designing. I specialize in Responsive web design, SEO and Visual Designs.<br>I have a passion for an organized workflow, designing visual images, and solving complex problems.<br>I love painting, sketching, travel and KFC ❤. </p></div></div></div></div></section> <section class="languages" id="skill"> <div class="languages-section"> <div class="section-title text-center"> <h2>Languages I Know</h2> <p>I have a solid grasp of this languages.</p></div><div class="languages-container"> <div class="languages-group"> <div class="languages-item bootstrap"> <img data-aos="fade-right" src="assets/img/skills/bootstrap.png"/> </div></div><div class="languages-group"> <div class="languages-item git"> <img data-aos="fade-down-right" src="assets/img/skills/git.jpg"/> </div><div class="languages-item cpp"> <img data-aos="fade-up-right" src="assets/img/skills/cpp.png"/> </div></div><div class="languages-group"> <div class="languages-item css"> <img data-aos="fade-down" src="assets/img/skills/css.png"/> </div><div class="languages-item html"> <img data-aos="zoom-in" src="assets/img/skills/html.png"/> </div><div class="languages-item js"> <img data-aos="fade-up" src="assets/img/skills/js.png"/> </div></div><div class="languages-group"> <div class="languages-item python"> <img data-aos="fade-down-left" src="assets/img/skills/python.png"/> </div><div class="languages-item react"> <img data-aos="fade-up-left" src="assets/img/skills/react.png"/> </div></div><div class="languages-group"> <div class="languages-item sql"> <img data-aos="fade-left" src="assets/img/skills/sql.png"/> </div></div></div><div class="sub-section-title text-center"> <h2>Tools I Use</h2> <p>For generating layouts and prototypes I use this tools.</p></div><div class="languages-container"> <div class="languages-group"></div><div class="languages-group"> <div class="languages-item git"> <img data-aos="fade-down-left" src="assets/img/skills/figma.png"/> </div><div class="languages-item cpp"> <img data-aos="fade-up-left" src="assets/img/skills/xd.png"/> </div></div><div class="languages-group"> <div class="languages-item html"> <img data-aos="zoom-in" src="assets/img/skills/canva.png"/> </div></div><div class="languages-group"> <div class="languages-item python"> <img data-aos="fade-down-right" src="assets/img/skills/illustrator.png"/> </div><div class="languages-item react"> <img data-aos="fade-up-right" src="assets/img/skills/photoshop.png"/> </div></div><div class="languages-group"></div></div></div></section> <section id="benefit" class="section section--gray" style="background-color: #2a2a72; background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%);"> <div class="container container--center"> <div class="section__header"> <h2 class="section__heading">Benefits<h5 style="color: #f2f2f2; word-spacing: 2px;">O F W O K R I N G W I T H M E .</h5></h2> </div><div class="vorteile-grid"> <div id="w-node-_3b6037ba-146a-d164-f20e-69666ecd1dcb-2d85b1e5" class="card cell ix--slide-up" style="opacity: 0" > <h3 class="vorteile-cell__heading"> Web Designing and Development. <span class="u--gray">All from one hand.</span> </h3> <p class="vorteile-cell__copy"> I can provide both Web Designing as well as Web development. So you have one contact person for the whole process, from start to finish. Designing helps me to visualize the layout of the website which will then useful for development work. </p></div><div id="w-node-_55e888ff-8c73-32f7-4cae-db633b80f872-2d85b1e5" class="card cell ix--slide-up--delay" style="opacity: 0" > <div class="services-cell__header"> <h3 class="vorteile-cell__heading"> Stunning prototypes.<br/> <span class="u--gray">For the 🤯 factor.</span> </h3> </div><div class="services-video-wrap"> <div class="services-video-container"> <img src="https://assets.website-files.com/5f006c8ae8307069ecaa2c64/5f01d19e38630865c6fe847c_MacBook.png" alt="MacBook " loading="lazy" sizes="(max-width: 479px) 100vw, (max-width: 767px) 75vw, (max-width: 991px) 37vw, 19vw" srcset=" https://assets.website-files.com/5f006c8ae8307069ecaa2c64/5f01d19e38630865c6fe847c_MacBook-p-500.png 500w, https://assets.website-files.com/5f006c8ae8307069ecaa2c64/5f01d19e38630865c6fe847c_MacBook-p-800.png 800w, https://assets.website-files.com/5f006c8ae8307069ecaa2c64/5f01d19e38630865c6fe847c_MacBook-p-1080.png 1080w, https://assets.website-files.com/5f006c8ae8307069ecaa2c64/5f01d19e38630865c6fe847c_MacBook.png 1884w " class="services-video__mac-img"/> <div data-poster-url="https://assets.website-files.com/5f006c8ae8307069ecaa2c64/5f01cabaadc66df3b987467f_animation_large-poster-00001.jpg" data-video-urls="https://assets.website-files.com/5f006c8ae8307069ecaa2c64/5f01cabaadc66df3b987467f_animation_large-transcode.mp4,https://assets.website-files.com/5f006c8ae8307069ecaa2c64/5f01cabaadc66df3b987467f_animation_large-transcode.webm" data-autoplay="true" data-loop="true" data-wf-ignore="true" class="vorteile__bgvideo w-background-video w-background-video-atom" > <img class="card-top" src="assets/video/5.gif" alt="..."/> </div></div></div></div><div id="w-node-_1304f47f-cc25-3958-c9e9-af60c4f21a38-2d85b1e5" class="card cell ix--slide-up" style="opacity: 0" > <h3 class="vorteile-cell__heading"> Improved and Rapid development workflow. <span class="u--gray">For Software Development.</span> </h3> </div><div id="w-node-a224dd0d-82a0-d7bf-f553-f2d461676e1a-2d85b1e5" class="card cell ix--slide-up" style="opacity: 0" > <h3 class="vorteile-cell__heading"> Creative Design. <span class="u--gray">Visually Appealing.</span> </h3> <p class="vorteile-cell__copy"> Providing design that is visually appealing, readable, easy to navigate, and reinforces the purpose of the site while giving it a unified look and feel. </p></div><div id="w-node-abe99020-d716-dad6-02f0-30d16c33235a-2d85b1e5" class="card cell ix--slide-up--delay" style="opacity: 0" > <h3 class="vorteile-cell__heading"> The basics. <span class="u--gray">Of course.</span> </h3> <ul role="list" class="services-cell__basics-list w-list-unstyled"> <li class="basics__list-item"> <img src="assets/img/icons/responsive-design.png" alt="Desktop and Phone Icon | Moritz Petersen Webflow Web Designer" loading="lazy" class="basics-list-item__img"/> <div>Responsive design</div></li><li class="basics__list-item"> <img src="assets/img/icons/css-3.png" alt="Structure Icon | Moritz Petersen Webflow Web Designer" loading="lazy" class="basics-list-item__img"/> <div>Clean CSS structure</div></li><li class="basics__list-item"> <img src="assets/img/icons/friend-request.png" alt="Lightning Icon | Moritz Petersen Webflow Web Designer" loading="lazy" class="basics-list-item__img"/> <div>User Friednly</div></li><li class="basics__list-item"> <img src="assets/img/icons/page-speed.png" alt="Cloud Icon | Moritz Petersen Webflow Web Designer" loading="lazy" class="basics-list-item__img"/> <div>Optimized</div></li><li class="basics__list-item basics__list-item--last"> <img src="assets/img/icons/modern-house.png" alt="Search Icon | Moritz Petersen Webflow Web Designer" loading="lazy" class="basics-list-item__img"/> <div>Modern Designs</div></li></ul> </div><div id="w-node-_756b7e42-4d12-1cf1-239d-bb6c702cb5c2-2d85b1e5" class="card cell ix--slide-up--delay" style="opacity: 0" > <h3 class="vorteile-cell__heading"> Smooth Project Management Workflow. <span class="u--gray">For a smooth delivery.</span> </h3> </div><div id="w-node-_8b05d633-7817-9483-0f71-aa714a5c09ad-2d85b1e5" class="card cell ix--slide-up--delay" style="opacity: 0" > <h3 class="vorteile-cell__heading"> Latest web designs. <span class="u--gray">Professional and Eligant.</span> </h3> </div><div id="w-node-_8be84687-f0ad-8a6f-ac58-b6bb52dd8268-2d85b1e5" class="card cell ix--slide-up" style="opacity: 0" > <h3 class="vorteile-cell__heading"> You're in good hands. <span class="u--gray"></span> </h3> <div class="hero__logos"> <a rel="noopener" href="#" target="_blank" class="hero__logo w-inline-block" > <h3 class="u--gray">Quality Web Design</h3> </a> <a rel="noopener" href="#" target="_blank" class="hero__logo w-inline-block" > <h3 class="u--gray">Improved User Management</h3> </a> <a rel="noopener" href="#" target="_blank" class="hero__logo w-inline-block" > <h3 class="u--gray">UI/UX Designs</h3> </a> </div></div></div></div></section> <div class="main-content" id="social"> <section class="slice slice-xl has-floating-items" id="sct-call-to-action" style="background-image: url(assets/img/connect.png); background-position: center; background-repeat: no-repeat; background-size: cover;" > <a href="#sct-call-to-action" class="tongue tongue-up tongue-section-secondary" data-scroll-to > <i class="fas fa-angle-up"></i> </a><!-- <div class="container text-center"> <div class="row"> <div class="col-12"> <h1 style="color: #121212;">Connect with me</h1> </div></div></div>--> <div class="container floating-items"> <div class="icon-floating icon-lg floating"> <span></span> <a href="https://in.linkedin.com/in/astha-garhewal-2891a3185"> <img alt="Image placeholder" src="assets/img/icons/linkedin.png" class="svg-inject"/></a> </div><div class="icon-floating icon-xl bg-white floating"> <span></span> <a href="https://www.instagram.com/astha.garhewal/"> <img alt="Image placeholder" src="assets/img/icons/insta.png" class="svg-inject"/> </a> </div><div class="icon-floating icon-sm bg-white floating"> <span></span> <a href="garhewal09@gmail.com"> <img alt="Image placeholder" src="assets/img/icons/gmail.png" class="svg-inject"/> </a> </div><div class="icon-floating icon-xl bg-white floating"> <span></span> <a href="https://github.com/astha-garhewal"> <img alt="Image placeholder" src="assets/img/icons/github.png" class="svg-inject"/> </a> </div><div class="icon-floating icon-sm bg-white floating"> <span></span> <a href="https://www.facebook.com/astha.garhewal.98"> <img alt="Image placeholder" src="assets/img/icons/fb.png" class="svg-inject"/> </a> </div><div class="icon-floating icon-sm bg-white floating"> <span></span> <img alt="Image placeholder" src="assets/img/icons/dribbble.png" class="svg-inject"/> </div></div></section> </div><section class="contact"> <div class="container"> <div class="row"> <a href="contact.html"><h2>Contact Me <img src="assets/img/icons/arrow.png"></h2></a> </div></div></section> <footer class="footer py-8 pt-md-11 bg-dark border-multicolor"> <div class="container-lg"> <div class="row"> <div class="col-md-4"> <h2 class="font-family-serif text-white mb-1">A S T H A</h2> <p class="text-white-60">Let's Work Together.</p></div><div class="col-6 col-md"> <h6 class="text-uppercase text-white mb-3 mb-md-5">Navigate</h6> <ul class="list-unstyled"> <li class="mb-3"> <a class="text-white-60" href="#home">Homepage</a> </li><li class="mb-3"> <a class="text-white-60" href="#project">My Projects</a> </li><li class="mb-3"> <a class="text-white-60" href="#about">About Me</a> </li><li> <a class="text-white-60" href="#skill">Skills</a> </li></ul> </div><div class="col-6 col-md"> <h6 class="text-uppercase text-white mb-3 mb-md-5">Navigate</h6> <ul class="list-unstyled"> <li class="mb-3"> <a class="text-white-60" href="#benefit">Benefits</a> </li><li class="mb-3"> <a class="text-white-60" href="#social">Connect wih me</a> </li><li> <a class="text-white-60" href="contact.html">Contact Me</a> </li></ul> </div><div class="col-6 col-md"> <h6 class="text-uppercase text-white mb-3 mb-md-5">Connect</h6> <ul class="list-unstyled"> <li class="mb-3"> <a class="text-white-60" href="#!" ><address>Korba, C.G.</address></a > </li><li class="mb-3"> <a class="text-white-60" href="#!" >Contact:<br/> +91 6266859019</a > </li><li class="mb-3"> <a class="text-white-60" href="#!" >Email: <br/> garhewal09@gmail.com</a > </li></ul> </div></div><div class="row"> <div class="col-12"> <hr class="border-white-10 my-7"/> </div></div><div class="row align-items-center"> <div class="col-12 col-md-auto"> <ul class="list-inline list-unstyled text-gray-600 mb-0"> <li class="list-inline-item"> <a class="icon icon-sm text-reset" href="https://www.instagram.com/astha.garhewal/" > <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M12 2.163C15.204 2.163 15.584 2.175 16.85 2.233C20.102 2.381 21.621 3.924 21.769 7.152C21.827 8.417 21.838 8.797 21.838 12.001C21.838 15.206 21.826 15.585 21.769 16.85C21.62 20.075 20.105 21.621 16.85 21.769C15.584 21.827 15.206 21.839 12 21.839C8.796 21.839 8.416 21.827 7.151 21.769C3.891 21.62 2.38 20.07 2.232 16.849C2.174 15.584 2.162 15.205 2.162 12C2.162 8.796 2.175 8.417 2.232 7.151C2.381 3.924 3.896 2.38 7.151 2.232C8.417 2.175 8.796 2.163 12 2.163ZM12 0C8.741 0 8.333 0.014 7.053 0.072C2.695 0.272 0.273 2.69 0.073 7.052C0.014 8.333 0 8.741 0 12C0 15.259 0.014 15.668 0.072 16.948C0.272 21.306 2.69 23.728 7.052 23.928C8.333 23.986 8.741 24 12 24C15.259 24 15.668 23.986 16.948 23.928C21.302 23.728 23.73 21.31 23.927 16.948C23.986 15.668 24 15.259 24 12C24 8.741 23.986 8.333 23.928 7.053C23.732 2.699 21.311 0.273 16.949 0.073C15.668 0.014 15.259 0 12 0V0ZM12 5.838C8.597 5.838 5.838 8.597 5.838 12C5.838 15.403 8.597 18.163 12 18.163C15.403 18.163 18.162 15.404 18.162 12C18.162 8.597 15.403 5.838 12 5.838ZM12 16C9.791 16 8 14.21 8 12C8 9.791 9.791 8 12 8C14.209 8 16 9.791 16 12C16 14.21 14.209 16 12 16ZM18.406 4.155C17.61 4.155 16.965 4.8 16.965 5.595C16.965 6.39 17.61 7.035 18.406 7.035C19.201 7.035 19.845 6.39 19.845 5.595C19.845 4.8 19.201 4.155 18.406 4.155Z" fill="currentColor"/> </svg> </a> </li><li class="list-inline-item ml-1"> <a class="icon icon-sm text-reset" href="https://www.facebook.com/astha.garhewal.98" > <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M22.675 0H1.325C0.593 0 0 0.593 0 1.325V22.676C0 23.407 0.593 24 1.325 24H12.82V14.706H9.692V11.084H12.82V8.413C12.82 5.313 14.713 3.625 17.479 3.625C18.804 3.625 19.942 3.724 20.274 3.768V7.008L18.356 7.009C16.852 7.009 16.561 7.724 16.561 8.772V11.085H20.148L19.681 14.707H16.561V24H22.677C23.407 24 24 23.407 24 22.675V1.325C24 0.593 23.407 0 22.675 0V0Z" fill="currentColor"/> </svg> </a> </li><li class="list-inline-item ml-1"> <a class="icon icon-xl text-reset" href="garhewal09@gmail.com"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M8.937,10.603c-0.383-0.284-0.741-0.706-0.754-0.837c0-0.223,0-0.326,0.526-0.758c0.684-0.56,1.062-1.297,1.062-2.076c0-0.672-0.188-1.273-0.512-1.71h0.286l1.58-1.196h-4.28c-1.717,0-3.222,1.348-3.222,2.885c0,1.587,1.162,2.794,2.726,2.858c-0.024,0.113-0.037,0.225-0.037,0.334c0,0.229,0.052,0.448,0.157,0.659c-1.938,0.013-3.569,1.309-3.569,2.84c0,1.375,1.571,2.373,3.735,2.373c2.338,0,3.599-1.463,3.599-2.84C10.233,11.99,9.882,11.303,8.937,10.603 M5.443,6.864C5.371,6.291,5.491,5.761,5.766,5.444c0.167-0.192,0.383-0.293,0.623-0.293l0,0h0.028c0.717,0.022,1.405,0.871,1.532,1.89c0.073,0.583-0.052,1.127-0.333,1.451c-0.167,0.192-0.378,0.293-0.64,0.292h0C6.273,8.765,5.571,7.883,5.443,6.864 M6.628,14.786c-1.066,0-1.902-0.687-1.902-1.562c0-0.803,0.978-1.508,2.093-1.508l0,0l0,0h0.029c0.241,0.003,0.474,0.04,0.695,0.109l0.221,0.158c0.567,0.405,0.866,0.634,0.956,1.003c0.022,0.097,0.033,0.194,0.033,0.291C8.752,14.278,8.038,14.786,6.628,14.786 M14.85,4.765h-1.493v2.242h-2.249v1.495h2.249v2.233h1.493V8.502h2.252V7.007H14.85V4.765z" fill="currentColor"/> </svg> </a> </li></ul> </div></div></div></footer> <script src="../polyfill.io/v3/polyfill.minf25e.js?features=Array.prototype.find,Array.prototype.includes,Array.from,Object.entries,Promise,Object.assign"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.6.0/umd/popper.min.js"></script> <script src="assets/libs/aos/dist/aos.js"></script> <script src="../api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js"></script> <script src="assets/js/theme.min.js"></script> <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=5f006c8ae8307069ecaa2c64" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous" ></script> <script src="https://assets.website-files.com/5f006c8ae8307069ecaa2c64/js/moritz-petersen.7f06d9ff3.js" type="text/javascript" ></script> <script src="assets/js/purpose.core.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.5.8/swiper-bundle.min.js"></script> <script src="assets/js/purpose.js"></script> <script src="assets/js/demo.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.pkgd.min.js"></script> </body></html>