<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/EgLxOo?depth=everything&limit=all&order=popularity&page=2&q=contact+info&show_forks=false" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<style class="cp-pen-styles">body {
position: relative;
}
.masthead {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 10px;
}
.logo {
font-size: 3.5em;
}
.site-branding {
margin-left: 15px;
}
.site-branding h1 {
padding: 5px 0;
margin: 0;
}
nav-wrapper {
width: 100%;
}
.main-menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
padding: 20px 10px 30px;
background-color: white;
width: 100%;
}
.main-menu a {
color: #222;
text-transform: uppercase;
}
.main-menu p {
margin: 0;
}
.quick-info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 2em;
margin-bottom: 0;
padding-bottom: 0;
width: 100%;
background-color: #eee;
}
.quick-info p {
margin: 0;
}
.quick-info a {
padding: 10px 40px;
}
.quick-info a:hover {
background: blue;
color: white;
}
.quick-info .tab__active {
background-color: blue;
color: white;
}
@media screen and (min-width: 600px) {
.quick-info {
position: fixed;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0;
margin: 0;
right: 0;
bottom: 0;
width: 250px;
}
.quick-info a {
padding: 10px 32px;
}
.quick-info a:first-child {
padding: 10px 30px;
}
}
.times,
.location,
.contact {
padding: 30px;
background-color: blue;
color: #fff;
position: absolute;
width: 100%;
box-shadow: 0px 10px 30px 1px rgba(0, 0, 0, 0.2);
}
.times h3,
.location h3,
.contact h3 {
margin: 20px 0 20px 0;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.times ul,
.location ul,
.contact ul {
padding: 0;
list-style: none;
}
.times ul li,
.location ul li,
.contact ul li {
line-height: 2.5;
}
.times a,
.location a,
.contact a {
color: white;
text-decoration: underline;
text-transform: uppercase;
font-size: 0.9em;
}
.times a:hover,
.location a:hover,
.contact a:hover {
color: rgba(255, 255, 255, 0.9);
}
@media screen and (min-width: 600px) {
.times,
.location,
.contact {
position: fixed;
right: 0;
width: 250px;
bottom: 59px;
padding: 15px;
box-shadow: 0px -12px 30px 1px rgba(0, 0, 0, 0.2);
}
}
.location-wrapper .address {
font-size: 1.2em;
padding-right: 10px;
margin-bottom: 40px;
}
.location-wrapper img {
width: 100%;
}
@media screen and (min-width: 400px) {
.location-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.address,
.map {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
}
@media screen and (min-width: 600px) {
.location-wrapper {
display: block;
}
}
.contact a {
text-decoration: none;
}
.button__contact {
padding: 20px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.5);
text-transform: initial;
font-size: 1.2em;
}
.button__contact:hover {
background-color: rgba(255, 255, 255, 0.9);
color: blue;
}
.social__contact {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
font-size: 3em;
padding: 10px 5px;
}
.main-body {
height: 100vh;
width: 100%;
padding: 0;
}
.main-body p {
padding: 10px;
margin: 0;
}
.main-body img {
width: 100%;
margin: 0 0 20px 0;
}
.sticky {
position: fixed;
top: 0;
left: 0;
z-index: 10;
width: 100%;
}
.shrunk {
padding: 20px 0;
margin: 0;
}
.sales-header {
background-image: url(https://unsplash.it/800?image=758);
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
height: 600px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: white;
line-height: 1.3;
padding: 0 10px;
}
.sales-header h2 {
font-size: 4em;
text-transform: uppercase;
font-weight: 700;
}
.sales-header h3 {
font-weight: 400;
font-size: 2em;
}
.grid__featured {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 900px;
margin: auto;
}
.grid__featured img {
width: 100%;
}
.product-group {
margin: 5px 5px 25px;
padding-bottom: 25px;
}
.product-group .product-title {
font-size: 2em;
}
.product-group .price {
padding: 0 0 10px;
font-size: 2em;
color: rgba(0, 0, 0, 0.3);
margin: 0 0 10px;
}
.product-group .availability {
padding: 0;
font-size: 0.9em;
color: rgba(0, 0, 0, 0.3);
}
.product-group .sizes {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0;
margin: 0;
}
.product-group .sizes p {
padding: 0;
width: 40px;
height: 40px;
padding-top: 12px;
}
.product-group .sizes a {
color: #aaa;
text-decoration: none;
border: 1px solid #eee;
margin: 0 10px;
text-align: center;
}
.product-group .sizes a:hover {
background-color: #ddd;
color: #444;
}
.product-group .sizes a:first-child {
margin-left: 0;
}
@media screen and (min-width: 900px) {
.product-group .sizes a {
margin: 0 5px;
}
}
@media screen and (min-width: 680px) {
.product-group {
width: 48.5%;
}
}
.product-info {
padding: 0 0 0 15px;
}
@media screen and (min-width: 900px) {
.product-info {
padding: 0;
}
}
.heading__section {
text-align: center;
padding: 50px 0;
font-size: 2em;
}
</style></head><body>
<!-- RESIZE THE BROWSER TO SEE IT ON MOBILE SIZES-->
<!-- ABOUT -->
<!-- A demo of a Quick Info bar. On mobile, it's under the main menu.-->
<!-- On desktop, it's in the bottom right corner. Click on the tabs-->
<!-- to see a persistent menu that can display almost anything.-->
<!-- This would be great for small businesses that want to have contact info -->
<!-- right there when the user wants to see it. It could also be used-->
<!-- for email opt-ins, opt-in advertising, blog information, contact info, and -->
<!-- much more. The possibilities are endless. Feel free to fork it with -->
<!-- or without credit.-->
<header class="masthead">
<div class="logo">
<p><i class="fa fa-diamond" aria-hidden="true"></i></p>
</div>
<div class="site-branding">
<h1>Company X</h1>
<p>We make all kinds of things better</p>
</div>
</header>
<div class="nav-wrapper">
<nav class="main-menu"><a href="">
<p>Link 1</p></a><a href="">
<p>Link 1</p></a><a href="">
<p>Link 1</p></a></nav>
<nav class="quick-info"><a href="#" data-tab="tab1">
<p><i class="fa fa-clock-o" aria-hidden="true"></i></p></a><a href="#" data-tab="tab2">
<p><i class="fa fa-map-marker" aria-hidden="true"></i></p></a><a href="#" data-tab="tab3">
<p><i class="fa fa-phone" aria-hidden="true"></i></p></a></nav>
<nav class="tab__panel times" id="tab1">
<h3>We're open on these days</h3>
<ul>
<li>Monday / 6AM - 5PM</li>
<li>Tuesday / 8AM - 5PM</li>
<li>Wednesday / 6AM - 5PM</li>
<li>Thursday / 9AM - 8PM</li>
<li>Friday / 6AM - 8PM</li>
<li>Saturday / 6AM - 10PM</li>
<li>Sunday / Closed</li>
</ul>
</nav>
<nav class="tab__panel location" id="tab2">
<h3>We're located at</h3>
<div class="location-wrapper">
<div class="address">
<p>This Shopping Center</p>
<p>123 Somewhere Ln.<br>Suite 318</p>
<p>Somewhere, CA 12345</p><a href="">
<p>View Map</p></a>
</div>
<div class="map"><a href=""><img src="http://liveinportland.net/wp-content/uploads/2012/12/hollywood-district-in-portland-Google-Maps.jpg"/></a></div>
</div>
</nav>
<nav class="tab__panel contact" id="tab3">
<h3>Contact us</h3><a href="">
<p class="button__contact">(123) 456-7890</p></a><a href="">
<p class="button__contact">help@companyx.com</p></a>
<div class="social__contact"><a href="">
<p><i class="fa fa-facebook-official" aria-hidden="true"></i></p></a><a href="">
<p><i class="fa fa-instagram" aria-hidden="true"></i></p></a><a href="">
<p><i class="fa fa-vine" aria-hidden="true"></i></p></a><a href="">
<p><i class="fa fa-twitter" aria-hidden="true"></i></p></a></div>
</nav>
</div>
<main class="main-body">
<header class="sales-header">
<h2>Mother's Day Sale</h2>
<h3>All women's clothing 25% off until June 1</h3>
</header>
<h3 class="heading__section">Featured Products</h3>
<div class="grid__featured">
<div class="product-group"><img src="#{image}"/>
<div class="product-info">
<p class="availability">In Stock</p>
<h4 class="product-title">Colorful Dress</h4>
<p class="price">$15</p>
<div class="sizes"><a href="">
<p>S</p></a><a href="">
<p>M</p></a><a href="">
<p>L</p></a><a href="">
<p>XL</p></a></div>
</div>
</div>
<div class="product-group"><img src="#{image}"/>
<div class="product-info">
<p class="availability">Out of Stock</p>
<h4 class="product-title">Purple Dress</h4>
<p class="price">$18</p>
<div class="sizes"><a href="">
<p>S</p></a><a href="">
<p>M</p></a><a href="">
<p>L</p></a><a href="">
<p>XL</p></a></div>
</div>
</div>
<div class="product-group"><img src="#{image}"/>
<div class="product-info">
<p class="availability">In Stock</p>
<h4 class="product-title">Gold Skirt</h4>
<p class="price">$20</p>
<div class="sizes"><a href="">
<p>S</p></a><a href="">
<p>M</p></a><a href="">
<p>L</p></a><a href="">
<p>XL</p></a></div>
</div>
</div>
<div class="product-group"><img src="#{image}"/>
<div class="product-info">
<p class="availability">6 Left</p>
<h4 class="product-title">Eye Print Jumpsuit</h4>
<p class="price">$16</p>
<div class="sizes"><a href="">
<p>S</p></a><a href="">
<p>M</p></a><a href="">
<p>L</p></a><a href="">
<p>XL</p></a></div>
</div>
</div>
<div class="product-group"><img src="#{image}"/>
<div class="product-info">
<p class="availability">In Stock</p>
<h4 class="product-title">Vintage Dress</h4>
<p class="price">$17</p>
<div class="sizes"><a href="">
<p>S</p></a><a href="">
<p>M</p></a><a href="">
<p>L</p></a><a href="">
<p>XL</p></a></div>
</div>
</div>
<div class="product-group"><img src="#{image}"/>
<div class="product-info">
<p class="availability">In Stock</p>
<h4 class="product-title">Black Evening Dress</h4>
<p class="price">$22</p>
<div class="sizes"><a href="">
<p>S</p></a><a href="">
<p>M</p></a><a href="">
<p>L</p></a><a href="">
<p>XL</p></a></div>
</div>
</div>
<div class="product-group"><img src="#{image}"/>
<div class="product-info">
<p class="availability">Coming Soon</p>
<h4 class="product-title">Beige Sweater</h4>
<p class="price">$14</p>
<div class="sizes"><a href="">
<p>S</p></a><a href="">
<p>M</p></a><a href="">
<p>L</p></a><a href="">
<p>XL</p></a></div>
</div>
</div>
<div class="product-group"><img src="#{image}"/>
<div class="product-info">
<p class="availability">Out of Stock</p>
<h4 class="product-title">White Cocktail Dress</h4>
<p class="price">$20</p>
<div class="sizes"><a href="">
<p>S</p></a><a href="">
<p>M</p></a><a href="">
<p>L</p></a><a href="">
<p>XL</p></a></div>
</div>
</div>
</div>
</main>
<!--
p.lead Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet enim, nemo sapiente voluptatem provident quibusdam. In maiores quae veritatis obcaecati.
p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, excepturi, possimus. Sapiente veniam praesentium neque consectetur reiciendis impedit quo inventore error ipsa eos! Veritatis, laborum labore molestiae hic repellat sequi distinctio. Earum odio porro culpa aperiam tenetur accusamus sunt fugiat sequi dolor, rerum beatae quasi quisquam saepe soluta omnis cum? Pariatur ullam molestiae rerum dolore, eius. Adipisci obcaecati cumque accusantium aut ipsam facilis iste, odit, doloremque assumenda delectus sit voluptatum consectetur necessitatibus aliquam, ducimus, porro aperiam fuga rem saepe vero. Eligendi incidunt debitis, sunt, dolorum accusantium enim delectus consequatur esse labore, error magni. Fugit ullam blanditiis perspiciatis iure unde quas ex dolor, quo quis officia natus, cumque voluptate eos dolorum amet atque eius illum molestiae similique. Deleniti, numquam. Aspernatur id nesciunt, quae ad beatae, illum omnis eum consectetur quidem minus officiis perspiciatis nam vero veniam! Tenetur animi tempora obcaecati ipsa delectus asperiores corporis vitae deserunt dolorum odit aperiam vel quae, nobis quidem reprehenderit assumenda at, id dolore qui! Minus vero tempora fuga, iure facilis doloremque nemo eos velit quae rerum omnis itaque modi quibusdam et, assumenda eveniet quidem expedita doloribus id quisquam. Distinctio quo eaque nostrum impedit repellat deleniti sequi rerum in autem, ex aut amet, beatae ratione ipsa asperiores repudiandae exercitationem soluta. Repellendus inventore sapiente nam omnis tempore, sit quis quo quam aut in rem unde laudantium ipsam, pariatur officia dignissimos, error autem perspiciatis illum fugit nesciunt molestias eligendi.
p Sequi, quia! In perferendis adipisci odit repellendus ipsa nostrum totam, necessitatibus mollitia eaque nam esse laudantium iure consequuntur maiores facere aliquam asperiores omnis cum aliquid, error velit commodi cupiditate itaque! Eveniet, ipsum aut mollitia autem minus voluptas architecto dignissimos, repellat perspiciatis. Velit, tempora aperiam enim aliquid similique voluptatem omnis! Dolores expedita aliquid, corrupti, itaque molestias molestiae nisi fuga omnis voluptatem, voluptatum repellat odit aperiam neque labore eligendi totam obcaecati quidem vero. Adipisci atque illo modi at hic sit fuga dolore, temporibus nihil dolorum consequatur impedit tempore, dolorem quidem, ullam iusto cupiditate. Commodi quidem odit porro deleniti, numquam aliquam quia! Consequuntur magni, est voluptatum temporibus aliquam sapiente recusandae id odit facilis neque assumenda non quibusdam illum culpa, nihil ratione qui impedit ex quis aliquid error similique possimus rem? Totam unde laudantium animi autem porro? Quo praesentium voluptatem, provident alias quibusdam iste deserunt repudiandae eaque tempore expedita sint modi commodi, magnam maxime dolores corporis, veniam nostrum! Tempore excepturi libero, voluptate cum qui, minima, ipsa asperiores doloremque quibusdam pariatur vero! Facere tempore dolores nihil dolorum facilis veniam nesciunt, et atque expedita aut labore ipsa placeat sapiente laboriosam blanditiis saepe suscipit sed repudiandae commodi incidunt, cum.
p Voluptatem maxime assumenda nemo, at rem veniam facere. Natus, temporibus fugiat dolorem architecto error doloremque nam autem asperiores. At sequi aliquid perspiciatis debitis magni rem assumenda ducimus suscipit quae veritatis ut, deleniti alias corporis, reiciendis obcaecati magnam iure facere porro fuga cumque facilis sed amet recusandae adipisci harum. Voluptatem iure fuga laboriosam voluptates nesciunt excepturi, impedit eius repudiandae porro inventore ea, ipsam mollitia ratione, nobis voluptatibus, dolorum animi error nemo beatae. Eveniet vel a, labore non animi tempora. Qui eius ipsam, quidem voluptates ullam voluptas ipsa, labore reiciendis autem accusantium minus doloribus quis architecto inventore cum quae tempora asperiores eaque nostrum magnam quas nobis! Saepe totam veritatis earum officia, laudantium animi distinctio porro consectetur sint deserunt voluptatum ducimus tenetur illo aliquam at sequi vero minima pariatur, numquam magni assumenda facere cumque. Quo fuga ipsum iste, a itaque velit possimus illum est facilis nemo inventore quos laudantium obcaecati, totam nulla recusandae. Itaque, vitae aspernatur omnis reprehenderit quia, ea, deserunt labore quod, nihil atque velit impedit dignissimos dolor earum recusandae numquam voluptates aperiam quidem ex? Incidunt veritatis, porro, voluptatibus adipisci voluptatum expedita optio iure vitae aliquid eaque quidem est maxime sint necessitatibus ullam pariatur quam placeat aperiam, similique assumenda? Harum aperiam ullam quidem error officia! Totam quidem unde voluptatibus animi inventore perspiciatis velit dolore quis omnis nisi est, vero, saepe ipsum deserunt esse labore magni fuga fugiat quaerat porro nesciunt? Tempore cumque quam, officiis sunt, consectetur magnam totam molestiae similique distinctio illum odit ducimus necessitatibus voluptatibus quo voluptatum veniam animi repellendus, nobis ullam natus nam debitis reprehenderit dicta fuga. Sit libero totam quibusdam tempora beatae praesentium dicta placeat quasi vel aut blanditiis inventore sed nulla explicabo debitis adipisci maiores ipsum laborum, perspiciatis amet quos incidunt quaerat aliquid! Alias est excepturi iure totam, assumenda modi repudiandae libero enim obcaecati possimus porro recusandae explicabo asperiores illum, rem itaque.
-->
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script >$('.tab__panel').hide();
$('.quick-info a').on('click', function(e) {
e.preventDefault();
// store tab ID of the link clicked
var tabID = $(this).attr("data-tab");
// hide all panels when tab is clicked
$('.tab__panel').hide();
// remove active tab class from all tabs
$('.quick-info a').removeClass('tab__active');
// add active tab class to clicked tab
$(this).addClass('tab__active');
// slide down clicked tab
$('#' + tabID).slideDown();
$('.main-body').on('click', function() {
$('.tab__panel').hide();
$('.quick-info a').removeClass('tab__active');
});
});
$(document).ready(function() {
var stickyNavTop = $('.nav-wrapper').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav-wrapper').addClass('sticky');
$('.main-menu').addClass('shrunk');
} else {
$('.nav-wrapper').removeClass('sticky shrunk');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//# sourceURL=pen.js
</script>
</body></html>
