Checkout Blog for full article blog post
Hello, and welcome to another article where am going to take you through how you can build a great-looking Responsive Portfolio Website with HTML, CSS and JAVASCRIPT. In my preview article, I wrote about how to create a Responsive Ecommerce Website with HTML, CSS and JAVASCRIPT. If you haven't checked it out then do so because it contains a lot of valuable information you don't want to miss.
Now you might be asking what is a Portfolio website and why do you need a Portfolio Website. Wait a minute let me make everything clear to you. Download Images if you want to code along
What is a Portfolio Website
Let’s start by defining what a portfolio website is. A portfolio website provides detailed information about an individual or a company and presents different works of the individual or company.
Below are two portfolio website examples:
1.
2.
From the above two examples, you noticed the similarities based on their functionality and showcase.
Both provide visitors information about the individual and company
Both show the individual's or company's work.
Purpose of a Portfolio Website
The primary purpose of a Portfolio Website is to display great content about the individual or company and also provide basic information in order to get more leads for the company. Also, it provides enough information to potential employers about the individual.
Things Needed:
How to Build a Portfolio Website
Create a new project directory on your computer with any name of your choice. Open the project with a text editor but in my case I’m going to use Visual Studio Code. Now the text editor you use doesn’t affect the final code. You can use any text editor like bracket, atom and so on.
Create an HTML file and within the HTML file let’s create a boilerplate by pressing[Swift and the exclamation sign] simultaneously. Aright, let’s change the title of the portfolio website.
Let’s write down some comments on the CDN links we are going to include in the project. What you must know is in order for the CDN links to work you must be connected to the internet.
It’s now time to bring in all our CDN links, so open your browser and search for cdnjs.com.
What we are going to do is to copy all the CDN css links at the same time and paste them one by one in our HTML using a cool little trick.
Let’s do likewise for the CDN scripts. So go back to the browser and in cdnjs let’s search for the following. Head back to our HTML and paste them
Now let’s include boxicons. In this tutorial we are going to use boxicons instead of font awesome icons. So let’s go back to our browser and search for boxicons.com.
Alright, in our project directory let’s create two new files with the names styles.css and index.js. Now let’s include them in our HTML.
Let’s go to our CSS and write down some reset css and color variables. Am going to copy and paste the colors, you can also copy and paste them from my website. Link will be in the description.
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" />
<!-- Boxicons -->
<link
href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css"
rel="stylesheet"
/>
<!-- AOS -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css"
/>
<!-- Swiper -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.7.0/swiper-bundle.min.css"
/>
<!-- Custom Stylesheet -->
<link rel="stylesheet" href="styles.css" />
<title>My Portfolio Website</title>
</head>
<body>
<!-- Header -->
<header class="header" id="header">
<div class="navigation">
<div class="nav-center d-flex">
<h2 class="logo d-flex">
<span class="color">A.</span>
<span>Alex</span>
</h2>
<ul class="nav-list d-flex">
<li class="nav-item">
<a href="#header" class="nav-link scroll-link">Home</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link scroll-link">About</a>
</li>
<li class="nav-item">
<a href="#services" class="nav-link scroll-link">Services</a>
</li>
<li class="nav-item">
<a href="#portfolio" class="nav-link scroll-link">Portfolio</a>
</li>
<li class="nav-item"><a href="#blog" class="nav-link scroll-link">Blog</a></li>
<li class="nav-item">
<a href="#contact" class="nav-link scroll-link">Contact</a>
</li>
<!-- Theme -->
<li class="nav-item theme-icon">
<i class="bx bx-moon"></i>
</li>
<!-- Close Button -->
<div class="close">
<i class="bx bx-x"></i>
</div>
</ul>
<!-- theme -->
<div class="theme theme-icon">
<i class="bx bx-moon"></i>
</div>
<!-- Hamburger -->
<div class="hamburger">
<i class="bx bx-menu"></i>
</div>
</div>
</div>
<!-- Overlay -->
<div class="overlay"></div>
<!-- Hero Image -->
<img src="./images/hero.png" class="hero-img" alt="" />
<!-- Social Links -->
<div class="socials">
<span class="icon"><i class="bx bxl-instagram"></i></span>
<span class="icon"><i class="bx bxl-facebook"></i></span>
<span class="icon"><i class="bx bxl-github"></i></span>
</div>
<!-- Color Control -->
<div class="control">
<div class="widget d-flex">
<i class="bx bxs-cog"></i>
</div>
<div class="colors">
<span data-id="#ff6174"></span>
<span data-id="#42caff"></span>
<span data-id="#7462e1"></span>
<span data-id="#ff4600"></span>
<span data-id="#ce00ff"></span>
</div>
</div>
<!-- Hero -->
<div class="content">
<span>Hello</span>
<h1>Am Alex a <span id="type1"></span></h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, quis
illum distinctio inventore necessitatibus animi quas aliquid at
aliquam aspernatur.
</p>
<a href="#" class="btn btn-hero">Hire me</a>
</div>
</header>
<!-- About Section -->
<section class="section about" id="about">
<div class="container">
<div class="about-center d-flex">
<div class="col-1" data-aos="fade-right" data-aos-duration="1300">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 600">
<defs>
<style>
.cls-1 {
fill-rule: evenodd;
}
</style>
</defs>
<path
class="cls-1"
d="M348.966,185.028C352.5,133.656,390.75,98.4,408.679,84.919c65.653-49.37,156.979-31.683,212.511,6.147,66.582,45.359,84.381,124.626,87.814,168.6,11.7,149.93-115.48,312.737-230.073,307.349-36.811-1.731-88.125-21.605-104.5-62.348-21.744-54.1,38.923-101.571,32.491-167.725C400.873,274.711,344.529,249.615,348.966,185.028Z"
/>
<img src="./images/about-img.png" alt="">
</svg>
</div>
<div class="col-2" data-aos="fade-left" data-aos-duration="1300">
<div class="title">
<span>Lorem ipsum dolor sit amet.</span>
<h1>About me</h1>
</div>
<h3>A story of Hardwork and Perserverance</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequuntur rem odit nihil odio veniam, incidunt officiis totam fugiat? Perferendis ab maxime aperiam voluptates dolorum, quia temporibus corporis odit ducimus.</p>
<h3>Contact</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit animi quis eaque cumque corrupti quae ab temporibus ullam. Tenetur, quam!</p>
<div class="buttons">
<a href="#" class="btn">Hire me</a>
<a href="#" class="btn outline">Download CV</a>
</div>
</div>
</div>
</div>
</section>
<!-- Services -->
<section class="section services" id="services">
<div class="title">
<span>Lorem ipsum dolor sit amet.</span>
<h1>Services</h1>
</div>
<div class="row container">
<div class="col" data-aos="fade-right" data-aos-duration="1300">
<div class="icon"><i class="bx bx-bulb"></i></div>
<span>103 Project</span>
<h3>UI & UX Design</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis praesentium, dicta adipisci minima rem at quasi expedita eius illum earum.
</p>
</div>
<div class="col" data-aos="fade-up" data-aos-duration="1300">
<div class="icon"><i class="bx bx-layer"></i></div>
<span>106 Project</span>
<h3>Graphic Design</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis praesentium, dicta adipisci minima rem at quasi expedita eius illum earum.
</p>
</div>
<div class="col" data-aos="fade-left" data-aos-duration="1300">
<div class="icon"><i class="bx bx-desktop"></i></div>
<span>109 Project</span>
<h3>Web Design</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis praesentium, dicta adipisci minima rem at quasi expedita eius illum earum.
</p>
</div>
</div>
</section>
<!-- Porfolio -->
<section class="section portfolio" id="portfolio">
<div class="row container">
<div class="title">
<span>Lorem ipsum dolor sit amet.</span>
<h1>Portfolio</h1>
</div>
<div class="filter-btns d-flex">
<span class="active" data-id="all">All</span>
<span data-id="webDesign">Web Design</span>
<span data-id="appDesign">App Design</span>
<span data-id="graphicDesign">Graphic Design</span>
<span data-id="webApps">Web Apps</span>
</div>
</div>
<div class="projects container" data-aos="fade-up" data-aos-duration="1300">
<img data-id="graphicDesign" src="./images/blog.jpg" class="item" alt="">
<img data-id="webDesign" src="./images/web3.jpg" class="item" alt="">
<img data-id="graphicDesign" src="./images/app3.jpg" class="item" alt="">
<img data-id="webDesign" src="./images/web1.jpg" class="item" alt="">
<img data-id="webApps" src="./images/app1.jpg" class="item" alt="">
<img data-id="appDesign" src="./images/app2.jpg" class="item" alt="">
<img data-id="appDesign" src="./images/app1.jpg" class="item" alt="">
</div>
</section>
<!-- Testimonials -->
<section class="section testimonials">
<div class="container test-center">
<div class="left" data-aos="fade-up" data-aos-duration="1300">
<img src="./images/testImg.png" alt="">
</div>
<div class="right right-swiper swiper-container" data-aos="fade-down" data-aos-duration="1300">
<div class="title">
<span>Lorem ipsum dolor sit amet.</span>
<h1>Testimonials</h1>
</div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga excepturi est reprehenderit nisi iure enim nam! Est atque quasi sunt tempora accusantium quas, adipisci fugit facilis aut recusandae dolor maxime doloribus fuga omnis totam eum sapiente a nam dolorem! Adipisci.</p>
<h4>Alexander</h4>
<span>Web Developer</span>
</div>
<div class="swiper-slide">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga excepturi est reprehenderit nisi iure enim nam! Est atque quasi sunt tempora accusantium quas, adipisci fugit facilis aut recusandae dolor maxime doloribus fuga omnis totam eum sapiente a nam dolorem! Adipisci.</p>
<h4>Mariam</h4>
<span>Designer</span>
</div>
<div class="swiper-slide">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga excepturi est reprehenderit nisi iure enim nam! Est atque quasi sunt tempora accusantium quas, adipisci fugit facilis aut recusandae dolor maxime doloribus fuga omnis totam eum sapiente a nam dolorem! Adipisci.</p>
<h4>Brad</h4>
<span>React Developer</span>
</div>
</div>
<div class="swiper-button-prev">
<i class="bx bxs-left-arrow-alt swiper-icon"></i>
</div>
<div class="swiper-button-next">
<i class="bx bxs-right-arrow-alt swiper-icon"></i>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</section>
<!-- Blog -->
<section class="section blog" id="blog">
<div class="title">
<span>Lorem ipsum dolor sit amet.</span>
<h1>Blog</h1>
</div>
<div class="row container">
<div class="col" data-aos="fade-right" data-aos-duration="1300">
<img src="./images/blog1.jpg" alt="">
<h3>UI & UX new Designer Trend 2021</h3>
<p>Lorem ipsum dolor sit amet.</p>
<a href="">Read more</a>
</div>
<div class="col" data-aos="fade-down" data-aos-duration="1300">
<img src="./images/blog2.jpg" alt="">
<h3>Best drone for your next video</h3>
<p>Lorem ipsum dolor sit amet.</p>
<a href="">Read more</a>
</div>
<div class="col" data-aos="fade-left" data-aos-duration="1300">
<img src="./images/blog3.jpg" alt="">
<h3>Best Hosting Providers 2021</h3>
<p>Lorem ipsum dolor sit amet.</p>
<a href="">Read more</a>
</div>
</div>
</section>
<!-- Contact -->
<div class="contact-upper" id="contact">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 319"><path fill-opacity="1" d="M0,160L48,165.3C96,171,192,181,288,186.7C384,192,480,192,576,165.3C672,139,768,85,864,58.7C960,32,1056,32,1152,53.3C1248,75,1344,117,1392,138.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
</div>
<section class="section contact">
<div class="title">
<span>Lorem ipsum dolor sit amet.</span>
<h1>Contact me</h1>
</div>
<div class="contact-center container">
<div class="left" data-aos="fade-right" data-aos-duration="1300">
<form class="form">
<h2>Message me</h2>
<div>
<input type="text" placeholder="Name" required>
<input type="email" placeholder="Email" required>
</div>
<textarea name="message" cols="10" rows="10" placeholder="Describe Project"></textarea>
<button type="submit" class="btn btn-form">Send message</button>
</form>
</div>
<div class="right" data-aos="fade-left" data-aos-duration="1300">
<div>
<span class="icon"><i class="bx bx-user"></i></span>
<span class="content">
<h3>Name</h3>
<span>John Smith</span>
</span>
</div>
<div>
<span class="icon"><i class="bx bx-map"></i></span>
<span class="content">
<h3>Address</h3>
<span>United States</span>
</span>
</div>
<div>
<span class="icon"><i class="bx bx-envelope"></i></span>
<span class="content">
<h3>Email</h3>
<span>youtube@gmail.com</span>
</span>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<p>@copyright 2021 Edem</p>
</footer>
<!-- Swiper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.7.0/swiper-bundle.min.js"></script>
<!-- AOS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<!-- Typeit -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/7.0.4/typeit.min.js"></script>
<!-- Custom Script -->
<script src="index.js"></script>
</body>
</html>```
### CSS
```scss
/* Reset CSS */
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: inherit;
}
:root {
--blueColor-1: #7462e1;
--blueColor-2: #3641b7;
--blueColor-3: #42caff;
--orange: #ff4600;
--purple: #ce00ff;
--greenColor: #ccffab;
--pinkColor: #ff6174;
--borderColor: #eeefff;
--black: #121713;
--grey: #232424;
--grey2: #494646;
--white: #fff;
--customColor: #42caff;
--transition-1: all 300ms ease-in-out;
--transition-2: all 500ms ease-in-out;
}
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");
html {
box-sizing: border-box;
scroll-behavior: smooth;
font-size: 62.5%; /*1.6rem = 16px*/
}
body {
font-family: "Open Sans", sans-serif;
font-size: 1.6rem;
font-weight: 400;
background-color: var(--white);
color: var(--black);
transition: var(--transition-2);
}
body.dark {
--white: #000106;
--black: #fff;
--grey: #fff;
--grey2: #fff;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
i {
transition: var(--transition-2);
}
img {
width: 100%;
}
.container {
max-width: 99.6rem;
margin: 0 auto;
}
.d-flex {
display: flex;
align-items: center;
}
/* Header */
.header {
min-height: 100vh;
width: 100%;
position: relative;
overflow: hidden;
}
.navigation {
padding: 1.5rem 3rem;
}
.nav-center {
max-width: 114rem;
margin: 0 auto;
justify-content: space-between;
}
.logo {
cursor: pointer;
}
.logo span.color {
background-color: var(--customColor);
color: white;
padding: 1rem 1.2rem;
margin-right: 0.7rem;
border-radius: 1rem;
transition: var(--transition-2);
}
.nav-item:not(:last-child) {
margin-right: 0.5rem;
}
.nav-item.theme-icon {
font-size: 2.5rem;
cursor: pointer;
}
.nav-link:link,
.nav-link:visited {
display: inline-block;
padding: 1rem;
transition: var(--transition-1);
}
.nav-link:hover {
color: var(--customColor);
}
.theme,
.close,
.hamburger {
display: none;
font-size: 3rem;
cursor: pointer;
}
.navigation.fix-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
z-index: 99999;
background-color: var(--customColor);
transition: var(--transition-2);
}
.navigation.fix-nav .logo span.color {
background-color: #fff;
color: #000;
}
.navigation.fix-nav .nav-link:hover {
color: white;
}
@media (max-width: 768px) {
.header {
min-height: 80vh;
}
.nav-list {
flex-direction: column;
align-items: flex-start;
position: fixed;
top: 0;
left: -100%;
height: 100%;
width: 0%;
max-width: 35rem;
padding-top: 3rem;
background-color: var(--black);
transition: var(--transition-2);
z-index: 999;
}
.nav-list.open {
left: 0;
width: 100%;
}
.logo {
font-size: 2rem;
}
.nav-item {
margin: 0 0 0.5rem;
}
.nav-item.theme-icon {
display: none;
}
.nav-link {
padding: 1rem 0;
color: var(--white);
font-size: 1.8rem;
}
.hamburger,
.theme,
.close {
display: block;
}
.close {
position: absolute;
top: 2%;
right: 5%;
color: var(--white);
}
}
.overlay {
position: absolute;
width: 100rem;
height: 100rem;
border-radius: 50%;
right: -20%;
bottom: -70%;
background-color: var(--customColor);
transition: var(--transition-2);
z-index: -1;
}
.hero-img {
position: absolute;
right: -10%;
bottom: -35%;
z-index: -1;
}
@media (max-width: 996px) {
.overlay {
width: 70rem;
height: 70rem;
right: -20%;
bottom: -40%;
}
.hero-img {
right: -20%;
bottom: -20%;
}
}
@media (max-width: 768px) {
.hero-img {
bottom: -5%;
}
}
@media (max-width: 567px) {
.header {
min-height: 100vh;
}
.overlay {
width: 55rem;
height: 55rem;
right: 0;
bottom: -40%;
}
.hero-img {
right: -30%;
bottom: 0%;
width: 60rem;
}
}
/* Social Links */
.socials {
position: absolute;
bottom: 5%;
left: 10%;
}
.socials span {
font-size: 3rem;
color: var(--grey2);
cursor: pointer;
}
.socials span:hover i {
color: var(--customColor);
transition: var(--transition-1);
}
@media (max-width: 768px) {
.socials {
display: none;
}
}
/* Color Control */
.control {
position: fixed;
right: -4rem;
top: 15%;
transition: var(--transition-1);
z-index: 1000;
}
.control.open {
right: 0;
}
.control .widget {
position: absolute;
left: -3.7rem;
border-radius: 1rem 0 0 1rem;
padding: 0.5rem 0.7rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
cursor: pointer;
background-color: #fff;
}
.control .widget i {
font-size: 2.3rem;
animation: spin 2s linear infinite;
color: #121713;
}
@keyframes spin {
0% {
tranform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.control .colors {
background-color: #fff;
padding: 1rem 0.8rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.control .colors span {
display: block;
width: 1.9rem;
height: 1.9rem;
padding: 0.7rem;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.control .colors span:not(:last-child) {
margin-bottom: 0.7rem;
}
.control .colors span:nth-child(1) {
background-color: var(--pinkColor);
}
.control .colors span:nth-child(2) {
background-color: var(--blueColor-3);
}
.control .colors span:nth-child(3) {
background-color: var(--blueColor-1);
}
.control .colors span:nth-child(4) {
background-color: var(--orange);
}
.control .colors span:nth-child(5) {
background-color: var(--purple);
}
/* Hero */
.header .content {
position: absolute;
top: 35%;
left: 8%;
}
.header .content span {
color: var(--grey);
transition: var(--transition-2);
}
.header .content h1 {
font-size: 5rem;
font-weight: 700;
}
.header .content h1 span {
color: var(--customColor);
transition: var(--transition-2);
}
.header .content p {
color: var(--grey);
width: 60%;
margin-top: 1rem;
transition: var(--transition-2);
}
.btn {
display: inline-block;
padding: 1.2rem 4rem;
border-radius: 1rem;
background-color: var(--customColor);
color: white;
border: 2px solid transparent;
transition: var(--transition-1);
}
.btn.outline {
margin-left: 1rem;
color: var(--black);
background-color: transparent;
border: 2px solid var(--customColor);
}
.btn:hover {
background-color: transparent;
border: 2px solid var(--customColor);
color: var(--black);
}
.btn.outline:hover {
background-color: var(--customColor);
color: var(--white);
}
.btn-hero {
margin-top: 3rem;
}
@media (max-width: 768px) {
.header .content {
top: 25%;
left: 5%;
}
.header .content span {
font-size: 1.5rem;
}
.header .content h1 {
font-size: 4rem;
}
.header .content h1 span {
font-size: 4rem;
}
.header .content .btn {
padding: 0.8rem 3rem;
}
}
@media (max-width: 567px) {
.header .content {
top: 15%;
}
.header .content h1 {
font-size: 3rem;
}
.header .content p {
font-size: 1.5rem;
width: 90%;
}
.header .content h1 span {
font-size: 3rem;
}
.header .content .btn-hero {
margin-top: 2rem;
}
}
/* About */
.section {
padding: 10rem 3rem 5rem;
overflow: hidden;
}
.title {
margin-bottom: 5rem;
text-align: center;
}
.title span {
font-size: 1.4rem;
}
.title h1 {
font-size: 4rem;
color: var(--customColor);
transition: var(--transition-2);
}
.col-1 {
position: relative;
flex: 0 0 50%;
height: 50rem;
}
.col-1 svg {
position: absolute;
width: 85rem;
bottom: -4%;
left: -40%;
fill: var(--customColor);
transition: var(--transition-2);
z-index: -1;
}
.col-1 img {
position: absolute;
bottom: -4%;
left: -40%;
transition: var(--transition-2);
width: 85rem;
z-index: 0;
}
.col-2 {
flex: 0 0 50%;
}
.col-2 .title {
text-align: left;
margin-bottom: 2rem;
}
.col-2 p {
color: var(--grey2);
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
.col-2 .buttons {
margin-top: 3rem;
}
@media (max-width: 768px) {
.about .about-center {
flex-direction: column;
}
.col-1 svg {
position: relative;
bottom: -4%;
left: -3%;
}
.col-1 img {
position: absolute;
bottom: 1%;
left: -3%;
}
}
@media (max-width: 567px) {
.btn-outline {
margin: 1rem 0 0 0;
}
.col-1 img {
bottom: -3%;
}
}
/* Services */
.section .row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap: 5rem;
}
.services .row .col {
padding: 1.5rem 1rem;
border-radius: 1rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
transition: var(--transition-2);
border: 3px solid transparent;
cursor: pointer;
}
body.dark .services .row .col {
border-color: var(--customColor);
}
.services .row .col .icon {
font-size: 6rem;
color: var(--customColor);
}
.services .row span {
font-size: 1.3rem;
color: var(--grey2);
}
.services .row h3 {
margin: 0.4rem 0 1rem;
}
.services .row p {
font-size: 1.5rem;
color: var(--grey2);
margin-bottom: 1rem;
}
.services .row .col:hover {
background-color: var(--customColor);
}
body.dark .services .row .col:hover .icon {
color: white;
}
.services .row .col:hover .icon,
.services .row .col:hover p,
.services .row .col:hover h3,
.services .row .col:hover span {
transition: var(--transition-2);
color: white;
}
.services .row .col:hover .icon {
transition: var(--transition-1);
}
/* Porfolio */
.portfolio .row {
/* display: grid; */
grid-template-columns: 1fr 1.6fr;
}
.portfolio .title {
text-align: left;
}
.portfolio .filter-btns {
position: relative;
}
.portfolio .filter-btns::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--customColor);
opacity: 0.2;
z-index: -1;
}
.portfolio .filter-btns span {
margin-right: 0.5rem;
padding: 1rem;
cursor: pointer;
transition: var(--transition-1);
border-bottom: 2px solid transparent;
}
.portfolio .filter-btns span:hover {
color: var(--customColor);
}
.portfolio .filter-btns span.active {
border-color: var(--customColor);
color: var(--customColor);
}
.portfolio .projects {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
margin-top: 3rem;
}
.portfolio .projects .item.hide {
display: none;
}
.portfolio .projects .item.active {
display: block;
}
@media (max-width: 996px) {
.portfolio .row {
grid-template-columns: 1fr;
text-align: center;
}
.portfolio .title {
margin-bottom: 0;
text-align: center;
}
.projects .filter-btns {
padding: 1.5rem 0;
margin-bottom: 2rem;
}
.portfolio .projects {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 597px) {
.portfolio .filter-btns {
align-items: flex-start;
}
.portfolio .filter-btns span {
font-size: 1.5rem;
display: inherit;
margin-right: 0rem;
padding: 0.5rem;
}
.portfolio .projects {
grid-template-columns: 1fr;
}
}
/* Testimonials */
.test-center {
display: grid;
grid-template-columns: 0.8fr 1.3fr;
gap: 5rem;
}
section.testimonials .title {
text-align: left;
}
.testimonials .swiper-container {
max-width: 50rem;
}
.testimonials .left {
text-align: center;
}
.testimonials .right {
position: relative;
}
.testimonials .right p {
margin-bottom: 1rem;
font-size: 1.5rem;
color: var(--grey2);
}
.testimonials .right h1 ~ span {
font-size: 1.5rem;
color: var(--grey2);
}
.testimonials .right h4 {
margin-bottom: 0.5rem;
font-weight: 600;
}
.swiper-button-next::after,
.swiper-button-prev::after {
content: "";
}
.swiper-icon {
font-size: 5rem;
color: var(--customColor);
}
.swiper-button-next,
.swiper-button-prev {
top: 20%;
}
.swiper-button-prev {
left: 80%;
}
@media (max-width: 996px) {
.test-center {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.testimonials .left img {
width: 70%;
}
}
@media (max-width: 567px) {
.testimonials .right p {
width: 100%;
}
.testimonials .swiper-container {
max-width: 33rem;
}
.swiper-button-next,
.swiper-button-prev {
top: 30%;
}
.swiper-button-prev {
left: 55%;
}
.swiper-button-next {
right: 60px;
}
}
/* Blog */
.blog .col .img {
border-radius: 1rem;
}
.blog .col h3 {
font-size: 2rem;
height: 5rem;
margin: 0.5rem 0;
}
.blog .col p {
font-size: 1.5rem;
}
.blog .col a {
display: inline-block;
font-size: 1.5rem;
background-color: var(--customColor);
color: white;
padding: 0.7rem 1.5rem;
border-radius: 0.5rem;
margin-top: 1rem;
transition: var(--transition-2);
}
/* Contact */
.contact-upper {
margin-bottom: -2%;
}
.contact-upper svg {
fill: var(--customColor);
transition: var(--transition-2);
}
.section.contact {
padding: 0rem 0 5rem;
background-color: var(--customColor);
transition: var(--transition-2);
}
.section.contact .title h1 {
color: white;
}
.contact-center {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
color: white;
padding: 0 3rem;
}
.form h2 {
font-size: 2rem;
margin-bottom: 1rem;
}
.form input,
.form textarea {
font-family: "Open Sans", sans-serif;
font-size: 1.6rem;
padding: 1rem 0;
text-indent: 1rem;
border: none;
border-bottom: 1px solid #ccc;
color: white;
background-color: transparent;
border-right: 0.5rem;
margin-bottom: 1rem;
width: 100%;
outline: none;
}
.form .left div {
display: flex;
}
.form textarea {
width: 100%;
resize: vertical;
margin-bottom: 2rem;
height: 10rem;
}
.form .btn-form {
background-color: white;
color: var(--customColor);
transition: var(--transition-2);
font-size: 1.6rem;
font-weight: 500;
cursor: pointer;
}
.contact .right {
background-color: white;
padding: 2rem;
display: flex;
justify-content: center;
flex-direction: column;
border-radius: 1rem;
}
.contact .right div {
display: flex;
align-items: center;
color: #212121;
}
.contact .right div .content h3 {
font-size: 1.6rem;
}
.contact .right div .content span {
font-size: 1.5rem;
}
.contact .right div:not(:last-child) {
margin-bottom: 2rem;
}
.contact .right .icon {
font-size: 2.7rem;
color: var(--customColor);
margin-right: 2rem;
padding: 1rem 1.5rem;
position: relative;
}
.contact .right .icon::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--customColor);
opacity: 0.2;
}
@media (max-width: 768px) {
.contact-center {
grid-template-columns: 1fr;
}
.contact-center .right {
text-align: left;
}
}
/* Footer */
footer {
background-color: var(--customColor);
color: #fff;
padding: 3rem 0;
text-align: center;
border-top: 1px solid var(--borderColor);
transition: var(--transition-2);
}
JAVASCRIPT
// Toggle Navigation
const hamburger = document.querySelector(".hamburger");
const close = document.querySelector(".close");
const navList = document.querySelector(".nav-list");
hamburger.addEventListener("click", () => {
navList.classList.add("open");
});
close.addEventListener("click", () => {
navList.classList.remove("open");
});
// theme
const icons = [...document.querySelectorAll(".theme-icon")];
icons.forEach((icon) => {
if (icon) {
icon.addEventListener("click", () => {
document.body.classList.toggle("dark");
if (document.body.classList.contains("dark")) {
icon.innerHTML = '<i class="bx bx-sun"></i>';
icon.style.color = "white";
} else {
icon.innerHTML = '<i class="bx bx-moon"></i>';
icon.style.color = "#121713";
}
});
}
});
// Colors
const widget = document.querySelector(".widget");
const control = document.querySelector(".control");
widget.addEventListener("click", () => {
control.classList.toggle("open");
});
const colors = [...document.querySelectorAll(".colors span")];
document.querySelector(":root").style.setProperty("--customColor", "#42caff");
colors.forEach((color) => {
color.addEventListener("click", () => {
const currentColor = color.dataset.id;
document
.querySelector(":root")
.style.setProperty("--customColor", currentColor);
});
});
window.addEventListener("scroll", () => {
control.classList.remove("open");
});
// Typeit
new TypeIt("#type1", {
speed: 120,
loop: true,
waitUntilVisible: true,
})
.type("Designer", { delay: 400 })
.pause(500)
.delete(9)
.type("Developer")
.pause(500)
.delete(9)
.go();
// Fix Nav
const navBar = document.querySelector(".navigation");
const navHeight = navBar.getBoundingClientRect().height;
window.addEventListener("scroll", () => {
const scrollHeight = window.pageYOffset;
if (scrollHeight > navHeight) {
navBar.classList.add("fix-nav");
} else {
navBar.classList.remove("fix-nav");
}
});
// Filter Projects
const filterBtn = document.querySelector(".filter-btns");
const spans = [...document.querySelectorAll(".filter-btns span")];
const items = [...document.querySelectorAll(".projects .item")];
filterBtn.addEventListener("click", (e) => {
const filter = e.target.closest("span");
if (!filter) return;
const id = filter.dataset.id;
spans.forEach((span) => span.classList.remove("active"));
filter.classList.add("active");
items.forEach((item) => {
item.classList.add("hide");
item.classList.remove("active");
const targetId = item.dataset.id;
if (targetId === id) {
item.classList.remove("hide");
item.classList.add("active");
} else if (id === "all") {
item.classList.remove("hide");
}
});
});
// Swiper
const swiper = new Swiper(".right-swiper", {
cssMode: true,
loop: true,
slidesPerView: 1,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
// Scroll To
const links = [...document.querySelectorAll(".scroll-link")];
links.map((link) => {
link.addEventListener("click", (e) => {
e.preventDefault();
const id = e.target.getAttribute("href").slice(1);
const element = document.getElementById(id);
let position = element.offsetTop - navHeight;
window.scrollTo({
top: position,
left: 0,
});
navList.classList.remove("open");
});
});
AOS.init();
Top comments (0)