Sleepy Cat 404

Thank you for purchasing the 404 Sleep Cat template and the confidence you have placed in Dart Simple Solutions. In this document, you will find an in-depth description of all the template's features and functionality. If you have any questions not attended to by our template documentation, please contact us so our team can assist you. If you like our template, please leave your feedback and join us on Facebook or your other favorite social network! We are looking forward to hearing back from you, and to improving further this and many other templates in our portfolio. Online documentation is updated regularly and is available online to you free of charge on our website at http://doc.dartsimple.com

Developer website: http://www.dartsimple.com

Customer service: http://www.dartsimple.com/contact-us/

 

 

Key Features

  • Custom-Designed Animation
  • Custom-Designed Images Included
  • Based On 1170px Grid System
  • Free Google Fonts
  • Retina Ready
  • Unique Design & Super Clean Layout
  • All Files Are Well Commented
  • Easy Installation & Updates
  • Easy To Customize
  • Built with Bootstrap 3x
  • Modern Design
  • Clean Source Code
  • Coded With Care Valid HTML5 / CSS3
  • CSS3 Animation
  • Free Support and Updates
  • Fully Responsive Layout
  • W3C Valid Code

What you will Get with this Template

  • 1 Html Files
  • 7 Header Variations
  • 7 Footer Variations

About the theme

We've designed a memorable, great-looking 404 web page with spectacular animation that is sure to keep your customers excited and engaged, even when they encounter a site error. Don't lose your audience to random errors. Instead, make sure your 404 page offers a yet another great experience for your visitors with vibrant, modern and engaging design. Both the illustration and animation used in the template have been custom-designed by our team and are provided with the template. Sleep Cat 404 HTML template has everything you need to jump-start your awesome animated 404 error page

Folder Structure

Project structure was carefully thought all throughout early on in the planning stage to ensure  logical flow of all parts. Complete list of all project-related folders, files and documents can be found below.

404 Sleep Cat/
│   └── Documentation/
│   └── assets/
│   	└── core/
│   	     └── html5shiv/
│   	         └── *.js
│   	     └── respond/
│   	         └── *.js
│   	└── fonts/
│   	     └── Anton/
│   	         └── *.txt, *.tiff, *.css
│   	     └── Open_Sans/
│   	         └── *.txt, *.tiff, *.css
│   	     └── Paytone_One/
│   	         └── *.txt, *.tiff, *.css
│   	     └── Raleway/
│   	         └── *.txt, *.tiff, *.css
│   	└── frameworks/
│   	    └── bootstrap/
│   	        └── css/
│   	            └── *.css, *.map
│   	        └── fonts/
│   	            └── *.eot, *.ttf, *.svg, *.woff, *.woff2
│   	        └── js/
│   	            └── *.js
│   	└── icon-font/
│   	    └── font-awesome/
│   	        └── css/
│   	            └── *.css
│   	        └── fonts/
│   	            └── *.eot, *.ttf, *.svg, *.woff, *.woff2
│   	└── libs/
│   	    └── jquery/
│   	        └── *.js
│   	    └── snap.svg/
│   	        └── *.js
│   	└── plugins/
│   	    └── bootstrap-offcanvas/
│   	        └── css/
│   	            └── *.css
│   	        └── js/
│   	            └── *.js
│   └── css/
│   	└── *.css
│ └── custom-parts/
│   	└── *.html
│ └── images/
│   	└── *.gif, *.svg
│ └── js/
│   	└── *.js

 

Project Folders

Folder Name

Description

404 Sleep Cat

Main Folder

Assets

Contains various assets used by the template

Core

Contains various auxiliary files supporting cross-browser compatibility

Fonts

Contains fonts and their licenses

Frameworks

Contains frameworks

Icon-font

Contains icons

Libs

Contains libraries and JavaScript plugins

Plugins

Contains additional plugins

CSS

Contains CSS stylesheets

Custom-parts

Contains HTML files for additional and customizable template variations

Images

Contains template images

JS

Contains JavaScript files

 

HTML Structure

Markup Customization

The HTML structure of all our projects is split in logically organized sections that are easy to navigate. Below you will find listed each HTML section, starting from Header and ending with Footer, referencing the list of customizable settings available for each of them. In cases where additional options or settings are not provided by any given section's customization concept - HTML code and its structure is somewhat simplified. Given intuitive and logical flow of our code, you will be able to further adjust and customize it further with basic knowledge of HTML, CSS, JS.

 

The template allows for 7 different headers and footers. HTML code for each is presented below and can be used to change the look and structure of your headers and footers. Additionally, each header and footer can be set to a variety of predefined background colors by applying one of the preconfigured classes available to you. Given these two customization options, you are able to quickly tweak the code and adjust the appearance of your 404 web page. Customizable header/footer code along with the list of background color classes, are listed below for your convenience.

Header navigation – Style #1

<!-- navbar 1 start-->
	<div class="custom-navbar" id="navbar_1">
		<div class="header-line bg-light visible-xs">
			<!-- .container-->
			<div class="container">
				<div class="text-info text-uppercase small">
					<b><i class="fa fa-phone"></i> 800-160-401</b>
				</div>
			</div><!-- /.container-->
		</div>
		<nav class="navbar navbar-default">
			<!-- .container-->
			<div class="container">
				<div class="navbar-header">
					<button aria-expanded="false" class="navbar-toggle offcanvas-toggle collapsed" data-target="#navbar_collapse_1" data-toggle="offcanvas" type="button"><span class="sr-only">Toggle navigation</span><i class="fa fa-bars"></i></button>
					<ul class="nav navbar-nav navbar-right text-info text-uppercase visible-sm visible-md">
						<li>
							<a href="#"><i class="fa fa-phone"></i> <b>8 600 45 6788</b></a>
						</li>
					</ul><a class="navbar-brand text-info" href="#">Sleep Cat</a>
				</div>
				<div class="navbar-offcanvas navbar-offcanvas-touch" id="navbar_collapse_1">
					<button class="navbar-offcanvas-close offcanvas-toggle btn btn-link" data-target="#navbar_collapse_1" data-toggle="offcanvas"><span class="ico-line"></span><span class="ico-line"></span></button>
					<ul class="nav navbar-nav navbar-right text-info text-uppercase">
						<li>
							<a href="#">about us</a>
						</li>
						<li>
							<a href="#">price</a>
						</li>
						<li>
							<a href="#">testimonials</a>
						</li>
						<li>
							<a href="#">contact</a>
						</li>
						<li class="visible-lg">
							<a href="#"><i class="fa fa-phone"></i> <b>800-160-401</b></a>
						</li>
					</ul>
				</div>
			</div><!-- /.container-->
		</nav>
	</div><!-- navbar 1 end-->

 

Classes

Available Settings

Description

class="bg-light"

bg-white, bg-danger, bg-primary, bg-info, bg-warning, bg-muted, bg-gray, bg-dark, bg-darker, bg-black, bg-blue, bg-brown, bg-blue-dark, bg-green, bg-violet, bg-yellow, bg-pink

bg-*color*  – Change color to selected will change background color

Header navigation – Style #2

<div class="custom-navbar" id="navbar_2">
	<nav class="navbar navbar-default">
		<!-- .container-->
		<div class="container">
			<div class="navbar-header">
				<button aria-expanded="false" class="navbar-toggle offcanvas-toggle navbar-toggle-info collapsed" data-target="#navbar_collapse_2" data-toggle="offcanvas" type="button"><span class="sr-only">Toggle navigation</span><i class="fa fa-bars"></i></button>
				<div class="navbar-text navbar-right visible-sm visible-md">
					<a class="btn btn-success btn-indent text-uppercase" href="#"><b>register</b></a>
				</div><a class="navbar-brand text-info" href="#">Sleep Cat</a>
			</div>
			<div class="navbar-offcanvas navbar-offcanvas-touch" id="navbar_collapse_2">
				<button class="navbar-offcanvas-close offcanvas-toggle btn btn-link" data-target="#navbar_collapse_2" data-toggle="offcanvas"><span class="ico-line"></span><span class="ico-line"></span></button>
				<div class="navbar-text navbar-right visible-lg visible-xs">
					<a class="btn btn-success btn-indent text-uppercase" href="#"><b>register</b></a>
				</div>
				<ul class="nav navbar-nav navbar-right text-info">
					<li>
						<a href="#">New features</a>
					</li>
					<li>
						<a href="#">Demos</a>
					</li>
					<li>
						<a href="#">Pricing</a>
					</li>
					<li>
						<a href="#">Customers</a>
					</li>
					<li>
						<a href="#">Help center</a>
					</li>
					<li>
						<a href="#">Blog</a>
					</li>
				</ul>
			</div>
		</div><!-- /.container-->
	</nav>
</div><!-- navbar 2 end-->

 

Classes

Available Settings

Description

class="bg-light"

bg-white, bg-danger, bg-primary, bg-info, bg-warning, bg-muted, bg-gray, bg-dark, bg-darker, bg-black, bg-blue, bg-brown, bg-blue-dark, bg-green, bg-violet, bg-yellow, bg-pink

bg-*color*  – Change color to selected will change background color

  

Header navigationStyle #3

<div class="custom-navbar" id="navbar_3">
	<nav class="navbar navbar-default bg-light">
		<!-- .container-->
		<div class="container">
			<div class="navbar-header">
				<button aria-expanded="false" class="navbar-toggle offcanvas-toggle navbar-toggle-black collapsed" data-target="#navbar_collapse_3" data-toggle="offcanvas" type="button"><span class="sr-only">Toggle navigation</span><i class="fa fa-bars"></i></button>
				<div class="navbar-text navbar-right visible-sm visible-md">
					<a class="btn btn-link text-info" href="#">Sign in</a><a class="btn btn-info btn-indent" href="#">Login</a>
				</div><a class="navbar-brand text-info" href="#">Sleep Cat</a>
			</div>
			<div class="navbar-offcanvas navbar-offcanvas-touch" id="navbar_collapse_3">
				<button class="navbar-offcanvas-close offcanvas-toggle btn btn-link" data-target="#navbar_collapse_3" data-toggle="offcanvas"><span class="ico-line"></span><span class="ico-line"></span></button>
				<div class="navbar-text navbar-right visible-lg visible-xs">
					<a class="btn btn-link text-info" href="#">Sign in</a><a class="btn btn-info btn-indent" href="#">Login</a>
				</div>
				<ul class="nav navbar-nav navbar-right">
					<li>
						<a href="#">Technology</a>
					</li>
					<li class="dropdown">
						<a data-toggle="dropdown" href="#">Pricing <span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li>
								<a href="#">Pricing 1</a>
							</li>
							<li>
								<a href="#">Pricing 2</a>
							</li>
							<li>
								<a href="#">Pricing 3</a>
							</li>
							<li>
								<a href="#">Pricing 4</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Products</a>
					</li>
				</ul>
			</div>
		</div><!-- /.container-->
	</nav>
</div><!-- navbar 3 end-->

 

Classes

Available Settings

Description

class="bg-light"

bg-white, bg-danger, bg-primary, bg-info, bg-warning, bg-muted, bg-gray, bg-dark, bg-darker, bg-black, bg-blue, bg-brown, bg-blue-dark, bg-green, bg-violet, bg-yellow, bg-pink

bg-*color*  – Change color to selected will change background color

 

Header navigationStyle #4

<div class="custom-navbar" id="navbar_4">
	<nav class="navbar navbar-default">
		<!-- .container-->
		<div class="container">
			<div class="navbar-header">
				<button aria-expanded="false" class="navbar-toggle offcanvas-toggle navbar-toggle-black collapsed" data-target="#navbar_collapse_4" data-toggle="offcanvas" type="button"><span class="sr-only">Toggle navigation</span><i class="fa fa-bars"></i></button>
				<ul class="nav navbar-nav navbar-right text-uppercase hidden-lg">
					<li class="visible-xs">
						<a class="text-success" href="#"><i class="fa fa-2x fa-comments"></i></a>
					</li>
					<li class="hidden-xs">
						<a class="text-success" href="#"><i class="fa fa-comments fa-2x"></i> <b>Chat now</b></a>
					</li>
				</ul><a class="navbar-brand text-info" href="#">Sleep Cat</a>
			</div>
			<div class="navbar-offcanvas navbar-offcanvas-touch" id="navbar_collapse_4">
				<button class="navbar-offcanvas-close offcanvas-toggle btn btn-link" data-target="#navbar_collapse_4" data-toggle="offcanvas"><span class="ico-line"></span><span class="ico-line"></span></button>
				<div class="navbar-text visible-lg navbar-right">
					<a class="btn btn-link text-uppercase text-success" href="#"><i class="fa fa-comments fa-2x"></i> <b>Chat now</b></a>
				</div>
				<ul class="nav navbar-nav navbar-right navbar-dots text-uppercase">
					<li>
						<a href="#"><b>HOME</b></a>
					</li>
					<li>
						<a href="#"><b>ABOUT</b></a>
					</li>
					<li>
						<a href="#"><b>SERVICES</b></a>
					</li>
					<li>
						<a href="#"><b>BLOG</b></a>
					</li>
					<li>
						<a href="#"><b>GALLERY</b></a>
					</li>
					<li>
						<a href="#"><b>Contact Us</b></a>
					</li>
					<li>
						<a href="#"><b>register</b></a>
					</li>
				</ul>
			</div>
		</div><!-- /.container-->
	</nav>
</div><!-- navbar 4 end-->

 

Classes

Available Settings

Description

class="bg-light"

bg-white, bg-danger, bg-primary, bg-info, bg-warning, bg-muted, bg-gray, bg-dark, bg-darker, bg-black, bg-blue, bg-brown, bg-blue-dark, bg-green, bg-violet, bg-yellow, bg-pink

bg-*color*  – Change color to selected will change background color

 

Header navigationStyle #5

<div class="custom-navbar" id="navbar_5">
	<div class="header-line bg-light">
		<!-- .container-->
		<div class="container">
			<!-- .row-->
			<div class="row">
				<div class="col-md-4 col-xs-4">
					<ul class="list-unstyled list-inline text-muted small">
						<li>
							<a class="fa fa-facebook" href="#"></a>
						</li>
						<li>
							<a class="fa fa-twitter" href="#"></a>
						</li>
						<li>
							<a class="fa fa-linkedin" href="#"></a>
						</li>
					</ul>
				</div>
				<div class="col-md-4 hidden-xs hidden-sm">
					<div class="text-center text-muted small">
						<i class="fa fa-map-marker"></i> 123 Main Street<br>
						Sydney, NSW 2000 Australia
					</div>
				</div>
				<div class="col-md-4 col-xs-8">
					<div class="text-right text-muted text-uppercase small">
						<b><i class="fa fa-phone"></i> 800-160-401 <a class="text-info hidden-xs header-line-call" href="#">CALL NOW</a></b>
					</div>
				</div>
			</div><!-- /.row-->
		</div><!-- /.container-->
	</div>
	<nav class="navbar navbar-default navbar-sm">
		<!-- .container-->
		<div class="container">
			<div class="navbar-header">
				<button aria-expanded="false" class="navbar-toggle offcanvas-toggle navbar-toggle-black collapsed" data-target="#navbar_collapse_5" data-toggle="offcanvas" type="button"><span class="sr-only">Toggle navigation</span><i class="fa fa-bars"></i></button> <a class="navbar-brand text-info" href="#">Sleep Cat</a>
			</div>
			<div class="navbar-offcanvas navbar-offcanvas-touch" id="navbar_collapse_5">
				<button class="navbar-offcanvas-close offcanvas-toggle btn btn-link" data-target="#navbar_collapse_5" data-toggle="offcanvas"><span class="ico-line"></span><span class="ico-line"></span></button>
				<ul class="nav navbar-nav navbar-indent navbar-right text-uppercase">
					<li>
						<a href="#"><b>Home</b></a>
					</li>
					<li>
						<a href="#"><b>About</b></a>
					</li>
					<li>
						<a href="#"><b>News</b></a>
					</li>
					<li>
						<a href="#"><b>Blog</b></a>
					</li>
					<li>
						<a href="#"><b>Contact Us</b></a>
					</li>
				</ul>
			</div>
		</div><!-- /.container-->
	</nav>
</div><!-- navbar 5 end-->

 

Classes

Available Settings

Description

class="bg-light"

bg-white, bg-danger, bg-primary, bg-info, bg-warning, bg-muted, bg-gray, bg-dark, bg-darker, bg-black, bg-blue, bg-brown, bg-blue-dark, bg-green, bg-violet, bg-yellow, bg-pink

bg-*color*  – Change color to selected will change background color

 

Header navigationStyle #6

<div class="custom-navbar" id="navbar_6">
	<nav class="navbar navbar-default">
		<!-- .container-->
		<div class="container">
			<div class="navbar-header">
				<button aria-expanded="false" class="navbar-toggle offcanvas-toggle navbar-toggle-black collapsed" data-target="#navbar_collapse_6" data-toggle="offcanvas" type="button"><span class="sr-only">Toggle navigation</span><i class="fa fa-bars"></i></button>
				<div class="navbar-text navbar-right visible-sm visible-md">
					<a class="btn btn-link text-info" href="#">Sign in</a><a class="btn btn-info" href="#"><b>TRY IT FOR FREE</b></a>
				</div><a class="navbar-brand text-info" href="#">Sleep Cat</a>
			</div>
			<div class="navbar-offcanvas navbar-offcanvas-touch" id="navbar_collapse_6">
				<button class="navbar-offcanvas-close offcanvas-toggle btn btn-link" data-target="#navbar_collapse_6" data-toggle="offcanvas"><span class="ico-line"></span><span class="ico-line"></span></button>
				<ul class="nav navbar-nav">
					<li>
						<a href="#">New features</a>
					</li>
					<li>
						<a href="#">Demos</a>
					</li>
					<li>
						<a href="#">Pricing</a>
					</li>
					<li>
						<a href="#">Customers</a>
					</li>
					<li>
						<a href="#">Help center</a>
					</li>
					<li>
						<a href="#">Blog</a>
					</li>
				</ul>
				<div class="navbar-text navbar-right visible-xs visible-lg">
					<a class="btn btn-link text-info" href="#">Sign in</a><a class="btn btn-info" href="#"><b>TRY IT FOR FREE</b></a>
				</div>
			</div>
		</div><!-- /.container-->
	</nav>
</div><!-- navbar 6 end-->

 

Classes

Available Settings

Description

class="bg-light"

bg-white, bg-danger, bg-primary, bg-info, bg-warning, bg-muted, bg-gray, bg-dark, bg-darker, bg-black, bg-blue, bg-brown, bg-blue-dark, bg-green, bg-violet, bg-yellow, bg-pink

bg-*color*  – Change color to selected will change background color

 

 

Header navigationStyle #7

<header class="wrap-header">
	<!-- navbar 1 start-->
	<div class="custom-navbar" id="navbar_1">
		<div class="header-line bg-light visible-xs">
			<!-- .container-->
			<div class="container">
				<div class="text-info text-uppercase small">
					<b><i class="fa fa-phone"></i> 800-160-401</b>
				</div>
			</div><!-- /.container-->
		</div>
		<nav class="navbar navbar-default">
			<!-- .container-->
			<div class="container">
				<div class="navbar-header">
					<button aria-expanded="false" class="navbar-toggle offcanvas-toggle collapsed" data-target="#navbar_collapse_1" data-toggle="offcanvas" type="button"><span class="sr-only">Toggle navigation</span><i class="fa fa-bars"></i></button>
					<ul class="nav navbar-nav navbar-right text-info text-uppercase visible-sm visible-md">
						<li>
							<a href="#"><i class="fa fa-phone"></i> <b>8 600 45 6788</b></a>
						</li>
					</ul><a class="navbar-brand text-info" href="#">Sleep Cat</a>
				</div>
				<div class="navbar-offcanvas navbar-offcanvas-touch" id="navbar_collapse_1">
					<button class="navbar-offcanvas-close offcanvas-toggle btn btn-link" data-target="#navbar_collapse_1" data-toggle="offcanvas"><span class="ico-line"></span><span class="ico-line"></span></button>
					<ul class="nav navbar-nav navbar-right text-info text-uppercase">
						<li>
							<a href="#">about us</a>
						</li>
						<li>
							<a href="#">price</a>
						</li>
						<li>
							<a href="#">testimonials</a>
						</li>
						<li>
							<a href="#">contact</a>
						</li>
						<li class="visible-lg">
							<a href="#"><i class="fa fa-phone"></i> <b>800-160-401</b></a>
						</li>
					</ul>
				</div>
			</div><!-- /.container-->
		</nav>
	</div><!-- navbar 1 end-->
</header><!-- main header end-->

 

Classes

Available Settings

Description

class="bg-light"

bg-white, bg-danger, bg-primary, bg-info, bg-warning, bg-muted, bg-gray, bg-dark, bg-darker, bg-black, bg-blue, bg-brown, bg-blue-dark, bg-green, bg-violet, bg-yellow, bg-pink

bg-*color*  – Change color to selected will change background color

 

Footer navigationStyle #1

<div class="custom-footer" id="footer_1">
	<!-- .container-->
	<div class="container">
		<hr>
		<div class="pre-footer">
			<div class="row">
				<div class="col-md-3 col-sm-4">
					<p><b>Dropbox</b></p>
					<ul class="list-unstyled text-dark small">
						<li>
							<a href="#">Install</a>
						</li>
						<li>
							<a href="#">Pricing</a>
						</li>
						<li>
							<a href="#">Business</a>
						</li>
						<li>
							<a href="#">Jobs</a>
						</li>
					</ul>
				</div>
				<div class="col-md-3 col-sm-4">
					<p><b>Connect</b></p>
					<ul class="list-unstyled text-dark small">
						<li>
							<a href="#">Twitter</a>
						</li>
						<li>
							<a href="#">Facebook</a>
						</li>
						<li>
							<a href="#">Google+</a>
						</li>
						<li>
							<a href="#">Youtube</a>
						</li>
					</ul>
				</div>
				<div class="col-md-3 col-sm-4">
					<p><b>Support</b></p>
					<ul class="list-unstyled text-dark small">
						<li>
							<a href="#">Help Center</a>
						</li>
						<li>
							<a href="#">Get Started</a>
						</li>
						<li>
							<a href="#">Contact Us</a>
						</li>
						<li>
							<a href="#">Privacy &amp; Terms</a>
						</li>
					</ul>
				</div>
				<div class="col-md-3 col-sm-12">
					<p class="small">Please note: Sometimes we blog about upcoming products or features before they're released. The decision to purchase our services should be made based on features that are currently available.</p>
				</div>
			</div>
		</div>
	</div><!-- /.container-->
</div><!-- footer 1 end-->

 

Classes

Available Settings

Description

class="text-light"

text-white, text-danger, text-primary, text-info, text-warning, text-muted, text-gray, text-dark, text-darker, text-black, text-blue, text-brown, text-blue-dark, text-green, text-violet, text-yellow, text-pink

text-*color*  – Change color to selected will change text colot

 

Footer navigationStyle #2

<div class="custom-footer" id="footer_2">
	<hr>
	<div class="pre-footer">
		<!-- .container-->
		<div class="container">
			<div class="row">
				<div class="col-sm-3">
					<ul class="list-unstyled list-inline text-dark text-lg">
						<li>
							<a class="fa fa-facebook" href="#"></a>
						</li>
						<li>
							<a class="fa fa-twitter" href="#"></a>
						</li>
						<li>
							<a class="fa fa-linkedin" href="#"></a>
						</li>
					</ul>
					<p class="smaller">Sleep Cat &copy; 2017</p>
				</div>
				<div class="col-sm-3">
					<p class="text-uppercase"><b>PRODUCT</b></p>
					<ul class="list-unstyled text-dark small">
						<li>
							<a href="#">Install</a>
						</li>
						<li>
							<a href="#">Pricing</a>
						</li>
						<li>
							<a href="#">Business</a>
						</li>
						<li>
							<a href="#">Jobs</a>
						</li>
					</ul>
				</div>
				<div class="col-sm-3">
					<p class="text-uppercase"><b>LINK</b></p>
					<ul class="list-unstyled text-dark small">
						<li>
							<a href="#">Blog</a>
						</li>
						<li>
							<a href="#">About us</a>
						</li>
						<li>
							<a href="#">Privacy</a>
						</li>
						<li>
							<a href="#">Term and Condition</a>
						</li>
					</ul>
				</div>
				<div class="col-sm-3">
					<p><b>Newsletter</b></p>
					<p class="smaller">Sign up for latest news & offers.</p>
					<div class="row">
						<div class="col-xs-8 col-xs-offset-2 col-sm-12 col-sm-offset-0">
							<div class="form-group">
								<input class="form-control form-line input-sm" placeholder="Enter Your Email" type="email">
							</div><button class="btn btn-block text-center btn-dark"><i class="fa fa-envelope-o"></i></button>
						</div>
					</div>
				</div>
			</div>
		</div><!-- /.container-->
	</div>
</div><!-- footer 2 end-->

 

Classes

Available Settings

Description

class="text-light"

text-white, text-danger, text-primary, text-info, text-warning, text-muted, text-gray, text-dark, text-darker, text-black, text-blue, text-brown, text-blue-dark, text-green, text-violet, text-yellow, text-pink

text-*color*  – Change color to selected will change text colot

 

Footer navigationStyle #3

<div class="custom-footer" id="footer_3">
	<div class="pre-footer pre-footer-indent bg-black text-light">
		<!-- .container-->
		<div class="container">
			<div class="row">
				<div class="col-md-4">
					<h3 class="pre-footer-heading text-center text-info">Sleep Cat</h3>
					<div class="text-center">
						<ul class="list-unstyled text-light small list-inline">
							<li>
								<a href="#">Home</a>
							</li>
							<li>
								<a href="#">Terms</a>
							</li>
							<li>
								<a href="#">FAQ</a>
							</li>
							<li>
								<a href="#">About us</a>
							</li>
						</ul>
					</div>
					<p class="small text-center">Sleep Cat &copy; 2017</p>
				</div>
				<div class="col-md-4">
					<p class="pre-footer-heading text-uppercase text-center"><i class="fa fa-map-marker fa-2x"></i></p>
					<p class="small text-center">123 Main Street<br>
					Sydney, NSW 2000 Australia</p>
				</div>
				<div class="col-md-4">
					<p class="pre-footer-heading text-uppercase text-center"><b>CONTACT US</b></p>
					<p class="small text-center">Business Phone: 800 160 401<br>
					Monday to Friday 9:00 to 16:00</p>
				</div>
			</div>
		</div><!-- /.container-->
	</div>
</div><!-- footer 3 end-->

 

Classes

Available Settings

Description

class="text-light"

text-white, text-danger, text-primary, text-info, text-warning, text-muted, text-gray, text-dark, text-darker, text-black, text-blue, text-brown, text-blue-dark, text-green, text-violet, text-yellow, text-pink

text-*color*  – Change color to selected will change text colot

 

Footer navigationStyle #4

<div class="custom-footer" id="footer_4">
	<div class="pre-footer pre-footer- bg-blue-dark text-white">
		<!-- .container-->
		<div class="container">
			<div class="row">
				<div class="col-md-4 col-sm-6">
					<p class="text-uppercase text-xs-left"><b>Newsletter</b></p>
					<p class="small hidden-xs">Keep up with our always upcoming product features and technologies. Enter your e-mail and subscribe to our newsletter.</p>
					<div class="form-group">
						<div class="input-group input-group-lg">
							<input class="form-control form-control-light" placeholder="Enter Your Email" type="email">
							<div class="input-group-btn">
								<button class="btn btn-faded"><i class="fa fa-envelope-o"></i></button>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-4 col-md-push-2 col-sm-6">
					<p class="text-uppercase text-xs-left"><b>LATEST NEWS</b></p>
					<ul class="list-unstyled text-white small text-xs-left">
						<li>
							<a href="#">→ Canadian Police Apologize For Threatening Drunk Drivers With Nickelback</a>
						</li>
						<li>
							<a href="#">→ Woman Calls Cops On Man Who Won't Stop Whistling 'Closing Time'</a>
						</li>
						<li>
							<a href="#">→ Tricks to ensure your high heels never hurt you again</a>
						</li>
					</ul>
				</div>
				<div class="col-md-2 col-md-pull-4 col-sm-6">
					<p class="text-uppercase text-xs-left"><b>USEFUL LINKS</b></p>
					<ul class="list-unstyled text-white small list-inline-sm text-xs-left">
						<li>
							<a href="#">About Us</a>
						</li>
						<li>
							<a href="#">Contact Us</a>
						</li>
						<li>
							<a href="#">Services</a>
						</li>
						<li>
							<a href="#">Pricing</a>
						</li>
						<li>
							<a href="#">Clients</a>
						</li>
					</ul>
				</div>
				<div class="col-md-2 col-sm-6">
					<ul class="list-unstyled list-inline list-round-white text-blue-dark text-lg text-xs-left">
						<li>
							<a class="fa fa-facebook" href="#"></a>
						</li>
						<li>
							<a class="fa fa-twitter" href="#"></a>
						</li>
						<li>
							<a class="fa fa-linkedin" href="#"></a>
						</li>
					</ul>
				</div>
			</div>
		</div><!-- /.container-->
	</div>
</div><!-- footer 4 end-->

 

Classes

Available Settings

Description

class="text-light"

text-white, text-danger, text-primary, text-info, text-warning, text-muted, text-gray, text-dark, text-darker, text-black, text-blue, text-brown, text-blue-dark, text-green, text-violet, text-yellow, text-pink

text-*color*  – Change color to selected will change text colot

 

Footer navigationStyle #5

<div class="custom-footer" id="footer_5">
	<hr>
	<div class="pre-footer">
		<!-- .container-->
		<div class="container">
			<div class="row">
				<div class="col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
					<div class="input-group input-group-lg input-group-line">
						<input class="form-control form-none text-uppercase" placeholder="Sign up for our newsletter" type="email">
						<div class="input-group-btn">
							<button class="btn btn-none"><i class="fa fa-arrow-right"></i></button>
						</div>
					</div>
				</div>
			</div>
		</div><!-- /.container-->
	</div>
	<nav class="navbar navbar-default navbar-sm">
		<!-- .container-->
		<div class="container">
			<div class="text-center">
				<ul class="nav navbar-nav navbar-indent text-uppercase text-dark">
					<li>
						<a href="#"><b>HOME</b></a>
					</li>
					<li>
						<a href="#"><b>ABOUT</b></a>
					</li>
					<li>
						<a href="#"><b>SERVICES</b></a>
					</li>
					<li>
						<a href="#"><b>BLOG</b></a>
					</li>
					<li>
						<a href="#"><b>GALLERY</b></a>
					</li>
					<li>
						<a href="#"><b>Contact Us</b></a>
					</li>
					<li>
						<a href="#"><b>register</b></a>
					</li>
				</ul>
			</div>
		</div><!-- /.container-->
	</nav>
	<div class="main-footer text-center bg-white">
		<p class="text-muted small">Sleep Cat &copy; 2017 All Rights Reserved</p>
		<ul class="list-unstyled list-inline list-indent text-dark">
			<li>
				<a class="fa fa-facebook" href="#"></a>
			</li>
			<li>
				<a class="fa fa-twitter" href="#"></a>
			</li>
			<li>
				<a class="fa fa-linkedin" href="#"></a>
			</li>
			<li>
				<a class="fa fa-instagram" href="#"></a>
			</li>
			<li>
				<a class="fa fa-dribbble" href="#"></a>
			</li>
		</ul>
	</div>
</div><!-- footer 5 end-->

 

Classes

Available Settings

Description

class="text-light"

text-white, text-danger, text-primary, text-info, text-warning, text-muted, text-gray, text-dark, text-darker, text-black, text-blue, text-brown, text-blue-dark, text-green, text-violet, text-yellow, text-pink

text-*color*  – Change color to selected will change text colot

 

Footer navigationStyle #6

<div class="custom-footer" id="footer_6">
	<hr>
	<div class="main-footer text-center bg-white">
		<p class="text-muted text-lg">Sleep Cat &copy; 2017 All Rights Reserved</p>
		<ul class="list-unstyled list-inline text-dark text-xl">
			<li>
				<a class="fa fa-facebook" href="#"></a>
			</li>
			<li>
				<a class="fa fa-twitter" href="#"></a>
			</li>
			<li>
				<a class="fa fa-linkedin" href="#"></a>
			</li>
			<li>
				<a class="fa fa-instagram" href="#"></a>
			</li>
			<li>
				<a class="fa fa-dribbble" href="#"></a>
			</li>
		</ul>
	</div>
</div><!-- footer 6 end-->

 

Classes

Available Settings

Description

class="text-light"

text-white, text-danger, text-primary, text-info, text-warning, text-muted, text-gray, text-dark, text-darker, text-black, text-blue, text-brown, text-blue-dark, text-green, text-violet, text-yellow, text-pink

text-*color*  – Change color to selected will change text colot

 

Footer navigationStyle #7

<div class="custom-footer" id="footer_7">
	<div class="pre-footer pre-footer-indent bg-darker text-white">
		<!-- .container-->
		<div class="container">
			<div class="row">
				<div class="col-md-2 col-sm-3">
					<p class="text-xs-left pre-footer-col-title small"><b>LEARN MORE</b></p>
					<ul class="list-unstyled text-light list-indent text-xs-left small">
						<li>
							<a href="#">New features</a>
						</li>
						<li>
							<a href="#">Demos</a>
						</li>
						<li>
							<a href="#">Plans and pricing</a>
						</li>
						<li>
							<a href="#">Online webinars</a>
						</li>
						<li>
							<a href="#">Customers</a>
						</li>
					</ul>
				</div>
				<div class="col-md-2 col-sm-3">
					<p class="text-xs-left pre-footer-col-title small"><b>RESOURCES</b></p>
					<ul class="list-unstyled text-light list-indent text-xs-left small">
						<li>
							<a href="#">Help center</a>
						</li>
						<li>
							<a href="#">User guide</a>
						</li>
						<li>
							<a href="#">Video tutorials</a>
						</li>
						<li>
							<a href="#">Release notes</a>
						</li>
						<li>
							<a href="#">Freebies</a>
						</li>
					</ul>
				</div>
				<div class="col-md-2 col-sm-3">
					<p class="text-xs-left pre-footer-col-title small"><b>COMPANY</b></p>
					<ul class="list-unstyled text-light list-indent text-xs-left small">
						<li>
							<a href="#">About us</a>
						</li>
						<li>
							<a href="#">Jobs</a>
						</li>
						<li>
							<a href="#">Terms of service</a>
						</li>
						<li>
							<a href="#">Privacy policy</a>
						</li>
						<li>
							<a href="#">Contact us</a>
						</li>
					</ul>
				</div>
				<div class="col-md-2 col-sm-3">
					<p class="text-xs-left pre-footer-col-title small"><b>COMPANY</b></p>
					<ul class="list-unstyled text-light list-indent text-xs-left small">
						<li>
							<a href="#">About us</a>
						</li>
						<li>
							<a href="#">Jobs</a>
						</li>
						<li>
							<a href="#">Terms of service</a>
						</li>
						<li>
							<a href="#">Privacy policy</a>
						</li>
						<li>
							<a href="#">Contact us</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-3 col-lg-offset-1 col-md-4 col-sm-12">
					<div class="row">
						<div class="col-md-12 col-sm-6">
							<div class="row">
								<div class="col-xs-6">
									<p class="text-xs-left m-b-md"><a class="btn btn-info btn-indent" href="#">Login</a></p>
								</div>
								<div class="col-xs-6">
									<p class="text-xs-left form-control-static"><a class="text-muted" href="#">(Need Help?)</a></p>
								</div>
							</div>
						</div>
						<div class="col-md-12 col-sm-6">
							<div class="dropdown text-xs-left">
								<button aria-expanded="true" aria-haspopup="true" class="btn btn-dark dropdown-toggle" data-toggle="dropdown" type="button"><img alt="flag" src="images/flag.gif"> EN <span class="caret"></span></button>
								<ul class="dropdown-menu">
									<li>
										<a href="#"><img alt="flag" src="images/flag.gif"> EN 1</a>
									</li>
									<li>
										<a href="#"><img alt="flag" src="images/flag.gif"> EN 2</a>
									</li>
									<li>
										<a href="#"><img alt="flag" src="images/flag.gif"> EN 3</a>
									</li>
									<li>
										<a href="#"><img alt="flag" src="images/flag.gif"> EN 4</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div><!-- /.container-->
	</div>
	<nav class="navbar navbar-inverse navbar-footer bg-info">
		<!-- .container-->
		<div class="container">
			<div class="navbar-text small">
				<a href="#">Terms & Conditions</a> | <a href="#">Privacy Policy</a>
			</div>
			<div class="navbar-text navbar-right small">
				All Rights Reserved &copy; 2017
			</div>
		</div><!-- /.container-->
	</nav>
</div><!-- footer 7 end-->

 

Classes

Available Settings

Description

class="text-light"

text-white, text-danger, text-primary, text-info, text-warning, text-muted, text-gray, text-dark, text-darker, text-black, text-blue, text-brown, text-blue-dark, text-green, text-violet, text-yellow, text-pink

text-*color*  – Change color to selected will change text colot

 

Metatags

In each page’s head section you will see a comprehensive list of meta tags that may come in handy down the road in helping Google crawlers make sense of your web-pages, thus improving your pages' relevance and consequently helping your website rank better in search results. Please uncomment those meta tags that you deem relevant and applicable to your website.

<!-- Personal Meta tags-->
<meta charset="UTF-8">
<meta name="Sleep Cat - Premium template by Dart Simple" content="">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0">
<!-- Meta descriptions-->
<meta name="keywords" content="Sleep Cat, 404, premium template, ds template, Dart Simple">
<meta name="description" content="Sleep Cat - Premium template by Dart Simple">
<!--<meta http-equiv="pragma" content="no-cache">-->


<!-- Url of your website (without extra pages)-->
<link rel="canonical" href="http://yoursite.com/">
<!-- Restrict google from scanning info from Dmoz or YahooDir-->
<meta name="robots" content="noodp,noydir">
<!-- Author markup-->
<meta name="author" content="Dart Simple - Premium HTML template">
<meta name="copyright" content="Dart Simple">
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
<link rel="icon" type="image/png" 
href="./favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="./manifest.json">
<meta name="theme-color" content="#ffffff">

 

Internet Explorer Compatibility

Sleep Cat 404 theme is fully responsive and looks fantastic in all modern browsers, on tablets and mobile devices. Our projects are designed to accommodate large audiences with varied preferences, so we adapt every template to ensure correct display even in older browser versions, such as IE8 and others. To ensure proper display of your website in older browsers, please check that the below snippet of code to facilitate compatibility with legacy versions of Internet Explorer. Sleep Cat's legacy support includes IE9 and IE10.

<!--[if IE]>
  <meta http-equiv='X-UA-Compatible' content=‘IE=edge,chrome=1'>
<![endif]-->

<!-- Used to fix visual bugs in older IE browsers to help them make their life easier. -->

<!-- This is making bootstrap working on IE browsers that doesn’t support it. -->

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if gte IE 6]>
  <script src="assets/plugins/html5shiv.js"></script>
  <script src="assets/plugins/respond.min.js"></script>
  <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

 

Grid Markup

To ensure our templates are 100% responsive, we use Bootstrap grid and framework (http://getbootstrap.com/css/).

 

Typography classes

We pay special attention to typography. In our opinion, it is one of the key qualities of an effective template. Sleep Cat 404 theme comes with a set of typography elements, which we cover below.

 

Classes

Description

 

.btn-primary

button filled with main accent color of the theme

 

.btn-success

button filled with success accent color of the theme

 

.btn-default

button filled with default accent color of the theme

 

.btn-info

button filled with aqua-green color

 

.btn-warning

button filled with orange color

 

.btn-danger

button filled with dark-red color

 

.btn-violet

button filled with violet color

.btn-dark

button filled with dark-grey color

.btn-faded

button filled with dark color

.btn-none

button filled with transparent background

 

CSS Structure

Our projects maintain extended file structure with intuitive hierarchy of CSS documents and Sleep Cat is no exception to this rule. Full list of stylesheet files is available below for your review.

 

File Name

Description

font-awesome.min.css

The iconic font.

bootstrap.min.css

Bootstrap framework with helper styles

bootstrap.offcanvas.min.css

Super simple, easy to use off-canvas navigation menu for Bootstrap.

bootstrap-custom.min.css

Custom Bootstrap styles

custom.css

Ready to edit CSS file. Type there your css styles

 

CSS Customization

You are often able to further customize the template by enabling or disabling template's stylesheets as necessary. You can do so by commenting out the code or deleting relevant lines altogether. List of stylesheets available in the template follows below:

<!-- Bootstrap 3 styles-->
  <link type="text/css" href="./assets/frameworks/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font awesome styles-->
  <link type="text/css" href="./assets/icon-font/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <!-- Bootstrap offcanvas styles-->
  <link type="text/css" href="./assets/plugins/bootstrap-offcanvas/css/bootstrap.offcanvas.min.css" rel="stylesheet">
  <!-- Bootstrap custom styles-->
  <link type="text/css" href="./css/bootstrap-custom.min.css" rel="stylesheet">
  <!-- Custom styles-->
  <link type="text/css" href="./css/custom.css" rel="stylesheet">

 

Stylesheet Structure

For large CSS documents we use a library with specific titles and subtitles designed for each specific section and subsection to simplify your searches throughout the code. To find any specific part of the code, please do a search for any of the titles and subtitles, which are listed below in-full for your convenience.

 

/* Table of Content
==================================================
 

// Reference
1. Reference

// Basic theme styles
2. Reset
3. Fonts
4. Indents
5. Options

// Bootstrap Core variables and mixins
6. Variables
7. Mixins

// Bootstrap Core CSS
8. Scaffolding
9. Type
10. Buttons
11. Forms
12. Input-groups
13. Dropdown

// Bootstrap Components
14. Navbar

// Custom components
15. Main
16. Pages

17. Offcanvas

 

JavaScript Structure

When designing a theme or a template, we rely both on our own code, as well as on open-source plugins developed by third-parties. In this section, you will find detailed information on relevant plugins and their functions.

 

Plugins are initialized and can be edited in the lower part of the code in each HTML file as follows: 

<!-- scripts start-->
<!--[if lt IE 9]>
    <script defer src="./assets/core/html5shiv/html5shiv.min.js"></script>
    <script defer src="./assets/core/respond/respond.min.js"></script>
    <![endif]-->
<!-- Jquery 1.12.4-->
<script defer src="./assets/libs/jquery/jquery-1.12.4.min.js"></script>
<!-- Bootstrap-->
<script defer src="./assets/frameworks/bootstrap/js/bootstrap.min.js"></script>
<!-- Bootstrap offcanvas-->
<script defer src="./assets/plugins/bootstrapoffcanvas/js/bootstrap.offcanvas.min.js"></script>
<!-- Snap svg-->
<script defer src="./assets/libs/snap.svg/snap.svg-min.js"></script>
<!-- DS Scripts-->
<script defer src="./js/ds-scripts.min.js"></script>
<!-- Custom-->
<script defer src="./js/ds-custom.js"></script>

 

JavaScript folder structure and contents:

Js/
├── ds-scripts.js
 assets/
│   └── libs/
│       └── jquery/
│           └── jquery-1.12.4.min.js
│       └── snap.svg/
│           └── snap.svg-min.js
│   └── plugins/
│       └── bootstrap-offcanvas/
│           └── js/
│               └── bootstrap.offcanvas.min.js

 

Testing Locally

Please note that Webkit used by Google Chrome and Safari do not support Ajax loading of local files, which means that animation used in the template will only function properly when loaded online. Alternatively, you can check the animation locally in Firefox browser. Please upload the template to your server to check the template in Chrome and Safari. We've added a quick reminder to the code to let you know about Chrome and Safari limitations in the file ds-scripts, line 18:

if ( /webkit/.test(navigator.userAgent.toLowerCase()) && window.location.protocol == 'file:' ) {
  alert( "We are sorry, Google Chrome and Safari currently does not support local loading of SVG files. Animation works perfectly in Chrome and Safari (webkit) when loaded online. To check animation locally, please try Firefox." );
 
 $('.svg-wrap').text("We are sorry, Google Chrome and Safari currently does not support local loading of SVG files. Animation works perfectly in Chrome and Safari (webkit) when loaded online. To check animation locally, please try Firefox.");

 

Credits

Frameworks used

Twitter Bootstrap v3.3.7

http://getbootstrap.com/

jQuery v1.12.0

http://jquery.com/

 

JavaScript Plugins and Credits

Bootstrap Offcanvas

Used for Navigation

https://github.com/iamphill/Bootstrap-Offcanvas

Snap.svg

Used to animate svg sprites

http://snapsvg.io/

 

JavaScript

CSS