Welcome to the Digistorm Website Markup Guide. Please follow the guides below;
... is to be replaced with any HTML necessary to match the design.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link href="/css/styles.css" rel="stylesheet">
</head>
<body>
<!--HTML-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/scrpts.js"></script>
</body>
</html><div class="navbar">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="logo">
<img src="..." />
</a>
<div class="nav-toggle visible-xs visible-sm">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav">
<!-- nav list item -->
<li class="active"><a href="#">...</a></li>
<!-- nav dropdown list item -->
<li>
<a href="#">...</a>
<ul class="dropdown">
<li><a href="#">...</a></li>
</ul>
</li>
</ul>
</div>
<ul class="nav-links">
<!-- nav link item -->
<li><a href="#">...</a></li>
</ul>
</div>
</div>.navbar {
position:fixed;
height:80px;
background:white;
width:100%;
z-index:100;
top:0px;
.container {
position:relative;
height:100%;
}
.nav-wrapper {
position:relative;
height:100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
}
.nav,
.nav-links {
> li {
float:left;
list-style:none;
margin-left:0px;
position:relative;
a {
display:block;
font-size:16px;
margin:0px;
color:grey;
text-decoration: none;
background:transparent;
padding:6px 10px;
}
&.active,
&:hover {
> a {
color:blue;
}
}
ul {
padding: 10px 0px;
position:absolute;
background:blue;
width:250px;
top:100%;
// left:0px;
right:0px;
display:none;
li {
list-style:none;
a {
color:white;
padding:5px 25px;
&:hover {
color:white;
background-color:darkblue;
}
}
}
}
&:hover {
.dropdown {
display:block;
}
}
}
}
.nav {
position:relative;
padding:0px;
margin:0px;
// top:10px;
}
.nav-links {
position:absolute;
top:0px;
right:15px;
margin:0px;
li {
a {
font-size:12px;
}
}
}
.nav-toggle {
position: absolute;
right: 0px;
width: 30px;
height: 18px;
top: 50%;
margin-top: -14px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transition: -webkit-transform 0.4s;
transition:transform 0.4s;
.line {
background-color: blue;
position: absolute;
left: 0;
right: 0;
height: 2px;
-webkit-transform: translate(0px, 0px) rotate(0deg);
transform: translate(0px, 0px) rotate(0deg);
transition: -webkit-transform 0.4s, opacity 0.4s;
transition: transform 0.4s, opacity 0.4s;
&:nth-child(1) {
top: 0%;
}
&:nth-child(2) {
top: 50%;
opacity: 1;
}
&:nth-child(3) {
top: 100%;
}
}
&.active {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
.line {
&:nth-child(1) {
-webkit-transform: rotate(45deg) translate(5px, 6.7px);
transform: rotate(45deg) translate(5px, 6.7px);
}
&:nth-child(2) {
opacity:0
}
&:nth-child(3) {
-webkit-transform: rotate(-45deg) translate(6px, -7px);
transform: rotate(-45deg) translate(6px, -7px);
}
}
}
}
}
// Responsiveness
@media(max-width:992px) {
.nav {
background:grey;
position:fixed !important;
width:300px;
top:80px;
right:-300px;
bottom:0px;
padding: 10px 15px !important;
-webkit-transform:translateX(0px);
transform:translateX(0px);
transition:-webkit-transform 0.4s;
transition:transform 0.4s;
> li {
float:none !important;
display:block;
ul {
display:none !important;
}
}
&.active {
-webkit-transform:translateX(-300px);
transform:translateX(-300px);
}
}
}$('.nav-toggle').click(function() {
$(this).toggleClass("active");
$(".nav").toggleClass("active");
});<div class="sidebar">
<h1>...</h1>
<ul class="nav">
<!-- nav list item -->
<li><a href="#">...</a></li>
<!-- nav group item -->
<li>
<a href="#">...</a>
<ul class="dropdown">
<!-- nav list item -->
<li><a href="#">...</a></li>
</ul>
</li>
</ul>
</div>.sidebar {
background:blue;
padding:15px 0px;
h1 {
margin:0px;
color:white;
padding:0px;
margin:0px 20px;
}
.nav {
padding:0px;
li {
list-style:none;
margin:0px;
a {
color:white;
display:block;
padding: 3px 20px;
font-size: 14px;
&:hover {
background:darkblue;
}
}
}
> li {
ul {
padding:0px;
li {
a {
font-size:13px;
padding:2px 45px;
}
}
}
}
}
}Banners use the Javascript plugin slick
<div class="banners">
<!-- Banner Item -->
<div class="banner-wrapper">
<div class="banner" style="background-image:url('...')"></div>
<a class="banner-overlay" href="#">
...
</a>
</div>
</div>.banners {
height:700px;
position:relative;
.banner-wrapper {
height:700px;
outline:none !important;
.banner {
height:700px;
background-size:cover;
background-position:center center;
}
}
.container {
position:relative;
}
.banner-overlay {
position:absolute;
width:500px;
left:15px;
bottom:30px;
padding:10px 20px;
background:blue;
color:white;
}
&.content-banners {
height:500px;
.banner {
height:500px;
}
.banner-overlay {
display:none;
}
}
// slick js styles
.slick-arrow {
position:absolute;
top:50%;
background:none;
border:none;
color:blue;
font-size:48px;
outline:none;
z-index:100;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
&.slick-next {
right:10px;
}
&.slick-prev {
left:10px;
}
}
}$('.banners').slick({
arrows:true,
dots: false,
prevArrow: '<button type="button" class="slick-prev">...</button>',
nextArrow: '<button type="button" class="slick-next">...</button>'
});<div class="quicklinks">
<div class="container">
<div class="row">
<!-- quicklink item -->
<div class="col-md-2">
<a href="#" class="quicklink">
...
</a>
</div>
</div>
</div>
</div>.quicklinks {
padding:30px 0px;
margin:0px auto;
.quicklink {
text-align:center;
img {
display:block;
max-width:100%;
width:100%;
}
span {
display:block;
color:grey;
font-size:16px;
margin:10px 0px;
}
}
}<div class="news">
<div class="container">
<div class="row">
<!-- news item -->
<div class="col-md-4">
<a href="#" class="article">
<img class="img-responsive" src="...">
<h3>...</h3>
<date>...</date>
<p>...</p>
</a>
</div>
</div>
</div>
</div><div class="events">
<div class="container">
<div class="row">
<!-- events item -->
<div class="col-md-3">
<a href="#" class="event">
<div class="event-date">
<span class="day">...</span>
<span class="month">...</span>
</div>
<div class="event-details">
<span class="description">...</span>
<span class="time">...</span>
</div>
</a>
</div>
</div>
</div>
</div>.events {
background:grey;
padding:50px 0px;
margin:0px auto;
.event {
.event-date {
float: left;
width: 90px;
height: 90px;
background: blue;
color: #fff;
text-align: center;
font-weight: 300;
text-transform: uppercase;
font-size: 14px;
line-height: 16px;
padding: 13px 10px;
margin-right:10px;
.day {
font-size: 30px;
line-height: 38px;
margin: 0 0 4px;
display:block;
}
}
.event-details {
.description {
font-size: 16px;
line-height: 24px;
display: block;
margin-bottom: 11px;
}
}
}
}<div class="tabs">
<ul class="tab-heading">
<!-- tab item (first child active)-->
<li><a class="tab active" href="#tab1">...</a></li>
<!-- tab item-->
<li><a class="tab" href="#tab2">...</a></li>
</ul>
<div class="tab-wrapper">
<!-- tab content item (first child active)-->
<div id="tab1" class="tab-content active">
...
</div>
<!-- tab content item-->
<div id="tab2" class="tab-content">
...
</div>
</div>
</div>.tabs {
margin-bottom:30px;
.tab-heading {
padding:0px;
display:block;
border-bottom:2px solid #e0e0e0;
margin:0px;
li {
list-style:none;
display:inline-block;
margin-right:10px;
a {
position:relative;
display:block;
padding:10px 10px;
color:$secondary-color;
&:after {
content:'';
height:2px;
z-index:10;
position:absolute;
left:0px;
right:0px;
bottom:-2px;
}
&.active,
&:hover {
color:blue;
&:after {
background:blue;
}
}
}
}
}
.tab-content {
background:grey;
overflow:auto;
max-height:800px;
display:none;
padding:5px 20px;
&.active {
display:block;
}
}
}$('.tab').each(function(index, tab) {
$(tab).click(function(e) {
e.preventDefault();
var tabs = $(tab).closest('.tabs');
$(tabs).find('.tab').removeClass("active");
$(tab).addClass("active");
var tab_id = $(tab).attr("href");
$(tabs).find('.tab-content').removeClass("active")
$(tab).closest('.tabs').find(tab_id).addClass("active");
});
});<div class="quote">
<div class="title">...</div>
<small class="byline">...</small>
</div>.quote {
padding-left:30px;
position:relative;
margin:30px 0px;
&:before {
content:'';
position:absolute;
background:blue;
left:0px;
top:0px;
bottom:0px;
width:3px;
}
.title {
font-size:18px;
font-weight:300;
}
.byline {
display:block;
font-size:12px;
font-weight:600;
margin-top:8px;
}
}Gallery use the Javascript plugin slick
<div class="gallery-carousel">
<div class="slides">
<!-- gallery item -->
<div class="slide">
...
</div>
</div>
</div>.gallery-carousel {
margin-bottom:30px;
.slide {
outline:none;
}
// slick js styles
.slick-arrow {
position:absolute;
top:50%;
background:none;
border:none;
color:blue;
font-size:48px;
outline:none;
z-index:100;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
&.slick-next {
right:10px;
}
&.slick-prev {
left:10px;
}
}
.slick-dots {
position: absolute;
bottom: 0px;
left: 0;
right: 0;
padding: 0px;
text-align: center;
li {
list-style: none;
display: inline-block;
margin: 0px 5px;
button {
background: none;
border: none;
outline: none;
background-color: white;
width: 18px;
height: 18px;
border-radius: 100%;
color: transparent;
opacity: 0.7;
}
&.slick-active {
button {
background-color: blue;
cursor: pointer;
opacity: 1;
}
}
}
}
}$('.gallery-carousel').find('.slides').slick({
arrows:true,
dots: true,
prevArrow: '<button type="button" class="slick-prev">...</button>',
nextArrow: '<button type="button" class="slick-next">...</button>'
});Lightbox use the Javascript plugin slick and the Javascript plugin lightbox
<div class="gallery-lightbox">
<div class="slides">
<!-- gallery item -->
<a href="..." data-lightbox="gallery" class="slide">
<img src="...">
</a>
</div>
</div>.gallery-lightbox {
margin-bottom:80px;
.slide {
outline:none;
display:inline-block;
margin:0px 45px 0px 0px;
}
// slick js styles
.slick-arrow {
position:absolute;
top:50%;
background:none;
border:none;
color:blue;
font-size:48px;
outline:none;
z-index:100;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
&.slick-next {
right:-30px;
}
&.slick-prev {
left:-30px;
}
}
.slick-dots {
position: absolute;
bottom: -80px;
left: 0;
right: 0;
padding: 0px;
text-align: center;
li {
list-style: none;
display: inline-block;
margin: 0px 5px;
button {
background: none;
border: none;
outline: none;
background-color: #999;
width: 18px;
height: 18px;
border-radius: 100%;
color: transparent;
opacity: 0.7;
}
&.slick-active {
button {
background-color: blue;
cursor: pointer;
opacity: 1;
}
}
}
}
}$('.gallery-carousel').find('.slides').slick({
arrows:true,
dots: true,
slidesToShow: 3,
variableWidth: true,
centerMode: true,
prevArrow: '<button type="button" class="slick-prev">...</button>',
nextArrow: '<button type="button" class="slick-next">...</button>'
});<div class="footer">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="logo">
<img src="..." />
</a>
<ul class="nav">
<li><a href="#">...</a></li>
</ul>
</div>
<ul class="social-links">
<li><a href="#"><img src="..."></a></li>
</ul>
</div>
</div>.footer {
position:relative;
background:black;
padding:30px 0px;
margin-top:30px;
.container {
padding-left:0px !important;
}
.nav-wrapper {
position:relative;
height:100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
}
.nav {
> li {
float:left;
list-style:none;
margin-left:0px;
a {
display:block;
font-size:14px;
margin:0px;
color:grey;
text-decoration: none;
background:transparent;
padding:6px 10px;
&:hover {
color:blue;
}
}
ul {
padding: 10px 15px;
position:absolute;
background:grey;
width:250px;
top:100%;
display:none;
li {
list-style:none;
a {
}
}
}
&:hover {
.dropdown {
display:block;
}
}
}
}
.nav {
position:relative;
padding:0px;
margin:0px;
}
.social-links {
float:right;
li {
list-style:none;
float:left;
margin-right:10px;
}
}
}<div class="digistorm">
<div class="container">
<div class="nav-wrapper">
<ul class="nav">
<li><span>...</span></li>
</ul>
<a href="#" class="logo">
<span>Site by Digistorm</span>
</a>
</div>
</div>
</div>.digistorm {
position:relative;
background:black;
padding:10px 0px;
.container {
padding-left:0px !important;
}
.nav-wrapper {
position:relative;
height:100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
}
.logo {
img {
height:20px;
}
}
.nav {
> li {
float:left;
list-style:none;
&:hover {
color:blue;
}
a,
span {
display:block;
font-size:13px;
margin:0px;
color:white;
text-decoration: none;
background:transparent;
padding:6px 10px;
&:hover {
color:blue;
}
}
ul {
padding: 10px 15px;
position:absolute;
background:grey;
width:250px;
top:100%;
display:none;
li {
list-style:none;
a {
}
}
}
&:hover {
.dropdown {
display:block;
}
}
}
}
.nav {
position:relative;
padding:0px;
margin:0px;
}
}