Commit 42afd062 authored by Littichai Buddaken's avatar Littichai Buddaken

four

parent 4d931bc8
This diff is collapsed.
.contact a.mail:hover {
text-decoration: underline;
}
.contact .icons li a:hover {
border-bottom: 5px solid transparent;
}
/* HERO */
h1 { font-size: 120px; line-height: 120px; }
.sub-title { font-size: 20px; line-height: 20px; margin-top: 20px; }
/* TITLE & CONTACT */
.title { top: 15%;}
.contact { bottom: 8%; }
.contact .icons { margin-bottom: 12px; }
/* SIZES */
.sphere img{
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
.depth-5 img, .depth-4 img, .depth-3 img, .depth-2 img, .depth-1 img {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
}
/* POSITIONING */
.depth-5 {
right: -25%;
top: 3%;
}
.depth-4 {
left: -3%;
top: 15%;
}
.depth-3.flake1 {
display: none;
}
.depth-3.flake2 {
right: 25%;
bottom: 25%;
}
.depth-3.flake3 {
left: 20%;
bottom: 20%;
}
.depth-3.flake4 {
display: block;
position: absolute;
left: 10%;
bottom: 40%;
}
.depth-2.flake1 {
display: none;
}
.depth-2.flake2 {
display: none;
}
.depth-1.flake1 {
display: none;
}
.depth-1.flake2 {
display: block;
left: 15%;
top: 25%;
}
.depth-1.flake3 {
display: none;
}
.depth-1.flake4 {
display: none;
}
\ No newline at end of file
/* =Loader
-------------------------------------------------------------- */
.preloader {
display: block;
position: fixed;
width: 100%;
height: 100%;
z-index: 9999;
background: white;
text-align: center;
}
.loading {
overflow: hidden;
position: absolute;
top: 50%;
margin-top: -12px;
left: 50%;
margin-left: -50px;
width: 100px;
height: 24px;
}
.progress {
display: block;
position: absolute;
bottom: 0;
overflow: hidden;
width: 100px;
height: 1px;
left: -102px;
background-color: #00d9ec;
-webkit-animation: loader-anim 1s 0s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
-moz-animation: loader-anim 1s 0s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
animation: loader-anim 1s 0s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86)
}
@-webkit-keyframes loader-anim {
0% {
left: -102px
}
100% {
left: 102px
}
}
@-moz-keyframes loader-anim {
0% {
left: -102px
}
100% {
left: 102px
}
}
@keyframes loader-anim {
0% {
left: -102px
}
100% {
left: 102px
}
}
\ No newline at end of file
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
\ No newline at end of file
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
<!--[if IE 8 ]><html class="ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<!DOCTYPE html>
<html lang="en-US">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<title>
Imminent - The most spectacular coming soon template!
</title><!-- Behavioral Meta Data -->
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"><!-- Core Meta Data -->
<meta content="ThemeWagon" name="author">
<meta content="The most spectacular coming soon template!" name="description">
<meta content="Comming Soon, Responsive, Landing Page, One Page" name="keywords"><!-- Open Graph Meta Data -->
<meta content="The most spectacular coming soon template!">
<meta content="ThemeWagon">
<meta content="ThemeWagon">
<meta content="website">
<meta content="index.html"><!-- Twitter Card Meta Data -->
<meta content="summary" name="twitter:card">
<meta content="@themewagon" name="twitter:site">
<meta content="@themewagon" name="twitter:creator">
<meta content="ThemeWagon" name="twitter:title">
<meta content="Imminent - The most spectacular coming soon template!" name="twitter:description">
<link href="favicon.png" rel="shortcut icon" type="image/png">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- CSS -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,900' rel='stylesheet' type='text/css'><!-- Styles -->
<link href="css/loader.css" rel="stylesheet" type="text/css">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
<!-- Javascript -->
<script src="js/jquery.js"></script>
</head>
<body>
<div class="preloader">
<div class="loading">
<h2>
Loading...
</h2>
<span class="progress"></span>
</div>
</div>
<div class="wrapper">
<ul class="scene unselectable" data-friction-x="0.1" data-friction-y="0.1" data-scalar-x="25" data-scalar-y="15" id="scene">
<li class="layer" data-depth="0.00">
</li>
<!-- BG -->
<li class="layer" data-depth="0.10">
<div class="background">
</div>
</li>
<!-- Hero -->
<li class="layer" data-depth="0.20">
<div class="title">
<h2>
IMMINENT
</h2>
<span class="line"></span>
</div>
</li>
<li class="layer" data-depth="0.25">
<div class="sphere">
<img alt="sphere" src="images/sphere.png">
</div>
</li>
<li class="layer" data-depth="0.30">
<div class="hero">
<h1 id="countdown">
The most spectacular coming soon template!
</h1>
<p class="sub-title">
The most spectacular coming soon template!
</p>
</div>
</li>
<!-- Flakes -->
<li class="layer" data-depth="0.40">
<div class="depth-1 flake1">
<img alt="flake" src="images/flakes/depth1/flakes1.png">
</div>
<div class="depth-1 flake2">
<img alt="flake" src="images/flakes/depth1/flakes2.png">
</div>
<div class="depth-1 flake3">
<img alt="flake" src="images/flakes/depth1/flakes3.png">
</div>
<div class="depth-1 flake4">
<img alt="flake" src="images/flakes/depth1/flakes4.png">
</div>
</li>
<li class="layer" data-depth="0.50">
<div class="depth-2 flake1">
<img alt="flake" src="images/flakes/depth2/flakes1.png">
</div>
<div class="depth-2 flake2">
<img alt="flake" src="images/flakes/depth2/flakes2.png">
</div>
</li>
<li class="layer" data-depth="0.60">
<div class="depth-3 flake1">
<img alt="flake" src="images/flakes/depth3/flakes1.png">
</div>
<div class="depth-3 flake2">
<img alt="flake" src="images/flakes/depth3/flakes2.png">
</div>
<div class="depth-3 flake3">
<img alt="flake" src="images/flakes/depth3/flakes3.png">
</div>
<div class="depth-3 flake4">
<img alt="flake" src="images/flakes/depth3/flakes4.png">
</div>
</li>
<li class="layer" data-depth="0.80">
<div class="depth-4">
<img alt="flake" src="images/flakes/depth4/flakes.png">
</div>
</li>
<li class="layer" data-depth="1.00">
<div class="depth-5">
<img alt="flake" src="images/flakes/depth5/flakes.png">
</div>
</li>
<!-- Contact -->
<li class="layer" data-depth="0.20">
<div class="contact">
<ul class="icons">
<li>
<a class="behance" href="#"><i class="fa fa-behance"></i></a>
</li>
<li>
<a class="twitter" href="#"><i class="fa fa-twitter"></i></a>
</li>
<li>
<a class="dribbble" href="#"><i class="fa fa-dribbble"></i></a>
</li>
</ul>
Theme by <a href="https://themewagon.com/" target="_blank">ThemeWagon</a>
<a class="mail" href="mailto:info@example.com?subject=Hi%20ThemeWagon!">info@example.com</a>
</div>
</li>
</ul>
</div>
<!-- Javascript -->
<script src="js/plugins.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
\ No newline at end of file
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n;"undefined"!=typeof window?n=window:"undefined"!=typeof global?n=global:"undefined"!=typeof self&&(n=self),n.Countdown=e()}}(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){var defaultOptions={date:"June 7, 2087 15:03:25",refresh:1e3,offset:0,onEnd:function(){return},render:function(date){this.el.innerHTML=date.years+" years, "+date.days+" days, "+this.leadingZeros(date.hours)+" hours, "+this.leadingZeros(date.min)+" min and "+this.leadingZeros(date.sec)+" sec"}};var Countdown=function(el,options){this.el=el;this.options={};this.interval=false;for(var i in defaultOptions){if(defaultOptions.hasOwnProperty(i)){this.options[i]=typeof options[i]!=="undefined"?options[i]:defaultOptions[i];if(i==="date"&&typeof this.options.date!=="object"){this.options.date=new Date(this.options.date)}if(typeof this.options[i]==="function"){this.options[i]=this.options[i].bind(this)}}}this.getDiffDate=function(){var diff=(this.options.date.getTime()-Date.now()+this.options.offset)/1e3;var dateData={years:0,days:0,hours:0,min:0,sec:0,millisec:0};if(diff<=0){if(this.interval){this.stop();this.options.onEnd()}return dateData}if(diff>=365.25*86400){dateData.years=Math.floor(diff/(365.25*86400));diff-=dateData.years*365.25*86400}if(diff>=86400){dateData.days=Math.floor(diff/86400);diff-=dateData.days*86400}if(diff>=3600){dateData.hours=Math.floor(diff/3600);diff-=dateData.hours*3600}if(diff>=60){dateData.min=Math.floor(diff/60);diff-=dateData.min*60}dateData.sec=Math.round(diff);dateData.millisec=diff%1*1e3;return dateData}.bind(this);this.leadingZeros=function(num,length){length=length||2;num=String(num);if(num.length>length){return num}return(Array(length+1).join("0")+num).substr(-length)};this.update=function(newDate){if(typeof newDate!=="object"){newDate=new Date(newDate)}this.options.date=newDate;this.render();return this}.bind(this);this.stop=function(){if(this.interval){clearInterval(this.interval);this.interval=false}return this}.bind(this);this.render=function(){this.options.render(this.getDiffDate());return this}.bind(this);this.start=function(){if(this.interval){return}this.render();if(this.options.refresh){this.interval=setInterval(this.render,this.options.refresh)}return this}.bind(this);this.updateOffset=function(offset){this.options.offset=offset;return this}.bind(this);this.start()};module.exports=Countdown},{}],2:[function(require,module,exports){var Countdown=require("./countdown.js");var NAME="countdown";var DATA_ATTR="date";jQuery.fn.countdown=function(options){return $.each(this,function(i,el){var $el=$(el);if(!$el.data(NAME)){if($el.data(DATA_ATTR)){options.date=$el.data(DATA_ATTR)}$el.data(NAME,new Countdown(el,options))}})};module.exports=Countdown},{"./countdown.js":1}]},{},[2])(2)});
\ No newline at end of file
This diff is collapsed.
$(window).load(function(){
$('.preloader').fadeOut('slow');
});
/* =Main INIT Function
-------------------------------------------------------------- */
function initializeSite() {
"use strict";
//OUTLINE DIMENSION AND CENTER
(function() {
function centerInit(){
var sphereContent = $('.sphere'),
sphereHeight = sphereContent.height(),
parentHeight = $(window).height(),
topMargin = (parentHeight - sphereHeight) / 2;
sphereContent.css({
"margin-top" : topMargin+"px"
});
var heroContent = $('.hero'),
heroHeight = heroContent.height(),
heroTopMargin = (parentHeight - heroHeight) / 2;
heroContent.css({
"margin-top" : heroTopMargin+"px"
});
}
$(document).ready(centerInit);
$(window).resize(centerInit);
})();
// Init effect
$('#scene').parallax();
};
/* END ------------------------------------------------------- */
/* =Document Ready Trigger
-------------------------------------------------------------- */
$(window).load(function(){
initializeSite();
(function() {
setTimeout(function(){window.scrollTo(0,0);},0);
})();
});
/* END ------------------------------------------------------- */
$('#countdown').countdown({
date: "December 14, 2019 18:03:26",
render: function(data) {
var el = $(this.el);
el.empty()
//.append("<div>" + this.leadingZeros(data.years, 4) + "<span>years</span></div>")
.append("<div>" + this.leadingZeros(data.days, 2) + " <span>days</span></div>")
.append("<div>" + this.leadingZeros(data.hours, 2) + " <span>hrs</span></div>")
.append("<div>" + this.leadingZeros(data.min, 2) + " <span>min</span></div>")
.append("<div>" + this.leadingZeros(data.sec, 2) + " <span>sec</span></div>");
}
});
\ No newline at end of file
This diff is collapsed.
Coming Soon Template
\ No newline at end of file
/*
Design by TEMPLATED
http://templated.co
Released for free under the Creative Commons Attribution License
*/
body {
margin: 0;
padding: 0;
background: #749865 url(images/img01.gif) repeat-x;
font: normal small Arial, Helvetica, sans-serif;
line-height: 1.8em;
color: #838B91;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #468259;
}
h2 {
padding-left: 20px;
background: url(images/img07.gif) no-repeat left center;
font-size: 22px;
}
h3 {
margin-bottom: 1em;
text-transform: uppercase;
letter-spacing: 2px;
font-size: .9em;
font-weight: bold;
}
p, blockquote, ul, ol {
margin-top: 0;
}
blockquote {
padding: 0 0 0 40px;
background: url(images/img11.gif) no-repeat;
font: italic small Georgia, "Times New Roman", Times, serif;
line-height: 1.6em;
}
a {
background: url(images/img03.gif) repeat-x left bottom;
text-decoration: none;
color: #468259;
}
a:hover {
background: none;
text-decoration: underline;
}
/* Wrapper */
#wrapper {
background: #FFFFFF url(images/img04.gif) repeat-x left bottom;
}
/* Menu */
#menu {
width: 750px;
height: 60px;
margin: 0 auto;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: block;
float: left;
width: 148px;
height: 60px;
padding: 0 0 0 2px;
background: url(images/img02.gif) no-repeat;
}
#menu a {
display: block;
width: 108px;
height: 36px;
padding: 20px 20px 0 20px;
background: none;
letter-spacing: -1px;
font: normal 1.6em Georgia, "Times New Roman", Times, serif;
color: #E1E9E2;
}
#menu a:hover {
border-bottom: 4px solid #5A7C50;
text-decoration: none;
color: #FFFFFF;
}
#menu .active a {
background: #E1E9E2;
border-bottom: 4px solid #E1E9E2;
text-decoration: none;
color: #749865;
}
/* Header */
#header {
width: 754px;
height: 247px;
margin: 0 auto;
padding: 13px 0 0 0;
}
#header h1 {
float: left;
width: 104px;
height: 110px;
padding: 104px 100px 0 20px;
background: url(images/img05.jpg) no-repeat;
line-height: 32px;
font-size: 30px;
}
#header h2 {
float: right;
width: 494px;
height: 34px;
padding: 180px 20px 0 0;
background: url(images/img06.jpg) no-repeat;
text-transform: lowercase;
text-align: right;
letter-spacing: -1px;
font-size: 22px;
color: #FFFFFF;
}
/* Content */
#content {
width: 750px;
margin: 0 auto;
}
/* Posts */
#posts {
float: right;
width: 510px;
}
#posts .post {
padding-bottom: 30px;
}
#posts .story {
padding: 15px 20px 0 20px;
background: url(images/img10.gif) repeat-x
}
#posts .meta {
padding: 5px 0 0 20px;
background: url(images/img03.gif) repeat-x;
}
#posts .meta p {
margin: 0;
line-height: normal;
font-size: smaller;
}
#posts ul {
list-style: url(images/img12.gif);
}
#posts ul li {
}
/* Links */
#links {
float: left;
width: 220px;
}
#links ul {
margin: 0;
padding: 0;
list-style: none;
}
#links li ul {
padding: 15px 20px 30px 20px;
background: url(images/img10.gif) repeat-x
}
#links li li {
padding: 3px 0;
background: url(images/img03.gif) repeat-x left bottom;
}
#links li a {
background: none;
}
#links li i {
font-size: smaller;
}
/* Footer */
#footer {
padding: 40px 0 60px 0;
background: url(images/img08.gif) repeat-x;
}
#footer p {
width: 750px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #A6C09B;
}
#footer a {
background: none;
font-weight: bold;
color: #A6C09B;
}
#legal {
margin: 0 auto;
text-align: right;
font-size: 12px;
}
#brand {
margin: -35px auto 0 auto;
padding: 10px 0 0 35px;
background: url(images/img09.gif) no-repeat left top;
letter-spacing: -1px;
font-size: 24px;
}
\ No newline at end of file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by TEMPLATED
http://templated.co
Released for free under the Creative Commons Attribution License
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>InwFour</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li><a href="#" accesskey="1" title="">Blog</a></li>
<li class="active"><a href="#" accesskey="2" title="">Photos</a></li>
<li><a href="#" accesskey="3" title="">Links</a></li>
<li><a href="#" accesskey="4" title="">About</a></li>
<li><a href="#" accesskey="5" title="">Contact</a></li>
</ul>
</div>
<!-- end #menu -->
<div id="header">
<h1>Introduce Four</h1>
<h2>By TEMPLATED</h2>
</div>
<!-- end #header -->
<div id="wrapper">
<div id="content">
<div id="posts">
<div class="post">
<h2 class="title">Welcome to The Green House!</h2>
<div class="story">
<p><strong>The Green House</strong> is a free template from <a href="http://templated.co" rel="nofollow">TEMPLATED</a> released under the <a href="http://templated.co/license">Creative Commons Attribution License</a>. The photo is from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. You're free to use it for both commercial or personal use. We only ask that you credit us in some way. <em><strong>Enjoy :)</strong></em></p>
</div>
<div class="meta">
<p class="date">Posted on February 22, 2007 by Admin</p>
<p class="file">Filed under <a href="#">Uncategorized</a> | <a href="#">Edit</a> | <a href="#">28 Comments</a></p>
</div>
</div>
<div class="post">
<h2 class="title">A Few Examples of Common Tags</h2>
<div class="story">
<p><strong></strong>This is an example of a paragraph followed by a blockquote. In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat lorem ipsum dolorem.</p>
<blockquote>
<p>Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio</p>
</blockquote>
<h3>Heading Level Three</h3>
<p>An unordered list example:</p>
<ul>
<li>List item number one</li>
<li>List item number two</li>
<li>List item number three </li>
</ul>
<p>An ordered list example:</p>
<ol>
<li>List item number one</li>
<li>List item number two</li>
<li>List item number three</li>
</ol>
</div>
<div class="meta">
<p class="date">Posted on February 22, 2007 by Admin</p>
<p class="file">Filed under <a href="#">Uncategorized</a> | <a href="#">Edit</a> | <a href="#">28 Comments</a></p>
</div>
</div>
</div>
<!-- end #posts -->
<div id="links">
<ul>
<li>
<h2>Archives</h2>
<ul>
<li><a href="#">February 2007</a> <i>(22)</i></li>
<li><a href="#">January 2007</a> <i>(31)</i></li>
<li><a href="#">December 2006</a> <i>(31)</i></li>
<li><a href="#">November 2006</a> <i>(30)</i></li>
<li><a href="#">October 2006</a> <i>(31)</i></li>
</ul>
</li>
<li>
<h2>Categories</h2>
<ul>
<li><a href="#">Donec Dictum Metus</a></li>
<li><a href="#">Etiam Rhoncus Volutpat</a></li>
<li><a href="#">Integer Gravida Nibh</a></li>
<li><a href="#">Maecenas Luctus Lectus</a></li>
<li><a href="#">Mauris Vulputate Dolor Nibh</a></li>
<li><a href="#">Nulla Luctus Eleifend</a></li>
<li><a href="#">Posuere Augue Sit Nisl</a></li>
</ul>
</li>
<li>
<h2>Blog Roll</h2>
<ul>
<li><a href="#">Donec Dictum Metus</a></li>
<li><a href="#">Etiam Rhoncus Volutpat</a></li>
<li><a href="#">Integer Gravida Nibh</a></li>
<li><a href="#">Maecenas Luctus Lectus</a></li>
<li><a href="#">Mauris Vulputate Dolor Nibh</a></li>
<li><a href="#">Nulla Luctus Eleifend</a></li>
<li><a href="#">Posuere Augue Sit Nisl</a></li>
</ul>
</li>
</ul>
</div>
<!-- end #links -->
<div style="clear: both;">&nbsp;</div>
</div>
</div>
<!-- end #content -->
<div id="footer">
<p id="legal">Copyright &copy; The Green House. Designed by <a href="http://templated.co" rel="nofollow">TEMPLATED</a></p>
<p id="brand">The Green House</p>
</div>
<!-- end #footer -->
</body>
</html>
This diff is collapsed.
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
/* CSS Document */
body{padding:0px; margin:0px; background:#f7f6e4; color:#323639; font:10px/14px Tahoma, sans-serif; }
div, p, ul, h2, h3, h4, img{padding:0px; margin:0px;}
ul{list-style-type:none;}
.clear {clear: both; margin: 0px}
/* HEADER */
#header{height:392px; width:775px; margin: 0 auto; position:relative; background:url(../images/b_top.jpg) 0 0 no-repeat;}
#header ul.menu{height:51px; position:absolute; top:0px; left:59px}
#header ul.menu li{float:left; margin-right:22px}
#header ul.menu li.home a{width:91px; height:51px; display:block; background:url(../images/btn_home.gif) 0 29px no-repeat; text-indent:-20000px;}
#header ul.menu li.home a:hover{width:91px; height:51px; background:url(../images/btn_home_over.gif) 0 29px no-repeat;}
#header ul.menu li.about a{width:76px; height:51px; display:block; background:url(../images/btn_about.gif) 0 29px no-repeat; text-indent:-20000px;}
#header ul.menu li.about a:hover{width:76px; height:51px; background:url(../images/btn_about_over.gif) 0 29px no-repeat;}
#header ul.menu li.services a{width:72px; height:51px; display:block; background:url(../images/btn_services.gif) 0 29px no-repeat; text-indent:-20000px;}
#header ul.menu li.services a:hover{width:72px; height:51px; background:url(../images/btn_services_over.gif) 0 29px no-repeat;}
#header ul.menu li.advice a{width:59px; height:51px; display:block; background:url(../images/btn_advice.gif) 0 29px no-repeat; text-indent:-20000px;}
#header ul.menu li.advice a:hover{width:59px; height:51px; background:url(../images/btn_advice_over.gif) 0 29px no-repeat;}
#header ul.menu li.staff a{width:77px; height:51px; display:block; background:url(../images/btn_staff.gif) 0 29px no-repeat; text-indent:-20000px;}
#header ul.menu li.staff a:hover{width:77px; height:51px; background:url(../images/btn_staff_over.gif) 0 29px no-repeat;}
#header ul.menu li.contacts a{width:73px; height:51px; display:block; background:url(../images/btn_contacts.gif) 0 29px no-repeat; text-indent:-20000px;}
#header ul.menu li.contacts a:hover{width:73px; height:51px; background:url(../images/btn_contacts_over.gif) 0 29px no-repeat;}
#header ul.menu li.spacerline{width:2px; height:51px; display:block; background:url(../images/line_menu.jpg) 0 0 no-repeat;}
#header #logo{width:338px; height:84px; position:absolute; top:115px; left:47px}
#header #call{width:242px; height:40px; position:absolute; top:233px; left:206px}
#header ul.links{height:41px; position:absolute; top:327px; left:17px}
#header ul.links li{float:left; margin-right:25px}
#header ul.links li.treatment a{width:242px; height:41px; display:block; background:url(../images/btn_treatment.jpg) 0 0 no-repeat; text-indent:-20000px;}
#header ul.links li.tour a{width:221px; height:41px; display:block; background:url(../images/btn_tour.jpg) 0 0 no-repeat; text-indent:-20000px;}
/* CONTENT */
#content{width:775px; margin: 0 auto; position:relative; clear:both;}
#content a{font:10px/14px Tahoma, sans-serif; color:#323639; font-weight:bold; text-decoration:none }
#content a:hover{color:#000; border-bottom: #000 1px dotted; text-decoration:none }
#content p span.headline{font:12px/12px Trebuchet MS, sans-serif; color:#93880d; font-weight:bold;}
#content p span.headline2{font:12px/12px Trebuchet MS, sans-serif; color:#585c30; font-weight:bold;}
#content img{border:#babaa4 2px solid;}
#leftPan{width:340px; margin: 0 55px 10px 20px; position:relative; float:left; display:inline;}
#specialists{width:337px; position:relative; margin-left:3px;}
#specialists h2{height:34px; background:url(../images/h_specialists.gif) 0 0 no-repeat; position:relative; padding: 0 0 7px 0;}
#specialists ul{margin:0 0 20px 9px; width:155px; float:left; display:inline}
#specialists li{ background:url(../images/arrow.jpg) 0 2px no-repeat; padding-left:19px; height:18px}
#specialists li a{ font:10px/14px Tahoma, sans-serif; color:#585c30; font-weight:normal; text-decoration:underline }
#specialists li a:hover{color:#000; font-weight:normal; text-decoration:none; border-bottom: #000 1px dotted;}
#doctor{width:340px; position:relative; }
#doctor h2{height:28px; background:#e5e3cd url(../images/h_dr.gif) 10px 4px no-repeat; position:relative;}
#doctor #frame{background:#f0efdb; padding:22px 15px 0 21px }
#doctor #frame img{width:98px; float:left; margin-right:8px; margin-bottom:10px}
#doctor #frame #drtext{width:190px; float:left; margin-bottom:10px}
#doctor #frame #drtext p{width:165px; background:url(../images/bullet.jpg) 2px 0 no-repeat; padding: 2px 0 10px 23px;}
#rightPan{width:330px; position:relative; float:left; margin-bottom:10px}
#welcome{width:330px; position:relative; margin-bottom:30px;}
#welcome h2{height:34px; background:url(../images/h_welcome.gif) 0 0 no-repeat; position:relative; padding: 0 0 7px 0;}
#services{width:330px; position:relative;}
#services h2{height:34px; background:url(../images/h_services.gif) 0 0 no-repeat; position:relative; margin: 0 0 7px 0;}
.topic{width:325px; margin-left:3px; margin-bottom:10px}
.topic img{float:left; margin-right:10px; margin-bottom:10px}
.topic p{ padding-top:2px}
/* FOOTER*/
#footer{width:775px; height:81px; margin: 0 auto; position:relative; clear:both; background:url(../images/b_footer.jpg) 0 0 no-repeat;}
#footer p{padding: 26px 0 0 0; font:10px/16px Tahoma, Arial, Helvetica, sans-serif; font-weight:normal; text-align:center; color:#fff;}
#footer p a{font:10px/16px Tahoma, Arial, Helvetica, sans-serif; font-weight:normal; color:#fff; text-decoration:none; padding: 0 5px }
#footer p a:hover{color:#000; background:#fff; border-bottom: #000 1px dotted; }
\ No newline at end of file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pets Hospital</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- HEADER -->
<div id="header">
<ul class="menu">
<li class="home"><a href="#" title="Home Page">Home</a></li>
<li class="spacerline"></li>
<li class="about"><a href="#" title="About Us">About</a></li>
<li class="spacerline"></li>
<li class="services"><a href="#" title="Services">Services</a></li>
<li class="spacerline"></li>
<li class="advice"><a href="#" title="Advice">Advice</a></li>
<li class="spacerline"></li>
<li class="staff"><a href="#" title="Our Staff">Our Staff</a></li>
<li class="spacerline"></li>
<li class="contacts"><a href="#" title="Contacts">Contacts</a></li>
</ul>
<div id="logo"><a href="#"><img src="images/logo.gif" alt="Pets Hospital" width="338" height="84" border="0" /></a></div>
<div id="call"><img src="images/call.jpg" alt="" width="242" height="40" /></div>
<ul class="links">
<li class="treatment"><a href="#" title="New Treatment Methods">New Treatment Methods</a></li>
<li class="tour"><a href="#" title="Hospital Virtual Tour">Hospital Virtual Tour</a></li>
</ul>
</div>
<!-- CONTENT -->
<div id="content">
<div id="leftPan">
<div id="specialists">
<h2></h2>
<ul>
<li><a href="#">Ascing elit Dolores et ea </a></li>
<li><a href="#">consetetur consetetur sadi </a></li>
<li><a href="#">sed et ea consetetur sadi </a></li>
</ul>
<ul>
<li><a href="#">Ascing elit Dolores et ea </a></li>
<li><a href="#">consetetur consetetur sadi </a></li>
<li><a href="#">sed et ea consetetur sadi </a></li>
</ul>
<div class="clear"></div>
</div>
<div id="doctor">
<h2></h2>
<div id="frame">
<img src="images/img_dr.jpg" alt="" width="98" height="145" />
<div id="drtext">
<p><span class="headline">Dolores et ea consetetur lorem pscing elit sadi lorem</span><br />Consetetur sadi pscing consetetur pscing elitr, sed diam Consetetur sadi lorem sed et ea <a href="#">:: more</a></p>
<p><span class="headline">Lorem et ea consetetur lorem pscing elit sadi lorem </span><br />sadi consetetur sadi Consetetur sadi pscing consetetur sadi consetetur sadi <a href="#">:: more</a></p>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div id="rightPan">
<div id="welcome">
<h2></h2>
<p><span class="headline">Dolores et ea consetetur lorem pscing elit sadi lorem</span><br />Consetetur sadi pscing consetetur pscing elitr, sed diam Consetetur sadi lorem sed et ea consetetur sadi consetetur sadi Consetetur sadi pscing consetetur sadi consetetur sadi <a href="#">:: more</a></p>
</div>
<div id="services">
<h2></h2>
<div class="topic">
<img src="images/img_services1.jpg" alt="" width="56" height="56" />
<p><span class="headline2">Sed et ea consetetur lorem pscing elit</span><br />
diam Consetetur sadi lorem sed et ea consetetur sadi consetetur sadi Consetetur sadi pscing consetetur sadi consetetur sadi <a href="#">:: more</a></p>
<div class="clear"></div>
</div>
<div class="topic">
<img src="images/img_services2.jpg" alt="" width="56" height="56" />
<p><span class="headline2">Lorem ipsum consetetur lorem pscing elit </span><br />
diam Consetetur sadi lorem sed et ea consetetur sadi consetetur sadi Consetetur sadi pscing consetetur sadi consetetur sadi <a href="#">:: more</a></p>
<div class="clear"></div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<!-- FOOTER -->
<div id="footer">
<p><a href="#">HOME</a> | <a href="#">ABOUT US</a> | <a href="#">SERVICES</a> | <a href="#">ADVICE</a> | <a href="#">OUR STAFF</a> | <a href="#">NEWS &amp; EVENTS</a> | <a href="#">SUPPORT</a> | <a href="#">CONTACTS</a><br/>
Copyright &copy; Your Company Name</p>
</div>
</body>
</html>
The MIT License (MIT)
Copyright (c) 2013-2017 Blackrock Digital LLC
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
\ No newline at end of file
# [Start Bootstrap - Stylish Portfolio](https://startbootstrap.com/template-overviews/stylish-portfolio/)
[Stylish Portfolio](http://startbootstrap.com/template-overviews/stylish-portfolio/) is a responsive, one page portfolio theme for [Bootstrap](http://getbootstrap.com/) created by [Start Bootstrap](http://startbootstrap.com/). The theme features multiple content sections with an off canvas navigation menu.
## Preview
[![Stylish Portfolio Preview](https://startbootstrap.com/assets/img/templates/stylish-portfolio.jpg)](https://blackrockdigital.github.io/startbootstrap-stylish-portfolio/)
**[View Live Preview](https://blackrockdigital.github.io/startbootstrap-stylish-portfolio/)**
## Status
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/BlackrockDigital/startbootstrap-stylish-portfolio/master/LICENSE)
[![npm version](https://img.shields.io/npm/v/startbootstrap-stylish-portfolio.svg)](https://www.npmjs.com/package/startbootstrap-stylish-portfolio)
[![Build Status](https://travis-ci.org/BlackrockDigital/startbootstrap-stylish-portfolio.svg?branch=master)](https://travis-ci.org/BlackrockDigital/startbootstrap-stylish-portfolio)
[![dependencies Status](https://david-dm.org/BlackrockDigital/startbootstrap-stylish-portfolio/status.svg)](https://david-dm.org/BlackrockDigital/startbootstrap-stylish-portfolio)
[![devDependencies Status](https://david-dm.org/BlackrockDigital/startbootstrap-stylish-portfolio/dev-status.svg)](https://david-dm.org/BlackrockDigital/startbootstrap-stylish-portfolio?type=dev)
## Download and Installation
To begin using this template, choose one of the following options to get started:
* [Download the latest release on Start Bootstrap](https://startbootstrap.com/template-overviews/stylish-portfolio/)
* Install via npm: `npm i startbootstrap-stylish-portfolio`
* Clone the repo: `git clone https://github.com/BlackrockDigital/startbootstrap-stylish-portfolio.git`
* [Fork, Clone, or Download on GitHub](https://github.com/BlackrockDigital/startbootstrap-stylish-portfolio)
## Usage
### Basic Usage
After downloading, simply edit the HTML and CSS files included with the template in your favorite text editor to make changes. These are the only files you need to worry about, you can ignore everything else! To preview the changes you make to the code, you can open the `index.html` file in your web browser.
### Advanced Usage
After installation, run `npm install` and then run `gulp dev` which will open up a preview of the template in your default browser, watch for changes to core template files, and live reload the browser when changes are saved. You can view the `gulpfile.js` to see which tasks are included with the dev environment.
## Bugs and Issues
Have a bug or an issue with this template? [Open a new issue](https://github.com/BlackrockDigital/startbootstrap-stylish-portfolio/issues) here on GitHub or leave a comment on the [template overview page at Start Bootstrap](http://startbootstrap.com/template-overviews/stylish-portfolio/).
## Custom Builds
You can hire Start Bootstrap to create a custom build of any template, or create something from scratch using Bootstrap. For more information, visit the **[custom design services page](https://startbootstrap.com/bootstrap-design-services/)**.
## About
Start Bootstrap is an open source library of free Bootstrap templates and themes. All of the free templates and themes on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.
* https://startbootstrap.com
* https://twitter.com/SBootstrap
Start Bootstrap was created by and is maintained by **[David Miller](http://davidmiller.io/)**, Owner of [Blackrock Digital](http://blackrockdigital.io/).
* http://davidmiller.io
* https://twitter.com/davidmillerskt
* https://github.com/davidtmiller
Start Bootstrap is based on the [Bootstrap](http://getbootstrap.com/) framework created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thorton](https://twitter.com/fat).
## Copyright and License
Copyright 2013-2017 Blackrock Digital LLC. Code released under the [MIT](https://github.com/BlackrockDigital/startbootstrap-stylish-portfolio/blob/gh-pages/LICENSE) license.
/*!
* Start Bootstrap - Stylish Portfolio v4.0.0-beta.2 (https://startbootstrap.com/template-overviews/stylish-portfolio)
* Copyright 2013-2017 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-stylish-portfolio/blob/master/LICENSE)
*/
body,
html {
width: 100%;
height: 100%; }
body {
font-family: 'Source Sans Pro'; }
.btn-xl {
padding: 1.25rem 2.5rem; }
.content-section {
padding-top: 7.5rem;
padding-bottom: 7.5rem; }
.content-section-heading h2 {
font-size: 3rem; }
.content-section-heading h3 {
font-size: 1rem;
text-transform: uppercase; }
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700; }
.text-faded {
color: rgba(255, 255, 255, 0.7); }
/* Map */
.map {
height: 30rem; }
@media (max-width: 992px) {
.map {
height: 75%; } }
.map iframe {
pointer-events: none; }
.scroll-to-top {
position: fixed;
right: 15px;
bottom: 15px;
display: none;
width: 50px;
height: 50px;
text-align: center;
color: white;
background: rgba(52, 58, 64, 0.5);
line-height: 45px; }
.scroll-to-top:focus, .scroll-to-top:hover {
color: white; }
.scroll-to-top:hover {
background: #343a40; }
.scroll-to-top i {
font-weight: 800; }
.masthead {
min-height: 30rem;
position: relative;
display: table;
width: 100%;
height: auto;
padding-top: 8rem;
padding-bottom: 8rem;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("../img/bg-masthead.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover; }
.masthead h1 {
font-size: 4rem;
margin: 0;
padding: 0; }
@media (min-width: 992px) {
.masthead {
height: 100vh; }
.masthead h1 {
font-size: 5.5rem; } }
/* Side Menu */
#sidebar-wrapper {
position: fixed;
z-index: 2;
right: 0;
width: 250px;
height: 100%;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
transform: translateX(250px);
background: #1D809F;
border-left: 1px solid rgba(255, 255, 255, 0.1); }
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none; }
.sidebar-nav li.sidebar-nav-item a {
display: block;
text-decoration: none;
color: #fff;
padding: 15px; }
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2); }
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none; }
.sidebar-nav > .sidebar-brand {
font-size: 1.2rem;
background: rgba(52, 58, 64, 0.1);
height: 80px;
line-height: 50px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px; }
.sidebar-nav > .sidebar-brand a {
color: #fff; }
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none; }
#sidebar-wrapper.active {
right: 250px;
width: 250px;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s; }
.menu-toggle {
position: fixed;
right: 15px;
top: 15px;
width: 50px;
height: 50px;
text-align: center;
color: #fff;
background: rgba(52, 58, 64, 0.5);
line-height: 50px;
z-index: 999; }
.menu-toggle:focus, .menu-toggle:hover {
color: #fff; }
.menu-toggle:hover {
background: #343a40; }
.service-icon {
background-color: #fff;
color: #1D809F;
height: 7rem;
width: 7rem;
display: block;
line-height: 7.5rem;
font-size: 2.25rem;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1); }
.callout {
padding: 15rem 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("../img/bg-callout.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover; }
.callout h2 {
font-size: 3.5rem;
font-weight: 700;
display: block;
max-width: 30rem; }
.portfolio-item {
display: block;
position: relative;
overflow: hidden;
max-width: 530px;
margin: auto auto 1rem; }
.portfolio-item .caption {
display: flex;
height: 100%;
width: 100%;
background-color: rgba(33, 37, 41, 0.2);
position: absolute;
top: 0;
bottom: 0;
z-index: 1; }
.portfolio-item .caption .caption-content {
color: #fff;
margin: auto 2rem 2rem; }
.portfolio-item .caption .caption-content h2 {
font-size: 0.8rem;
text-transform: uppercase; }
.portfolio-item .caption .caption-content p {
font-weight: 300;
font-size: 1.2rem; }
@media (min-width: 992px) {
.portfolio-item {
max-width: none;
margin: 0; }
.portfolio-item .caption {
-webkit-transition: -webkit-clip-path 0.25s ease-out, background-color 0.7s;
-webkit-clip-path: inset(0px);
clip-path: inset(0px); }
.portfolio-item .caption .caption-content {
transition: opacity 0.25s;
margin-left: 5rem;
margin-right: 5rem;
margin-bottom: 5rem; }
.portfolio-item img {
-webkit-transition: -webkit-clip-path 0.25s ease-out;
-webkit-clip-path: inset(-1px);
clip-path: inset(-1px); }
.portfolio-item:hover img {
-webkit-clip-path: inset(2rem);
clip-path: inset(2rem); }
.portfolio-item:hover .caption {
background-color: rgba(29, 128, 159, 0.9);
-webkit-clip-path: inset(2rem);
clip-path: inset(2rem); } }
footer.footer {
padding-top: 5rem;
padding-bottom: 5rem; }
footer.footer .social-link {
display: block;
height: 4rem;
width: 4rem;
line-height: 4.3rem;
font-size: 1.5rem;
background-color: #1D809F;
transition: background-color 0.15s ease-in-out;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1); }
footer.footer .social-link:hover {
background-color: #155d74;
text-decoration: none; }
a {
color: #1D809F; }
a:hover, a:focus, a:active {
color: #155d74; }
.btn-primary {
background-color: #1D809F !important;
border-color: #1D809F !important;
color: #fff !important; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background-color: #155d74 !important;
border-color: #155d74 !important; }
.btn-secondary {
background-color: #ecb807 !important;
border-color: #ecb807 !important;
color: #fff !important; }
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
background-color: #ba9106 !important;
border-color: #ba9106 !important; }
.btn-dark {
color: #fff !important; }
.btn {
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
font-weight: 700; }
.bg-primary {
background-color: #1D809F !important; }
.text-primary {
color: #1D809F !important; }
.text-secondary {
color: #ecb807 !important; }
/*!
* Start Bootstrap - Stylish Portfolio v4.0.0-beta.2 (https://startbootstrap.com/template-overviews/stylish-portfolio)
* Copyright 2013-2017 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-stylish-portfolio/blob/master/LICENSE)
*/body,html{width:100%;height:100%}body{font-family:'Source Sans Pro'}.btn-xl{padding:1.25rem 2.5rem}.content-section{padding-top:7.5rem;padding-bottom:7.5rem}.content-section-heading h2{font-size:3rem}.content-section-heading h3{font-size:1rem;text-transform:uppercase}h1,h2,h3,h4,h5,h6{font-weight:700}.text-faded{color:rgba(255,255,255,.7)}.map{height:30rem}@media (max-width:992px){.map{height:75%}}.map iframe{pointer-events:none}.scroll-to-top{position:fixed;right:15px;bottom:15px;display:none;width:50px;height:50px;text-align:center;color:#fff;background:rgba(52,58,64,.5);line-height:45px}.scroll-to-top:focus,.scroll-to-top:hover{color:#fff}.scroll-to-top:hover{background:#343a40}.scroll-to-top i{font-weight:800}.masthead{min-height:30rem;position:relative;display:table;width:100%;height:auto;padding-top:8rem;padding-bottom:8rem;background:linear-gradient(90deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.1) 100%),url(../img/bg-masthead.jpg);background-position:center center;background-repeat:no-repeat;background-size:cover}.masthead h1{font-size:4rem;margin:0;padding:0}@media (min-width:992px){.masthead{height:100vh}.masthead h1{font-size:5.5rem}}#sidebar-wrapper{position:fixed;z-index:2;right:0;width:250px;height:100%;-webkit-transition:all .4s ease 0s;-moz-transition:all .4s ease 0s;-ms-transition:all .4s ease 0s;-o-transition:all .4s ease 0s;transition:all .4s ease 0s;transform:translateX(250px);background:#1d809f;border-left:1px solid rgba(255,255,255,.1)}.sidebar-nav{position:absolute;top:0;width:250px;margin:0;padding:0;list-style:none}.sidebar-nav li.sidebar-nav-item a{display:block;text-decoration:none;color:#fff;padding:15px}.sidebar-nav li a:hover{text-decoration:none;color:#fff;background:rgba(255,255,255,.2)}.sidebar-nav li a:active,.sidebar-nav li a:focus{text-decoration:none}.sidebar-nav>.sidebar-brand{font-size:1.2rem;background:rgba(52,58,64,.1);height:80px;line-height:50px;padding-top:15px;padding-bottom:15px;padding-left:15px}.sidebar-nav>.sidebar-brand a{color:#fff}.sidebar-nav>.sidebar-brand a:hover{color:#fff;background:0 0}#sidebar-wrapper.active{right:250px;width:250px;-webkit-transition:all .4s ease 0s;-moz-transition:all .4s ease 0s;-ms-transition:all .4s ease 0s;-o-transition:all .4s ease 0s;transition:all .4s ease 0s}.menu-toggle{position:fixed;right:15px;top:15px;width:50px;height:50px;text-align:center;color:#fff;background:rgba(52,58,64,.5);line-height:50px;z-index:999}.menu-toggle:focus,.menu-toggle:hover{color:#fff}.menu-toggle:hover{background:#343a40}.service-icon{background-color:#fff;color:#1d809f;height:7rem;width:7rem;display:block;line-height:7.5rem;font-size:2.25rem;box-shadow:0 3px 3px 0 rgba(0,0,0,.1)}.callout{padding:15rem 0;background:linear-gradient(90deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.1) 100%),url(../img/bg-callout.jpg);background-position:center center;background-repeat:no-repeat;background-size:cover}.callout h2{font-size:3.5rem;font-weight:700;display:block;max-width:30rem}.portfolio-item{display:block;position:relative;overflow:hidden;max-width:530px;margin:auto auto 1rem}.portfolio-item .caption{display:flex;height:100%;width:100%;background-color:rgba(33,37,41,.2);position:absolute;top:0;bottom:0;z-index:1}.portfolio-item .caption .caption-content{color:#fff;margin:auto 2rem 2rem}.portfolio-item .caption .caption-content h2{font-size:.8rem;text-transform:uppercase}.portfolio-item .caption .caption-content p{font-weight:300;font-size:1.2rem}@media (min-width:992px){.portfolio-item{max-width:none;margin:0}.portfolio-item .caption{-webkit-transition:-webkit-clip-path .25s ease-out,background-color .7s;-webkit-clip-path:inset(0);clip-path:inset(0)}.portfolio-item .caption .caption-content{transition:opacity .25s;margin-left:5rem;margin-right:5rem;margin-bottom:5rem}.portfolio-item img{-webkit-transition:-webkit-clip-path .25s ease-out;-webkit-clip-path:inset(-1px);clip-path:inset(-1px)}.portfolio-item:hover img{-webkit-clip-path:inset(2rem);clip-path:inset(2rem)}.portfolio-item:hover .caption{background-color:rgba(29,128,159,.9);-webkit-clip-path:inset(2rem);clip-path:inset(2rem)}}footer.footer{padding-top:5rem;padding-bottom:5rem}footer.footer .social-link{display:block;height:4rem;width:4rem;line-height:4.3rem;font-size:1.5rem;background-color:#1d809f;transition:background-color .15s ease-in-out;box-shadow:0 3px 3px 0 rgba(0,0,0,.1)}footer.footer .social-link:hover{background-color:#155d74;text-decoration:none}a{color:#1d809f}a:active,a:focus,a:hover{color:#155d74}.btn-primary{background-color:#1d809f!important;border-color:#1d809f!important;color:#fff!important}.btn-primary:active,.btn-primary:focus,.btn-primary:hover{background-color:#155d74!important;border-color:#155d74!important}.btn-secondary{background-color:#ecb807!important;border-color:#ecb807!important;color:#fff!important}.btn-secondary:active,.btn-secondary:focus,.btn-secondary:hover{background-color:#ba9106!important;border-color:#ba9106!important}.btn-dark{color:#fff!important}.btn{box-shadow:0 3px 3px 0 rgba(0,0,0,.1);font-weight:700}.bg-primary{background-color:#1d809f!important}.text-primary{color:#1d809f!important}.text-secondary{color:#ecb807!important}
\ No newline at end of file
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var header = require('gulp-header');
var cleanCSS = require('gulp-clean-css');
var rename = require("gulp-rename");
var uglify = require('gulp-uglify');
var pkg = require('./package.json');
// Set the banner content
var banner = ['/*!\n',
' * Start Bootstrap - <%= pkg.title %> v<%= pkg.version %> (<%= pkg.homepage %>)\n',
' * Copyright 2013-' + (new Date()).getFullYear(), ' <%= pkg.author %>\n',
' * Licensed under <%= pkg.license %> (https://github.com/BlackrockDigital/<%= pkg.name %>/blob/master/LICENSE)\n',
' */\n',
''
].join('');
// Compiles SCSS files from /scss into /css
gulp.task('sass', function() {
return gulp.src('scss/stylish-portfolio.scss')
.pipe(sass())
.pipe(header(banner, {
pkg: pkg
}))
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
});
// Minify compiled CSS
gulp.task('minify-css', ['sass'], function() {
return gulp.src('css/stylish-portfolio.css')
.pipe(cleanCSS({
compatibility: 'ie8'
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('css'))
.pipe(browserSync.reload({
stream: true
}))
});
// Minify custom JS
gulp.task('minify-js', function() {
return gulp.src('js/stylish-portfolio.js')
.pipe(uglify())
.pipe(header(banner, {
pkg: pkg
}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({
stream: true
}))
});
// Copy vendor files from /node_modules into /vendor
// NOTE: requires `npm install` before running!
gulp.task('copy', function() {
gulp.src([
'node_modules/bootstrap/dist/**/*',
'!**/npm.js',
'!**/bootstrap-theme.*',
'!**/*.map'
])
.pipe(gulp.dest('vendor/bootstrap'))
gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/jquery/dist/jquery.min.js'])
.pipe(gulp.dest('vendor/jquery'))
gulp.src(['node_modules/jquery.easing/*.js'])
.pipe(gulp.dest('vendor/jquery-easing'))
gulp.src([
'node_modules/font-awesome/**',
'!node_modules/font-awesome/**/*.map',
'!node_modules/font-awesome/.npmignore',
'!node_modules/font-awesome/*.txt',
'!node_modules/font-awesome/*.md',
'!node_modules/font-awesome/*.json'
])
.pipe(gulp.dest('vendor/font-awesome'))
gulp.src(['node_modules/simple-line-icons/*/*'])
.pipe(gulp.dest('vendor/simple-line-icons'))
})
// Default task
gulp.task('default', ['sass', 'minify-css', 'minify-js', 'copy']);
// Configure the browserSync task
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: ''
},
})
})
// Dev task with browserSync
gulp.task('dev', ['browserSync', 'sass', 'minify-css', 'minify-js'], function() {
gulp.watch('scss/*.scss', ['sass']);
gulp.watch('css/*.css', ['minify-css']);
gulp.watch('js/*.js', ['minify-js']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('*.html', browserSync.reload);
gulp.watch('js/**/*.js', browserSync.reload);
});
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment