92 lines
4.3 KiB
HTML
92 lines
4.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="css/prism.css">
|
|
<title>Robert - Interior Studio HTML Template</title>
|
|
</head>
|
|
<body data-spy="scroll" data-target="#navbar-example">
|
|
<header class="header">
|
|
<div class="container">
|
|
<h2>Robert - Interior Studio HTML Template</h2>
|
|
<p class="text-muted">Design to attract, convert and<br>delight your customers</p>
|
|
</div>
|
|
</header>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<nav id="navbar-example" class="col-12 col-md-3 col-xl-2 sidebar py-5">
|
|
<ul class="nav d-block">
|
|
<li><a href="#project">Project Structure</a>
|
|
</li>
|
|
<li><a href="#gsap">GSAPr</a>
|
|
</li>
|
|
<li><a href="#number">Number counter</a>
|
|
</li>
|
|
<li><a href="#form">Form send email</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="col-12 col-md-9 col-xl-8 py-5 pl-md-5 content">
|
|
<div id="project">
|
|
<h2 class="mb-5">Project Structure</h2>
|
|
<div class="alert alert-danger" role="alert">Robert will work correctly only on the web server!</div>
|
|
<p>The structure of the Robert HTML template:</p>
|
|
<ul>
|
|
<li><b>css</b> - all common scripts used on the pages, theme styles included in <b>main.css</b> and <b>blog_page.css</b> files</li>
|
|
<li><b>fonts</b> - all fonts used on the pages</li>
|
|
<li><b>img</b> - icons and backgrounds for the project</li>
|
|
<li><b>svg</b> - svg sprite for the project</li>
|
|
<li><b>images</b> - photo images for the project</li>
|
|
<li><b>js</b> - all common scripts used on the pages file</li>
|
|
<li><b>php</b> - the script for the site forms</li>
|
|
</ul>
|
|
<h5 class="my-4">Head</h5>
|
|
<img alt="" src="img/head.jpg">
|
|
</div>
|
|
|
|
<div id="gsap" class="my-5">
|
|
<h3>GSAP</h3>
|
|
<p>All scroll animations and slider are built with plugin <a href="https://greensock.com/gsap/">GSAP v3</a>, you can find documentation <a href="https://greensock.com/docs/v3/GSAP">here</a></p>
|
|
<h5 class="my-4"><b>Change animation settings</b></h5>
|
|
<p>Change the value of <b>variables</b> in <b>main.js</b> file.</p>
|
|
<p><img src="img/gsap.jpg"></p>
|
|
<ul>
|
|
<li><b>hSpeed</b> - horizontal scrolling speed in percent</li>
|
|
<li><b>vSpeed</b> - scrolling speed of vertical blocks</li>
|
|
<li><b>scrubPower</b> - time / strength of action of smooth stop after scrolling</li>
|
|
<li><b>snapMode</b> - scrolling to block boundaries</li>
|
|
<li><b>noiseMode</b> - background noise</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="number" class="my-5">
|
|
<h3 class="mb-4">Number Counter</h3>
|
|
<p class="mb-5"><img src="img/counter.jpg"></p>
|
|
<h5 class="my-4"><b>To change numbers, change this values:</b></h5>
|
|
<p><img src="img/counter2.jpg"></p>
|
|
</div>
|
|
|
|
<div id="form" class="my-5">
|
|
<h3 class="mb-4">Form send email</h3>
|
|
<h5 class="my-4"><b>To change email and title, change this values:</b></h5>
|
|
<p class="mb-5"><img src="img/form.jpg"></p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Optional JavaScript -->
|
|
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
|
<script src="js/jquery.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
|
|
<script src="js/prism.js"></script>
|
|
<script src="js/script.js"></script>
|
|
</body>
|
|
</html> |