CodePen Embed - Responsive Portfolio Design

<!-- --------------------- Created By InCoder --------------------- -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home - Ashutosh Tiwari</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
</head>

<body>
    <!-- --------------------- Home Section --------------------- -->
    <section class="home-section" id="home-section">
        <header class="navbar">
            <div class="logo">
                <a href="javascript:void(0)">
                    <p>Ashutosh Tiwari</p>
                </a>
            </div>
            <nav>
                <div class="menuBtn">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <ul>
                    <li><a href="javascript:void(0)" id="home">Home</a></li>
                    <li><a href="#about-section" id="about">About</a></li>
                    <li><a href="#services-section" id="service">Services</a></li>
                    <li><a href="#team-section" id="team">Team</a></li>
                    <li><a href="#contact-section" id="contact">Contact</a></li>
                </ul>
            </nav>
        </header>
        <div class="home">
            <div class="welcomeSection">
                <h1>Welcome!</h1>
                <p>I am a <span class="auto-type"></span></p>
                <div class="welcomeAction">
                    <a href="#"><button class="inBtn inBtn-outline">View Work</button></a>
                    <a href="#"><button class="inBtn inBtn-primary">Hire Me</button></a>
                </div>
            </div>
        </div>
    </section>
    <!-- --------------------- Home Section End --------------------- -->

    <!-- --------------------- About Section --------------------- -->
    <section class="about-section" id="about-section">
        <div class="skills">
            <div class="sectionTitle">About Me</div>
            <div class="skillContainer">
                <div class="progressBar">
                    <p>HTML</p>
                    <div class="progress">
                        <div class="percent" data-percent="80%"></div>
                    </div>
                </div>
                <div class="progressBar">
                    <p>CSS</p>
                    <div class="progress">
                        <div class="percent" data-percent="60%"></div>
                    </div>
                </div>
                <div class="progressBar">
                    <p>Javascript</p>
                    <div class="progress">
                        <div class="percent" data-percent="40%"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="image">
        </div>
        <div class="details">
            <div class="name">
                <h6>Who Am I</h6>
                <h3>Ashutosh Tiwari</h3>
            </div>
            <h4 class="profession">Web Designer</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci rerum nemo architecto facilis quibusdam
                autem facere at nam. Ex fugiat molestiae perferendis ut<br><br> placeat explicabo eveniet numquam porro
                vero, quia nam possimus, non animi itaque eaque voluptate ad. Hic eveniet fuga enim libero mollitia
                consectetur vitae soluta maxime deleniti, ipsa in accusantium corporis tenetur</p>
            <div class="followMe">
                <p>Follow Me:</p>
                <i class="fa-brands fa-facebook"></i>
                <i class="fa-brands fa-twitter"></i>
                <i class="fa-brands fa-instagram"></i>
                <i class="fa-brands fa-dev"></i>
            </div>
        </div>
    </section>

    <!-- --------------------- About Section End --------------------- -->

    <!-- --------------------- Services Section --------------------- -->

    <section class="services-section" id="services-section">
        <div class="serviceTitle">Services</div>
        <div class="cards">
            <div class="card">
                <div class="icon">
                    <i class="fa-solid fa-pencil"></i>
                </div>
                <div class="title">
                    <p>Web Design</p>
                </div>
                <div class="desc">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, ipsam.
                </div>
            </div>
            <div class="card">
                <div class="icon">
                    <i class="fa-brands fa-codepen"></i>
                </div>
                <div class="title">
                    <p>Web Development</p>
                </div>
                <div class="desc">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, ipsam.
                </div>
            </div>
            <div class="card">
                <div class="icon">
                    <i class="fa-brands fa-blogger-b"></i>
                </div>
                <div class="title">
                    <p>Blogging</p>
                </div>
                <div class="desc">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, ipsam.
                </div>
            </div>
            <div class="card">
                <div class="icon">
                    <i class="fa-solid fa-handshake-simple"></i>
                </div>
                <div class="title">
                    <p>Freelance</p>
                </div>
                <div class="desc">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, ipsam.
                </div>
            </div>
        </div>
    </section>

    <!-- --------------------- Services Section End --------------------- -->

    <!-- --------------------- Team Section --------------------- -->

    <section class="team-section" id="team-section">
        <div class="teamTitle">My Team</div>
        <div class="tramMembers owl-carousel">
            <div class="memberCard">
                <div class="img"></div>
                <div class="name">Jhon Deo</div>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>
            <div class="memberCard">
                <div class="img"></div>
                <div class="name">Jhon Deo</div>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>
            <div class="memberCard">
                <div class="img"></div>
                <div class="name">Jhon Deo</div>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>
            <div class="memberCard">
                <div class="img"></div>
                <div class="name">Jhon Deo</div>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>
        </div>
    </section>

    <!-- --------------------- Team Section End --------------------- -->

    <!-- --------------------- Contact Section --------------------- -->

    <section class="contact-section" id="contact-section">
        <div class="contactTitle">Contact Me</div>
        <div class="container">
            <div class="details">
                <div class="phone">
                    <p>Phone: <br><span>+91 9684357286</span></p>
                </div>
                <div class="address">
                    <p>Address: <br><span>A 1858, xyz place state, country.</span></p>
                </div>
                <div class="email">
                    <p>Email: <br><span>example@xyzdomain.com</span></p>
                </div>
            </div>
            <div class="contact-form">
                <div class="input-group">
                    <div class="input-field">
                        <input type="text" placeholder="Name:">
                    </div>
                    <div class="input-field">
                        <input type="email" placeholder="Email:">
                    </div>
                </div>
                <div class="input-field">
                    <textarea placeholder="Message:" cols="30" rows="6"></textarea>
                </div>
                <button class="inBtn inBtn-primary">Submit</button>
            </div>
        </div>
    </section>

    <!-- --------------------- Contact Section End --------------------- -->

    <!-- --------------------- Footer Section --------------------- -->

    <footer class="footer">
        <h4 class="footerLogo">Ashutosh Tiwari</h4>
        <div class="followMe">
            <i class="fa-brands fa-facebook"></i>
            <i class="fa-brands fa-twitter"></i>
            <i class="fa-brands fa-instagram"></i>
            <i class="fa-brands fa-github"></i>
            <i class="fa-brands fa-blogger-b"></i>
        </div>
        <div class="copyright">
            <p>Copyright <i class="fa-regular fa-copyright"></i> 2022 <span>Ashutosh Tiwari</span>. Created By InCoder</p>
        </div>
    </footer>

    <!-- --------------------- Footer Section End --------------------- -->
    
    <div class="backToTop">
        <i class="fa-solid fa-arrow-up"></i>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></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/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script src="script.js"></script>
</body>

</html>

/* --------------------- Created By InCoder --------------------- */

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background: linear-gradient(45deg, #010207, #00070d);
}

a {
  color: #fff;
  text-decoration: none;
}

/* ---------------- navbar ---------------- */

.navbar {
  display: flex;
  height: 4.2rem;
  padding: 0 1.5rem;
  position: relative;
  align-items: center;
  justify-content: space-between;
}

.navbar.active {
  z-index: 2;
  width: 100%;
  position: fixed;
  background: #021422;
  animation: showMenu 0.3s;
}

@keyframes showMenu {
  from {
    transform: translateY(-2rem);
  }
  to {
    transform: translateY(0rem);
  }
}

.navbar .logo {
  font-weight: 600;
  font-size: clamp(1rem, 4vw, 1.6rem);
}

.navbar nav ul {
  display: flex;
}

.navbar nav ul li {
  margin: 0 0.6rem;
  list-style: none;
  position: relative;
  text-transform: uppercase;
}

.navbar nav ul li::before {
  content: "";
  left: 0;
  top: -2px;
  height: 1px;
  background: #fff;
  position: absolute;
  transform: scale(0);
  width: calc(50% - 0.5rem);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.18, 0.02, 0, 1.99);
}

.navbar nav ul li:hover::before {
  transform: scale(1);
}

.navbar nav ul li::after {
  content: "";
  right: 0;
  bottom: -2px;
  height: 1px;
  background: #fff;
  position: absolute;
  transform: scale(0);
  width: calc(50% - 0.5rem);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.18, 0.02, 0, 1.99);
}

.navbar nav ul li:hover::after {
  transform: scale(1);
}

.menuBtn {
  z-index: 2;
  width: 3rem;
  height: 3rem;
  display: none;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}

.menuBtn span {
  height: 0.18rem;
  position: absolute;
  border-radius: 8px;
  background-color: #fff;
  transition: 0.3s;
}

.menuBtn span:nth-child(1) {
  left: 10%;
  width: 50%;
  transform: translateY(-12px);
}

.menuBtn.active span:nth-child(1) {
  left: 10%;
  width: 80%;
  transform: translateY(0px) rotate(45deg);
}

.menuBtn span:nth-child(2) {
  width: 80%;
}

.menuBtn.active span:nth-child(2) {
  opacity: 0;
  transform: translateX(40px);
}

.menuBtn span:nth-child(3) {
  left: 10%;
  width: 50%;
  transform: translateY(12px);
}

.menuBtn.active span:nth-child(3) {
  left: 10%;
  width: 80%;
  transform: translateY(0px) rotate(135deg);
}

/* ---------------- navbar end ---------------- */

/* ---------------- Home Section ---------------- */

.home-section {
  color: #fff;
  height: 100vh;
  overflow-y: hidden;
  background: url("https://drive.google.com/uc?id=1DXKOaZJ72G-FG07apoiXRDZXQ9KUNuLp&export=view")
    no-repeat right bottom / clamp(35rem, 50vw, 70rem);
}

.home {
  width: 100%;
  display: flex;
  min-height: 110vh;
  align-items: center;
}

.home .welcomeSection {
  width: 100%;
  height: 15vh;
  display: flex;
  align-items: center;
  justify-content: end;
  flex-direction: column;
}

.home .welcomeSection h1,
p {
  width: max-content;
}

.home .welcomeSection h1 {
  font-weight: 200;
  font-size: clamp(2rem, 8vw, 6rem);
}

.home .welcomeSection p {
  font-size: clamp(2rem, 8vw, 6rem);
}

.home .welcomeSection p span {
  color: #d28021;
}

.welcomeAction {
  margin-top: 1.5rem;
}

.welcomeAction button {
  margin: 0 0.6rem;
}

.welcomeAction button:last-child {
  padding: 0.4rem 2rem !important;
}

.inBtn {
  outline: none;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 50rem;
  padding: 0.4rem 1.4rem;
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out,
    border 0.2s ease-in-out;
}

.inBtn-primary {
  color: #fff;
  background: #d28021;
  border: 2px solid #d28021;
}

.inBtn-primary:hover {
  color: #d28021;
  background: #ffffff;
  border: 2px solid #fff;
}

.inBtn-outline {
  color: #fff;
  background: transparent;
  border: 2px solid #fff;
}

.inBtn-outline:hover {
  color: #d28021;
  background: #ffffff;
  border: 2px solid #fff;
}

/* ---------------- Home Section End ---------------- */

/* ---------------- About Section ---------------- */

.about-section {
  height: 42rem;
  display: flex;
  background: #010910;
  justify-content: center;
}

.about-section :is(.skills, .image, .details) {
  width: 25rem;
  height: 100%;
  margin: 0 1rem;
  max-width: 25rem;
}

.about-section .sectionTitle {
  font-weight: 800;
  color: #0d141b;
  padding-top: 10.6rem;
  font-size: clamp(4rem, 4vw, 5rem);
  transition: color 0.3s ease-in-out;
}

.about-section:hover .sectionTitle {
  color: transparent;
  -webkit-text-stroke: 1px #212830;
}

.skillContainer {
  width: 100%;
  color: #fff;
  margin-top: 1rem;
  margin-left: 1rem;
}

.skillContainer .progressBar {
  margin-top: 1rem;
}

.skillContainer .progress {
  height: 0.5rem;
  margin-top: 0.8rem;
  border-radius: 50rem;
  background: #191f25;
}

.skillContainer .progress .percent {
  height: 100%;
  width: 0%;
  position: relative;
  border-radius: 50rem;
  transition: all 1.5s;
  background: #d28021;
}

.skillContainer .progress .percent::before {
  top: -16px;
  right: 0;
  font-size: 0.7rem;
  position: absolute;
  content: attr(data-percent);
}

.about-section .image {
  max-height: 100%;
  overflow: hidden;
  background: #0b141c
    url("https://drive.google.com/uc?id=1gTOPNHrZna3qVr2k-99ais05B6KS7jN2&export=view")
    no-repeat center bottom;
  background-position-y: 7rem;
}

.about-section .details {
  color: #fff;
  padding-top: 8.6rem;
}

.about-section .details .name h6 {
  font-size: 1rem;
  font-weight: 200;
  letter-spacing: 8px;
  text-transform: uppercase;
}

.about-section .details .name h3 {
  font-weight: 600;
  font-size: 1.5rem;
  margin-top: 0.5rem;
  width: max-content;
  letter-spacing: 2px;
  background: #d28021;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
  padding: 0px 0.5rem 0.3rem 0.5rem;
}

.about-section .details p {
  font-size: 0.9rem;
  line-height: 26px;
  max-width: fit-content;
  color: rgb(255 255 255 / 60%);
}

.about-section .details .profession {
  font-weight: 400;
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
}

.about-section .details .followMe {
  display: flex;
  align-items: center;
}

.about-section .details .followMe p {
  color: #d28021;
  margin-right: 0.4rem;
}

.about-section .details .followMe i {
  cursor: pointer;
  margin: 2rem 1rem;
  transition: color 0.3s;
  color: rgb(255 255 255 / 60%);
}

.about-section .details .followMe i:hover {
  color: #fff;
}

/* ---------------- About Section End ---------------- */

/* ---------------- Service Section ---------------- */

.services-section {
  background: #040c13;
  padding-bottom: 1.2rem;
}

.serviceTitle {
  font-weight: 800;
  color: #0d141b;
  text-align: center;
  padding-top: 1.6rem;
  font-size: clamp(4rem, 4vw, 5rem);
  transition: color 0.3s ease-in-out;
}

.services-section:hover .serviceTitle {
  color: transparent;
  -webkit-text-stroke: 1px #212830;
}

.services-section .cards {
  color: #fff;
  display: flex;
  margin-top: 1rem;
  align-items: center;
  justify-content: center;
}

.services-section .cards .card {
  width: 14rem;
  display: flex;
  margin: 0 0.4rem;
  max-width: 16rem;
  align-items: center;
  margin-bottom: 1.2rem;
  background: #010910;
  flex-direction: column;
  justify-content: center;
}

.services-section .cards .card .icon {
  z-index: 1;
  font-size: 3rem;
  color: #d28021;
  margin-top: 2rem;
  position: relative;
  margin-bottom: 1.6rem;
}

.services-section .cards .card .icon::before {
  content: "";
  top: 50%;
  left: 50%;
  width: 4rem;
  height: 4rem;
  padding: 0.4rem;
  position: absolute;
  border-radius: 1rem;
  background: rgb(255 255 255 / 5%);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
}

.services-section .cards .card:hover {
  color: #fff !important;
}

.services-section .cards .card:hover .icon::before {
  background: rgb(210 128 33 / 10%);
  transform: translate(-50%, -50%) rotate(90deg);
}

.services-section .cards .card .desc {
  font-size: 0.8rem;
  margin-top: 1rem;
  max-width: 10rem;
  line-height: 20px;
  text-align: center;
  margin-bottom: 0.8rem;
  color: rgb(255 255 255 / 60%);
}

/* ---------------- Service Section End ---------------- */

/* ---------------- Team Section ---------------- */

.teamTitle {
  font-weight: 800;
  color: #010910;
  text-align: center;
  padding-top: 1.6rem;
  margin-bottom: 1rem;
  font-size: clamp(4rem, 4vw, 5rem);
  transition: color 0.3s ease-in-out;
}

.team-section:hover .teamTitle {
  color: transparent;
  -webkit-text-stroke: 1px #212830;
}

.tramMembers {
  color: #fff;
  display: flex;
  padding-top: 1rem;
  align-items: center;
  justify-content: center;
}

.tramMembers .memberCard {
  width: 16rem;
  display: flex;
  margin: 0 1rem;
  max-width: 20rem;
  align-items: center;
  margin-bottom: 1rem;
  border-radius: 0.8rem;
  flex-direction: column;
  justify-content: center;
  transition: background 0.3s ease-in-out;
  border: 2px solid rgb(255 255 255 / 6%);
}

.tramMembers .memberCard:hover {
  background: rgb(210 128 33 / 10%);
}

.memberCard .img {
  width: 6rem;
  height: 6rem;
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  border-radius: 50rem;
  background: url("https://drive.google.com/uc?id=1fEVU_QIj8GnWow6tEvWMHd772Sl-Qcsq&export=view")
    no-repeat center / 100%;
}

.memberCard .img::before {
  content: "";
  top: 50%;
  left: 50%;
  width: 120%;
  z-index: -1;
  height: 120%;
  position: absolute;
  border-radius: 50rem;
  transform: translate(-50%, -50%);
  background: rgb(255 255 255 / 3%);
  transition: background 0.3s ease-in-out;
}

.tramMembers .memberCard:hover .img::before {
  background: rgb(210 128 33 / 10%);
}

.memberCard .name {
  font-size: 1.2rem;
}

.memberCard p {
  font-size: 0.9rem;
  max-width: 12rem;
  text-align: center;
  margin-bottom: 1rem;
}

.owl-item.active {
  display: grid;
  place-items: center;
}

.owl-nav {
  display: none;
}

.owl-dots {
  display: flex;
  margin-bottom: 3rem;
  align-items: center;
  justify-content: center;
}

.owl-dots .owl-dot {
  width: 1.5rem;
  height: 0.8rem;
  margin: 0 0.4rem;
  border-radius: 50rem;
  transition: width 0.3s, transform 0.3s;
  border: 2px solid rgb(255 255 255 / 20%) !important;
}

.owl-dots .owl-dot.active {
  width: 2.5rem;
  transform: scale(1.1);
  background: rgb(13 20 27);
  border: 2px solid rgb(13 20 27) !important;
}

/* ---------------- Team Section End ---------------- */

/* ---------------- Contact Section ---------------- */

.contact-section {
  background: #040c13;
}

.contactTitle {
  font-weight: 800;
  color: #0d141b;
  text-align: center;
  padding-top: 1.6rem;
  font-size: clamp(4rem, 4vw, 5rem);
  transition: color 0.3s ease-in-out;
}

.contact-section:hover .contactTitle {
  color: transparent;
  -webkit-text-stroke: 1px #212830;
}

.contact-section .container {
  display: flex;
  margin-top: 1.2rem;
  align-items: center;
  padding-bottom: 2rem;
  justify-content: space-evenly;
}

.contact-section .container .details {
  margin-right: 1rem;
  color: rgb(255 255 255 / 40%);
}

.contact-section .container .details p {
  color: #d28021;
  margin-top: 0.8rem;
}

.contact-section .container .details span {
  color: rgb(255 255 255 / 40%);
}

.contact-section .container .contact-form .input-group {
  display: flex;
  margin-bottom: 1rem;
  justify-content: space-between;
}

.contact-section .container .contact-form .input-field {
  margin: 0 0.4rem;
}

.contact-section .container .contact-form .input-field input {
  height: 2.8rem;
  padding: 0 0.6rem;
  border-radius: 2rem;
  background: transparent;
  color: rgb(255 255 255 / 50%);
  border: 2px solid rgb(255 255 255 / 25%);
}

.contact-section .container .contact-form .input-field input:focus {
  outline: none;
  border: 2px solid #d28021 !important;
}

.contact-section .container .contact-form .input-field textarea {
  height: auto;
  width: 100%;
  padding: 0 0.6rem;
  padding-top: 0.4rem;
  border-radius: 1.2rem;
  background: transparent;
  color: rgb(255 255 255 / 50%);
  border: 2px solid rgb(255 255 255 / 25%);
}

.contact-section .container .contact-form .input-field textarea:focus {
  outline: none;
  border: 2px solid #d28021 !important;
}

.contact-section .container .contact-form button {
  float: right;
  margin-top: .6rem;
  margin-right: 1rem;
}

@media (max-width: 700px) {
  .contact-section .container {
    display: block;
  }
  
  .contact-section .container .details {
    width: 90%;
    margin: 0 1rem;
    margin-bottom: 2rem;
  }
  
  .contact-section .container .contact-form {
    margin: 0 .58rem;
    overflow-x: hidden;
  }

  .contact-section .container .contact-form .input-group {
    flex-direction: column;
  }
  
  .contact-section .container .contact-form .input-group input {
    width: 100%;
    margin-top: .5rem;
  }
}

/* ---------------- Contact Section End ---------------- */

/* ---------------- Footer Section ---------------- */

.footer{
  overflow-x: hidden;
  background: #010309;
}

.footer .footerLogo {
  font-size: 2rem;
  margin-top: .4rem;
  text-align: center;
  margin-bottom: .4rem;
  color: rgb(255 255 255 / 80%);
}

.footer .followMe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  color: rgb(255 255 255 / 50%);
}

.footer .followMe i {
  cursor: pointer;
  font-size: 1.4rem;
  position: relative;
  margin: 1.5rem 1.4rem;
}

.footer .followMe i::after{
  content: "";
  top: 50%;
  left: 50%;
  width: 160%;
  height: 160%;
  padding: .2rem;
  position: absolute;
  border-radius: .6rem;
  background: rgb(255 255 255 / 5%);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.footer .followMe i:hover::after {
  background: rgb(210 128 33 / 10%);
  transform: translate(-50%, -50%) rotate(90deg);
}

.footer .copyright {
  display: flex;
  margin-bottom: 1rem;
  justify-content: center;
  color: rgb(255 255 255 / 50%);
}

.footer .copyright span {
  cursor: pointer;
  color: #d28021;
}

/* ---------------- Footer Section End ---------------- */

.backToTop {
  opacity: 0;
  right: 1rem;
  bottom: 1rem;
  width: 2.5rem;
  display: grid;
  color: #fff;
  height: 2.5rem;
  cursor: pointer;
  position: fixed;
  place-items: center;
  pointer-events: none;
  border-radius: 0.4rem;
  background: #021422;
  transition: opacity 0.3s ease-in-out;
}

.backToTop.show {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 665px) {
  .navbar nav ul {
    top: 0%;
    z-index: 1;
    left: -100%;
    width: 100%;
    height: 100vh;
    position: absolute;
    align-items: center;
    background: #010910;
    flex-direction: column;
    justify-content: center;
    transition: left 0.4s ease-in-out;
  }

  .navbar nav ul.show {
    left: 0;
  }

  .navbar nav ul li {
    font-size: 1.2rem;
    margin: clamp(1rem, 4vh, 1.8rem) 0;
  }

  .menuBtn {
    display: flex;
  }

  .services-section .cards {
    display: grid;
    grid-template-columns: auto auto;
  }
}

@media (max-width: 480px) {
  .services-section .cards {
    display: grid;
    overflow-x: hidden;
    margin: 0 1rem;
    grid-template-columns: auto;
  }

  .services-section .cards .card {
    width: 20rem;
    max-width: 20rem;
  }
}

@media (max-width: 800px) {
  .about-section {
    flex-wrap: wrap;
  }

  .skillContainer {
    width: calc(100% - 3rem);
  }

  .about-section .sectionTitle {
    padding-top: 3.8rem;
  }

  .about-section .sectionTitle {
    text-align: center;
    font-size: clamp(3rem, 4vw, 5rem);
  }

  .about-section :is(.skills, .details) {
    height: auto;
  }

  .about-section {
    height: 100%;
  }

  .welcomeAction button:last-child {
    padding: 0.4rem 1rem !important;
  }

  .about-section .image {
    height: 70vh;
    margin-top: 3rem;
    margin-bottom: 2rem;
    background-size: 25rem;
    background-position-y: 0%;
  }

  .about-section .details {
    padding-top: 1rem;
  }
}

var typed = new Typed('.auto-type', {
    strings: ["Developer.",
        "Designer.",
        "Blogger.",
        "Freelancer."],
    smartBackspace: true,
    typeSpeed: 100,
    typeSpeed: 100,
    backSpeed: 50,
    loop: true,
})

let btn = document.querySelector('.menuBtn')
let menu = document.querySelector('.navbar nav ul')
let links = document.querySelectorAll('.navbar nav ul li')
let navbar = document.querySelector('.navbar')
let backToTop = document.querySelector('.backToTop')
let progressPercent = document.querySelectorAll('.percent')

links.forEach(link => {
    link.addEventListener('click', e => {
        let id = e.target.getAttribute('id')
        if(id == 'home'){
            window.scrollTo(0, 0)
        }
    })
})


btn.addEventListener('click', function () {
    btn.classList.toggle('active')
    menu.classList.toggle('show')
})

backToTop.addEventListener('click', function () {
    window.scrollTo(0, 0)
})

function setNavbarClass() {
    if (window.scrollY > 167) {
        navbar.classList.add('active')
        backToTop.classList.add('show')
    } else {
        navbar.classList.remove('active')
        backToTop.classList.remove('show')
    }
}

function progress() {
    progressPercent.forEach(percentDiv => {
        if (window.scrollY >= 533) {
            let percent = percentDiv.dataset.percent
            percentDiv.style.width = percent
        }
    })
}
progress()
setNavbarClass()

window.addEventListener('scroll', (e) => {
    setNavbarClass()
    progress()
})

var owl = $('.owl-carousel');
owl.owlCarousel({
    loop: true,
    nav: true,
    margin: 10,
    center: true,
    autoplay: true,
    autoplayTimeout: 1500,
    responsive: {
        0: {
            items: 1
        },
        540: {
            items: 2
        },
        960: {
            items: 3
        },
        1200: {
            items: 4
        },
        1500: {
            items: 5
        }
    }
});

Run Pen

This Pen is owned by Ashutosh Tiwari on CodePen.

See more by @InCoderWeb on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.