🔥🤯Hey, developers welcome to Day 90 of our 90Days 90Projects challenge. And today in this challenge we are going to Create an Animated Portfolio Website Template using HTML CSS and JavaScript
So to run this code you just need to copy the HTML and CSS code and run it into your code Editor.
Preview
Image: Download Now
HTML Code
index.html
<!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> Animated Portfolio </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<h2 class="heading">
<span class="skyBlue">My</span>
<span>Portfolio.</span>
</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Tesimonials</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="hamburger" id="menuBar">
<li><i class="fa-solid fa-bars"></i></li>
</ul>
<div class="lists" id="menuLists">
<li id="cross"><i class="fa-solid fa-xmark"></i></li>
<ul class="items">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Tesimonials</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<section class="mainSection">
<div class="content">
<h2 class="title">
<span class="minorHeading">
Hey
</span><br>
<span class="mainHeading">
I'm <span class="danger">Raju |</span>
</span>
</h2>
<p class="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, maxime earum. Ratione repudiandae
officia odit? Praesentium id ullam, laborum sapiente culpa vero, perspiciatis tenetur facilis dolore sed
possimus.
</p>
<div class="buttons">
<button class="hireBtn">Hire Me</button>
<button class="chat"><i class="fa-brands fa-rocketchat"></i>Let's talk</button>
</div>
<div class="social">
<li><i class="fa-brands fa-instagram"></i></li>
<li><i class="fa-brands fa-linkedin"></i></li>
<li><i class="fa-brands fa-twitter"></i></li>
<li><i class="fa-brands fa-facebook"></i></li>
</div>
</div>
<div class="user">
<img src="/portfolioUser.png" alt="">
</div>
</section>
</body>
<script src="script.js"></script>
</html>
CSS Code
style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&family=Ubuntu:wght@400;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
}
.navbar {
display: flex;
justify-content: space-between;
padding: 10px 30px;
align-items: center;
}
.navbar span {
font-family: 'Ubuntu', sans-serif;
font-weight: 700;
}
.skyBlue {
color: rgb(15, 136, 184);
}
.navbar ul {
display: flex;
list-style: none;
}
.navbar .hamburger {
display: none;
}
.lists {
display: none;
}
.navbar ul li a {
text-decoration: none;
color: #000;
font-family: 'Poppins', sans-serif;
padding: 10px 20px;
margin: 0 5px;
}
.navbar ul li a:hover {
text-shadow: 0 0 20px rgb(15, 136, 184);
}
.mainSection {
display: grid;
padding: 10px 30px;
grid-template-columns: 1fr 1fr;
}
.minorHeading {
font-family: 'Poppins', sans-serif;
color: rgb(111, 112, 112);
font-weight: 400;
font-size: 18px;
}
.mainHeading {
font-size: 50px;
}
.danger {
color: red;
}
.description {
margin: 20px 0;
font-family: 'Poppins', sans-serif;
}
.buttons {
display: flex;
}
.hireBtn {
display: inline;
cursor: pointer;
z-index: 200;
background-color: #fff;
border: 2px solid rgb(15, 136, 184);
font-family: 'Poppins', sans-serif;
padding: 10px 20px;
margin-right: 20px;
}
.hireBtn:hover {
animation: bgColor;
animation-iteration-count: 1;
animation-duration: 1s;
animation-fill-mode: both;
}
@keyframes bgColor {
from {
background-color: #fff;
}
to {
background-color: rgb(15, 136, 184);
color: #fff;
}
}
.chat {
background: transparent;
border: none;
cursor: pointer;
font-size: 16px;
}
.chat i {
color: orangered;
margin-right: 5px;
}
.social {
display: grid;
grid-template-columns: 40px 40px 40px 40px;
list-style: none;
margin-top: 20px;
font-size: 20px;
}
.social li {
cursor: pointer;
transition: all 0.2s;
}
.social li:hover {
color: rgb(15, 136, 184);
transform: scale(1.12);
}
.user img {
animation-name: move;
animation-duration: 3s;
animation-iteration-count: infinite;
cursor: pointer;
animation-direction: alternate;
}
.user img:hover {
animation-play-state: paused;
}
@keyframes move {
from {
transform: translateX(0px);
}
to {
transform: translateX(30px);
}
}
@media screen and (max-width:865px) {
.mainSection {
grid-template-columns: 1fr;
}
.content {
order: 2;
}
.user img {
width: 95%;
order: 1;
}
}
@media screen and (max-width:810px) {
.navbar ul {
display: none;
}
.navbar .hamburger {
display: block;
font-size: 25px;
color: rgb(15, 136, 184);
cursor: pointer;
}
.navbar .lists ul {
display: block;
}
.navbar .lists {
display: block;
top: 0;
background-color: rgb(15, 136, 184);
width: 50%;
z-index: 200;
padding: 15px 10px;
position: absolute;
right: -100%;
transition: all 1s;
}
.navbar ul li a {
color: #fff;
}
.navbar .items li {
transition: all 0.3s;
}
.navbar .items li:hover {
transform: translateX(10px);
}
.navbar .items li a:hover {
text-shadow: 0 0 5px black;
}
#cross {
display: block;
margin-left: 20px;
margin-top: 10px;
color: #fff;
cursor: pointer;
font-size: 25px;
list-style: none;
}
#menuLists.active {
right: 0;
}
.navbar .lists ul li {
margin: 20px 0;
}
}
JavaScript
script.js
const menu = document.getElementById('menuBar');
const lists = document.getElementById('menuLists');
const crossBtn = document.getElementById('cross');
menu.addEventListener('click', () => {
lists.classList.toggle('active');
});
crossBtn.addEventListener('click', () => {
lists.classList.remove('active');
});
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
