Introduction
Read this section to know about TheShots and its features
TheShots is a powerful, responsive, and high-performance image listing template. It's based on Bootstrap and contains a lot of components to easily make an image listing website.
Features
Check out some of features that we have in this template. To know more about features of TheShots, continue reading our documentation and check our available components.
-
Responsive
Your website works on any device: desktop, tablet or mobile.
-
Customizable
You can easily read, edit, and write your own code, or change everything.
-
UI Elements
There is a bunch of useful and necessary elements for developing your website.
-
Clean code
You can find our code well organized, commented and readable.
-
Documented
As you can see in this online documentation, we provided a comprehensive documentation.
-
Free updates
When you purchase this template, you'll freely receive future updates.
What's included
Checkout the files that you'll see upon downloading
Once you download the template, you can see a folder with several files and sub folders. You can read description of some important files in continue.
-
assets
-
css
- app.min.cssMinified version of all required CSS files
- custom.cssWrite your custom styles in this file
- fonts
- imgHere is a place to put your media files like logo, images, videos, etc.
-
js
- app.min.jsMinified version of all required Javascript files
- custom.jsWrite your custom scripts in this file and also edit existence code to fits your need
- vendors
-
css
- index.html
- index-style2.html
- ...
HTML Structure
Check the structure of HTML files
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Some meta tags -->
<title>TheGuide - Starter page</title>
<!-- Styles -->
<link href="assets/css/app.min.css" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
<!-- Fonts and Favicon -->
</head>
<body>
<!-- Navigation bar -->
<nav class="navbar">
...
</nav>
<!-- END Navigation bar -->
<!-- Main container -->
<main>
...
</main>
<!-- END Main container -->
<!-- Site footer -->
<footer class="site-footer">
...
</footer>
<!-- END Site footer -->
<!-- Back to top button -->
<a id="scroll-up" href="#"><i class="ti-angle-up"></i></a>
<!-- END Back to top button -->
<!-- Scripts -->
<script src="assets/js/app.min.js"></script>
<script src="assets/js/custom.js"></script>
</body>
</html>
Typography
Use the following tags and classes to write a better description.
Headings
All HTML headings, <h1>
through <h6>
, are available.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Create lighter, secondary text in any heading with a generic <small>
tag or the .small
class.
<h1>Heading 1 <small>Small text</small></h1>
<h2>Heading 2 <small>Small text</small></h2>
<h3>Heading 3 <small>Small text</small></h3>
<h4>Heading 4 <small>Small text</small></h4>
<h5>Heading 5 <small>Small text</small></h5>
<h6>Heading 6 <small>Small text</small></h6>
Heading 1 Small text
Heading 2 Small text
Heading 3 Small text
Heading 4 Small text
Heading 5 Small text
Heading 6 Small text
Text colors
Use follwoing contextual classes to change color of your text.
<p>This is a normal paragraph without any contectual classes.</p>
<p class="txt-purple">A paragraph with .txt-purple class.</p>
<p class="txt-green">A paragraph with .txt-green class.</p>
<p class="txt-blue">A paragraph with .txt-blue class.</p>
<p class="txt-red">A paragraph with .txt-red class.</p>
<p class="txt-orange">A paragraph with .txt-orange class.</p>
<p class="txt-dark">A paragraph with .txt-dark class.</p>
<p class="txt-gray">A paragraph with .txt-gray class.</p>
<p class="txt-white bg-dark">A paragraph with .txt-white and .bg-dark class.</p>
This is a normal paragraph without any contectual classes.
A paragraph with .txt-purple class.
A paragraph with .txt-green class.
A paragraph with .txt-blue class.
A paragraph with .txt-red class.
A paragraph with .txt-orange class.
A paragraph with .txt-dark class.
A paragraph with .txt-gray class.
A paragraph with .txt-white and .bg-dark class.
Background colors
Use follwoing contextual classes to change background color of your text.
<p>This is a normal paragraph without any contectual classes.</p>
<p class="bg-purple">A paragraph with .bg-purple class.</p>
<p class="bg-green">A paragraph with .bg-green class.</p>
<p class="bg-blue">A paragraph with .bg-blue class.</p>
<p class="bg-orange">A paragraph with .bg-orange class.</p>
<p class="bg-red">A paragraph with .bg-red class.</p>
<p class="bg-dark">A paragraph with .bg-dark class.</p>
<p class="bg-dark-light">A paragraph with .bg-dark-light class.</p>
<p class="bg-dark-lighter">A paragraph with .bg-dark-lighter class.</p>
<p class="bg-dark-lightest">A paragraph with .bg-dark-lightest class.</p>
<p class="bg-gray">A paragraph with .bg-gray class.</p>
<p class="bg-gray-light">A paragraph with .bg-gray-light class.</p>
<p class="bg-gray-lighter">A paragraph with .bg-gray-lighter class.</p>
<p class="bg-gray-lightest">A paragraph with .bg-gray-lightest class.</p>
<p class="bg-white">A paragraph with .bg-white class.</p>
This is a normal paragraph without any contectual classes.
A paragraph with .bg-purple class.
A paragraph with .bg-green class.
A paragraph with .bg-blue class.
A paragraph with .bg-orange class.
A paragraph with .bg-red class.
A paragraph with .bg-dark class.
A paragraph with .bg-dark-light class.
A paragraph with .bg-dark-lighter class.
A paragraph with .bg-dark-lightest class.
A paragraph with .bg-gray class.
A paragraph with .bg-gray-light class.
A paragraph with .bg-gray-lighter class.
A paragraph with .bg-gray-lightest class.
A paragraph with .bg-white class.
Mark
Use <mark>
tag or .highlight
class to highlight a text.
<p>A sample of <mark>marked</mark> text.</p>
<p>A sample of <span class="highlight">highlighted</span> text.</p>
A sample of marked text.
A sample of highlighted text.
Small & lead
Use <small>
tag or .small
class to make a paragraph smaller, or make a paragraph stand out by adding .lead
class.
<p class="lead">A sample lead paragraph.</p>
<p>A normal paragraph.</p>
<p class="small">A sample small paragraph.</p>
A sample lead paragraph.
A normal paragraph.
A sample small paragraph.
Blockquotes
Wrap <blockquote>
around any HTML as the quote. For straight quotes, we recommend a <p>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
Naming a source
Add a <footer>
for identifying the source. Wrap the name of the source work in <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Alerts
Give a contextual message to your visitor for an action
Wrap any text and an optional dismiss button in .alert
and one of the four contextual classes (e.g., .alert-success
) for basic alert messages.
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
Dismissible alerts
Build on any alert by adding an optional .alert-dismissible
and close button.
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
Icons
Symbolizes a command, action, or information using UI icons
TheGuide has included FontAwesome and Themify Icons in its package and will update it regularly by new releases. So you're safe to use any icon from FontAwesome or Themify Icons websites.
Helper Classes
Some other helper classes in addition to Bootstrap's helper classes
Class name | Description |
---|---|
.no-padding |
Equals to padding: 0; |
.no-padding-x |
Equals to padding-left: 0; padding-right: 0; |
.no-padding-y |
Equals to padding-top: 0; padding-bottom: 0; |
.no-padding-top |
Equals to padding-top: 0; |
.no-padding-bottom |
Equals to padding-bottom: 0; |
.no-margin |
Equals to margin: 0; |
.no-margin-x |
Equals to margin-left: 0; margin-right: 0; |
.no-margin-y |
Equals to margin-top: 0; margin-bottom: 0; |
.no-margin-top |
Equals to margin-top: 0; |
.no-margin-bottom |
Equals to margin-bottom: 0; |