<header class="header">
<img src="images/logo.png" alt="our main logo" class="logo" />
<nav class="navbar">
<ul class="navbar-lists">
<li><a href="/home.html" class="navbar-link home-link">Home</a></li>
<li>
<a href="/about.html" class="navbar-link about-link">About</a>
</li>
<li>
<a class="navbar-link service-link" href="/service.html"
>Services</a
>
</li>
<li>
<a class="navbar-link portfolio-link" href="#portfolio"
>Portfolio</a
>
</li>
<li>
<a class="navbar-link contact-link" href="/contact.html">Contact</a>
</li>
</ul>
</nav>
<div class="mobile-navbar-btn">
<ion-icon name="menu-outline" class="mobile-nav-icon"></ion-icon>
<ion-icon name="close-outline" class="mobile-nav-icon"></ion-icon>
</div>
</header>
<!-- ========================================
Our Main Hero Section Start
======================================== -->
<main>
<section class="section-hero section">
<div class="container grid grid-two-column">
<div class="section-hero-data">
<p class="hero-top-data">this is me</p>
<h1 class="hero-heading">thapa technical</h1>
<p class="hero-para">
I'm vinod bahadur thapa. A Full stack Developer, youtuber and
freelancer. A Full stack Developer, youtuber and freelancer.
</p>
<div>
<a href="#" class="btn hireme-btn">Hire me</a>
</div>
</div>
<!-- hero section right side -->
<div class="section-hero-image">
<picture>
<source srcset="images/hero.webp" type="image/webp" />
<source srcset="images/hero-min.jpg" type="image/jpg" />
<img
src="images/hero-min.jpg"
alt="this is me thapa technical"
class="hero-img"
/>
</picture>
</div>
</div>
</section>
</main>
<!-- ========================================
Our Bio-Data Section Start
======================================== -->
<section class="section-biodata section">
<div class="container grid grid-two-column">
<div class="bio-image">
<img src="images/biodata.jpg" alt="my bio data image" />
</div>
<!-- bio right side data -->
<div class="bio-data">
<h2 class="common-heading">my bio-data</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
natus eum quibusdam, blanditiis nobis dolor distinctio asperiores
itaque voluptas nesciunt cum dolorum. Quidem sed id repellat facere
</p>
<br />
<p>
itaque voluptas nesciunt cum dolorum. Quidem sed id repellat facere
quod placeat praesentium.
</p>
<div class="bio-data-stats">
<div class="bio-stats">
<h3>Design</h3>
<div class="bio-progress-bar">
<span>80%</span>
</div>
</div>
<div class="bio-stats">
<h3>HTML</h3>
<div class="bio-progress-bar bio-progress-2">
<span>99%</span>
</div>
</div>
<div class="bio-stats">
<h3>CSS</h3>
<div class="bio-progress-bar bio-progress-3">
<span>90%</span>
</div>
</div>
<div class="bio-stats">
<h3>JavaScript</h3>
<div class="bio-progress-bar bio-progress-4">
<span>85%</span>
</div>
</div>
<div class="bio-stats">
<h3>MERN</h3>
<div class="bio-progress-bar bio-progress-5">
<span>70%</span>
</div>
</div>
</div>
<div class="bio-data-btn">
<a href="#" class="btn">Download CV</a>
</div>
</div>
</div>
</section>
<!-- ========================================
Our portfolio Section Start
======================================== -->
<section class="section section-portfolio" id="portfolio-section">
<div class="container">
<h2 class="common-heading">Latest Works</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem ex
eos commodi provident tempore possimus, mollitia vero quas.
</p>
</div>
<div class="p-btns">
<div class="btn p-btn" data-btn-num="1">Website</div>
<div class="btn p-btn" data-btn-num="2">Youtube</div>
<div class="btn p-btn" data-btn-num="3">Design</div>
</div>
<div class="container grid grid-three-column portfolio-images">
<div class="img-overlay p-btn--1">
<img src="images/folio/1.jpg" alt="my works" />
<div class="overlay">
<a
href="http://charcounter.thapaonlineclass.com/"
target="_thapa"
class="common-heading"
>Project 1</a
>
</div>
</div>
<div class="img-overlay p-btn--3">
<img src="images/folio/4.jpg" alt="my works" />
<div class="overlay">
<a
href="http://charcounter.thapaonlineclass.com/"
target="_thapa"
class="common-heading"
>Project 2
</a>
</div>
</div>
<div class="img-overlay p-btn--1">
<img src="images/folio/3.jpg" alt="portfolio images " />
<div class="overlay">
<a href="" target="_blank" class="common-heading">Project 3</a>
</div>
</div>
<div class="img-overlay p-btn--1 p-btn--2">
<img src="images/folio/4.jpg" alt="portfolio images " />
<div class="overlay">
<a href="" target="_blank" class="common-heading">Project 4</a>
</div>
</div>
<div class="img-overlay p-btn--2">
<img src="images/folio/5.jpg" alt="portfolio images " />
<div class="overlay">
<a href="" target="_blank" class="common-heading">Project 5</a>
</div>
</div>
<div class="img-overlay p-btn--1">
<img src="images/folio/1.jpg" alt="portfolio images " />
<div class="overlay">
<a href="" target="_blank" class="common-heading">Project 6</a>
</div>
</div>
</div>
</section>
<!-- ========================================
Our work counter Section Start
======================================== -->
<section class="section section-work-data">
<div class="container grid grid-four-column">
<div>
<h2 class="counter-numbers" data-number="2000">0+</h2>
<p>project completed</p>
</div>
<div>
<h2 class="counter-numbers" data-number="6000">0+</h2>
<p>Happy Clients</p>
</div>
<div>
<h2 class="counter-numbers" data-number="5000">0+</h2>
<p>cups of coffee</p>
</div>
<div>
<h2 class="counter-numbers" data-number="3000">0+</h2>
<p>real professionals</p>
</div>
</div>
</section>
<!-- ========================================
Our Services Section Start
======================================== -->
<section class="section section-services">
<div class="container">
<h2 class="common-heading">Services Offers</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem ex
dolores tempore possimus, mollitia vero quas
</p>
</div>
<!-- services offers card -->
<div class="container grid grid-three-column">
<div class="service-box">
<ion-icon name="desktop-sharp" class="service-icon"></ion-icon>
<h3>Web Design</h3>
<p>
“It is not because things are difficult that we do not dare; it is
because we do not dare that they are difficult.”
</p>
</div>
<div class="service-box">
<ion-icon name="logo-react" class="service-icon"></ion-icon>
<h3>web development</h3>
<p>
“It is not because things are difficult that we do not dare; it is
because we do not dare that they are difficult.”
</p>
</div>
<div class="service-box">
<!-- <ion-icon name="camera-sharp" class="service-icon"></ion-icon> -->
<ion-icon name="camera-outline" class="service-icon"></ion-icon>
<h3>photography</h3>
<p>
“It is not because things are difficult that we do not dare; it is
because we do not dare that they are difficult.”
</p>
</div>
<div class="service-box">
<ion-icon name="phone-portrait-sharp" class="service-icon"></ion-icon>
<h3>Mobile Apps</h3>
<p>
“It is not because things are difficult that we do not dare; it is
because we do not dare that they are difficult.”
</p>
</div>
<div class="service-box">
<ion-icon name="globe-sharp" class="service-icon"></ion-icon>
<h3>apps interface</h3>
<p>
“It is not because things are difficult that we do not dare; it is
because we do not dare that they are difficult.”
</p>
</div>
<div class="service-box">
<ion-icon name="images-sharp" class="service-icon"></ion-icon>
<h3>graphic design</h3>
<p>
“It is not because things are difficult that we do not dare; it is
because we do not dare that they are difficult.”
</p>
</div>
</div>
</section>
<!-- ========================================
Our Resume Section Start
======================================== -->
<section class="section section-resume">
<div class="container grid grid-two-column">
<!-- resume left side -->
<div class="resume-img">
<img
class="lazy-img"
src="images/lazy1.jpg"
data-src="images/biodata.jpg"
alt="resume image"
loading="lazy"
/>
</div>
<!-- resume right side -->
<div class="resume-data">
<h2 class="common-heading">resume</h2>
<p class="resume-para">My Work Experience</p>
<div class="resume-data-subsection">
<div class="resume-data-left">
<h3>Online educator on Youtuber</h3>
<div class="grid grid-two-column">
<p>
<ion-icon name="business-outline"></ion-icon> ThapaTechnical,
Inc.
</p>
<p><ion-icon name="location-outline"></ion-icon> Pune, India</p>
</div>
</div>
<div class="resume-data-right">
<p class="resume-data-button">fulltime</p>
<p>
<ion-icon name="calendar-outline"></ion-icon>
<span>April 2018 - Present </span>
</p>
</div>
</div>
<!-- end -->
<div class="resume-data-subsection">
<div class="resume-data-left">
<h3>Online educator on Youtuber</h3>
<div class="grid grid-two-column">
<p>
<ion-icon name="business-outline"></ion-icon> ThapaTechnical,
Inc.
</p>
<p><ion-icon name="location-outline"></ion-icon> Pune, India</p>
</div>
</div>
<div class="resume-data-right">
<p class="resume-data-button">fulltime</p>
<p>
<ion-icon name="calendar-outline"></ion-icon>
<span>April 2018 - Present </span>
</p>
</div>
</div>
<!-- end -->
<div class="resume-data-subsection">
<div class="resume-data-left">
<h3>Online educator on Youtuber</h3>
<div class="grid grid-two-column">
<p>
<ion-icon name="business-outline"></ion-icon> ThapaTechnical,
Inc.
</p>
<p><ion-icon name="location-outline"></ion-icon> Pune, India</p>
</div>
</div>
<div class="resume-data-right">
<p class="resume-data-button">fulltime</p>
<p>
<ion-icon name="calendar-outline"></ion-icon>
<span>April 2018 - Present </span>
</p>
</div>
</div>
<!-- end -->
<div class="resume-data-subsection">
<div class="resume-data-left">
<h3>Online educator on Youtuber</h3>
<div class="grid grid-two-column">
<p>
<ion-icon name="business-outline"></ion-icon> ThapaTechnical,
Inc.
</p>
<p><ion-icon name="location-outline"></ion-icon> Pune, India</p>
</div>
</div>
<div class="resume-data-right">
<p class="resume-data-button">fulltime</p>
<p>
<ion-icon name="calendar-outline"></ion-icon>
<span>April 2018 - Present </span>
</p>
</div>
</div>
<!-- end -->
<div class="resume-data-bottom-subsection">
<p class="resume-para">Education</p>
<div class="resume-data-subsection margin-small">
<div class="resume-data-left">
<h3>Online educator on Youtuber</h3>
<div class="grid grid-two-column">
<p>
<ion-icon name="business-outline"></ion-icon>
ThapaTechnical, Inc.
</p>
<p>
<ion-icon name="location-outline"></ion-icon> Pune, India
</p>
</div>
</div>
<div class="resume-data-right">
<p class="resume-data-button">Master</p>
<p>
<ion-icon name="calendar-outline"></ion-icon>
<span>April 2018 - Present </span>
</p>
</div>
</div>
<!-- end -->
<div class="resume-data-subsection margin-small">
<div class="resume-data-left">
<h3>Online educator on Youtuber</h3>
<div class="grid grid-two-column">
<p>
<ion-icon name="business-outline"></ion-icon>
ThapaTechnical, Inc.
</p>
<p>
<ion-icon name="location-outline"></ion-icon> Pune, India
</p>
</div>
</div>
<div class="resume-data-right">
<p class="resume-data-button">Bachelor</p>
<p>
<ion-icon name="calendar-outline"></ion-icon>
<span>April 2018 - Present </span>
</p>
</div>
</div>
<!-- end -->
</div>
</div>
</div>
</section>
<!-- ========================================
Our Freelancing Section Start
======================================== -->
<section class="section section-freelancing">
<div class="overlay"></div>
<div class="container">
<h2>I am <span>available</span> for freelancing</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eum
voluptates similique nulla vitae natus
</p>
<a href="/contact.html" class="btn">HIRE ME</a>
</div>
</section>
<!-- ========================================
Our contact us Section Start
======================================== -->
<section class="section section-contact">
<div class="container">
<h2 class="common-heading">Contact Us</h2>
</div>
<div class="section-contact-main contact-container">
<form action="https://formspree.io/f/xknyvwjo" method="POST">
<div class="grid grid-two-column">
<div>
<label for="username"></label>
<input
type="text"
name="username"
placeholder="Username"
id="username"
required
autocomplete="off"
/>
</div>
<div>
<label for="email"></label>
<input
type="email"
name="email"
placeholder="demo@mail.com"
id="email"
autocomplete="off"
required
/>
</div>
</div>
<div>
<label for="subject"></label>
<input
type="text"
name="subject"
placeholder="subject"
id="subject"
autocomplete="off"
required
/>
</div>
<div>
<label for="textarea"></label>
<textarea
name="textarea"
id="textarea"
cols="30"
rows="10"
autocomplete="off"
placeholder="Write your message"
required
></textarea>
</div>
<div>
<input
type="submit"
name="submit"
id="submit"
class="btn"
value="send message"
/>
</div>
</form>
</div>
</section>
<!-- ========================================
Our Footer Section Start
======================================== -->
<footer class="section-footer section">
<div class="container grid grid-four-column">
<div class="f-about">
<h3>About</h3>
<p>
We have tested a number of registry fix and clean utilities and
present our top 3 list on our site for your convenience. Hope you
like it.
</p>
</div>
<!-- end -->
<div class="f-links">
<h3>Links</h3>
<ul>
<li>
<span><ion-icon name="arrow-forward-outline"></ion-icon></span
><a href="#">home</a>
</li>
<li>
<span><ion-icon name="arrow-forward-outline"></ion-icon></span
><a href="#">about</a>
</li>
<li>
<span><ion-icon name="arrow-forward-outline"></ion-icon></span
><a href="#">services</a>
</li>
<li>
<span><ion-icon name="arrow-forward-outline"></ion-icon></span
><a href="#">portfolio</a>
</li>
<li>
<span><ion-icon name="arrow-forward-outline"></ion-icon></span
><a href="#">contact</a>
</li>
</ul>
</div>
<!-- end -->
<div class="f-services">
<h3>Services</h3>
<ul>
<li>
<span><ion-icon name="arrow-forward-outline"></ion-icon></span
><a href="#">web design</a>
</li>
<li>
<span><ion-icon name="arrow-forward-outline"></ion-icon></span
><a href="#">web development</a>
</li>
<li>
<span><ion-icon name="arrow-forward-outline"></ion-icon></span
><a href="#">Mern Project</a>
</li>
<li>
<span><ion-icon name="arrow-forward-outline"></ion-icon></span
><a href="#">Online Classes</a>
</li>
<li>
<span><ion-icon name="arrow-forward-outline"></ion-icon></span
><a href="#">Youtube Course</a>
</li>
</ul>
</div>
<!-- end -->
<div class="f-address">
<h3>Have a Questions?</h3>
<address>
<div>
<p>
<span><ion-icon name="location-outline"></ion-icon></span>
Pune, India
</p>
</div>
<div>
<p>
<span><ion-icon name="call-outline"></ion-icon></span>
<a href="tel:+919876543211"> +91 9874563215 </a>
</p>
</div>
<div>
<p>
<span><ion-icon name="mail-outline"></ion-icon></span>
<a href="mailto:info@thapatechnical.com">
info@thapatechnical.com
</a>
</p>
</div>
</address>
</div>
</div>
<div class="container">
<div class="f-social-icons">
<a href="https://www.instagram.com/thapatechnical/" target="_blank">
<ion-icon class="icons" name="logo-instagram"></ion-icon>
</a>
<a href="https://discord.gg/MdScmCsua6" target="_blank">
<ion-icon class="icons" name="logo-discord"></ion-icon>
</a>
<a href="https://www.youtube.com/thapatechnical" target="_blank">
<ion-icon class="icons" name="logo-youtube"></ion-icon>
</a>
</div>
<div class="f-credits">
<p>
Copyright ©2022 All rights reserved | This template is made with ❤
by Thapa Technical
</p>
</div>
</div>
</footer>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Work+Sans:wght@400;500&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Work Sans", sans-serif;
}
:root {
--heading: rgb(0 10 45);
--para: #777;
--para-tint: #e4e4e4;
--white: #fff;
--black: #212529;
--helper: #8490ff;
--overlay: #3e64ff;
--helper-tint: #f3f4ff;
--bg: rgb(249 249 255);
--icons-bg: rgba(144, 172, 209, 0.2);
--gradient: linear-gradient(0deg, rgb(132 144 255) 0%, rgb(98 189 252) 100%);
--gradientSupport: -webkit-linear-gradient(
0deg,
rgb(132 144 255) 0%,
rgb(98 189 252) 100%
);
--shadow: 0px 0px 20px 0px rgb(132 144 255 / 20%);
--shadowSupport: 0px 20px 20px 0px rgb(132 144 255 / 30%);
}
html {
font-size: 62.5%;
/* scroll-behavior: smooth; */
/* 1rem = 10px */
overflow-x: hidden;
}
body {
overflow-x: hidden;
}
h1,
h2,
h3,
h4 {
font-family: "Poppins", sans-serif;
}
h1 {
color: var(--heading);
font-size: 6rem;
font-weight: 600;
}
h3 {
font-size: 1.8rem;
font-weight: 400;
}
p {
color: var(--para);
line-height: 1.6;
font-size: 1.7rem;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
/* ===========================================
Header Section Start
======================================= */
.header {
padding: 0 4.8rem;
height: 10rem;
background-color: var(--bg);
/* background: red; */
display: flex;
justify-content: space-between;
align-items: center;
}
.header .logo {
height: 3rem;
}
.navbar-lists {
display: flex;
gap: 4.8rem;
}
.navbar-link:link,
.navbar-link:visited {
display: inline-block;
text-decoration: none;
font-size: 1.8rem;
font-weight: 500;
text-transform: uppercase;
color: var(--black);
transition: color 0.3s linear;
}
.navbar-link:hover,
.navbar-link:active {
color: var(--helper);
}
.mobile-navbar-btn {
display: none;
background-color: transparent;
cursor: pointer;
border: none;
}
.mobile-nav-icon[name="close-outline"] {
display: none;
}
/* ?sticky navbar */
.sticky .header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
background-color: rgba(255, 255, 255, 1);
padding-top: 0;
padding-bottom: 0;
box-shadow: var(--shadow);
}
.sticky .section-hero {
margin-top: 10rem;
}
/* ===========================================
Resuable Code Section
======================================= */
.section {
padding: 9rem 0;
}
.container {
max-width: 140rem;
margin: 0 auto;
}
.grid {
display: grid;
gap: 9rem;
}
.grid-two-column {
grid-template-columns: repeat(2, 1fr);
/* grid-template-columns: 1fr 1fr; */
}
.grid-three-column {
grid-template-columns: repeat(3, 1fr);
/* grid-template-columns: 1fr 1fr; */
}
.grid-four-column {
grid-template-columns: repeat(4, 1fr);
/* grid-template-columns: 1fr 1fr; */
}
.btn {
background: var(--gradientSupport);
padding: 1.6rem 3.2rem;
border: none;
color: var(--helper-tint);
display: inline-block;
text-transform: uppercase;
font-size: 1.8rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
}
.btn:hover,
.btn:active {
/* box-shadow: 0 2rem 2rem 0 rgb(132 144 255 / 30%); */
box-shadow: var(--shadowSupport);
}
.common-heading {
font-size: 4.8rem;
font-weight: 600;
margin-bottom: 6rem;
text-transform: capitalize;
position: relative;
}
.common-heading::before {
content: "";
position: absolute;
top: 110%;
left: 0;
width: 1.5rem;
height: 1.5rem;
background: var(--helper);
border-radius: 50%;
}
.common-heading::after {
content: "";
position: absolute;
top: 118%;
left: 1.5rem;
min-width: 20rem;
height: 0.3rem;
background: var(--helper);
}
/* ===========================================
hero Section Start
======================================= */
.section-hero {
background-color: var(--bg);
}
.section-hero-data {
display: flex;
flex-direction: column;
justify-content: center;
/* align-items: flex-start; */
}
.hero-top-data {
text-transform: uppercase;
font-weight: 500;
font-size: 1.5rem;
color: var(--helper);
}
.hero-heading {
text-transform: uppercase;
font-weight: 700;
font-size: 6.4rem;
}
.hero-para {
margin-top: 1.5rem;
margin-bottom: 5rem;
max-width: 60rem;
}
.section-hero-image {
display: flex;
justify-content: center;
align-items: center;
}
picture {
text-align: center;
}
.hero-img {
max-width: 80%;
}
/* ===========================================
BIO Section Start
======================================= */
.bio-image {
display: flex;
justify-content: center;
align-items: center;
}
.bio-image img {
width: 80%;
box-shadow: -2rem -2rem 0 0 var(--helper);
display: inline-block;
}
.bio-data-stats {
display: flex;
padding: 6.4rem 0;
flex-direction: column;
gap: 3rem;
}
.bio-stats h3 {
margin-bottom: 1rem;
}
.bio-progress-bar {
width: 90%;
height: 0.8rem;
background-color: var(--para-tint);
border-radius: 10rem;
box-shadow: var(--shadow);
position: relative;
}
.bio-progress-bar::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 80%;
height: inherit;
background: var(--gradientSupport);
border-radius: 10rem;
}
.bio-progress-2::before {
width: 99%;
}
.bio-progress-3::before {
width: 90%;
}
.bio-progress-4::before {
width: 85%;
}
.bio-progress-5::before {
width: 70%;
}
.bio-progress-bar span {
position: absolute;
top: 1.8rem;
width: 4rem;
height: 2rem;
background: var(--helper);
color: var(--white);
display: flex;
justify-content: center;
align-items: center;
border: none;
outline: 0;
}
.bio-progress-bar span {
left: 76%;
}
.bio-progress-2 span {
left: 95%;
}
.bio-progress-3 span {
left: 86%;
}
.bio-progress-4 span {
left: 81%;
}
.bio-progress-5 span {
left: 66%;
}
/* to create a caret */
.bio-progress-bar span::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 0.8rem solid var(--helper);
border-color: transparent;
border-bottom-color: var(--helper);
top: -1.6rem;
}
/* ===========================================
porfolio Section Start
======================================= */
.section-portfolio {
background: var(--bg);
transition: all 0.7s linear;
}
.section-portfolio p {
max-width: 60rem;
}
.p-btns {
display: flex;
justify-content: center;
align-items: center;
gap: 3.2rem;
margin-top: 6.4rem;
margin: 6.4rem 0;
}
.portfolio-images {
gap: 3.2rem;
/* margin-top: 6.4rem; */
}
.portfolio-images img {
width: 100%;
border-radius: 7px;
position: relative;
overflow: hidden;
}
.img-overlay {
position: relative;
overflow: hidden;
}
.img-overlay .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradientSupport);
opacity: 0;
display: flex;
justify-content: center;
align-items: center;
transform: translateY(100%);
transition: all 0.3s linear;
border-radius: 7px;
}
.img-overlay:hover > .overlay {
transform: translateY(0);
opacity: 0.8;
cursor: pointer;
}
.img-overlay .common-heading {
margin: 0;
color: var(--white);
text-decoration: none;
}
.p-btn-active {
transform: translateY(-1rem);
}
.p-image-not-acitve {
display: none;
}
/* ===========================================
work data Section Start
======================================= */
.section-work-data {
background: var(--gradientSupport);
text-align: center;
transition: all 0.7s linear;
color: var(--white);
}
.counter-numbers {
font-size: 4.8rem;
}
.section-work-data p {
color: var(--white);
text-transform: capitalize;
}
/* ===========================================
work data Section Start
======================================= */
.section-work-data {
background: var(--gradientSupport);
text-align: center;
transition: all 0.7s linear;
color: var(--white);
}
.counter-numbers {
font-size: 4.8rem;
}
.section-work-data p {
color: var(--white);
text-transform: capitalize;
}
/* ===========================================
our services Section Start
======================================= */
.section-services {
transition: all 0.7s linear;
}
.section-services p {
max-width: 60rem;
}
.section-services .grid {
margin-top: 10rem;
row-gap: 10rem;
}
.service-box {
text-align: center;
box-shadow: var(--shadow);
border-radius: 5px;
padding: 6.4rem 3.4rem;
transition: all 0.2s linear;
}
.service-box:hover,
.service-box:active {
transform: translateY(-3rem);
}
.service-icon {
width: 8rem;
height: 8rem;
background-color: var(--icons-bg);
display: inline-block;
border-radius: 56% 44% 70% 30% / 30% 54% 46% 70%;
padding: 1.4rem 1.8rem;
position: relative;
color: var(--heading);
animation: water-wave 3s linear infinite;
}
.service-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 90%;
border-radius: 56% 44% 70% 30% / 30% 54% 46% 70%;
background: transparent;
border: 1px solid var(--black);
animation: water-wave 3s linear infinite;
}
@keyframes water-wave {
0% {
border-radius: 56% 44% 70% 30% / 30% 54% 46% 70%;
}
50% {
border-radius: 3% 97% 15% 85% / 72% 0% 100% 28%;
}
100% {
border-radius: 56% 44% 70% 30% / 30% 54% 46% 70%;
}
}
.service-box h3 {
text-transform: capitalize;
margin-top: 3rem;
margin-bottom: 1rem;
}
/* ===========================================
our REsume Section Start
======================================= */
.section-resume {
background: var(--bg);
transition: all 0.7s linear;
}
.resume-img {
display: flex;
justify-content: center;
align-items: center;
}
.resume-img img {
width: 80%;
box-shadow: -2rem 2rem 0 0 var(--helper);
}
/* resume right side style */
.resume-para {
font-size: 2.4rem;
letter-spacing: 0;
text-transform: capitalize;
color: var(--heading);
}
.resume-data-subsection {
display: flex;
justify-content: space-between;
align-items: center;
gap: 4.8rem;
margin-top: 4.4rem;
padding-bottom: 2.4rem;
border-bottom: 1px solid var(--para-tint);
}
.resume-data-left .grid {
gap: 1.5rem;
}
.resume-data-left h3 {
margin-bottom: 1rem;
}
.resume-data-left .grid p,
.resume-data-right p {
font-size: 1.4rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.resume-data-right {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
}
.resume-data-right .resume-data-button {
font-size: 1.3rem;
text-transform: uppercase;
color: var(--helper);
padding: 0.3rem 0;
min-width: 50%;
background: #f3f4ff;
justify-content: center;
border-radius: 10rem;
margin-bottom: 0.5rem;
}
.resume-data-bottom-subsection {
margin-top: 4.8rem;
}
.resume-data-bottom-subsection .margin-small {
margin-top: 1.8rem;
}
/* ===========================================
our swiper Section Start
======================================= */
.swiper {
width: 100%;
height: 100%;
margin-top: 9rem;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
margin-bottom: 8rem;
}
.swiper-client-msg {
padding: 5rem 8rem;
background: var(--white);
border-radius: 1rem;
text-align: left;
box-shadow: var(--shadow);
position: relative;
}
.swiper-client-msg::before {
content: "";
position: absolute;
bottom: -10rem;
left: 50%;
transform: translateX(-50%);
border: 5rem solid var(--white);
border-color: transparent;
border-top-color: var(--helper-tint);
}
.swiper-client-msg p::before {
content: "\f10d";
position: absolute;
top: 0;
left: 2rem;
font-size: 5rem;
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: #ced3ff;
}
.swiper-client-msg p::after {
content: "\f10e";
position: absolute;
bottom: 0;
right: 3rem;
font-size: 5rem;
font-family: "Font Awesome 6 Free";
font-weight: 900;
color: #ced3ff;
}
.swiper-client-data {
align-items: center;
margin-top: 3.2rem;
gap: 3.2rem;
}
.swiper-slide img {
max-width: 10rem;
height: 10rem;
border-radius: 50%;
border: 0.5rem solid var(--helper-tint);
}
/* ===========================================
Freelancing Section Start
======================================= */
.section-freelancing {
background-image: url("../images/folio/3.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-attachment: fixed;
position: relative;
transition: all 0.7s linear;
text-align: center;
}
.section-freelancing .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--overlay);
opacity: 0.7;
}
.section-freelancing .container {
position: relative;
}
.section-freelancing h2 {
font-size: 5.4rem;
}
.section-freelancing span {
color: #a0f669;
}
.section-freelancing h2,
.section-freelancing p {
color: var(--white);
margin-bottom: 1.8rem;
}
/* ===========================================
contact Section Start
======================================= */
.section-contact-main {
max-width: 70rem;
margin: 0 auto;
margin-top: 9rem;
transition: all 0.3s linear;
}
.section-contact-main .grid {
gap: 3.2rem;
}
.section-contact-main form {
display: flex;
flex-direction: column;
gap: 3.2rem;
}
.section-contact-main input,
.section-contact-main textarea {
padding: 1.5rem 2rem;
border: 0.1rem solid #c9c9c9;
border-radius: 5px;
font-size: 1.6rem;
font-family: "work sans";
width: 100%;
}
.section-contact-main input[type="submit"] {
max-width: 30%;
border: none;
}
/* ===========================================
Footer Section Start
======================================= */
.section-footer {
background: var(--heading);
transition: all 0.7s linear;
}
.section-footer h3 {
color: var(--white);
margin-bottom: 4rem;
}
.f-about p {
color: #adadad;
}
.f-links ul,
.f-services ul,
.f-address address {
display: flex;
flex-direction: column;
gap: 1.8rem;
justify-content: center;
}
.f-links li,
.f-links a,
.f-services li,
.f-services a {
font-size: 1.8rem;
color: #adadad;
text-transform: capitalize;
}
.f-links span,
.f-services span,
.f-address span {
margin-right: 1rem;
}
.f-address p,
.f-address p a {
font-style: normal;
color: #adadad;
}
.f-social-icons {
margin: 5rem 0;
text-align: center;
color: #adadad;
}
.f-social-icons .icons {
width: 4rem;
height: 4rem;
background-color: var(--icons-bg);
display: inline-block;
padding: 1.4rem 1.8rem;
position: relative;
color: var(--white);
animation: water-wave 3s linear infinite;
cursor: pointer;
}
.f-credits p {
text-align: center;
color: #adadad;
}
.footer a:hover,
.footer a:active {
color: var(--white);
}
/* ===========================================
Scroll Section Start
======================================= */
.scrollTop-style {
position: fixed;
right: 2%;
bottom: 5%;
z-index: 1;
}
.scroll-top {
width: 4rem;
height: 4rem;
background: var(--helper);
display: inline-block;
padding: 1.4rem 1.8rem;
position: relative;
color: var(--white);
animation: water-wave 3s linear infinite;
cursor: pointer;
}
/* ===========================================
/* media queries
======================================= */
/* px */
/* rem */
/* em */
/* 1500px */
@media (max-width: 95em) {
.container {
max-width: 130rem;
padding: 0 3.2rem;
}
.navbar-lists {
gap: 3.4rem;
}
}
const heroSection = document.querySelector(".section-hero");
// ========================================
// creating a responsive navbar component
// ========================================
const mobile_nav = document.querySelector(".mobile-navbar-btn");
const headerElem = document.querySelector(".header");
mobile_nav.addEventListener("click", () => {
headerElem.classList.toggle("active");
});
// ========================================
// creating a sticky responsive navbar component
// ========================================
const observer = new IntersectionObserver(
(entries) => {
const ent = entries[0];
console.log(ent);
!ent.isIntersecting
? document.body.classList.add("sticky")
: document.body.classList.remove("sticky");
},
{
root: null,
threshold: 0,
}
);
observer.observe(heroSection);
// ========================================
// creating a portfolio tabbed component
// ========================================
const p_btns = document.querySelector(".p-btns");
const p_btn = document.querySelectorAll(".p-btn");
const p_img_elem = document.querySelectorAll(".img-overlay");
p_btns.addEventListener("click", (e) => {
const p_btn_clicked = e.target;
console.log(p_btn_clicked);
if (!p_btn_clicked.classList.contains("p-btn")) return;
p_btn.forEach((curElem) => curElem.classList.remove("p-btn-active"));
p_btn_clicked.classList.add("p-btn-active");
// to find the number in data attr
const btn_num = p_btn_clicked.dataset.btnNum;
console.log(btn_num);
const img_active = document.querySelectorAll(`.p-btn--${btn_num}`);
p_img_elem.forEach((curElem) => curElem.classList.add("p-image-not-acitve"));
img_active.forEach((curElem) =>
curElem.classList.remove("p-image-not-acitve")
);
});
// swiper js code
new Swiper(".mySwiper", {
slidesPerView: 2,
spaceBetween: 30,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
const myJsmedia = (widthSize) => {
if (widthSize.matches) {
new Swiper(".mySwiper", {
slidesPerView: 1,
spaceBetween: 30,
});
} else {
new Swiper(".mySwiper", {
slidesPerView: 2,
spaceBetween: 30,
});
}
};
const widthSize = window.matchMedia("(max-width: 780px)");
// Call listener function at run time
myJsmedia(widthSize);
// Attach listener function on state changes
widthSize.addEventListener("change", myJsmedia);
// scrooll to top button
const footerElem = document.querySelector(".section-footer");
const scroollElement = document.createElement("div");
scroollElement.classList.add("scrollTop-style");
scroollElement.innerHTML = `<ion-icon name="arrow-up-outline" class="scroll-top"></ion-icon>`;
footerElem.after(scroollElement);
const scrollTop = () => {
heroSection.scrollIntoView({ behavior: "smooth" });
};
scroollElement.addEventListener("click", scrollTop);
// smooth scrolling effects
const portfolioSec = document.querySelector(".section-portfolio");
const contactSec = document.querySelector(".section-contact");
document.querySelector(".portfolio-link").addEventListener("click", () => {
portfolioSec.scrollIntoView({ behavior: "smooth" });
});
document.querySelector(".hireme-btn").addEventListener("click", (e) => {
e.preventDefault();
contactSec.scrollIntoView({ behavior: "smooth" });
});
const workSection = document.querySelector(".section-work-data");
const workObserver = new IntersectionObserver(
(entries, observer) => {
const [entry] = entries;
// console.log(entry);
// if (entry.isIntersecting == false)
if (!entry.isIntersecting) return;
// animate number counter
const counterNum = document.querySelectorAll(".counter-numbers");
const speed = 200;
counterNum.forEach((curElem) => {
const updateNumber = () => {
const targetNumber = parseInt(curElem.dataset.number);
// console.log(targetNumber);
const initialNum = parseInt(curElem.innerText);
// console.log(initialNum);
const incrementNumber = Math.trunc(targetNumber / speed);
// console.log(incrementNumber);
if (initialNum < targetNumber) {
curElem.innerText = `${initialNum + incrementNumber}+`;
setTimeout(updateNumber, 10);
}
};
updateNumber();
});
observer.unobserve(workSection);
},
{
root: null,
threshold: 0,
}
);
workObserver.observe(workSection);
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.