added first three mockups
This commit is contained in:
+3
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"liveServer.settings.port": 5501
|
||||
}
|
||||
+7
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 165 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
+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>
|
||||
+7
File diff suppressed because one or more lines are too long
+8
@@ -0,0 +1,8 @@
|
||||
$(function () {
|
||||
var scroll = new SmoothScroll('a[href*="#"]');
|
||||
$(document).on('scroll', function () {
|
||||
$('.nav-sidebar nav').css({
|
||||
'position': 'fixed'
|
||||
});
|
||||
});
|
||||
});
|
||||
+2
File diff suppressed because one or more lines are too long
+90
@@ -0,0 +1,90 @@
|
||||
@import url("https://fonts.googleapis.com/css?family=Nunito:400,600");
|
||||
|
||||
body {
|
||||
font-family: "Nunito", sans-serif;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.header {
|
||||
background-color: #fff;
|
||||
/* background-color: #1e1d2b; */
|
||||
padding: 20px 0;
|
||||
box-shadow: 0px 5px 30px rgba(189, 189, 189, 0.5);
|
||||
}
|
||||
.header h1 a {
|
||||
color: #0abc9c;
|
||||
}
|
||||
.header h1 a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.header p {
|
||||
color: #1e1d2b;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.logo {
|
||||
max-width: 100px;
|
||||
display: block;
|
||||
}
|
||||
.nav-sidebar nav {
|
||||
position: relative;
|
||||
}
|
||||
.nav-sidebar ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-sidebar li {
|
||||
display: block;
|
||||
}
|
||||
.nav-sidebar a {
|
||||
color: #111;
|
||||
display: block;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.main-content {
|
||||
position: relative;
|
||||
padding: 60px 0;
|
||||
}
|
||||
.single-div {
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding-bottom: 30px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.single-div h3 {
|
||||
font-size: 26px;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.inner-div ul li {
|
||||
padding: 2px 0;
|
||||
}
|
||||
.inner-div ul li > ul {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.single-div h3,
|
||||
.nav-title {
|
||||
position: relative;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.single-div h3::after,
|
||||
.nav-title::after {
|
||||
content: "";
|
||||
background: #d92128;
|
||||
width: 40px;
|
||||
height: 3px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.footer {
|
||||
background-color: #343a40;
|
||||
padding: 30px 0;
|
||||
}
|
||||
.footer p {
|
||||
margin-bottom: 0;
|
||||
color: #fff;
|
||||
}
|
||||
Reference in New Issue
Block a user