added first three mockups
This commit is contained in:
+301
@@ -0,0 +1,301 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
|
||||
<!-- CSS -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
|
||||
<title>ePaint Documentation</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-sm-6">
|
||||
<a href="index.html" class="logo"><img src="images/logo.png" /></a>
|
||||
</div>
|
||||
<div class="col-sm-6 text-right">
|
||||
<p>Documentation</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="main-content">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<div class="nav-sidebar">
|
||||
<nav>
|
||||
<h5 class="nav-title">Navigation</h5>
|
||||
<ul>
|
||||
<li><a href="#intro">Introduction</a></li>
|
||||
<li><a href="#file-structure">File structure</a></li>
|
||||
<li><a href="#general">General setting</a></li>
|
||||
<li><a href="#navigation">Nav Menu</a></li>
|
||||
<li><a href="#swiper-js">Swiper Js</a></li>
|
||||
<li><a href="#progress">Progress</a></li>
|
||||
<li><a href="#counter">CounterUp</a></li>
|
||||
<li><a href="#fancy-box">Fancy-box</a></li>
|
||||
<li><a href="#others">Css & Js list</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<div class="content">
|
||||
<div id="intro" class="single-div">
|
||||
<div class="inner-div">
|
||||
<h3>ePaint - Painting Services Company Html Template</h3>
|
||||
<p>
|
||||
Thank you very much for purchase ePaint - Painting Services Company Html Template. We believe incoming up with original ideas and Branding.
|
||||
Always we love to work with latest technology. We strongly care about quality product and quality service.
|
||||
</p>
|
||||
<ul class="marketing-byline">
|
||||
<li>Created: 02/09/2022</li>
|
||||
<li>By: <a href="#">Satheme</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="file-structure" class="single-div">
|
||||
<div class="div-heading">
|
||||
<h3 class="title">File structure</h3>
|
||||
<p>
|
||||
Within the ePaint - Painting Services Company Html Template you’ll find the following directories and files, grouping common resources, as
|
||||
well as raw source file
|
||||
</p>
|
||||
</div>
|
||||
<div class="inner-div">
|
||||
<ul>
|
||||
<li>
|
||||
Toha/ - Source files
|
||||
<ul>
|
||||
<li>Scss/ - compiled CSS files</li>
|
||||
<li>images/ - image files</li>
|
||||
<li>js/ - JavaScript files</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>home.html/- home-page</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="general" class="single-div">
|
||||
<div class="div-heading">
|
||||
<h3 class="title">General settings for Every page</h3>
|
||||
</div>
|
||||
<div class="inner-div">
|
||||
<ul>
|
||||
<li>
|
||||
<h6>1. Change the title</h6>
|
||||
<code><title>ePaint - Painting Services Company Html Template</title></code>
|
||||
</li>
|
||||
<br />
|
||||
<li>
|
||||
<h6>2. Change the logo</h6>
|
||||
<img src="images/logo_change.jpg" alt="" />
|
||||
</li>
|
||||
<br />
|
||||
<li>
|
||||
<h6>3. Change google fonts in <strong>(style.scss)</strong></h6>
|
||||
<code>
|
||||
@import
|
||||
url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
|
||||
<br /><br />
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
|
||||
</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navigation" class="single-div">
|
||||
<div class="div-heading">
|
||||
<h3 class="title">Navigation customization</h3>
|
||||
<p>Navigation's are inside 'navbar-nav' section. Change navigation with your own text for every page.</p>
|
||||
</div>
|
||||
<div class="inner-div">
|
||||
<ul>
|
||||
<li>
|
||||
<h6>1. Change / Add your nav items for primary menu</h6>
|
||||
<img src="images/navigation-html.jpg" alt="" />
|
||||
</li>
|
||||
<br />
|
||||
<br />
|
||||
<li>
|
||||
<h6>2. Navigation Js</h6>
|
||||
<img src="images/navigation-js.jpg" alt="" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="swiper-js" class="single-div">
|
||||
<div class="div-heading">
|
||||
<h3 class="title">Swiperjs customization</h3>
|
||||
</div>
|
||||
<div class="inner-div">
|
||||
<ul>
|
||||
<li>
|
||||
<h6>1. Swiperjs css</h6>
|
||||
<code> <link rel="stylesheet" href="assets/css/swiper-bundle.min.css"> </code>
|
||||
</li>
|
||||
<br />
|
||||
<br />
|
||||
<img src="images/testimonial-html.jpg" alt="" />
|
||||
|
||||
<li>
|
||||
<h6>2. Swiperjs js</h6>
|
||||
<code> <script src="assets/js/swiper-bundle.min.js"></script> </code>
|
||||
</li>
|
||||
<br />
|
||||
<li>
|
||||
<h6>3. Customize Swiperjs jQuery options <strong>(scripts.js)</strong></h6>
|
||||
<img src="images/testimonial-js.jpg" alt="" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="progress" class="single-div">
|
||||
<div class="div-heading">
|
||||
<h3 class="title">Skill customization</h3>
|
||||
</div>
|
||||
<div class="inner-div">
|
||||
<ul>
|
||||
<li>
|
||||
<h6>1. Skill css options <strong>(css)</strong></h6>
|
||||
<code> <link rel="stylesheet" href="assets/css/jquery.rprogessbar.min.css"> </code>
|
||||
<br />
|
||||
<br />
|
||||
<img src="images/skill-html.jpg" alt="" />
|
||||
</li>
|
||||
<br />
|
||||
<br />
|
||||
<li>
|
||||
<h6>2. Skill js options <strong>(js)</strong></h6>
|
||||
<code> <assets/js/jQuery.rProgressbar.min.js"></script> </code>
|
||||
</li>
|
||||
<br />
|
||||
<br />
|
||||
<img src="images/skill-js.jpg" alt="" />
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="fancy-box" class="single-div">
|
||||
<div class="div-heading">
|
||||
<h3 class="title">Fancy-box customization</h3>
|
||||
</div>
|
||||
<div class="inner-div">
|
||||
<ul>
|
||||
<li>
|
||||
<h6>1. Fancybox css options <strong>(css)</strong></h6>
|
||||
<code> <link rel="stylesheet" href="assets/css/jquery.fancybox.min.css"> </code>
|
||||
<br />
|
||||
<br />
|
||||
<img src="images/fancy-html.jpg" alt="" />
|
||||
</li>
|
||||
<br />
|
||||
<br />
|
||||
<li>
|
||||
<h6>2. Fancybox js options <strong>(js)</strong></h6>
|
||||
<code> <script src="assets/js/jquery.fancybox.min.js"></script> </code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="counter" class="single-div">
|
||||
<div class="div-heading">
|
||||
<h3 class="title">CounterUp customization</h3>
|
||||
</div>
|
||||
<div class="inner-div">
|
||||
<ul>
|
||||
<li>
|
||||
<h6>1. CounterUp Html options <strong>(html)</strong></h6>
|
||||
<br />
|
||||
<img src="images/counter-html.jpg" alt="" />
|
||||
</li>
|
||||
<br />
|
||||
<br />
|
||||
<li>
|
||||
<h6>2. CounterUp js options <strong>(js)</strong></h6>
|
||||
<code> <script src="assets/js/counterup.min.js"></script> </code>
|
||||
<br />
|
||||
<code> <script src="assets/js/jquery.waypoints.js"></script> </code>
|
||||
<br />
|
||||
<br />
|
||||
<img src="images/counter-js.jpg" alt="" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="others" class="single-div">
|
||||
<div class="div-heading">
|
||||
<h3 class="title">Third party CSS & JS list</h3>
|
||||
</div>
|
||||
<div class="inner-div">
|
||||
<ul>
|
||||
<li>
|
||||
<h6>Third party CSS</h6>
|
||||
<p>Note: You will find all third party CSS files in the <strong>'CSS' directory</strong></p>
|
||||
<ul>
|
||||
<li><link rel="stylesheet" href="assets/css/all.min.css"></li>
|
||||
<li><link rel="stylesheet" href="assets/css/bootstrap.min.css"></li>
|
||||
<li><link rel="stylesheet" href="assets/css/swiper-bundle.min.css"></li>
|
||||
<li><link rel="stylesheet" href="assets/css/jquery.rprogessbar.min.css"></li>
|
||||
<li><link rel="stylesheet" href="assets/css/jquery.fancybox.min.css"></li>
|
||||
<li><link rel="stylesheet" href="assets/scss/style.css"></li>
|
||||
</ul>
|
||||
</li>
|
||||
<br />
|
||||
<li>
|
||||
<h6>Third party JS</h6>
|
||||
<p>Note: You will find all third party JS files in the <strong>'JS' directory</strong></p>
|
||||
<ul>
|
||||
<li><script src="assets/js/jquery-3.6.0.min.js"></script></li>
|
||||
<li><script src="assets/js/popper.min.js"></script></li>
|
||||
<li><script src="assets/js/bootstrap.min.js"></script></li>
|
||||
<li><script src="assets/js/bootstrap.bundle.min.js"></script></li>
|
||||
<li><script src="assets/js/swiper-bundle.min.js"></script></li>
|
||||
<li><script src="assets/js/counterup.min.js"></script></li>
|
||||
<li><script src="assets/js/jquery.waypoints.js"></script></li>
|
||||
<li><script src="assets/js/jQuery.rProgressbar.min.js"></script></li>
|
||||
<li><script src="assets/js/jquery.fancybox.min.js"></script></li>
|
||||
<li><script src="assets/js/scripts.js"></script></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<p class="copytext">Copyright © 2022 by <a href="#">Satheme </a>. All Rights Reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/smooth-scroll.min.js"></script>
|
||||
<script src="js/scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user