-
-
Save eladcandroid/137f5e1ef922cdd72d3fc372f55e9dc9 to your computer and use it in GitHub Desktop.
GoCode - Course - Initial Shop From: https://css-tricks.com/designing-a-product-page-layout-with-flexbox/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>Document</title> | |
<link rel="stylesheet" href="style.css" /> | |
</head> | |
<body> | |
<nav class="product-filter"> | |
<h1>Jackets</h1> | |
<div class="sort"> | |
<div class="collection-sort"> | |
<label>Filter by:</label> | |
<select> | |
<option value="/">All Jackets</option> | |
<option value="/">2016</option> | |
<option value="/">jacket</option> | |
<option value="/">Jackets</option> | |
<option value="/">layers</option> | |
<option value="/">Obermeyer</option> | |
<option value="/">Roxy</option> | |
<option value="/">womens</option> | |
</select> | |
</div> | |
<div class="collection-sort"> | |
<label>Sort by:</label> | |
<select> | |
<option value="/">Featured</option> | |
<option value="/">Best Selling</option> | |
<option value="/">Alphabetically, A-Z</option> | |
<option value="/">Alphabetically, Z-A</option> | |
<option value="/">Price, low to high</option> | |
<option value="/">Price, high to low</option> | |
<option value="/">Date, new to old</option> | |
<option value="/">Date, old to new</option> | |
</select> | |
</div> | |
</div> | |
</nav> | |
<section class="products"> | |
<div class="product-card"> | |
<div class="product-image"> | |
<img | |
src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369" | |
/> | |
</div> | |
<div class="product-info"> | |
<h5>Winter Jacket</h5> | |
<h6>$99.99</h6> | |
</div> | |
</div> | |
<div class="product-card"> | |
<div class="product-image"> | |
<img | |
src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369" | |
/> | |
</div> | |
<div class="product-info"> | |
<h5>Winter Jacket</h5> | |
<h6>$99.99</h6> | |
</div> | |
</div> | |
<div class="product-card"> | |
<div class="product-image"> | |
<img | |
src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369" | |
/> | |
</div> | |
<div class="product-info"> | |
<h5>Winter Jacket</h5> | |
<h6>$99.99</h6> | |
</div> | |
</div> | |
<div class="product-card"> | |
<div class="product-image"> | |
<img | |
src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369" | |
/> | |
</div> | |
<div class="product-info"> | |
<h5>Winter Jacket</h5> | |
<h6>$99.99</h6> | |
</div> | |
</div> | |
<div class="product-card"> | |
<div class="product-image"> | |
<img | |
src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369" | |
/> | |
</div> | |
<div class="product-info"> | |
<h5>Winter Jacket</h5> | |
<h6>$99.99</h6> | |
</div> | |
</div> | |
<div class="product-card"> | |
<div class="product-image"> | |
<img | |
src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369" | |
/> | |
</div> | |
<div class="product-info"> | |
<h5>Winter Jacket</h5> | |
<h6>$99.99</h6> | |
</div> | |
</div> | |
<div class="product-card"> | |
<div class="product-image"> | |
<img | |
src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369" | |
/> | |
</div> | |
<div class="product-info"> | |
<h5>Winter Jacket</h5> | |
<h6>$99.99</h6> | |
</div> | |
</div> | |
<div class="product-card"> | |
<div class="product-image"> | |
<img | |
src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369" | |
/> | |
</div> | |
<div class="product-info"> | |
<h5>Winter Jacket</h5> | |
<h6>$99.99</h6> | |
</div> | |
</div> | |
<div class="product-card"> | |
<div class="product-image"> | |
<img | |
src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369" | |
/> | |
</div> | |
<div class="product-info"> | |
<h5>Winter Jacket</h5> | |
<h6>$99.99</h6> | |
</div> | |
</div> | |
<div class="product-card"> | |
<div class="product-image"> | |
<img | |
src="https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369" | |
/> | |
</div> | |
<div class="product-info"> | |
<h5>Winter Jacket</h5> | |
<h6>$99.99</h6> | |
</div> | |
</div> | |
</section> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*------------------------------------*\ | |
RESET | |
\*------------------------------------*/ | |
/* https://meyerweb.com/eric/tools/css/reset/ | |
v2.0b1 | 201101 | |
NOTE:WORK IN PROGRESS | |
USE WITH CAUTION AND TEST WITH ABANDON */ | |
html, | |
body, | |
div, | |
span, | |
applet, | |
object, | |
iframe, | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6, | |
p, | |
blockquote, | |
pre, | |
a, | |
abbr, | |
acronym, | |
address, | |
big, | |
cite, | |
code, | |
del, | |
dfn, | |
em, | |
img, | |
ins, | |
kbd, | |
q, | |
s, | |
samp, | |
small, | |
strike, | |
strong, | |
sub, | |
sup, | |
tt, | |
var, | |
b, | |
u, | |
i, | |
center, | |
dl, | |
dt, | |
dd, | |
ol, | |
ul, | |
li, | |
fieldset, | |
form, | |
label, | |
legend, | |
table, | |
caption, | |
tbody, | |
tfoot, | |
thead, | |
tr, | |
th, | |
td, | |
article, | |
aside, | |
canvas, | |
details, | |
figcaption, | |
figure, | |
footer, | |
header, | |
hgroup, | |
menu, | |
nav, | |
section, | |
summary, | |
time, | |
mark, | |
audio, | |
video { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
outline: 0; | |
font-size: 100%; | |
font: inherit; | |
vertical-align: baseline; | |
} | |
/* HTML5 display-role reset for older browsers */ | |
article, | |
aside, | |
details, | |
figcaption, | |
figure, | |
footer, | |
header, | |
hgroup, | |
menu, | |
nav, | |
section { | |
display: block; | |
} | |
body { | |
line-height: 1; | |
} | |
ol, | |
ul { | |
list-style: none; | |
} | |
blockquote, | |
q { | |
quotes: none; | |
} | |
blockquote:before, | |
blockquote:after, | |
q:before, | |
q:after { | |
content: ’’; | |
content: none; | |
} | |
/* remember to define visible focus styles! | |
:focus{ | |
outline:?????; | |
} */ | |
/* remember to highlight inserts somehow! */ | |
ins { | |
text-decoration: none; | |
} | |
del { | |
text-decoration: line-through; | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
/*------------------------------------*\ | |
$MAIN | |
\*------------------------------------*/ | |
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500); | |
body { | |
margin: 0 auto; | |
width: 90%; | |
max-width: 1240px; | |
font-family: "Roboto", sans-serif; | |
background-color: #f6f6f6; | |
} | |
/* Typography */ | |
h1 { | |
font-size: 28px; | |
font-weight: 300; | |
flex: 1; | |
} | |
h5 { | |
font-weight: 500; | |
line-height: 1.7em; | |
} | |
h6 { | |
color: #666; | |
font-size: 14px; | |
} | |
/* Product Layout */ | |
.product-filter { | |
display: flex; | |
padding: 30px 0; | |
} | |
.sort { | |
display: flex; | |
align-self: flex-end; | |
} | |
.collection-sort { | |
display: flex; | |
flex-direction: column; | |
} | |
.collection-sort:first-child { | |
padding-right: 20px; | |
} | |
label { | |
color: #666; | |
font-size: 10px; | |
font-weight: 500; | |
line-height: 2em; | |
text-transform: uppercase; | |
} | |
.products { | |
display: flex; | |
flex-wrap: wrap; | |
} | |
.product-card { | |
display: flex; | |
flex-direction: column; | |
padding: 2%; | |
flex: 1 16%; | |
background-color: #fff; | |
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25); | |
} | |
.product-image img { | |
width: 100%; | |
} | |
.product-info { | |
margin-top: auto; | |
padding-top: 20px; | |
text-align: center; | |
} | |
@media (max-width: 920px) { | |
.product-card { | |
flex: 1 21%; | |
} | |
.products .product-card:first-child, | |
.products .product-card:nth-child(2) { | |
flex: 2 46%; | |
} | |
} | |
@media (max-width: 600px) { | |
.product-card { | |
flex: 1 46%; | |
} | |
} | |
@media (max-width: 480px) { | |
h1 { | |
margin-bottom: 20px; | |
} | |
.product-filter { | |
flex-direction: column; | |
} | |
.sort { | |
align-self: flex-start; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment