Last active
August 27, 2019 14:08
-
-
Save Yusadolat/bc8d7ec747e35740b3507c2cc8746757 to your computer and use it in GitHub Desktop.
Flexbox - Responsive Card Layout
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
<header class="masthead clear"> | |
<div class="centered"> | |
<div class="site-branding"> | |
<h1 class="site-title">Flexbox - Card Layout</h1> | |
</div> | |
<!-- .site-title --> | |
</div> | |
<!-- .centered --> | |
</header> | |
<!-- .masthead --> | |
<main class="main-area"> | |
<div class="centered"> | |
<section class="cards"> | |
<article class="card"> | |
<a href="#"> | |
<figure class="thumbnail"> | |
<img src="http://placekitten.com/810/610" alt="meow"> | |
</figure> | |
<div class="card-content"> | |
<h2>Whiskey</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum explicabo consequatur consectetur fugit molestias perferendis, sint error iste ut, facilis sunt natus optio dolor nesciunt laboriosam obcaecati corporis numquam.</p> | |
</div> | |
<!-- .card-content --> | |
</a> | |
</article> | |
<!-- .card --> | |
<article class="card"> | |
<a href="#"> | |
<figure class="thumbnail"> | |
<img src="http://placekitten.com/800/610" alt="meow"> | |
</figure> | |
<div class="card-content"> | |
<h2>Fluffy</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum explicabo consequatur consectetur fugit molestias perferendis, sint error iste ut, facilis sunt natus optio dolor nesciunt laboriosam obcaecati corporis numquam?</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum explicabo consequatur consectetur fugit molestias perferendis, sint error iste ut, facilis sunt natus optio dolor nesciunt laboriosam obcaecati corporis numquam?</p> | |
</div> | |
<!-- .card-content --> | |
</a> | |
</article> | |
<!-- .card --> | |
<article class="card"> | |
<a href="#"> | |
<figure class="thumbnail"> | |
<img src="http://placekitten.com/816/610" alt="meow"> | |
</figure> | |
<div class="card-content"> | |
<h2>Kitty</h2> | |
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati recusandae expedita doloribus dicta cumque nostrum, autem eaque soluta atque voluptatem est et, laborum dignissimos error sequi non? Recusandae, aut alias.</p> | |
</div> | |
<!-- .card-content --> | |
</a> | |
</article> | |
<!-- .card --> | |
<article class="card"> | |
<a href="#"> | |
<figure class="thumbnail"> | |
<img src="http://placekitten.com/816/600" alt="meow"> | |
</figure> | |
<div class="card-content"> | |
<h2>Patches</h2> | |
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati recusandae expedita doloribus dicta cumque nostrum, autem eaque soluta atque voluptatem est et, laborum dignissimos error sequi non? Recusandae, aut alias.</p> | |
</div> | |
<!-- .card-content --> | |
</a> | |
</article> | |
<!-- .card --> | |
<article class="card"> | |
<a href="#"> | |
<figure class="thumbnail"> | |
<img src="http://placekitten.com/820/620" alt="meow"> | |
</figure> | |
<div class="card-content"> | |
<h2>Duchess</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati recusandae expedita doloribus dicta cumque nostrum, autem eaque soluta atque voluptatem est et, laborum dignissimos error sequi non? Recusandae, aut alias.</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati recusandae expedita doloribus dicta cumque nostrum, autem eaque soluta atque voluptatem est et, laborum dignissimos error sequi non? Recusandae, aut alias.</p> | |
</div> | |
<!-- .card-content --> | |
</a> | |
</article> | |
<!-- .card --> | |
<article class="card"> | |
<a href="#"> | |
<figure class="thumbnail"> | |
<img src="http://placekitten.com/810/610" alt="meow"> | |
</figure> | |
<div class="card-content"> | |
<h2>Puchies</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati recusandae expedita doloribus dicta cumque nostrum, autem eaque soluta atque voluptatem est et, laborum dignissimos error sequi non? Recusandae, aut alias.</p> | |
</div> | |
<!-- .card-content --> | |
</a> | |
</article> | |
<!-- .card --> | |
<article class="card"> | |
<a href="#"> | |
<figure class="thumbnail"> | |
<img src="http://placekitten.com/808/608" alt="meow"> | |
</figure> | |
<div class="card-content"> | |
<h2>Panchito</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati recusandae expedita doloribus dicta cumque nostrum, autem eaque soluta atque voluptatem est et, laborum dignissimos error sequi non? Recusandae, aut alias.</p> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati recusandae expedita doloribus dicta cumque nostrum, autem eaque soluta atque voluptatem est et, laborum dignissimos error sequi non? Recusandae, aut alias.</p> | |
</div> | |
<!-- .card-content --> | |
</a> | |
</article> | |
<!-- .card --> | |
</section> | |
<!-- .cards --> | |
</div> | |
<!-- .centered --> | |
</main> |
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
body {font-family: sans-serif;} | |
p {color: #666;} | |
h2 { | |
font-size: 2em; | |
color: #e74c3c; | |
} | |
.centered { | |
margin: 0 auto; | |
padding: 0 1em; | |
} | |
@media screen and (min-width: 52em) { | |
.centered { | |
max-width: 52em; | |
} | |
} | |
/*-------------------------------------------------------------- | |
Header styles minus menu | |
--------------------------------------------------------------*/ | |
.masthead { | |
background: #e74c3c; | |
box-shadow: 3px 3px 8px hsl(0, 0%, 70%); | |
} | |
.site-title { | |
margin: 0 0 1em; | |
padding: 1em 0; | |
font-size: 2em; | |
font-weight: 300; | |
text-align: center; | |
color: black; | |
} | |
@media screen and (min-width: 44.44em) { | |
.site-title { | |
font-size: 2em; | |
} | |
} | |
@media screen and (min-width: 50em) { | |
.site-title { | |
font-size: 2.5em; | |
} | |
} | |
.site-title a { | |
color: hsl(5, 45%, 95%); | |
text-decoration: none; | |
} | |
.site-title a:hover { | |
text-decoration: underline; | |
} | |
/* Card Based Layout - Base styles */ | |
body { | |
background: #ecf0f1; | |
line-height: 1.4; | |
} | |
.site-title { | |
color: white; | |
} | |
.card { | |
background: white; | |
margin-bottom: 2em; | |
} | |
.card a { | |
color: black; | |
text-decoration: none; | |
} | |
.card a:hover { | |
box-shadow: 3px 3px 8px hsl(0, 0%, 70%); | |
} | |
.card-content { | |
padding: 1.4em; | |
} | |
.card-content h2 { | |
margin-top: 0; | |
margin-bottom: .5em; | |
font-weight: normal; | |
} | |
.card-content p { | |
font-size: 95%; | |
} | |
img { | |
width: 100%; | |
height: auto; | |
} | |
/* Flexbox styles */ | |
@media screen and (min-width: 40em) { | |
.cards { | |
margin-top: -1em; | |
display: flex; | |
justify-content: space-between; | |
flex-wrap: wrap; | |
} | |
.card { | |
margin-bottom: 1em; | |
display: flex; | |
flex: 0 1 calc(50% - 0.5em); | |
/* width: calc(50% - 1em); */ | |
} | |
} /* mq 40em*/ | |
@media screen and (min-width: 60em) { | |
.cards { | |
margin-top: inherit; | |
} | |
.card { | |
margin-bottom: 2em; | |
display: flex; | |
flex: 0 1 calc(33% - 0.5em); | |
/* width: calc(33% - 1em); */ | |
} | |
} /* mq 60em*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment