Build Personal Portfolio HTML CSS & JS
.png)
1. **Introduction to Building a Personal Portfolio:**
Building a personal portfolio is a crucial step for showcasing your skills and projects to potential employers or clients. It serves as an online resume, giving a snapshot of your expertise and accomplishments.
2. **HTML Structure:**
In HTML (HyperText Markup Language), you'll define the structure of your portfolio. This includes sections like the header, about me, skills, projects, and contact information. HTML provides the backbone of your webpage, creating the essential elements and layout.
3. **CSS Styling:**
Cascading Style Sheets (CSS) are used to style and enhance the visual appeal of your portfolio. You can customize fonts, colors, spacing, and overall layout using CSS. This step is crucial for creating a professional and visually appealing presentation of your information.
4. **Adding Interactivity with JavaScript:**
JavaScript comes into play for adding interactivity to your portfolio. You can use JavaScript to create dynamic elements, such as interactive project galleries, form validations, or even a smooth scrolling experience. This enhances the user experience and makes your portfolio more engaging.
Building a personal portfolio is not just about displaying your work; it's also an opportunity to express your personality and make a positive impression on those who visit your site. Incorporating these three technologies—HTML, CSS, and JavaScript—allows you to create a well-rounded and effective online portfolio.
<->
Source Code
start, add the following HTML codes to your index.html file.
<!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>Drake - OnePage Portfolio HTML5 Template</title>
<link rel="icon" type="image/x-icon" href="./assets/images/favicon.png">
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Stylesheet -->
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<link href="./assets/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="./assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="./assets/css/owl.theme.default.min.css">
<link rel="stylesheet" href="./assets/css/animate.min.css">
<link rel="stylesheet" href="./assets/css/smooth-scrollbar.css">
<link rel="stylesheet" href="./assets/css/lightbox.min.css">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./assets/css/responsive.css">
</head>
<body class="home1-page">
<video class="body-overlay" muted autoplay loop>
<source src="./assets/images/video1.mp4" type="video/mp4">
</video>
<div class="page-loader">
<div class="bounceball"></div>
</div>
<span class="icon-menu">
<span class="bar"></span>
<span class="bar"></span>
</span>
<div class="global-color">
<span class="setting-toggle">
<i class="las la-cog"></i>
</span>
<div class="inner">
<div class="overlay"></div>
<div class="global-color-option">
<span class="close-settings">
<i class="las la-times"></i>
</span>
<h2>Configuration</h2>
<div class="global-color-option-inner">
<p>Colors</p>
<div class="color-boxed">
<a href="#" class="clr-active" onclick="color1();"></a>
<a href="#" onclick="color2();"></a>
<a href="#" onclick="color3();"></a>
<a href="#" onclick="color4();"></a>
<a href="#" onclick="color5();"></a>
<a href="#" onclick="color6();"></a>
<a href="#" onclick="color7();"></a>
<a href="#" onclick="color8();"></a>
</div>
<p>THREE DIMENSIONAL SHAPES</p>
<ul class="themes">
<li class="active"><a href="./home1.html">Earth Lines Sphere</a></li>
<li><a href="./home2.html">3D Abstract Ball</a></li>
<li><a href="./home3.html">Water Waves</a></li>
<li><a href="./home4.html">Liquids Wavy</a></li>
<li><a href="./home6.html">Solid Color</a></li>
<li><a href="./home5.html">Simple Strings</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="responsive-sidebar-menu">
<div class="overlay"></div>
<div class="sidebar-menu-inner">
<div class="menu-wrap">
<p>Menu</p>
<ul class="menu scroll-nav-responsive d-flex">
<li>
<a class="scroll-to" href="#home">
<i class="las la-home"></i> <span>Home</span>
</a>
</li>
<li>
<a class="scroll-to" href="#about">
<i class="lar la-user"></i> <span>About</span>
</a>
</li>
<li>
<a class="scroll-to" href="#resume">
<i class="las la-briefcase"></i> <span>Resume</span>
</a>
</li>
<li>
<a class="scroll-to" href="#services">
<i class="las la-stream"></i> <span>Services</span>
</a>
</li>
<li>
<a class="scroll-to" href="#skills">
<i class="las la-shapes"></i> <span>Skills</span>
</a>
</li>
<li>
<a class="scroll-to" href="#portfolio">
<i class="las la-grip-vertical"></i> <span>Portfolios</span>
</a>
</li>
<li>
<a class="scroll-to" href="#testimonial">
<i class="lar la-comment"></i> <span>Testimonial</span>
</a>
</li>
<li>
<a class="scroll-to" href="#contact">
<i class="las la-envelope"></i> <span>Contact</span>
</a>
</li>
</ul>
</div>
<div class="sidebar-social">
<p>Social</p>
<ul class="social-links d-flex align-items-center">
<li>
<a href=""><i class="lab la-twitter"></i></a>
</li>
<li>
<a href=""><i class="lab la-dribbble"></i></a>
</li>
<li>
<a href=""><i class="lab la-instagram"></i></a>
</li>
</ul>
</div>
</div>
</div>
<ul class="menu scroll-nav d-flex">
<li>
<a class="scroll-to" href="#home">
<span>Home</span> <i class="las la-home"></i>
</a>
</li>
<li>
<a class="scroll-to" href="#about">
<span>About</span> <i class="lar la-user"></i>
</a>
</li>
<li>
<a class="scroll-to" href="#resume">
<span>Resume</span> <i class="las la-briefcase"></i>
</a>
</li>
<li>
<a href="#services">
<span>Services</span> <i class="las la-stream"></i>
</a>
</li>
<li>
<a class="scroll-to" href="#skills">
<span>Skills</span> <i class="las la-shapes"></i>
</a>
</li>
<li>
<a class="scroll-to" href="#portfolio">
<span>Portfolios</span> <i class="las la-grip-vertical"></i>
</a>
</li>
<li>
<a class="scroll-to" href="#testimonial">
<span>Testimonial</span> <i class="lar la-comment"></i>
</a>
</li>
<li>
<a class="scroll-to" href="#contact">
<span>Contact</span> <i class="las la-envelope"></i>
</a>
</li>
</ul>
<div class="left-sidebar">
<div class="sidebar-header d-flex align-items-center justify-content-between">
<img src="./assets/images/logo.png" alt="Logo">
<span class="designation">Framer Designer & Developer</span>
</div>
<img class="me" src="./assets/images/me.jpg" alt="Me">
<h2 class="email">hello@drake.design</h2>
<h2 class="address">Base in Los Angeles, CA</h2>
<p class="copyright">© 2022 Drake. All Rights Reserved</p>
<ul class="social-profile d-flex align-items-center flex-wrap justify-content-center">
<li>
<a href=""><i class="lab la-twitter"></i></a>
</li>
<li>
<a href=""><i class="lab la-dribbble"></i></a>
</li>
<li>
<a href=""><i class="lab la-instagram"></i></a>
</li>
<li>
<a href=""><i class="lab la-github"></i></a>
</li>
</ul>
<a href="#" class="theme-btn">
<i class="las la-envelope"></i> Hire Me!
</a>
</div>
<main class="drake-main">
<div id="smooth-wrapper">
<div id="smooth-content">
<div class="left-sidebar">
<div class="sidebar-header d-flex align-items-center justify-content-between">
<img src="./assets/images/logo.png" alt="Logo">
<span class="designation">Framer Designer & Developer</span>
</div>
<img class="me" src="./assets/images/me.jpg" alt="Me">
<h2 class="email">hello@drake.design</h2>
<h2 class="address">Base in Los Angeles, CA</h2>
<p class="copyright">© 2022 Drake. All Rights Reserved</p>
<ul class="social-profile d-flex align-items-center flex-wrap justify-content-center">
<li>
<a href=""><i class="lab la-twitter"></i></a>
</li>
<li>
<a href=""><i class="lab la-dribbble"></i></a>
</li>
<li>
<a href=""><i class="lab la-instagram"></i></a>
</li>
<li>
<a href=""><i class="lab la-github"></i></a>
</li>
</ul>
<a href="#" class="theme-btn">
<i class="las la-envelope"></i> Hire Me!
</a>
</div>
<section class="hero-section page-section scroll-to-page" id="home">
<div class="custom-container">
<div class="hero-content content-width">
<div class="section-header">
<h4 class="subtitle scroll-animation" data-animation="fade_from_bottom">
<i class="las la-home"></i> Introduce
</h4>
<h1 class="scroll-animation" data-animation="fade_from_bottom">Say Hi from <span>Drake</span>, Framer Designer and Developer</h1>
</div>
<p class="scroll-animation" data-animation="fade_from_bottom">I design and code beautifully simple things and i love what i do. Just simple like that!</p>
<a href="#portfolio"
class="go-to-project-btn scroll-to scroll-animation"
data-animation="rotate_up">
<img src="./assets/images/round-text.png" alt="Rounded text">
<i class="las la-arrow-down"></i>
</a>
<div class="facts d-flex">
<div class="left scroll-animation" data-animation="fade_from_left">
<h1>10+</h1>
<p>Years of <br>Experience</p>
</div>
<div class="right scroll-animation" data-animation="fade_from_right">
<h1>182+</h1>
<p>projects completed on <br>15 countries</p>
</div>
</div>
</div>
</div>
</section>
<section class="about-area page-section scroll-to-page" id="about">
<div class="custom-container">
<div class="about-content content-width">
<div class="section-header">
<h4 class="subtitle scroll-animation" data-animation="fade_from_bottom">
<i class="lar la-user"></i> About
</h4>
<h1 class="scroll-animation" data-animation="fade_from_bottom">Every great design begin with<br>
an even <span>better story</span></h1>
</div>
<p class="scroll-animation" data-animation="fade_from_bottom">Since beginning my journey as a freelance designer nearly 8 years ago,
I've done remote work for agencies, consulted for startups, and collaborated with
talented people to create digital products for both business and consumer use.
I'm quietly confident, naturally curious, and perpetually working on improving my
chopsone design problem at a time.</p>
</div>
</div>
</section>
<section class="resume-area page-section scroll-to-page" id="resume">
<div class="custom-container">
<div class="resume-content content-width">
<div class="section-header">
<h4 class="subtitle scroll-animation" data-animation="fade_from_bottom">
<i class="las la-briefcase"></i> Resume
</h4>
<h1 class="scroll-animation" data-animation="fade_from_bottom">Education & <span>Experience</span></h1>
</div>
<div class="resume-timeline">
<div class="item scroll-animation" data-animation="fade_from_right">
<span class="date">2020 - Present</span>
<h2>Framer Desinger & Developer</h2>
<p>Brunodee Agency</p>
<h2>Front-End WordPress Developer</h2>
<p>Envato Market</p>
</div>
<div class="item scroll-animation" data-animation="fade_from_right">
<span class="date">2013 - 2019</span>
<h2>Webflow Developer & Co-Founder</h2>
<p>Designflow Studio</p>
<h2>Web Designer</h2>
<p>Freelance</p>
<h2>Leader Team of Marketing</h2>
<p>AHA Marketing Agency</p>
</div>
<div class="item scroll-animation" data-animation="fade_from_right">
<span class="date">2010 - 2013</span>
<h2>Bachelor Degree of Information Technology</h2>
<p>US RMIT University</p>
</div>
</div>
</div>
</div>
</section>
<section class="services-area page-section scroll-to-page" id="services">
<div class="custom-container">
<div class="services-content content-width">
<div class="section-header">
<h4 class="subtitle scroll-animation" data-animation="fade_from_bottom">
<i class="las la-stream"></i> Services
</h4>
<h1 class="scroll-animation" data-animation="fade_from_bottom">My <span>Specializations</span></h1>
</div>
<div class="services-items">
<div class="service-item scroll-animation" data-animation="fade_from_bottom">
<i class="las la-bezier-curve"></i>
<h2>Website Design</h2>
<p>I created digital products with unique ideas use Figma & Framer</p>
<span class="projects">24 Projects</span>
</div>
<div class="service-item scroll-animation" data-animation="fade_from_bottom">
<i class="las la-code"></i>
<h2>Development</h2>
<p>I build website go live with Framer, Webflow or WordPress</p>
<span class="projects">126 Projects</span>
</div>
<div class="service-item scroll-animation" data-animation="fade_from_bottom">
<i class="las la-bezier-curve"></i>
<h2>SEO/Marketing</h2>
<p>Increase the traffic for your website with SEO optimized</p>
<span class="projects">8 Projects</span>
</div>
</div>
</div>
</div>
</section>
<section class="skills-area page-section scroll-to-page" id="skills">
<div class="custom-container">
<div class="skills-content content-width">
<div class="section-header">
<h4 class="subtitle scroll-animation" data-animation="fade_from_bottom">
<i class="las la-shapes"></i> my skills
</h4>
<h1 class="scroll-animation" data-animation="fade_from_bottom">My <span>Advantages</span></h1>
</div>
<div class="row skills text-center">
<div class="col-md-3 scroll-animation" data-animation="fade_from_left">
<div class="skill">
<div class="skill-inner">
<img src="./assets/images/figma.png" alt="Figma">
<h1 class="percent">92%</h1>
</div>
<p class="name">Figma</p>
</div>
</div>
<div class="col-md-3 scroll-animation" data-animation="fade_from_bottom">
<div class="skill">
<div class="skill-inner">
<img src="./assets/images/framer.png" alt="Framer">
<h1 class="percent">85%</h1>
</div>
<p class="name">Framer</p>
</div>
</div>
<div class="col-md-3 scroll-animation" data-animation="fade_from_top">
<div class="skill">
<div class="skill-inner">
<img src="./assets/images/webflow.png" alt="Webflow">
<h1 class="percent">80%</h1>
</div>
<p class="name">Webflow</p>
</div>
</div>
<div class="col-md-3 scroll-animation" data-animation="fade_from_right">
<div class="skill">
<div class="skill-inner">
<img src="./assets/images/react.png" alt="React">
<h1 class="percent">90%</h1>
</div>
<p class="name">React</p>
</div>
</div>
<div class="col-md-3 scroll-animation" data-animation="fade_from_left">
<div class="skill">
<div class="skill-inner">
<img src="./assets/images/wordpress.png" alt="WordPress">
<h1 class="percent">86%</h1>
</div>
<p class="name">WordPress</p>
</div>
</div>
<div class="col-md-3 scroll-animation" data-animation="fade_from_bottom">
<div class="skill">
<div class="skill-inner">
<img src="./assets/images/laravel.png" alt="Laravel/PHP">
<h1 class="percent">70%</h1>
</div>
<p class="name">Laravel/PHP</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="portfolio-area page-section scroll-to-page" id="portfolio">
<div class="custom-container">
<div class="portfolio-content content-width">
<div class="section-header">
<h4 class="subtitle scroll-animation" data-animation="fade_from_bottom">
<i class="las la-grip-vertical"></i> portfolio
</h4>
<h1 class="scroll-animation" data-animation="fade_from_bottom">Featured <span>Projects</span></h1>
</div>
<div class="row portfolio-items">
<div class="col-md-12 scroll-animation" data-animation="fade_from_bottom">
<div class="portfolio-item portfolio-full">
<div class="portfolio-item-inner">
<a href="./assets/images/portfolio1.jpg" data-lightbox="example-1">
<img src="./assets/images/portfolio1.jpg" alt="Portfolio">
</a>
<ul class="portfolio-categories">
<li>
<a href="">Figma</a>
</li>
<li>
<a href="">Framer</a>
</li>
<li>
<a href="">WordPress</a>
</li>
</ul>
</div>
<h2><a href="">Bureau - Architecture Studio Website</a></h2>
</div>
</div>
<div class="col-md-6 scroll-animation" data-animation="fade_from_left">
<div class="portfolio-item portfolio-half">
<div class="portfolio-item-inner">
<a href="./assets/images/portfolio2.jpg" data-lightbox="example-1">
<img src="./assets/images/portfolio2.jpg" alt="Portfolio">
</a>
<img src="./assets/images/portfolio2.jpg" alt="Portfolio">
<ul class="portfolio-categories">
<li>
<a href="">WordPress</a>
</li>
<li>
<a href="">Larevel/PHP</a>
</li>
</ul>
</div>
<h2><a href="">Moonex WordPress Theme</a></h2>
</div>
</div>
<div class="col-md-6 scroll-animation" data-animation="fade_from_right">
<div class="portfolio-item portfolio-half">
<div class="portfolio-item-inner">
<a href="./assets/images/portfolio3.jpg" data-lightbox="example-1">
<img src="./assets/images/portfolio3.jpg" alt="Portfolio">
</a>
<ul class="portfolio-categories">
<li>
<a href="">Figma</a>
</li>
<li>
<a href="">Webflow</a>
</li>
</ul>
</div>
<h2><a href="">Taskly Dashboard</a></h2>
</div>
</div>
<div class="col-md-12 scroll-animation" data-animation="fade_from_bottom">
<div class="portfolio-item portfolio-half">
<div class="portfolio-item-inner">
<a href="./assets/images/portfolio4.jpg" data-lightbox="example-1">
<img src="./assets/images/portfolio4.jpg" alt="Portfolio">
</a>
<ul class="portfolio-categories">
<li>
<a href="">Figma</a>
</li>
<li>
<a href="">React</a>
</li>
</ul>
</div>
<h2><a href="">Hinterland - Real Estate Site Redesign</a></h2>
</div>
</div>
<div class="col-md-12 scroll-animation" data-animation="fade_from_bottom">
<div class="portfolio-item portfolio-half">
<div class="portfolio-item-inner">
<a href="./assets/images/portfolio5.jpg" data-lightbox="example-1">
<img src="./assets/images/portfolio5.jpg" alt="Portfolio">
</a>
<ul class="portfolio-categories">
<li>
<a href="">Framer</a>
</li>
</ul>
</div>
<h2><a href="">Lewis Portfolio Framer Template</a></h2>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="testimonial-area page-section scroll-to-page" id="testimonial">
<div class="custom-container">
<div class="testimonial-content content-width">
<div class="section-header">
<h4 class="subtitle scroll-animation" data-animation="fade_from_bottom">
<i class="lar la-comment"></i> testimonial
</h4>
<h1 class="scroll-animation" data-animation="fade_from_bottom">Trusted by <span>Hundered Clients</span></h1>
</div>
<div class="testimonial-slider-wrap scroll-animation" data-animation="fade_from_bottom">
<div class="owl-carousel testimonial-slider owl-theme">
<div class="testimonial-item">
<div class="testimonial-item-inner">
<div class="author d-flex align-items-center">
<img src="./assets/images/testimonial-1.jpg" alt="Testimonial">
<div class="right">
<h3>Paublo Dybala</h3>
<p class="designation">CEO of <span>IBM Global</span></p>
</div>
</div>
<p>“Drake - A Developer with the creativity, professional and
master of code. Much more than what i'm expect.
High quality product & flexiable price. Recommended!.”</p>
<a href="" class="project-btn">Project</a>
</div>
</div>
<div class="testimonial-item">
<div class="testimonial-item-inner">
<div class="author d-flex align-items-center">
<img src="./assets/images/testimonial-2.jpg" alt="Testimonial">
<div class="right">
<h3>Christina Morillo</h3>
<p class="designation">Product Management of <span>Invision App Inc</span></p>
</div>
</div>
<p>“Drake was a real pleasure to work with and we look
forward to working with him again. He's definitely the kind of
designer that you can trust with any project from A-Z.”</p>
<a href="" class="project-btn">Project</a>
</div>
</div>
<div class="testimonial-item">
<div class="testimonial-item-inner">
<div class="author d-flex align-items-center">
<img src="./assets/images/testimonial-3.jpg" alt="Testimonial">
<div class="right">
<h3>Phil Foden</h3>
<p class="designation">Director of <span>Envato LLC</span></p>
</div>
</div>
<p>“Extremely profressional and fast service!. Drake is a master
of code and he also very creative. We done 3 projects with
him and certain will continue.”</p>
<a href="" class="project-btn">Project</a>
</div>
</div>
</div>
<div class="testimonial-footer-nav">
<div class="testimonial-nav d-flex align-items-center">
<button class="prev"><i class="las la-angle-left"></i></button>
<div id="testimonial-slide-count"></div>
<button class="next"><i class="las la-angle-right"></i></button>
</div>
</div>
</div>
<div class="clients-logos">
<h4 class="scroll-animation" data-animation="fade_from_bottom">work with 60+ brands worldwide</h4>
<div class="row align-items-center">
<div class="col-md-3 scroll-animation" data-animation="fade_from_left">
<img src="./assets/images/client-1.png" alt="Client">
</div>
<div class="col-md-3 scroll-animation" data-animation="fade_from_bottom">
<img src="./assets/images/client-2.png" alt="Client">
</div>
<div class="col-md-3 scroll-animation" data-animation="fade_from_top">
<img src="./assets/images/client-3.png" alt="Client">
</div>
<div class="col-md-3 scroll-animation" data-animation="fade_from_right">
<img src="./assets/images/client-4.png" alt="Client">
</div>
<div class="col-md-3 scroll-animation" data-animation="fade_from_left">
<img src="./assets/images/client-5.png" alt="Client">
</div>
<div class="col-md-3 scroll-animation" data-animation="fade_from_bottom">
<img src="./assets/images/client-6.png" alt="Client">
</div>
<div class="col-md-3 scroll-animation" data-animation="fade_from_top">
<img src="./assets/images/client-7.png" alt="Client">
</div>
<div class="col-md-3 scroll-animation" data-animation="fade_from_right">
<img src="./assets/images/client-8.png" alt="Client">
</div>
</div>
</div>
</div>
</div>
</section>
<section class="pricing-area page-section scroll-to-page" id="pricing">
<div class="custom-container">
<div class="pricing-content content-width">
<div class="section-header">
<h4 class="subtitle scroll-animation" data-animation="fade_from_bottom">
<i class="las la-dollar-sign"></i> pricing
</h4>
<h1 class="scroll-animation" data-animation="fade_from_bottom">My <span>Pricing</span></h1>
</div>
<div class="pricing-table-items">
<div class="row">
<div class="col-md-6 scroll-animation" data-animation="fade_from_left">
<div class="pricing-table">
<div class="pricing-table-header">
<div class="top d-flex justify-content-between align-items-start">
<h4>basic</h4>
<p class="text-right">Have design ready to build?<br>
or small budget</p>
</div>
<h1>$49 <span>/ hours</span></h1>
</div>
<ul class="feature-lists">
<li>Need your wireframe</li>
<li>Design with Figma, Framer</li>
<li>Implement with Webflow, React, WordPress, Laravel/PHP</li>
<li>Remote/Online</li>
<li>Work in business days, no weekend.</li>
<li>Support 6 months</li>
</ul>
<a href="" class="theme-btn">pick this package</a>
</div>
</div>
<div class="col-md-6 scroll-animation" data-animation="fade_from_right">
<div class="pricing-table">
<div class="pricing-table-header">
<div class="top d-flex justify-content-between align-items-start">
<h4>premium</h4>
<p class="text-right">Not have any design?<br>
Leave its for me</p>
</div>
<h1>$99 <span>/ hours</span></h1>
</div>
<ul class="feature-lists">
<li>Don't need wireframe or anything</li>
<li>Design with Figma, Framer from scratch</li>
<li>Implement with Webflow, React, WordPress, Laravel/PHP</li>
<li>Remote/Online</li>
<li>Work with both weekend</li>
<li>Support 12 months</li>
<li>Your project alway be priority</li>
<li>Customer care gifts</li>
</ul>
<a href="" class="theme-btn">pick this package</a>
</div>
</div>
</div>
<p class="info scroll-animation" data-animation="fade_from_bottom">
Don't find any package match with your plan!<br>
Want to setup a new tailor-made package for only you?. <a href="">Contact Us</a>
</p>
</div>
</div>
</div>
</section>
<section class="contact-area page-section scroll-content" id="contact">
<div class="custom-container">
<div class="contact-content content-width">
<div class="section-header">
<h4 class="subtitle scroll-animation" data-animation="fade_from_bottom">
<i class="las la-dollar-sign"></i> contact
</h4>
<h1 class="scroll-animation" data-animation="fade_from_bottom">Let's Work <span>Together!</span></h1>
</div>
<h3 class="scroll-animation" data-animation="fade_from_bottom">hello@drake.design</h3>
<p id="required-msg">* Marked fields are required to fill.</p>
<form class="contact-form scroll-animation" data-animation="fade_from_bottom" method="POST" action="mailer.php">
<div class="alert alert-success messenger-box-contact__msg" style="display: none" role="alert">
Your message was sent successfully.
</div>
<div class="row">
<div class="col-md-6">
<div class="input-group">
<label for="full-name">full Name <sup>*</sup></label>
<input type="text" name="full-name" id="full-name" placeholder="Your Full Name">
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<label for="email">Email <sup>*</sup></label>
<input type="email" name="email" id="email" placeholder="Your email adress">
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<label for="phone-number">phone <span>(optional)</span></label>
<input type="text" name="phone-number" id="phone-number" placeholder="Your number phone">
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<label for="subject">subject <sup>*</sup></label>
<select name="subject" id="subject">
<option value="">Select a subject</option>
<option value="subject1">Subject 1</option>
<option value="subject2">Subject 2</option>
<option value="subject3">Subject 3</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="input-group">
<label for="budget">your budget <span>(optional)</span></label>
<input type="number" name="budget" id="budget" placeholder="A range budget for your project">
</div>
</div>
<div class="col-md-12">
<div class="input-group">
<label for="message">message</label>
<textarea name="message" id="message" placeholder="Wrire your message here ..."></textarea>
</div>
</div>
<div class="col-md-12">
<div class="input-group upload-attachment">
<div>
<label for="upload-attachment">
<i class="las la-cloud-upload-alt"></i> add an attachment
<input type="file" name="file" id="upload-attachment">
</label>
</div>
</div>
</div>
<div class="col-md-12">
<div class="input-group submit-btn-wrap">
<button class="theme-btn" name="submit" type="submit" id="submit-form">send message</button>
</div>
</div>
</div>
</form>
</div>
</div>
</section>
</div>
</div>
</main>
<script src="./assets/js/jquery.js"></script>
<script src="./assets/js/bootstrap.bundle.min.js"></script>
<script src="./assets/js/owl.carousel.js"></script>
<script src="./assets/js/gsap.min.js"></script>
<script src="./assets/js/ScrollTrigger.min.js"></script>
<script src="./assets/js/ScrollToPlugin.min.js"></script>
<script src="./assets/js/lightbox.min.js"></script>
<script src="./assets/js/main.js"></script>
<script src="./assets/js/ajax-form.js"></script>
<script src="./assets/js/color.js"></script>
</body>
</html>
Next, add the following CSS codes to your style.css
/*
-- Table of Content --
* 01 - Menu
* 02 - Responsive Sidebar Menu
* 03 - Global Color
* 04 - Header
* 05 - Section Header
* 06 - Left Sidebar
* 07 - Hero Section
* 08 - Home 3
* 09 - Home 5
* 10 - About
* 11 - Resume
* 12 - Services
* 13 - Skills
* 14 - Portfolio
* 15 - Testimonial
* 16 - Client
* 17 - Pricing Table
* 18 - Contact
* 19 - Breadcrumb
* 20 - Blog items
* 21 - Blog Style 2
* 22 - Blog Details
* 23 - Comment
* 24 - Comment Form
* 25 - Footer
* @Keyframe
*/
:root {
--primary_color: #28e98c;
}
*,*::before,*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
font-size: 16px;
scroll-behavior: smooth;
color: #999999;
background: #1f1f1f;
line-height: 1.7;
overflow-x: hidden;
height: 100vh;
}
.bg-white {
background: #fff;
}
img {
max-width: 100%;
}
a {
text-decoration: none;
}
.text-right {
text-align: right;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.content-width {
max-width: 770px;
width: 100%;
margin-left: auto;
}
.theme-btn {
background: var(--primary_color);
color: #000000;
display: block;
text-align: center;
padding: 11px 58px 10px 58px;
display: inline-flex;
align-items: center;
border-radius: 30px;
justify-content: center;
text-transform: uppercase;
border: none;
transition: .3s;
cursor: pointer;
border: 2px solid var(--primary_color);
}
.theme-btn i {
font-size: 24px;
margin-right: 10px;
display: block;
margin-bottom: 3px;
}
.theme-btn:hover {
background: none;
color: var(--primary_color);
}
.custom-container {
max-width: 1130px;
padding: 0 15px;
margin: auto;
}
.subtitle {
font-size: 12px;
color: #ffffff;
text-transform: uppercase;
font-weight: 300;
margin: 0;
border: 1px solid #565656;
padding: 9px 20px;
border-radius: 30px;
margin-bottom: 53px;
display: inline-flex;
align-items: center;
}
.subtitle i {
margin-bottom: 1px;
font-size: 14px;
margin-right: 10px;
}
.page-loader {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10000;
background: #000;
display: flex;
align-items: center;
justify-content: center;
}
.page-loader .bounceball {
position: relative;
display: inline-block;
height: 37px;
width: 15px;
}
.page-loader .bounceball:before {
position: absolute;
content: '';
display: block;
top: 0;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #fff;
transform-origin: 50%;
animation: bounceLoader 500ms alternate infinite ease;
}
/* Icon Menu */
.icon-menu {
position: absolute;
right: 68px;
top: 60px;
width: 55px;
height: 55px;
border-radius: 50%;
display: flex;
flex-direction: column;
border: 1px solid #575757;
align-items: center;
justify-content: center;
gap: 4px;
cursor: pointer;
transition: .3s;
background: #1f1f1f;
z-index: 99;
}
.icon-menu span {
width: 20px;
display: block;
height: 2px;
background: #fff;
transition: .3s;
}
.icon-menu:hover {
border-color: var(--primary_color);
}
.icon-menu:hover span {
background: var(--primary_color);
}
#scroll-section {
/* overflow-x: hidden !important;
overflow-y: auto !important; */
/* width: 100%; */
/* height: 100%; */
/* height: 100vh; */
}
.scroll-content {
/* transform: translate(0) !important; */
}
main.drake-main {
/* inset: 0px;
width: 100%;
height: 100vh;
position: fixed; */
/* overflow: hidden; */
}
.page-section {
overflow: hidden;
}
/* 01 - Menu */
.menu {
flex-direction: column;
border: 1px solid #575757;
border-radius: 30px;
position: fixed;
right: 68px;
top: 322px;
/* width: 55px; */
text-align: center;
gap: 20px;
padding: 24px 0;
background: #1f1f1f;
z-index: 20;
}
.menu li .scroll-to,
.menu li a {
display: block;
position: relative;
/* padding: 10px 10px; */
width: 55px;
transition: .3s;
color: #999999;
cursor: pointer;
}
.menu li a.active,
.menu li a:hover,
.menu li .scroll-to.active,
.menu li .scroll-to:hover {
color: var(--primary_color);
}
.menu li .scroll-to:hover span,
.menu li a:hover span {
opacity: 1;
visibility: visible;
}
.menu li .scroll-to i,
.menu li a i {
font-size: 20px;
display: block;
}
.menu li .scroll-to span,
.menu li a span {
position: absolute;
transition: .3s;
font-size: 12px;
background: #404042;
right: 100%;
color: #fff;
display: block;
padding: 3px 8px;
border-radius: 5px;
visibility: hidden;
opacity: 0;
}
.menu li .scroll-to span::before,
.menu li a span::before {
content: '';
width: 10px;
height: 10px;
background: #404042;
position: absolute;
right: -3px;
top: 50%;
transform: rotate(54deg) skew(-8deg, -39deg);
margin-top: -5px;
z-index: -1;
}
/* 02 - Responsive Sidebar Menu */
.responsive-sidebar-menu {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 99;
opacity: 0;
visibility: hidden;
transition: .2s;
}
.responsive-sidebar-menu.active {
opacity: 1;
visibility: visible;
}
.global-color .inner .overlay,
.responsive-sidebar-menu .overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #565656;
opacity: 0.5;
}
.responsive-sidebar-menu .sidebar-menu-inner {
max-width: 345px;
width: 100%;
margin-left: auto;
background: #191919;
height: 100%;
overflow-x: hidden;
padding-top: 50px;
margin-right: -250px;
transition: .3s;
}
.responsive-sidebar-menu.active .sidebar-menu-inner {
margin-right: 0;
}
.responsive-sidebar-menu .sidebar-menu-inner .menu-wrap {
width: 46%;
margin: auto;
}
.responsive-sidebar-menu .sidebar-menu-inner .menu-wrap p {
font-size: 18px;
}
.responsive-sidebar-menu .sidebar-menu-inner .menu-wrap .menu {
position: relative;
right: auto;
left: 0;
top: 0;
transform: translateY(0);
background: none;
border-radius: 0;
border: none;
margin-bottom: 30px;
}
.responsive-sidebar-menu .sidebar-menu-inner .menu-wrap .menu li a {
display: flex;
align-items: center;
gap: 10px;
}
.responsive-sidebar-menu .sidebar-menu-inner .menu-wrap .menu li a:hover span {
color: #fff;
}
.responsive-sidebar-menu .sidebar-menu-inner .menu-wrap .menu li a i {
margin-bottom: 2px;
}
.responsive-sidebar-menu .sidebar-menu-inner .menu-wrap .menu li a span {
position: relative;
right: 0;
opacity: 1;
visibility: visible;
color: #999999;
background: none;
margin: 0;
padding: 0;
border-radius: 0;
}
.responsive-sidebar-menu .sidebar-menu-inner .menu-wrap .menu li a span::before {
display: none
}
.responsive-sidebar-menu .sidebar-menu-inner .menu-wrap .menu li a.active span {
color: #fff;
}
.responsive-sidebar-menu .sidebar-menu-inner .global-color-option,
.responsive-sidebar-menu .sidebar-menu-inner .sidebar-social {
width: 46%;
margin: auto;
}
.responsive-sidebar-menu .sidebar-menu-inner .sidebar-social ul {
gap: 15px;
}
.responsive-sidebar-menu .sidebar-menu-inner .sidebar-social ul li a {
color: #999999;
transition: .3s;
font-size: 16px;
}
.responsive-sidebar-menu .sidebar-menu-inner .sidebar-social ul li a:hover {
color: var(--primary_color);
}
/* 03 - Global Color */
.global-color {
position: fixed;
left: 0;
top: 50px;
z-index: 100;
}
.global-color .inner {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 99;
opacity: 0;
visibility: hidden;
transition: .2s;
}
.global-color.active .inner {
opacity: 1;
visibility: visible;
}
.global-color .setting-toggle {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
cursor: pointer;
background: #1f1f1f;
}
.global-color .inner .global-color-option .close-settings {
position: absolute;
right: 20px;
top: 20px;
color: #fff;
font-size: 20px;
}
.global-color .inner .global-color-option .global-color-option-inner p {
text-transform: uppercase;
font-size: 13px;
color: #fff;
line-height: 1.2;
margin-bottom: 25px;
}
.global-color .inner .global-color-option .global-color-option-inner .themes {
display: flex;
flex-wrap: wrap;
padding-top: 30px;
}
.global-color .inner .global-color-option .global-color-option-inner .themes li {
margin-right: 80px;
margin-bottom: 55px;
}
.global-color .inner .global-color-option .global-color-option-inner .themes li a {
font-size: 14px;
color: #fff;
font-weight: 500;
display: block;
line-height: 1.2;
position: relative;
}
.global-color .inner .global-color-option .global-color-option-inner .themes li a::before {
content: '';
width: 100%;
height: 1px;
background: #fff;
position: absolute;
left: 0;
top: 50%;
opacity: 0;
transition: .3s;
}
.global-color .inner .global-color-option .global-color-option-inner .themes li a:hover::before,
.global-color .inner .global-color-option .global-color-option-inner .themes li.active a::before {
opacity: 1;
}
.global-color .inner .global-color-option {
max-width: 1043px;
width: 100%;
margin-left: auto;
background: #191919;
height: 100%;
overflow-x: hidden;
padding-top: 50px;
margin-right: -400px;
transition: .4s;
padding: 134px;
}
.global-color .inner .global-color-option h2 {
color: #fff;
font-weight: 200;
font-size: 34px;
line-height: 1.2;
margin-bottom: 80px;
}
.global-color.active .inner .global-color-option {
margin-right: 0;
}
.global-color .global-color-option .color-boxed {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 26px;
margin-bottom: 105px;
padding-top: 30px;
}
.global-color .global-color-option .color-boxed a {
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
position: relative;
background: #28e98c;
}
.global-color .global-color-option .color-boxed a::before {
content: '';
border: 1px solid #fff;
position: absolute;
border-radius: 50%;
width: calc(100% + 10px);
height: calc(100% + 10px);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: .3s;
}
.global-color .global-color-option .color-boxed a::after {
content: '';
position: absolute;
border: none;
transform: translate(-50%, -50%);
width: 4px;
height: 4px;
left: 50%;
top: 50%;
background: #fff;
border-radius: 50%;
opacity: 0;
}
.global-color .global-color-option .color-boxed a.clr-active::after,
.global-color .global-color-option .color-boxed a:hover::after,
.global-color .global-color-option .color-boxed a:hover::before,
.global-color .global-color-option .color-boxed a.clr-active::before {
opacity: 1;
}
.global-color .global-color-option .color-boxed a:nth-child(2) {
background: #e4af12;
}
.global-color .global-color-option .color-boxed a:nth-child(3) {
background: #fe6f1d;
}
.global-color .global-color-option .color-boxed a:nth-child(4) {
background: #14c5fd;
}
.global-color .global-color-option .color-boxed a:nth-child(5) {
background: #c0c0c0;
}
.global-color .global-color-option .color-boxed a:nth-child(6) {
background: #1338f3;
}
.global-color .global-color-option .color-boxed a:nth-child(7) {
background: #f31313;
}
.global-color .global-color-option .color-boxed a:nth-child(8) {
background: #ff99cc;
}
.global-color .global-color-option .color-boxed a:nth-child(9) {
background: #cceb00;
}
.global-color .global-color-option .color-boxed a i {
font-size: 14px;
}
/* 04 - Header */
.header-area {
background: #1f1f1f;
position: sticky;
top: 0;
z-index: 100;
padding: 25px 0;
}
.header-area .logo {
display: block;
}
.header-area .logo img {
display: block;
}
.header-area nav {
transition: .3s;
}
.header-area nav .nav-menu {
gap: 25px;
display: flex;
}
.header-area nav .nav-menu li {
position: relative;
}
.header-area nav .nav-menu li .toggle-sub-dropdown,
.header-area nav .nav-menu li .toggle-dropdown {
display: none;
width: 35px;
text-align: center;
}
.header-area nav .nav-menu li .dropdown {
position: absolute;
left: 0;
width: 200px;
background: #000;
box-shadow: 1px 6px 20px rgb(0 0 0 / 20%);
transition: .3s;
opacity: 0;
visibility: hidden;
padding: 5px 0;
}
.header-area nav .nav-menu li .dropdown li a {
padding: 8px 15px;
line-height: 1.2;
}
.header-area nav .nav-menu li:hover > .dropdown {
opacity: 1;
visibility: visible;
}
.header-area nav .nav-menu li .dropdown li .dropdown {
left: 100%;
top: 0;
}
.header-area nav .nav-menu li a {
color: #fff;
display: block;
transition: .3s;
padding: 8px 0;
}
.header-area nav .nav-menu li a:hover {
color: var(--primary_color);
}
.header-area .header-right .show-menu-toggle {
display: none;
width: 40px;
height: 40px;
border-radius: 4px;
align-items: center;
justify-content: center;
font-size: 20px;
cursor: pointer;
color: #fff;
border: 1px solid rgb(255 255 255 / 30%);
margin-left: auto;
}
.header-area nav .close-menu {
display: none;
cursor: pointer;
position: absolute;
right: 30px;
top: 30px;
font-size: 25px;
cursor: pointer;
color: #fff;
}
/* 05 - Section Header */
.section-header h1 {
font-size: 48px;
line-height: 60px;
color: #fff;
font-weight: 300;
margin-bottom: 33px;
}
.section-header h1 span {
color: var(--primary_color);
}
/* 06 - Left Sidebar */
.left-sidebar {
max-width: 485px;
width: 100%;
border-radius: 30px;
border: 1px solid #565656;
position: fixed;
left: 20px;
top: 50%;
transform: translateY(-50%);
padding: 50px;
z-index: 10;
}
.drake-main .left-sidebar {
display: none;
}
.left-sidebar > img.me {
border-radius: 30px;
display: block;
margin-bottom: 56px;
}
.left-sidebar .sidebar-header {
margin-bottom: 65px;
}
.left-sidebar .sidebar-header .designation {
max-width: 110px;
text-align: right;
color: #fff;
font-size: 14px;
font-weight: 400;
}
.left-sidebar h2 {
font-size: 24px;
color: #fff;
text-align: center;
font-weight: 300;
}
.left-sidebar .address {
margin-bottom: 30px;
}
.left-sidebar .copyright {
font-size: 14px;
text-align: center;
margin-bottom: 45px;
}
.left-sidebar .social-profile {
gap: 8px;
margin-bottom: 118px;
}
.left-sidebar .social-profile li a {
display: block;
width: 50px;
height: 50px;
line-height: 46px;
text-align: center;
border: 2px solid #565656;
border-radius: 50%;
color: #999999;
font-size: 20px;
transition: .3s;
}
.left-sidebar .social-profile li a:hover {
color: var(--primary_color);
border-color: var(--primary_color);
}
.left-sidebar .theme-btn {
width: 100%;
}
/* 07 - Hero Section */
.hero-section {
padding: 68px 0;
position: relative;
overflow: hidden;
}
.hero-section .hero-content {
position: relative;
z-index: 3;
}
.hero-section .hero-content h1 {
font-size: 78px;
letter-spacing: -0.2px;
line-height: 90px;
margin-bottom: 43px;
font-weight: 300;
}
.hero-section .hero-content h1 span {
color: var(--primary_color);
}
.hero-section .hero-content > p {
max-width: 480px;
margin-bottom: 31px;
}
.hero-section .hero-content .go-to-project-btn {
width: 175px;
height: 175px;
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
border-radius: 50%;
border: 1px solid #575757;
position: relative;
overflow: hidden;
margin-right: 15px;
}
.hero-section .hero-content .go-to-project-btn img {
display: block;
animation: rotating 6s infinite linear;
}
.hero-section .hero-content .go-to-project-btn i {
position: absolute;
color: #fff;
font-size: 40px;
display: block;
}
.hero-section .hero-content .facts {
gap: 100px;
margin-top: 55px;
}
.hero-section .hero-content .facts h1 {
font-size: 72px;
color: var(--primary_color);
line-height: 56px;
margin-bottom: 38px;
}
.hero-section .hero-content .facts p {
font-size: 14px;
line-height: 24px;
text-transform: uppercase;
}
/* 08 - Home 3 */
.home1-page,
.home5-page,
.home6-page {
background: #000;
}
.home-3 {
overflow: hidden;
}
.home-3:before {
content: '';
background: #000;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.6;
}
.home1-page .menu,
.home5-page .menu,
.home6-page .menu,
.home1-page .icon-menu,
.home5-page .icon-menu,
.home6-page .icon-menu {
background: #000000;
}
/* 09 - Home 5 */
body .body-overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.home2-page .body-overlay,
.home3-page .body-overlay {
opacity: 0.1;
}
.home1-page .body-overlay,
.home4-page .body-overlay,
.home5-page .body-overlay {
opacity: 0.3;
}
/* 10 - About */
.about-area {
padding-top: 90px;
padding-bottom: 90px;
}
.about-area .about-content p {
line-height: 30px;
max-width: 610px;
}
/* 11 - Resume */
.resume-area {
padding-top: 90px;
padding-bottom: 90px;
}
.resume-area .resume-content .resume-timeline .item {
position: relative;
padding-left: 74px;
padding-bottom: 68px;
}
.resume-area .resume-content .resume-timeline .item:last-child {
padding-bottom: 0;
}
.resume-area .resume-content .resume-timeline .item:last-child::after {
height: calc(100% - 10px);
}
.resume-area .resume-content .resume-timeline .item::after {
content: '';
background: #333333;
width: 1px;
height: 100%;
position: absolute;
left: 0;
top: 10px;
z-index: -1;
}
.resume-area .resume-content .resume-timeline .item::before {
content: '';
position: absolute;
width: 12px;
height: 12px;
background: #656565;
border-radius: 50%;
left: -6px;
top: 7px;
transition: .3s;
}
.resume-area .resume-content .resume-timeline .item .date {
display: block;
margin-bottom: 28px;
transition: .3s;
}
.resume-area .resume-content .resume-timeline .item h2 {
font-size: 24px;
font-weight: 300;
margin-bottom: 5px;
color: #fff;
}
.resume-area .resume-content .resume-timeline .item h2 a {
color: #fff;
display: block;
}
.resume-area .resume-content .resume-timeline .item p {
font-size: 13px;
color: #999999;
margin-bottom: 18px;
}
.resume-area .resume-content .resume-timeline .item p:last-child {
margin-bottom: 0;
}
.resume-area .resume-content .resume-timeline .item:hover::before {
background: var(--primary_color);
}
.resume-area .resume-content .resume-timeline .item:hover .date {
color: var(--primary_color);
}
/* 12 - Services */
.services-area {
padding-top: 90px;
padding-bottom: 90px;
}
.services-items .service-item {
border: 1px solid #565656;
border-radius: 20px;
transition: .3s;
position: relative;
padding: 44px 48px 41px 48px;
margin-bottom: 10px;
}
.services-items .service-item:last-child {
margin-bottom: 0;
}
.services-items .service-item h2 {
font-size: 24px;
font-weight: 300;
margin-bottom: 8px;
color: #fff;
}
.services-items .service-item h2 a {
color: #fff;
transition: .3s;
}
.services-items .service-item:hover {
border-color: var(--primary_color);
}
.services-items .service-item:hover h2 a {
color: var(--primary_color);
}
.services-items .service-item p {
font-size: 14px;
color: #999999;
margin-bottom: 30px;
}
.services-items .service-item .projects {
font-size: 12px;
color: #fff;
text-transform: uppercase;
display: inline-block;
}
.services-items .service-item:hover .projects {
text-decoration: underline;
}
.services-items .service-item i {
position: absolute;
font-size: 30px;
color: var(--primary_color);
top: 45px;
right: 50px;
}
/* 13 - Skills */
.skills-area {
padding-top: 90px;
padding-bottom: 40px;
}
.skills .skill {
margin-bottom: 50px;
}
.skills .skill .skill-inner {
border: 2px solid #565656;
border-radius: 85px;
padding: 54px 0 48px 0;
margin-bottom: 20px;
transition: .3s;
}
.skills .skill:hover .skill-inner {
border-color: var(--primary_color);
}
.skills .skill .skill-inner img {
display: block;
margin: auto auto 29px auto;
}
.skills .skill .skill-inner h1 {
font-size: 30px;
color: var(--primary_color);
font-weight: 300;
margin: 0;
}
.skills .skill p {
font-size: 14px;
color: #fff;
margin: 0;
}
/* 14 - Portfolio */
.portfolio-area {
padding-top: 90px;
padding-bottom: 90px;
}
.portfolio-items .portfolio-item {
margin-bottom: 62px;
}
.portfolio-items > div:last-child .portfolio-item {
margin-bottom: 0;
}
.portfolio-items .portfolio-item .portfolio-item-inner {
height: 370px;
overflow: hidden;
border-radius: 30px;
position: relative;
margin-bottom: 30px;
}
.portfolio-items .portfolio-item.portfolio-full .portfolio-item-inner {
height: 410px;
}
.portfolio-items .portfolio-item .portfolio-item-inner img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.portfolio-items .portfolio-item .portfolio-item-inner .portfolio-categories {
position: absolute;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
bottom: 20px;
left: 20px;
}
.portfolio-items .portfolio-item .portfolio-item-inner .portfolio-categories li a {
display: block;
font-size: 14px;
background: #fff;
color: #000;
padding: 7px 20px;
border-radius: 19px;
transition: .3s;
}
.portfolio-items .portfolio-item:hover .portfolio-item-inner .portfolio-categories li a {
background: #1f1f1f;
color: #fff;
}
.portfolio-items .portfolio-item h2 {
font-size: 24px;
font-weight: 300;
margin: 0;
}
.portfolio-items .portfolio-item h2 a {
color: #fff;
display: inline-block;
border-bottom: 1px solid transparent;
transition: .3s;
}
.portfolio-items .portfolio-item:hover h2 a {
border-color: #ffffff;
}
/* 15 - Testimonial */
.testimonial-item .testimonial-item-inner {
border: 2px solid #565656;
border-radius: 30px;
padding: 50px 50px 43px 50px;
}
.testimonial-item .testimonial-item-inner .author {
gap: 16px;
margin-bottom: 45px;
}
.testimonial-item .testimonial-item-inner .author img {
width: 45px;
height: 45px;
border-radius: 50%;
object-fit: cover;
}
.testimonial-item .testimonial-item-inner .author h3 {
font-size: 18px;
font-weight: 300;
color: #fff;
margin-bottom: 6px;
}
.testimonial-item .testimonial-item-inner .author p {
color: #999999;
font-size: 13px;
margin: 0;
line-height: 1.3;
}
.testimonial-item .testimonial-item-inner .author p span {
color: var(--primary_color);
}
.testimonial-item .testimonial-item-inner > p {
font-size: 24px;
color: #fff;
font-weight: 300;
line-height: 36px;
margin-bottom: 27px;
}
.testimonial-item .testimonial-item-inner .project-btn {
font-size: 12px;
color: #fff;
text-transform: uppercase;
display: inline-block;
}
.testimonial-area .testimonial-slider-wrap .testimonial-footer-nav {
margin-top: 50px;
}
.testimonial-area .testimonial-slider-wrap .testimonial-footer-nav .testimonial-nav {
gap: 15px;
}
.testimonial-area .testimonial-slider-wrap .testimonial-footer-nav .testimonial-nav button {
width: 45px;
height: 45px;
display: block;
background: none;
border-radius: 50%;
text-align: center;
border: 2px solid #565656;
font-size: 18px;
color: #fff;
transition: .3s;
}
.testimonial-area .testimonial-slider-wrap .testimonial-footer-nav .testimonial-nav button:hover {
border-color: var(--primary_color);
color: var(--primary_color);
}
.testimonial-area .testimonial-slider-wrap .testimonial-footer-nav .testimonial-nav #testimonial-slide-count {
font-size: 13px;
color: #666666;
font-weight: 300;
}
.testimonial-area .testimonial-slider-wrap .testimonial-footer-nav .testimonial-nav #testimonial-slide-count .left {
color: #fff;
}
/* 16 - Client */
.clients-logos {
padding-top: 100px;
}
.clients-logos h4 {
color: #fff;
text-transform: uppercase;
font-size: 14px;
font-weight: 300;
margin-bottom: 57px;
}
.clients-logos .col-md-3 {
margin-bottom: 74px;
}
.clients-logos img {
display: block;
opacity: 0.3;
transition: .3s;
}
.clients-logos img:hover {
opacity: 1;
}
/* 17 - Pricing Table */
.pricing-area {
padding-top: 90px;
padding-bottom: 90px;
}
.pricing-table-items .pricing-table {
border: 1px solid #565656;
border-radius: 30px;
padding: 37px 40px 40px 40px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: .3s;
}
.pricing-table-items .pricing-table:hover {
border-color: var(--primary_color);
}
.pricing-table-items .pricing-table .pricing-table-header {
border-bottom: 1px solid #555555;
padding-bottom: 20px;
margin-bottom: 34px;
}
.pricing-table-items .pricing-table .pricing-table-header .top {
margin-bottom: 30px;
}
.pricing-table-items .pricing-table .pricing-table-header h4 {
font-size: 18px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
margin: 0;
}
.pricing-table-items .pricing-table .pricing-table-header .top p {
font-size: 13px;
line-height: 20px;
color: #999999;
margin: 0;
}
.pricing-table-items .pricing-table .pricing-table-header h1 {
font-size: 48px;
color: var(--primary_color);
font-weight: 300;
margin: 0;
}
.pricing-table-items .pricing-table .pricing-table-header h1 span {
font-size: 24px;
color: #999999;
}
.pricing-table-items .pricing-table ul {
margin-bottom: 80px;
}
.pricing-table-items .pricing-table ul li {
font-size: 14px;
color: #fff;
line-height: 24px;
font-weight: 300;
margin-bottom: 10px;
}
.pricing-table-items .pricing-table ul li:last-child {
margin-bottom: 0;
}
.pricing-table-items .info {
font-size: 14px;
color: #fff;
line-height: 24px;
margin: 60px 0 0 0;
}
.pricing-table-items .info a {
color: var(--primary_color);
text-decoration: underline;
}
/* 18 - Contact */
.contact-area {
padding-bottom: 50px;
}
.contact-area .contact-content h3 {
font-size: 24px;
color: #fff;
font-weight: 300;
margin-bottom: 60px;
}
.contact-area .contact-content #required-msg {
color: #fc4545;
font-size: 14px;
margin-bottom: 31px;
display: none;
}
.contact-area .contact-content #required-msg.show {
display: block;
}
.contact-area .contact-content .contact-form .input-group {
margin-bottom: 34px;
}
.contact-area .contact-content .contact-form .input-group label {
display: block;
font-size: 12px;
text-transform: uppercase;
color: #fff;
margin-bottom: 2px;
}
.contact-area .contact-content .contact-form .input-group label sup {
color: #fc4545;
font-size: 12px;
top: 0;
}
.contact-area .contact-content .contact-form .input-group label span {
color: #999999;
text-transform: none;
}
.contact-area .contact-content .contact-form .input-group select,
.contact-area .contact-content .contact-form .input-group textarea,
.contact-area .contact-content .contact-form .input-group input {
display: block;
color: #fff;
width: 100%;
border: none;
background: none;
font-size: 18px;
padding: 0;
transition: .2s;
padding-bottom: 3px;
}
.contact-area .contact-content .contact-form .input-group textarea {
height: 140px;
border-bottom: 1px solid #555555;
resize: none;
}
.contact-area .contact-content .contact-form .input-group select {
display: block;
margin-left: -5px !important;
font-weight: 300;
}
.contact-area .contact-content .contact-form .input-group select:focus,
.contact-area .contact-content .contact-form .input-group textarea:focus,
.contact-area .contact-content .contact-form .input-group input:focus {
outline: none;
box-shadow: none;
border-color: #555555;
}
.contact-area .contact-content .contact-form .input-group textarea::placeholder,
.contact-area .contact-content .contact-form .input-group input::placeholder {
color: #666666;
}
.contact-area .contact-content .contact-form .input-group.upload-attachment {
position: relative;
}
.contact-area .contact-content .contact-form .input-group.upload-attachment label {
overflow: hidden;
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
}
.contact-area .contact-content .contact-form .input-group.upload-attachment label i {
font-size: 18px;
display: block;
margin-bottom: 2px;
}
.contact-area .contact-content .contact-form .input-group.upload-attachment input {
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
.contact-area .contact-content .contact-form .input-group.submit-btn-wrap {
margin-bottom: 0;
margin-top: 18px;
}
/* 19 - Breadcrumb */
.breadcrumb-area {
position: relative;
padding: 50px 0px 50px;
background: #1f1f1f;
overflow: hidden;
z-index: 1;
}
.breadcrumb-area::before,
.breadcrumb-area::after {
content: '';
position: absolute;
left: -50px;
top: -50px;
width: 200px;
height: 200px;
border-radius: 50%;
background: rgb(255 255 255 / 10%);
z-index: -1;
box-shadow: 0px 0px 0 20px rgb(255 255 255 / 5%);
}
.breadcrumb-area::after {
left: auto;
right: -50px;
top: auto;
bottom: -50px;
}
.breadcrumb-area .breadcrumb-content h1 {
font-size: 45px;
color: #fff;
font-weight: 300;
margin-bottom: 20px;
}
.breadcrumb-area .breadcrumb-content .breadcrumbs {
display: flex;
align-items: center;
gap: 10px;
}
.breadcrumb-area .breadcrumb-content .breadcrumbs li {
text-transform: uppercase;
color: #d1d1d1;
font-size: 14px;
position: relative;
display: flex;
align-items: center;
gap: 8px;
}
.breadcrumb-area .breadcrumb-content .breadcrumbs li i {
display: block;
margin-bottom: 1px;
}
.breadcrumb-area .breadcrumb-content .breadcrumbs li:last-child::before {
display: none;
}
.breadcrumb-area .breadcrumb-content .breadcrumbs li a {
font-weight: 500;
color: #ffffff;
}
/* 20 - Blog items */
.blog-content-area {
padding-top: 100px;
padding-bottom: 60px;
}
.blog-content-area .blog-items {
padding-right: 20px;
}
.blog-item {
margin-bottom: 40px;
}
.blog-item .blog-thumbnail {
margin-bottom: 30px;
}
.blog-item .blog-thumbnail img {
display: block;
width: 100%;
border-radius: 6px;
}
.blog-item .meta {
display: flex;
align-items: center;
gap: 35px;
margin-bottom: 10px;
}
.blog-item .meta li {
text-transform: uppercase;
font-size: 14px;
position: relative;
line-height: 1.2;
}
.blog-item .meta li::before {
content: '';
position: absolute;
right: -21px;
top: 7px;
background: #808080;
width: 5px;
height: 5px;
border-radius: 50%;
}
.blog-item .meta li:last-child::before {
display: none;
}
.blog-item .meta li a {
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
transition: .3s;
/* opacity: 0.5; */
color: #fff;
background: linear-gradient(to top right, var(--primary_color) -200%,transparent 300%);
background-repeat: no-repeat;
background-size: 0 0.0625em;
background-position: 0 95%;
transition: .25s;
}
.blog-item .meta li a:hover {
background-size: 100% 0.3625em;
}
.blog-item .meta li a i {
display: block;
font-size: 18px;
margin-bottom: 1px;
color: var(--primary_color);
}
.blog-item .blog-item-content h1 {
font-size: 28px;
line-height: 1.2;
margin-bottom: 20px;
}
.blog-item .blog-item-content h1 a {
color: #fff;
display: inline-block;
background: linear-gradient(to top right,var(--primary_color) -200%,transparent 300%);
background-repeat: no-repeat;
background-size: 0 0.0625em;
background-position: 0 95%;
transition: .25s;
}
.blog-item .blog-item-content h1 a:hover {
background-size: 100% 0.3625em;
}
.blog-item p {
/* color: #686a6f; */
line-height: 1.8;
margin-bottom: 15px;
}
.blog-item .blog-item-content .read-more-btn {
display: inline-block;
text-transform: uppercase;
position: relative;
font-size: 16px;
color: #fff;
font-weight: 500;
letter-spacing: 0.4px;
border-bottom: 2px solid var(--primary_color);
padding: 4px 0;
transition: .3s;
}
.blog-item .blog-item-content .read-more-btn:hover {
border-color: #fff;
color: var(--primary_color);
}
.blog-sidebar .blog-sidebar-item {
padding: 40px;
background: #2a2a2a;
margin-bottom: 40px;
border-radius: 4px;
}
.blog-sidebar .blog-sidebar-item:last-child {
margin-bottom: 0;
}
.blog-sidebar .blog-sidebar-item h3 {
font-size: 20px;
font-weight: 600;
line-height: 1.1;
color: #ffffff;
margin-bottom: 30px;
position: relative;
display: inline-block;
}
.blog-sidebar .blog-sidebar-item h3::before {
content: '';
width: 50px;
height: 2px;
background: var(--primary_color);
right: -60px;
position: absolute;
top: 11px;
}
.blog-sidebar .blog-sidebar-item ul li {
line-height: 1.6;
padding: 10px 0;
border-bottom: 1px solid #686a70;
margin: 3px 0;
}
.blog-sidebar .blog-sidebar-item ul li:first-child {
margin-top: 0;
padding-top: 0;
}
.blog-sidebar .blog-sidebar-item ul li:last-child {
padding-bottom: 0;
margin-bottom: 0;
border: none;
}
.blog-sidebar .blog-sidebar-item ul li a {
display: block;
color: #ffffff;
font-weight: 300;
transition: .3s;
}
.blog-sidebar .blog-sidebar-item ul li a:hover {
color: var(--primary_color);
}
.blog-sidebar .blog-sidebar-item.blog-sidebar-search {
padding: 0;
background: none;
}
.search-form {
display: block;
position: relative;
}
.search-form input {
display: block;
width: 100%;
line-height: 40px;
padding: 19px 80px 19px 35px;
background: #2a2a2a;
border-radius: 4px;
border: 1px solid transparent;
font-weight: 300;
transition: .3s;
color: #fff;
}
.search-form input:focus {
box-shadow: none;
outline: none;
border-color: var(--primary_color);
}
.search-form button {
position: absolute;
right: 0;
top: 0;
height: 100%;
border: none;
background: none;
cursor: pointer;
width: 70px;
font-size: 25px;
color: #fff;
}
.blog-sidebar .blog-sidebar-item.blog-tags ul {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
.blog-sidebar .blog-sidebar-item.blog-tags ul li {
padding: 0;
margin: 0;
border: none;
}
.blog-sidebar .blog-sidebar-item.blog-tags ul li a {
background: #fff;
padding: 6px 18px;
color: #000;
font-weight: 400;
border-radius: 30px;
font-size: 14px;
}
.blog-sidebar .blog-sidebar-item.blog-tags ul li a:hover {
background: #000;
color: #fff;
}
/* 21 - Blog Style 2 */
.blog-item2 {
text-align: center;
}
.blog-item2 .blog-thumbnail {
height: 255px;
margin-bottom: 0;
}
.blog-item2 .blog-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.blog-item2 .blog-item-content {
position: relative;
margin-top: -22px;
padding: 0 20px;
}
.blog-item2 .meta {
margin: 0;
background: #2a2a2a;
padding: 12px 20px;
border-radius: 4px;
display: inline-flex;
box-shadow: 0px 10px 30px 0px rgb(0 0 0 / 5%);
margin-bottom: 20px;
}
.blog-item2 .meta li {
font-size: 12px;
}
.blog-item2 .meta li a {
color: #a0a0a0;
}
.blog-item2 .meta li a:hover {
color: #fff;
}
.blog-item2 .meta li a,
.blog-item2 .blog-item-content h1 a {
background: none;
}
.blog-item2 .blog-item-content h1 {
font-size: 25px;
}
.blog-item2 .blog-item-content h1 a:hover {
color: var(--primary_color);
}
.blog-item2 .blog-item-content .read-more-btn {
font-size: 14px;
}
/* 22 - Blog Details */
.blog-details-area {
padding-top: 100px;
padding-bottom: 100px;
}
.blog-details-area .blog-details-content .meta {
margin-bottom: 15px;
}
.blog-details-area .blog-details-content p {
font-size: 15px;
color: #999999;
color: #fff;
font-weight: 300;
}
.blog-details-area .blog-details-content h3 {
color: #ffffff;
font-size: 22px;
font-weight: 600;
margin-bottom: 15px;
}
.blog-details-area .blog-details-content .lists {
margin-bottom: 1rem;
}
.blog-details-area .blog-details-content .lists li {
display: block;
position: relative;
font-size: 15px;
line-height: 32px;
padding-left: 25px;
}
.blog-details-area .blog-details-content .lists li::before {
content: '';
background: #999999;
width: 10px;
height: 2px;
position: absolute;
top: 15px;
left: 5px;
}
.blog-details-area .blog-details-content .tags {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 40px;
}
.blog-details-area .blog-details-content .tags li a {
display: block;
background: #fff;
color: #000;
font-size: 14px;
font-weight: 500;
padding: 7px 20px;
border-radius: 30px;
transition: .3s;
}
.blog-details-area .blog-details-content .tags li a:hover {
background: #000000;
color: #fff;
}
/* 23 - Comment */
.comments-area h3 {
color: #fff;
font-size: 20px;
font-weight: 500;
margin-bottom: 30px;
line-height: 1.2;
}
.comments-area .comments .comments-list .comment-item {
margin-bottom: 40px;
}
.comments-area .comments .comments-list .comment-item .comment-body {
display: flex;
align-items: flex-start;
gap: 30px;
}
.comments-area .comments .comments-list .comment-item .comment-body .comment-avatar {
flex: none;
width: 90px;
height: 90px;
border-radius: 50%;
}
.comments-area .comments .comments-list .comment-item .comment-body .comment-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.comments-area .comments .comments-list .comment-item .comment-body .comment-content {
flex: 1;
}
.comments-area .comments .comments-list .comment-item .comment-body .comment-content h4 {
color: #fff;
font-size: 20px;
line-height: 1.1;
display: flex;
align-items: center;
margin-bottom: 20px;
}
.comments-area .comments .comments-list .comment-item .comment-body .comment-content h4 .date {
display: block;
font-size: 12px;
font-weight: 400;
margin-left: 40px;
/* color: #999999; */
position: relative;
text-transform: uppercase;
color: var(--primary_color);
}
.comments-area .comments .comments-list .comment-item .comment-body .comment-content h4 .date::before {
content: '';
width: 20px;
height: 1px;
position: absolute;
left: -25px;
top: 5px;
/* background: #999999; */
background: var(--primary_color);
}
.comments-area .comments .comments-list .comment-item .comment-body .comment-content p {
color: #686a6f;
margin: 0;
}
.comments-area .comments .comments-list .comment-item .comment-body .comment-content .reply-btn {
text-transform: uppercase;
padding: 7px 20px;
font-size: 12px;
margin-top: 20px;
}
.comments-area .comments .children {
padding-left: 60px;
border-top: 1px solid #686a70;
padding-top: 40px;
}
/* 24 - Comment Form */
.comment-form {
padding-top: 20px;
}
.comment-form h3 {
color: #fff;
font-size: 20px;
font-weight: 500;
margin-bottom: 30px;
line-height: 1.2;
}
.comment-form form .input-group {
margin-bottom: 20px;
}
.comment-form form .input-group input,
.comment-form form .input-group textarea {
font-size: 14px;
display: block;
color: #fff;
width: 100%;
border: none;
background: none;
padding: 0;
transition: .2s;
padding-bottom: 3px;
}
.comment-form form .input-group input:focus,
.comment-form form .input-group textarea:focus {
outline: none;
box-shadow: none;
}
.comment-form form .input-group textarea {
height: 180px;
border-bottom: 1px solid #555555;
resize: none;
}
/* 25 - Footer */
.footer-area {
background: #1f1f1f;
position: relative;
overflow: hidden;
z-index: 1;
padding-top: 100px;
padding-bottom: 100px;
}
.footer-area::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
background: url('../images/bg-shape.png') center no-repeat;
background-size: cover;
opacity: 0.4;
}
.footer-area .footer-widget-item h3 {
color: #fff;
text-transform: capitalize;
font-weight: 600;
margin-bottom: 30px;
font-size: 20px;
}
.footer-area .footer-widget-item p {
color: #cccccc;
font-size: 15px;
}
.footer-area .footer-widget-item .social-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 30px;
margin-top: 30px;
}
.footer-area .footer-widget-item .social-links li a {
color: #ccc;
font-size: 18px;
transition: .3s;
}
.footer-area .footer-widget-item .social-links li a:hover {
color: #fff;
}
.footer-area .footer-widget-item .social-links li a i {
display: block;
}
.footer-area .footer-widget-item.footer-links ul li + li {
margin-top: 15px;
}
.footer-area .footer-widget-item.footer-links ul li a {
color: #ccc;
font-size: 15px;
display: block;
transition: .3s;
}
.footer-area .footer-widget-item.footer-links ul li a:hover {
color: #fff;
}
.footer-area .footer-widget-item.footer-contact-widget ul li {
display: block;
}
.footer-area .footer-widget-item.footer-contact-widget ul li + li {
margin-top: 15px;
}
.footer-area .footer-widget-item.footer-contact-widget ul li .title {
color: #fff;
text-transform: uppercase;
font-weight: 700;
display: block;
position: relative;
z-index: 1;
font-size: 14px;
margin-bottom: 5px;
line-height: 1.2;
}
.footer-area .footer-widget-item.footer-contact-widget ul li .sub-title {
color: #cccccc;
font-size: 15px;
}
/* @Keyframe */
@keyframes rotating {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@keyframes bounceLoader {
0% {
top: 30px;
height: 5px;
border-radius: 60px 60px 20px 20px;
transform: scaleX(2);
}
35% {
height: 15px;
border-radius: 50%;
transform: scaleX(1);
}
100% {
top: 0;
}
}
/*Additional CSS*/
.global-color .setting-toggle {
border-radius: 5px !important;
}
.global-color .setting-toggle i {
animation: rotating 3s infinite linear !important;
}
Next, add the following JS codes to your JS.css
$(function(){
$(window).on('load', function () {
$('.page-loader').delay('500').fadeOut(1000);
});
$(document).ready(function() {
$(document).on('click', '.icon-menu', function() {
$('.responsive-sidebar-menu').addClass('active');
});
$(document).on('click', '.responsive-sidebar-menu .overlay', function() {
$('.responsive-sidebar-menu').removeClass('active');
});
$(document).on('click', '.menu li .scroll-to', function() {
$('.responsive-sidebar-menu').removeClass('active');
})
$(document).on('click', ".color-boxed a", function() {
$(".color-boxed a").removeClass("clr-active");
$(this).addClass("clr-active");
});
$(document).on('click', ".global-color .setting-toggle", function() {
$(".global-color").addClass("active");
});
$(document).on('click', ".global-color .inner .overlay, .global-color .inner .global-color-option .close-settings", function() {
$(".global-color").removeClass("active");
});
});
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 0) {
$('.page-section').each(function(i) {
if ($(this).position().top <= windscroll - -1) {
$('.scroll-nav .scroll-to.active').removeClass('active');
$('.scroll-nav .scroll-to').eq(i).addClass('active');
$('.scroll-nav-responsive a.active').removeClass('active');
$('.scroll-nav-responsive a').eq(i).addClass('active');
}
});
} else {
$('.scroll-nav .scroll-to.active').removeClass('active');
$('.scroll-nav .scroll-to:first').addClass('active');
$('.scroll-nav-responsive a.active').removeClass('active');
$('.scroll-nav-responsive a:first').addClass('active');
}
if (windscroll >= 0) {
$('.scroll-to-page').each(function(i) {
var wscrolldecress = windscroll + 1;
// console.log(wscrolldecress);
if ($(this).position().top <= wscrolldecress - 0) {
$('.scroll-nav .scroll-to.active').removeClass('active');
$('.scroll-nav .scroll-to').eq(i).addClass('active');
$('.scroll-nav-responsive a.active').removeClass('active');
$('.scroll-nav-responsive a').eq(i).addClass('active');
}
});
} else {
$('.scroll-nav .scroll-to.active').removeClass('active');
$('.scroll-nav .scroll-to:first').addClass('active');
$('.scroll-nav-responsive a.active').removeClass('active');
$('.scroll-nav-responsive a:first').addClass('active');
}
}).scroll();
if ($('.testimonial-slider').length) {
var testimonial = $('.testimonial-slider').owlCarousel({
items: 1,
margin: 30,
stagePadding: 0,
smartSpeed: 450,
autoHeight: true,
loop: false,
nav: false,
dots: false,
onInitialized : counter, //When the plugin has initialized.
onTranslated : counter //When the translation of the stage has finished.
});
$('.testimonial-nav .next').on('click', function() {
testimonial.trigger('next.owl.carousel');
})
$('.testimonial-nav .prev').on('click', function() {
testimonial.trigger('prev.owl.carousel', [300]);
})
function counter(event) {
var element = event.target; // DOM element, in this example .owl-carousel
var items = event.item.count; // Number of items
var item = event.item.index + 1; // Position of the current item
// it loop is true then reset counter from 1
if(item > items) {
item = item - items
}
$('#testimonial-slide-count').html("<span class='left'>"+item+"</span> / "+items)
}
}
// function remove_is_active() {
// $(".menu .scroll-to").removeClass("active");
// }
// gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
// var container = document.querySelector("#smooth-content");
// var height;
// function setHeight() {
// height = container.clientHeight;
// document.body.style.height = height + "px";
// }
// ScrollTrigger.addEventListener("refreshInit", setHeight);
// gsap.to(container, {
// y: () => -(height - document.documentElement.clientHeight),
// ease: "none",
// scrollTrigger: {
// trigger: container,
// start: "top top",
// end: "bottom bottom",
// scrub: 1,
// invalidateOnRefresh: true,
// }
// });
window.addEventListener('scroll', {
scroll_animations,
});
// Array.prototype.slice.call(document.querySelectorAll(".page-section")).forEach(function (e, t) {
// ScrollTrigger.create({
// trigger: e,
// id: t + 1,
// start: "top center",
// end: function () {
// return "+=".concat(e.clientHeight - 30);
// },
// toggleActions: "play reverse none reverse",
// toggleClass: { targets: e, className: "active" },
// onToggle: function () {
// $(".menu .scroll-to").removeClass("active"), "" != e.id && $('.menu .scroll-to[href*="#' + e.id + '"]').addClass("active");
// },
// });
// });
// document.querySelectorAll('.scroll-to').forEach((e) => {
// const target = e.getAttribute('href');
// const targetEl = document.querySelector(target);
// // const targetRect = targetEl.getBoundingClientRect();
// var offset = gsap.getProperty("#smooth-content", "y");
// var position = jQuery(target).get(0).getBoundingClientRect().top - offset;
// e.addEventListener('click', (e) => {
// e.preventDefault();
// gsap.to(window, {
// scrollTo: position,
// ease: "power4",
// duration: 0.1,
// onToggle: function () {
// console.log('toggle');
// remove_is_active();
// if (targetEl.id != "") $('.menu .scroll-to[href*="#' + targetEl.id + '"]').addClass("active");
// },
// onLeaveBack: function () {
// console.log('leave back');
// remove_is_active();
// if (targetEl.id != "") $('.menu .scroll-to[href*="#' + targetEl.id + '"]').addClass("active");
// },
// onLeave: function () {
// console.log('leave');
// remove_is_active();
// if (targetEl.id != "") $('.menu .scroll-to[href*="#' + targetEl.id + '"]').addClass("active");
// },
// overwrite: !0,
// });
// });
// });
});
function scroll_animations() {
// var allow_on_mobile = !0;
// if (typeof config_scroll_animation_on_mobile !== "undefined") allow_on_mobile = config_scroll_animation_on_mobile;
// if (allow_on_mobile == !1 && is_mobile_device) return;
var defaults = {
duration: 1.2,
ease: "power4.out",
animation: "fade_from_bottom",
once: !1,
};
gsap.utils.toArray(".scroll-animation").forEach(function (box) {
var gsap_obj = {};
var settings = {
// ease: box.dataset.animationEase || defaults.ease,
duration: box.dataset.animationDuration || defaults.duration,
};
var animations = {
fade_from_bottom: {
y: 180,
opacity: 0,
},
fade_from_top: {
y: -180,
opacity: 0,
},
fade_from_left: {
x: -180,
opacity: 0,
},
fade_from_right: {
x: 180,
opacity: 0,
},
fade_in: {
opacity: 0,
},
rotate_up: {
y: 180,
rotation: 10,
opacity: 0,
},
};
var scroll_trigger = {
scrollTrigger: {
trigger: box,
once: defaults.once,
start: "top bottom+=20%",
// start: "top bottom+=5%",
toggleActions: "play none none reverse",
markers: !1,
},
};
jQuery.extend(gsap_obj, settings);
jQuery.extend(gsap_obj, animations[box.dataset.animation || defaults.animation]);
jQuery.extend(gsap_obj, scroll_trigger);
gsap.from(box, gsap_obj);
});
}
scroll_animations();