920 lines
36 KiB
HTML
920 lines
36 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Color Admin | One Page Parallax Front End Theme</title>
|
|
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
|
|
<meta content="" name="description" />
|
|
<meta content="" name="author" />
|
|
|
|
<!-- ================== BEGIN core-css ================== -->
|
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
|
|
<link href="../assets/css/one-page-parallax/vendor.min.css" rel="stylesheet" />
|
|
<link href="../assets/css/one-page-parallax/app.min.css" rel="stylesheet" />
|
|
<!-- ================== END core-css ================== -->
|
|
</head>
|
|
<body data-bs-spy='scroll' data-bs-target='#header' data-bs-offset='51'>
|
|
<!-- begin #page-container -->
|
|
<div id="page-container" class="fade">
|
|
<!-- begin #header -->
|
|
<div id="header" class="header navbar navbar-transparent navbar-fixed-top navbar-expand-lg">
|
|
<!-- begin container -->
|
|
<div class="container">
|
|
<!-- begin navbar-brand -->
|
|
<a href="index.html" class="navbar-brand">
|
|
<span class="brand-logo"></span>
|
|
<span class="brand-text">
|
|
<span class="text-theme">Color</span> Admin
|
|
</span>
|
|
</a>
|
|
<!-- end navbar-brand -->
|
|
<!-- begin navbar-toggle -->
|
|
<button type="button" class="navbar-toggle collapsed" data-bs-toggle="collapse" data-bs-target="#header-navbar">
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<!-- end navbar-header -->
|
|
<!-- begin navbar-collapse -->
|
|
<div class="collapse navbar-collapse" id="header-navbar">
|
|
<ul class="nav navbar-nav navbar-end">
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link active" href="#home" data-click="scroll-to-target" data-scroll-target="#home">HOME <b class="caret"></b></a>
|
|
<div class="dropdown-menu dropdown-menu-left animate__animated animate__fadeInDown">
|
|
<a class="dropdown-item" href="index.html">Page with Transparent Header</a>
|
|
<a class="dropdown-item" href="index_inverse_header.html">Page with Inverse Header</a>
|
|
<a class="dropdown-item" href="index_default_header.html">Page with White Header</a>
|
|
<a class="dropdown-item" href="extra_element.html">Extra Element</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item"><a class="nav-link" href="#about" data-click="scroll-to-target">ABOUT</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#team" data-click="scroll-to-target">TEAM</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#service" data-click="scroll-to-target">SERVICES</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#work" data-click="scroll-to-target">WORK</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#client" data-click="scroll-to-target">CLIENT</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#pricing" data-click="scroll-to-target">PRICING</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#contact" data-click="scroll-to-target">CONTACT</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- end navbar-collapse -->
|
|
</div>
|
|
<!-- end container -->
|
|
</div>
|
|
<!-- end #header -->
|
|
|
|
<!-- begin #home -->
|
|
<div id="home" class="content has-bg home">
|
|
<!-- begin content-bg -->
|
|
<div class="content-bg" style="background-image: url(../assets/img/bg/bg-home.jpg);"
|
|
data-paroller="true"
|
|
data-paroller-type="foreground"
|
|
data-paroller-factor="-0.25">
|
|
</div>
|
|
<!-- end content-bg -->
|
|
<!-- begin container -->
|
|
<div class="container home-content">
|
|
<h1>Welcome to Color Admin</h1>
|
|
<h3>Multipurpose One Page Theme</h3>
|
|
<p>
|
|
We have created a multi-purpose theme that take the form of One-Page or Multi-Page Version.<br />
|
|
Use our <a href="#">theme panel</a> to select your favorite theme color.
|
|
</p>
|
|
<a href="#" class="btn btn-theme btn-primary">Explore More</a> <a href="#" class="btn btn-theme btn-outline-white">Purchase Now</a><br />
|
|
<br />
|
|
or <a href="#">subscribe</a> newsletter
|
|
</div>
|
|
<!-- end container -->
|
|
</div>
|
|
<!-- end #home -->
|
|
|
|
<!-- begin #about -->
|
|
<div id="about" class="content" data-scrollview="true">
|
|
<!-- begin container -->
|
|
<div class="container" data-animation="true" data-animation-type="animate__fadeInDown">
|
|
<h2 class="content-title">About Us</h2>
|
|
<p class="content-desc">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur eros dolor,<br />
|
|
sed bibendum turpis luctus eget
|
|
</p>
|
|
<!-- begin row -->
|
|
<div class="row">
|
|
<!-- begin col-4 -->
|
|
<div class="col-lg-4">
|
|
<!-- begin about -->
|
|
<div class="about">
|
|
<h3 class="mb-3">Our Story</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Vestibulum posuere augue eget ante porttitor fringilla.
|
|
Aliquam laoreet, sem eu dapibus congue, velit justo ullamcorper urna,
|
|
non rutrum dolor risus non sapien. Vivamus vel tincidunt quam.
|
|
Donec ultrices nisl ipsum, sed elementum ex dictum nec.
|
|
</p>
|
|
<p>
|
|
In non libero at orci rutrum viverra at ac felis.
|
|
Curabitur a efficitur libero, eu finibus quam.
|
|
Pellentesque pretium ante vitae est molestie, ut faucibus tortor commodo.
|
|
Donec gravida, eros ac pretium cursus, est erat dapibus quam,
|
|
sit amet dapibus nisl magna sit amet orci.
|
|
</p>
|
|
</div>
|
|
<!-- end about -->
|
|
</div>
|
|
<!-- end col-4 -->
|
|
<!-- begin col-4 -->
|
|
<div class="col-lg-4">
|
|
<h3 class="mb-3">Our Philosophy</h3>
|
|
<!-- begin about-author -->
|
|
<div class="about-author">
|
|
<div class="quote">
|
|
<i class="fa fa-quote-left"></i>
|
|
<h3>We work harder,<br /><span>to let our user keep simple</span></h3>
|
|
<i class="fa fa-quote-right"></i>
|
|
</div>
|
|
<div class="author">
|
|
<div class="image">
|
|
<img src="../assets/img/user/user-1.jpg" alt="Sean Ngu" />
|
|
</div>
|
|
<div class="info">
|
|
Sean Ngu
|
|
<small>Front End Developer</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end about-author -->
|
|
</div>
|
|
<!-- end col-4 -->
|
|
<!-- begin col-4 -->
|
|
<div class="col-lg-4">
|
|
<h3 class="mb-3">Our Experience</h3>
|
|
<!-- begin skills -->
|
|
<div class="skills">
|
|
<div class="skills-name">Front End</div>
|
|
<div class="progress mb-3">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated bg-theme" style="width: 95%">
|
|
<span class="progress-number">95%</span>
|
|
</div>
|
|
</div>
|
|
<div class="skills-name">Programming</div>
|
|
<div class="progress mb-3">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated bg-theme" style="width: 90%">
|
|
<span class="progress-number">90%</span>
|
|
</div>
|
|
</div>
|
|
<div class="skills-name">Database Design</div>
|
|
<div class="progress mb-3">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated bg-theme" style="width: 85%">
|
|
<span class="progress-number">85%</span>
|
|
</div>
|
|
</div>
|
|
<div class="skills-name">Wordpress</div>
|
|
<div class="progress mb-3">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated bg-theme" style="width: 80%">
|
|
<span class="progress-number">80%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end skills -->
|
|
</div>
|
|
<!-- end col-4 -->
|
|
</div>
|
|
<!-- end row -->
|
|
</div>
|
|
<!-- end container -->
|
|
</div>
|
|
<!-- end #about -->
|
|
|
|
<!-- begin #milestone -->
|
|
<div id="milestone" class="content bg-black-darker has-bg" data-scrollview="true">
|
|
<!-- begin content-bg -->
|
|
<div class="content-bg" style="background-image: url(../assets/img/bg/bg-milestone.jpg)"></div>
|
|
<!-- end content-bg -->
|
|
<!-- begin container -->
|
|
<div class="container">
|
|
<!-- begin row -->
|
|
<div class="row">
|
|
<!-- begin col-3 -->
|
|
<div class="col-lg-3 milestone-col">
|
|
<div class="milestone">
|
|
<div class="number" data-animation="true" data-animation-type="number" data-final-number="1292">1,292</div>
|
|
<div class="title">Themes & Template</div>
|
|
</div>
|
|
</div>
|
|
<!-- end col-3 -->
|
|
<!-- begin col-3 -->
|
|
<div class="col-lg-3 milestone-col">
|
|
<div class="milestone">
|
|
<div class="number" data-animation="true" data-animation-type="number" data-final-number="9039">9,039</div>
|
|
<div class="title">Registered Members</div>
|
|
</div>
|
|
</div>
|
|
<!-- end col-3 -->
|
|
<!-- begin col-3 -->
|
|
<div class="col-lg-3 milestone-col">
|
|
<div class="milestone">
|
|
<div class="number" data-animation="true" data-animation-type="number" data-final-number="89291">89,291</div>
|
|
<div class="title">Items Sold</div>
|
|
</div>
|
|
</div>
|
|
<!-- end col-3 -->
|
|
<!-- begin col-3 -->
|
|
<div class="col-lg-3 milestone-col">
|
|
<div class="milestone">
|
|
<div class="number" data-animation="true" data-animation-type="number" data-final-number="129">129</div>
|
|
<div class="title">Theme Authors</div>
|
|
</div>
|
|
</div>
|
|
<!-- end col-3 -->
|
|
</div>
|
|
<!-- end row -->
|
|
</div>
|
|
<!-- end container -->
|
|
</div>
|
|
<!-- end #milestone -->
|
|
|
|
<!-- begin #team -->
|
|
<div id="team" class="content" data-scrollview="true">
|
|
<!-- begin container -->
|
|
<div class="container">
|
|
<h2 class="content-title">Our Team</h2>
|
|
<p class="content-desc">
|
|
Phasellus suscipit nisi hendrerit metus pharetra dignissim. Nullam nunc ante, viverra quis<br />
|
|
ex non, porttitor iaculis nisi.
|
|
</p>
|
|
<!-- begin row -->
|
|
<div class="row">
|
|
<!-- begin col-4 -->
|
|
<div class="col-lg-4">
|
|
<!-- begin team -->
|
|
<div class="team">
|
|
<div class="image" data-animation="true" data-animation-type="animate__flipInX">
|
|
<img src="../assets/img/user/user-1.jpg" alt="Ryan Teller" />
|
|
</div>
|
|
<div class="info">
|
|
<h3 class="name">Ryan Teller</h3>
|
|
<div class="title text-theme">FOUNDER</div>
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
|
|
<div class="social">
|
|
<a href="#"><i class="fab fa-facebook-f fa-lg fa-fw"></i></a>
|
|
<a href="#"><i class="fab fa-twitter fa-lg fa-fw"></i></a>
|
|
<a href="#"><i class="fab fa-google-plus-g fa-lg fa-fw"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end team -->
|
|
</div>
|
|
<!-- end col-4 -->
|
|
<!-- begin col-4 -->
|
|
<div class="col-lg-4">
|
|
<!-- begin team -->
|
|
<div class="team">
|
|
<div class="image" data-animation="true" data-animation-type="animate__flipInX">
|
|
<img src="../assets/img/user/user-2.jpg" alt="Jonny Cash" />
|
|
</div>
|
|
<div class="info">
|
|
<h3 class="name">Johnny Cash</h3>
|
|
<div class="title text-theme">WEB DEVELOPER</div>
|
|
<p>Donec quam felis, ultricies nec, pellentesque eu sem. Nulla consequat massa vierra quis enim.</p>
|
|
<div class="social">
|
|
<a href="#"><i class="fab fa-facebook-f fa-lg fa-fw"></i></a>
|
|
<a href="#"><i class="fab fa-twitter fa-lg fa-fw"></i></a>
|
|
<a href="#"><i class="fab fa-google-plus-g fa-lg fa-fw"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end team -->
|
|
</div>
|
|
<!-- end col-4 -->
|
|
<!-- begin col-4 -->
|
|
<div class="col-lg-4">
|
|
<!-- begin team -->
|
|
<div class="team">
|
|
<div class="image" data-animation="true" data-animation-type="animate__flipInX">
|
|
<img src="../assets/img/user/user-3.jpg" alt="Mia Donovan" />
|
|
</div>
|
|
<div class="info">
|
|
<h3 class="name">Mia Donovan</h3>
|
|
<div class="title text-theme">WEB DESIGNER</div>
|
|
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean ligula imperdiet. </p>
|
|
<div class="social">
|
|
<a href="#"><i class="fab fa-facebook-f fa-lg fa-fw"></i></a>
|
|
<a href="#"><i class="fab fa-twitter fa-lg fa-fw"></i></a>
|
|
<a href="#"><i class="fab fa-google-plus-g fa-lg fa-fw"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end team -->
|
|
</div>
|
|
<!-- end col-4 -->
|
|
</div>
|
|
<!-- end row -->
|
|
</div>
|
|
<!-- end container -->
|
|
</div>
|
|
<!-- end #team -->
|
|
|
|
<!-- begin #quote -->
|
|
<div id="quote" class="content bg-black-darker has-bg" data-scrollview="true">
|
|
<!-- begin content-bg -->
|
|
<div class="content-bg" style="background-image: url(../assets/img/bg/bg-quote.jpg)"
|
|
data-paroller-factor="0.5"
|
|
data-paroller-factor-md="0.01"
|
|
data-paroller-factor-xs="0.01">
|
|
</div>
|
|
<!-- end content-bg -->
|
|
<!-- begin container -->
|
|
<div class="container" data-animation="true" data-animation-type="animate__fadeInLeft">
|
|
<!-- begin row -->
|
|
<div class="row">
|
|
<!-- begin col-12 -->
|
|
<div class="col-lg-12 quote">
|
|
<i class="fa fa-quote-left"></i> Passion leads to design, design leads to performance, <br />
|
|
performance leads to <span class="text-theme">success</span>!
|
|
<i class="fa fa-quote-right"></i>
|
|
<small>Sean Themes, Developer Teams in Malaysia</small>
|
|
</div>
|
|
<!-- end col-12 -->
|
|
</div>
|
|
<!-- end row -->
|
|
</div>
|
|
<!-- end container -->
|
|
</div>
|
|
<!-- end #quote -->
|
|
|
|
<!-- beign #service -->
|
|
<div id="service" class="content" data-scrollview="true">
|
|
<!-- begin container -->
|
|
<div class="container">
|
|
<h2 class="content-title">Our Services</h2>
|
|
<p class="content-desc">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur eros dolor,<br />
|
|
sed bibendum turpis luctus eget
|
|
</p>
|
|
<!-- begin row -->
|
|
<div class="row">
|
|
<!-- begin col-4 -->
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="service">
|
|
<div class="icon" data-animation="true" data-animation-type="animate__bounceIn"><i class="fa fa-cog"></i></div>
|
|
<div class="info">
|
|
<h4 class="title">Easy to Customize</h4>
|
|
<p class="desc">Duis in lorem placerat, iaculis nisi vitae, ultrices tortor. Vestibulum molestie ipsum nulla. Maecenas nec hendrerit eros, sit amet maximus leo.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end col-4 -->
|
|
<!-- begin col-4 -->
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="service">
|
|
<div class="icon" data-animation="true" data-animation-type="animate__bounceIn"><i class="fa fa-paint-brush"></i></div>
|
|
<div class="info">
|
|
<h4 class="title">Clean & Careful Design</h4>
|
|
<p class="desc">Etiam nulla turpis, gravida et orci ac, viverra commodo ipsum. Donec nec mauris faucibus, congue nisi sit amet, lobortis arcu.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end col-4 -->
|
|
<!-- begin col-4 -->
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="service">
|
|
<div class="icon" data-animation="true" data-animation-type="animate__bounceIn"><i class="fa fa-file"></i></div>
|
|
<div class="info">
|
|
<h4 class="title">Well Documented</h4>
|
|
<p class="desc">Ut vel laoreet tortor. Donec venenatis ex velit, eget bibendum purus accumsan cursus. Curabitur pulvinar iaculis diam.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end col-4 -->
|
|
<!-- begin col-4 -->
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="service">
|
|
<div class="icon" data-animation="true" data-animation-type="animate__bounceIn"><i class="fa fa-code"></i></div>
|
|
<div class="info">
|
|
<h4 class="title">Re-usable Code</h4>
|
|
<p class="desc">Aenean et elementum dui. Aenean massa enim, suscipit ut molestie quis, pretium sed orci. Ut faucibus egestas mattis.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end col-4 -->
|
|
<!-- begin col-4 -->
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="service">
|
|
<div class="icon" data-animation="true" data-animation-type="animate__bounceIn"><i class="fa fa-shopping-cart"></i></div>
|
|
<div class="info">
|
|
<h4 class="title">Online Shop</h4>
|
|
<p class="desc">Quisque gravida metus in sollicitudin feugiat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end col-4 -->
|
|
<!-- begin col-4 -->
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="service">
|
|
<div class="icon" data-animation="true" data-animation-type="animate__bounceIn"><i class="fa fa-heart"></i></div>
|
|
<div class="info">
|
|
<h4 class="title">Free Support</h4>
|
|
<p class="desc">Integer consectetur, massa id mattis tincidunt, sapien erat malesuada turpis, nec vehicula lacus felis nec libero. Fusce non lorem nisl.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end col-4 -->
|
|
</div>
|
|
<!-- end row -->
|
|
</div>
|
|
<!-- end container -->
|
|
</div>
|
|
<!-- end #service -->
|
|
|
|
<!-- beign #action-box -->
|
|
<div id="action-box" class="content has-bg" data-scrollview="true">
|
|
<!-- begin content-bg -->
|
|
<div class="content-bg" style="background-image: url(../assets/img/bg/bg-action.jpg)"
|
|
data-paroller-factor="0.5"
|
|
data-paroller-factor-md="0.01"
|
|
data-paroller-factor-xs="0.01">
|
|
</div>
|
|
<!-- end content-bg -->
|
|
<!-- begin container -->
|
|
<div class="container" data-animation="true" data-animation-type="animate__fadeInRight">
|
|
<!-- begin row -->
|
|
<div class="row action-box">
|
|
<!-- begin col-9 -->
|
|
<div class="col-lg-9">
|
|
<div class="icon-large text-theme">
|
|
<i class="fa fa-binoculars"></i>
|
|
</div>
|
|
<h3>CHECK OUT OUR ADMIN THEME!</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus faucibus magna eu lacinia eleifend.
|
|
</p>
|
|
</div>
|
|
<!-- end col-9 -->
|
|
<!-- begin col-3 -->
|
|
<div class="col-lg-3">
|
|
<a href="#" class="btn btn-outline-white btn-theme btn-block">Live Preview</a>
|
|
</div>
|
|
<!-- end col-3 -->
|
|
</div>
|
|
<!-- end row -->
|
|
</div>
|
|
<!-- end container -->
|
|
</div>
|
|
<!-- end #action-box -->
|
|
|
|
<!-- begin #work -->
|
|
<div id="work" class="content" data-scrollview="true">
|
|
<!-- begin container -->
|
|
<div class="container" data-animation="true" data-animation-type="animate__fadeInDown">
|
|
<h2 class="content-title">Our Latest Work</h2>
|
|
<p class="content-desc">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur eros dolor,<br />
|
|
sed bibendum turpis luctus eget
|
|
</p>
|
|
<!-- begin row -->
|
|
<div class="row row-space-10">
|
|
<!-- begin col-3 -->
|
|
<div class="col-lg-3 col-md-4">
|
|
<!-- begin work -->
|
|
<div class="work">
|
|
<div class="image">
|
|
<a href="#"><img src="../assets/img/work/work-img-1.jpg" alt="Work 1" /></a>
|
|
</div>
|
|
<div class="desc">
|
|
<span class="desc-title">Aliquam molestie</span>
|
|
<span class="desc-text">Lorem ipsum dolor sit amet</span>
|
|
</div>
|
|
</div>
|
|
<!-- end work -->
|
|
</div>
|
|
<!-- end col-3 -->
|
|
<!-- begin col-3 -->
|
|
<div class="col-lg-3 col-md-4">
|
|
<!-- begin work -->
|
|
<div class="work">
|
|
<div class="image">
|
|
<a href="#"><img src="../assets/img/work/work-img-2.jpg" alt="Work 2" /></a>
|
|
</div>
|
|
<div class="desc">
|
|
<span class="desc-title">Quisque at pulvinar lacus</span>
|
|
<span class="desc-text">Lorem ipsum dolor sit amet</span>
|
|
</div>
|
|
</div>
|
|
<!-- end work -->
|
|
</div>
|
|
<!-- end col-3 -->
|
|
<!-- begin col-3 -->
|
|
<div class="col-lg-3 col-md-4">
|
|
<!-- begin work -->
|
|
<div class="work">
|
|
<div class="image">
|
|
<a href="#"><img src="../assets/img/work/work-img-3.jpg" alt="Work 3" /></a>
|
|
</div>
|
|
<div class="desc">
|
|
<span class="desc-title">Vestibulum et erat ornare</span>
|
|
<span class="desc-text">Lorem ipsum dolor sit amet</span>
|
|
</div>
|
|
</div>
|
|
<!-- end work -->
|
|
</div>
|
|
<!-- end col-3 -->
|
|
<!-- begin col-3 -->
|
|
<div class="col-lg-3 col-md-4">
|
|
<!-- begin work -->
|
|
<div class="work">
|
|
<div class="image">
|
|
<a href="#"><img src="../assets/img/work/work-img-4.jpg" alt="Work 4" /></a>
|
|
</div>
|
|
<div class="desc">
|
|
<span class="desc-title">Sed vitae mollis magna</span>
|
|
<span class="desc-text">Lorem ipsum dolor sit amet</span>
|
|
</div>
|
|
</div>
|
|
<!-- end work -->
|
|
</div>
|
|
<!-- end col-3 -->
|
|
<!-- begin col-3 -->
|
|
<div class="col-lg-3 col-md-4">
|
|
<!-- begin work -->
|
|
<div class="work">
|
|
<div class="image">
|
|
<a href="#"><img src="../assets/img/work/work-img-5.jpg" alt="Work 5" /></a>
|
|
</div>
|
|
<div class="desc">
|
|
<span class="desc-title">Suspendisse at mattis odio</span>
|
|
<span class="desc-text">Lorem ipsum dolor sit amet</span>
|
|
</div>
|
|
</div>
|
|
<!-- end work -->
|
|
</div>
|
|
<!-- end col-3 -->
|
|
<!-- begin col-3 -->
|
|
<div class="col-lg-3 col-md-4">
|
|
<!-- begin work -->
|
|
<div class="work">
|
|
<div class="image">
|
|
<a href="#"><img src="../assets/img/work/work-img-6.jpg" alt="Work 6" /></a>
|
|
</div>
|
|
<div class="desc">
|
|
<span class="desc-title">Aliquam vitae commodo diam</span>
|
|
<span class="desc-text">Lorem ipsum dolor sit amet</span>
|
|
</div>
|
|
</div>
|
|
<!-- end work -->
|
|
</div>
|
|
<!-- end col-3 -->
|
|
<!-- begin col-3 -->
|
|
<div class="col-lg-3 col-md-4">
|
|
<!-- begin work -->
|
|
<div class="work">
|
|
<div class="image">
|
|
<a href="#"><img src="../assets/img/work/work-img-7.jpg" alt="Work 7" /></a>
|
|
</div>
|
|
<div class="desc">
|
|
<span class="desc-title">Phasellus eu vehicula lorem</span>
|
|
<span class="desc-text">Lorem ipsum dolor sit amet</span>
|
|
</div>
|
|
</div>
|
|
<!-- end work -->
|
|
</div>
|
|
<!-- end col-3 -->
|
|
<!-- begin col-3 -->
|
|
<div class="col-lg-3 col-md-4">
|
|
<!-- begin work -->
|
|
<div class="work">
|
|
<div class="image">
|
|
<a href="#"><img src="../assets/img/work/work-img-8.jpg" alt="Work 8" /></a>
|
|
</div>
|
|
<div class="desc">
|
|
<span class="desc-title">Morbi bibendum pellentesque</span>
|
|
<span class="desc-text">Lorem ipsum dolor sit amet</span>
|
|
</div>
|
|
</div>
|
|
<!-- end work -->
|
|
</div>
|
|
<!-- end col-3 -->
|
|
</div>
|
|
<!-- end row -->
|
|
</div>
|
|
<!-- end container -->
|
|
</div>
|
|
<!-- end #work -->
|
|
|
|
<!-- begin #client -->
|
|
<div id="client" class="content has-bg bg-green" data-scrollview="true">
|
|
<!-- begin content-bg -->
|
|
<div class="content-bg" style="background-image: url(../assets/img/bg/bg-client.jpg)"
|
|
data-paroller-factor="0.5"
|
|
data-paroller-factor-md="0.01"
|
|
data-paroller-factor-xs="0.01">
|
|
</div>
|
|
<!-- end content-bg -->
|
|
<!-- begin container -->
|
|
<div class="container" data-animation="true" data-animation-type="animate__fadeInUp">
|
|
<h2 class="content-title">Our Client Testimonials</h2>
|
|
<!-- begin carousel -->
|
|
<div class="carousel testimonials slide" data-ride="carousel" id="testimonials">
|
|
<!-- begin carousel-inner -->
|
|
<div class="carousel-inner text-center">
|
|
<!-- begin item -->
|
|
<div class="carousel-item active">
|
|
<blockquote>
|
|
<i class="fa fa-quote-left"></i>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce viverra, nulla ut interdum fringilla,<br />
|
|
urna massa cursus lectus, eget rutrum lectus neque non ex.
|
|
<i class="fa fa-quote-right"></i>
|
|
</blockquote>
|
|
<div class="name"> — <span class="text-theme">Mark Doe</span>, Designer</div>
|
|
</div>
|
|
<!-- end item -->
|
|
<!-- begin item -->
|
|
<div class="carousel-item">
|
|
<blockquote>
|
|
<i class="fa fa-quote-left"></i>
|
|
Donec cursus ligula at ante vulputate laoreet. Nulla egestas sit amet lorem non bibendum.<br />
|
|
Nulla eget risus velit. Pellentesque tincidunt velit vitae tincidunt finibus.
|
|
<i class="fa fa-quote-right"></i>
|
|
</blockquote>
|
|
<div class="name"> — <span class="text-theme">Joe Smith</span>, Developer</div>
|
|
</div>
|
|
<!-- end item -->
|
|
<!-- begin item -->
|
|
<div class="carousel-item">
|
|
<blockquote>
|
|
<i class="fa fa-quote-left"></i>
|
|
Sed tincidunt quis est sed ultrices. Sed feugiat auctor ipsum, sit amet accumsan elit vestibulum<br />
|
|
fringilla. In sollicitudin ac ligula eget vestibulum.
|
|
<i class="fa fa-quote-right"></i>
|
|
</blockquote>
|
|
<div class="name"> — <span class="text-theme">Linda Adams</span>, Programmer</div>
|
|
</div>
|
|
<!-- end item -->
|
|
</div>
|
|
<!-- end carousel-inner -->
|
|
<!-- begin carousel-indicators -->
|
|
<div class="carousel-indicators m-b-0">
|
|
<button type="button" data-bs-target="#testimonials" data-bs-slide-to="0" class="active"></button>
|
|
<button type="button" data-bs-target="#testimonials" data-bs-slide-to="1" class=""></button>
|
|
<button type="button" data-bs-target="#testimonials" data-bs-slide-to="2" class=""></button>
|
|
</div>
|
|
<!-- end carousel-indicators -->
|
|
</div>
|
|
<!-- end carousel -->
|
|
</div>
|
|
<!-- end containter -->
|
|
</div>
|
|
<!-- end #client -->
|
|
|
|
<!-- begin #pricing -->
|
|
<div id="pricing" class="content" data-scrollview="true">
|
|
<!-- begin container -->
|
|
<div class="container">
|
|
<h2 class="content-title">Our Price</h2>
|
|
<p class="content-desc">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur eros dolor,<br />
|
|
sed bibendum turpis luctus eget
|
|
</p>
|
|
<!-- begin pricing-table -->
|
|
<ul class="pricing-table pricing-col-4">
|
|
<li data-animation="true" data-animation-type="animate__fadeInUp">
|
|
<div class="pricing-container">
|
|
<h3>Starter</h3>
|
|
<div class="price">
|
|
<div class="price-figure">
|
|
<span class="price-number">FREE</span>
|
|
</div>
|
|
</div>
|
|
<ul class="features">
|
|
<li>1GB Storage</li>
|
|
<li>2 Clients</li>
|
|
<li>5 Active Projects</li>
|
|
<li>5 Colors</li>
|
|
<li>Free Goodies</li>
|
|
<li>24/7 Email support</li>
|
|
</ul>
|
|
<div class="footer">
|
|
<a href="#" class="btn btn-inverse btn-theme btn-block">Buy Now</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li data-animation="true" data-animation-type="animate__fadeInUp">
|
|
<div class="pricing-container">
|
|
<h3>Basic</h3>
|
|
<div class="price">
|
|
<div class="price-figure">
|
|
<span class="price-number">$9.99</span>
|
|
<span class="price-tenure">per month</span>
|
|
</div>
|
|
</div>
|
|
<ul class="features">
|
|
<li>2GB Storage</li>
|
|
<li>5 Clients</li>
|
|
<li>10 Active Projects</li>
|
|
<li>10 Colors</li>
|
|
<li>Free Goodies</li>
|
|
<li>24/7 Email support</li>
|
|
</ul>
|
|
<div class="footer">
|
|
<a href="#" class="btn btn-inverse btn-theme btn-block">Buy Now</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="highlight" data-animation="true" data-animation-type="animate__fadeInUp">
|
|
<div class="pricing-container">
|
|
<h3>Premium</h3>
|
|
<div class="price">
|
|
<div class="price-figure">
|
|
<span class="price-number">$19.99</span>
|
|
<span class="price-tenure">per month</span>
|
|
</div>
|
|
</div>
|
|
<ul class="features">
|
|
<li>5GB Storage</li>
|
|
<li>10 Clients</li>
|
|
<li>20 Active Projects</li>
|
|
<li>20 Colors</li>
|
|
<li>Free Goodies</li>
|
|
<li>24/7 Email support</li>
|
|
</ul>
|
|
<div class="footer">
|
|
<a href="#" class="btn btn-primary btn-theme btn-block">Buy Now</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li data-animation="true" data-animation-type="animate__fadeInUp">
|
|
<div class="pricing-container">
|
|
<h3>Lifetime</h3>
|
|
<div class="price">
|
|
<div class="price-figure">
|
|
<span class="price-number">$999</span>
|
|
</div>
|
|
</div>
|
|
<ul class="features">
|
|
<li>Unlimited Storage</li>
|
|
<li>Unlimited Clients</li>
|
|
<li>Unlimited Projects</li>
|
|
<li>Unlimited Colors</li>
|
|
<li>Free Goodies</li>
|
|
<li>24/7 Email support</li>
|
|
</ul>
|
|
<div class="footer">
|
|
<a href="#" class="btn btn-inverse btn-theme btn-block">Buy Now</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- end container -->
|
|
</div>
|
|
<!-- end #pricing -->
|
|
|
|
<!-- begin #contact -->
|
|
<div id="contact" class="content bg-light" data-scrollview="true">
|
|
<!-- begin container -->
|
|
<div class="container">
|
|
<h2 class="content-title">Contact Us</h2>
|
|
<p class="content-desc">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur eros dolor,<br />
|
|
sed bibendum turpis luctus eget
|
|
</p>
|
|
<!-- begin row -->
|
|
<div class="row">
|
|
<!-- begin col-6 -->
|
|
<div class="col-lg-6" data-animation="true" data-animation-type="animate__fadeInLeft">
|
|
<h3>If you have a project you would like to discuss, get in touch with us.</h3>
|
|
<p>
|
|
Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus.
|
|
</p>
|
|
<p>
|
|
<strong>SeanTheme Studio, Inc</strong><br />
|
|
795 Folsom Ave, Suite 600<br />
|
|
San Francisco, CA 94107<br />
|
|
P: (123) 456-7890<br />
|
|
</p>
|
|
<p>
|
|
<span class="phone">+11 (0) 123 456 78</span><br />
|
|
<a href="mailto:hello@emailaddress.com" class="text-theme">seanthemes@support.com</a>
|
|
</p>
|
|
</div>
|
|
<!-- end col-6 -->
|
|
<!-- begin col-6 -->
|
|
<div class="col-lg-6 form-col" data-animation="true" data-animation-type="animate__fadeInRight">
|
|
<form class="form-horizontal">
|
|
<div class="row mb-3">
|
|
<label class="col-form-label col-lg-3 text-lg-right">Name <span class="text-theme">*</span></label>
|
|
<div class="col-lg-9">
|
|
<input type="text" class="form-control" />
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<label class="col-form-label col-lg-3 text-lg-right">Email <span class="text-theme">*</span></label>
|
|
<div class="col-lg-9">
|
|
<input type="text" class="form-control" />
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<label class="col-form-label col-lg-3 text-lg-right">Message <span class="text-theme">*</span></label>
|
|
<div class="col-lg-9">
|
|
<textarea class="form-control" rows="10"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3">
|
|
<label class="col-form-label col-lg-3 text-lg-right"></label>
|
|
<div class="col-lg-9 text-left">
|
|
<button type="submit" class="btn btn-theme btn-primary btn-block">Send Message</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- end col-6 -->
|
|
</div>
|
|
<!-- end row -->
|
|
</div>
|
|
<!-- end container -->
|
|
</div>
|
|
<!-- end #contact -->
|
|
|
|
<!-- begin #footer -->
|
|
<div id="footer" class="footer">
|
|
<div class="container">
|
|
<div class="footer-brand">
|
|
<div class="footer-brand-logo"></div>
|
|
Color Admin
|
|
</div>
|
|
<p>
|
|
© Copyright Color Admin 2025 <br />
|
|
An admin & front end theme with serious impact. Created by <a href="#">SeanTheme</a>
|
|
</p>
|
|
<p class="social-list">
|
|
<a href="#"><i class="fab fa-facebook-f fa-fw"></i></a>
|
|
<a href="#"><i class="fab fa-instagram fa-fw"></i></a>
|
|
<a href="#"><i class="fab fa-twitter fa-fw"></i></a>
|
|
<a href="#"><i class="fab fa-google-plus-g fa-fw"></i></a>
|
|
<a href="#"><i class="fab fa-dribbble fa-fw"></i></a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- end #footer -->
|
|
<!-- BEGIN theme-panel -->
|
|
<div class="theme-panel">
|
|
<a href="javascript:;" data-toggle="theme-panel-expand" class="theme-collapse-btn"><i class="fa fa-cog"></i></a>
|
|
<div class="theme-panel-content">
|
|
<div class="theme-list clearfix">
|
|
<div class="theme-list-item"><a href="javascript:;" class="bg-red" data-theme-class="theme-red" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Red" data-original-title="" title=""> </a></div>
|
|
<div class="theme-list-item"><a href="javascript:;" class="bg-pink" data-theme-class="theme-pink" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Pink" data-original-title="" title=""> </a></div>
|
|
<div class="theme-list-item"><a href="javascript:;" class="bg-orange" data-theme-class="theme-orange" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Orange" data-original-title="" title=""> </a></div>
|
|
<div class="theme-list-item"><a href="javascript:;" class="bg-yellow" data-theme-class="theme-yellow" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Yellow" data-original-title="" title=""> </a></div>
|
|
<div class="theme-list-item"><a href="javascript:;" class="bg-lime" data-theme-class="theme-lime" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Lime" data-original-title="" title=""> </a></div>
|
|
<div class="theme-list-item"><a href="javascript:;" class="bg-green" data-theme-class="theme-green" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Green" data-original-title="" title=""> </a></div>
|
|
<div class="theme-list-item active"><a href="javascript:;" class="bg-teal" data-theme-class="" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Default" data-original-title="" title=""> </a></div>
|
|
<div class="theme-list-item"><a href="javascript:;" class="bg-cyan" data-theme-class="theme-cyan" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Aqua" data-original-title="" title=""> </a></div>
|
|
<div class="theme-list-item"><a href="javascript:;" class="bg-blue" data-theme-class="theme-blue" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Blue" data-original-title="" title=""> </a></div>
|
|
<div class="theme-list-item"><a href="javascript:;" class="bg-purple" data-theme-class="theme-purple" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Purple" data-original-title="" title=""> </a></div>
|
|
<div class="theme-list-item"><a href="javascript:;" class="bg-indigo" data-theme-class="theme-indigo" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Indigo" data-original-title="" title=""> </a></div>
|
|
<div class="theme-list-item"><a href="javascript:;" class="bg-gray-500" data-theme-class="theme-gray-500" data-toggle="theme-selector" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-container="body" data-bs-title="Gray" data-original-title="" title=""> </a></div>
|
|
</div>
|
|
<hr class="mb-0" />
|
|
<div class="row mt-10px pt-3px">
|
|
<div class="col-9 control-label text-dark fw-bold">
|
|
<div class="d-flex">Dark Mode <span class="badge bg-primary ms-2 position-relative py-4px px-6px d-flex align-items-center rounded-1">NEW</span></div>
|
|
<div class="lh-sm fs-12px">
|
|
<small class="text-dark opacity-50">
|
|
Adjust the appearance to reduce glare and give your eyes a break.
|
|
</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-3 d-flex">
|
|
<div class="form-check form-switch ms-auto mb-0 mt-2px">
|
|
<input type="checkbox" class="form-check-input" name="app-theme-dark-mode" id="appThemeDarkMode" value="1" />
|
|
<label class="form-check-label" for="appThemeDarkMode"></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="mb-0" />
|
|
<div class="row mt-10px pt-3px">
|
|
<div class="col-9 control-label text-dark fw-bold">
|
|
<div class="d-flex">RTL Mode <span class="badge bg-primary ms-2 position-relative py-4px px-6px d-flex align-items-center rounded-1">NEW</span></div>
|
|
<div class="lh-sm fs-12px">
|
|
<small class="text-dark opacity-50">
|
|
Flip the layout direction to support right-to-left languages.
|
|
</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-3 d-flex">
|
|
<div class="form-check form-switch ms-auto mb-0 mt-2px">
|
|
<input type="checkbox" class="form-check-input" name="app-theme-rtl-mode" id="appThemeRtlMode" value="1" />
|
|
<label class="form-check-label" for="appThemeRtlMode"></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END theme-panel -->
|
|
</div>
|
|
<!-- end #page-container -->
|
|
|
|
<!-- ================== BEGIN BASE JS ================== -->
|
|
<script src="../assets/js/one-page-parallax/vendor.min.js"></script>
|
|
<script src="../assets/js/one-page-parallax/app.min.js"></script>
|
|
|
|
</body>
|
|
</html> |