Demonica is the ultimate web design luxury. Clean, flexible, completely responsive and creative, it delivers the perfect user experience. Not only does it look amazing, but it also gets free lifetime updates with features requested by the users. Demonica has with a great documentation, helping you to develop the perfect website.
First of all, let's see the HTML markup of the default page of Demonica. We will go through the main elements of the page: the head and the body.
HTML Structure<!DOCTYPE html>
<html>
<head>
<!-- SEO Meta Tags - Customize for your needs -->
<title>Demonica - Responsive Multi-Purpose Theme</title>
<meta name="description" content="Your description here.">
<meta name="author" content="Alex Grozav">
<meta name="keywords" content="your, keywords, here">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="css"/>
</head>
<body>
<div class="navbar navbar-fixed-top navbar-lg" id="navbar" role="navigation"></div>
<section class="header"></section>
<section class="content-block"></section>
<footer class="footer"></footer>
<script src="script"></script>
</body>
</html>That's the basic structure of a page. We're going to analyse each of the UI elements in the following sections of the documentation.
Inside the <head> tag we have our SEO tags and the CSS Links
of our page. As you can see, we have Bootstrap Core, Demonica Core and Page Level CSS.
The core files are required, while the page level CSS files belong to optional plugins.
<head>
<!-- SEO Meta Tags - Customize for your needs -->
<title>Demonica - Responsive Multi-Purpose Theme</title>
<meta name="description" content="Your description here.">
<meta name="author" content="Alex Grozav">
<meta name="keywords" content="your, keywords, here">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Bootstrap core CSS - Include with every page -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<!-- Page Level CSS - Include Optional -->
<link href="css/plugins/magnific-popup/mfp.css" rel="stylesheet">
<link href="css/plugins/owl-carousel/owl-carousel.css" rel="stylesheet">
<link href="css/plugins/owl-carousel/owl-theme.css" rel="stylesheet">
<!-- Demonica core CSS - Include with every page -->
<link href="css/style.css" rel="stylesheet">
<!-- Page level CSS - Blank -->
</head>
Inside the <body> tag we have the plugin scripts we use in Demonica.
We include them at the end of the page in order to improve page load speed (HTML loads first).
<!-- Core Scripts - Include with every page -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/plugins/viewport/viewport.js" type="text/javascript"></script>
<!-- Page Level Scripts - Include with every page -->
<script src="js/plugins/magnific-popup/mfp.js" type="text/javascript"></script>
<script src="js/plugins/imagesloaded/imagesloaded.js" type="text/javascript"></script>
<script src="js/plugins/isotope/isotope.js" type="text/javascript"></script>
<script src="js/plugins/videobg/videobg.js" type="text/javascript"></script>
<script src="js/plugins/parallax/parallax.js" type="text/javascript"></script>
<script src="js/plugins/history/history.js" type="text/javascript"></script>
<script src="js/plugins/owl-carousel/owl-carousel.js" type="text/javascript"></script>
<script src="js/plugins/owl-carousel/demo-index.js" type="text/javascript"></script>
<script src="js/plugins/fitvids/fitvids.js" type="text/javascript"></script>
<script src="js/plugins/detectmobile/detectmobile.js" type="text/javascript"></script>
<!-- Google Maps Scripts - Include optional -->
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false" type="text/javascript" ></script>
<script src="js/plugins/maplace/maplace.js" type="text/javascript"></script>
<script src="js/plugins/maplace/demo.js" type="text/javascript"></script>
<!-- Demonica Scripts - Include with every page -->
<script src="js/script.js" type="text/javascript"></script>
Demonica uses SASS for the ultimate developer experience. Each of the content elements
is styled inside a _partial.scss file, included in the main file afterwards,
for easy reference.
The Bootstrap files are also in SASS version, allowing you to change global variables on the fly.
The main style.scss file and the partial files are all very well commented for easy
developing and styling.
//***********************************
// Main SCSS
//***********************************
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
@import "bootstrap/variables";
@import "variables";
@import "css3-mixins";
@import "helper-classes";
@import "animate";
@import "navbar";
@import "header";
@import "content-block";
@import "service";
@import "project-view";
@import "portfolio";
@import "team-member";
@import "pricing-table";
@import "accordion";
@import "blog-post-recent";
@import "timeline";
@import "videobg";
@import "gmap";
@import "contact-form";
@import "footer";
In order to change the primary color of Demonica (Gold) and the secondary colors,
open the _variables.scss
file inside the bootstrap folder and modify the following
variables:
$brand-default: lighten(#ababab, 10%) !default;
$brand-primary: #cda633 !default;
$brand-success: #2ecc71 !default;
$brand-info: #3498db !default;
$brand-warning: #e88f41 !default;
$brand-danger: #e66052 !default;The header will take on 100% width and 100% height of the screen and it will resize beautifully under any circumstances. It contains a bold vertically centered text, making it the Ultimate eye catching element of Demonica.
The header can be styled to have Black or White text using the following classes:
<!-- Header -->
<section class="header header-inverse" id="header">
<div class="container vertical-center">
<div class="row">
<div class="col-md-12 text-center">
<h1 class="header-subtitle">
Subtitle
</h1>
<h1 class="header-title">
The <span class="text-primary">Header</span>
</h1>
</div>
</div>
</div>
</section>
<!-- /Header -->
The header also requires you to set the Cover Background image in CSS.
Header CSS#header{
background: url('../img/header.jpg') no-repeat center top #0e0e0e;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.../img/header.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/header.jpg', sizingMethod='scale')";
}Demonica content-blocks are the main blocks of content. They come in different shapes and sizes. They can either have a solid color background, image background, parallax background or video background. It's up to you how you style it.
Content Block text here.
<section class="content-block" id="content-block">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="content-block-title">
Content Block Title
</h1>
<p class="content-block-subtitle">
Content Block text here.
</p>
</div>
</div>
</div>
</section>Content Block size can be set using additional CSS classes together with our content-block class. These have twice or more the padding of a default content-block (40px). Here are the sizes:
The Solid Background Content Block can be styled to have White or Black background using the following classes:
Content Block Default text here.
Content Block Inverse text here.
<section class="content-block content-block-inverse" id="content-block">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="content-block-title">
Content Block Title
</h1>
<p class="content-block-subtitle">
Content Block text here.
</p>
</div>
</div>
</div>
</section>Static image backgrounds for content-blocks are set via CSS in the same manner as we set image for the header. Simple and efficient.
Content Block Image text here.
#content-block{
background: url('../img/content-block.jpg') no-repeat center top #0e0e0e;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.../img/content-block.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/content-block.jpg', sizingMethod='scale')";
}Parallax image backgrounds for content-blocks are set via CSS together with a few Classes and data-tags.
The Classes you need to add are the following:
You can set the parallaxing speed through the data-parallax tag to make the content-block background scroll slower or faster.
Content Block Parallax text here.
<section class="content-block content-block-inverse content-block-lg content-block-parallax parallax"
data-parallax="0.3" id="content-block-parallax">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="content-block-title">
Content Block Parallax Title
</h1>
<p class="content-block-subtitle">
Content Block Parallax text here.
</p>
</div>
</div>
</div>
</section>#content-block-parallax{
background-image: url('../img/content-block-parallax.jpg');
}Video backgrounds require 3 video formats and a fallback in order to be completely cross browser. The video format and fallback extensions are:
Content Block Video text here.
<section class="video-bg clearfix"
data-video-mp4="video/test-video.mp4" data-video-ogv="video/test-video.ogv"
data-video-webm="video/test-video.webm" data-video-jpg="video/test-video.jpg">
<div class="content-block content-block-xlg">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="content-block-title">
Content Block Video Title
</h1>
<p class="content-block-subtitle">
Content Block Video text here.
</p>
</div>
</div>
</div>
</div>
</section>These are the service presentation blocks of Demonica. They use FontAwesome (http://fontawesome.io/) for the icons and, as you know, they come in both black and white using the classes:
<div class="service service-default text-center">
<a href="#">
<i class="service-icon fa fa-star fa-4x"></i>
<h4 class="service-title">
Service Default Title
</h4>
<p class="service-description">
Service Default Text
</p>
</a>
</div>These are the team member blocks of Demonica. You can set a black or white theme using:
Default
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Inverse
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
<!-- Team Member -->
<div class="team-member team-member-default text-center">
<div class="team-member-img-wrapper">
<div class="hexagon" id="team-member">
<div class="face1"></div>
<div class="face2"></div>
</div>
</div>
<div class="team-member-details">
<h4 class="team-member-name">
Christine Turner
</h4>
<p class="team-member-profession">
Default
</p>
<p class="team-member-description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
</p>
<ul class="team-member-social list-inline">
<li>
<a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-pinterest"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-google-plus"></i></a>
</li>
</ul>
</div>
</div>
<!-- /Team Member -->You will also need to set the profile picture as a background inside the hexagon.
Team Member CSS#team-member{
background-image: url('../img/team-1.jpg');
}You can have a section about yourself only, if you're not a team. It is a custom content-block, adapted to preview a single team member. You can set a black or white theme using:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Photography 90%
Video Editing 75%
Web Design 60%
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Photography 90%
Video Editing 75%
Web Design 60%
<section class="content-block content-block-inverse">
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="team-member-img-wrapper">
<div class="hexagon" id="team-member-3">
<div class="face1"></div>
<div class="face2"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="about-single">
<h1 class="content-block-title">
Johnny White
</h1>
<h4 class="text-primary text-center-sm">Demon</h4>
<p class="content-block-subtitle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
</p>
<ul class="team-member-social list-inline text-center-sm">
<li>
<a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-pinterest"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-google-plus"></i></a>
</li>
</ul>
</div>
</div>
<div class="col-md-4">
<p>Photography <span class="pull-right text-small">90%</span></p>
<div class="progress progress-slim">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
</div>
<p>Video Editing <span class="pull-right text-small">75%</span></p>
<div class="progress progress-slim">
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
</div>
<p>Web Design <span class="pull-right text-small">60%</span></p>
<div class="progress progress-slim">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
</div>
</div>
</section>You can set a black or white theme using:
per month
per month
<!-- Pricing Table -->
<div class="pricing-table pricing-table-inverse">
<div class="panel text-center">
<div class="panel-heading">
<div class="pricing-table-title">
Inverse
</div>
<div class="pricing-table-price">
<h1>$15</h1>
<p>per month</p>
</div>
</div>
<ul class="list-group">
<li class="list-group-item">Feature 1</li>
<li class="list-group-item">Feature 2</li>
<li class="list-group-item">Feature 3</li>
<li class="list-group-item">Feature 4</li>
<li class="list-group-item">Feature 5</li>
</ul>
<div class="pricing-table-footer">
<a class="btn btn-lg btn-block btn-primary">
Order Now
</a>
</div>
</div>
</div>
<!-- Pricing Table -->You can preview your recent blog posts using the latest articles markup in Demonica.
<!-- Recent Blog Post -->
<div class="blog-post-recent blog-post-recent-inverse">
<a href="#">
<div class="blog-post-recent-image">
<img src="img/blog-post-recent-1.jpg" class="img-responsive" alt=""/>
</div>
<div class="blog-post-recent-details">
<h3 class="blog-post-recent-title">
Inverse
</h3>
<p class="blog-post-recent-date">
June 25, 2014
</p>
<p class="blog-post-recent-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore..
</p>
</div>
</a>
</div>
<!-- Recent Blog Post -->The Contact Form in Demonica is completely functional. AJAX is used to submit the data, getting a response from the server. It also has field validation, making it even more awesome.
As you can see, our Contact Form has 3 Sections:
Inside the thank you section, you choose what to display after the message has been sent.
Inside the inputs section, you have the fields that get submitted to the server.
Contact Form Markup<!-- Contact Form -->
<section class="contact-wrapper content-block content-block-inverse">
<div class="container">
<div class="row">
<form id="contact-form" class="form contact-form" name="contact-form" method="post" action="submit.php">
<div class="col-md-12">
<div class="contact-form-loading demonica-loader-wrapper bg-inverse">
<div class="demonica-loader demonica-loader-primary"></div>
</div>
<div class="contact-form-thanks">
<h1 class="content-block-title">
Thank you!
</h1>
<p>
Your message has been sent. We will get back to you shortly.
</p>
</div>
<div class="contact-form-inputs">
<div class="row">
<div class="col-md-12">
<h1 class="content-block-title">
Contact Demon
</h1>
<p class="text-center-sm margin-top">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<br/>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control requiredField" name="name" placeholder="Name" id="name" />
</div>
<div class="form-group">
<input type="text" class="form-control requiredField requiredField-email" name="email" placeholder="Email" id="email" />
</div>
<div class="form-group">
<input type="text" class="form-control requiredField" name="subject" placeholder="Subject" id="name" />
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<textarea name="message" id="message" class="form-control requiredField" placeholder="Message" cols="35" rows="8"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 padding-bottom">
<input type="submit" name="button" id="button" class="btn btn-primary btn-block" value="SEND" />
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</section>
<!-- /Contact Form -->Of course, the Contact Form looks awesome, but let's set it up to send us the mail.
/* Email Config
* ********************** */
$websiteName = 'Website Name'; // To be displayed in email subject
$emailAddress = 'you@yourcompany.com'; // Your email address
$mail->isSMTP(); // Set mailer to use SMTP
$mail->Host = 'email3145.host.com'; // Specify main and backup server
$mail->SMTPAuth = true; // Enable SMTP authentication
$mail->Username = 'username'; // SMTP username
$mail->Password = 'password'; // SMTP passwordAlternatively, you can check out the already set up configs at https://github.com/Synchro/PHPMailer.
We're finally getting to the interesting part. In order to make the Demonica portfolio the best, I've included a way similar to how the bootstrap columns system works.
You can responsively set the number of columns, with the same breakpoints as the bootstrap framework.
$screen-lg: 1200px<section class="portfolio portfolio-col-md-3 portfolio-col-sm-2 portfolio-col-xs-1">
<!-- Portfolio Project -->
<div class="portfolio-project category-1">
<div class="portfolio-project-details">
<div class="portfolio-vertical-center">
<div class="portfolio-project-title">
Diamond Dreams
</div>
<div class="portfolio-project-category">
Single Image
</div>
</div>
<div class="portfolio-project-actions">
<a href="portfolio-project.html" class="portfolio-project-link">
<i class="fa fa-link"></i>
</a>
<a href="img/portfolio.jpg" class="portfolio-project-lightbox">
<i class="fa fa-search-plus"></i>
</a>
</div>
</div>
<div class="portfolio-project-image">
<img src="img/portfolio-thumb.jpg" alt="" />
</div>
</div>
<!-- /Portfolio Project -->
<!-- Portfolio Project -->
<div class="portfolio-project category-2">
...
</div>
<!-- /Portfolio Project -->
...
</section>As you can see, we have a div called portfolio-project-actions where we have two links: AJAX Project Link and Project Lightbox Link.
Demonica uses a customized version of the Magnific Popup Plugin. You can find the documentation here: http://dimsemenov.com/plugins/magnific-popup
You can directly add a lightbox to your href tag using the .btn-lightbox class.
<a class="btn btn-primary btn-lg btn-lightbox" href="http://placehold.it/1920x1080/1d1d1d/474747">Example</a>
Each of the <a class="portfolio-project-link" href="link.htmk"> tags
will load the project using AJAX, more specifically, it will load whatever is wrapped in the class:
<div class="load-wrapper"></div>Let's see an example:
<a class="btn btn-primary btn-lg portfolio-project-link" href="portfolio-project-1.html">Example</a>This applies to the blog posts as well. Therefore we add this class to the Recent Blog Posts link.
To be even better, Demonica has advanced History events implementation on the above link. Therefore, you can link single pages inside your homepage without any problems. For example, you can link the page in the following manner:
Considering we have <a class="portfolio-project-link" href="link.htmk">,
the AJAX Linking to the page is done like this:
http://yourwebsite.com/index.html#link.html
Demonica uses OWL Carousel to markup sliders.
<div class="owl-carousel">
<div>
<img src="http://placehold.it/1920x1080/1d1d1d/474747" class="img-responsive" alt="Luxury"/>
</div>
<div>
<img src="http://placehold.it/1920x1080/1d1d1d/474747" class="img-responsive" alt="Luxury"/>
</div>
...
</div>
Refer to the demo pages to see how it's used. By default, it will create a carousel out of the .owl-carousel class.
Each and every element of Demonica can be animated through a simple HTML data-tag. Animation delays are also possible.
<div data-animate="animationName" data-delay="1000"></div>Here's a list of all the possible animations you can use within Demonica, with live preview:
I can't express in words how much you're helping into the development of bright new projects by purchasing this template. In case you want to keep in touch or ask me anything about Demonica, I'm offering complete support for anyone who has purchased it. If you bought the Extended License, I'm also offering further development help. After buying Demonica, you're entitled to download any new version that gets released for free. Be prepared for some great updates!