#holiday-central
	header.page-head.paper
		h1.page-head-title.dark Holiday Central
		
	.wrapper
		section.hero(style="background:url(http://edge1.shop.com/ccimg.shop.com/Images/landingPages/2014/holiday-central/images/holiday-central.jpg) no-repeat right center / cover;")
			h2.four-line
				span.title.title-01 Our<br> Ultimate<br> Shopping<br> Guide
				span.title.title-02 Will Put<br>
				span.title.title-03 A Smile<br>
				span.title.title-04 On His Face
		
		nav.paper
			ul
				li
					a Holiday Central
				li
					a Beauty
				li
					a Health &amp; Nutrition
				li
					a Get The Look
				li
					a Top Gifts

		section.container.light.paper
			h3.container-title.text-center.dark.paper Gifts for <span>Her</span>

			ul.row
				li.col.span_1_4.block
					a(href="#")
						figure.product.tall(style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/f-01.jpg) no-repeat no-repeat top center #ddd; background-size: cover;")
							figcaption.bottom.frosted Chunky Sweaters
				li.col.span_1_4.block
					a(href="#")
						figure.product.short(style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/f-02.jpg) no-repeat no-repeat top center #ddd; background-size: cover;")
							figcaption.top.frosted Fitbit
				li.col.span_1_4.block
					a(href="#")
						figure.product.short(style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/f-03.jpg) no-repeat no-repeat top center #ddd; background-size: cover;")
							figcaption.top.frosted Cozy Robes
				li.col.span_1_4.block
					a(href="#")
						figure.product.short(style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/f-04.jpg) no-repeat no-repeat top center #ddd; background-size: cover;")
							figcaption.top.frosted iPhone 6 Cases
				li.col.span_2_4.block
					a(href="#")
						figure.product.short(style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/f-05.jpg) no-repeat no-repeat top center #ddd; background-size: cover;")
							figcaption.bottom.frosted Michael Kors Handbags
				li.col.span_1_4.block
					a(href="#")
						figure.product.short(style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/f-06.jpg) no-repeat no-repeat top center #ddd; background-size: cover;")
							figcaption.bottom.frosted Plush Blankets
							
		section.container.light.paper
			h3.container-title.text-center.dark.paper Gifts for <span>Him</span>

			ul.row
				li.col.span_1_4.block
					a(href="#")
						figure.product.tall(style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/m-01.jpg) no-repeat no-repeat top center #ddd; background-size: cover;")
							figcaption.bottom.frosted Cable Knit Sweaters
				li.col.span_1_4.block
					a(href="#")
						figure.product.short(style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/m-02.jpg) no-repeat no-repeat top center #ddd; background-size: cover;")
							figcaption.top.frosted Peacoats
				li.col.span_1_4.block
					a(href="#")
						figure.product.short(style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/m-03.jpg) no-repeat no-repeat top center #ddd; background-size: cover;")
							figcaption.top.frosted Wireless Headphones
				li.col.span_1_4.block
					a(href="#")
						figure.product.short(style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/m-04.jpg) no-repeat no-repeat top center #ddd; background-size: cover;")
							figcaption.top.frosted Scarves
				li.col.span_2_4.block
					a(href="#")
						figure.product.short(style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/m-05.jpg) no-repeat no-repeat top center #ddd; background-size: cover;")
							figcaption.bottom.frosted Watches
				li.col.span_1_4.block
					a(href="#")
						figure.product.short(style="background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/m-06.jpg) no-repeat no-repeat top center #ddd; background-size: cover;")
							figcaption.bottom.frosted Bluetooth Speakers
View Compiled
$color-a: #fff;
$color-b: #000;
$color-c: #85764e;
$color-d: #222;
$color-e: #eee;
$color-f: #eae3d0;

$theme-a: #000;
$theme-b: rgba(#000, 0.8);
$theme-c: #eaeaea;
$theme-d: #fff;
$theme-f: #333;
$theme-g: rgba(#000, 0.6);
$theme-h: rgba(#000, 0.4);
$theme-i: rgba(#000, 0.05);

$padding: 5px;

$width-a: 100%;
$width-b: 800px;
$width-c: 320px;

$font-a: 'Playfair Display', 'Times New Roman', Times, serif;
$font-b: 'helvetica lt std', Arial, Helvetica, sans-serif;

body{
	background: $color-e;
}

#holiday-central{
	// background-color: $color-a;
  color: $color-a;
  font: 400 14px 1.4em $font-b;
  margin: 0 auto;
  max-width: $width-b;
  min-width: $width-c;
  width: $width-a;
	
	*{
		box-sizing: border-box; 
		
		&:before, &:after{
			box-sizing: inherit;
		}
		
		margin: 0;
		padding: 0;
	}
	
	.clear{
    &:before, &:after{
      content:" ";
      display:table;
    }
    
    &:after {
      clear:both;
      content: "";
      display: table;
    }
  }
	
	h1{
		font-size: 1.2em;
		font-weight: 200;
		text-transform: uppercase;
	}
	
	h2{
		font-size: 1.5em;
	}
	
	h3{
		color: $color-a;
		font: 400 1.75em/1.4em $font-a;
		text-transform: uppercase;
	}
	
	a{
    color: $color-a;
		cursor: pointer;
    text-decoration: none;

    &:hover{
      color: $color-c;
      text-decoration: none;
    }
  }
	
	li{
		list-style: none;
	}
	
	section + section{
		margin-top: 40px!important;
	}
	
/*----Components----*/
	
	/*----Page Title----*/
	
	.page-head{
		background: $color-a;
		margin: 5px 0 -10px;
    max-width: 800px;
    min-width: 320px;
    position: relative;
    width: 100%;
		
		&:before{
			color: $color-b;
			content: '#shopholiday';
			float: right;
			font-size: 1.1em;
			line-height: 50px;
			padding: 0 8px;
		}
		
		&-title{
			display: inline-block;
      line-height: 50px;
      padding: 0 10px;
    }
	}
	
	/*----Page----*/
	
	.wrapper{
		background: $color-e;
    color: $color-a;
		margin: 0 0 25px;
		padding: 0 0 25px;
	}
	
	/*----Hero Section----*/
	
	.hero{
		background: #444;
		height: 300px;
		padding: 0 10px;
		width: $width-a;
		
		.four-line{
			display: flex;
			flex-direction: column;
			height: 300px;
			justify-content: flex-end;
		}
		
		.title{
			color: $color-a;
			display: block;
			text-transform: uppercase;
		
			&-01{
				font-size: .75em;
				font-weight: 200;
				line-height: .85em;
			}

			&-02{
				font-family: $font-a;
				font-size: 1.5em;
				font-weight: 900;
				letter-spacing: -.0625em;
				line-height: .75em;
			}
			
			&-03{
				font-family: $font-a;
				font-size: 3em;
				font-weight: 900;
				letter-spacing: -.0625em;
				line-height: .75em;

				@media screen and (min-width: 680px){
					font-size: 4em;
				}
			}
		
			&-04{
				font-family: $font-a;
				font-size: 1.5em;
				font-weight: 900;
				letter-spacing: -.0625em;
				line-height: 1em;

				@media screen and (min-width: 680px){
					font-size: 2em;
				}
			}
		}
	}
	
	nav{
		background: $color-b;
		height: 40px;
		overflow: hidden;
		
		
		ul{
			overflow-x: auto;
			text-align: center;
			white-space: nowrap;

			li{
				display: inline-block;
				font-size: .75em;
				line-height: 40px;
				margin: 0 10px;
				text-transform: uppercase;
			}
		}
	}
	
	/*----Product Section----*/
	
	.container{
		margin: 20px auto 5px;
		padding: 0 0 25px;
		width: 90%;
		
		&-title{
			height: 60px;
			line-height: 60px;
			margin: 0 auto;
			position: relative;
			top: 0; left: 0; bottom: 0; right: 0;
			transform: translateY(0);
			transition: transform .75s;
			z-index: 999;
			
			span{
				font-size:1.5em; font-weight:900;
			}

			@media screen and (min-width: 680px){
				transform: translateY(200px);
				width: 500px;
			}
		}
	}
	
	a > figure:hover{
		box-shadow: 0px 0px 25px -5px rgba(#333, .25), 0px 18px 8px -14px rgba(#333, .4);
		position: relative;
		z-index: 999;
		
		figcaption{
			color: #fff;
		}
	}

	figure{
		
		figcaption{
			font-size: .75em;
			height: 80px;
			line-height: 1.25em;
			padding: 5px;
			width: $width-a;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	
	/*---- Helpers ----*/
	
	.text-center{
		text-align: center;
	}
	
	.dark{
		background: $color-b;
		color: $color-a;
	}
	
	.light{
		background: $color-a;
		color: $color-b;
	}
	
	.paper{
		box-shadow: 0px 18px 8px -14px rgba(#333, .4);
	}
	
	.frosted{
		background: $theme-b;
			background: -webkit-gradient(linear, left top, right top, from($theme-b), color-stop(0.25, $theme-g), color-stop(0.5, $theme-h), color-stop(0.95, $theme-i));
			background: -webkit-linear-gradient(top, $theme-b, $theme-g 25%, $theme-h 50%, $theme-i 95%);
			background: -moz-linear-gradient(top, $theme-b, $theme-g 25%, $theme-h 50%, $theme-i 95%);
			background: -ms-linear-gradient(top, $theme-b, $theme-g 25%, $theme-h 50%, $theme-i 95%);
			background: -o-linear-gradient(top, $theme-b, $theme-g 25%, $theme-h 50%, $theme-i 95%);
	}
	
	
/*---- Grid ----*/
	
	.row{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 10px auto 0;
		max-width: 640px;
		padding: 0;
		width: 98%;

		@media screen and (min-width: 680px){
			justify-content: flex-start;
		}

		&:after {
			clear:both;
			content: "";
			display: table;
		}
	}
	
	.col{
		display: block;
	}

	.span_1_4{
		min-width: 260px;
		width: $width-a - 10;
		transition: min-width 0.75s;
		
		@media screen and (min-width: 380px){
			min-width: 160px;
			width: $width-a/4;
		}
	}

	.span_2_4{
		min-width: 260px;
		width: $width-a - 10;
		transition: min-width 0.75s;
		
		@media screen and (min-width: 380px){
			min-width: 160px;
			width: $width-a/4;
			transition: min-width 0.75s;
		}

		@media screen and (min-width: 680px){
			min-width: 320px;
		}
	}
	
	.block{

		&:first-child{
			order: 6;
			@media (min-width: 680px){
				margin-bottom: -160px;
				position: relative;
				top: -160px;
			}
		}

		&:nth-child(5){
			@media screen and (min-width: 680px){
				flex-grow: 2;
			}
		}
	}
	
 /*---- Products ----*/

  .product{
    background-color: #dddddd;
		position: relative;
  }

  .top{
    position: absolute;
    bottom: 0;

    @media screen and (min-width: 680px){
			top: 0;
		}
  }

  .bottom{
    bottom: 0;
    position: absolute;
  }

  .short{
    height: 260px;
		transition: height 0.75s;
		
		@media screen and (min-width: 380px){
			height: 160px;
		}
  }

  .tall{
    height: 260px;
    transition: height 0.75s;
		
		@media screen and (min-width: 380px){
			height: 160px;
			transition: height 0.75s;
		}
    
    @media screen and (min-width: 680px){
      height: 320px;
    }
  }

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.