<main>
<h1>Responsive Boxes
<span>With Flex Box</span></h1>
<ul class="boxes">
<li>
<a href="#">
<img src="http://lorempixel.com/300/300/sports" alt="Picture 1">
<p>And some text.</p>
</a>
</li>
<li>
<a href="#">
<img src="http://lorempixel.com/400/400/people" alt="Picture 2">
<p>And another bit of text.</p>
</a>
</li>
<li>
<a href="#">
<img src="http://lorempixel.com/300/300/fashion" alt="Picture 3">
<p>More text that is quite a bit longer than the other one before it.</p>
</a>
</li>
<li>
<a href="#">
<img src="http://lorempixel.com/400/400/people" alt="Picture 2">
<p>And another bit of text.</p>
</a>
</li>
<li>
<a href="#">
<img src="http://lorempixel.com/300/300/fashion" alt="Picture 3">
<p>More text that is quite a bit longer than the other one before it.</p>
</a>
</li>
<li>
<a href="#">
<img src="http://lorempixel.com/300/300/sports" alt="Picture 1">
<p>And some text.</p>
</a>
</li>
<li>
<a href="#">
<img src="http://lorempixel.com/300/300/sports" alt="Picture 1">
<p>And some text.</p>
</a>
</li>
<li>
<a href="#">
<img src="http://lorempixel.com/400/400/people" alt="Picture 2">
<p>And another bit of text.</p>
</a>
</li>
<li>
<a href="#">
<img src="http://lorempixel.com/300/300/fashion" alt="Picture 3">
<p>More text that is quite a bit longer than the other one before it.</p>
</a>
</li>
<li>
<a href="#">
<img src="http://lorempixel.com/400/400/people" alt="Picture 2">
<p>And another bit of text.</p>
</a>
</li>
<li>
<a href="#">
<img src="http://lorempixel.com/300/300/fashion" alt="Picture 3">
<p>More text that is quite a bit longer than the other one before it.</p>
</a>
</li>
<li>
<a href="#">
<img src="http://lorempixel.com/300/300/sports" alt="Picture 1">
<p>And some text.</p>
</a>
</li>
<li>
<a href="#">
<img src="http://lorempixel.com/300/300/fashion" alt="Picture 3">
<p>More text that is quite a bit longer than the other one before it.</p>
</a>
</li>
<li>
<a href="#">
<img src="http://lorempixel.com/400/400/people" alt="Picture 2">
<p>And another bit of text.</p>
</a>
</li>
</ul>
</main>
body {
background: #000;
font-family: sans-serif;
}
main {
background: #fff;
margin: 2em auto;
max-width: 60em;
width: 94%;
}
h1 {
text-align: center;
font-size: 3em;
}
h1 span {
display: block;
font-size: 0.6em;
font-family: serif;
font-style: italic;
}
.boxes {
margin: 16px auto;
padding: 0;
text-align: center;
display: flex;
flex-flow: wrap;
justify-content: space-around;
}
.boxes li {
display: inline-block;
flex: 1 1 12em;
border: 2px solid #6F0212;
border-radius: 25px;
margin: 8px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5)
}
.boxes a {
display: block;
text-decoration: none;
padding: 8px;
height: 100%;
}
.boxes img {
display: block;
width: 400px;
max-width: 100%;
height: auto;
margin: 0 auto;
border-radius: 20px
}
.boxes li:hover {
background: #fd6;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.