mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-04 17:38:10 +00:00
1045 lines
38 KiB
HTML
1045 lines
38 KiB
HTML
<!DOCTYPE html>
|
||
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
||
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
||
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
||
<!--[if gt IE 8]><!-->
|
||
<html class="no-js"> <!--<![endif]-->
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
<meta name="description" content="Storyteller">
|
||
|
||
<meta name="author" content="The Storyteller Company">
|
||
|
||
<title>Storyteller | Hollywood Studio </title>
|
||
|
||
<!-- Mobile Specific Meta
|
||
================================================== -->
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
<!-- Favicon -->
|
||
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png" />
|
||
|
||
<!-- CSS
|
||
================================================== -->
|
||
<!-- Themefisher Icon font -->
|
||
<link rel="stylesheet" href="plugins/themefisher-font/style.css">
|
||
<!-- bootstrap.min css -->
|
||
<link rel="stylesheet" href="plugins/bootstrap/dist/css/bootstrap.min.css">
|
||
<!-- Lightbox.min css -->
|
||
<link rel="stylesheet" href="plugins/lightbox2/dist/css/lightbox.min.css">
|
||
<!-- Slick Carousel -->
|
||
<link rel="stylesheet" href="plugins/slick-carousel/slick/slick.css">
|
||
<link rel="stylesheet" href="plugins/slick-carousel/slick/slick-theme.css">
|
||
<!-- Main Stylesheet -->
|
||
<link rel="stylesheet" href="css/style.css">
|
||
|
||
|
||
<!-- Colors -->
|
||
<!-- <link rel="stylesheet" type="text/css" href="css/colors/green.css" title="green">
|
||
<link rel="stylesheet" type="text/css" href="css/colors/red.css" title="light-red">
|
||
<link rel="stylesheet" type="text/css" href="css/colors/light-blue.css" title="light-blue">
|
||
<link rel="stylesheet" type="text/css" href="css/colors/yellow.css" title="yellow">
|
||
<link rel="stylesheet" type="text/css" href="css/colors/light-green.css" title="light-green">
|
||
<link rel="stylesheet" type="text/css" href="css/colors/blue.css" title="blue"> -->
|
||
|
||
|
||
</head>
|
||
|
||
<body id="body">
|
||
|
||
<!--
|
||
Start Preloader
|
||
==================================== -->
|
||
<div id="preloader">
|
||
<div class="preloader">
|
||
<div class="sk-circle1 sk-child"></div>
|
||
<div class="sk-circle2 sk-child"></div>
|
||
<div class="sk-circle3 sk-child"></div>
|
||
<div class="sk-circle4 sk-child"></div>
|
||
<div class="sk-circle5 sk-child"></div>
|
||
<div class="sk-circle6 sk-child"></div>
|
||
<div class="sk-circle7 sk-child"></div>
|
||
<div class="sk-circle8 sk-child"></div>
|
||
<div class="sk-circle9 sk-child"></div>
|
||
<div class="sk-circle10 sk-child"></div>
|
||
<div class="sk-circle11 sk-child"></div>
|
||
<div class="sk-circle12 sk-child"></div>
|
||
</div>
|
||
</div>
|
||
<!--
|
||
End Preloader
|
||
==================================== -->
|
||
|
||
|
||
|
||
|
||
<!--
|
||
Fixed Navigation
|
||
==================================== -->
|
||
<header class="navigation navbar navbar-fixed-top">
|
||
<div class="container">
|
||
<div class="navbar-header">
|
||
<!-- responsive nav button -->
|
||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
||
<span class="sr-only">Toggle navigation</span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
</button>
|
||
<!-- /responsive nav button -->
|
||
|
||
<!-- logo -->
|
||
<a class="navbar-brand logo" href="index.html">
|
||
<img class="logo-default" src="images/logo.png" alt="logo" />
|
||
<img class="logo-white" src="images/logo-white.png" alt="logo" />
|
||
</a>
|
||
<!-- /logo -->
|
||
</div>
|
||
|
||
<!-- main nav -->
|
||
<nav class="collapse navbar-collapse navbar-right" >
|
||
<ul id="nav" class="nav navbar-nav menu">
|
||
<li class="current"><a data-scroll href="#body">Home</a></li>
|
||
<li><a data-scroll href="#about">About Us</a></li>
|
||
<li><a data-scroll href="#services">Services</a></li>
|
||
<li><a data-scroll href="#skills">Skills</a></li>
|
||
<li><a data-scroll href="#team">Team</a></li>
|
||
<li><a data-scroll href="#portfolio">Portfolio</a></li>
|
||
<li><a data-scroll href="#pricing">Pricing</a></li>
|
||
<li><a data-scroll href="#blog">Blog</a></li>
|
||
<li><a data-scroll href="#contact">Contact</a></li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pages <span class="caret"></span></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="index-slider.html">Homepage</a></li>
|
||
<li><a href="index.html">Homepage 2</a></li>
|
||
<li><a href="onepage-slider.html">Onepage</a></li>
|
||
<li><a href="onepage-text.html">Onepage 2</a></li>
|
||
<li><a href="404.html">404 Page</a></li>
|
||
<li><a href="blog.html">Blog Page</a></li>
|
||
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
<!-- /main nav -->
|
||
|
||
</div>
|
||
</header>
|
||
<!--
|
||
End Fixed Navigation
|
||
==================================== -->
|
||
|
||
<!--
|
||
Welcome Slider
|
||
==================================== -->
|
||
|
||
<section class="hero-area">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="video-player">
|
||
<img class="img-fluid rounded" src="images/slider/video-player-thumb.jpg" alt="">
|
||
<a class="play-icon" href="javascript:void(0)">
|
||
<i class="tf-ion-play" data-video="https://www.youtube.com/embed/g3-VxLQO7do?autoplay=1"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="block">
|
||
<h2>We love to make brands grow</h2>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At quo dolor est incidunt suscipit minima, alias numquam voluptatum rerum porro. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore at laboriosam unde repellat id expedita quae quisquam libero officia consequatur. </p>
|
||
<ul class="list-inline wow fadeInUp" data-wow-duration=".5s" data-wow-delay=".7s">
|
||
<li class="list-inline-item">
|
||
<a href="https://vo.codes/" target="_blank" class="btn btn-main">TTS</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="about section-sm" id="about">
|
||
<div class="container">
|
||
<div class="row mb-50 justify-content-center">
|
||
<div class="col-md-5 col-sm-12 text-center offset-md-1">
|
||
<img src="images/about/about-1.jpg" class="img-fluid rounded shadow" alt="">
|
||
</div>
|
||
<div class="col-md-5 col-sm-12">
|
||
<div class="content">
|
||
<h2>Creativity is in our <br> blood</h2>
|
||
<p>Curabitur felis nibh, imperdiet eu erat non, luctus cursus lectus. Donec maximus diam leo, sed fringilla nisl auctor eget. Donec dictum neque est, ac faucibus ex blandit a
|
||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae quo minima ab aperiam molestiae natus repellendus neque culpa iure, nemo veritatis explicabo facilis, officia, saepe! Et corrupti odit, non deserunt.
|
||
</div>
|
||
|
||
</p>
|
||
</div>
|
||
</div> <!-- End row -->
|
||
<div class="row mt-50 justify-content-center">
|
||
<div class="col-12 col-md-5 offset-md-1 col-md-5 col-sm-12">
|
||
<div class="content">
|
||
<h2>We think out of the <br> Box</h2>
|
||
<p>Curabitur felis nibh, imperdiet eu erat non, luctus cursus lectus. Donec maximus diam leo, sed fringilla nisl auctor eget. Donec dictum neque est, ac faucibus ex blandit a
|
||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae quo minima ab aperiam molestiae natus repellendus neque culpa iure, nemo veritatis explicabo facilis, officia, saepe! Et corrupti odit, non deserunt.
|
||
</div>
|
||
|
||
</p>
|
||
</div>
|
||
<div class="col-12 col-md-5 col-sm-12 text-center">
|
||
<img src="images/about/about-2.jpg" class="img-fluid rounded shadow" alt="">
|
||
</div>
|
||
</div> <!-- End row -->
|
||
</div> <!-- End container -->
|
||
</section> <!-- End section -->
|
||
|
||
<!--
|
||
Start Call To Action
|
||
==================================== -->
|
||
<section class="call-to-action section">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-12 text-center">
|
||
<h2>Let's Create Something Together</h2>
|
||
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicudin bibendum auctor, <br> nisi elit consequat ipsum, nesagittis sem nid elit. Duis sed odio sitain elit.</p>
|
||
<a href="" class="btn btn-main">Contact Us</a>
|
||
</div>
|
||
</div> <!-- End row -->
|
||
</div> <!-- End container -->
|
||
</section> <!-- End section -->
|
||
|
||
<section class="services section-xs" id="services">
|
||
<div class="container">
|
||
<div class="row">
|
||
<!-- Single Service Item -->
|
||
<div class="col-md-4 col-sm-6 col-xs-12" >
|
||
<div class="service-block color-bg text-center">
|
||
<div class="service-icon text-center">
|
||
<i class="tf-ion-ios-copy-outline"></i>
|
||
</div>
|
||
<h3>WordPress Theme</h3>
|
||
<p>Lorem ipsum dolor sit amet, consectetur.. Sed id lorem eget orci dictum facilisis vel id tellus. Nullam iaculis arcu at mauris dapibus consectetur.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Single Service Item -->
|
||
|
||
<!-- Single Service Item -->
|
||
<div class="col-md-4 col-sm-6 col-xs-12" >
|
||
<div class="service-block text-center">
|
||
<div class="service-icon text-center">
|
||
<i class="tf-ion-ios-alarm-outline"></i>
|
||
</div>
|
||
<h3>Responsive Design</h3>
|
||
<p>Lorem ipsum dolor sit amet, consectetur.. Sed id lorem eget orci dictum facilisis vel id tellus. Nullam iaculis arcu at mauris dapibus consectetur.</p>
|
||
</div>
|
||
</div>
|
||
<!-- End Single Service Item -->
|
||
|
||
<!-- Single Service Item -->
|
||
<div class="col-md-4 col-sm-6 col-xs-12 mx-auto" >
|
||
<div class="service-block color-bg text-center">
|
||
<div class="service-icon text-center">
|
||
<i class="tf-ion-ios-book-outline"></i>
|
||
</div>
|
||
<h3>Media & Advertisement</h3>
|
||
<p>Lorem ipsum dolor sit amet, consectetur.. Sed id lorem eget orci dictum facilisis vel id tellus. Nullam iaculis arcu at mauris dapibus consectetur.</p>
|
||
</div>
|
||
</div>
|
||
</div> <!-- End row -->
|
||
</div> <!-- End container -->
|
||
</section> <!-- End section -->
|
||
|
||
|
||
|
||
|
||
<!--
|
||
Start Call To Action
|
||
==================================== -->
|
||
<section class="call-to-action section">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-12 text-center">
|
||
<h2>Let's Create Something Together</h2>
|
||
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicudin bibendum auctor, <br> nisi elit consequat ipsum, nesagittis sem nid elit. Duis sed odio sitain elit.</p>
|
||
<a href="" class="btn btn-main">Contact Us</a>
|
||
</div>
|
||
</div> <!-- End row -->
|
||
</div> <!-- End container -->
|
||
</section> <!-- End section -->
|
||
|
||
<!-- Start Team Skills
|
||
=========================================== -->
|
||
|
||
<section class="team-skills section-sm" id="skills">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col">
|
||
<div class="title text-center">
|
||
<h4>We are good at</h4>
|
||
<h2>Skills.</h2>
|
||
<span class="border"></span>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum reiciendis quasi itaque, obcaecati atque sit!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
|
||
|
||
<div class="col-md-5">
|
||
<div class="team-skills-content">
|
||
<h2>Simple To Start</h2>
|
||
<p>Vestibulum nisl tortor, consectetur quis imperdiet bium, letcu. Sedndime ntumiaculis ex, in faucibus lorem accumsan non. Donec mattis tin unt metuorbi sed tort Igor aman luctus dignissim. Vestibulum nisl tortor, consectetur quis imperdiet bium, letcu. Sedndime ntumiaculis ex, in faucibus lorem accumsan non.</p>
|
||
<a href="" class="btn btn-main mt-20">Contact Us</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-md-offset-1">
|
||
<div class="progress-block">
|
||
<ul>
|
||
<li>
|
||
<span>Photoshop</span>
|
||
<div class="progress">
|
||
<div class="progress-bar" style="width: 90%;">
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<span>Web Application</span>
|
||
<div class="progress">
|
||
<div class="progress-bar" style="width: 85%;">
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<span>Andriod Application</span>
|
||
<div class="progress">
|
||
<div class="progress-bar" style="width: 92%;">
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<span>IOS Development</span>
|
||
<div class="progress">
|
||
<div class="progress-bar" style="width: 78%;">
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
</div> <!-- End row -->
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div id="clients-slider" class="clients-logo-slider">
|
||
<img src="images/client-logo/logo1.png" alt="">
|
||
<img src="images/client-logo/logo-2.png" alt="">
|
||
<img src="images/client-logo/logo-3.png" alt="">
|
||
<img src="images/client-logo/logo-4.png" alt="">
|
||
<img src="images/client-logo/logo-5.png" alt="">
|
||
<img src="images/client-logo/logo1.png" alt="">
|
||
<img src="images/client-logo/logo-2.png" alt="">
|
||
<img src="images/client-logo/logo-3.png" alt="">
|
||
<img src="images/client-logo/logo-4.png" alt="">
|
||
<img src="images/client-logo/logo-5.png" alt="">
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div> <!-- End container -->
|
||
</section> <!-- End section -->
|
||
|
||
<!-- Start Portfolio Section
|
||
=========================================== -->
|
||
<section class="portfolio section" id="portfolio">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col">
|
||
<div class="title text-center">
|
||
<h4>RECENT WORK</h4>
|
||
<h2>WORK SHOWCASE.</h2>
|
||
<span class="border"></span>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum reiciendis quasi itaque, obcaecati atque sit!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row" >
|
||
<div class="col-lg-12">
|
||
<!-- /section title -->
|
||
<div class="portfolio-filter">
|
||
<button type="button" data-filter="all">All</button>
|
||
<button type="button" data-filter=".photography">Photography</button>
|
||
<button type="button" data-filter=".ios">IOS App</button>
|
||
<button type="button" data-filter=".development">Development</button>
|
||
<button type="button" data-filter=".design">Design</button>
|
||
</div>
|
||
</div>
|
||
</div> <!-- /end col-lg-12 -->
|
||
<div class="row portfolio-items-wrapper">
|
||
<div class="col-6 col-md-4 padding-0 mix design">
|
||
<div class="portfolio-block">
|
||
<img class="img-fluid" src="images/portfolio/portfolio-1.jpg" alt="">
|
||
<div class="caption">
|
||
<a class="search-icon" href="images/portfolio/portfolio-1.jpg" data-lightbox="image-1">
|
||
<i class="tf-ion-ios-search-strong"></i>
|
||
</a>
|
||
<h4><a href="">AirBnB Postcard</a></h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-6 col-md-4 padding-0 mix design ios">
|
||
<div class="portfolio-block ">
|
||
<img class="img-fluid" src="images/portfolio/portfolio-2.jpg" alt="">
|
||
<div class="caption">
|
||
<a class="search-icon" href="images/portfolio/portfolio-2.jpg" data-lightbox="image-1">
|
||
<i class="tf-ion-ios-search-strong"></i>
|
||
</a>
|
||
<h4><a href="">AirBnB Postcard</a></h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-6 col-md-4 padding-0 mix photography development">
|
||
<div class="portfolio-block">
|
||
<img class="img-fluid" src="images/portfolio/portfolio-3.jpg" alt="">
|
||
<div class="caption">
|
||
<a class="search-icon" href="images/portfolio/portfolio-3.jpg" data-lightbox="image-1">
|
||
<i class="tf-ion-ios-search-strong"></i>
|
||
</a>
|
||
<h4><a href="">AirBnB Postcard</a></h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-6 col-md-4 padding-0 mix photography ios">
|
||
<div class="portfolio-block">
|
||
<img class="img-fluid" src="images/portfolio/portfolio-4.jpg" alt="">
|
||
<div class="caption">
|
||
<a class="search-icon" href="images/portfolio/portfolio-4.jpg" data-lightbox="image-1">
|
||
<i class="tf-ion-ios-search-strong"></i>
|
||
</a>
|
||
<h4><a href="">AirBnB Postcard</a></h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-6 col-md-4 padding-0 mix design">
|
||
<div class="portfolio-block">
|
||
<img class="img-fluid" src="images/portfolio/portfolio-5.jpg" alt="">
|
||
<div class="caption">
|
||
<a class="search-icon" href="images/portfolio/portfolio-5.jpg" data-lightbox="image-1">
|
||
<i class="tf-ion-ios-search-strong"></i>
|
||
</a>
|
||
<h4><a href="">AirBnB Postcard</a></h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-6 col-md-4 padding-0 development mix design">
|
||
<div class="portfolio-block">
|
||
<img class="img-fluid" src="images/portfolio/portfolio-1.jpg" alt="">
|
||
<div class="caption">
|
||
<a class="search-icon" href="images/portfolio/portfolio-1.jpg" data-lightbox="image-1">
|
||
<i class="tf-ion-ios-search-strong"></i>
|
||
</a>
|
||
<h4><a href="">Photography Website</a></h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> <!-- end row -->
|
||
</section> <!-- End section -->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<!-- Start Our Team
|
||
=========================================== -->
|
||
<section class="team section bg-gray" id="team">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col">
|
||
<div class="title text-center">
|
||
<h4>TEAM MEMBER</h4>
|
||
<h2>Our Team.</h2>
|
||
<span class="border"></span>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum reiciendis quasi itaque, obcaecati atque sit!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<!-- team member -->
|
||
<div class="col-12 col-md-3 col-sm-6" >
|
||
<div class="team-member text-center">
|
||
<div class="member-photo">
|
||
<!-- member photo -->
|
||
<img class="img-fluid" src="images/team/member-1.jpg" alt="team people">
|
||
<!-- /member photo -->
|
||
</div>
|
||
|
||
<!-- member name & designation -->
|
||
<div class="member-content">
|
||
<h3>Shawshank Redemption</h3>
|
||
<span>Head Of Marketing</span>
|
||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur necessitatibus ullam, culpa odio.</p>
|
||
<ul class="list-inline">
|
||
<li class="list-inline-item"><a href="#"><i class="tf-ion-social-facebook"></i></a></li>
|
||
<li class="list-inline-item"><a href="#"><i class="tf-ion-social-twitter"></i></a></li>
|
||
<li class="list-inline-item"><a href="#"><i class="tf-ion-social-google-outline"></i></a></li>
|
||
<li class="list-inline-item"><a href="#"><i class="tf-ion-social-dribbble"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- /member name & designation -->
|
||
|
||
</div>
|
||
</div>
|
||
<!-- end team member -->
|
||
|
||
<!-- team member -->
|
||
<div class="col-12 col-md-3 col-sm-6" >
|
||
<div class="team-member text-center">
|
||
<div class="member-photo">
|
||
<!-- member photo -->
|
||
<img class="img-fluid" src="images/team/member-2.jpg" alt="team people">
|
||
<!-- /member photo -->
|
||
</div>
|
||
|
||
<!-- member name & designation -->
|
||
<div class="member-content">
|
||
<h3>Luis Anthon</h3>
|
||
<span>Web Developer</span>
|
||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur necessitatibus ullam, culpa odio.</p>
|
||
<ul class="list-inline">
|
||
<li class="list-inline-item"><a href="#"><i class="tf-ion-social-facebook"></i></a></li>
|
||
<li class="list-inline-item"><a href="#"><i class="tf-ion-social-twitter"></i></a></li>
|
||
<li class="list-inline-item"><a href="#"><i class="tf-ion-social-google-outline"></i></a></li>
|
||
<li class="list-inline-item"><a href="#"><i class="tf-ion-social-dribbble"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- /member name & designation -->
|
||
</div>
|
||
</div>
|
||
<!-- end team member -->
|
||
|
||
<!-- team member -->
|
||
<div class="col-12 col-md-3 col-sm-6">
|
||
<div class="team-member text-center">
|
||
<div class="member-photo">
|
||
<!-- member photo -->
|
||
<img class="img-fluid" src="images/team/member-3.jpg" alt="team people">
|
||
<!-- /member photo -->
|
||
|
||
</div>
|
||
|
||
<!-- member name & designation -->
|
||
<div class="member-content">
|
||
<h3>Jonathon Andrew</h3>
|
||
<span>Head Of Management</span>
|
||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur necessitatibus ullam, culpa odio.</p>
|
||
<ul class="list-inline">
|
||
<li class="list-inline-item"><a href="#"><i class="tf-ion-social-facebook"></i></a></li>
|
||
<li class="list-inline-item"><a href="#"><i class="tf-ion-social-twitter"></i></a></li>
|
||
<li class="list-inline-item"><a href="#"><i class="tf-ion-social-google-outline"></i></a></li>
|
||
<li class="list-inline-item"><a href="#"><i class="tf-ion-social-dribbble"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- /member name & designation -->
|
||
|
||
</div>
|
||
</div>
|
||
<!-- end team member -->
|
||
<!-- team member -->
|
||
<div class="col-12 col-md-3 col-sm-6">
|
||
<div class="team-member text-center">
|
||
<div class="member-photo">
|
||
<!-- member photo -->
|
||
<img class="img-fluid" src="images/team/member-4.jpg" alt="team people">
|
||
<!-- /member photo -->
|
||
|
||
</div>
|
||
|
||
<!-- member name & designation -->
|
||
<div class="member-content">
|
||
<h3>Michael Jonson</h3>
|
||
<span>Head Of Management</span>
|
||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur necessitatibus ullam, culpa odio.</p>
|
||
<ul class="list-inline">
|
||
<li class="list-inline-item"><a href="#"><i class="tf-ion-social-facebook"></i></a></li>
|
||
<li class="list-inline-item"><a href="#"><i class="tf-ion-social-twitter"></i></a></li>
|
||
<li class="list-inline-item"><a href="#"><i class="tf-ion-social-google-outline"></i></a></li>
|
||
<li class="list-inline-item"><a href="#"><i class="tf-ion-social-dribbble"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- /member name & designation -->
|
||
|
||
</div>
|
||
</div>
|
||
<!-- end team member -->
|
||
</div> <!-- End row -->
|
||
</div> <!-- End container -->
|
||
</section> <!-- End section -->
|
||
|
||
<!-- Start Pricing section
|
||
=========================================== -->
|
||
<section class="pricing-table section" id="pricing">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col">
|
||
<div class="title text-center">
|
||
<h4>Easy Pricing</h4>
|
||
<h2>Pricing.</h2>
|
||
<span class="border"></span>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum reiciendis quasi itaque, obcaecati atque sit!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<!-- single pricing table -->
|
||
<div class="col-md-4 col-sm-6 col-xs-12" >
|
||
<div class="pricing-item">
|
||
|
||
<!-- plan name & value -->
|
||
<div class="price-title bg-pricing">
|
||
<h3>Basic</h3>
|
||
<strong class="value">$99</strong>
|
||
<p>Perfect for single freelancers who work by themselves</p>
|
||
</div>
|
||
<!-- /plan name & value -->
|
||
|
||
<!-- plan description -->
|
||
<ul>
|
||
<li>1GB Disk Space</li>
|
||
<li>10 Email Account</li>
|
||
<li>Script Installer</li>
|
||
<li>1 GB Storage</li>
|
||
<li>10 GB Bandwidth</li>
|
||
<li>24/7 Tech Support</li>
|
||
</ul>
|
||
<!-- /plan description -->
|
||
|
||
<!-- signup button -->
|
||
<a class="btn btn-main" href="#">Signup</a>
|
||
<!-- /signup button -->
|
||
|
||
</div>
|
||
</div>
|
||
<!-- end single pricing table -->
|
||
|
||
<!-- single pricing table -->
|
||
<div class="col-md-4 col-sm-6 col-xs-12" >
|
||
<div class="pricing-item">
|
||
|
||
<!-- plan name & value -->
|
||
<div class="price-title bg-pricing">
|
||
<h3>Advance</h3>
|
||
<strong class="value">$199</strong>
|
||
<p>Suitable for small businesses with up to 5 employees</p>
|
||
</div>
|
||
<!-- /plan name & value -->
|
||
|
||
<!-- plan description -->
|
||
<ul>
|
||
<li>1GB Disk Space</li>
|
||
<li>10 Email Account</li>
|
||
<li>Script Installer</li>
|
||
<li>1 GB Storage</li>
|
||
<li>10 GB Bandwidth</li>
|
||
<li>24/7 Tech Support</li>
|
||
</ul>
|
||
<!-- /plan description -->
|
||
|
||
<!-- signup button -->
|
||
<a class="btn btn-main" href="#">Signup</a>
|
||
<!-- /signup button -->
|
||
|
||
</div>
|
||
</div>
|
||
<!-- end single pricing table -->
|
||
|
||
<!-- single pricing table -->
|
||
<div class="col-md-4 col-sm-6 col-xs-12 mx-auto">
|
||
<div class="pricing-item ">
|
||
|
||
<!-- plan name & value -->
|
||
<div class="price-title bg-pricing">
|
||
<h3>Professional</h3>
|
||
<strong class="value">$299</strong>
|
||
<p>Great for large businesses with more than 5 employees</p>
|
||
</div>
|
||
<!-- /plan name & value -->
|
||
|
||
<!-- plan description -->
|
||
<ul>
|
||
<li>1GB Disk Space</li>
|
||
<li>10 Email Account</li>
|
||
<li>Script Installer</li>
|
||
<li>1 GB Storage</li>
|
||
<li>10 GB Bandwidth</li>
|
||
<li>24/7 Tech Support</li>
|
||
</ul>
|
||
<!-- /plan description -->
|
||
|
||
<!-- signup button -->
|
||
<a class="btn btn-main" href="#">Signup</a>
|
||
<!-- /signup button -->
|
||
|
||
</div>
|
||
</div>
|
||
<!-- end single pricing table -->
|
||
|
||
|
||
</div> <!-- End row -->
|
||
</div> <!-- End container -->
|
||
</section> <!-- End section -->
|
||
|
||
|
||
<!-- Start Testimonial
|
||
=========================================== -->
|
||
|
||
<section class="testimonial section" id="testimonial">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<!-- testimonial wrapper -->
|
||
<div class="testimonial-slider">
|
||
<!-- testimonial single -->
|
||
<div class="item text-center">
|
||
<i class="tf-ion-quote"></i>
|
||
<!-- client info -->
|
||
<div class="client-details">
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum nulla, soluta dolorum. Eos earum, magni asperiores, unde corporis labore, enim, voluptatum officiis voluptates alias natus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, officia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, quia?</p>
|
||
</div>
|
||
<!-- /client info -->
|
||
<!-- client photo -->
|
||
<div class="client-thumb">
|
||
<img src="images/client-logo/clients-1.jpg" class="img-fluid" alt="">
|
||
</div>
|
||
<div class="client-meta">
|
||
<h4>Matt Cutts</h4>
|
||
<span>CEO , Company Name</span>
|
||
</div>
|
||
<!-- /client photo -->
|
||
</div>
|
||
<!-- /testimonial single -->
|
||
|
||
<!-- testimonial single -->
|
||
<div class="item text-center">
|
||
<i class="tf-ion-quote"></i>
|
||
<!-- client info -->
|
||
<div class="client-details">
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum nulla, soluta dolorum. Eos earum, magni asperiores, unde corporis labore, enim, voluptatum officiis voluptates alias natus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, officia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, quia?</p>
|
||
</div>
|
||
<!-- /client info -->
|
||
<!-- client photo -->
|
||
<div class="client-thumb">
|
||
<img src="images/client-logo/clients-2.jpg" class="img-fluid" alt="">
|
||
</div>
|
||
<div class="client-meta">
|
||
<h4>Elon Musk</h4>
|
||
<span>CEO , Company Name</span>
|
||
</div>
|
||
<!-- /client photo -->
|
||
</div>
|
||
<!-- /testimonial single -->
|
||
|
||
<!-- testimonial single -->
|
||
<div class="item text-center">
|
||
<i class="tf-ion-quote"></i>
|
||
<!-- client info -->
|
||
<div class="client-details">
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum nulla, soluta dolorum. Eos earum, magni asperiores, unde corporis labore, enim, voluptatum officiis voluptates alias natus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, officia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, quia?</p>
|
||
</div>
|
||
<!-- /client info -->
|
||
<!-- client photo -->
|
||
<div class="client-thumb">
|
||
<img src="images/client-logo/clients-1.jpg" class="img-fluid" alt="">
|
||
</div>
|
||
<div class="client-meta">
|
||
<h4>Jonathon Ive</h4>
|
||
<span>CEO , Company Name</span>
|
||
</div>
|
||
<!-- /client photo -->
|
||
</div>
|
||
<!-- /testimonial single -->
|
||
</div>
|
||
</div> <!-- end col lg 12 -->
|
||
</div> <!-- End row -->
|
||
</div> <!-- End container -->
|
||
</section> <!-- End Section -->
|
||
|
||
<!--
|
||
Start Blog Section
|
||
=========================================== -->
|
||
<section class="blog section" id="blog">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col">
|
||
<div class="title text-center">
|
||
<h4>Our untold story</h4>
|
||
<h2>Blog.</h2>
|
||
<span class="border"></span>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum reiciendis quasi itaque, obcaecati atque sit!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<!-- single blog post -->
|
||
<article class="col-12 col-md-4" >
|
||
<div class="post-item">
|
||
<div class="post-thumb">
|
||
<img class="img-fluid shadow rounded" src="images/blog/post-1.jpg" alt="Generic placeholder image">
|
||
</div>
|
||
<div class="post-title">
|
||
<h3 class="mt-0"><a href="">Ten things about Business</a></h3>
|
||
</div>
|
||
<div class="post-meta">
|
||
<span>By</span> <a href="" class="">Jonathon Ive</a>
|
||
</div>
|
||
<div class="post-content">
|
||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est voluptatem accusantium dolorum, maxime eos blanditiis sint enim necessitatibus placeat dolor.</p>
|
||
</div>
|
||
<a class="btn btn-main" href="#">Read more</a>
|
||
</div>
|
||
</article>
|
||
<!-- /single blog post -->
|
||
|
||
<!-- single blog post -->
|
||
<article class="col-12 col-md-4" >
|
||
<div class="post-item">
|
||
<div class="post-thumb">
|
||
<img class="img-fluid shadow rounded" src="images/blog/post-2.jpg" alt="Generic placeholder image">
|
||
</div>
|
||
<div class="post-title">
|
||
<h3 class="mt-0"><a href="">Something I need to tell you</a></h3>
|
||
</div>
|
||
<div class="post-meta">
|
||
<ul class="list-inline">
|
||
<li class="list-inline-item">
|
||
<span>By</span> <a href="" class="">Jonathon Ive</a>
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<span>By</span> <span> 15th December 2017</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="post-content">
|
||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est voluptatem accusantium dolorum, maxime eos blanditiis sint enim necessitatibus placeat dolor.</p>
|
||
</div>
|
||
<a class="btn btn-main" href="#">Read more</a>
|
||
</div>
|
||
</article>
|
||
<!-- end single blog post -->
|
||
<!-- single blog post -->
|
||
<article class="col-12 col-md-4" >
|
||
<div class="post-item">
|
||
<div class="post-thumb">
|
||
<img class="img-fluid shadow rounded" src="images/blog/post-3.jpg" alt="Generic placeholder image">
|
||
</div>
|
||
<div class="post-title">
|
||
<h3 class="mt-0"><a href="">Are you doing the Right Way?</a></h3>
|
||
</div>
|
||
<div class="post-meta">
|
||
<ul class="list-inline">
|
||
<li class="list-inline-item">
|
||
<span>By</span> <a href="" class="">Jonathon Ive</a>
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<span>By</span> <span> 15th December 2017</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="post-content">
|
||
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est voluptatem accusantium dolorum, maxime eos blanditiis sint enim necessitatibus placeat dolor.</p>
|
||
</div>
|
||
<a class="btn btn-main" href="#">Read more</a>
|
||
</div>
|
||
</article>
|
||
<!-- end single blog post -->
|
||
|
||
</div> <!-- end row -->
|
||
</div> <!-- end container -->
|
||
</section> <!-- end section -->
|
||
|
||
|
||
<!-- Srart Contact Us
|
||
=========================================== -->
|
||
<section class="contact-us section bg-gray" id="contact">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col">
|
||
<div class="title text-center">
|
||
<h4>Drop us a note</h4>
|
||
<h2>Contact Us.</h2>
|
||
<span class="border"></span>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum reiciendis quasi itaque, obcaecati atque sit!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<!-- Contact Details -->
|
||
<div class="col-12 col-md-6">
|
||
<div class="map">
|
||
<div id="map"></div>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- / End Contact Details -->
|
||
|
||
<!-- Contact Form -->
|
||
<div class="contact-form col-12 col-md-6 " >
|
||
<form id="contact-form" method="post" action="sendmail.php" role="form">
|
||
|
||
<div class="form-group">
|
||
<input type="text" placeholder="Your Name" class="form-control" name="name" id="name">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<input type="email" placeholder="Your Email" class="form-control" name="email" id="email">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<input type="text" placeholder="Subject" class="form-control" name="subject" id="subject">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<textarea rows="6" placeholder="Message" class="form-control" name="message" id="message"></textarea>
|
||
</div>
|
||
|
||
<div id="mail-success" class="success">
|
||
Thank you. The Mailman is on His Way :)
|
||
</div>
|
||
|
||
<div id="mail-fail" class="error">
|
||
Sorry, don't know what happened. Try later :(
|
||
</div>
|
||
|
||
<div id="cf-submit">
|
||
<input type="submit" id="contact-submit" class="btn btn-transparent" value="Submit">
|
||
</div>
|
||
|
||
</form>
|
||
</div>
|
||
<!-- ./End Contact Form -->
|
||
</div> <!-- end row -->
|
||
<div class="row">
|
||
<div class="col-12 col-md-4">
|
||
<div class="address-block contact-meta-block">
|
||
<i class="tf-ion-android-pin"></i>
|
||
<h4>Our Location</h4>
|
||
<p>
|
||
14/05, Stockhome <br>
|
||
Victori Palace , United States <br>
|
||
|
||
</p>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-4">
|
||
<div class="phone-block contact-meta-block">
|
||
<i class="tf-ion-ios-telephone"></i>
|
||
<h4>Call Us</h4>
|
||
<p>
|
||
Office: (03) 9283 2617 <br>
|
||
Fax: +61 3827 3590
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-md-4">
|
||
<div class="social-icons-block contact-meta-block">
|
||
<i class="tf-ion-ios-contact"></i>
|
||
<h4>We are social</h4>
|
||
<ul class="list-inline social-icon">
|
||
<li class="list-inline-item"><a href=""><i class="tf-ion-social-facebook"></i></a></li>
|
||
<li class="list-inline-item"><a href=""><i class="tf-ion-social-twitter"></i></a></li>
|
||
<li class="list-inline-item"><a href=""><i class="tf-ion-social-linkedin"></i></a></li>
|
||
<li class="list-inline-item"><a href=""><i class="tf-ion-social-dribbble"></i></a></li>
|
||
<li class="list-inline-item"><a href=""><i class="tf-ion-social-instagram"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div> <!-- end container -->
|
||
</section> <!-- end section -->
|
||
|
||
<footer id="footer" class="bg-one">
|
||
<div class="top-footer">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-sm-3 col-md-3 col-lg-3">
|
||
<h3>About</h3>
|
||
<p>Integer posuere erat a ante venenati dapibus posuere velit aliquet. Fusce dapibus, tellus cursus commodo, tortor mauris sed posuere.</p>
|
||
</div>
|
||
<!-- End of .col-sm-3 -->
|
||
|
||
<div class="col-sm-3 col-md-3 col-lg-3">
|
||
<h3>Our Services</h3>
|
||
<ul>
|
||
<li><a href="#">Graphic Design</a></li>
|
||
<li><a href="#">Web Design</a></li>
|
||
<li><a href="#">Web Development</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- End of .col-sm-3 -->
|
||
|
||
<div class="col-sm-3 col-md-3 col-lg-3">
|
||
<h3>Quick Links</h3>
|
||
<ul>
|
||
<li><a href="#">Partners</a></li>
|
||
<li><a href="#">About</a></li>
|
||
<li><a href="#">FAQ’s</a></li>
|
||
<li><a href="#">Badges</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- End of .col-sm-3 -->
|
||
|
||
<div class="col-sm-3 col-md-3 col-lg-3">
|
||
<h3>Subscribe Now</h3>
|
||
<form class="subscribe-form">
|
||
<div class="form-group">
|
||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
|
||
</div>
|
||
<button type="submit" class="btn btn-main-sm">Subscribe Now</button>
|
||
</form>
|
||
</div>
|
||
<!-- End of .col-sm-3 -->
|
||
|
||
</div>
|
||
</div> <!-- end container -->
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<h5>Copyright 2021. The Storyteller Company<br>(formally registered as Learning Machines, LLC.)</h5>
|
||
<h6>Read more content and stuff<br>A Link <a href="https://vo.codes" target="_blank">DeepFake TTS</a></h6>
|
||
</div>
|
||
</footer> <!-- end footer -->
|
||
|
||
|
||
<!-- end Footer Area
|
||
========================================== -->
|
||
|
||
|
||
|
||
<!--
|
||
Essential Scripts
|
||
=====================================-->
|
||
|
||
<!-- Main jQuery -->
|
||
<script src="plugins/jquery/dist/jquery.min.js"></script>
|
||
<!-- Bootstrap 3.7 -->
|
||
<script src="plugins/bootstrap/dist/js/popper.min.js"></script>
|
||
<script src="plugins/bootstrap/dist/js/bootstrap.min.js"></script>
|
||
<!-- Parallax -->
|
||
<script src="plugins/parallax/jquery.parallax-1.1.3.js"></script>
|
||
<!-- lightbox -->
|
||
<script src="plugins/lightbox2/dist/js/lightbox.min.js"></script>
|
||
<!-- Owl Carousel -->
|
||
<script src="plugins/slick-carousel/slick/slick.min.js"></script>
|
||
<!-- Portfolio Filtering -->
|
||
<script src="plugins/mixitup/dist/mixitup.min.js"></script>
|
||
<!-- Smooth Scroll js -->
|
||
<script src="plugins/smooth-scroll/dist/js/smooth-scroll.min.js"></script>
|
||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCC72vZw-6tGqFyRhhg5CkF2fqfILn2Tsw"></script>
|
||
|
||
<!-- Custom js -->
|
||
<script src="js/script.js"></script>
|
||
|
||
</body>
|
||
</html>
|