123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              
		<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
		
		<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,700i,900" rel="stylesheet">


<!-- === HEADER === -->
		<header>
			<nav class="container">
				<h1 class="logo-nav"><span>///</span> Mache</h1>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About us</a></li>
					<li><a href="#">Our Services</a></li>
					<li><a href="#">Prices</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
				<section class="header-hero">
					<h2><span>Mache</span> free psd template</h2>
					<p>Elegant and clean PSD template, which you can download and use for free!<br>You can easily modify the design to make it your own and help you get your project running faster.</p>
					<button class="header-button">show more</button>
				</section>
			</nav>
		</header>
		<!-- === ABOUT === -->
			<section class="about">
				<div class="separator">
				</div>
				<div class="container">
					<div class="row">
						<div class="col-5 col-m-12 col-s-12">
							<h2>Powerfull PSD template available for free</h2>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis justo sed nulla iaculis, sed dictum risus condimentum. Donec blandit tellus ut nisl vehicula, vitae bibendum arcu laoreet. Etiam a rhoncus purus. Fusce a nisl blandit, mattis purus vitae, auctor leo.</p>
							<p class="video-button"><a href="#" target="_blank">See the video<span></span>  <i class="fa fa-play-circle-o"></i></a></p>
						</div>
						<div class="col-7 laptop-place">
								<div class="laptop">
									<img src="https://zapodaj.net/images/d476543e3ce97.png" alt="">
								</div>
						</div>
					</div>
				</div>
			</section>
			<section class="services">
				<div class="container">
					<div class="services-hero">
							<h2>Our Services</h2>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
					</div>
					<div class="row">
						<div class="col-3 col-m-6 col-s-12">
							<div class="services-icon">
								<img src="http://i67.tinypic.com/2ynplqg.png" alt="">
							</div>
							<p>Fully editable</p>
						</div>
						<div class="col-3 col-m-6 col-s-12">
							<div class="services-icon">
								<img src="http://i63.tinypic.com/2ql9wed.png" alt="">
							</div>
							<p>Free download</p>
						</div> 
						<div class="col-3 col-m-6 col-s-12">
							<div class="services-icon">
								<img src="http://i67.tinypic.com/25z4360.png" alt="">
							</div>
							<p>Modern design</p>
						</div>
						<div class="col-3 col-m-6 col-s-12">
							<div class="services-icon">
								<img src="http://i66.tinypic.com/25i4qxu.png" alt="">
							</div>
							<p>100% responsive</p>
						</div>
					</div>
				</div>
			</section>
			<section class="slider">
				<div class="container">
					<div class="slider-hero">
						<div class="row">
							<div class="col-1">
								<div class="slider-arrow-left">
									<img src="http://i66.tinypic.com/4lhbi0.png" alt="">
								</div>
							</div>
							<div class="col-10">
								<div class="text">
									<h3>“</h3>
									<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit, std do eiusmod tempor incididunt ut labore tet dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</h4>
									<h3 class="text-bottom">”</h3>
								</div>
							</div>
							<div class="col-1">
								<div class="slider-arrow-right">
									<img src="http://i68.tinypic.com/2vtds0w.png" alt="">
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<section class="prices">
				<div class="container">
					<div class="prices-hero">
							<h2>Check Our Prices</h2>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
					</div>
					<div class="row">
							<div class="col-3 col-m-12 col-s-12">
								<div class="box-top">
									<h2>$<span>19</span></h2>
									<p>per month</p>
									<button>standard</button>
								</div>
								<div class="box-bottom">
									<p>5 Projects</p>
									<p>200 MB Storage</p>
									<p>Notification settings</p>
									<p>Password protection</p>
									<button>Buy Now</button>
								</div>
							</div>
							<div class="col-3 col-m-12 col-s-12">
								<div class="box-top">
									<h2>$<span>39</span></h2>
									<p>per month</p>
									<button>business</button>
								</div>
								<div class="box-bottom">
									<p>15 Projects</p>
									<p>1 GB Storage</p>
									<p>Notification settings</p>
									<p>Password protection</p>
									<button>Buy Now</button>
								</div>
							</div>
							<div class="col-3 col-m-12 col-s-12">
								<div class="box-top">
									<h2>$<span>59</span></h2>
									<p>per month</p>
									<button>premium</button>
								</div>
								<div class="box-bottom">
									<p>30 Projects</p>
									<p>2 GB Storage</p>
									<p>Notification settings</p>
									<p>Password protection</p>
									<button>Buy Now</button>
								</div>
							</div>
							<div class="col-3 col-m-12 col-s-12">
								<div class="box-top">
									<h2>$<span>99</span></h2>
									<p>per month</p>
									<button>unlimited</button>
								</div>
								<div class="box-bottom">
									<p>Unlimited Projects</p>
									<p>Unlimited Storage</p>
									<p>Notification settings</p>
									<p>Password protection</p>
									<button>Buy Now</button>
								</div>
							</div>
					</div>
				</div>
			</section>
			<section class="icon">
				<div class="container">
					<div class="row">
						<div class="col-4 col-m-12 col-s-12">
							<div class="col-3 icon-image">
								<img src="http://i67.tinypic.com/1446uf6.png" alt="">
							</div>
							<div class="col-9 icon-text">
								<h2>Hight Resolution</h2>
								<p>Lorem ipsum dolor sit amet,  adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut</p>
							</div>
						</div>
						<div class="col-4 col-m-12 col-s-12">
							<div class="col-3 icon-image">
								<img src="http://i66.tinypic.com/15ywtop.png" alt="">
							</div>
							<div class="col-9 icon-text">
								<h2>Photography</h2>
								<p>Lorem ipsum dolor sit amet,  adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut</p>
							</div>
						</div>
						<div class="col-4 col-m-12 col-s-12">
							<div class="col-3 icon-image">
								<img src="http://i63.tinypic.com/6tn2pt.png" alt="">
							</div>
							<div class="col-9 icon-text">
								<h2>Easy to customize</h2>
								<p>Lorem ipsum dolor sit amet,  adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut</p>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-4 col-m-12 col-s-12">
							<div class="col-3 icon-image">
								<img src="http://i64.tinypic.com/e9x6z7.png" alt="">
							</div>
							<div class="col-9 icon-text">
								<h2>24/7 Support</h2>
								<p>Lorem ipsum dolor sit amet,  adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut</p>
							</div>
						</div>
						<div class="col-4 col-m-12 col-s-12">
							<div class="col-3 icon-image">
								<img src="http://i68.tinypic.com/2vc72md.png" alt="">
							</div>
							<div class="col-9 icon-text">
								<h2>Powerfull theme</h2>
								<p>Lorem ipsum dolor sit amet,  adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut</p>
							</div>
						</div>
						<div class="col-4 col-m-12 col-s-12">
							<div class="col-3 icon-image">
								<img src="http://i65.tinypic.com/ng2544.png" alt="">
							</div>
							<div class="col-9 icon-text">
								<h2>SEO Optimization</h2>
								<p>Lorem ipsum dolor sit amet,  adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut</p>
							</div>
						</div>
					</div>
				</div>
			</section>
			<section class="join">
				<div class="container">
					<h2>Became a part of <span>mache</span> community today</h2>
					<button>Join us</button>
				</div>
			</section>
			<section class="updates">
				<div class="container">
					<div class="updates-hero">
						<h2>Our Latest Updates</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
					</div>
					<div class="gallery">
						<div class="row">
							<div class="col-4 col-m-6 col-s-12">
								<div class="image image-1">
									<div class="layered">
									</div>
									<div class="icon-wrapper">
										<i class="fa fa-search fa-lg"></i>
									</div>
								</div>
								<div class="gallery-text">
									<h3>LOREM IPSUM DOLOR SIT</h3>
									<p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et.</p>
								</div>
							</div>
							<div class="col-4 col-m-6 col-s-12">
								<div class="image image-2">
									<div class="layered">
									</div>
									<div class="icon-wrapper">
										<i class="fa fa-search fa-lg"></i>
									</div>
								</div>
								<div class="gallery-text">
									<h3>LOREM IPSUM DOLOR SIT</h3>
									<p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et.</p>
								</div>
							</div>
							<div class="col-4  col-m-6 col-s-12">
								<div class="image image-3">
									<div class="layered">
									</div>
									<div class="icon-wrapper">
										<i class="fa fa-search fa-lg"></i>
									</div>
								</div>
								<div class="gallery-text">
									<h3>LOREM IPSUM DOLOR SIT</h3>
									<p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et.</p>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-4 col-m-6 col-s-12">
								<div class="image image-4">
									<div class="layered">
									</div>
									<div class="icon-wrapper">
										<i class="fa fa-search fa-lg"></i>
									</div>
								</div>
								<div class="gallery-text">
									<h3>LOREM IPSUM DOLOR SIT</h3>
									<p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et.</p>
								</div>
							</div>
							<div class="col-4 col-m-6 col-s-12">
								<div class="image image-5">
									<div class="layered">
									</div>
									<div class="icon-wrapper">
										<i class="fa fa-search fa-lg"></i>
									</div>
								</div>
								<div class="gallery-text">
									<h3>LOREM IPSUM DOLOR SIT</h3>
									<p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et.</p>
								</div>
							</div>
							<div class="col-4 col-m-6 col-s-12">
								<div class="image image-6">
									<div class="layered">
									</div>
									<div class="icon-wrapper">
										<i class="fa fa-search fa-lg"></i>
									</div>
								</div>
								<div class="gallery-text">
									<h3>LOREM IPSUM DOLOR SIT</h3>
									<p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et.</p>
								</div>
							</div>
						</div>
					</div>
					<div class="gallery-button">
						<button>Show More</button>
					</div>
				</div>
			</section>
			<section class="more">
				<div class="container">
					<div class="more-hero">
						<h2>Mache Free PSD Template</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
						<button>Show more</button>
					</div>
				</div>
			</section>
			<section class="download">
				<div class="container">
					<div class="row">
						<div class="col-6">
							<div class="download-image">
								<img src="http://i66.tinypic.com/e5mo3s.jpg" alt="">
							</div>
						</div>
						<div class="col-6 col-m-12 col-s-12">
							<div class="download-hero">
								<h2>Please share some love by appreciate it and download!</h2>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa</p>
								<button>Download now</button>
							</div>
						</div>
					</div>
				</div>
			</section>
			<footer>
				<div class="container">
					<div class="row">
						<div class="col-6 footer-left">
							<p>© 2015 Copyright mache template</p>
						</div>
						<div class="col-6 footer-right">
							<p>Designed by <img src="http://i67.tinypic.com/2i8ip8z.png" alt=""></p>
						</div>
					</div>
				</div>	
			</footer>
            
          
!
            
              /* GLOBAL variables - color */
$pink: #ed145b;
$grey: #5a5a5a;
$lightgrey: #f4f4f4;
$white: #FFFFFF;

/* EXTEND */

.centered-position {
	top: 50%;
	transform: translateY(-50%);
}

.underline-h2 {
	content: '';
	display: block;
	border: 1px solid $pink;
	width: 200px;
}

* {
	-webkit-box-sizing: border-box; /* iOS <= 4 i Android <= 2.3 */
	-moz-box-sizing: border-box; /* Firefox */
	box-sizing: border-box; /* Chrome, Opera, Safari 5+ i IE 8+ */
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Lato', sans-serif;
  overflow-x: hidden;
}

.container {
	max-width: 1200px;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding-left: 5px;
}

h2 {
	font-size: 38px;
	font-weight: 400;
	line-height: 52px;
	letter-spacing: 0.95px;	
}

button {
  	width: 200px;
  	height: 50px;
  	border-radius: 25px;
  	border: none;
 	text-transform: uppercase;
  	background-color: $pink;
	color: $lightgrey;
  	font-size: 15px;
	font-weight: 700;
	line-height: 38px;
  	letter-spacing: 0.38px;
}

/* === GRID === */

[class*="col-"] {
	float: left;
	min-height: 1px;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.col-offset-0 {margin-left: 0;}
.col-offset-1 {margin-left: 8.33%;}
.col-offset-2 {margin-left: 16.66%;}
.col-offset-3 {margin-left: 25%;}
.col-offset-4 {margin-left: 33.33%;}
.col-offset-5 {margin-left: 41.66%;}
.col-offset-6 {margin-left: 50%;}
.col-offset-7 {margin-left: 58.33%;}
.col-offset-8 {margin-left: 66.66%;}
.col-offset-9 {margin-left: 75%;}
.col-offset-10 {margin-left: 83.33%;}
.col-offset-11 {margin-left: 91.66%;}

.row::before,
.row::after {
	content: "";
	display: table;
	clear: both;
}

/* === HEADER === */

header {
	width: 100%;
	background-image: url(https://images.unsplash.com/photo-1439902315629-cd882022cea0?auto=format&fit=crop&w=500&q=80);
	background-size: cover;
	background-position: center;
	.logo-nav {
		color: $white;
		font-size: 25px;
		font-weight: 400;
		line-height: 13px;
		letter-spacing: 1px;
		display: inline-block;
		float: left;
		margin-top: 39px;
		.span {
			color: $pink;
			letter-spacing: 1px;	
		}
	}
	nav ul {
		float: right;
		list-style-type: none;
		margin-top: 44px;	
	}
	li {
		display: inline-block;	
	}
	a {
		color: $white;
		text-decoration: none;
		padding: 0 15px;
		color: white;
		font-size: 16px;
		font-weight: 700;
		line-height: 38px;
		letter-spacing: 0.4px;
		&:hover {
			color: $pink;
			letter-spacing: 0.4px;	
		}
	}
}


.header-hero {
	text-align: center;
	color: $white;
	padding-top: 222px;
	h2 {
		font-size: 46px;
		line-height: 24px;
		text-transform: uppercase;
		display: inline-block;
		&:after {
			@extend .underline-h2;
			margin: 39px auto 0px auto;	
		}
	}
	span {
		font-weight: 900;
	}
	p {
		font-size: 22px;
		font-weight: 300;
		line-height: 38px;
		letter-spacing: 0.55px;	
	}
} 

.header-button {
	margin-top: 85px;
	margin-bottom: 247px;
	&:hover {
		cursor: pointer;
		opacity: 0.7;	
	}
}

/* === ABOUT === */

.separator {
    position: relative;
    overflow: hidden;
    padding-bottom: 50px;
	background-color: $lightgrey;
	height: 78px;
	padding: 0px;
	width: 100%;
}

.separator:before, .separator:after{
    content: '';
    position: absolute;
  	-webkit-backface-visibility: hidden;
}

.separator:before{
    background: $pink;
    bottom:100%; left:-1%;
    width:100%; height:200%;
    
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    
    -webkit-transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
    transform: rotate(-1deg);    
}

.about {
	background-color: $lightgrey;
	width: 100%;
	.row {
		padding-top: 100px;	
	}
	h2 {
		color: $grey;
		font-style: italic;	
		&:after {
			margin: 40px 0 40px 0;
			@extend .underline-h2;	
		}
	}
	p {
		color: $grey;
		font-size: 15px;
		font-weight: 300;
		line-height: 30px;
		letter-spacing: 0.38px;	
	}
	.video-button {
		margin-top: 46px;
		margin-bottom: 98px;
		a {
			text-decoration: none;	
			color: $pink;
			font-size: 15px;
			font-weight: 400;
			line-height: 30px;
			text-transform: uppercase;
			letter-spacing: 0.38px;	
		}
		.fa {
			font-size: 27px;
			padding-left: 5px;	
		}
	}
}

.laptop {
	position: relative;
	img {
		position: absolute;
		left: 0;
		margin-top: 10px;
		overflow: hidden;	
	}
}

/* === SERVICES === */

.services {
	margin: 157px auto 121px auto;
	text-align: center;
	.services-hero {
		text-align: center;
		color: $grey;;
		margin-bottom: 94px;
		margin-top: 152px;	
	}
}

.services h2::after {
	margin: 39px auto 0px auto;
	@extend .underline-h2;
}

.services p {
	max-width: 681px;
	margin: 82px auto 0px auto;
	font-size: 15px;
	font-weight: 300;
	line-height: 30px;
	letter-spacing: 0.38px;
}

.services-icon {
	width: 130px;
	height: 130px;
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 50%;
	margin: 0 auto;
	img {
		position: relative;
		@extend .centered-position	
	}
}

.services .row p {
	text-transform: uppercase;	
	color: $pink;
	font-size: 15px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: 0.38px;
}

/* === SLIDER === */

.slider {
	width: 100%;
	background-image: url(https://images.unsplash.com/photo-1439902315629-cd882022cea0?auto=format&fit=crop&w=500&q=80);
	background-size: cover;
	background-position: center;
	margin: 0 auto;
	.slider-hero {
		text-align: center;
		position: relative;	
	}
}

.slider-arrow-left {
	position: absolute;
    @extend .centered-position
}

.slider-arrow-right {
	position: absolute;
    @extend .centered-position
}

.text {
	max-width: 824px;
	margin: 0 auto;
	h3 {
		font-size: 158px;
		line-height: 52px;
		color: $pink;
		font-style: italic;
		margin: 100px auto 48px auto;	
	}
	h4 {
		color: $white;
		font-size: 25px;
		font-weight: 400;
		line-height: 40px;
		letter-spacing: 0.63px;	
	}
}

/* === PRICES === */

.prices {
	background-color: $lightgrey;
	width: 100%;
	margin: 0 auto;
	.prices-hero {
		background-color: $lightgrey;
		text-align: center;
		color: $grey;
		h2 {
			margin: 0;	
			padding-top: 149px;
			padding-bottom: 82px;
			&:after {
				margin: 39px auto 0px auto;
				@extend .underline-h2;	
			}
		}
		p {
			max-width: 681px;
			margin: 0 auto;
			font-size: 15px;
			font-weight: 300;
			line-height: 30px;
			letter-spacing: 0.38px;
			text-align: center;	
		}
	}
}

.prices .container .row {
	margin: 0 auto;	
}

.box-top {
	width: 262px;
  	height: 180px;
	background-color: $grey;
	color: $lightgrey;
	text-align: center;	
	transition: .5s ease-out;
	position: relative;
  	margin: 92px auto 0px auto;
}

.box-top:hover {
	background-color: $pink;
	cursor: pointer;
}

.box-top h2 {
	font-size: 20px;
	font-weight: 700;
	line-height: 38px;
	letter-spacing: 0.5px;
  	padding-top: 33px;
  	margin: 0;
}

.box-top h2 span {
	font-size: 50px;
	letter-spacing: 1.25px;
}

.box-top p {
	font-size: 15px;
	font-weight: 700;
	line-height: 38px;
	letter-spacing: 0.38px;
	padding-top: 10px;
  	padding-bottom: 54px;
  	margin: 0;
}

.box-top button {
	background-color: $lightgrey;
	color: $grey;
	position: absolute;
	left: 50%; 
	transform: translateY(-50%) translateX(-50%);
}

.box-bottom {
	width: 262px;
	height: 352px;
	background-color: $white;
	text-align: center;
	margin: 0px auto 137px auto;
}

.box-bottom p:first-child {
	padding-top: 50px;
}

.box-bottom p {
	margin-top: 0px;
	color: $grey;
	font-size: 15px;
	font-weight: 300;
	line-height: 38px;
	letter-spacing: 0.38px;
}

.box-bottom button {
	margin: 38px auto 36px auto;
	transition: .5s ease-out;
}

.box-bottom button:hover {
	cursor: pointer;
	background-color: $lightgrey;
	color: $grey;
}

/* === ICON === */

.icon {
	width: 100%;
	margin: 150px auto 134px auto;
}

.icon img {
	padding-right: 26px;
	margin-top: 10px;
}

.icon h2 {
	color: $pink;
	font-size: 15px;
	line-height: 30px;
	text-transform: uppercase;
	letter-spacing: 0.38px;
	margin: 0;
}

.icon .col-9 {
	max-width: 262px;	
}

.icon p {
	color: $grey;
	font-size: 15px;
	font-weight: 300;
	line-height: 30px;
	letter-spacing: 0.38px;
}

.icon-image {
	margin: 0 auto;	
}

.icon-text {
	margin: 0 auto;	
}

/* === JOIN === */

.join {
	width: 100%;
	height: 200px;
	margin: 0 auto;
	background-color: $pink;
	text-align: center;
}

.join h2 {
	color: $white;
	font-weight: 300;
	line-height: 52px;
	text-transform: uppercase;
	display: inline-block;
	margin: 84px 41px 84px auto;	

}

.join h2 span {
	font-weight: 700;	
}

.join button {
	background-color: $white;
	color: $pink;
	margin: 88px auto 82px auto;
	padding: 0;
}

/* === UPDATES === */

.updates {
	width: 100%;
	margin: 0 auto;
	background-color: $white;
}

.updates-hero {
	text-align: center;
	color: $grey;
	padding-top: 147px;
} 

.updates-hero h2::after {
	margin: 39px auto 0px auto;
	@extend .underline-h2;
}

.updates-hero p {
	font-size: 15px;
	font-weight: 300;
	line-height: 30px;
	letter-spacing: 0.38px;
	max-width: 681px;
	margin: 41px auto 97px auto;
}

.updates .gallery {
	margin-bottom: 116px;
	padding-right: 28px;
}

.gallery .image-1 {
	background: url("http://i65.tinypic.com/28tyyk3.jpg");
}

.gallery .image-2 {
	background: url("http://i65.tinypic.com/212b7fb.png");
}

.gallery .image-3 {
	background: url("http://i66.tinypic.com/bdmq9l.jpg");
}

.gallery .image-4 {
	background: url("http://i64.tinypic.com/jqq2z9.png");
}

.gallery .image-5 {
	background: url("http://i68.tinypic.com/2lazs06.png");
}

.gallery .image-6 {
	background: url("http://i64.tinypic.com/fxecg9.png");
}

.gallery .image {
  	height: 300px;
  	width: 360px;
  	background-position: center;
  	background-size: cover;
  	margin: 0 auto;
  	position: relative;
  	overflow: hidden;
  	font-size: 50px;	
}

.gallery .layered {
	background-color: $pink;
    width: 300%;
    height: 120%;
    transform: -webkit-rotate(2deg);
    transform: -ms-rotate(2deg);
    transform: rotate(2deg);
    left:-2%;
    top: 0;
    margin-top: 305px;
    transition: .4s ease-in;
    position: absolute;
}

.gallery .image:hover .layered {
    margin-top: 0;
    background-color: rgba(237, 20, 91, 0.85);
    color: #fff;
}

.icon-wrapper {
	width: 100%;
	height: 100%;
	position: absolute;
	text-align: center;
	color: #fff;	
}

.icon-wrapper .fa {
	
	position: relative;
	@extend .centered-position;
	opacity: 0;
	transition: .8s;
}

.gallery .image:hover .fa {
	opacity: 1;
}

.gallery-text {
	width: 360px;
	height: 200px;
	background-color: $lightgrey;
	color: $grey;
	font-size: 15px;
	line-height: 30px;
	letter-spacing: 0.38px;
	padding-left: 20px;
	margin: 0 auto 60px auto;
}

.gallery-text h3 {
	margin: 0;
	font-weight: 400;
	text-transform: uppercase;
	padding-top: 30px;
	padding-bottom: 29px;
}

.gallery-text p {
	font-weight: 300;		
}
.gallery-button {
	margin: 0px auto 82px auto;
	text-align: center;
}

.gallery-button button {
	color: $pink;
	font-weight: 400;
	line-height: 30px;
	background-color: $white;
}

.gallery-button button:hover {
	background-color: $pink;
	color: $white;
	cursor: pointer;
}

.gallery-button button::after {
	content: url("http://i68.tinypic.com/23w5oqt.png");
	display: block;
	width: 17px;
	height: 8px;
	margin: 10px auto 0 auto;
}	

/* === MORE === */

.more {
	width: 100%;
	background-image: url(https://images.unsplash.com/photo-1439902315629-cd882022cea0?auto=format&fit=crop&w=500&q=80);
	background-size: cover;
	background-position: center;
}

.more-hero {
	text-align: center;
	color: $white;
}

.more-hero h2 {
	padding-top: 148px;
}

.more-hero h2::after {
	margin: 0 auto;
	@extend .underline-h2;
}

.more-hero p {
	max-width: 681px;
	font-size: 15px;
	font-weight: 300;
	line-height: 30px;
	letter-spacing: 0.38px;
	padding-bottom: 57px;
	margin: 33px auto 41px auto;
}

.more-hero button {
	margin-bottom: 150px;
}

/* === DOWNLOAD === */

.download {
	width: 100%;
	margin: 0 auto;
	background-color: $lightgrey;
}

.download-image {
	margin: 75px auto 78px auto;
	position: relative;
}

.download-image img {
	position: absolute; 
	right: 0;
	margin-right: 20px;
}

.download-hero {
	margin: 150px auto 165px auto;	
}

.download-hero h2 {
	color: $grey;
}

.download-hero h2::after {
	margin: 33px auto 45px 0;
	@extend .underline-h2;
}

.download-hero p {
	max-width: 466px;
	color: $grey;
	font-size: 15px;
	font-weight: 300;
	line-height: 30px;
	letter-spacing: 0.38px;
	margin-bottom: 57px;
}

/* === FOOTER === */

footer {
	width: 100%;
	background-color: #2b2b2b;
}

footer > .row {
	padding: 65px 5px 69px 5px;
}

footer p {
	color: $white;
	font-size: 15px;
	font-weight: 400;
	line-height: 40px;
	text-transform: uppercase;
}

.footer-left {
	text-align: left;
}

.footer-right {
	text-align: right;
}

.footer-right img {
	display: inline;	
}

.footer-right p {
	display: inline;	
}

/* === MEDIA === */

@media (max-width: 767px){
   
   
    /* === GRID For tablets: === */
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
    
    [class*="col-"] {
    width: 100%;
    padding: 12px;
   	float:left;
	}
	
		/* === HEADER == */
    
    .container .logo-nav {
		width: 100%;
		float: none;
		padding: 0;
		text-align: center;
	}
	
	.container ul {
		float: none;
		text-align: center;
		padding: 0;
	}
	
	.container ul li { 
		display: block;
	}
	
	.header-hero {
		padding-top: 0px;
	} 
	
	.header-hero h2 {
		font-size: 40px;
		line-height: 40px;
	}
		
	.header-button {
		margin-top: 20px;
		margin-bottom: 30px;
	}
	
	/* === ABOUT === */
	
	.about .container {
		text-align: center;	
	}
	
	.about .row {
		padding-top: 0px;	
	}
	
	.about h2::after {
		margin: 40px auto 40px auto;
	}

	.about .video-button {
		margin-top: 20px;
		margin-bottom: 30px;
	}
	
	.about .laptop {
		display: none;	
	}
	
	/* === SERVICES === */
	
	.services {
		margin: 20px auto;
	}
	
	.services-hero {
		margin: 0 auto;
	} 
	
	.services h2::after {
		margin: 39px auto 0px auto;
	}
	
	.services p {
		margin: 20px auto;
	}
	
	/* === PRICES === */
		
	.prices-hero h2 {
		padding-top: 20px;
		padding-bottom: 20px;
	}
	
	.box-top {
	  	margin: 30px auto 0px auto;
	}
	
	.box-top p {
	  	margin: 0;
	}
	
	.box-bottom {
		height: auto;
		margin: 0px auto 30px auto;
	}
	
	.box-bottom button {
		margin: 10px auto 10px auto;
	}
	
	/* === ICON === */
	
	.icon {
		margin: 30px auto;
	}
	
	.icon img {
		padding-right: 0px;
		margin: 10px auto;
	}
	
	.icon-image {
		margin: 0 auto;	
		display: block;
		text-align: center;
		float: none;
	}
	
	.icon-text {
		margin: 0 auto;	
		display: block;
		text-align: center;
		float: none;
	}
	
	/* === JOIN === */

	.join {
		height: auto;
	}
	
	.join h2 {
		margin: 10px auto;	
	}
	
	.join button {
		margin: 10px auto;
	}
	
	/* === UPDATES === */
	
	.updates-hero {
		padding-top: 0px;
	} 
	
	.updates-hero p {
		margin: 20px auto;
	}
	
	.updates .gallery {
		margin-bottom: 20px;
	}
	
	.gallery .layered {
		margin-top: 205px;
	}
	
	.icon-wrapper .fa {
		top: 80%;
		opacity: 0.8;
	}
		
	.gallery-text {
		margin: 0 auto 10px auto;
	}
	
	.gallery-button {
		margin: 20px auto;
	}
	
	/* === MORE === */

	.more-hero h2 {
		padding-top: 20px;
	}
	
	.more-hero p {
		margin-bottom: 10px;	
	}
		
	.more-hero button {
		margin-bottom: 20px;
	}
	
	/* === DOWNLOAD === */
		
	.download-image {
		display: none;
	}
	
	.download-hero {
		margin: 20px auto;	
		text-align: center;
	}
	
	.download-hero h2::after {
		margin: 33px auto 45px auto;
	}
	
	.download-hero p {
		text-align: center;
		margin: 0 auto 20px auto;
	}
	
	/* === FOOTER === */
	
	footer > .row {
		padding: 0px;
	}
	
	.footer-left {
		display: block;
		float: none;
		text-align: center;
		margin: 0 auto;
	}
	
	.footer-right {
		display: block;
		float: none;
		text-align: center;
		margin: 0 auto;
	}
	
    
    
	
}

@media (min-width: 768px) and (max-width: 1200px) {
	
	
    /* === GRID For desktop: === */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
    
  	/* === HEADER == */
    
    .container .logo-nav {
		width: 100%;
		float: none;
		padding: 0;
		text-align: center;
	}
	
	.container ul {
		float: none;
		text-align: center;
		padding: 0;
	}
	
	.container ul li { 
		display: block;
	}
	
	.header-hero {
		padding-top: 0px;
	} 
		
	.header-button {
		margin-top: 20px;
		margin-bottom: 30px;
	}
	
	/* === ABOUT === */
	
	.about .container {
		text-align: center;	
	}
	
	.about .row {
		padding-top: 0px;	
	}
	
	.about h2::after {
		margin: 40px auto 40px auto;
	}

	.about .video-button {
		margin-top: 20px;
		margin-bottom: 30px;
	}
	
	.about .laptop {
		display: none;	
	}
	
	/* === SERVICES === */
	
	.services {
		margin: 20px auto;
	}
	
	.services-hero {
		margin: 0 auto;
	} 
	
	.services h2::after {
		margin: 39px auto 0px auto;
	}
	
	.services p {
		margin: 20px auto;
	}
	
	/* === PRICES === */
		
	.prices-hero h2 {
		padding-top: 20px;
		padding-bottom: 20px;
	}
	
	.box-top {
	  	margin: 30px auto 0px auto;
	}
	
	.box-top p {
	  	margin: 0;
	}
	
	.box-bottom {
		height: auto;
		margin: 0px auto 30px auto;
	}
	
	.box-bottom button {
		margin: 10px auto 10px auto;
	}
	
	/* === ICON === */
	
	.icon {
		margin: 30px auto;
	}
	
	.icon img {
		padding-right: 0px;
		margin: 10px auto;
	}
	
	.icon-image {
		margin: 0 auto;	
		display: block;
		text-align: center;
		float: none;
	}
	
	.icon-text {
		margin: 0 auto;	
		display: block;
		text-align: center;
		float: none;
	}
	
	/* === JOIN === */

	.join h2 {
		margin: 10px auto;	
	}
	
	.join button {
		margin: 10px auto;
	}
	
	/* === UPDATES === */
	
	.updates-hero {
		padding-top: 0px;
	} 
	
	.updates-hero p {
		margin: 20px auto;
	}
	
	.updates .gallery {
		margin-bottom: 20px;
	}
	
	.gallery .layered {
		margin-top: 205px;
	}
	
	.icon-wrapper .fa {
		top: 80%;
		opacity: 0.8;
	}
		
	.gallery-text {
		margin: 0 auto 10px auto;
	}
	
	.gallery-button {
		margin: 20px auto;
	}
	
	/* === MORE === */

	.more-hero h2 {
		padding-top: 20px;
	}
	
	.more-hero p {
		margin-bottom: 10px;	
	}
		
	.more-hero button {
		margin-bottom: 20px;
	}
	
	/* === DOWNLOAD === */
		
	.download-image {
		display: none;
	}
	
	.download-hero {
		margin: 20px auto;	
		text-align: center;
	}
	
	.download-hero h2::after {
		margin: 33px auto 45px auto;
	}
	
	.download-hero p {
		text-align: center;
		margin: 0 auto 20px auto;
	}
	
	/* === FOOTER === */
	
	footer > .row {
		padding: 0px;
	}
	
	.footer-left {
		display: block;
		float: none;
		text-align: center;
		margin: 0 auto;
	}
	
	.footer-right {
		display: block;
		float: none;
		text-align: center;
		margin: 0 auto;
	}
	
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console