798 lines
40 KiB
HTML
798 lines
40 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
|
|
<meta name="keywords" content="bootstrap 5, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
|
|
<meta name="author" content="elemis">
|
|
<title>Sandbox - Modern & Multipurpose Bootstrap 5 Template</title>
|
|
<link rel="shortcut icon" href="./assets/img/favicon.png">
|
|
<link rel="stylesheet" href="./assets/css/plugins.css">
|
|
<link rel="stylesheet" href="./assets/css/style.css">
|
|
<link rel="stylesheet" href="./assets/css/colors/yellow.css">
|
|
<link rel="preload" href="./assets/css/fonts/urbanist.css" as="style" onload="this.rel='stylesheet'">
|
|
<style>
|
|
@media (min-width: 992px) {
|
|
.navbar-nav>.nav-item>.nav-link {
|
|
position: relative;
|
|
}
|
|
|
|
.navbar-nav>.nav-item+.nav-item>.nav-link:before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
width: 3px;
|
|
height: 3px;
|
|
top: 50%;
|
|
left: -2px;
|
|
background: rgba(0, 0, 0, 0.25);
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="onepage">
|
|
<div class="content-wrapper">
|
|
<header class="wrapper bg-gray">
|
|
<nav class="navbar navbar-expand-lg extended extended-alt navbar-light navbar-bg-light">
|
|
<div class="container flex-lg-column">
|
|
<div class="topbar d-flex flex-row justify-content-lg-center align-items-center">
|
|
<div class="navbar-brand"><a href="./index.html"><img src="./assets/img/logo-dark.png" srcset="./assets/img/logo-dark@2x.png 2x" alt="" /></a></div>
|
|
</div>
|
|
<!-- /.d-flex -->
|
|
<div class="navbar-collapse-wrapper bg-white d-flex flex-row align-items-center justify-content-between">
|
|
<div class="navbar-other w-100 d-none d-lg-block">
|
|
<nav class="nav social social-muted">
|
|
<a href="#"><i class="uil uil-twitter"></i></a>
|
|
<a href="#"><i class="uil uil-facebook-f"></i></a>
|
|
<a href="#"><i class="uil uil-instagram"></i></a>
|
|
</nav>
|
|
<!-- /.social -->
|
|
</div>
|
|
<!-- /.navbar-other -->
|
|
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
|
|
<div class="offcanvas-header d-lg-none">
|
|
<h3 class="text-white fs-30 mb-0">Sandbox</h3>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<div class="offcanvas-body d-flex flex-column h-100">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item"><a class="nav-link scroll active" href="#home">Home</a></li>
|
|
<li class="nav-item"><a class="nav-link scroll" href="#services">Services</a></li>
|
|
<li class="nav-item"><a class="nav-link scroll" href="#portfolio">Portfolio</a></li>
|
|
<li class="nav-item"><a class="nav-link scroll" href="#testimonials">Testimonials</a></li>
|
|
<li class="nav-item"><a class="nav-link scroll" href="#about">About</a></li>
|
|
<li class="nav-item"><a class="nav-link scroll" href="#pricing">Pricing</a></li>
|
|
</ul>
|
|
<!-- /.navbar-nav -->
|
|
<div class="offcanvas-footer d-lg-none">
|
|
<div>
|
|
<a href="mailto:first.last@email.com" class="link-inverse">info@email.com</a>
|
|
<br /> 00 (123) 456 78 90 <br />
|
|
<nav class="nav social social-white mt-4">
|
|
<a href="#"><i class="uil uil-twitter"></i></a>
|
|
<a href="#"><i class="uil uil-facebook-f"></i></a>
|
|
<a href="#"><i class="uil uil-dribbble"></i></a>
|
|
<a href="#"><i class="uil uil-instagram"></i></a>
|
|
<a href="#"><i class="uil uil-youtube"></i></a>
|
|
</nav>
|
|
<!-- /.social -->
|
|
</div>
|
|
</div>
|
|
<!-- /.offcanvas-footer -->
|
|
</div>
|
|
</div>
|
|
<!-- /.navbar-collapse -->
|
|
<div class="navbar-other w-100 d-flex">
|
|
<ul class="navbar-nav flex-row align-items-center ms-auto">
|
|
<li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-info"><i class="uil uil-info-circle"></i></a></li>
|
|
<li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-search"><i class="uil uil-search"></i></a></li>
|
|
<li class="nav-item d-lg-none">
|
|
<button class="hamburger offcanvas-nav-btn"><span></span></button>
|
|
</li>
|
|
</ul>
|
|
<!-- /.navbar-nav -->
|
|
</div>
|
|
<!-- /.navbar-other -->
|
|
</div>
|
|
<!-- /.navbar-collapse-wrapper -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</nav>
|
|
<!-- /.navbar -->
|
|
<div class="offcanvas offcanvas-end text-inverse" id="offcanvas-info" data-bs-scroll="true">
|
|
<div class="offcanvas-header">
|
|
<h3 class="text-white fs-30 mb-0">Sandbox</h3>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<div class="offcanvas-body pb-6">
|
|
<div class="widget mb-8">
|
|
<p>Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.</p>
|
|
</div>
|
|
<!-- /.widget -->
|
|
<div class="widget mb-8">
|
|
<h4 class="widget-title text-white mb-3">Contact Info</h4>
|
|
<address> Moonshine St. 14/05 <br /> Light City, London </address>
|
|
<a href="mailto:first.last@email.com">info@email.com</a><br /> 00 (123) 456 78 90
|
|
</div>
|
|
<!-- /.widget -->
|
|
<div class="widget mb-8">
|
|
<h4 class="widget-title text-white mb-3">Learn More</h4>
|
|
<ul class="list-unstyled">
|
|
<li><a href="#">Our Story</a></li>
|
|
<li><a href="#">Terms of Use</a></li>
|
|
<li><a href="#">Privacy Policy</a></li>
|
|
<li><a href="#">Contact Us</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- /.widget -->
|
|
<div class="widget">
|
|
<h4 class="widget-title text-white mb-3">Follow Us</h4>
|
|
<nav class="nav social social-white">
|
|
<a href="#"><i class="uil uil-twitter"></i></a>
|
|
<a href="#"><i class="uil uil-facebook-f"></i></a>
|
|
<a href="#"><i class="uil uil-dribbble"></i></a>
|
|
<a href="#"><i class="uil uil-instagram"></i></a>
|
|
<a href="#"><i class="uil uil-youtube"></i></a>
|
|
</nav>
|
|
<!-- /.social -->
|
|
</div>
|
|
<!-- /.widget -->
|
|
</div>
|
|
<!-- /.offcanvas-body -->
|
|
</div>
|
|
<!-- /.offcanvas -->
|
|
<div class="offcanvas offcanvas-top bg-light" id="offcanvas-search" data-bs-scroll="true">
|
|
<div class="container d-flex flex-row py-6">
|
|
<form class="search-form w-100">
|
|
<input id="search-form" type="text" class="form-control" placeholder="Type keyword and hit enter">
|
|
</form>
|
|
<!-- /.search-form -->
|
|
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!-- /.offcanvas -->
|
|
</header>
|
|
<!-- /header -->
|
|
<section id="home">
|
|
<div class="wrapper bg-gray overflow-hidden">
|
|
<div class="container-fluid px-xl-0 pt-6 pb-10">
|
|
<div class="swiper-container swiper-auto" data-margin="30" data-dots="true" data-nav="true" data-centered="true" data-loop="true" data-items-auto="true">
|
|
<div class="swiper overflow-visible">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="./assets/img/photos/cf1.jpg" alt="" /><a class="item-link" href="./assets/img/photos/cf1.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="./assets/img/photos/cf2.jpg" alt="" /><a class="item-link" href="./assets/img/photos/cf2.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="./assets/img/photos/cf3.jpg" alt="" /><a class="item-link" href="./assets/img/photos/cf3.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="./assets/img/photos/cf4.jpg" alt="" /><a class="item-link" href="./assets/img/photos/cf4.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="./assets/img/photos/cf5.jpg" alt="" /><a class="item-link" href="./assets/img/photos/cf5.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="./assets/img/photos/cf6.jpg" alt="" /><a class="item-link" href="./assets/img/photos/cf6.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!-- /.cotnainer -->
|
|
</div>
|
|
<!-- /.overflow-hidden -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="services">
|
|
<div class="wrapper bg-gray">
|
|
<div class="container py-15 py-md-17">
|
|
<div class="row gx-lg-0 gy-10 align-items-center">
|
|
<div class="col-lg-6">
|
|
<div class="row g-6 text-center">
|
|
<div class="col-md-6">
|
|
<div class="card shadow-lg mb-6">
|
|
<figure class="card-img-top overlay overlay-1">
|
|
<a href="#"><img class="img-fluid" src="./assets/img/photos/fs4.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">View Gallery</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="card-body p-4">
|
|
<h3 class="h4 mb-0">Products</h3>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
<div class="card shadow-lg">
|
|
<figure class="card-img-top overlay overlay-1">
|
|
<a href="#"><img class="img-fluid" src="./assets/img/photos/fs6.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">View Gallery</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="card-body p-4">
|
|
<h3 class="h4 mb-0">Recipes</h3>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-md-6">
|
|
<div class="card shadow-lg mt-md-6 mb-6">
|
|
<figure class="card-img-top overlay overlay-1">
|
|
<a href="#"><img class="img-fluid" src="./assets/img/photos/fs5.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">View Gallery</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="card-body p-4">
|
|
<h3 class="h4 mb-0">Restaurants</h3>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
<div class="card shadow-lg">
|
|
<figure class="card-img-top overlay overlay-1">
|
|
<a href="#"><img class="img-fluid" src="./assets/img/photos/fs7.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">View Gallery</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="card-body p-4">
|
|
<h3 class="h4 mb-0">Still Life</h3>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-lg-5 offset-lg-1">
|
|
<h2 class="display-5 mb-3">My Services</h2>
|
|
<p class="lead fs-lg">I would like to give you a unique photography experience, capture your products with excellent composition and lighting skills.</p>
|
|
<p>Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis elit interdum. Duis mollis, est non commodo luctus, nisi erat ligula mollis metus auctor fringilla.</p>
|
|
<a href="#" class="btn btn-primary rounded-pill mt-2">More Details</a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!-- /.wrapper -->
|
|
</section>
|
|
<!-- /section -->
|
|
<div class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="./assets/img/photos/bg34.jpg">
|
|
<div class="container py-16 py-md-19 text-center">
|
|
<h2 class="display-1 text-white mb-0">I take photographs with <br class="d-none d-md-block"> creativity, concept & passion</h2>
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!-- /.wrapper -->
|
|
<section id="portfolio">
|
|
<div class="wrapper bg-gray">
|
|
<div class="container py-15 py-md-17 text-center">
|
|
<div class="row">
|
|
<div class="col-lg-10 col-xl-8 col-xxl-7 mx-auto mb-8">
|
|
<h2 class="display-5 mb-3">My Selected Shots</h2>
|
|
<p class="lead fs-lg">Photography is my passion and I love to turn ideas into beautiful things.</p>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="grid grid-view projects-masonry">
|
|
<div class="isotope-filter filter mb-10">
|
|
<ul>
|
|
<li><a class="filter-item active" data-filter="*">All</a></li>
|
|
<li><a class="filter-item" data-filter=".foods">Foods</a></li>
|
|
<li><a class="filter-item" data-filter=".drinks">Drinks</a></li>
|
|
<li><a class="filter-item" data-filter=".events">Events</a></li>
|
|
<li><a class="filter-item" data-filter=".pastries">Pastries</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="row gx-md-6 gy-6 isotope">
|
|
<div class="project item col-md-6 col-xl-4 drinks events">
|
|
<figure class="overlay overlay-1 rounded"><a href="./assets/img/photos/pf1-full.jpg" data-glightbox data-gallery="shots-group"> <img src="./assets/img/photos/pf1.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Fringilla Nullam</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item col-md-6 col-xl-4 events">
|
|
<figure class="overlay overlay-1 rounded"><a href="./assets/img/photos/pf2-full.jpg" data-glightbox data-gallery="shots-group"> <img src="./assets/img/photos/pf2.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Ridiculus Parturient</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item col-md-6 col-xl-4 drinks foods">
|
|
<figure class="overlay overlay-1 rounded"><a href="./assets/img/photos/pf3-full.jpg" data-glightbox data-gallery="shots-group"> <img src="./assets/img/photos/pf3.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Ornare Ipsum</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item col-md-6 col-xl-4 events">
|
|
<figure class="overlay overlay-1 rounded"><a href="./assets/img/photos/pf4-full.jpg" data-glightbox data-gallery="shots-group"> <img src="./assets/img/photos/pf4.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Nullam Mollis</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item col-md-6 col-xl-4 pastries events">
|
|
<figure class="overlay overlay-1 rounded"><a href="./assets/img/photos/pf5-full.jpg" data-glightbox data-gallery="shots-group"> <img src="./assets/img/photos/pf5.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Euismod Risus</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item col-md-6 col-xl-4 foods">
|
|
<figure class="overlay overlay-1 rounded"><a href="./assets/img/photos/pf6-full.jpg" data-glightbox data-gallery="shots-group"> <img src="./assets/img/photos/pf6.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Ridiculus Tristique</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item col-md-6 col-xl-4 foods drinks">
|
|
<figure class="overlay overlay-1 rounded"><a href="./assets/img/photos/pf7-full.jpg" data-glightbox data-gallery="shots-group"> <img src="./assets/img/photos/pf7.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Sollicitudin Pharetra</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item col-md-6 col-xl-4 pastries">
|
|
<figure class="overlay overlay-1 rounded"><a href="./assets/img/photos/pf8-full.jpg" data-glightbox data-gallery="shots-group"> <img src="./assets/img/photos/pf8.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Tristique Venenatis</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item col-md-6 col-xl-4 events">
|
|
<figure class="overlay overlay-1 rounded"><a href="./assets/img/photos/pf9-full.jpg" data-glightbox data-gallery="shots-group"> <img src="./assets/img/photos/pf9.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Cursus Fusce</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item col-md-6 col-xl-4 foods">
|
|
<figure class="overlay overlay-1 rounded"><a href="./assets/img/photos/pf10-full.jpg" data-glightbox data-gallery="shots-group"> <img src="./assets/img/photos/pf10.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Consectetur Malesuada</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item col-md-6 col-xl-4 drinks">
|
|
<figure class="overlay overlay-1 rounded"><a href="./assets/img/photos/pf11-full.jpg" data-glightbox data-gallery="shots-group"> <img src="./assets/img/photos/pf11.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Ultricies Aenean</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item col-md-6 col-xl-4 foods">
|
|
<figure class="overlay overlay-1 rounded"><a href="./assets/img/photos/pf12-full.jpg" data-glightbox data-gallery="shots-group"> <img src="./assets/img/photos/pf12.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Pellentesque Commodo</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item col-md-6 col-xl-4 drinks">
|
|
<figure class="overlay overlay-1 rounded"><a href="./assets/img/photos/pf13-full.jpg" data-glightbox data-gallery="shots-group"> <img src="./assets/img/photos/pf13.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<h5 class="from-top mb-0">Ultricies Aenean</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.grid -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!-- /.wrapper -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="testimonials">
|
|
<div class="wrapper image-wrapper bg-image bg-overlay" data-image-src="./assets/img/photos/bg35.jpg">
|
|
<div class="container py-15 py-md-17">
|
|
<h2 class="display-5 mb-4 text-center text-white">Happy Customers</h2>
|
|
<div class="swiper-container dots-closer dots-light dots-light-75" data-margin="0" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<div class="card border-0 bg-white-900">
|
|
<div class="card-body">
|
|
<span class="ratings five mb-3"></span>
|
|
<blockquote class="border-0 mb-0">
|
|
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
|
|
<div class="blockquote-details">
|
|
<div class="info p-0">
|
|
<h5 class="mb-0">Coriss Ambady</h5>
|
|
<p class="mb-0">Financial Analyst</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<div class="card border-0 bg-white-900">
|
|
<div class="card-body">
|
|
<span class="ratings five mb-3"></span>
|
|
<blockquote class="border-0 mb-0">
|
|
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
|
|
<div class="blockquote-details">
|
|
<div class="info p-0">
|
|
<h5 class="mb-0">Cory Zamora</h5>
|
|
<p class="mb-0">Marketing Specialist</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<div class="card border-0 bg-white-900">
|
|
<div class="card-body">
|
|
<span class="ratings five mb-3"></span>
|
|
<blockquote class="border-0 mb-0">
|
|
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
|
|
<div class="blockquote-details">
|
|
<div class="info p-0">
|
|
<h5 class="mb-0">Nikolas Brooten</h5>
|
|
<p class="mb-0">Sales Manager</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<div class="card border-0 bg-white-900">
|
|
<div class="card-body">
|
|
<span class="ratings five mb-3"></span>
|
|
<blockquote class="border-0 mb-0">
|
|
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
|
|
<div class="blockquote-details">
|
|
<div class="info p-0">
|
|
<h5 class="mb-0">Coriss Ambady</h5>
|
|
<p class="mb-0">Financial Analyst</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<div class="card border-0 bg-white-900">
|
|
<div class="card-body">
|
|
<span class="ratings five mb-3"></span>
|
|
<blockquote class="border-0 mb-0">
|
|
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
|
|
<div class="blockquote-details">
|
|
<div class="info p-0">
|
|
<h5 class="mb-0">Jackie Sanders</h5>
|
|
<p class="mb-0">Investment Planner</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<div class="card border-0 bg-white-900">
|
|
<div class="card-body">
|
|
<span class="ratings five mb-3"></span>
|
|
<blockquote class="border-0 mb-0">
|
|
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
|
|
<div class="blockquote-details">
|
|
<div class="info p-0">
|
|
<h5 class="mb-0">Laura Widerski</h5>
|
|
<p class="mb-0">Sales Specialist</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!-- /.wrapper -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="about">
|
|
<div class="wrapper bg-gray">
|
|
<div class="container py-14 py-md-16">
|
|
<div class="row gx-md-8 gx-xl-12 gy-6 align-items-center">
|
|
<div class="col-md-8 col-lg-6 order-lg-2 mx-auto">
|
|
<div class="img-mask mask-2"><img src="./assets/img/photos/about30.jpg" alt="" /></div>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-lg-6">
|
|
<h2 class="display-5 mb-3">About Me</h2>
|
|
<p class="lead fs-lg">I'm Caitlyn Sandbox, a photographer specializing in food, drink and product photography.</p>
|
|
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula.</p>
|
|
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur.</p>
|
|
<a href="#" class="btn btn-primary rounded-pill mt-2">Learn More</a>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="row gx-md-8 gx-xl-12 mt-10 mt-md-13">
|
|
<div class="col-lg-4">
|
|
<h2 class="display-5 mb-3">My Working Process</h2>
|
|
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus. Aenean eu leo quam.</p>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-lg-8">
|
|
<div class="row gy-6 gx-md-8 gx-xl-12">
|
|
<div class="col-md-6">
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<span class="icon btn btn-circle btn-primary pe-none me-4"><span class="number fs-18">1</span></span>
|
|
</div>
|
|
<div>
|
|
<h4 class="mb-1">Concept</h4>
|
|
<p class="mb-0">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-6">
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<span class="icon btn btn-circle btn-primary pe-none me-4"><span class="number fs-18">2</span></span>
|
|
</div>
|
|
<div>
|
|
<h4 class="mb-1">Prepare</h4>
|
|
<p class="mb-0">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-6">
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<span class="icon btn btn-circle btn-primary pe-none me-4"><span class="number fs-18">3</span></span>
|
|
</div>
|
|
<div>
|
|
<h4 class="mb-1">Retouch</h4>
|
|
<p class="mb-0">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-6">
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<span class="icon btn btn-circle btn-primary pe-none me-4"><span class="number fs-18">4</span></span>
|
|
</div>
|
|
<div>
|
|
<h4 class="mb-1">Finalize</h4>
|
|
<p class="mb-0">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!-- /.wrapper -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="pricing">
|
|
<div class="wrapper image-wrapper bg-image bg-overlay" data-image-src="./assets/img/photos/bg36.jpg">
|
|
<div class="container py-15 py-md-17">
|
|
<div class="row">
|
|
<div class="col-xl-9 mx-auto">
|
|
<div class="card border-0 bg-white-900">
|
|
<div class="card-body py-lg-13 px-lg-16">
|
|
<h2 class="display-5 mb-3 text-center">Request Photography Pricing</h2>
|
|
<p class="lead fs-lg text-center mb-10">For more information please get in touch using the form below:</p>
|
|
<form class="contact-form needs-validation" method="post" action="./assets/php/contact.php" novalidate>
|
|
<div class="messages"></div>
|
|
<div class="row gx-4">
|
|
<div class="col-md-6">
|
|
<div class="form-floating mb-4">
|
|
<input id="form_name" type="text" name="name" class="form-control bg-white-700 border-0" placeholder="Name" required>
|
|
<label for="form_name">Name *</label>
|
|
<div class="valid-feedback"> Looks good! </div>
|
|
<div class="invalid-feedback"> Please enter your name. </div>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-md-6">
|
|
<div class="form-floating mb-4">
|
|
<input id="form_email" type="email" name="email" class="form-control bg-white-700 border-0" placeholder="jane.doe@example.com" required>
|
|
<label for="form_email">Email *</label>
|
|
<div class="valid-feedback"> Looks good! </div>
|
|
<div class="invalid-feedback"> Please provide a valid email address. </div>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-12">
|
|
<div class="form-floating mb-4">
|
|
<textarea id="form_message" name="message" class="form-control bg-white-700 border-0" placeholder="Your message" style="height: 150px" required></textarea>
|
|
<label for="form_message">Message *</label>
|
|
<div class="valid-feedback"> Looks good! </div>
|
|
<div class="invalid-feedback"> Please enter your messsage. </div>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-12 text-center">
|
|
<input type="submit" class="btn btn-primary rounded-pill btn-send" value="Send message">
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</form>
|
|
<!-- /form -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!-- /.wrapper -->
|
|
</section>
|
|
<!-- /section -->
|
|
</div>
|
|
<!-- /.content-wrapper -->
|
|
<footer class="bg-gray">
|
|
<div class="container pt-13 pb-7">
|
|
<div class="row gx-lg-0 gy-6">
|
|
<div class="col-lg-4">
|
|
<div class="widget">
|
|
<img class="mb-4" src="./assets/img/logo-dark.png" srcset="./assets/img/logo-dark@2x.png 2x" alt="" />
|
|
<p class="lead mb-0">I'm Caitlyn Sandbox, a photographer specializing in food, drink and product photography.</p>
|
|
</div>
|
|
<!-- /.widget -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-lg-3 offset-lg-2">
|
|
<div class="widget">
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<div class="icon text-primary fs-28 me-4 mt-n1"> <i class="uil uil-phone-volume"></i> </div>
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-1">Phone</h5>
|
|
<p class="mb-0">00 (123) 456 78 90 <br />00 (987) 654 32 10</p>
|
|
</div>
|
|
</div>
|
|
<!--/div -->
|
|
</div>
|
|
<!-- /.widget -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-lg-3">
|
|
<div class="widget">
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<div class="icon text-primary fs-28 me-4 mt-n1"> <i class="uil uil-location-pin-alt"></i> </div>
|
|
</div>
|
|
<div class="align-self-start justify-content-start">
|
|
<h5 class="mb-1">Address</h5>
|
|
<address>Moonshine St. 14/05 Light City, London, United Kingdom</address>
|
|
</div>
|
|
</div>
|
|
<!--/div -->
|
|
</div>
|
|
<!-- /.widget -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<hr class="mt-11 mt-md-12 mb-7" />
|
|
<div class="d-md-flex align-items-center justify-content-between">
|
|
<p class="mb-2 mb-lg-0">© 2023 Sandbox. All rights reserved.</p>
|
|
<nav class="nav social social-muted mb-0 text-md-end">
|
|
<a href="#"><i class="uil uil-twitter"></i></a>
|
|
<a href="#"><i class="uil uil-facebook-f"></i></a>
|
|
<a href="#"><i class="uil uil-dribbble"></i></a>
|
|
<a href="#"><i class="uil uil-instagram"></i></a>
|
|
<a href="#"><i class="uil uil-youtube"></i></a>
|
|
</nav>
|
|
<!-- /.social -->
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</footer>
|
|
<div class="progress-wrap">
|
|
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
|
|
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
|
|
</svg>
|
|
</div>
|
|
<script src="./assets/js/plugins.js"></script>
|
|
<script src="./assets/js/theme.js"></script>
|
|
</body>
|
|
|
|
</html> |