DEV Community

Cover image for Building a Stunning Portfolio Website with HTML and CSS
Ashutosh Tiwari
Ashutosh Tiwari

Posted on • Originally published at incoderweb.blogspot.com

Building a Stunning Portfolio Website with HTML and CSS

Hello friends, today in this blog we will see how to build a stunning portfolio website with HTML and CSS. In our last blog, we saw how to create a cool & effective contact page. You can check my other javascript projects after reading this blog.

Ensuring consistency and professionalism across your body of work is essential in maintaining a personal portfolio site. This platform provides potential clients with a convenient way to explore your projects while allowing you to expand on your skills, experiences, and offered services.

This interesting portfolio site has four main sections all on one page – Home, About, Services, and Contact. Each part is designed to catch your eye. At the top of the homepage, there's a simple navigation bar. On the left is the logo, and on the right are the links, making it easy to move around the site.

On the right side of the home page, some texts are about the author’s name, profession, and a button labeled “About me” as you can see in the image.

If you like this portfolio and want to get the source codes, I have provided all the codes of this program below and I’ve also provided the download link of this program where you can easily download the source files of this program.

You can use this portfolio with your creative customization and can take this portfolio to the next level with your creativity.

If you want to check the live preview of this portfolio then you can go here.

You may like these:

Building a Stunning Portfolio [Source Code]

Here's the good news: you don't have to write all the code of this project from scratch! I have created a GitHub repository that contains all the HTML, CSS, and JavaScript code needed to build the app. You can check it out and use it as a starting point for your own project.

HTML Code

 <!DOCTYPE html>  
 <html lang="en">  
      <head>  
           <!-- ---------------- Created By InCoderWeb ---------------- -->  
           <meta charset="UTF-8" />  
           <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
           <title>Portfolio | InCoderWeb</title>  
           <link rel="stylesheet" href="main.css" />  
           <script src="https://cdn.tailwindcss.com"></script>  
           <link  
                rel="stylesheet"  
                href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"  
           />  
           <link  
                href="https://unpkg.com/aos@2.3.1/dist/aos.css"  
                rel="stylesheet"  
           />  
      </head>  
      <body>  
           <header>  
                <nav  
                     class="inNavbar container mx-auto flex items-center justify-between py-6 px-6"  
                >  
                     <h3 data-aos="fade-down" class="logo text-3xl font-semibold">  
                          InCoder  
                     </h3>  
                     <div class="links" data-aos="fade-down">  
                          <ul class="flex">  
                               <a href="#">  
                                    <li>Home</li>  
                               </a>  
                               <a href="#aboutMe">  
                                    <li>About</li>  
                               </a>  
                               <a href="#services">  
                                    <li>Services</li>  
                               </a>  
                               <a href="#contact">  
                                    <li>Contact</li>  
                               </a>  
                          </ul>  
                     </div>  
                     <button class="menuBtn border h-9 w-9">  
                          <i class="fa-solid fa-bars"></i>  
                     </button>  
                </nav>  
           </header>  
           <!-- -------------------- Hero Section --------------------- -->  
           <section class="hero">  
                <div  
                     class="container h-full flex justify-center pr-12 flex-col items-end"  
                     data-aos="fade-left"  
                >  
                     <div style="font-size: 1rem; color: rgb(255 255 255 / 50%)">  
                          Full Stack Developer  
                     </div>  
                     <div class="heroText" style="font-size: xxx-large">  
                          I'm Jazz Martin  
                     </div>  
                     <p  
                          class="max-w-sm mb-4 text-right"  
                          style="font-size: 0.8rem; color: rgb(255 255 255 / 50%)"  
                     >  
                          Lorem ipsum dolor sit amet consectetur adipisicing elit.  
                          Officiis sit in voluptas consequatur voluptate  
                     </p>  
                     <div class="flex">  
                          <a href="#aboutMe"  
                               ><button class="inBtn border py-1 px-2 mx-1">  
                                    About Me  
                               </button></a  
                          >  
                          <a href="#contact"  
                               ><button class="inBtn border py-1 px-2 mx-1">  
                                    Contact Me  
                               </button></a  
                          >  
                     </div>  
                </div>  
                <div  
                     class="scrollDownWrapper flex justify-center items-center w-full"  
                >  
                     <a href="#aboutMe"  
                          ><div class="scrolldownbtn flex justify-center"></div  
                     ></a>  
                </div>  
           </section>  
           <!-- -------------------- Hero Section End --------------------- -->  
           <!-- -------------------- About Section --------------------- -->  
           <section  
                id="aboutMe"  
                class="flex justify-center !xxl:h-auto items-center flex-wrap text-white mx-auto w-full"  
           >  
                <div class="container w-full px-12 mx-12 aboutCon">  
                     <div  
                          class="left mb-8 pb-8 xs:pb-0 xs:mb-0"  
                          data-aos="fade-right"  
                     >  
                          <h1 class="text-3xl">About Me</h1>  
                          <h2  
                               data-aos="flip-up"  
                               data-aos-delay="300"  
                               class="name px-4 py-1 mt-4 max-w-fit"  
                          >  
                               Jazz Martin  
                          </h2>  
                          <p  
                               class="max-w-md mt-5"  
                               style="  
                                    color: rgb(255 255 255 / 70%);  
                                    letter-spacing: 2px;  
                               "  
                          >  
                               Lorem ipsum dolor sit amet consectetur adipisicing elit.  
                               Molestiae expedita tenetur dolore fuga doloremque  
                               repellendus culpa. Nam, ipsa? Numquam, quia. Lorem ipsum  
                               dolor sit amet.  
                          </p>  
                          <div class="social-buttons">  
                               <a  
                                    href="#"  
                                    class="social-button social-button--facebook"  
                                    aria-label="Facebook"  
                                    data-aos="flip-left"  
                                    data-aos-delay="300"  
                               >  
                                    <i class="fa-brands fa-facebook"></i>  
                               </a>  
                               <a  
                                    href="#"  
                                    class="social-button social-button--linkedin"  
                                    aria-label="LinkedIn"  
                                    data-aos="flip-left"  
                                    data-aos-delay="300"  
                               >  
                                    <i class="fa-brands fa-linkedin"></i>  
                               </a>  
                               <a  
                                    href="#"  
                                    class="social-button social-button--twitter"  
                                    aria-label="Twitter"  
                                    data-aos="flip-left"  
                                    data-aos-delay="300"  
                               >  
                                    <i class="fa-brands fa-x-twitter"></i>  
                               </a>  
                               <a  
                                    href="#"  
                                    class="social-button social-button--github"  
                                    aria-label="GitHub"  
                                    data-aos="flip-left"  
                                    data-aos-delay="300"  
                               >  
                                    <i class="fa-brands fa-github"></i>  
                               </a>  
                               <a  
                                    href="#"  
                                    class="social-button social-button--mail"  
                                    aria-label="E-mail"  
                                    data-aos="flip-left"  
                                    data-aos-delay="300"  
                               >  
                                    <i class="fa-solid fa-envelope"></i>  
                               </a>  
                          </div>  
                     </div>  
                     <div  
                          class="right gradient pt-8 mt-8 xs:mt-0 xs:pt-0"  
                          data-aos="zoom-in-left"  
                     >  
                          <img src="./images/profile.jpg" alt="Me" />  
                     </div>  
                </div>  
           </section>  
           <!-- -------------------- About Section End --------------------- -->  
           <!-- -------------------- Services Section --------------------- -->  
           <section  
                id="services"  
                class="flex justify-center !xxl:h-auto items-center flex-wrap text-white mx-auto w-full"  
           >  
                <div class="container w-full px-12 mx-12">  
                     <h1 class="text-3xl">  
                          Services <i class="fa-solid fa-angle-right"></i>  
                     </h1>  
                     <div class="gradient-cards">  
                          <div class="card" data-aos="flip-left" data-aos-delay="300">  
                               <div class="container-card bg-white-box">  
                                    <div class="cardIcon white_icon">  
                                         <i class="fa-solid fa-laptop"></i>  
                                    </div>  
                                    <p class="card-title">Design</p>  
                                    <p class="card-description">  
                                         Lorem ipsum dolor sit amet consectetur  
                                         adipisicing elit. Animi, odit reiciendis. Quam  
                                         repudiandae deserunt quibusdam  
                                    </p>  
                               </div>  
                          </div>  
                          <div class="card" data-aos="flip-left" data-aos-delay="300">  
                               <div class="container-card bg-white-box">  
                                    <div class="cardIcon white_icon">  
                                         <i class="fa-solid fa-code"></i>  
                                    </div>  
                                    <p class="card-title">Development</p>  
                                    <p class="card-description">  
                                         Lorem ipsum dolor sit amet consectetur  
                                         adipisicing elit. Animi, odit reiciendis. Quam  
                                         repudiandae deserunt quibusdam  
                                    </p>  
                               </div>  
                          </div>  
                          <div class="card" data-aos="flip-left" data-aos-delay="300">  
                               <div class="container-card bg-white-box">  
                                    <div class="cardIcon white_icon">  
                                         <i class="fa-solid fa-lightbulb"></i>  
                                    </div>  
                                    <p class="card-title">Innovation</p>  
                                    <p class="card-description">  
                                         Lorem ipsum dolor sit amet consectetur  
                                         adipisicing elit. Animi, odit reiciendis. Quam  
                                         repudiandae deserunt quibusdam  
                                    </p>  
                               </div>  
                          </div>  
                          <div class="card" data-aos="flip-left" data-aos-delay="300">  
                               <div class="container-card bg-white-box">  
                                    <div class="cardIcon white_icon">  
                                         <i class="fa-solid fa-computer"></i>  
                                    </div>  
                                    <p class="card-title">Testing</p>  
                                    <p class="card-description">  
                                         Lorem ipsum dolor sit amet consectetur  
                                         adipisicing elit. Animi, odit reiciendis. Quam  
                                         repudiandae deserunt quibusdam  
                                    </p>  
                               </div>  
                          </div>  
                     </div>  
                </div>  
           </section>  
           <!-- -------------------- Services Section End --------------------- -->  
           <section id="contact">  
                <div class="left" data-aos="fade-up-right" data-aos-delay="500">  
                     <div class="header">  
                          <span>Contact Us</span>  
                          <h1>Get in touch with us!</h1>  
                          <p>Our friendly team would love to hear from you.</p>  
                     </div>  
                     <div class="body">  
                          <div class="doubleInput">  
                               <div class="inputWrapper">  
                                    <label for="fname">First Name</label>  
                                    <input type="text" id="fname" placeholder="Jhon" />  
                               </div>  
                               <div class="inputWrapper">  
                                    <label for="lname">Last Name</label>  
                                    <input type="text" id="lname" placeholder="Deo" />  
                               </div>  
                          </div>  
                          <div class="inputWrapper">  
                               <label for="email">Email</label>  
                               <input  
                                    type="email"  
                                    id="email"  
                                    placeholder="info@example.com"  
                               />  
                          </div>  
                          <div class="inputWrapper">  
                               <label for="phone">Phone</label>  
                               <input  
                                    type="number"  
                                    id="phone"  
                                    placeholder="+1 78956 2567"  
                               />  
                          </div>  
                          <div class="inputWrapper">  
                               <label for="message">Message</label>  
                               <textarea  
                                    id="message"  
                                    placeholder="Enter your message here."  
                               ></textarea>  
                          </div>  
                          <p class="terms-services">  
                               <input  
                                    class="input"  
                                    id="terms-services"  
                                    type="checkbox"  
                               />  
                               <label class="checkbox" for="terms-services"  
                                    ><span>  
                                         <svg width="12px" height="10px">  
                                              <use xlink:href="#check"></use></svg></span  
                                    ><span  
                                         >You agree to our friendly  
                                         <a href="#" style="text-decoration: underline"  
                                              >privacy policy</a  
                                         >.</span  
                                    ></label  
                               >  
                               <!--SVG Sprites-->  
                               <svg class="inline-svg">  
                                    <symbol id="check" viewbox="0 0 12 10">  
                                         <polyline  
                                              points="1.5 6 4.5 9 10.5 1"  
                                         ></polyline>  
                                    </symbol>  
                               </svg>  
                          </p>  
                          <button type="submit" class="inBtn border py-2 hover:bg-white hover:text-black transition-color px-2 mx-2 w-full">  
                               Send Message  
                          </button>  
                     </div>  
                </div>  
                <div class="right" data-aos="fade-up-left" data-aos-delay="500">  
                     <iframe  
                          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15283611.507223276!2d72.1086554365551!3d20.736584519018294!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2sIndia!5e0!3m2!1sen!2sin!4v1707754415195!5m2!1sen!2sin"  
                          width="600"  
                          height="650"  
                          style="-webkit-filter: grayscale(100%); filter: grayscale(100%);"  
                          style="border: 0"  
                          allowfullscreen=""  
                          loading="lazy"  
                          referrerpolicy="no-referrer-when-downgrade"  
                     ></iframe>  
                </div>  
           </section>  
           <a href="#" class="backToTop fixed bottom-12 hidden right-10"  
                ><i class="fa-solid fa-arrow-up"></i  
           ></a>  
           <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>  
           <script src="main.js"></script>  
      </body>  
 </html>  
Enter fullscreen mode Exit fullscreen mode

CSS Code

 @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");  
 /* --------------------- Created By InCoder --------------------- */  
 * {  
      margin: 0;  
      padding: 0;  
      box-sizing: border-box;  
      font-family: "Poppins", sans-serif;  
 }  
 body {  
      color: #cecece;  
      background: #151515;  
      overflow-x: hidden;  
      cursor: url("./images/cursor.png"), auto;  
 }  
 html {  
      scroll-behavior: smooth;  
 }  
 header > nav{  
      height: 4rem;  
 }  
 header,  
 section {  
      max-width: 100rem;  
      margin: 0 auto;  
 }  
 .links ul a {  
      margin: 0 1rem;  
      font-size: 1rem;  
      position: relative;  
      transition: width 0.3s ease-in-out;  
      transition-behavior: smooth;  
 }  
 .links ul a::before,  
 .links ul a::after {  
      content: "";  
      width: 1rem;  
      height: 0.1rem;  
      position: absolute;  
      background: #cecece;  
      transform: scale(0);  
      transform-origin: center;  
      transition: transform 0.3s cubic-bezier(0.45, -0.73, 0.05, 1.39);  
 }  
 .links ul a::before {  
      right: 0;  
      top: -0.2rem;  
 }  
 .links ul a::after {  
      left: 0;  
      bottom: -0.2rem;  
 }  
 .links ul a:hover::after,  
 .links ul a:hover::before {  
      transform: scale(1);  
 }  
 .menuBtn {  
      display: none;  
 }  
 .hero {  
      height: 50rem;  
      /* overflow: hidden; */  
      text-align: center;  
      background: url("./images/bg.jpg") no-repeat;  
      background-position: -8rem -8rem;  
      background-size: 60rem;  
 }  
 .scrollDownWrapper {  
      height: 6rem;  
      width: 100vw;  
      position: relative;  
 }  
 .scrolldownbtn {  
      top: -8rem;  
      width: 1.5rem;  
      height: 3rem;  
      cursor: pointer;  
      position: absolute;  
      border-radius: 2rem;  
      border: 1px solid #cecece;  
 }  
 .scrolldownbtn::before {  
      content: "";  
      bottom: 0.5rem;  
      width: 0.4rem;  
      height: 0.4rem;  
      border-radius: 50%;  
      position: absolute;  
      background-color: #cecece;  
      animation: bounce 0.6s cubic-bezier(0.46, -0.77, 0, 1.04) infinite alternate;  
 }  
 .backToTop {  
      animation: bounce 0.7s ease-in-out infinite alternate;  
 }  
 #aboutMe .right {  
      position: relative;  
 }  
 #aboutMe .right img {  
      width: 25rem;  
      height: 25rem;  
      z-index: 5;  
      object-fit: cover;  
      border-radius: 50%;  
 }  
 #aboutMe .right::before {  
      top: 0;  
      left: 0;  
      content: "";  
      --speed: 5s;  
      z-index: -1;  
      opacity: 0.8;  
      --size: 25rem;  
      position: absolute;  
      width: var(--size);  
      border-radius: 50%;  
      height: var(--size);  
      transition: all 0.25s ease-out;  
      filter: blur(calc(var(--size) / 6));  
      --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);  
      animation: rotate var(--speed) var(--easing) alternate infinite;  
      background-image: linear-gradient(#aac8a7, #c3edc0, #e9ffc2, #fdffae);  
 }  
 #aboutMe,  
 #services {  
      min-height: 100vh;  
      width: 100vw;  
 }  
 #aboutMe .left h1 {  
      color: rgb(255 255 255 / 40%);  
 }  
 #aboutMe .left .name {  
      color: #000;  
      font-weight: 800;  
      font-size: 2.5rem;  
      letter-spacing: 0.3rem;  
      text-transform: uppercase;  
      background-color: #ffffff;  
 }  
 .aboutCon {  
      display: flex;  
      justify-content: space-between;  
 }  
 @media (min-width: 720px) {  
      .gradient {  
           --size: 500px;  
      }  
 }  
 @keyframes bounce {  
      0% {  
           bottom: 0.8rem;  
      }  
      100% {  
           bottom: 1.2rem;  
      }  
 }  
 @keyframes rotate {  
      0% {  
           transform: rotate(0deg);  
      }  
      100% {  
           transform: rotate(360deg);  
      }  
 }  
 @media (max-width: 768px) {  
      #aboutMe .right img {  
           width: 18rem;  
           height: 18rem;  
      }  
      .aboutCon {  
           flex-wrap: wrap;  
           align-items: center;  
           justify-content: center !important;  
      }  
      #aboutMe .right::before {  
           top: 42px;  
           left: -18px;  
           --size: 16rem;  
      }  
      .links {  
           display: none;  
      }  
      .links ul {  
           align-items: center;  
           flex-direction: column;  
           justify-content: center;  
      }  
      .links ul a {  
           margin: 0.5rem 0;  
           width: fit-content;  
      }  
      .links ul a li {  
           color: #ffffff;  
           text-shadow: 2px 2px 2px #000;  
      }  
      .links.active {  
           left: 0;  
           top: 5rem;  
           width: 100%;  
           z-index: 9999;  
           display: block;  
           text-align: center;  
           position: absolute;  
           padding: 2rem 2rem;  
           backdrop-filter: blur(4px);  
           background: rgb(206 206 206 / 20%);  
      }  
      .menuBtn {  
           display: block;  
      }  
      .hero {  
           height: 100vh;  
           background-position: left;  
           background-size: 100vh;  
      }  
      .heroText {  
           font-size: xx-large !important;  
      }  
      .heroText + p {  
           font-size: 0.7rem !important;  
      }  
 }  
 @media (max-width: 1024px) {  
      .hero {  
           height: 100vh;  
           background-size: 100vh;  
      }  
 }  
 @media (min-width: 2560px) {  
      #aboutMe {  
           height: 90rem !important;  
      }  
      #services {  
           height: 50rem !important;  
      }  
 }  
 button {  
      border-color: rgb(255 255 255 / 50%);  
      transition: border-color 0.2s ease-in-out;  
 }  
 button:hover {  
      border-color: #fff;  
 }  
 .social-buttons {  
      display: flex;  
      flex-wrap: wrap;  
      margin-top: 2rem;  
      justify-content: start;  
      gap: 1.5rem;  
 }  
 .social-button {  
      position: relative;  
      display: flex;  
      justify-content: center;  
      align-items: center;  
      outline: none;  
      width: 3rem;  
      height: 3rem;  
      text-decoration: none;  
      border-radius: 100%;  
      background: rgb(206 206 206 / 20%);  
      text-align: center;  
 }  
 .social-button::after {  
      content: "";  
      position: absolute;  
      top: -1px;  
      left: 50%;  
      display: block;  
      width: 0;  
      height: 0;  
      border-radius: 100%;  
      transition: 0.3s;  
 }  
 .social-button:focus,  
 .social-button:hover {  
      color: #fff;  
 }  
 .social-button:focus::after,  
 .social-button:hover::after {  
      width: calc(100% + 2px);  
      height: calc(100% + 2px);  
      margin-left: calc(-50% - 1px);  
 }  
 .social-button i,  
 .social-button svg {  
      position: relative;  
      z-index: 1;  
      transition: 0.3s;  
 }  
 .social-button i {  
      font-size: 22px;  
      color: rgb(255 255 255 / 50%);  
 }  
 .social-button:hover i {  
      font-size: 22px;  
      color: rgb(255 255 255);  
 }  
 .social-button svg {  
      height: 40%;  
      width: 40%;  
 }  
 .social-button--mail {  
      color: #0072c6;  
 }  
 .social-button--mail::after {  
      background: #0072c6;  
 }  
 .social-button--facebook {  
      color: #3b5999;  
 }  
 .social-button--facebook::after {  
      background: #3b5999;  
 }  
 .social-button--linkedin {  
      color: #0077b5;  
 }  
 .social-button--linkedin::after {  
      background: #0077b5;  
 }  
 .social-button--github {  
      color: #6e5494;  
 }  
 .social-button--github::after {  
      background: #6e5494;  
 }  
 .social-button--codepen {  
      color: #212121;  
 }  
 .social-button--codepen::after {  
      background: #212121;  
 }  
 .social-button--steam {  
      color: #7da10e;  
 }  
 .social-button--steam::after {  
      background: #7da10e;  
 }  
 .social-button--snapchat {  
      color: #eec900;  
 }  
 .social-button--snapchat::after {  
      background: #eec900;  
 }  
 .social-button--twitter {  
      color: #55acee;  
 }  
 .social-button--twitter::after {  
      background: #55acee;  
 }  
 .social-button--instagram {  
      color: #e4405f;  
 }  
 .social-button--instagram::after {  
      background: #e4405f;  
 }  
 .social-button--npmjs {  
      color: #c12127;  
 }  
 .social-button--npmjs::after {  
      background: #c12127;  
 }  
 .container {  
      width: 1200px !important;  
      padding: 0 !important;  
      margin-right: auto;  
      margin-left: auto;  
 }  
 @media screen and (min-width: 992px) and (max-width: 1439px) {  
      .container {  
           max-width: 1279px !important;  
           padding: 0 !important;  
           margin: 0 80px !important;  
           width: auto !important;  
      }  
 }  
 @media screen and (max-width: 991px) {  
      .container {  
           max-width: 959px !important;  
           margin: 0 16px !important;  
           padding: 0 !important;  
           width: auto !important;  
      }  
 }  
 .gradient-cards {  
      display: grid;  
      grid-template-columns: repeat(2, 1fr);  
      gap: 32px;  
      padding: 30px;  
 }  
 @media screen and (max-width: 991px) {  
      .gradient-cards {  
           grid-template-columns: 1fr;  
      }  
 }  
 .container-title {  
      text-align: center;  
      padding: 0 !important;  
      margin-bottom: 40px;  
      font-size: 40px;  
      color: #fff;  
      font-weight: 600;  
      line-height: 60px;  
 }  
 .card {  
      max-width: 550px;  
      border: 0;  
      width: 100%;  
      margin-inline: auto;  
 }  
 .container-card {  
      position: relative;  
      border: 2px solid transparent;  
      background: linear-gradient(71deg, #080509, #1a171c, #080509);  
      background-clip: padding-box;  
      border-radius: 45px;  
      padding: 40px;  
 }  
 .container-card img {  
      margin-bottom: 32px;  
 }  
 .bg-green-box,  
 .bg-white-box,  
 .bg-yellow-box,  
 .bg-blue-box {  
      position: relative;  
 }  
 .bg-green-box::after,  
 .bg-white-box::after,  
 .bg-yellow-box::after,  
 .bg-blue-box::after {  
      position: absolute;  
      top: -1px;  
      bottom: -1px;  
      left: -1px;  
      right: -1px;  
      content: "";  
      z-index: -1;  
      border-radius: 45px;  
 }  
 .bg-green-box::after {  
      background: linear-gradient(71deg, #0d1212, #3da077, #0d1212);  
 }  
 .bg-white-box::after {  
      background: linear-gradient(71deg, #121013, #b0afb0, #121013);  
 }  
 .bg-yellow-box::after {  
      background: linear-gradient(71deg, #110e0e, #afa220, #110e0e);  
 }  
 .bg-blue-box::after {  
      background: linear-gradient(71deg, #0c0a0e, #5f6fad, #0c0a0e);  
 }  
 .card-title {  
      font-weight: 600;  
      color: white;  
      letter-spacing: -0.02em;  
      line-height: 40px;  
      font-style: normal;  
      font-size: 28px;  
      padding-bottom: 8px;  
 }  
 .card-description {  
      font-weight: 600;  
      line-height: 32px;  
      color: rgba(255, 255, 255, 0.5);  
      font-size: 16px;  
      max-width: 470px;  
 }  
 .cardIcon{  
      width: 5rem;  
      height: 5rem;  
      display: flex;  
      font-size: 2rem;  
      color: #3da077;  
      position: relative;  
      align-items: center;  
      margin-bottom: .7rem;  
      border-radius: .8rem;  
      justify-content: center;  
      border: 1px solid #3da077;  
 }  
 .green_icon{  
      color: #3da077;  
      border: 1px solid #3da077;  
 }  
 .white_icon{  
      color: #b0afb0;  
      border: 1px solid #b0afb0;  
 }  
 .yellow_icon{  
      color: #afa220;  
      border: 1px solid #afa220;  
 }  
 .blue_icon{  
      color: #5f6fad;  
      border: 1px solid #5f6fad;  
 }  
 #services h1{  
      font-size: 2rem;  
      margin-bottom: .5rem;  
      color: rgb(255 255 255 / 40%);  
 }  
 #contact {  
      width: 100%;  
      display: flex;  
      min-height: 100vh;  
      align-items: center;  
      justify-content: center;  
 }  
 #contact .left {  
      margin: 2rem 5rem;  
 }  
 #contact .left .header span {  
      color: #7c3aed;  
      font-size: 1.2rem;  
 }  
 #contact .left .header h1 {  
      color: rgb(255 255 255 / 80%);  
      font-size: 2.5rem;  
      margin-bottom: 0.8rem;  
 }  
 #contact .right svg {  
      width: 40rem;  
 }  
 .animatesvg {  
      animation: 2s linear infinite alternate animateSVG;  
 }  
 input,  
 textarea{  
      background-color: transparent;  
 }  
 @keyframes animateSVG {  
      0% {  
           fill: #8b5cf6;  
      }  
      50% {  
           fill: #7c3aed;  
      }  
      100% {  
           fill: #5b21b6;  
      }  
 }  
 .doubleInput {  
      display: flex;  
 }  
 .inputWrapper {  
      display: flex;  
      margin-top: 0.8rem;  
      flex-direction: column;  
      justify-content: space-between;  
 }  
 .inputWrapper label {  
      margin-bottom: 0.5rem;  
      width: fit-content;  
 }  
 .inputWrapper input,  
 .inputWrapper textarea {  
      outline: none;  
      height: 2.5rem;  
      font-size: 0.9rem;  
      margin-right: 0.5rem;  
      padding: 0rem 0.8rem;  
      border-radius: 0.5rem;  
      border: 1px solid #cccccc79;  
      transition: all 0.2s ease-in-out;  
 }  
 .inputWrapper input:focus-within,  
 .inputWrapper textarea:focus-within {  
      border: 1px solid #7c3aed;  
 }  
 #fname {  
      border-top-right-radius: 0;  
      border-bottom-right-radius: 0;  
 }  
 #lname {  
      border-top-left-radius: 0;  
      border-bottom-left-radius: 0;  
 }  
 input::-webkit-outer-spin-button,  
 input::-webkit-inner-spin-button {  
      -webkit-appearance: none;  
      margin: 0;  
 }  
 input[type="number"] {  
      -moz-appearance: textfield;  
 }  
 .inputWrapper textarea{  
   padding: .5rem .8rem;  
   height: 6rem!important;  
 }  
 .terms-services {  
   display: flex;  
   margin-top: 1rem;  
   margin-bottom: 1rem;  
 }  
 .checkbox {  
   -webkit-user-select: none;  
   user-select: none;  
   cursor: pointer;  
   padding: 6px 8px;  
   display: flex;  
   border-radius: 6px;  
   overflow: hidden;  
   transition: all 0.2s ease;  
 }  
 .checkbox:not(:last-child) {  
   margin-right: 6px;  
 }  
 .checkbox span {  
   float: left;  
   vertical-align: middle;  
   transform: translate3d(0, 0, 0);  
 }  
 .checkbox span:first-child {  
   position: relative;  
   width: 18px;  
   height: 18px;  
   min-width: 18px;  
   border-radius: 4px;  
   transform: scale(1);  
   border: 1px solid #cccfdb;  
   transition: all 0.2s ease;  
   box-shadow: 0 1px 1px rgba(0, 16, 75, 0.05);  
 }  
 .checkbox span:first-child svg {  
   position: absolute;  
   top: 3px;  
   left: 2px;  
   fill: none;  
   stroke: #fff;  
   stroke-width: 2;  
   stroke-linecap: round;  
   stroke-linejoin: round;  
   stroke-dasharray: 16px;  
   stroke-dashoffset: 16px;  
   transition: all 0.3s ease;  
   transition-delay: 0.1s;  
   transform: translate3d(0, 0, 0);  
 }  
 .checkbox span:last-child {  
   padding-left: 8px;  
   line-height: 18px;  
 }  
 .checkbox:hover span:first-child {  
   border-color: #7c3aed;  
 }  
 .input {  
   position: absolute;  
   visibility: hidden;  
 }  
 .input:checked+.checkbox span:first-child {  
   background: #7c3aed;  
   border-color: #7c3aed;  
   animation: wave 0.4s ease;  
 }  
 .input:checked+.checkbox span:first-child svg {  
   stroke-dashoffset: 0;  
 }  
 .inline-svg {  
   position: absolute;  
   width: 0;  
   height: 0;  
   pointer-events: none;  
   user-select: none;  
 }  
 @-moz-keyframes wave {  
   50% {  
     transform: scale(0.9);  
   }  
 }  
 @-webkit-keyframes wave {  
   50% {  
     transform: scale(0.9);  
   }  
 }  
 @-o-keyframes wave {  
   50% {  
     transform: scale(0.9);  
   }  
 }  
 @keyframes wave {  
   50% {  
     transform: scale(0.9);  
   }  
 }  
 @media (max-width: 320px) {  
   .container .title{  
     font-size: 2rem;  
   }  
   .link{  
     font-size: .9rem;  
   }  
 }  
 b{  
   font-weight: 400;  
 }  
 .submitBtn{  
   border: 0;  
   width: 100%;  
   height: 2.5rem;  
   cursor: pointer;  
   font-size: 1rem;  
   font-weight: 600;  
   color: #ffffff;  
   border-radius: .5rem;  
   background-color: #7c3aed!important;  
   transition: background-color .2s ease-in-out;  
 }  
 .submitBtn:hover{  
   background-color: #6b21a8;  
 }  
 @media (max-width: 1024px) {  
   #contact .right {  
     display: none;  
   }  
 }  
 @media (max-width: 768px) {  
   #contact .left .header{  
     text-align: center;  
   }  
   #contact .left{  
     width: 100%;  
     margin: 2rem 2rem;  
   }  
   .doubleInput{  
     flex-direction: column;  
   }  
   #fname {  
     border-top-right-radius: .5rem;  
     border-bottom-right-radius: .5rem;  
   }  
   #lname {  
     border-top-left-radius: .5rem;  
     border-bottom-left-radius: .5rem;  
   }  
 } 
Enter fullscreen mode Exit fullscreen mode

Javascript Code

 let menuBtn = document.querySelector(".menuBtn");  
 links = document.querySelector(".links");  
 menuBtn.addEventListener("click", () => {  
      menuBtn.querySelector("i").classList.toggle("fa-xmark");  
      links.classList.toggle("active");  
 });  
 AOS.init();  
Enter fullscreen mode Exit fullscreen mode

Hurray! now you've created a Stunning Portfolio Website😎. You can download files from here after downloading the file if you are facing any kind of problem feel free to ask me in the comment section and you can also contact me via e-mail. Thanks for giving your precious time to read this blog.

Top comments (0)