<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 lang='en' 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/brandonrukin/pen/zrgZbz?depth=everything&order=popularity&page=82&q=product&show_forks=false" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<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.5/css/bootstrap.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic);
body {
font-size: 20px;
font-family: 'Yanone Kaffeesatz', sans-serif;
margin-bottom: 100px;
}
.container {
max-width: 960px;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.product__title {
text-transform: uppercase;
font-weight: 400;
font-size: 3em;
margin: 20px 0px 0px;
}
.product__byline {
color: #998f52;
text-transform: uppercase;
letter-spacing: .05em;
font-size: 1.2em;
}
.product__byline em {
margin-right: 3px;
text-transform: lowercase;
letter-spacing: .0em;
font-size: .8em;
}
.product__image {
width: 100%;
margin: 20px 0px;
}
.product__notify {
font-size: .6em;
font-weight: 400;
font-family: 'Open Sans', sans-serif;
color: #999;
text-align: center;
background: #F7F7F7;
padding: 9px 20px;
margin: 5px 0px 20px;
border-radius: 5px;
}
@media only screen and (min-width: 768px) {
.product__notify {
display: none;
}
}
.price-option {
background: #f6f5ea;
border-radius: 5px;
padding: 10px 10px 6px;
margin-bottom: 20px;
}
.price-option__icon {
margin: 4px 10px 4px 2px;
float: left;
font-size: 1.9em;
color: #989581;
}
.price-option__title {
padding: 0;
font-size: .9em;
margin: 0px 0px -8px;
text-transform: uppercase;
}
.price-option__price {
padding: 0;
margin: 0;
font-size: .75em;
color: #998f52;
}
.price-option__button {
float: right;
text-transform: uppercase;
font-weight: 400;
font-size: .75em;
padding: 5px 8px;
margin: -12px 3px 0px 0px;
background: linear-gradient(#7db72f, #4e7d0e);
border: solid 1px #64991E;
}
.price-option__button:hover {
background: #4e7d0e;
border: solid 1px #64991E;
}
@media only screen and (max-width: 768px) {
.price-option__button {
font-size: 1.1em;
height: 61px;
width: 55px;
margin-right: -10px;
margin-top: -27px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
}
.details__container {
margin: 10px 0px;
border-top: 1px solid #CCC;
}
.details__title {
margin-top: 27px;
color: #997e11;
text-transform: uppercase;
font-weight: 500;
font-size: 1em;
letter-spacing: .1em;
}
.details__title span {
letter-spacing: 0px;
text-transform: lowercase;
font-family: 'Droid Serif', serif;
font-size: .7em;
font-weight: 400;
font-style: italic;
margin-right: .5em;
}
.details__image {
float: left;
width: 130px;
margin-top: 7px;
margin-right: 20px;
}
.details__text {
font-family: 'Droid Serif', serif;
font-size: .9em;
line-height: 1.7em;
}
.details__list-item {
font-family: 'Open Sans', sans-serif;
font-size: .6em;
font-weight: 600;
line-height: 2.2em;
}
</style></head><body>
<main class="container">
<div class="row product">
<div class="col-md-12 col-sm-12 col-xs-12">
<h2 class="product__title">Responsive Web Design</h2><span class="product__byline"> <em>by </em>Ethan Marcotte</span><img class="product__image" src="https://cdn.shopify.com/s/files/1/0051/7692/products/ABA-hero-4_c97486bb-368b-4a52-8d53-72e7d35848e0.jpg?v=1417531418"/>
<div class="product__notify">Our ebooks support Kindle, iBooks, Nook and most other readers and devices.</div>
</div>
</div>
<div class="row price">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="price-option"><i class="price-option__icon fa fa-book"></i>
<p class="price-option__title">Paperback</p><span class="price-option__price">$18.00 + shipping</span>
<button class="price-option__button btn btn-primary" type="button">Add</button>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="price-option"><i class="price-option__icon fa fa-tablet"></i>
<p class="price-option__title">eBook</p><span class="price-option__price">$9.00</span>
<button class="price-option__button btn btn-primary" type="button">Add</button>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="price-option"><i class="price-option__icon fa fa-book"></i><i class="price-option__icon fa fa-tablet"></i>
<p class="price-option__title">Paperback & eBook</p><span class="price-option__price">$18.00 + shipping</span>
<button class="price-option__button btn btn-primary" type="button">Add</button>
</div>
</div>
</div>
<div class="row details">
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="details__container">
<h3 class="details__title"> <span>foreword by</span>Jeremey Keith</h3>
<p class="details__text">Since its groundbreaking release in 2011, Responsive Web Design remains a fundamental resource for anyone working on the web.</p>
<p class="details__text">Learn how to think beyond the desktop, and craft designs that respond to your users’ needs. In the second edition, Ethan Marcotte expands on the design principles behind fluid grids, flexible images, and media queries. Through new examples and updated facts and figures, you’ll learn how to deliver a quality experience, no matter how large or small the display.</p>
<h3 class="details__title">What's new in the second edition?</h3>
<p class="details__text">Discover new tips and tricks for browser support, take a closer look at solutions for serving images, explore the role of progressive enhancement in web design, find better methods for managing bandwidth, and more. Follow along with the new examples and approaches Ethan has assembled, and dive in to his meticulously revised code samples.</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="details__container">
<h3 class="details__title">Contents</h3>
<li class="details__list-item">Our Responsive Web</li>
<li class="details__list-item">The Flexible Grid</li>
<li class="details__list-item">Flexible Images </li>
<li class="details__list-item">Media Queries</li>
<li class="details__list-item">Becoming Responsive</li>
</div>
</div>
</div>
<div class="row details">
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="details__container">
<h3 class="details__title">About the Author</h3><img class="details__image" src="https://pbs.twimg.com/profile_images/653657521559896065/VWzlUwPL.png"/>
<p class="details__text">Ethan Marcotte is an independent designer and author, based in Boston, Massachusetts. He coined the term “responsive web design” to describe a new way of designing for the ever-changing web, and is the author of the definitive book on the topic: Responsive Web Design. His design, speaking, and writing has helped designers and organizations use the web’s flexibility to design across mobile, tablet, and desktop—and whatever might come next.</p>
<p class="details__text">Over the years, Ethan has been a featured speaker at many conferences, including An Event Apart, SXSW Interactive, and Webstock. His clientele has included New York Magazine, the Sundance Film Festival, The Boston Globe, and People Magazine.</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="details__container">
<h3 class="details__title">Additional Info</h3>
<li class="details__list-item"> <b>ISBN: </b>978-1-9375571-8-8</li>
<li class="details__list-item"> <b>Paperback: </b>153 pages</li>
<li class="details__list-item"> <b>Published: </b>First Ed. Jun 7, 2011; Second Ed. Dec 2, 2014 </li>
<li class="details__list-item"> <b>First Ed. also available in: </b>French, Korean, Russian</li>
</div>
</div>
</div>
</main>
</body></html>
