forked from STI/Astroport.ONE
899 lines
29 KiB
HTML
899 lines
29 KiB
HTML
<!DOCTYPE html>
|
||
<html class=" sizes customelements history pointerevents postmessage webgl websockets cssanimations csscolumns csscolumns-width csscolumns-span csscolumns-fill csscolumns-gap csscolumns-rule csscolumns-rulecolor csscolumns-rulestyle csscolumns-rulewidth no-csscolumns-breakbefore no-csscolumns-breakafter no-csscolumns-breakinside flexbox picture srcset webworkers" lang="en"><head>
|
||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||
<meta name="description" content="">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
||
<title>Unfold - Personal Portfolio & CV Template</title>
|
||
|
||
<link rel="shortcut icon" href="https://preview.uideck.com/items/unfold/assets/images/favicon.png" type="image/png">
|
||
|
||
<link rel="stylesheet" href="Unfold-Template_fichiers/bootstrap.css">
|
||
|
||
<link rel="stylesheet" href="Unfold-Template_fichiers/LineIcons.css">
|
||
|
||
<link rel="stylesheet" href="Unfold-Template_fichiers/magnific-popup.css">
|
||
|
||
<link rel="stylesheet" href="Unfold-Template_fichiers/default.css">
|
||
|
||
<link rel="stylesheet" href="Unfold-Template_fichiers/style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<div class="preloader" style="display: none;">
|
||
<div class="loader_34">
|
||
<div class="ytp-spinner">
|
||
<div class="ytp-spinner-container">
|
||
<div class="ytp-spinner-rotator">
|
||
<div class="ytp-spinner-left">
|
||
<div class="ytp-spinner-circle"></div>
|
||
</div>
|
||
<div class="ytp-spinner-right">
|
||
<div class="ytp-spinner-circle"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<header id="home" class="header-area">
|
||
<div class="navigation fixed-top sticky">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<nav class="navbar navbar-expand-lg">
|
||
<a class="navbar-brand" href="https://preview.uideck.com/items/unfold/index.html">
|
||
<img src="Unfold-Template_fichiers/logo.png" alt="Logo">
|
||
</a>
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="toggler-icon"></span>
|
||
<span class="toggler-icon"></span>
|
||
<span class="toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||
<ul class="navbar-nav ml-auto">
|
||
<li class="nav-item"><a class="page-scroll" href="#home">Home</a></li>
|
||
<li class="nav-item"><a class="page-scroll" href="#about">About</a></li>
|
||
<li class="nav-item"><a class="page-scroll" href="#service">Services</a></li>
|
||
<li class="nav-item"><a class="page-scroll" href="#work">Portfolio</a></li>
|
||
<li class="nav-item"><a class="page-scroll" href="#blog">Blog</a></li>
|
||
<li class="nav-item active"><a class="page-scroll" href="#contact">Contact</a></li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="parallax" class="header-content d-flex align-items-center" style="transform: translate3d(0px, 0px, 0px); transform-style: preserve-3d; backface-visibility: hidden;">
|
||
<div class="header-shape shape-one layer" data-depth="0.10" style="transform: translate3d(-7.03166px, 2.06746px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: relative; display: block; left: 0px; top: 0px;">
|
||
<img src="Unfold-Template_fichiers/shape-1.png" alt="Shape">
|
||
</div>
|
||
<div class="header-shape shape-tow layer" data-depth="0.30" style="transform: translate3d(-21.095px, 6.20238px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: absolute; display: block; left: 0px; top: 0px;">
|
||
<img src="Unfold-Template_fichiers/shape-2.png" alt="Shape">
|
||
</div>
|
||
<div class="header-shape shape-three layer" data-depth="0.40" style="transform: translate3d(-28.1266px, 8.26984px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: absolute; display: block; left: 0px; top: 0px;">
|
||
<img src="Unfold-Template_fichiers/shape-3.png" alt="Shape">
|
||
</div>
|
||
<div class="header-shape shape-fore layer" data-depth="0.60" style="transform: translate3d(-42.19px, 12.4048px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: absolute; display: block; left: 0px; top: 0px;">
|
||
<img src="Unfold-Template_fichiers/shape-2.png" alt="Shape">
|
||
</div>
|
||
<div class="header-shape shape-five layer" data-depth="0.20" style="transform: translate3d(-14.0633px, 4.13492px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: absolute; display: block; left: 0px; top: 0px;">
|
||
<img src="Unfold-Template_fichiers/shape-1.png" alt="Shape">
|
||
</div>
|
||
<div class="header-shape shape-six layer" data-depth="0.15" style="transform: translate3d(-10.5475px, 3.10119px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: absolute; display: block; left: 0px; top: 0px;">
|
||
<img src="Unfold-Template_fichiers/shape-4.png" alt="Shape">
|
||
</div>
|
||
<div class="header-shape shape-seven layer" data-depth="0.50" style="transform: translate3d(-35.1583px, 10.3373px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: absolute; display: block; left: 0px; top: 0px;">
|
||
<img src="Unfold-Template_fichiers/shape-5.png" alt="Shape">
|
||
</div>
|
||
<div class="header-shape shape-eight layer" data-depth="0.40" style="transform: translate3d(-28.1266px, 8.26984px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: absolute; display: block; left: 0px; top: 0px;">
|
||
<img src="Unfold-Template_fichiers/shape-3.png" alt="Shape">
|
||
</div>
|
||
<div class="header-shape shape-nine layer" data-depth="0.20" style="transform: translate3d(-14.0633px, 4.13492px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: absolute; display: block; left: 0px; top: 0px;">
|
||
<img src="Unfold-Template_fichiers/shape-6.png" alt="Shape">
|
||
</div>
|
||
<div class="header-shape shape-ten layer" data-depth="0.30" style="transform: translate3d(-21.095px, 6.20238px, 0px); transform-style: preserve-3d; backface-visibility: hidden; position: absolute; display: block; left: 0px; top: 0px;">
|
||
<img src="Unfold-Template_fichiers/shape-3.png" alt="Shape">
|
||
</div>
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-xl-5 col-lg-6">
|
||
<div class="header-content-right">
|
||
<h4 class="sub-title">Hello, I’m</h4>
|
||
<h1 class="title">Mark Parker</h1>
|
||
<p>A Freelance UI Designer & Web Developer</p>
|
||
<a class="main-btn" href="#work">View my Work</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6 offset-xl-1">
|
||
<div class="header-image d-none d-lg-block">
|
||
<img src="Unfold-Template_fichiers/hero.png" alt="hero">
|
||
</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="lni-facebook-filled"></i></a></li>
|
||
<li><a href="#"><i class="lni-twitter-original"></i></a></li>
|
||
<li><a href="#"><i class="lni-behance-original"></i></a></li>
|
||
<li><a href="#"><i class="lni-linkedin-original"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
|
||
<section id="about" class="about-area pt-125 pb-130">
|
||
<div class="container">
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-8">
|
||
<div class="section-title text-center">
|
||
<h2 class="title">About Me</h2>
|
||
<p>Nunc id dui at sapien faucibus fermentum ut vel diam. Nullam tempus,
|
||
nunc id efficitur sagittis, urna est ultricies eros, ac porta sem turpis
|
||
quis leo.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="about-content mt-50">
|
||
<h5 class="about-title">Hi There! I'm Mark Parker</h5>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
|
||
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
|
||
ex ea commodo consequat.</p>
|
||
<ul class="clearfix">
|
||
<li>
|
||
<div class="single-info d-flex align-items-center">
|
||
<div class="info-icon">
|
||
<i class="lni-calendar"></i>
|
||
</div>
|
||
<div class="info-text">
|
||
<p><span>Date of birth:</span> 8 June 1995</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="single-info d-flex align-items-center">
|
||
<div class="info-icon">
|
||
<i class="lni-envelope"></i>
|
||
</div>
|
||
<div class="info-text">
|
||
<p><span>Email:</span> parker@mysite.com</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="single-info d-flex align-items-center">
|
||
<div class="info-icon">
|
||
<i class="lni-phone-handset"></i>
|
||
</div>
|
||
<div class="info-text">
|
||
<p><span>Phone:</span> +1-202-555-0138</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="single-info d-flex align-items-center">
|
||
<div class="info-icon">
|
||
<i class="lni-map-marker"></i>
|
||
</div>
|
||
<div class="info-text">
|
||
<p><span>Location:</span> 4373, El Centro, CA</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-5 offset-xl-1 col-lg-6">
|
||
<div class="about-skills pt-25">
|
||
<div class="skill-item mt-25">
|
||
<div class="skill-header">
|
||
<h6 class="skill-title">HTML</h6>
|
||
<div class="skill-percentage">
|
||
<div class="count-box counted">
|
||
<span class="counter">80</span>
|
||
</div>
|
||
%
|
||
</div>
|
||
</div>
|
||
<div class="skill-bar">
|
||
<div class="bar-inner">
|
||
<div class="bar progress-line" data-width="80" style="width: 80%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="skill-item mt-25">
|
||
<div class="skill-header">
|
||
<h6 class="skill-title">CSS</h6>
|
||
<div class="skill-percentage">
|
||
<div class="count-box counted">
|
||
<span class="counter">60</span>
|
||
</div>
|
||
%
|
||
</div>
|
||
</div>
|
||
<div class="skill-bar">
|
||
<div class="bar-inner">
|
||
<div class="bar progress-line" data-width="60" style="width: 60%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="skill-item mt-25">
|
||
<div class="skill-header">
|
||
<h6 class="skill-title">Photoshop</h6>
|
||
<div class="skill-percentage">
|
||
<div class="count-box counted">
|
||
<span class="counter">50</span>
|
||
</div>
|
||
%
|
||
</div>
|
||
</div>
|
||
<div class="skill-bar">
|
||
<div class="bar-inner">
|
||
<div class="bar progress-line" data-width="50" style="width: 50%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="skill-item mt-25">
|
||
<div class="skill-header">
|
||
<h6 class="skill-title">Sketch</h6>
|
||
<div class="skill-percentage">
|
||
<div class="count-box counted">
|
||
<span class="counter">90</span>
|
||
</div>
|
||
%
|
||
</div>
|
||
</div>
|
||
<div class="skill-bar">
|
||
<div class="bar-inner">
|
||
<div class="bar progress-line" data-width="90" style="width: 90%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section id="service" class="services-area gray-bg pt-125 pb-130">
|
||
<div class="container">
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-8">
|
||
<div class="section-title text-center pb-30">
|
||
<h2 class="title">My Services</h2>
|
||
<p>Nunc id dui at sapien faucibus fermentum ut vel diam. Nullam tempus,
|
||
nunc id efficitur sagittis, urna est ultricies eros, ac porta sem turpis
|
||
quis leo.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-4 col-md-6 col-sm-8">
|
||
<div class="single-service text-center mt-30">
|
||
<div class="service-icon">
|
||
<i class="lni-code-alt"></i>
|
||
</div>
|
||
<div class="service-content">
|
||
<h4 class="service-title"><a href="#">Web Design</a></h4>
|
||
<p>Curabitur vitae magna felis. Nulla ac libero ornare, vestibulum lacus quis blandit enimdicta sunt.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-6 col-sm-8">
|
||
<div class="single-service text-center mt-30">
|
||
<div class="service-icon">
|
||
<i class="lni-color-pallet"></i>
|
||
</div>
|
||
<div class="service-content">
|
||
<h4 class="service-title"><a href="#contact">Graphic Design</a></h4>
|
||
<p>Curabitur vitae magna felis. Nulla ac libero ornare, vestibulum lacus quis blandit enimdicta sunt.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-6 col-sm-8">
|
||
<div class="single-service text-center mt-30">
|
||
<div class="service-icon">
|
||
<i class="lni-mobile"></i>
|
||
</div>
|
||
<div class="service-content">
|
||
<h4 class="service-title"><a href="#">App Design</a></h4>
|
||
<p>Curabitur vitae magna felis. Nulla ac libero ornare, vestibulum lacus quis blandit enimdicta sunt.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-6 col-sm-8">
|
||
<div class="single-service text-center mt-30">
|
||
<div class="service-icon">
|
||
<i class="lni-vector"></i>
|
||
</div>
|
||
<div class="service-content">
|
||
<h4 class="service-title"><a href="#">Illustration Design</a></h4>
|
||
<p>Curabitur vitae magna felis. Nulla ac libero ornare, vestibulum lacus quis blandit enimdicta sunt.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-6 col-sm-8">
|
||
<div class="single-service text-center mt-30">
|
||
<div class="service-icon">
|
||
<i class="lni-website"></i>
|
||
</div>
|
||
<div class="service-content">
|
||
<h4 class="service-title"><a href="#">Web Development</a></h4>
|
||
<p>Curabitur vitae magna felis. Nulla ac libero ornare, vestibulum lacus quis blandit enimdicta sunt.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-6 col-sm-8">
|
||
<div class="single-service text-center mt-30">
|
||
<div class="service-icon">
|
||
<i class="lni-support"></i>
|
||
</div>
|
||
<div class="service-content">
|
||
<h4 class="service-title"><a href="#">Consultancy and Support</a></h4>
|
||
<p>Curabitur vitae magna felis. Nulla ac libero ornare, vestibulum lacus quis blandit enimdicta sunt.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section id="call-to-action" class="call-to-action pt-125 pb-130 bg_cover" style="background-image: url(assets/images/call-to-action.jpg)">
|
||
<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 on mind?</h2>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
||
eiusmod tempor incididunt ut labore et dolore magna aliqua nostrud.</p>
|
||
<ul>
|
||
<li><a class="main-btn custom" href="#">download cv</a></li>
|
||
<li><a class="main-btn custom-2" href="#">hire me</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section id="work" class="work-area pt-125 pb-130">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-8">
|
||
<div class="section-title pb-25">
|
||
<h2 class="title">My Recent Works</h2>
|
||
<p>Nunc id dui at sapien faucibus fermentum ut vel diam. Nullam tempus,
|
||
nunc id efficitur sagittis, urna est ultricies eros, ac porta sem turpis
|
||
quis leo.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-4 col-md-6 col-sm-6">
|
||
<div class="single-work text-center mt-30">
|
||
<div class="work-image">
|
||
<img src="Unfold-Template_fichiers/w-1.jpg" alt="work">
|
||
</div>
|
||
<div class="work-overlay">
|
||
<div class="work-content">
|
||
<h3 class="work-title">Product Design</h3>
|
||
<ul>
|
||
<li><a class="image-popup" href="https://preview.uideck.com/items/unfold/assets/images/work/w-1.jpg"><i class="lni-plus"></i></a></li>
|
||
<li><a href="#"><i class="lni-link"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-6 col-sm-6">
|
||
<div class="single-work text-center mt-30">
|
||
<div class="work-image">
|
||
<img src="Unfold-Template_fichiers/w-2.jpg" alt="work">
|
||
</div>
|
||
<div class="work-overlay">
|
||
<div class="work-content">
|
||
<h3 class="work-title">Product Design</h3>
|
||
<ul>
|
||
<li><a class="image-popup" href="https://preview.uideck.com/items/unfold/assets/images/work/w-2.jpg"><i class="lni-plus"></i></a></li>
|
||
<li><a href="#"><i class="lni-link"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-6 col-sm-6">
|
||
<div class="single-work text-center mt-30">
|
||
<div class="work-image">
|
||
<img src="Unfold-Template_fichiers/w-3.jpg" alt="work">
|
||
</div>
|
||
<div class="work-overlay">
|
||
<div class="work-content">
|
||
<h3 class="work-title">Product Design</h3>
|
||
<ul>
|
||
<li><a class="image-popup" href="https://preview.uideck.com/items/unfold/assets/images/work/w-3.jpg"><i class="lni-plus"></i></a></li>
|
||
<li><a href="#"><i class="lni-link"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-6 col-sm-6">
|
||
<div class="single-work text-center mt-30">
|
||
<div class="work-image">
|
||
<img src="Unfold-Template_fichiers/w-4.jpg" alt="work">
|
||
</div>
|
||
<div class="work-overlay">
|
||
<div class="work-content">
|
||
<h3 class="work-title">Product Design</h3>
|
||
<ul>
|
||
<li><a class="image-popup" href="https://preview.uideck.com/items/unfold/assets/images/work/w-4.jpg"><i class="lni-plus"></i></a></li>
|
||
<li><a href="#"><i class="lni-link"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-6 col-sm-6">
|
||
<div class="single-work text-center mt-30">
|
||
<div class="work-image">
|
||
<img src="Unfold-Template_fichiers/w-5.jpg" alt="work">
|
||
</div>
|
||
<div class="work-overlay">
|
||
<div class="work-content">
|
||
<h3 class="work-title">Product Design</h3>
|
||
<ul>
|
||
<li><a class="image-popup" href="https://preview.uideck.com/items/unfold/assets/images/work/w-5.jpg"><i class="lni-plus"></i></a></li>
|
||
<li><a href="#"><i class="lni-link"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-6 col-sm-6">
|
||
<div class="single-work text-center mt-30">
|
||
<div class="work-image">
|
||
<img src="Unfold-Template_fichiers/w-6.jpg" alt="work">
|
||
</div>
|
||
<div class="work-overlay">
|
||
<div class="work-content">
|
||
<h3 class="work-title">Product Design</h3>
|
||
<ul>
|
||
<li><a class="image-popup" href="https://preview.uideck.com/items/unfold/assets/images/work/w-6.jpg"><i class="lni-plus"></i></a></li>
|
||
<li><a href="#"><i class="lni-link"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="work-more text-center mt-50">
|
||
<a class="main-btn" href="#">more works</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section id="pricing" class="pricing-area gray-bg pt-125 pb-130">
|
||
<div class="container">
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-8">
|
||
<div class="section-title text-center pb-25">
|
||
<h2 class="title">My Pricing Plans</h2>
|
||
<p>Nunc id dui at sapien faucibus fermentum ut vel diam. Nullam tempus,
|
||
nunc id efficitur sagittis, urna est ultricies eros, ac porta sem turpis
|
||
quis leo.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-4 col-md-8 col-sm-9">
|
||
<div class="single-pricing text-center mt-30">
|
||
<div class="pricing-package">
|
||
<h4 class="package-title">Basic</h4>
|
||
</div>
|
||
<div class="pricing-body">
|
||
<div class="pricing-text">
|
||
<p>Simple project management for teams and small businesses.</p>
|
||
<span class="price">$19.00</span>
|
||
</div>
|
||
<div class="pricing-list">
|
||
<ul>
|
||
<li>Unlimited Tasks</li>
|
||
<li>Unlimited Public</li>
|
||
<li>Private Projects</li>
|
||
<li>Unlimited Teams</li>
|
||
<li>All Integrations</li>
|
||
<li>Public API</li>
|
||
</ul>
|
||
</div>
|
||
<div class="pricing-btn">
|
||
<a class="main-btn" href="#contact">get quote</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-8 col-sm-9">
|
||
<div class="single-pricing active text-center mt-30">
|
||
<div class="pricing-package">
|
||
<h4 class="package-title">Standard</h4>
|
||
</div>
|
||
<div class="pricing-body">
|
||
<div class="pricing-text">
|
||
<p>Simple project management for teams and small businesses.</p>
|
||
<span class="price">$39.00</span>
|
||
</div>
|
||
<div class="pricing-list">
|
||
<ul>
|
||
<li>Unlimited Tasks</li>
|
||
<li>Unlimited Public</li>
|
||
<li>Private Projects</li>
|
||
<li>Unlimited Teams</li>
|
||
<li>All Integrations</li>
|
||
<li>Public API</li>
|
||
</ul>
|
||
</div>
|
||
<div class="pricing-btn">
|
||
<a class="main-btn" href="#contact">get quote</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-8 col-sm-9">
|
||
<div class="single-pricing text-center mt-30">
|
||
<div class="pricing-package">
|
||
<h4 class="package-title">Premium</h4>
|
||
</div>
|
||
<div class="pricing-body">
|
||
<div class="pricing-text">
|
||
<p>Simple project management for teams and small businesses.</p>
|
||
<span class="price">$29.00</span>
|
||
</div>
|
||
<div class="pricing-list">
|
||
<ul>
|
||
<li>Unlimited Tasks</li>
|
||
<li>Unlimited Public</li>
|
||
<li>Private Projects</li>
|
||
<li>Unlimited Teams</li>
|
||
<li>All Integrations</li>
|
||
<li>Public API</li>
|
||
</ul>
|
||
</div>
|
||
<div class="pricing-btn">
|
||
<a class="main-btn" href="#contact">get quote</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section id="blog" class="blog-area pt-125 pb-130">
|
||
<div class="container">
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-8">
|
||
<div class="section-title text-center pb-25">
|
||
<h2 class="title">From The Blog</h2>
|
||
<p>Nunc id dui at sapien faucibus fermentum ut vel diam. Nullam tempus,
|
||
nunc id efficitur sagittis, urna est ultricies eros, ac porta sem turpis
|
||
quis leo.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-4 col-md-8 col-sm-9">
|
||
<div class="single-blog mt-30">
|
||
<div class="blog-image">
|
||
<img src="Unfold-Template_fichiers/b-1.jpg" alt="Blog">
|
||
</div>
|
||
<div class="blog-content">
|
||
<h4 class="blog-title"><a href="https://preview.uideck.com/items/unfold/blog-details.html">Hired Releases 2023 Brand Health.</a></h4>
|
||
<span>July 26, 2022</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-8 col-sm-9">
|
||
<div class="single-blog mt-30">
|
||
<div class="blog-image">
|
||
<img src="Unfold-Template_fichiers/b-2.jpg" alt="Blog">
|
||
</div>
|
||
<div class="blog-content">
|
||
<h4 class="blog-title"><a href="https://preview.uideck.com/items/unfold/blog-details.html">Hired Releases 2023 Brand Health.</a></h4>
|
||
<span>July 26, 2022</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-8 col-sm-9">
|
||
<div class="single-blog mt-30">
|
||
<div class="blog-image">
|
||
<img src="Unfold-Template_fichiers/b-3.jpg" alt="Blog">
|
||
</div>
|
||
<div class="blog-content">
|
||
<h4 class="blog-title"><a href="https://preview.uideck.com/items/unfold/blog-details.html">Hired Releases 2023 Brand Health.</a></h4>
|
||
<span>July 26, 2022</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="blog-more text-center mt-50">
|
||
<a class="main-btn" href="#">More posts</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section id="contact" class="contact-area pt-125 pb-130 gray-bg">
|
||
<div class="container">
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-8">
|
||
<div class="section-title text-center pb-25">
|
||
<h2 class="title">Get In Touch</h2>
|
||
<p>Nunc id dui at sapien faucibus fermentum ut vel diam. Nullam tempus,
|
||
nunc id efficitur sagittis, urna est ultricies eros, ac porta sem turpis
|
||
quis leo.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-4 col-md-6 col-sm-7">
|
||
<div class="contact-box text-center mt-30">
|
||
<div class="contact-icon">
|
||
<i class="lni-map-marker"></i>
|
||
</div>
|
||
<div class="contact-content">
|
||
<h6 class="contact-title">Address</h6>
|
||
<p>123 Stree New York City , United States Of America 750</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-6 col-sm-7">
|
||
<div class="contact-box text-center mt-30">
|
||
<div class="contact-icon">
|
||
<i class="lni-phone"></i>
|
||
</div>
|
||
<div class="contact-content">
|
||
<h6 class="contact-title">Phone</h6>
|
||
<p>+931 2222 5555</p>
|
||
<p>+547 5554 6663</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-6 col-sm-7">
|
||
<div class="contact-box text-center mt-30">
|
||
<div class="contact-icon">
|
||
<i class="lni-envelope"></i>
|
||
</div>
|
||
<div class="contact-content">
|
||
<h6 class="contact-title">Email</h6>
|
||
<p>support@yourmail.com</p>
|
||
<p>info@helpline.com</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="contact-form pt-30">
|
||
<form id="contact-form" action="assets/contact.php">
|
||
<div class="single-form">
|
||
<input type="text" name="name" placeholder="Name">
|
||
</div>
|
||
<div class="single-form">
|
||
<input type="email" name="email" placeholder="Email">
|
||
</div>
|
||
<div class="single-form">
|
||
<textarea name="message" placeholder="Message"></textarea>
|
||
</div>
|
||
<p class="form-message"></p>
|
||
<div class="single-form">
|
||
<button class="main-btn" type="submit">Send Message</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="contact-map mt-60">
|
||
<div class="gmap_canvas">
|
||
<iframe id="gmap_canvas" src="https://maps.google.com/maps?q=Mission%20District%2C%20San%20Francisco%2C%20CA%2C%20USA&t=&z=13&ie=UTF8&iwloc=&output=embed" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<footer id="footer" class="footer-area">
|
||
<div class="footer-widget pt-130 pb-130">
|
||
<div class="container">
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-8">
|
||
<div class="footer-content text-center">
|
||
<a href="https://preview.uideck.com/items/unfold/index.html">
|
||
<img src="Unfold-Template_fichiers/logo-2.png" alt="Logo">
|
||
</a>
|
||
<p class="mt-">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
||
sed do eiusmod tempor inci- didunt ut labore et dolore magna aliqua. Ut
|
||
enim ad minim veniam, quis nostrud exe- rcitation ullamco laboris nisi
|
||
ut aliquip ex ea commodo consequat.</p>
|
||
<ul>
|
||
<li><a href="#"><i class="lni-facebook-filled"></i></a></li>
|
||
<li><a href="#"><i class="lni-twitter-original"></i></a></li>
|
||
<li><a href="#"><i class="lni-pinterest"></i></a></li>
|
||
<li><a href="#"><i class="lni-linkedin-original"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer-copyright pb-20">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="copyright-text text-center pt-20">
|
||
<p>Copyright © 2022. All rights reserved by You!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
|
||
<a href="#" class="back-to-top" style="display: inline-block;"><i class="lni-chevron-up"></i></a>
|
||
|
||
|
||
<script src="Unfold-Template_fichiers/modernizr-3.js"></script>
|
||
<script src="Unfold-Template_fichiers/jquery-1.js"></script>
|
||
|
||
<script src="Unfold-Template_fichiers/bootstrap.js"></script>
|
||
<script src="Unfold-Template_fichiers/popper.js"></script>
|
||
|
||
<script src="Unfold-Template_fichiers/jquery_004.js"></script>
|
||
|
||
<script src="Unfold-Template_fichiers/parallax.js"></script>
|
||
|
||
<script src="Unfold-Template_fichiers/waypoints.js"></script>
|
||
<script src="Unfold-Template_fichiers/jquery.js"></script>
|
||
|
||
<script src="Unfold-Template_fichiers/ajax-contact.js"></script>
|
||
|
||
<script src="Unfold-Template_fichiers/jquery_003.js"></script>
|
||
|
||
<script src="Unfold-Template_fichiers/scrolling-nav.js"></script>
|
||
<script src="Unfold-Template_fichiers/jquery_002.js"></script>
|
||
|
||
<script src="Unfold-Template_fichiers/validator.js"></script>
|
||
|
||
<script src="Unfold-Template_fichiers/main.js"></script>
|
||
|
||
|
||
<div id="wrapper-auto-scrolling" style="display: none;"><div id="modal-auto-scrolling" class="modal">
|
||
<a href="#close" class="modal-overlay" data-close-modal-auto-scrolling="" aria-label="Close"></a>
|
||
<div class="modal-container">
|
||
<div class="modal-header">
|
||
<a href="#close" class="btn btn-clear float-right" data-close-modal-auto-scrolling="" aria-label="Close"></a>
|
||
<div class="modal-title h3">Options | AutoScrolling</div>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div id="speed-wrapper-auto-scrolling">
|
||
<strong>Scrolling speed(scroll/sec):</strong>
|
||
<input type="number" class="scrolling-speed" id="scrolling-speed" value="20">
|
||
<p>The value is scrolling speed. A unit is scroll / sec.<br>
|
||
Max is 3000, and min is 1.</p>
|
||
</div>
|
||
<div>
|
||
<strong>Enable transmission scrolling:</strong>
|
||
<input type="checkbox" id="enable-transmission-scrolling">
|
||
<p class="mb-0">
|
||
If enabled, you can change scrolling speed per gear.
|
||
The gears are Slow / Middle / Fast.
|
||
The gears are cycled between
|
||
<mark>Slow</mark>, <mark>Middle</mark>, <mark>Fast</mark>
|
||
by <i>single/double-clicking</i> browser icon.
|
||
</p>
|
||
<table id="transmission-wrapper-auto-scrolling" class="d-hide">
|
||
<tbody>
|
||
<tr>
|
||
<th>Fast:</th>
|
||
<td><input type="number" class="scrolling-speed" id="transmission-gear-of-fast" value="2000">
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th>Middle:</th>
|
||
<td><input type="number" class="scrolling-speed" id="transmission-gear-of-middle" value="500">
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th>Slow:</th>
|
||
<td><input type="number" class="scrolling-speed" id="transmission-gear-of-slow" value="20">
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p></p>
|
||
</div>
|
||
<div>
|
||
<strong>Scrolling stop by click:</strong>
|
||
<input type="checkbox" id="stop-scrolling-by-click">
|
||
<p>If enabled the option, scrolling is stopped when you click the scrolling window.</p>
|
||
</div>
|
||
<div>
|
||
<strong>Stop scrolling by cursor hovering over something:</strong>
|
||
<input type="checkbox" id="stop-scrolling-by-click-on-hover">
|
||
<p>If enabled the option, scrolling is stopped temporally when mouse cursor is hovering over something.</p>
|
||
</div>
|
||
<div>
|
||
<strong>Keyboard shortcut for single-click action:</strong>
|
||
<input type="text" id="keybind-single-click" value="Alt+Shift+PageDown">
|
||
<p class="mb-0">Fire a single-click action by keyboard shortcut<br>
|
||
</p><ul>
|
||
<li>Start scrolling when window is stopped</li>
|
||
<li>Stop scrolling when window is scrolling</li>
|
||
<li>Close option modal window when the window is opened</li>
|
||
</ul>
|
||
The keybind should be a combination of keycodes concatenated with the '+' sign. <br>
|
||
<i>Ex: Ctrl+Shift+Insert.</i><br>
|
||
Check out the link for the keycodes: <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands#Key_combinations" target="_blank">Key combinations</a><br>
|
||
<span class="text-gray">Notice: Some key combinations are reserved by the browser and can't be reassigned to this.<span><p></p>
|
||
</span></span></div>
|
||
<div>
|
||
<strong>Stop scrolling on focus out:</strong>
|
||
<input type="checkbox" id="stop-scrolling-on-focus-out">
|
||
<p>If enabled the option, scrolling is stopped when focus for the browser is moved to another application or browser window.</p>
|
||
</div>
|
||
<div>
|
||
<strong>Disable double click action:</strong>
|
||
<input type="checkbox" id="disable-double-click">
|
||
<p class="mb-0">If enabled the option</p>
|
||
<ul>
|
||
<li>cannot open modal window</li>
|
||
<li>start/stop scrolling is immediately</li>
|
||
</ul>
|
||
<p></p>
|
||
</div>
|
||
<div>
|
||
<strong>Restore scrolling from switch back:</strong>
|
||
<input type="checkbox" id="restore-scrolling-from-switch-back">
|
||
<p>If this option is enabled, scrolling which stopped by tab changing restarts when user is back to a tab that was scrolling.</p>
|
||
</div>
|
||
<div>
|
||
<strong>Stop when bottom of window:</strong>
|
||
<input type="checkbox" id="stop-when-bottom-of-window" checked="checked">
|
||
<p>If enabled, scrolling is stopped when window position is reached at bottom.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div></div></body></html> |