Building a Stunning Portfolio Website with HTML and CSS
Ashutosh Tiwari
Posted on February 17, 2024
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:
- 404 Not Found Page
- Custom Select Input with search option
- Create sign up & sign in form with validation
- Create a Weather App with HTML, CSS, and JavaScript
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>
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;
}
}
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();
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.
💖 💪 🙅 🚩
Ashutosh Tiwari
Posted on February 17, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
