mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-04 01:18:34 +00:00
451 lines
17 KiB
HTML
451 lines
17 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
|
||
==================================== -->
|
||
<section class="header navigation">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<nav class="navbar navbar-expand-md">
|
||
<a class="navbar-brand" href="index.html">
|
||
<img src="images/storyteller-logo.png" alt="logo" class="logo-image">
|
||
</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="tf-ion-android-menu"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||
<ul class="navbar-nav ml-auto">
|
||
<li class="nav-item active">
|
||
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="about.html">About</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="service.html">Service</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="portfolio.html">Portfolio</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="contact.html">Contact</a>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Pages
|
||
</a>
|
||
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||
<a class="dropdown-item" href="404.html">404 Page</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="single-page-header">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<h2>Portfolio</h2>
|
||
<nav aria-label="breadcrumb mx-auto" role="navigation">
|
||
<ol class="breadcrumb">
|
||
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
|
||
<li class="breadcrumb-item active" aria-current="page">Portfolio</li>
|
||
</ol>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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 About Section
|
||
==================================== -->
|
||
<section class="service-2 section bg-gray">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col">
|
||
<div class="title text-center">
|
||
<h4>How We Works</h4>
|
||
<h2>Our work process</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 justify-content-center">
|
||
<div class="col-md-4 col-sm-6 p-0">
|
||
<div class="service-item text-center">
|
||
<span class="count">1.</span>
|
||
<i class="tf-ion-ios-briefcase-outline"></i>
|
||
<h4>Project Analysis</h4>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae risus nec dui venenatis.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 col-sm-6 p-0">
|
||
<div class="service-item text-center">
|
||
<span class="count">2.</span>
|
||
<i class="tf-ion-ios-alarm-outline"></i>
|
||
<h4>Time Management</h4>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae risus nec dui venenatis.</p>
|
||
</div>
|
||
</div>
|
||
<div class="w-100"></div>
|
||
<div class="col-md-4 col-sm-6 p-0">
|
||
<div class="service-item text-center">
|
||
<span class="count">3.</span>
|
||
<i class="tf-ion-ios-email-outline"></i>
|
||
<h4>Mail Support</h4>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae risus nec dui venenatis.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 col-sm-6 p-0">
|
||
<div class="service-item text-center">
|
||
<span class="count">4.</span>
|
||
<i class="tf-ion-ios-locked-outline"></i>
|
||
<h4>Secure System</h4>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae risus nec dui venenatis.</p>
|
||
</div>
|
||
</div>
|
||
</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 -->
|
||
|
||
<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> |