<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/brianhaferkamp/pen/vmzwwR?limit=all&page=93&q=contact+" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Pragati+Narrow|Roboto" rel="stylesheet">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css'>
<style class="cp-pen-styles">@charset "UTF-8";
body {
margin: 0;
font-family: "Pragati Narrow", sans-serif;
}
.page-wrapper {
max-width: 425px;
margin: auto;
position: relative;
}
.grid-wrapper {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[4];
grid-template-columns: repeat(4, 1fr);
-ms-grid-rows: (100px)[4] 1fr;
grid-template-rows: repeat(4, 100px) 1fr;
-ms-flex-line-pack: stretch;
align-content: stretch;
height: 90vh;
}
.grid-item {
position: relative;
background-color: red;
color: white;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.grid-item p {
margin: 0;
}
.grid-item:nth-child(1) {
-ms-grid-column-span: 3;
-ms-grid-column: 2;
grid-column: 2/span 3;
-ms-grid-row: 1;
grid-row: 1;
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(https://unsplash.it/1500?image=479);
background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(https://unsplash.it/1500?image=479);
background-color: blue;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
text-align: right;
}
.grid-item:nth-child(5) {
background-color: black;
}
.grid-item:nth-child(2) {
background-color: black;
color: white;
}
.grid-item:nth-child(3) {
background-color: rgba(0, 0, 255, 0.7);
color: white;
}
.grid-item:nth-child(4) {
-ms-grid-column-span: 4;
-ms-grid-column: 1;
grid-column: 1/span 4;
-ms-grid-row-span: 2;
-ms-grid-row: 2;
grid-row: 2/span 2;
background-color: orange;
background-image: -webkit-linear-gradient(rgba(0, 0, 255, 0.3), rgba(0, 0, 255, 0.3)), url(https://unsplash.it/1500?image=1068);
background-image: linear-gradient(rgba(0, 0, 255, 0.3), rgba(0, 0, 255, 0.3)), url(https://unsplash.it/1500?image=1068);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 1rem;
}
.grid-item:nth-child(6) {
-ms-grid-column-span: 2;
-ms-grid-column: 1;
grid-column: 1/span 2;
-ms-grid-row-span: all;
-ms-grid-row: 4;
grid-row: 4/span all;
background-color: pink;
background-image: url(https://unsplash.it/1500?image=1027);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
padding: 1rem;
}
.grid-item:nth-child(7) {
-ms-grid-column-span: 2;
-ms-grid-column: 3;
grid-column: 3/span 2;
grid-row: 4/-1;
background-color: pink;
background-image: url(https://unsplash.it/1500?image=580);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.grid-item:nth-child(8) {
background-color: rgba(255, 255, 255, 0.3);
-ms-grid-column-span: 1;
-ms-grid-column: 4;
grid-column: 4/span 1;
-ms-grid-row: 1;
grid-row: 1;
height: 40px;
width: 40px;
justify-self: end;
}
.icon-menu,
.icon-shop {
font-size: 1.5rem;
padding: 0.5rem 0.5rem 0 0.5rem;
color: white;
}
.icon-shop {
font-size: 1.2rem;
}
.icon-logo {
font-size: 1.4rem;
color: white;
}
.go-link {
position: absolute;
right: 1rem;
bottom: 1rem;
width: 1.5rem;
border: 1px solid white;
text-align: center;
color: white;
}
.tile-heading {
font-weight: 400;
font-size: 1.2rem;
margin: 0;
line-height: 1;
margin-bottom: 0.5rem;
}
.tile-text {
font-size: 0.9rem;
line-height: 1;
}
.nav {
position: fixed;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: black;
color: white;
width: 100vw;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
max-width: 425px;
}
.nav ul {
list-style: none;
padding: 0;
}
.nav ul a {
font-size: 1.5rem;
text-decoration: none;
color: white;
}
.nav ul li {
padding: 1rem 0;
}
.nav ul .icon-apple {
text-align: center;
font-size: 3rem;
}
.icon-menu-close {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
font-size: 2rem;
color: white;
z-index: 100;
}
.hide {
display: none;
}
.page {
position: fixed;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 100vw;
height: 100vh;
overflow-y: auto;
background: white;
max-width: 425px;
}
.page img {
width: 100%;
}
.page-inner {
padding: 1rem;
margin-bottom: 3rem;
}
.page-intro {
line-height: 1.2;
}
.shop-wrapper {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[2];
grid-template-columns: repeat(2, 1fr);
grid-gap: 1rem;
}
.shop-item {
margin-bottom: 2rem;
}
.shop-item img {
width: 100%;
}
.shop-item-header {
margin: 0;
}
.shop-item-price {
font-size: 1.5rem;
}
.shop-item-summary {
line-height: 1.2;
margin: 0.5rem 0 2rem;
}
.shop-item-button {
border: 1px solid black;
background-color: transparent;
padding: 0.7rem 1rem;
width: 100%;
}
.accordion-heading {
font-size: 1.2rem;
}
details[open] summary::before {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
details[open] summary {
outline: 1px solid #ccc;
}
summary {
display: block;
outline: none;
padding: 0 0.3rem;
}
summary::-webkit-details-marker {
display: none;
}
summary:before {
display: inline-block;
content: "›";
margin-right: 0.5rem;
font-weight: bold;
font-size: 1.2rem;
}
.fade-in {
-webkit-animation: fadeIn 300ms ease;
animation: fadeIn 300ms ease;
opacity: 1;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.featured-headline {
line-height: 1.2;
}
.featured-article {
line-height: 1.3;
}
.featured-image-strip {
margin: 2rem 0 0;
}
.featured-image-strip-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
overflow-x: auto;
}
.featured-image-strip-inner img {
height: 100%;
}
.direction-arrows {
text-align: right;
margin: 0;
font-size: 1.5rem;
color: #ccc;
}
.icon-page-close {
position: absolute;
top: 1rem;
right: 1rem;
margin: 0;
font-size: 1.5rem;
width: auto;
color: black;
z-index: 100;
}
.bottom-dock {
position: fixed;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
font-size: 2rem;
margin: 0;
z-index: 100;
}
.fullscreen {
color: black;
}
.fullscreen p {
margin: 0;
}
</style></head><body>
<div class="page-wrapper">
<div class="toolbar"> </div>
<div class="grid-wrapper">
<div class="grid-item">
<div class="grid-item-inner">
<h3 class="tile-heading">Lorem ipsum dolor</h3>
</div>
</div>
<div class="grid-item logo"><a href="#">
<p class="icon-logo"><i class="zmdi zmdi-apple"></i></p></a></div>
<div class="grid-item"><a href="#">
<p class="icon-shop"><i class="zmdi zmdi-shopping-basket"></i></p></a></div>
<div class="grid-item article-link" data-tab="article-1">
<div class="grid-item-inner">
<h3 class="tile-heading">Lorem ipsum dolor</h3>
<p class="tile-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum exercitationem tenetur accusamus suscipit neque ea necessitatibus nostrum earum commodi id </p><a class="go-link" href="#">
<p class="icon-go"><i class="zmdi zmdi-arrow-right"></i></p></a>
</div>
</div>
<div class="grid-item"><a href="#">
<p class="icon-menu"><i class="zmdi zmdi-menu"></i></p></a></div>
<div class="grid-item article-link" data-tab="article-2">
<div class="grid-item-inner">
<p class="tile-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</div>
<div class="grid-item"></div>
<div class="grid-item"><a class="fullscreen grid-item-inner" href="#">
<p class="icon-fullscreen"><i class="zmdi zmdi-arrow-right-top"></i></p>
<p class="icon-exit-fullscreen hide"><i class="zmdi zmdi-arrow-left-bottom"></i></p></a></div>
</div>
<nav class="nav hide">
<div class="nav-inner"><a href="#">
<p class="icon-menu-close"><i class="zmdi zmdi-close"></i></p></a>
<ul>
<li class="icon-apple"><i class="zmdi zmdi-apple"></i></li><a href="#" data-tab="shop">
<li>Shop</li></a><a href="#">
<li>Link 2</li></a><a href="#">
<li>Link 3</li></a>
</ul>
</div>
</nav>
<section class="page hide" id="shop">
<div class="page-inner">
<header>
<h2>Shop</h2>
</header>
<section class="shop-wrapper">
<div class="shop-item"><img src="https://placehold.it/800x1200"/>
<p class="shop-item-price">$13.99</p>
<h4 class="shop-item-header">Lorem ipsum dolor</h4>
<p class="shop-item-summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.</p>
<button class="shop-item-button">Purchase</button>
</div>
<div class="shop-item"><img src="https://placehold.it/800x1200"/>
<p class="shop-item-price">$9.99</p>
<h4 class="shop-item-header">Lorem ipsum dolor</h4>
<p class="shop-item-summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.</p>
<button class="shop-item-button">Purchase</button>
</div>
<div class="shop-item"><img src="https://placehold.it/800x1200"/>
<p class="shop-item-price">$20.99</p>
<h4 class="shop-item-header">Lorem ipsum dolor</h4>
<p class="shop-item-summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.</p>
<button class="shop-item-button">Purchase</button>
</div>
<div class="shop-item"><img src="https://placehold.it/800x1200"/>
<p class="shop-item-price">$2.99</p>
<h4 class="shop-item-header">Lorem ipsum dolor</h4>
<p class="shop-item-summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.</p>
<button class="shop-item-button">Purchase</button>
</div>
<div class="shop-item"><img src="https://placehold.it/800x1200"/>
<p class="shop-item-price">$99.99</p>
<h4 class="shop-item-header">Lorem ipsum dolor</h4>
<p class="shop-item-summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.</p>
<button class="shop-item-button">Purchase</button>
</div>
<div class="shop-item"><img src="https://placehold.it/800x1200"/>
<p class="shop-item-price">$139.99</p>
<h4 class="shop-item-header">Lorem ipsum dolor</h4>
<p class="shop-item-summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, totam numquam. Debitis, libero.</p>
<button class="shop-item-button">Purchase</button>
</div>
</section>
</div>
</section>
<section class="page hide" id="about">
<div class="page-inner">
<header>
<h2>About</h2>
</header>
<article>
<p class="page-intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non quam, asperiores in sapiente labore, harum quis quidem quo ratione illo magnam illum eum corporis, ipsam sunt numquam iste unde earum. Excepturi repellendus dignissimos accusamus, nobis harum reprehenderit tempora placeat similique ipsam minima nisi labore magni id, cum voluptatem praesentium, reiciendis.</p>
</article>
<section class="accordion">
<details role="group">
<summary class="accordion-heading">Contact Info</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste similique optio quasi deleniti placeat tempore nisi obcaecati, suscipit minus in dignissimos vitae consequatur earum dolore, asperiores saepe numquam aliquam!</p>
</details>
<details role="group">
<summary class="accordion-heading">Apple and the Environment</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste similique optio quasi deleniti placeat tempore nisi obcaecati, suscipit minus in dignissimos vitae consequatur earum dolore, asperiores saepe numquam aliquam!</p>
</details>
<details role="group">
<summary class="accordion-heading">Newsroom</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste similique optio quasi deleniti placeat tempore nisi obcaecati, suscipit minus in dignissimos vitae consequatur earum dolore, asperiores saepe numquam aliquam!</p>
</details>
<details role="group">
<summary class="accordion-heading">Supplier Responsibility</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste similique optio quasi deleniti placeat tempore nisi obcaecati, suscipit minus in dignissimos vitae consequatur earum dolore, asperiores saepe numquam aliquam!</p>
</details>
<details role="group">
<summary class="accordion-heading">Apple Job Creation</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis iste similique optio quasi deleniti placeat tempore nisi obcaecati, suscipit minus in dignissimos vitae consequatur earum dolore, asperiores saepe numquam aliquam!</p>
</details>
</section>
</div>
</section>
<article class="page hide" id="article-1">
<header><img class="featured-image" src="https://unsplash.it/1500?image=1068"/></header>
<div class="page-inner">
<h2 class="featured-headline">Lorem ipsum dolor sit amet, consectetur adipisicing elit sunt optio</h2>
<article class="featured-article">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi inventore quisquam dolor, non consectetur dolore numquam et voluptatibus ea, at autem cupiditate quo suscipit ratione eius nihil! Ipsum explicabo, non obcaecati porro, possimus ex odio sed, fuga incidunt dolores sit animi voluptate. Error temporibus doloremque, repellat nemo beatae omnis aliquid?</p>
<div class="featured-image-strip">
<div class="featured-image-strip-inner"><img src="https://unsplash.it/1500?image=479"/><img src="https://unsplash.it/1500?image=447"/><img src="https://unsplash.it/1500?image=434"/></div>
<p class="direction-arrows"><i class="zmdi zmdi-swap"></i></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi inventore quisquam dolor, non consectetur dolore numquam et voluptatibus ea, at autem cupiditate quo suscipit ratione eius nihil! Ipsum explicabo, non obcaecati porro, possimus ex odio sed, fuga incidunt dolores sit animi voluptate. Error temporibus doloremque, repellat nemo beatae omnis aliquid?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.</p>
</article>
</div>
</article>
<article class="page hide" id="article-2">
<header><img class="featured-image" src="https://unsplash.it/1500?image=1027"/></header>
<div class="page-inner">
<h2 class="featured-headline">Lorem ipsum dolor sit amet, consectetur adipisicing elit sunt optio</h2>
<article class="featured-article">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi inventore quisquam dolor, non consectetur dolore numquam et voluptatibus ea, at autem cupiditate quo suscipit ratione eius nihil! Ipsum explicabo, non obcaecati porro, possimus ex odio sed, fuga incidunt dolores sit animi voluptate. Error temporibus doloremque, repellat nemo beatae omnis aliquid?</p>
<div class="featured-image-strip">
<div class="featured-image-strip-inner"><img src="https://unsplash.it/1500?image=424"/><img src="https://unsplash.it/1500?image=407"/><img src="https://unsplash.it/1500?image=375"/><img src="https://unsplash.it/1500?image=365"/><img src="https://unsplash.it/1500?image=257"/></div>
<p class="direction-arrows"><i class="zmdi zmdi-swap"></i></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi inventore quisquam dolor, non consectetur dolore numquam et voluptatibus ea, at autem cupiditate quo suscipit ratione eius nihil! Ipsum explicabo, non obcaecati porro, possimus ex odio sed, fuga incidunt dolores sit animi voluptate. Error temporibus doloremque, repellat nemo beatae omnis aliquid?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos placeat error perferendis officiis cupiditate animi autem culpa corporis, reiciendis deserunt quaerat sunt eligendi accusamus. Architecto libero veritatis maiores cupiditate esse.</p>
</article>
</div>
</article><a class="page-close" href="#">
<p class="icon-page-close hide"><i class="zmdi zmdi-close"></i></p></a>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script >// Launch fullscreen
function launchIntoFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
$('.icon-fullscreen').on('click', function () {
$(this).addClass('hide');
launchIntoFullscreen(document.documentElement);
$('.icon-exit-fullscreen').removeClass('hide');
$('.grid-wrapper').css({
'height' : '100vh'
});
});
// Exit fullscreen
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
$('.icon-exit-fullscreen').on('click', function () {
$(this).addClass('hide');
exitFullscreen(document.documentElement);
$('.icon-fullscreen').removeClass('hide');
$('.grid-wrapper').css({
'height' : '90vh'
});
});
$('.icon-menu').on('click', function () {
$('.nav').removeClass('hide').addClass('fade-in');
$('.icon-page-close').removeClass('hide');
});
$('.icon-menu-close').on('click', function() {
$('.nav').addClass('hide').removeClass('fade-in');
$('.icon-page-close').addClass('hide');
});
$('.icon-shop').on('click', function () {
$('#shop').removeClass('hide').addClass('fade-in');
$('.icon-page-close').removeClass('hide');
});
$('.logo').on('click', function() {
$('#about').removeClass('hide').addClass('fade-in');
$('.icon-page-close').removeClass('hide');
});
$('.icon-page-close').on('click', function () {
$('.page, .icon-page-close').addClass('hide');
});
// menu links
$('.nav a').on('click', function () {
var tabID = $(this).attr('data-tab');
$('.icon-page-close, #' + tabID).removeClass('hide');
$('.nav').addClass('hide');
});
// article links
$('.article-link').on('click', function () {
var tabID = $(this).attr('data-tab');
$('.icon-page-close, #' + tabID).removeClass('hide').addClass('fade-in');
});
//# sourceURL=pen.js
</script>
</body></html>
