HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Landing Page</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.2.0/magnific-popup.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
</head>
<body>
<header class="header-area">
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a href="#index.html" class="navbar-brand">coding camp</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"><i class="fa-solid fa-bars"></i></button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a href="#home" class="nav-link active" data-scroll-nav="0">home</a></li>
<li class="nav-item"><a href="#about" class="nav-link " data-scroll-nav="1">about</a></li>
<li class="nav-item"><a href="#services" class="nav-link " data-scroll-nav="2">services</a></li>
<li class="nav-item"><a href="#portfolio" class="nav-link " data-scroll-nav="3">portfolio</a></li>
<li class="nav-item"><a href="#testimonials" class="nav-link " data-scroll-nav="4">testimonials</a></li>
<li class="nav-item"><a href="#pricing" class="nav-link " data-scroll-nav="5">pricing</a></li>
<li class="nav-item"><a href="#contact" class="nav-link " data-scroll-nav="6">contact</a></li>
</ul>
</div>
</div>
</nav>
<section class="home" id="home" data-scroll-index="0">
<div class="header-content d-flex align-items-center">
<div id="parallax">
<div class="header-shape shape-one" data-depth="0.10">
<img src="https://i.postimg.cc/J7bRR2cK/shape-1.png" alt="image">
</div>
<div class="header-shape shape-two" data-depth="0.30">
<img src="https://i.postimg.cc/437TqLx6/shape-2.png" alt="image">
</div>
<div class="header-shape shape-three" data-depth="0.40">
<img src="https://i.postimg.cc/63Cx58RT/shape-3.png" alt="image">
</div>
<div class="header-shape shape-four" data-depth="0.60">
<img src="https://i.postimg.cc/437TqLx6/shape-2.png" alt="image">
</div>
<div class="header-shape shape-five" data-depth="0.20">
<img src="https://i.postimg.cc/J7bRR2cK/shape-1.png" alt="image">
</div>
<div class="header-shape shape-six" data-depth="0.15">
<img src="https://i.postimg.cc/bNyfpNvN/shape-4.png" alt="image">
</div>
<div class="header-shape shape-seven" data-depth="0.50">
<img src="https://i.postimg.cc/9FL5M54P/shape-5.png" alt="image">
</div>
<div class="header-shape shape-eight" data-depth="0.40">
<img src="https://i.postimg.cc/63Cx58RT/shape-3.png" alt="image">
</div>
<div class="header-shape shape-nine" data-depth="0.20">
<img src="https://i.postimg.cc/sgLkYY4v/shape-6.png" alt="image">
</div>
<div class="header-shape shape-ten" data-depth="0.30">
<img src="https://i.postimg.cc/63Cx58RT/shape-3.png" alt="image">
</div>
</div>
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="home-text ">
<h4>HELLO, I'M</h4>
<h1>MARK PARKER</h1>
<p>A freelancer UI Designer & Web Developer</p>
<div class="home-btn">
<a href="#" class="btn-1">View my Work</a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="home-img d-none d-lg-block">
<img src="https://i.postimg.cc/PqZ3bt0G/profile-pic.png" alt="Mark Parker">
</div>
</div>
</div>
</div>
<div class="header-social">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="header-social-icon">
<ul>
<li><a href="#"><i class="fa-brands fa-facebook"></i></a></li>
<li><a href="#"><i class="fa-brands fa-x-twitter"></i></a></li>
<li><a href="#"><i class="fa-brands fa-github"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</header>
<section class="about-area section-padding" id="about" data-scroll-index="1">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 ">
<div class="section-title">
<h4>About</h4>
<h2>Personal <span>Details</span></h2>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="about-content">
<h5 class="about-title">I'm <span>Mark Parker</span> and I'm a Web Designer</h5>
<p class="details">I am a passionate web designer with a love for creating beautiful and functional websites. I enjoy working with HTML, CSS, and JavaScript to bring ideas to life and enhance user experiences. In my free time, I like to explore new design trends and work on personal projects that challenge my creativity</p>
<ul>
<li>
<div class="single-info d-flex align-items-center">
<div class="info-icon text-center">
<i class="fa-solid fa-calendar"></i>
</div>
<div class="info-text">
<p><span>Date of Birth:</span> 9 November 1990</p>
</div>
</div>
</li>
<li>
<div class="single-info d-flex align-items-center">
<div class="info-icon text-center">
<i class="fa-solid fa-envelope"></i>
</div>
<div class="info-text">
<p><span>Email:</span> parker@gmail.com</p>
</div>
</div>
</li>
<li>
<div class="single-info d-flex align-items-center">
<div class="info-icon text-center">
<i class="fa-solid fa-phone"></i>
</div>
<div class="info-text">
<p><span>Phone:</span> +1 456 7890</p>
</div>
</div>
</li>
<li>
<div class="single-info d-flex align-items-center">
<div class="info-icon text-center">
<i class="fa-solid fa-map-marker"></i>
</div>
<div class="info-text">
<p><span>Location:</span> 3475, K1 Downtown, LA</p>
</div>
</div>
</li>
<li>
<div class="single-info d-flex align-items-center">
<div class="info-icon text-center">
<i class="fa-solid fa-university"></i>
</div>
<div class="info-text">
<p><span>Degree:</span> <abbr title="Bachelor of Science in Computer Science">BSCS</abbr> </p>
</div>
</div>
</li>
<li>
<div class="single-info d-flex align-items-center">
<div class="info-icon text-center">
<i class="fa-solid fa-user"></i>
</div>
<div class="info-text">
<p><span>Website:</span> www.cryptical.com</p>
</div>
</div>
</li>
</ul>
<a href="#" class="hire-me">Hire me</a>
</div>
</div>
<div class="col-lg-6 col-xl-5 offset-xl-1">
<div id="skill-bar-wrapper">
<div class="text-left">
<h4>C++ <span style="float: right;">95%</span></h4>
<div class="skillbar-container" data-percent="95%">
<div class="skills"></div>
</div>
<h4>Java <span style="float: right;">85%</span></h4>
<div class="skillbar-container" data-percent="85%">
<div class="skills"></div>
</div>
<h4>HTML <span style="float: right;">75%</span></h4>
<div class="skillbar-container" data-percent="75%">
<div class="skills"></div>
</div>
<h4>JQuery <span style="float: right;">80%</span></h4>
<div class="skillbar-container" data-percent="80%">
<div class="skills"></div>
</div>
<h4>Javascript <span style="float: right;">85%</span></h4>
<div class="skillbar-container" data-percent="85%">
<div class="skills"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="services section-padding" id="services" data-scroll-index="2">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="section-title">
<h4>Services</h4>
<h2>Services <span>that I can provide for you</span></h2>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="service-item">
<div class="icon">
<i class="fa-solid fa-laptop"></i>
</div>
<h3>Web Design</h3>
<p>By understanding your needs and goals, I translate those into wireframes and mockups by blending artistic vision with technical skills to craft user-friendly and visually appealing online experiences</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="service-item">
<div class="icon">
<i class="fa-solid fa-edit"></i>
</div>
<h3>Video Editing</h3>
<p>By understanding of visual composition, color theory, and typography I can create for you engaging title cards, design animated transitions, or choose appropriate background music to match the video's tone</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="service-item">
<div class="icon">
<i class="fa-solid fa-code"></i>
</div>
<h3>Video Editing</h3>
<p>I can create wireframes and prototypes that outline the layout and user interface element. Also I ensure that the website looks good across different devices and browsers, blending design and functionality</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="service-item">
<div class="icon">
<i class="fa-solid fa-paint-brush"></i>
</div>
<h3>Graphic Design</h3>
<p>With the goal to create compelling visual elements for websites, I can design logos, icons, illustrations, and other visual assets that enhance the website's branding and aesthetic appeal</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="service-item">
<div class="icon">
<i class="fa-solid fa-bullhorn"></i>
</div>
<h3>Digital Marketing</h3>
<p>In digital marketing, I play a vital role for your website, by enhancing visual aesthetics, user experience, <abbr title="Search Engine Optimization">SEO</abbr>, responsive design and mainly conversion optimization</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="service-item">
<div class="icon">
<i class="fa-solid fa-mobile"></i>
</div>
<h3>Android Development</h3>
<p>I can create visually appealing and intuitive Android app interfaces, by designing app layouts, navigation menus, buttons and icons, ensuring a cohesive and user-friendly experience</p>
</div>
</div>
</div>
</div>
</section>
<section class="img-gallery section-padding" id="portfolio" data-scroll-index="3">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="section-title">
<h4>Portfolio</h4>
<h2>Our latest <span>work</span></h2>
</div>
</div>
</div>
<div class="row ">
<div class="col-lg-8 d-flex justify-content-center sortBtn flex-wrap">
<a href="#" class="filter-btn active" data-filter="*">All</a>
<a href="#" class="filter-btn " data-filter=".wordpress">Wordpress</a>
<a href="#" class="filter-btn " data-filter=".photoshop">Photoshop</a>
<a href="#" class="filter-btn " data-filter=".web-design">Web Design</a>
</div>
</div>
<div class="row grid">
<div class="col-lg-4 col-md-6 col-sm-6 wordpress">
<div class="single-work text-center mt-30">
<div class="work-image">
<img src="https://i.postimg.cc/0ykh0n4C/portfolio-1.jpg" alt="portfolio image">
</div>
<div class="work-overlay">
<div class="work-content">
<h3 class="work-title">Product Design</h3>
<ul>
<li><a href="https://i.postimg.cc/0ykh0n4C/portfolio-1.jpg" class="image-popup"><i class="fa-solid fa-plus"></i></a></li>
<li><a href="#"><i class="fa-solid fa-link"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 photoshop">
<div class="single-work text-center mt-30">
<div class="work-image">
<img src="https://i.postimg.cc/Xqw7dLPb/portfolio-2.jpg" alt="portfolio image">
</div>
<div class="work-overlay">
<div class="work-content">
<h3 class="work-title">Product Design</h3>
<ul>
<li><a href="https://i.postimg.cc/Xqw7dLPb/portfolio-2.jpg" class="image-popup"><i class="fa-solid fa-plus"></i></a></li>
<li><a href="#"><i class="fa-solid fa-link"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 wordpress">
<div class="single-work text-center mt-30">
<div class="work-image">
<img src="https://i.postimg.cc/26nfK67d/portfolio-3.jpg" alt="portfolio image">
</div>
<div class="work-overlay">
<div class="work-content">
<h3 class="work-title">Product Design</h3>
<ul>
<li><a href="https://i.postimg.cc/26nfK67d/portfolio-3.jpg" class="image-popup"><i class="fa-solid fa-plus"></i></a></li>
<li><a href="#"><i class="fa-solid fa-link"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 web-design">
<div class="single-work text-center mt-30">
<div class="work-image">
<img src="https://i.postimg.cc/PxsgYHnC/portfolio-4.jpg" alt="portfolio image">
</div>
<div class="work-overlay">
<div class="work-content">
<h3 class="work-title">Product Design</h3>
<ul>
<li><a href="https://i.postimg.cc/PxsgYHnC/portfolio-4.jpg" class="image-popup"><i class="fa-solid fa-plus"></i></a></li>
<li><a href="#"><i class="fa-solid fa-link"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 photoshop">
<div class="single-work text-center mt-30">
<div class="work-image">
<img src="https://i.postimg.cc/155LpM2r/portfolio-5.jpg" alt="portfolio image">
</div>
<div class="work-overlay">
<div class="work-content">
<h3 class="work-title">Product Design</h3>
<ul>
<li><a href="https://i.postimg.cc/155LpM2r/portfolio-5.jpg" class="image-popup"><i class="fa-solid fa-plus"></i></a></li>
<li><a href="#"><i class="fa-solid fa-link"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 photoshop">
<div class="single-work text-center mt-30">
<div class="work-image">
<img src="https://i.postimg.cc/gJHTh6K7/portfolio-6.jpg" alt="portfolio image">
</div>
<div class="work-overlay">
<div class="work-content">
<h3 class="work-title">Product Design</h3>
<ul>
<li><a href="https://i.postimg.cc/gJHTh6K7/portfolio-6.jpg" class="image-popup"><i class="fa-solid fa-plus"></i></a></li>
<li><a href="#"><i class="fa-solid fa-link"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="call-to-action section-padding">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-8 col-lg-9">
<div class="call-action-content text-center">
<h2 class="action-title">Have any project in mind?</h2>
<p>I'd love to hear about it! Whether it's a small idea or a grand vision, I'm ready to bring it to life. Reach out today and let's make your project a reality!</p>
<ul>
<li><a href="#" class="btn btn-1">Download CV</a></li>
<li><a href="#" class="btn btn-2">HIRE ME</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="testimonials section-padding" id="testimonials" data-scroll-index="4">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="section-title">
<h4>Testimonials</h4>
<h2>What our clients <span>say</span></h2>
</div>
</div>
</div>
<div class="row">
<div class="testimonial-slider owl-carousel">
<div class="testimonial-item">
<div class="img-box">
<img src="https://i.postimg.cc/wBsx5R9q/1.jpg" alt="image">
<i class="fa-solid fa-quote-right"></i>
</div>
<p>Mark was hired to create a corporate identity. It's modern, clean and with a beautiful design. He has a lot of experience and is very concerned about the needs of client</p>
<h3>Brody Stevens</h3>
<span>Marketing Director</span>
<div class="rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
</div>
<div class="testimonial-item">
<div class="img-box">
<img src="https://i.postimg.cc/qvW47By9/2.jpg" alt="image">
<i class="fa-solid fa-quote-right"></i>
</div>
<p>I couldn't be happier with the website that Richard created for us. His attention to detail and creativity is unmatched</p>
<h3>Ellena Evans</h3>
<span>Art Creative Director</span>
<div class="rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
</div>
<div class="testimonial-item">
<div class="img-box">
<img src="https://i.postimg.cc/kGMdH2Pt/3.jpg" alt="image">
<i class="fa-solid fa-quote-right"></i>
</div>
<p>Working with Mark has been an absolute pleasure. I was impressed with his attention to detail, his web design</p>
<h3>Joshua Doe</h3>
<span>Marketing Director</span>
<div class="rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
</div>
<div class="testimonial-item">
<div class="img-box">
<img src="https://i.postimg.cc/wxWKvTd0/4.jpg" alt="image">
<i class="fa-solid fa-quote-right"></i>
</div>
<p>I was overwhelmed with the thought of redesigning my online store, but Mark made the process seamless. The site is not only visually appealing but also optimized for conversions</p>
<h3>Jessica Miller</h3>
<span>Small Business Owner</span>
<div class="rating">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="pricing section-padding" id="pricing" data-scroll-index="5">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="section-title">
<h4>Pricing</h4>
<h2>Pricing <span>plan</span></h2>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-4 col-md-6">
<div class="pricing-plan">
<div class="pricing-header">
<h3>Basic</h3>
</div>
<div class="pricing-price">
<span class="currency">$</span>
<span class="price">99</span>
<span class="period">/monthly</span>
</div>
<div class="pricing-body">
<ul>
<li><i class="fa-solid fa-check"></i>5GB Bandwidth</li>
<li><i class="fa-solid fa-check"></i>1 Free Update</li>
<li><i class="fa-solid fa-check"></i>High Regulation Printing</li>
<li><i class="fa-solid fa-check"></i>Branding</li>
<li><i class="fa-solid fa-check"></i>2 Free Maintenances</li>
</ul>
</div>
<div class="pricing-footer">
<a href="#" class="btn btn-2">Get Started</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="pricing-plan">
<div class="pricing-header">
<h3>Premium</h3>
</div>
<div class="pricing-price">
<span class="currency">$</span>
<span class="price">199</span>
<span class="period">/monthly</span>
</div>
<div class="pricing-body">
<ul>
<li><i class="fa-solid fa-check"></i>10GB Bandwidth</li>
<li><i class="fa-solid fa-check"></i>3 Free Update</li>
<li><i class="fa-solid fa-check"></i>High Regulation Printing</li>
<li><i class="fa-solid fa-check"></i>3 brandings</li>
<li><i class="fa-solid fa-check"></i>5 Free Maintenances</li>
</ul>
</div>
<div class="pricing-footer">
<a href="#" class="btn btn-1">Get Started</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="pricing-plan">
<div class="pricing-header">
<h3>Ultimate</h3>
</div>
<div class="pricing-price">
<span class="currency">$</span>
<span class="price">299</span>
<span class="period">/monthly</span>
</div>
<div class="pricing-body">
<ul>
<li><i class="fa-solid fa-check"></i>20GB Bandwidth</li>
<li><i class="fa-solid fa-check"></i>10 Free Update</li>
<li><i class="fa-solid fa-check"></i>Priority Regulation Printing</li>
<li><i class="fa-solid fa-check"></i>10 brandings</li>
<li><i class="fa-solid fa-check"></i>20 Free Maintenances</li>
</ul>
</div>
<div class="pricing-footer">
<a href="#" class="btn btn-2">Get Started</a>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="faq section-padding">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="section-title">
<h4>FAQ's</h4>
<h2>Frequently <span>asked</span> queries</h2>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-10">
<div id="accordion">
<div class="accordion-item">
<div class="accordion-header collapsed" data-toggle="collapse" data-target="#collapse-01">
<h3>100% Fluid Responsive - Fits any device perfectly</h3>
</div>
<div class="collapse show" id="collapse-01" data-parent="#accordion">
<div class="accordion-body">
<p>Your website will seamlessly adjust to fit any device perfectly, providing an optimal viewing experience for users. Whether on a smartphone, tablet, or desktop, content will be displayed beautifully and legibly, enhancing accessibility and user satisfaction</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header collapsed" data-toggle="collapse" data-target="#collapse-02">
<h3>Clean Code</h3>
</div>
<div class="collapse " id="collapse-02" data-parent="#accordion">
<div class="accordion-body">
<p>My code is easy to read, understand, and maintain. It emphasizes clarity and simplicity, allowing others to work efficiently and collaboratively. I follow the best practices such as meaningful naming conventions and proper organization</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header collapsed" data-toggle="collapse" data-target="#collapse-03">
<h3>Flat, Modern and Clean Design</h3>
</div>
<div class="collapse " id="collapse-03" data-parent="#accordion">
<div class="accordion-body">
<p>I emphasize simplicity and functionality, focusing on minimalistic elements and a user-friendly interface. This approach eliminates unnecessary distractions, allowing users to navigate effortlessly while enjoying a visually pleasing experience</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header collapsed" data-toggle="collapse" data-target="#collapse-04">
<h3>Custom Font Support</h3>
</div>
<div class="collapse " id="collapse-04" data-parent="#accordion">
<div class="accordion-body">
<p>I use unique typefaces that enhance the aesthetics and branding of a website. By utilizing the @font-face rule in CSS, I can load fonts from various sources, ensuring that text appears consistently across different devices and browsers</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="contact section-padding" id="contact" data-scroll-index="6">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="section-title">
<h4>Contact us</h4>
<h2>Get <span>in touch</span></h2>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-5">
<div class="contact-info">
<h3>For any Queries and Support</h3>
<div class="contact-info-item">
<i class="fa-solid fa-location-arrow"></i>
<h4>Company Location</h4>
<p>199 xyz Clermont, Florida</p>
</div>
<div class="contact-info-item">
<i class="fa-solid fa-envelope"></i>
<h4>Write to us at</h4>
<p>Parker@gmail.com</p>
</div>
<div class="contact-info-item">
<i class="fa-solid fa-location-arrow"></i>
<h4>Call us on</h4>
<p>+1 678 7890</p>
</div>
</div>
</div>
<div class="col-lg-8 col-md-7">
<div class="contact-form">
<form action="">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" placeholder="Your Name" class="form-control">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<input type="email" placeholder="Your Email" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="text" placeholder="Your Phone" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<input type="text" placeholder="Subject" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<textarea name="" id="" placeholder="Your Message" class="form-control"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button class="btn-2">Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
<p class="copyright-text">© 2024 by ULTRA CODE</p>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.2.0/jquery.magnific-popup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="main.js"></script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
:root {
--main-color: #a800a8;
--black100: #f7f7f7;
--black400: #555555;
--black900: #000000;
--white: #ffffff;
--shadow-black100: 0 5px 15px rgba(0, 0, 0, .1);
--shadow-black300: 0 5px 15px rgba(0, 0, 0, .3);
--black-alpha100: 0 5px 15px rgba(0, 0, 0, .05);
}
body {
font-family: 'Kaushan Script', sans-serif;
font-size: 16px;
font-weight: normal;
overflow-x: hidden;
background-color: var(--white);
}
* { margin: 0; padding: 0; outline: none !important; }
img { max-width: 100%; vertical-align: middle; }
ul { list-style: none; margin: 0; padding: 0; }
a, a:hover { text-decoration: none; }
.btn-1 {
background-color: var(--main-color);
padding: 15px 40px;
border: none;
border-radius: 30px;
color: var(--white);
font-size: 16px;
text-transform: capitalize;
box-shadow: var(--shadow-black300);
font-weight: 500;
transition: all .5s ease;
}
.btn-1:hover { color: var(--main-color); background-color: var(--white); }
.btn-2 {
background-color: var(--white);
padding: 15px 40px;
border: none;
border-radius: 30px;
color: var(--main-color);
font-size: 16px;
text-transform: capitalize;
box-shadow: var(--shadow-black100);
font-weight: 500;
transition: all .5s ease;
}
.btn-2:hover { color: var(--white); background-color: var(--main-color); }
.section-padding { padding: 80px 0; }
.section-title { margin-bottom: 60px; }
.section-title h4 {
font-size: 25px;
font-weight: 700;
color: var(--black900);
text-transform: capitalize;
text-align: center;
}
.section-title h2 {
font-size: 30px;
color: var(--black900);
font-weight: 700;
text-transform: uppercase;
margin: 0;
text-align: center;
}
.section-title h2 span { color: var(--main-color); }
.owl-carousel .owl-dots { padding: 0 15px; text-align: center; margin-top: 20px; }
.owl-carousel button.owl-dot {
height: 6px;
width: 24px;
background-color: #dddddd;
display: inline-block;
margin: 0 4px;
border-radius: 5px;
}
.owl-carousel button.owl-dot.active { background-color: var(--main-color); }
/*NAVBAR*/
.navbar { background-color: var(--white); padding: 30px 0; box-shadow: 0 10px 10px rgba(0, 0, 0, .08); transition: all .5s ease; }
.navbar.navbar-shrink { padding: 20px 0; box-shadow: 0 10px 10px rgba(0, 0, 0, .1); }
.navbar > .container { padding: 0 15px; }
.navbar .navbar-brand { font-size: 30px; color: var(--main-color); font-weight: 500; text-transform: capitalize; }
.navbar .nav-item { margin-left: 35px; }
.navbar .nav-item .nav-link {
color: var(--black400);
text-transform: capitalize;
font-size: 18px;
font-weight: 400;
padding: 5px 0;
position: relative;
}
.navbar .nav-item .nav-link::before {
position: absolute;
content: '';
width: 3px;
height: 0;
background-color: var(--main-color);
left: 50%;
top: -45px;
transform: translateX(-50%);
transition: all .3s ease-out 0s;
}
.navbar .nav-item .nav-link.active, .navbar .nav-item .nav-link:hover { color: var(--main-color); }
.navbar .nav-item .nav-link.active::before, .navbar .nav-item .nav-link:hover::before { height: 45px; }
.header-content {
background-color: #fbfbfb;
height: 800px;
padding-top: 110px;
position: relative;
overflow: hidden;
}
#parallax { position: absolute; height: 100%; width: 100%; }
/*HOME*/
.header-shape { position: absolute !important; }
.header-shape.shape-one { top: 4.5% !important; left: 0 !important; }
.header-shape.shape-two { top: 2.5% !important; left: 20% !important; }
.header-shape.shape-three { top: 3% !important; left: 40% !important; }
.header-shape.shape-four { top: 8% !important; right: 7.6% !important; left: auto !important; }
.header-shape.shape-five { right: 30px !important; bottom: 36% !important; left: auto !important; top: auto !important; }
.header-shape.shape-six { top: 44% !important; left: 13% !important; transform: translateY(-50%); }
.header-shape.shape-seven { left: 30px !important; bottom: 10% !important; top: auto !important; }
.header-shape.shape-eight { left: 90px !important; bottom: 140px !important; top: auto !important; }
.header-shape.shape-nine { left: 50% !important; transform: translateX(-50%); bottom: 28px !important; top: auto !important; }
.header-shape.shape-ten { right: 30px !important; bottom: 10% !important; left: auto !important; top: auto !important; }
.home-text h4 { font-size: 30px; font-weight: 600; padding-bottom: 8px; color: var(--main-color); }
.home-text h1 { font-size: 60px; font-weight: 600; padding-bottom: 8px; color: var(--black900); }
.home-text p { font-size: 18px; line-height: 28px; color: var(--black900); font-weight: 300; padding-bottom: 30px; }
.home-img::before {
position: absolute;
content: '';
width: 85%;
height: 82%;
border: 20px solid var(--main-color);
border-bottom: none;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.home-img::after {
position: absolute;
content: '';
width: 85%;
height: 20px;
background-color: var(--main-color);
bottom: 50px;
left: 0;
z-index: 11;
}
.home-img img { position: relative; z-index: 5; }
.header-social { position: absolute; bottom: 30px; left: 15px; width: 100%; }
.header-social .header-social-icon { position: relative; }
.header-social .header-social-icon::before {
position: absolute;
content: '';
width: 100%;
height: 2px;
background-color: var(--main-color);
left: -102.5%;
top: 50%;
transform: translateY(-50%);
}
.header-social .header-social-icon ul li { display: inline-block; margin-left: 13px; }
.header-social .header-social-icon ul li:first-child { margin-left: 0; }
.header-social .header-social-icon ul li a {
color: #cccccc;
font-size: 20px;
width: 40px;
height: 40px;
display: inline-block;
line-height: 40px;
border-radius: 50%;
border: 1px solid #cccccc;
text-align: center;
transition: all .3s ease-out 0s;
}
.header-social .header-social-icon ul li a:hover { color: var(--white); background-color: var(--main-color); background-color: var(--main-color); }
/*ABOUT*/
.about-content .about-title { font-size: 22px; font-weight: 600; text-transform: capitalize; padding-bottom: 15px; }
.about-content .about-title span { color: var(--main-color); }
.about-content p {
font-size: 16px;
font-weight: 400;
line-height: 28px;
color: var(--black400);
margin: 0;
}
.about-content ul { padding-top: 15px; }
.about-content ul li { width: 50%; float: left; margin-top: 5px; }
.about-content .single-info .info-icon { width: 18px; text-align: center; }
.about-content .single-info .info-icon i { font-size: 16px; display: inline-block; color: var(--main-color); }
.about-content .single-info .info-text { padding-left: 15px; }
.about-content .single-info .info-text p span { color: var(--black900); font-weight: 500; }
.hire-me {
background-color: var(--main-color);
padding: 10px 20px;
margin-top: 20px;
border: none;
border-radius: 30px;
color: var(--white);
font-size: 16px;
text-transform: capitalize;
display: inline-block;
box-shadow: var(--shadow-black300);
font-weight: 500;
transition: all .5s ease;
}
.hire-me:hover { background-color: var(--white); color: var(--main-color); }
#skill-bar-wrapper { margin-top: 30px; }
.text-left h4 { font-size: 16px; padding-top: 15px; font-weight: 600; }
.skillbar-container {
position: relative;
display: block;
margin-top: 15px;
width: 100%;
background-color: rgba(187, 23, 23, .1);
height: 5px;
}
.skills { height: 6px; width: 0; background-color: var(--main-color); }
/*SERVICES*/
.services { background-color: var(--black100); }
.service-item {
box-shadow: var(--shadow-black100);
padding: 30px;
border-radius: 10px;
margin-bottom: 30px;
text-align: center;
position: relative;
z-index: 1;
overflow: hidden;
transition: all .5s ease;
}
.service-item:hover { background-color: var(--main-color); }
.service-item .icon {
height: 60px;
width: 60px;
margin: 0 auto 30px;
text-align: center;
font-size: 30px;
color: var(--white);
position: relative;
z-index: 1;
transition: all .5s ease;
}
.service-item:hover .icon { color: var(--main-color); font-size: 20px; }
.service-item .icon::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 20px;
border-bottom-right-radius: 0;
background-color: var(--main-color);
z-index: -1;
transition: all .5s ease;
}
.service-item:hover .icon::before { background-color: var(--white); }
.service-item .icon i { line-height: 60px; }
.service-item h3 {
font-size: 22px;
margin: 0 0 20px;
color: var(--black900);
font-weight: 500;
text-transform: capitalize;
}
.service-item:hover h3 { color: var(--white); }
.service-item p {
font-size: 16px;
line-height: 26px;
font-weight: 300;
color: var(--black400);
margin: 0 0 15px;
}
.service-item:hover p { color: var(--black900); }
/*PORTFOLIO*/
.sortBtn { margin: 0 auto; }
.filter-btn {
text-transform: uppercase;
margin-top: -20px;
outline: none !important;
border: 1px solid;
border-color: var(--main-color) !important;
padding: 8px;
font-weight: 600;
border-radius: 5px;
margin-right: 20px;
margin-bottom: 30px;
color: var(--main-color) !important;
transition: all .5s ease;
}
.filter-btn:hover, .filter-btn.active { color: var(--white) !important; background-color: var(--main-color); }
.single-work { position: relative; margin-bottom: 30px; }
.single-work .work-image img { width: 100%; }
.single-work .work-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(172, 49, 165, .8);
opacity: 0;
visibility: hidden;
transition: all .3s ease-out;
}
.single-work:hover .work-overlay { opacity: 1; visibility: visible; }
.single-work .work-overlay .work-content {
position: absolute;
top: 50%;
left: 0;
width: 100%;
transform: translateY(-50%);
}
.single-work .work-overlay .work-content .work-title {
font-size: 22px;
color: var(--white);
font-weight: 600;
transform: translateY(-100%);
opacity: 0;
margin-bottom: 15px;
}
.single-work:hover .work-overlay .work-content .work-title { transform: translateY(0); opacity: 1; }
.single-work .work-overlay .work-content ul { position: relative; padding-top: 20px; }
.single-work .work-overlay .work-content ul::before {
position: absolute;
content: '';
width: 60px;
height: 2px;
background-color: var(--white);
left: 50%;
transform: translateX(-50%);
top: 0;
}
.single-work .work-overlay .work-content ul li { display: inline-block; margin: 0 15px; opacity: 0; transition: all .5s ease-out 0s; }
.single-work .work-overlay .work-content ul li:nth-of-type(1) { transform: translateX(-100%); }
.single-work .work-overlay .work-content ul li:nth-of-type(2) { transform: translateX(100%); }
.single-work:hover .work-overlay .work-content ul li { transform: translateX(0); opacity: 1; }
.single-work .work-overlay .work-content ul li a {
width: 50px;
height: 50px;
display: block;
line-height: 50px;
font-size: 25px;
color: var(--white);
border-radius: 50%;
border: 1px solid var(--white);
text-align: center;
transition: all .5s ease-out 0s;
}
.single-work .work-overlay .work-content ul li a:hover { background-color: var(--white); color: var(--main-color); }
/*CALL TO ACTION*/
.call-to-action {
background: url('https://i.postimg.cc/TYCjCTLL/background.jpg');
background-position: center top;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
position: relative;
z-index: 1;
}
.call-to-action::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
background-color: var(--main-color);
opacity: .8;
}
.call-action-content .action-title {
font-size: 45px;
font-weight: 700;
color: var(--white);
padding-bottom: 30px;
}
.call-action-content p { color: var(--white); padding-bottom: 25px; }
.call-action-content ul li { display: inline-block; margin: 10px 15px 0;}
/*TESTIMONIALS*/
.testimonials { background-color: var(--black100); }
.testimonial-item {
margin: 15px;
padding: 30px;
box-shadow: var(--shadow-black100);
border-radius: 10px;
text-align: center;
}
.testimonial-item .img-box {
height: 100px;
width: 100px;
display: inline-block;
margin-bottom: 30px;
border: 4px solid var(--main-color);
border-radius: 50%;
position: relative;
}
.testimonial-item .img-box img { border-radius: 50%; width: 100%; }
.testimonial-item .img-box i {
position: absolute;
height: 30px;
width: 30px;
background-color: var(--main-color);
border-radius: 50%;
color: var(--white);
font-size: 12px;
line-height: 30px;
text-align: center;
left: calc(100% - 15px);
top: calc(50% - 15px);
}
.testimonial-item p {
font-size: 16px;
margin: 0 0 20px;
color: var(--black400);
line-height: 26px;
font-weight: 300;
}
.testimonial-item h3 {
font-size: 18px;
color: var(--black900);
font-weight: 500;
margin: 0 0 5px;
text-transform: capitalize;
}
.testimonial-item span {
display: block;
font-size: 16px;
color: var(--black400);
font-weight: 300;
}
.testimonial-item .rating { margin-top: 10px; }
.testimonial-item .rating i { display: inline-block; font-size: 16px; color: rgb(255, 157, 0); }
/*PRICING*/
.pricing-plan { box-shadow: var(--shadow-black100); border-radius: 10px; }
.pricing-plan .pricing-header { padding: 20px 30px; background-color: var(--main-color); }
.pricing-plan .pricing-header h3 {
text-align: center;
font-size: 30px;
color: var(--white);
font-weight: 500;
text-transform: capitalize;
margin: 0;
}
.pricing-plan .pricing-price { padding: 40px 30px; display: flex; justify-content: center; line-height: 0.7; }
.pricing-plan .pricing-price .currency {
font-size: 16px;
font-weight: 300;
color: var(--black400);
margin-right: 5px;
align-self: flex-start;
}
.pricing-plan .pricing-price .price { font-size: 80px; font-weight: 700; color: var(--main-color); }
.pricing-plan .pricing-price .period {
font-size: 14px;
font-weight: 300;
color: var(--black400);
margin-right: 5px;
align-self: flex-end;
text-transform: uppercase;
}
.pricing-plan .pricing-body { padding: 0 30px; }
.pricing-plan .pricing-body ul li {
font-size: 16px;
font-weight: 300;
color: var(--black400);
padding: 10px 0 10px 30px;
border-bottom: 1px solid var(--black-alpha100);
line-height: 26px;
position: relative;
}
.pricing-plan .pricing-body ul li:last-child { border-bottom: none; }
.pricing-plan .pricing-body ul li i { color: var(--main-color); position: absolute; left: 0; top: 12px; }
.pricing-plan .pricing-footer { padding: 20px 30px 30px; text-align: center; }
.faq .acoordion-item:not(:last-child) { margin-bottom: 20px; }
.faq .accordion-header {
box-shadow: var(--shadow-black100);
padding: 20px 50px 20px 30px;
position: relative;
cursor: pointer;
transition: all .3s ease;
}
.faq .accordion-header::before {
content: '\f067';
font-family: 'Font Awesome 5 Free';
color: var(--black400);
font-weight: 900;
position: absolute;
height: 30px;
width: 30px;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
text-align: center;
transition: all .3s ease;
}
.faq .accordion-header:not(.collapsed)::before { content: '\f068'; color: var(--white); }
.faq .accordion-header:not(.collapsed) { background-color: var(--main-color); box-shadow: none; }
.faq .accordion-header h3 {
font-size: 18px;
font-weight: 500;
color: var(--black400);
margin: 0;
transition: all .3s ease;
}
.faq .accordion-header:not(.collapsed) h3 { color: var(--white); }
.faq .accordion-body { padding: 20px 30px; background-color: var(--black100); }
.faq .accordion-body p {
font-weight: 300;
font-size: 16px;
color: var(--black400);
line-height: 26px;
margin: 0;
}
/*CONTACT*/
.contact { background-color: var(--shadow-black100); }
.contact-info h3 { font-size: 22px; color: var(--black900); font-weight: 500; margin: 0 0 40px; }
.contact-info-item { position: relative; padding-left: 55px; margin-bottom: 30px; }
.contact-info-item i {
position: absolute;
height: 40px;
width: 40px;
left: 0;
top: 0;
border-radius: 50%;
font-size: 16px;
color: var(--main-color);
border: 1px solid var(--main-color);
text-align: center;
line-height: 38px;
}
.contact-info-item h4 { font-size: 18px; font-weight: 400; margin: 0 0 10px; color: var(--black900); }
.contact-info-item p {
font-size: 16px;
font-weight: 300;
margin: 0;
line-height: 26px;
color: var(--black400);
}
.contact-form .form-group { margin-bottom: 25px; }
.contact-form .form-control {
height: 52px;
border: 1px solid transparent;
box-shadow: var(--shadow-black100);
border-radius: 30px;
padding: 0 24px;
color: var(--black900);
background-color: var(--white);
transition: all .5s ease;
}
.contact-form textarea.form-control { height: 140px; padding: 12px; resize: none; }
.contact-form .form-control:focus { border-color: var(--main-color); }
/*FOOTER*/
.footer { background-color: var(--main-color); }
.footer .copyright-text {
padding: 10px 0;
text-align: center;
font-size: 18px;
color: rgba(255, 255, 255, .9);
font-weight: 300;
margin: 10px 0 0;
}
/*MEDIA QUERIES*/
@media(max-width: 991px) {
.header-content { height: 640px; }
.navbar-toggler {
background-color: var(--main-color);
height: 34px;
width: 44px;
padding: 0;
font-size: 17px;
color: var(--white);
}
.navbar-nav { background-color: var(--white); }
.navbar .nav-item { margin: 0; padding: 5px 15px; }
.navbar .nav-item .nav-link::before { display: none; }
.pricing-plan { margin-bottom: 30px; }
}
@media(max-width: 767px) {
.header-shape.shape-one img { width: 40px; }
.header-shape.shape-two img { width: 40px; }
.header-shape.shape-three img { width: 100px; }
.header-shape.shape-four img { width: 40px; }
.header-shape.shape-five img { width: 40px; right: 25px !important; bottom: 50% !important; }
.header-shape.shape-six img { width: 40px; }
.header-shape.shape-seven img { width: 100px; left: 50px !important; bottom: 35px !important; }
.header-shape.shape-eight img { width: 100px; left: 50px !important; bottom: 80px !important; }
.header-shape.shape-nine img { width: 100px; left: 65% !important; bottom: 20px !important; }
.header-shape.shape-ten img { width: 100px; right: 0 !important; bottom: 15% !important; }
.home-text h4 { font-size: 24px; }
.home-text h1 { font-size: 38px; }
.about-content ul li { width: 100%; float: none; }
.call-action-content .action-title { font-size: 30px; }
.section-title h2 { font-size: 35px; }
.contact-form { margin-top: 20px;}
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.about-content ul li { width: 100%; float: none; }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.about-content ul li { width: 50%; float: left; }
}
//ScrollIt JS File
(function($) {
'use strict';
var pluginName = 'ScrollIt',
pluginVersion = '1.0.3';
/*
* OPTIONS
*/
var defaults = {
upKey: 38,
downKey: 40,
easing: 'linear',
scrollTime: 600,
activeClass: 'active',
onPageChange: null,
topOffset : 0
};
$.scrollIt = function(options) {
/*
* DECLARATIONS
*/
var settings = $.extend(defaults, options),
active = 0,
lastIndex = $('[data-scroll-index]:last').attr('data-scroll-index');
/*
* METHODS
*/
/**
* navigate
*
* sets up navigation animation
*/
var navigate = function(ndx) {
if(ndx < 0 || ndx > lastIndex) return;
var targetTop = $('[data-scroll-index=' + ndx + ']').offset().top + settings.topOffset + 1;
$('html,body').animate({
scrollTop: targetTop,
easing: settings.easing
}, settings.scrollTime);
};
/**
* doScroll
*
* runs navigation() when criteria are met
*/
var doScroll = function (e) {
var target = $(e.target).closest("[data-scroll-nav]").attr('data-scroll-nav') ||
$(e.target).closest("[data-scroll-goto]").attr('data-scroll-goto');
navigate(parseInt(target));
};
/**
* keyNavigation
*
* sets up keyboard navigation behavior
*/
var keyNavigation = function (e) {
var key = e.which;
if($('html,body').is(':animated') && (key == settings.upKey || key == settings.downKey)) {
return false;
}
if(key == settings.upKey && active > 0) {
navigate(parseInt(active) - 1);
return false;
} else if(key == settings.downKey && active < lastIndex) {
navigate(parseInt(active) + 1);
return false;
}
return true;
};
/**
* updateActive
*
* sets the currently active item
*/
var updateActive = function(ndx) {
if(settings.onPageChange && ndx && (active != ndx)) settings.onPageChange(ndx);
active = ndx;
$('[data-scroll-nav]').removeClass(settings.activeClass);
$('[data-scroll-nav=' + ndx + ']').addClass(settings.activeClass);
};
/**
* watchActive
*
* watches currently active item and updates accordingly
*/
var watchActive = function() {
var winTop = $(window).scrollTop();
var visible = $('[data-scroll-index]').filter(function(ndx, div) {
return winTop >= $(div).offset().top + settings.topOffset &&
winTop < $(div).offset().top + (settings.topOffset) + $(div).outerHeight()
});
var newActive = visible.first().attr('data-scroll-index');
updateActive(newActive);
};
/*
* runs methods
*/
$(window).on('scroll',watchActive).scroll();
$(window).on('keydown', keyNavigation);
$('body').on('click','[data-scroll-nav], [data-scroll-goto]', function(e){
e.preventDefault();
doScroll(e);
});
};
}(jQuery));
// Javascript main.js functions
$(document).ready(function() {
$(window).on("scroll", function() {
if($(this).scrollTop() > 90) {
$(".navbar").addClass("navbar-shrink");
} else {
$(".navbar").removeClass("navbar-shrink");
}
});
function parallaxMouse() {
if($("#parallax").length) {
var scene = document.getElementById("parallax");
var parallax = new Parallax(scene);
}
}
parallaxMouse();
//skills meter
$(window).scroll(function(){
var hT = $("#skill-bar-wrapper").offset().top;
var hH = $("#skill-bar-wrapper").outerHeight();
var wH = $(window).height();
var wS = $(this).scrollTop();
if( wS > (hT + hH - 1.4 * wH)){
jQuery('.skillbar-container').each(function(){
jQuery(this).find('.skills').animate({
width:jQuery(this).attr('data-percent')
}, 5000)
})
}
})
//filter
///enabling active button
let $btns = $('.img-gallery .sortBtn .filter-btn');
$btns.click(function(e) {
$('.img-gallery .sortBtn .filter-btn').removeClass('active');
e.target.classList.add('active');
///enabling filter selection according to the active button
let selector = $(e.target).attr('data-filter');
$('.img-gallery .grid').isotope({
filter:selector
})
return false;
})
///enabling gallery mode with magnific popup.js and maginif popup.css
$('.image-popup').magnificPopup({
type:'image',
gallery: { enabled: true }
})
// owl carousel
$('.testimonial-slider').owlCarousel({
loop:true,
margin:0,
autoplay:true,
responsiveClass:true,
responsive:{
0:{
items:1,
},
600:{
items:2,
},
1000:{
items:3,
}
}
})
//scrollit
$.scrollIt({
topOffset:-50
})
//Hiding Mobile Navbar when a nav link is clicked
$(".nav-link").on("click", function() {
$(".navbar-collapse").collapse("hide");
})
});
Also see: Tab Triggers