| Server IP : 172.67.201.108 / Your IP : 216.73.216.11 Web Server : Apache/2.4.68 (Amazon Linux) OpenSSL/3.5.5 System : Linux ip-172-31-69-123.ec2.internal 6.1.176-223.369.amzn2023.x86_64 #1 SMP PREEMPT_DYNAMIC Fri Jul 24 13:34:27 UTC 2026 x86_64 User : ec2-user ( 1000) PHP Version : 8.4.23 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /home/home2/domains/nycyouth/Package-HTML/Canvas 7 Files/ |
Upload File : |
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="author" content="SemiColonWeb">
<meta name="description" content="Get Canvas to build powerful websites easily with the Highly Customizable & Best Selling Bootstrap Template, today.">
<!-- Font Imports -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
<!-- Core Style -->
<link rel="stylesheet" href="style.css">
<!-- Font Icons -->
<link rel="stylesheet" href="css/font-icons.css">
<link rel="stylesheet" href="one-page/css/et-line.css">
<!-- Niche Demos -->
<link rel="stylesheet" href="demos/photographer/css/menu.css">
<link rel="stylesheet" href="demos/photographer/photographer.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Document Title
============================================= -->
<title>Photographer | Canvas</title>
</head>
<!-- Page Loader, stretched (body)
============================================= -->
<body class="stretched" data-loader-html="<div><img src='demos/photographer/images/icons/loader.svg' alt='Loader'></div>" data-menu-breakpoint="9999">
<!-- Document Wrapper
============================================= -->
<div id="wrapper">
<!-- Header
============================================= -->
<header id="header" class="transparent-header no-sticky">
<div id="header-wrap">
<div class="container">
<div class="header-row">
<a href="demo-photography.html"><img src="demos/photography/images/[email protected]" alt="Canvas Logo" height="100"></a>
<div>
<div class="primary-menu-trigger hamburger">
<i class="bi-list"></i>
<i class="bi-x-lg"></i>
</div>
<div class="global-menu">
<div class="global-menu__wrap">
<a class="global-menu__item" href="#">Home</a>
<a class="global-menu__item" href="#">Photography</a>
<a class="global-menu__item" href="#">About</a>
<a class="global-menu__item" href="#">Contact</a>
</div>
</div>
<svg class="shape-overlays" viewBox="0 0 100 100" preserveAspectRatio="none">
<path class="shape-overlays__path" d=""></path>
<path class="shape-overlays__path" d=""></path>
<path class="shape-overlays__path" d=""></path>
<path class="shape-overlays__path" d=""></path>
</svg>
</div>
</div>
</div>
</div>
<div class="header-wrap-clone"></div>
</header><!-- #header end -->
<!-- Slider
============================================= -->
<section id="slider" class="slider-element min-vh-60 min-vh-md-100 include-header" style="background: url('demos/photographer/images/dots-1.png') 100% 0 no-repeat; background-size: 60% auto">
<div class="slider-inner">
<div class="vertical-middle">
<div class="container parallax py-5" data-0="opacity: 1; overflow: visible; margin-top:0px" data-top-bottom="opacity: 0; overflow: visible; margin-top:100px">
<div class="row align-items-center col-mb-50">
<div class="col-md-6">
<div class="py-5 py-md-0">
<small class="text-muted text-uppercase fw-light ls-4 mb-1 d-block">Photographer</small>
<h2 class="text-dark">Shooting Your Memory.</h2>
<h5 class="fw-light ls-1" style="opacity: .7">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quasi quo ea magnam dignissimos quis obcaecati aut in.</h5>
<div class="d-flex align-items-center mt-5">
<a href="#" class="button button-change button-rounded overflow-hidden text-transform-none button-large fw-normal mx-0 px-5">
<span><i class="bi-envelope fw-semibold"></i> Email Me Here</span>
</a>
<a href="https://facebook.com/semicolonweb" target="_blank" class="d-none d-sm-inline-block my-0 me-0 ms-4 social-icon si-small text-white bg-facebook">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="https://facebook.com/semicolonweb" target="_blank" class="d-none d-sm-inline-block my-0 me-0 ms-3 social-icon si-small text-white bg-twitter">
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-twitter"></i>
</a>
</div>
</div>
</div>
<div class="col-md-6 ps-md-5 ps-lg-0">
<div class="row align-items-stretch">
<div class="col-lg-6 col-md-12 rounded col-6 d-none d-sm-flex" style="background: url('demos/photographer/images/1.jpg') center center no-repeat; background-size: cover;">
</div>
<div class="col-6 d-none d-lg-flex"></div>
<div class="col-6 d-none d-lg-flex"></div>
<div class="col-lg-6 col-md-12 gradient-border shadow-sm col-sm-6 col-12 max-height" style="background-color: #FFF;">
<div class="feature-box flex-column px-3 py-4 fbox-sm">
<div class="fbox-media">
<img src="demos/photographer/images/icons/instagram.svg" class="rounded-0 bg-transparent text-start" alt="Image" style="height: 48px;">
</div>
<div class="fbox-content">
<div class="d-block" style="margin: 90px auto"></div>
<p class="mb-0 fw-normal">View My Stories</p>
<h3 class="fw-medium mt-1 mb-0 d-flex align-self-end"><a href="https://instagram.com/semicolonweb" target="_blank" class="text-dark">Instagram <i class="bi-arrow-right fw-semibold position-relative" style="top: 2px"></i></a></h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section><!-- #Slider End -->
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap pt-0">
<!-- Flip Card Sections
============================================= -->
<div class="section mt-0">
<div class="container">
<div class="row align-items-center justify-content-between">
<div class="col-lg-4 parallax" data-bottom-top="margin-top:-50px" data-top-bottom="margin-top:50px">
<small class="text-muted text-uppercase fw-light ls-4 mb-1 d-block">Experience</small>
<h2 class="fw-bold ls-0 mb-4" style="font-size: 38px;">I have been taking photographs for the last 7 years.</h2>
<p class="text-muted" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur blanditiis saepe dolore tempora nihil praesentium dolorum unde, earum, nostrum odit?</p>
</div>
<div class="col-lg-7">
<div class="row">
<div class="col-sm-6">
<!-- Flip Card
============================================= -->
<div class="flip-card">
<div class="flip-card-front no-after" style="background-color: #F9F9F9">
<div class="flip-card-inner">
<div class="feature-box media-box fbox-sm">
<div class="fbox-icon position-relative mb-4">
<a href="#">
<img src="demos/photographer/images/icons/camera1-dark.svg" class="rounded-0 bg-transparent text-start" alt="Image">
</a>
</div>
<div class="fbox-content">
<h3 class="fw-normal text-transform-none">Wild Photography</h3>
<p class="text-muted fw-medium">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi rem, facilis nobis voluptatum.</p>
</div>
</div>
</div>
</div>
<div class="flip-card-back dark" style="background-image: url('demos/photographer/images/features/1-1.jpg')">
<div class="flip-card-inner mt-3">
<h4 class="mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit.</h4>
<a href="#" class="button button-change overflow-hidden rounded text-transform-none fw-light m-0">
<span>View Photos</span>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 mb-5">
<!-- Flip Card
============================================= -->
<div class="flip-card">
<div class="flip-card-front no-after" style="background-color: #F9F9F9">
<div class="flip-card-inner">
<div class="feature-box media-box fbox-sm">
<div class="fbox-icon position-relative mb-4">
<a href="#">
<img src="demos/photographer/images/icons/travel-dark.svg" class="rounded-0 bg-transparent text-start" alt="Image">
</a>
</div>
<div class="fbox-content">
<h3 class="fw-normal text-transform-none">Travel Blog</h3>
<p class="text-muted fw-medium">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi rem, facilis nobis voluptatum.</p>
</div>
</div>
</div>
</div>
<div class="flip-card-back dark" style="background-image: url('demos/photographer/images/features/2.jpg')">
<div class="flip-card-inner mt-3">
<h4 class="mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit.</h4>
<a href="#" class="button button-change overflow-hidden rounded text-transform-none fw-light m-0">
<span>View Photos</span>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 mb-5">
<!-- Flip Card
============================================= -->
<div class="flip-card">
<div class="flip-card-front no-after" style="background-color: #F9F9F9">
<div class="flip-card-inner">
<div class="feature-box media-box fbox-sm">
<div class="fbox-icon position-relative mb-4">
<a href="#">
<img src="demos/photographer/images/icons/wedding-dark.svg" class="rounded-0 bg-transparent text-start" alt="Image">
</a>
</div>
<div class="fbox-content">
<h3 class="fw-normal text-transform-none">Wedding Shoots</h3>
<p class="text-muted fw-medium">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi rem, facilis nobis voluptatum.</p>
</div>
</div>
</div>
</div>
<div class="flip-card-back dark" style="background-image: url('demos/photographer/images/features/3.jpg')">
<div class="flip-card-inner mt-3">
<h4 class="mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit.</h4>
<a href="#" class="button button-change overflow-hidden rounded text-transform-none fw-light m-0">
<span>View Photos</span>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<!-- Flip Card
============================================= -->
<div class="flip-card">
<div class="flip-card-front no-after" style="background-color: #F9F9F9">
<div class="flip-card-inner">
<div class="feature-box media-box fbox-sm">
<div class="fbox-icon position-relative mb-4">
<a href="#">
<img src="demos/photographer/images/icons/camera2-dark.svg" class="rounded-0 bg-transparent text-start" alt="Image">
</a>
</div>
<div class="fbox-content">
<h3 class="fw-normal text-transform-none">Candid Moments</h3>
<p class="text-muted fw-medium">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi rem, facilis nobis voluptatum.</p>
</div>
</div>
</div>
</div>
<div class="flip-card-back dark" style="background-image: url('demos/photographer/images/features/4.jpg')">
<div class="flip-card-inner mt-3">
<h4 class="mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit.</h4>
<a href="#" class="button button-change overflow-hidden rounded text-transform-none fw-light m-0">
<span>View Photos</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Section Photographs
============================================= -->
<div class="section bg-transparent">
<div class="container">
<div class="col-lg-6 offset-lg-1 mb-5">
<small class="text-muted text-uppercase fw-light ls-3 d-block">Some of Featured Pictures</small>
<h2 class="fw-bold ls-0 mb-3" style="font-size: 46px;">See what I Did.</h2>
<p class="text-muted" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur blanditiis saepe dolore tempora nihil praesentium dolorum unde, earum, nostrum odit?</p>
</div>
<div class="row grid-container gutter-30" style="overflow: visible;">
<!-- Photographs
============================================= -->
<div class="col-lg-4 col-sm-6 rounded img-hover-wrap">
<div class="img-hover-card">
<a href="demos/photographer/images/album/1.jpg" data-lightbox="image"><img src="demos/photographer/images/album/1.jpg" alt="Image"></a>
<div class="img-hover-detail">
<small class="text-light ls-1 fw-light">Travel</small>
<h3 class="img-hover-title"><a href="#">Railway Station</a></h3>
<div class="img-link"><a href="#"><i class="bi-arrow-right"></i></a></div>
</div>
</div>
</div>
<!-- Photographs
============================================= -->
<div class="col-lg-4 col-sm-6 rounded img-hover-wrap">
<div class="img-hover-card">
<a href="demos/photographer/images/album/2.jpg" data-lightbox="image"><img src="demos/photographer/images/album/2.jpg" alt="Image"></a>
<div class="img-hover-detail">
<small class="text-light ls-1 fw-light">Travel</small>
<h3 class="img-hover-title"><a href="#">Mt. Batur</a></h3>
<div class="img-link"><a href="#"><i class="bi-arrow-right"></i></a></div>
</div>
</div>
</div>
<!-- Photographs
============================================= -->
<div class="col-lg-4 col-sm-6 rounded img-hover-wrap">
<div class="img-hover-card">
<a href="demos/photographer/images/album/3.jpg" data-lightbox="image"><img src="demos/photographer/images/album/3.jpg" alt="Image"></a>
<div class="img-hover-detail">
<small class="text-light ls-1 fw-light">Travel</small>
<h3 class="img-hover-title"><a href="#">Bali, Indonesia</a></h3>
<div class="img-link"><a href="#"><i class="bi-arrow-right"></i></a></div>
</div>
</div>
</div>
<!-- Photographs
============================================= -->
<div class="col-lg-4 col-sm-6 rounded img-hover-wrap">
<div class="img-hover-card">
<a href="demos/photographer/images/album/4.jpg" data-lightbox="image"><img src="demos/photographer/images/album/4.jpg" alt="Image"></a>
<div class="img-hover-detail">
<small class="text-light ls-1 fw-light">Wedding</small>
<h3 class="img-hover-title"><a href="#">Ms. Charle's Wedding</a></h3>
<div class="img-link"><a href="#"><i class="bi-arrow-right"></i></a></div>
</div>
</div>
</div>
<!-- Photographs
============================================= -->
<div class="col-lg-4 col-sm-6 rounded img-hover-wrap">
<div class="img-hover-card">
<a href="demos/photographer/images/album/5.jpg" data-lightbox="image"><img src="demos/photographer/images/album/5.jpg" alt="Image"></a>
<div class="img-hover-detail">
<small class="text-light ls-1 fw-light">Wedding</small>
<h3 class="img-hover-title"><a href="#">Romantic Moments</a></h3>
<div class="img-link"><a href="#"><i class="bi-arrow-right"></i></a></div>
</div>
</div>
</div>
<!-- Photographs
============================================= -->
<div class="col-lg-4 col-sm-6 rounded img-hover-wrap">
<div class="img-hover-card">
<a href="demos/photographer/images/album/6.jpg" data-lightbox="image"><img src="demos/photographer/images/album/6.jpg" alt="Image"></a>
<div class="img-hover-detail">
<small class="text-light ls-1 fw-light">Travel</small>
<h3 class="img-hover-title"><a href="#">Surfing on Sunset</a></h3>
<div class="img-link"><a href="#"><i class="bi-arrow-right"></i></a></div>
</div>
</div>
</div>
<!-- Photographs
============================================= -->
<div class="col-lg-4 col-sm-6 rounded img-hover-wrap">
<div class="img-hover-card">
<a href="demos/photographer/images/album/7.jpg" data-lightbox="image"><img src="demos/photographer/images/album/7.jpg" alt="Image"></a>
<div class="img-hover-detail">
<small class="text-light ls-1 fw-light">Candid</small>
<h3 class="img-hover-title"><a href="#">Black & White</a></h3>
<div class="img-link"><a href="#"><i class="bi-arrow-right"></i></a></div>
</div>
</div>
</div>
<!-- Photographs
============================================= -->
<div class="col-lg-4 col-sm-6 rounded img-hover-wrap">
<div class="img-hover-card">
<a href="demos/photographer/images/album/8.jpg" data-lightbox="image"><img src="demos/photographer/images/album/8.jpg" alt="Image"></a>
<div class="img-hover-detail">
<small class="text-light ls-1 fw-light">Candid</small>
<h3 class="img-hover-title"><a href="#">Reading Book</a></h3>
<div class="img-link"><a href="#"><i class="bi-arrow-right"></i></a></div>
</div>
</div>
</div>
<!-- Photographs
============================================= -->
<div class="col-lg-4 col-sm-6 rounded img-hover-wrap">
<div class="img-hover-card">
<a href="demos/photographer/images/album/9.jpg" data-lightbox="image"><img src="demos/photographer/images/album/9.jpg" alt="Image"></a>
<div class="img-hover-detail">
<small class="text-light ls-1 fw-light">Random</small>
<h3 class="img-hover-title"><a href="#">Little Flubby</a></h3>
<div class="img-link"><a href="#"><i class="bi-arrow-right"></i></a></div>
</div>
</div>
</div>
<!-- Photographs
============================================= -->
<div class="col-lg-4 col-sm-6 rounded img-hover-wrap">
<div class="img-hover-card">
<a href="demos/photographer/images/album/10.jpg" data-lightbox="image"><img src="demos/photographer/images/album/10.jpg" alt="Image"></a>
<div class="img-hover-detail">
<small class="text-light ls-1 fw-light">Potrait</small>
<h3 class="img-hover-title"><a href="#">Model Shoot</a></h3>
<div class="img-link"><a href="#"><i class="bi-arrow-right"></i></a></div>
</div>
</div>
</div>
<!-- Photographs
============================================= -->
<div class="col-lg-4 col-sm-6 rounded img-hover-wrap">
<div class="img-hover-card">
<a href="demos/photographer/images/album/11.jpg" data-lightbox="image"><img src="demos/photographer/images/album/11.jpg" alt="Image"></a>
<div class="img-hover-detail">
<small class="text-light ls-1 fw-light">Fashion</small>
<h3 class="img-hover-title"><a href="#">Beach Shoot</a></h3>
<div class="img-link"><a href="#"><i class="bi-arrow-right"></i></a></div>
</div>
</div>
</div>
<!-- Photographs
============================================= -->
<div class="col-lg-4 col-sm-6 rounded img-hover-wrap">
<div class="img-hover-card">
<a href="demos/photographer/images/album/12.jpg" data-lightbox="image"><img src="demos/photographer/images/album/12.jpg" alt="Image"></a>
<div class="img-hover-detail">
<small class="text-light ls-1 fw-light">Model</small>
<h3 class="img-hover-title"><a href="#">Modelling Pics</a></h3>
<div class="img-link"><a href="#"><i class="bi-arrow-right"></i></a></div>
</div>
</div>
</div>
<!-- Photographs
============================================= -->
<div class="col-lg-4 col-sm-6 rounded img-hover-wrap">
<div class="img-hover-card">
<a href="demos/photographer/images/album/13.jpg" data-lightbox="image"><img src="demos/photographer/images/album/13.jpg" alt="Image"></a>
<div class="img-hover-detail">
<small class="text-light ls-1 fw-light">Travel</small>
<h3 class="img-hover-title"><a href="#">Street Picture</a></h3>
<div class="img-link"><a href="#"><i class="bi-arrow-right"></i></a></div>
</div>
</div>
</div>
<!-- Photographs
============================================= -->
<div class="col-lg-4 col-sm-6 rounded img-hover-wrap">
<div class="img-hover-card">
<a href="demos/photographer/images/album/14.jpg" data-lightbox="image"><img src="demos/photographer/images/album/14.jpg" alt="Image"></a>
<div class="img-hover-detail">
<small class="text-light ls-1 fw-light">Street</small>
<h3 class="img-hover-title"><a href="#">Budapest, Hungry</a></h3>
<div class="img-link"><a href="#"><i class="bi-arrow-right"></i></a></div>
</div>
</div>
</div>
<!-- Photographs
============================================= -->
<div class="col-lg-4 col-sm-6 rounded img-hover-wrap">
<div class="img-hover-card">
<a href="demos/photographer/images/album/15.jpg" data-lightbox="image"><img src="demos/photographer/images/album/15.jpg" alt="Image"></a>
<div class="img-hover-detail">
<small class="text-light ls-1 fw-light">Candid</small>
<h3 class="img-hover-title"><a href="#">Street Picture</a></h3>
<div class="img-link"><a href="#"><i class="bi-arrow-right"></i></a></div>
</div>
</div>
</div>
</div>
<!-- Titles
============================================= -->
<div class="row mt-5">
<div class="col-sm-6 offset-sm-1">
<h2 class="fw-bold ls-0 mb-3" style="font-size: 38px;">More Coming Soon..</h2>
<p class="text-muted" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur blanditiis saepe dolore tempora nihil praesentium dolorum unde, earum, nostrum odit?</p>
</div>
</div>
</div>
</div>
<!-- Counter Section
============================================= -->
<div class="section" style="background: #FFF url('demos/photographer/images/dots.png') 170% 0% no-repeat; background-size: 60% auto">
<div class="container">
<div class="row justify-content-between">
<!-- Counter
============================================= -->
<div class="col-lg-3 col-md-6 mt-4">
<div class="counter counter-large fw-light"><span data-from="1" data-to="7" data-refresh-interval="100" data-speed="2000"></span>+</div>
<h5>years of Experience</h5>
<p class="text-muted mb-0 pb-5 border-bottom">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur blanditiis saepe dolore tempora.</p>
</div>
<!-- Counter
============================================= -->
<div class="col-lg-3 col-md-6 mt-4">
<div class="counter counter-large fw-light"><span data-from="10" data-to="114" data-refresh-interval="50" data-speed="2000" data-comma="true"></span>+</div>
<h5>Posted Travel Blogs</h5>
<p class="text-muted mb-0 pb-5 border-bottom">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur blanditiis saepe dolore tempora.</p>
</div>
<!-- Counter
============================================= -->
<div class="col-lg-3 col-md-6 mt-4">
<div class="counter counter-large fw-light"><span data-from="100" data-to="1034" data-refresh-interval="50" data-speed="2000" data-comma="true"></span>+</div>
<h5>Has Photos Published</h5>
<p class="text-muted mb-0 pb-5 border-bottom">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur blanditiis saepe dolore tempora.</p>
</div>
</div>
</div>
</div>
<!-- Clients
============================================= -->
<div class="section bg-transparent">
<div class="container text-center">
<small class="text-muted text-uppercase fw-light ls-3">Trusted Partners</small>
<h2 class="fw-bold ls-0 mb-5" style="font-size: 46px;">Happy Clients</h2>
<div class="row">
<div class="col-md-10 offset-md-1">
<div class="row">
<!-- Client
============================================= -->
<div class="col-md-3 col-6">
<a href="#"><img class="p-4" src="demos/photographer/images/clients/light/1.png" alt="clients"></a>
</div>
<!-- Client
============================================= -->
<div class="col-md-3 col-6">
<a href="#"><img class="p-4" src="demos/photographer/images/clients/light/2.png" alt="clients"></a>
</div>
<!-- Client
============================================= -->
<div class="col-md-3 col-6">
<a href="#"><img class="p-4" src="demos/photographer/images/clients/light/3.png" alt="clients"></a>
</div>
<!-- Client
============================================= -->
<div class="col-md-3 col-6">
<a href="#"><img class="p-4" src="demos/photographer/images/clients/light/4.png" alt="clients"></a>
</div>
<!-- Client
============================================= -->
<div class="col-md-3 col-6">
<a href="#"><img class="p-4" src="demos/photographer/images/clients/light/5.png" alt="clients"></a>
</div>
<!-- Client
============================================= -->
<div class="col-md-3 col-6">
<a href="#"><img class="p-4" src="demos/photographer/images/clients/light/6.png" alt="clients"></a>
</div>
<!-- Client
============================================= -->
<div class="col-md-3 col-6">
<a href="#"><img class="p-4" src="demos/photographer/images/clients/light/7.png" alt="clients"></a>
</div>
<!-- Client
============================================= -->
<div class="col-md-3 col-6">
<a href="#"><img class="p-4" src="demos/photographer/images/clients/light/8.png" alt="clients"></a>
</div>
</div>
</div>
</div>
<a href="#" class="button button-change button-large button-rounded text-transform-none fw-light mt-4 ms-0">
<span>View more Clients <i class="bi-arrow-right"></i></span>
</a>
</div>
</div>
<!-- Service Section
============================================= -->
<div class="section" style="padding: 140px 0;">
<div class="container">
<div class="col-sm-6 mb-5">
<small class="text-muted text-uppercase fw-light ls-3 d-block">Steps of Works</small>
<h2 class="fw-bold ls-0 mb-3" style="font-size: 46px;">See How I Do.</h2>
<p class="text-muted" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur blanditiis saepe dolore tempora nihil praesentium dolorum unde, earum, nostrum odit?</p>
</div>
<div class="row">
<!-- Card 1
============================================= -->
<div class="col-lg-4 col-md-6 mt-3">
<div class="card shadow-sm d-flex align-items-end flex-column p-3" style="height: 450px; background-color: #FFF; border: 1px solid #FFF">
<div></div>
<div class="mt-auto">
<div class="card-body">
<img src="demos/photographer/images/icons/shutter.svg" width="40" alt="Image" class="mb-4">
<h4 class="card-title fw-normal">Updated Lenses:</h4>
<p class="card-text mb-0 mt-2 fw-light">Objectively productivate interoperable process improvements after team building testing procedures. Distinctively architect resource-leveling portals.</p><br>
<p class="card-text mb-0 fw-light">Objectively productivate interoperable process improvements.</p>
</div>
</div>
</div>
</div>
<!-- Card 2
============================================= -->
<div class="col-lg-4 col-md-6 mt-3">
<div class="card shadow-sm d-flex align-items-end flex-column p-3" style="height: 450px; background-color: #FFF; border: 1px solid #FFF">
<div></div>
<div class="mt-auto">
<div class="card-body">
<img src="demos/photographer/images/icons/video-camera.svg" width="40" alt="Image" class="mb-4">
<h4 class="card-title fw-normal">Film Making:</h4>
<p class="card-text mb-0 mt-2 fw-light">Objectively productivate interoperable process improvements.</p><br>
<p class="card-text mb-0 fw-light">Objectively productivate interoperable process improvements after team building testing procedures. Distinctively architect resource-leveling portals.</p>
</div>
</div>
</div>
</div>
<!-- Card 3
============================================= -->
<div class="col-lg-4 col-md-6 mt-3">
<div class="card shadow-sm d-flex align-items-end flex-column p-3" style="height: 450px; background-color: #FFF; border: 1px solid #FFF">
<div></div>
<div class="mt-auto">
<div class="card-body">
<div class="d-flex align-items-center mb-4">
<span><img src="demos/photographer/images/icons/lr.svg" width="35" alt="Image"></span>
<span class="px-3 h6 m-0 fw-light">&</span>
<span><img src="demos/photographer/images/icons/psd.svg" width="35" alt="Image"></span>
</div>
<h4 class="card-title fw-normal">Most Edited Tools:</h4>
<p class="card-text mb-0 mt-2 fw-light">Objectively productivate interoperable process improvements.</p><br>
<p class="card-text mb-0 fw-light">Objectively productivate interoperable process improvements after team building testing procedures. Distinctively architect resource-leveling portals.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact Section
============================================= -->
<div class="section mb-0 bg-transparent">
<div class="container">
<div class="row justify-content-between mt-5">
<!-- Heading Title
============================================= -->
<div class="col-md-6">
<small class="text-muted text-uppercase fw-light ls-3 d-block">Let's Say Hi!</small>
<h2 class="fw-bold ls-0 mb-3" style="font-size: 64px; line-height: 1.2">Contact Me Here.</h2>
<p class="text-muted" style="font-size: 16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur blanditiis saepe dolore tempora nihil praesentium dolorum unde, earum, nostrum odit?</p>
<div class="d-flex align-items-center mt-4">
<a href="#" class="button button-change button-large button-rounded text-transform-none fw-light m-0 overflow-hidden">
<span><i class="bi-envelope"></i> Contact Us</span>
</a>
<a href="https://facebook.com/semicolonweb" target="_blank" class="my-0 me-0 ms-3 social-icon inline-block si-small text-white bg-facebook">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="https://twitter.com/__semicolon" target="_blank" class="my-0 me-0 ms-2 social-icon inline-block si-small text-white bg-twitter">
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-twitter"></i>
</a>
<a href="https://instagram.com/semicolonweb" target="_blank" class="my-0 me-0 ms-2 social-icon inline-block si-small text-white bg-instagram">
<i class="bi-instagram"></i>
<i class="bi-instagram"></i>
</a>
</div>
</div>
<!-- Testimonials
============================================= -->
<div class="col-md-5 mt-5 mt-md-0">
<h5 class="ps-4 fw-normal">What Clients Says:</h5>
<div id="oc-testi" class="owl-carousel testimonials-carousel carousel-widget ps-4" data-margin="0" data-nav="false" data-pagi="false" data-items="1" data-autoplay="6000" data-loop="true" data-animate-in="fadeIn">
<div class="oc-item">
<div class="p-3">
<div class="quote-bubble quote-bubble-left mb-3">
<p>Incidunt deleniti blanditiis quas aperiam recusandae consequatur ullam quibusdam cum libero illo rerum repellendus!</p>
</div>
<div class="fw-semibold h6 ls-1 mt-3 mb-0">- Fig Nelson</div>
</div>
</div>
<div class="oc-item">
<div class="p-3">
<div class="quote-bubble quote-bubble-left mb-3">
<p>Completely e-enable premier infomediaries and long-term high-impact process improvements. Completely provide access to B2C.</p>
</div>
<div class="fw-semibold h6 ls-1 mt-3 mb-0">- Bailey Wonger</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section><!-- #content end -->
<!-- Footer
============================================= -->
<footer id="footer" class="dark border-0">
<!-- Copyrights
============================================= -->
<div id="copyrights" style="background: #222">
<div class="container">
<div class="w-100 text-center mt-4">
<p class="mb-3">© Canvas Inc. 2020. All Rights Reserved.</p>
<div class="d-flex justify-content-center">
<a href="https://facebook.com/semicolonweb" target="_blank" class="social-icon si-small rounded-circle text-white bg-facebook">
<i class="fa-brands fa-facebook-f"></i>
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="https://twitter.com/__semicolon" target="_blank" class="social-icon si-small rounded-circle text-white bg-twitter">
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-twitter"></i>
</a>
<a href="https://instagram.com/semicolonweb" target="_blank" class="social-icon si-small rounded-circle text-white bg-instagram">
<i class="bi-instagram"></i>
<i class="bi-instagram"></i>
</a>
<a href="mailto:[email protected]" class="social-icon si-small rounded-circle text-white bg-google">
<i class="bi-envelope"></i>
<i class="bi-envelope"></i>
</a>
</div>
</div>
</div>
</div><!-- #copyrights end -->
</footer><!-- #footer end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="uil uil-angle-up bg-color"></div>
<!-- Dark Mode Switch
============================================= -->
<a href="demo-photographer-dark.html" class="dark-mode" data-animate="fadeInRight">
<span>Dark Mode</span><i class="bi-toggle-off shadow"></i>
</a>
<!-- JavaScripts
============================================= -->
<script src="js/jquery.js"></script>
<script src="js/functions.js"></script>
<!-- Parallax Script
============================================= -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>
<script>!SEMICOLON.Mobile.any() && skrollr.init({forceHeight: false});</script>
<!-- Photograph Hover Plugin
============================================= -->
<script src="demos/writer/js/hover3d.js" ></script>
<!-- Menu Open Plugin
============================================= -->
<script src="demos/photographer/js/menu-easing.js"></script>
<script>
// Hover Script
jQuery(".img-hover-wrap").hover3d({
selector: ".img-hover-card",
shine: false,
});
</script>
</body>
</html>