Skip to content

Instantly share code, notes, and snippets.

@suicide

suicide/brushed.html

Created January 25, 2015 19:20
Show Gist options
  • Save suicide/b0d9d48fde0ca42cc204 to your computer and use it in GitHub Desktop.
Save suicide/b0d9d48fde0ca42cc204 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
brushed.html
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if (IE 9)]><html class="no-js ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-US"> <!--<![endif]-->
<head>
<!-- Meta Tags -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Brushed | Responsive One Page Template</title>
<meta name="description" content="Insert Your Site Description" />
<!-- Mobile Specifics -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="HandheldFriendly" content="true"/>
<meta name="MobileOptimized" content="320"/>
<!-- Mobile Internet Explorer ClearType Technology -->
<!--[if IEMobile]> <meta http-equiv="cleartype" content="on"> <![endif]-->
<!-- Bootstrap -->
<link href="_include/css/bootstrap.min.css" rel="stylesheet">
<!-- Main Style -->
<link href="_include/css/main.css" rel="stylesheet">
<!-- Supersized -->
<link href="_include/css/supersized.css" rel="stylesheet">
<link href="_include/css/supersized.shutter.css" rel="stylesheet">
<!-- FancyBox -->
<link href="_include/css/fancybox/jquery.fancybox.css" rel="stylesheet">
<!-- Font Icons -->
<link href="_include/css/fonts.css" rel="stylesheet">
<!-- Shortcodes -->
<link href="_include/css/shortcodes.css" rel="stylesheet">
<!-- Responsive -->
<link href="_include/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="_include/css/responsive.css" rel="stylesheet">
<!-- Supersized -->
<link href="_include/css/supersized.css" rel="stylesheet">
<link href="_include/css/supersized.shutter.css" rel="stylesheet">
<!-- Google Font -->
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,400italic,600,600italic,700,700italic,900' rel='stylesheet' type='text/css'>
<!-- Fav Icon -->
<link rel="shortcut icon" href="#">
<link rel="apple-touch-icon" href="#">
<link rel="apple-touch-icon" sizes="114x114" href="#">
<link rel="apple-touch-icon" sizes="72x72" href="#">
<link rel="apple-touch-icon" sizes="144x144" href="#">
<!-- Modernizr -->
<script src="_include/js/modernizr.js"></script>
<!-- Analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'Insert Your Code']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- End Analytics -->
</head>
<body>
<!-- This section is for Splash Screen -->
<div class="ole">
<section id="jSplash">
<div id="circle"></div>
</section>
</div>
<!-- End of Splash Screen -->
<!-- Homepage Slider -->
<div id="home-slider">
<div class="overlay"></div>
<div class="slider-text">
<div id="slidecaption"></div>
</div>
<div class="control-nav">
<a id="prevslide" class="load-item"><i class="font-icon-arrow-simple-left"></i></a>
<a id="nextslide" class="load-item"><i class="font-icon-arrow-simple-right"></i></a>
<ul id="slide-list"></ul>
<a id="nextsection" href="#work"><i class="font-icon-arrow-simple-down"></i></a>
</div>
</div>
<!-- End Homepage Slider -->
<!-- Header -->
<header>
<div class="sticky-nav">
<a id="mobile-nav" class="menu-nav" href="#menu-nav"></a>
<div id="logo">
<a id="goUp" href="#home-slider" title="Brushed | Responsive One Page Template">Brushed Template</a>
</div>
<nav id="menu">
<ul id="menu-nav">
<li class="current"><a href="#home-slider">Home</a></li>
<li><a href="#work">Our Work</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="shortcodes.html" class="external">Shortcodes</a></li>
</ul>
</nav>
</div>
</header>
<!-- End Header -->
<!-- Information Block -->
<div id="news" class="page-alternate">
<div class="row">
<div class="span12">
<h3 class="spec">Blog</h3>
<div class="info-block">
<div class="info-text">
<h3><span class="color-text">NEW</span> Brushed- Responsive One Page Template</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque. Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam.</p>
<a class="button fancybox" href="#inline1">read more</a>
</div>
</div>
</div>
</div>
<!-- End Information Block -->
<div id="inline1" class="popupbox" style="display: none;">
<h3>Daisy</h3>
<img class="circle right" src="img/blog1.jpg" alt="Daisy" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.
</p>
</div>
<!-- Our Work Section -->
<div id="work" class="page">
<div class="container">
<!-- Title Page -->
<div class="row">
<div class="span12">
<div class="title-page">
<h2 class="title">Our Work</h2>
<h3 class="title-description">Check Out Our Projects on <a href="#">Dribbble</a>.</h3>
</div>
</div>
</div>
<!-- End Title Page -->
<!-- Portfolio Projects -->
<div class="row">
<div class="span3">
<!-- Filter -->
<nav id="options" class="work-nav">
<ul id="filters" class="option-set" data-option-key="filter">
<li class="type-work">Type of Work</li>
<li><a href="#filter" data-option-value="*" class="selected">All Projects</a></li>
<li><a href="#filter" data-option-value=".design">Design</a></li>
<li><a href="#filter" data-option-value=".photography">Photography</a></li>
<li><a href="#filter" data-option-value=".video">Video</a></li>
</ul>
</nav>
<!-- End Filter -->
</div>
<div class="span9">
<div class="row">
<section id="projects">
<ul id="thumbs">
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 design">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The City" href="_include/img/work/full/image-01-full.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/image-01.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 design">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Office" href="_include/img/work/full/image-02-full.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/image-02.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 photography">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Mountains" href="_include/img/work/full/image-03-full.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/image-03.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 video">
<!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
<a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Video Content From Vimeo" href="http://vimeo.com/51460511">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/image-08.jpg" alt="Video">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 photography">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Sea" href="_include/img/work/full/image-04-full.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/image-04.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 photography">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Clouds" href="_include/img/work/full/image-05-full.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/image-05.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 video">
<!-- Fancybox Media - Gallery Enabled - Title - Link to Video -->
<a class="hover-wrap fancybox-media" data-fancybox-group="video" title="Video Content From Vimeo" href="http://vimeo.com/50834315">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/image-09.jpg" alt="Video">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 design">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Dark" href="_include/img/work/full/image-06-full.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/image-06.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
</li>
<!-- End Item Project -->
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 design">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Beach" href="_include/img/work/full/image-07-full.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/image-07.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
</li>
<!-- End Item Project -->
</ul>
</section>
</div>
</div>
</div>
<!-- End Portfolio Projects -->
</div>
</div>
<!-- End Our Work Section -->
<!-- About Section -->
<div id="about" class="page-alternate">
<div class="container">
<!-- Title Page -->
<div class="row">
<div class="span12">
<div class="title-page">
<h2 class="title">About Us</h2>
<h3 class="title-description">Learn About our Team &amp; Culture.</h3>
</div>
</div>
</div>
<!-- End Title Page -->
<!-- People -->
<div class="row">
<!-- Start Profile -->
<div class="span4 profile">
<div class="image-wrap">
<div class="hover-wrap">
<span class="overlay-img"></span>
<span class="overlay-text-thumb">CTO/Founder</span>
</div>
<img src="_include/img/profile/profile-01.jpg" alt="John Doe">
</div>
<h3 class="profile-name">John Doe</h3>
<p class="profile-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat <a href="#">hendrerit dictum</a>.
Praesent porta, purus eget sagittis imperdiet, nulla mi ullamcorper metus, id hendrerit metus diam vitae est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<div class="social">
<ul class="social-icons">
<li><a href="#"><i class="font-icon-social-twitter"></i></a></li>
<li><a href="#"><i class="font-icon-social-dribbble"></i></a></li>
<li><a href="#"><i class="font-icon-social-facebook"></i></a></li>
</ul>
</div>
</div>
<!-- End Profile -->
<!-- Start Profile -->
<div class="span4 profile">
<div class="image-wrap">
<div class="hover-wrap">
<span class="overlay-img"></span>
<span class="overlay-text-thumb">Creative Director</span>
</div>
<img src="_include/img/profile/profile-02.jpg" alt="Jane Helf">
</div>
<h3 class="profile-name">Jane Helf</h3>
<p class="profile-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat <a href="#">hendrerit dictum</a>.
Praesent porta, purus eget sagittis imperdiet, nulla mi ullamcorper metus, id hendrerit metus diam vitae est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<div class="social">
<ul class="social-icons">
<li><a href="#"><i class="font-icon-social-twitter"></i></a></li>
<li><a href="#"><i class="font-icon-social-email"></i></a></li>
</ul>
</div>
</div>
<!-- End Profile -->
<!-- Start Profile -->
<div class="span4 profile">
<div class="image-wrap">
<div class="hover-wrap">
<span class="overlay-img"></span>
<span class="overlay-text-thumb">Lead Designer</span>
</div>
<img src="_include/img/profile/profile-03.jpg" alt="Joshua Insanus">
</div>
<h3 class="profile-name">Joshua Insanus</h3>
<p class="profile-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat <a href="#">hendrerit dictum</a>.
Praesent porta, purus eget sagittis imperdiet, nulla mi ullamcorper metus, id hendrerit metus diam vitae est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<div class="social">
<ul class="social-icons">
<li><a href="#"><i class="font-icon-social-twitter"></i></a></li>
<li><a href="#"><i class="font-icon-social-linkedin"></i></a></li>
<li><a href="#"><i class="font-icon-social-google-plus"></i></a></li>
<li><a href="#"><i class="font-icon-social-vimeo"></i></a></li>
</ul>
</div>
</div>
<!-- End Profile -->
</div>
<!-- End People -->
</div>
</div>
<!-- End About Section -->
<!-- Contact Section -->
<div id="contact" class="page">
<div class="container">
<!-- Title Page -->
<div class="row">
<div class="span12">
<div class="title-page">
<h2 class="title">Get in Touch</h2>
<h3 class="title-description">We&acirc;&euro;\99re currently accepting new client projects. We look forward to serving you.</h3>
</div>
</div>
</div>
<!-- End Title Page -->
<!-- Contact Form -->
<div class="row">
<div class="span9">
<form id="contact-form" class="contact-form" action="#">
<p class="contact-name">
<input id="contact_name" type="text" placeholder="Full Name" value="" name="name" />
</p>
<p class="contact-email">
<input id="contact_email" type="text" placeholder="Email Address" value="" name="email" />
</p>
<p class="contact-message">
<textarea id="contact_message" placeholder="Your Message" name="message" rows="15" cols="40"></textarea>
</p>
<p class="contact-submit">
<a id="contact-submit" class="submit" href="#">Send Your Email</a>
</p>
<div id="response">
</div>
</form>
</div>
<div class="span3">
<div class="contact-details">
<h3>Contact Details</h3>
<ul>
<li><a href="#">[email protected]</a></li>
<li>(916) 375-2525</li>
<li>
Brushed Studio
<br>
5240 Vanish Island. 105
<br>
Unknow
</li>
</ul>
</div>
</div>
</div>
<!-- End Contact Form -->
</div>
</div>
<!-- End Contact Section -->
<!-- Twitter Feed -->
<div id="twitter-feed" class="page-alternate">
<div class="container">
<div class="row">
<div class="span12">
<div class="follow">
<a href="https://twitter.com/Bluxart" title="Follow Me on Twitter" target="_blank"><i class="font-icon-social-twitter"></i></a>
</div>
<div id="ticker" class="query">
</div>
</div>
</div>
</div>
</div>
<!-- End Twitter Feed -->
<!-- Socialize -->
<div id="social-area" class="page">
<div class="container">
<div class="row">
<div class="span12">
<nav id="social">
<ul>
<li><a href="https://twitter.com/Bluxart" title="Follow Me on Twitter" target="_blank"><span class="font-icon-social-twitter"></span></a></li>
<li><a href="http://dribbble.com/Bluxart" title="Follow Me on Dribbble" target="_blank"><span class="font-icon-social-dribbble"></span></a></li>
<li><a href="http://forrst.com/people/Bluxart" title="Follow Me on Forrst" target="_blank"><span class="font-icon-social-forrst"></span></a></li>
<li><a href="http://www.behance.net/alessioatzeni" title="Follow Me on Behance" target="_blank"><span class="font-icon-social-behance"></span></a></li>
<li><a href="https://www.facebook.com/Bluxart" title="Follow Me on Facebook" target="_blank"><span class="font-icon-social-facebook"></span></a></li>
<li><a href="https://plus.google.com/105500420878314068694" title="Follow Me on Google Plus" target="_blank"><span class="font-icon-social-google-plus"></span></a></li>
<li><a href="http://www.linkedin.com/in/alessioatzeni" title="Follow Me on LinkedIn" target="_blank"><span class="font-icon-social-linkedin"></span></a></li>
<li><a href="http://themeforest.net/user/Bluxart" title="Follow Me on ThemeForest" target="_blank"><span class="font-icon-social-envato"></span></a></li>
<li><a href="http://zerply.com/Bluxart/public" title="Follow Me on Zerply" target="_blank"><span class="font-icon-social-zerply"></span></a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<!-- End Socialize -->
<!-- Footer -->
<footer>
<p class="credits">&copy;2013 Brushed. <a href="http://themes.alessioatzeni.com/html/brushed/" title="Brushed | Responsive One Page Template">Brushed Template</a> by <a href="http://www.alessioatzeni.com/" title="Alessio Atzeni | Web Designer &amp; Front-end Developer">Alessio Atzeni</a></p>
</footer>
<!-- End Footer -->
<!-- Back To Top -->
<a id="back-to-top" href="#">
<i class="font-icon-arrow-simple-up"></i>
</a>
<!-- End Back to Top -->
<!-- Js -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- jQuery Core -->
<script src="_include/js/bootstrap.min.js"></script> <!-- Bootstrap -->
<script src="_include/js/supersized.3.2.7.min.js"></script> <!-- Slider -->
<script src="_include/js/waypoints.js"></script> <!-- WayPoints -->
<script src="_include/js/waypoints-sticky.js"></script> <!-- Waypoints for Header -->
<script src="_include/js/jquery.isotope.js"></script> <!-- Isotope Filter -->
<script src="_include/js/jquery.fancybox.pack.js"></script> <!-- Fancybox -->
<script src="_include/js/jquery.fancybox-media.js"></script> <!-- Fancybox for Media -->
<script src="_include/js/jquery.tweet.js"></script> <!-- Tweet -->
<script src="_include/js/plugins.js"></script> <!-- Contains: jPreloader, jQuery Easing, jQuery ScrollTo, jQuery One Page Navi -->
<script src="_include/js/main.js"></script> <!-- Default JS -->
<!-- End Js -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment