File: /home/slfopp7cb1df/public_html/single.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,500i,700&display=swap&subset=cyrillic" rel="stylesheet">
<title>Single page | USCTM</title>
<link href="css/style.css" rel="stylesheet">
<link href="favicon.png" rel="shortcut icon" type="image/x-icon">
<link href="favicon.png" rel="icon" type="image/x-icon">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="#3D0082" name="msapplication-TileColor">
<meta content="#3D0082" name="theme-color">
</head>
<body>
<div class="container" id="container">
<svg class="shape-overlays" preserveaspectratio="none" viewbox="0 0 100 100">
<defs>
<lineargradient id="gradient1" x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#F7973B"></stop>
<stop offset="100%" stop-color="#FF00A9"></stop>
</lineargradient>
<lineargradient id="gradient2" x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#E200FF"></stop>
<stop offset="100%" stop-color="#00FFE2"></stop>
</lineargradient>
<lineargradient id="gradient3" x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#110046"></stop>
<stop offset="100%" stop-color="#32004a"></stop>
</lineargradient>
</defs>
<path class="shape-overlays__path" d=""></path>
<path class="shape-overlays__path" d=""></path>
<path class="shape-overlays__path" d=""></path>
</svg>
<div class="menu" id="global-menu__item">
<div class="wrap">
<div class="wrap_float">
<div class="right">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="showcase.html">Showcase</a>
</li>
<li>
<a href="services.html">Services</a>
</li>
<li>
<a href="about.html">About us</a>
</li>
<li class="dropdown_li">
<a class="dropdown_a" href="blog.html">Blog</a>
<ul>
<li>
<a href="blog.html">General Fullwidth</a>
</li>
<li>
<a href="blog-right-sidebar.html">General Right Sidebar</a>
</li>
<li>
<a href="blog.html">Single Fullwidth</a>
</li>
<li>
<a href="blog-single-sidebar.html">Single Right Sidebar</a>
</li>
<li>
<a href="blog-search-result.html">Search results</a>
</li>
<li>
<a href="blog-search-no-results.html">No results</a>
</li>
</ul>
</li>
<li>
<a href="404.html">404 page</a>
</li>
</ul>
</div>
<div class="left">
<div class="title">
Contacts
</div>
<div class="tel">
<a href="#">+1 217 303 2334</a>
</div>
<div class="email">
<a href="mailto:shane.conrad@usctm.com"
>shane.conrad@usctm.com</a>
</div>
<div class="link js-modal-form">
Let’s be in touch
</div>
<div class="mob-socials">
<a href="#" class="behance"></a>
<a href="#" class="instagram"></a>
<a href="#" class="twitter"></a>
</div>
</div>
</div>
</div>
</div>
<div class="hum_btn hamburger" id="menu-hamburger">
<svg class="ham hamRotate ham7" viewbox="0 0 100 100">
<path class="line top" d="m 70,33 h -40 c 0,0 -6,1.368796 -6,8.5 0,7.131204 6,8.5013 6,8.5013 l 20,-0.0013"></path>
<path class="line middle" d="m 70,50 h -40"></path>
<path class="line bottom" d="m 69.575405,67.073826 h -40 c -5.592752,0 -6.873604,-9.348582 1.371031,-9.348582 8.244634,0 19.053564,21.797129 19.053564,12.274756 l 0,-40"></path>
</svg>
</div>
<a class="head_btn" href="showcase.html">
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<div class="single-page">
<div class="top_panel">
<div class="wrap">
<div class="wrap_float">
<a class="logo" href="/"></a>
</div>
</div>
</div>
<header class="page--head js_height">
<div class="blur-bg" style="background-image: url(https://via.placeholder.com/1920x800);"></div>
<div class="bg-color" style="background-color: #24005A;"></div>
<div class="wrap">
<div class="wrap_float">
<h1 class="title">More than just<br>
a template</h1>
<div class="subtitle">
Digital
</div><a class="link"><span><span class="link-text">Visit website</span></span></a>
</div>
</div>
</header>
<div class="client-block tabs-section" id="client-block">
<div class="wrap">
<div class="wrap_float">
<div class="tabs">
<a class="tab js-anchor active" href="#client-block"><span>Client</span></a>
<a class="tab js-anchor" href="#concept-block"><span>Concept</span></a>
<a class="tab js-anchor" href="#services-block"><span>Services</span></a>
<a class="tab js-anchor" href="#video-block"><span>Video</span></a>
<a class="tab js-anchor" href="#result-block"><span>Result</span></a>
</div>
<div class="section_content">
<div class="text">
<b>Client. Randomised words which don’t look.</b> If passage words you are going to use a passage words which don’t look of you need to be sure. When an unknown printer took a galley.
</div>
<div class="small-text">
<ul>
<li>Client: Digistrict</li>
<li>Date: 13 July, 2019</li>
<li>Work: Rebranding / Web design</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="image-section">
<div class="wrap">
<div class="wrap_float"><img alt="" src="https://via.placeholder.com/1300x740"></div>
</div>
</div>
<div class="col-section">
<div class="wrap">
<div class="wrap_float">
<div class="left">
<p class="title"><b>Digital world.</b><br>
Randomised words.</p>
</div>
<div class="right">
Randomised words which don’t look. If passage words you are going to use a passage words which don’t look of you need to be sure. When an unknown printer took a galley.
</div>
</div>
</div>
</div>
<div class="scroll-effect" id="scroll-effect">
<div class="full-image-section first-level" id="first-level" style="background-image: url(https://via.placeholder.com/1920x1080)"></div>
<div class="description-section concept-block second-level" id="concept-block">
<div class="bg-color" style="background-color: #191919;"></div>
<div class="wrap">
<div class="wrap_float">
<div class="text">
Concept. Randomised words which don’t look. If passage words you are going to use a passage words which don’t look of you need to be sure. When an unknown printer took a galley. Amet suscipit frig lacus. Pellentesque suscipit ante at ullamcorper pulvinar neque porttitor.
</div>
<div class="small-text">
Randomised words which don’t look. If passage words you are going to use a passage words which don’t look of you need to be sure. When an unknown printer took a galley.
</div>
</div>
</div>
</div>
</div>
<div class="image-section">
<div class="wrap">
<div class="wrap_float"><img alt="" src="https://via.placeholder.com/1300x740"></div>
</div>
</div>
<section class="statistics-section services-block is-scrolled" id="services-block" style="background-color: #fff;">
<div class="wrap">
<div class="wrap_float">
<div class="top">
<div class="left">
<h2 class="title"><b>Services.</b> Amet suscipit frig lacus pulvinar.</h2>
<p class="subtitle">Amet suscipit frig lacus. Pellentesque suscipit ante at ullamcorper pulvinar neque porttitor.</p>
</div>
<div class="right">
<div class="params">
<div class="param">
<div class="line">
<div class="progress" style="width: 40%"></div>
</div>
<div class="param-info">
<div class="_title">
JS - 6 year experience
</div>
<div class="_percent" data-val="40">
<span>0</span>%
</div>
</div>
</div>
<div class="param">
<div class="line">
<div class="progress" style="width: 60%"></div>
</div>
<div class="param-info">
<div class="_title">
HTML 5 - 7 year experience
</div>
<div class="_percent" data-val="60">
<span>0</span>%
</div>
</div>
</div>
<div class="param">
<div class="line">
<div class="progress" style="width: 80%"></div>
</div>
<div class="param-info">
<div class="_title">
Web design - 8 year experience
</div>
<div class="_percent" data-val="80">
<span>0</span>%
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="col">
<h3 class="col-title">Branding</h3>
<ul>
<li>Research and brand strategy</li>
<li>Identification system</li>
<li>Product design and packaging</li>
<li>Advertising campaign</li>
</ul>
<a class="link" href="showcase.html"><span><span class="link-text">Discover now</span></span></a>
</div>
<div class="col">
<h3 class="col-title">Digital</h3>
<ul>
<li>Research and brand strategy</li>
<li>Identification system</li>
<li>Product design and packaging</li>
<li>Advertising campaign</li>
</ul>
<a class="link" href="showcase.html"><span><span class="link-text">Discover now</span></span></a>
</div>
<div class="col">
<h3 class="col-title">Pictures</h3>
<ul>
<li>Research and brand strategy</li>
<li>Identification system</li>
<li>Product design and packaging</li>
<li>Advertising campaign</li>
</ul>
<a class="link" href="showcase.html"><span><span class="link-text">Discover now</span></span></a>
</div>
</div>
</div>
</div>
</section>
<div class="image-section">
<div class="wrap">
<div class="wrap_float"><img alt="" src="https://via.placeholder.com/1300x830"></div>
</div>
</div>
<div class="full-image-section"><img alt="" src="https://via.placeholder.com/1920x1446"></div>
<div class="col-section video-block" id="video-block" style="background: #fff;">
<div class="wrap">
<div class="wrap_float">
<div class="left">
<p class="title"><b>Video. Like.</b><br>
Randomised words.</p>
</div>
<div class="right">
Randomised words which don’t look. If passage words you are going to use a passage words which don’t look of you need to be sure. When an unknown printer took a galley.
</div>
</div>
</div>
</div>
<div class="video-section">
<div class="play-btn"></div>
<div class="video_wrap">
<div class="video" id="video">
<video class="fullscreen-bg__video lazy-hidden" poster="https://via.placeholder.com/1920x1080"><source src="#" type="video/mp4"></video>
</div>
</div>
</div>
<section class="col-section result-block" id="result-block" style="background: #fff;">
<div class="wrap">
<div class="wrap_float">
<div class="left">
<h2 class="title"><b>Result.</b> Amet suscipit frig lacus pulvinar.</h2>
<p class="subtitle">Amet suscipit frig lacus. Pellentesque suscipit ante at ullamcorper pulvinar neque porttitor.</p>
</div>
<div class="right">
<ul>
<li><b>Art Director: Digistrict</b></li>
<li><b>Developer: Victor Shibut</b></li>
<li><b>Designer: Maya Delia</b></li>
</ul>
</div>
</div>
</div>
</section>
<section class="portfolio">
<div class="section_content">
<a class="item" href="single.html">
<div class="sq_parent">
<div class="sq_wrap">
<div class="sq_content">
<div class="img" style="background-image: url(https://via.placeholder.com/640x553)"></div>
<div class="info">
<h3 class="item-title">What you were<br>
looking for</h3>
<p class="item-category">Rebranding</p>
</div>
</div>
</div>
</div>
</a>
<a class="item" href="single.html">
<div class="sq_parent">
<div class="sq_wrap">
<div class="sq_content">
<div class="img" style="background-image: url(https://via.placeholder.com/640x553)"></div>
<div class="info">
<h3 class="item-title">More than just<br>
a template</h3>
<p class="item-category">Digital</p>
</div>
</div>
</div>
</div>
</a>
<a class="item" href="single.html">
<div class="sq_parent">
<div class="sq_wrap">
<div class="sq_content">
<div class="img" style="background-image: url(https://via.placeholder.com/640x553)"></div>
<div class="info">
<h3 class="item-title">Minimalism<br>
attracts</h3>
<p class="item-category">Pictures</p>
</div>
</div>
</div>
</div>
</a>
<a class="item" href="single.html">
<div class="sq_parent">
<div class="sq_wrap">
<div class="sq_content">
<div class="img" style="background-image: url(https://via.placeholder.com/640x553)"></div>
<div class="info">
<h3 class="item-title">Every minute<br>
is amazing</h3>
<p class="item-category">Video</p>
</div>
</div>
</div>
</div>
</a>
<a class="item" href="single.html">
<div class="sq_parent">
<div class="sq_wrap">
<div class="sq_content">
<div class="img" style="background-image: url(https://via.placeholder.com/640x553)"></div>
<div class="info">
<h3 class="item-title">Color energy</h3>
<p class="item-category">Rebranding</p>
</div>
</div>
</div>
</div>
</a>
<a class="item" href="single.html">
<div class="sq_parent">
<div class="sq_wrap">
<div class="sq_content">
<div class="img" style="background-image: url(https://via.placeholder.com/640x553)"></div>
<div class="info">
<h3 class="item-title">The future has<br>
already come</h3>
<p class="item-category">Pictures</p>
</div>
</div>
</div>
</div>
</a>
</div>
</section>
</div>
</div>
<footer class="footer">
<div class="wrap">
<div class="wrap_float">
<div class="footer_top">
<h2 class="title">Have an idea or project?<br>
Let’s talk</h2>
<a class="link js-modal-form"><span><span class="link-text">Let’s be in touch</span></span></a>
</div>
<div class="footer_bottom">
<div class="left">
<div class="contact">
<a href="tel:+1 217 303 2334">+1 217 303 2334</a>
<a href="mailto:shane.conrad@usctm.com"
>shane.conrad@usctm.com</a>
</div>
<div class="copyr">
© 2021 USCTM - All rights reserved
</div>
</div>
<div class="right">
Site created by <a href="#">USCTM</a>
</div>
</div>
</div>
</div>
</footer>
<div class="modal_form" id="modal_form">
<div class="wrap">
<div class="wrap_float">
<h2 class="title" data-success="We have received your request, thank you!" style="max-width: 525px;">Tell us about your project, please be descriptive.</h2>
<div class="form_wrap">
<div class="form">
<div class="input_wrap">
<input class="input placeholder js_input" placeholder="Full Name" type="text">
</div>
<div class="input_wrap">
<input class="input placeholder js_input" placeholder="Email" type="text">
</div>
<div class="input_wrap">
<input class="input placeholder js_input" placeholder="Phone" type="text">
</div>
<div class="input_wrap">
<textarea class="textarea placeholder js_input" placeholder="Your Message"></textarea>
</div>
<button class="submit btn js-submit"><span></span> <span class="text">SEND</span></button>
</div>
</div>
<div class="success">
<button class="submit"><span></span><span class="text">SEND</span></button>
</div>
</div>
</div>
<div class="close active">
<svg class="ham hamRotate ham7" viewbox="0 0 100 100">
<path class="line top" d="m 70,33 h -40 c 0,0 -6,1.368796 -6,8.5 0,7.131204 6,8.5013 6,8.5013 l 20,-0.0013"></path>
<path class="line middle" d="m 70,50 h -40"></path>
<path class="line bottom" d="m 69.575405,67.073826 h -40 c -5.592752,0 -6.873604,-9.348582 1.371031,-9.348582 8.244634,0 19.053564,21.797129 19.053564,12.274756 l 0,-40"></path>
</svg>
</div>
</div>
<script defer src="js/jquery.min.js"></script>
<script defer src="js/slick.min.js"></script>
<script defer src="js/easings.js"></script>
<script defer src="js/jquery.placeholder.label.js"></script>
<script defer src="js/scripts.min.js"></script>
<script defer src="js/webkit-scripts.js"></script>
</body>
</html>