LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


	
	
  
	
  
	
	


	
	

Do you belive in unicorns, dragons and such?

Everything in this city is worth waiting in line for.

Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.

Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.

VIva!

Drinks and eats

Featured Flicks

Survive Style 5 +

Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee dragée chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.

Where in the universe do we exist?

Plane: Tiramisu caramels gummies chupa chups lollipop muffin. Jujubes chocolate caramels cheesecake brownie lollipop dragée cheesecake.

Train: Pie apple pie pudding I love wafer toffee liquorice sesame snaps lemon drops. Lollipop gummi bears dessert muffin I love fruitcake toffee pie.

Car: Jelly cotton candy bonbon jelly-o jelly-o I love. I love sugar plum chocolate cake pie I love pastry liquorice.

©2015 Viva Friends.
CSS
/* ================================= 
  Base Element Styles
==================================== */

* {
	box-sizing: border-box;
}

body {
	font-family: 'Varela Round', sans-serif;
	line-height: 1.6;
	color: #3a3a3a;
}

p {
	font-size: .95em;
	margin-bottom: 1.8em;
}

h2,
h3,
a {
	color: #093a58;
}

h2,
h3,
h4 {
	margin-top: 0;
}

h4 {
	margin-bottom: .4em;
}

a {
	text-decoration: none;
}

img {
	max-width: 100%;
}

figure {
	margin: 0;
	line-height: 0;
  position:relative;
}

figcaption {
  position:absolute;
  bottom: 0 ;
  width: 100%;
  
	font-size: .9em;
	line-height: 1.5;
	color: #fff;
	padding: 1em;	
	background: rgba(19,43,102, .85);
}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */

.name {
	font-size: 2.25em;
	margin: 0;
  font-family: 'Permanent Marker', cursive;
}

.main-nav {
	margin-top: 5px;
  font-size:1.50em;
  font-family: 'Bangers', cursive;
  list-style:none;
}

	.name a,
	.main-nav a {
		display: block;
		text-align: center;
		padding: 10px 15px;
	}
	
	.main-nav a {
		font-size: .95em;
		color: whitesmoke;
		text-transform: uppercase;
    
	}

	.main-nav a:hover {
		color: #093a58;
    
}

/* ---- Layout Containers ---- */

.main-header {
	padding-top: .5em;
	padding-bottom: .5em;
  background-color: #ff3333;
  
}

.banner,
.main-footer {
	text-align: center;
}

.banner {
  width:100%;
  background-repeat:no-repeat;
   background-size:cover; 
	background-image:url('http://www.barnabys.blogs.com/photos/uncategorized/survive.png');
	padding: 3.2em 0;
	margin-bottom: 60px;
}

.col {
	padding-right: 1em;
	padding-left: 1em;
}

.main-footer {
	background: #d9e4ea;
	padding: 2em 0;
	margin-top: 30px;
}

/* ---- Page Elements ---- */

.logo {
  margin-left:13%;
	width: 190px;
  height:190px;
  border-radius:100%;
  border:12px solid #b3b3b3;
  box-shadow: 0px 4px 2px black;
}

.headline {
   
	margin-bottom: 0;
  font-family: 'Bangers', cursive;
  color:orange;
}

.icon-location{
  width: 35px;
  position:absolute;
  top: -15px;
  right: -15px;
  z-index:2
}

.tagline{
  font-family:'Bangers', cursive;
  font-size: 1.4em;
  color:whitesmoke;
}

 .wrap{
    margin-left:24%;
   margin-top:5%;
    width:220px;
    height:150px;
    border:5px solid black;
    border-radius:5%;
    background-color:#336600;
    opacity:.9;
   position:relative;
     /* Chrome, Safari, Opera */
    -webkit-animation-name: OI;
    -webkit-animation-duration: .8s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    /* Standard syntax */
    animation-name: OI;
    animation-duration: .8s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

/* Chrome, Safari, Opera */
@-webkit-keyframes OI {
    0%   {  top:0px;}
    25%  {  top:0px;}
    50%  {  top:200px;}
    75%  {  top:200px;}
    100% {  top:0px;}
}

/* Standard syntax */
@keyframes OI {
    0%   {  top:1px;}
    25%  {  top:2px;}
    50%  {  top:-1px;}
    75%  {  top:-2px;}
    100% {  top:-1px;}
}
/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {

body{
  padding-top: 68px;
}

.main-header{
  position:fixed;
  border:1px solid #262626;
  background-size:cover;
  background-color:#336600;
  box-shadow: 0 1px 4px black;
  width:100%;
  top: 0 ;
  z-index:1000;
}

	.container {
		width: 90%;
		margin: 0 auto;
	}

	.name,
	.col {
		float: left;
    font-family: 'Permanent Marker', cursive;
	}

	.primary,
	.secondary {
		width: 50%;
	}

	.main-nav {
		float: right;
    }

	.main-nav li {
		display: inline-block;
		margin-left: 15px;
    }

	.tagline {
		font-size: 1.4em;
     color:whitesmoke;
	}
  
  .logo{
    margin-left:2%;
    margin-top:73px;
    border:12px solid grey;
    box-shadow: 0px 4px 2px black;
    border-radius:100%;
    height:220px;
    width:220px;
  }

  .headline{
    color:#fff;
  }
  .wrap{
    margin-left:39%;
    width:25%;
    height:4%;
    border:5px solid black;
    border-radius:5%;
    background-color:#336600;
    opacity:.9;
  }
	/* ---- Float clearfix ---- */

	.clearfix::after {
		content: " ";
		display: table;
		clear: both;
	}

}

@media (min-width: 1025px) {
	
	.container {
		width: 80%;
		max-width: 1150px;
	}

	.primary {
		width: 40%;
	}

	.secondary,
	.tertiary {
		width: 30%;
	}
  
  .wrap{
    margin-left:38%;
  }
  
  .logo{
    margin-left:0%;
  }

}

Description

This was some good fun. Simple responsive layout that screams Parallax! I didn't do it, why? Well because I'll do it next time. Thanks for checking it out!
Term
Sat, 01/13/2018 - 08:30

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv