Skip to content

Instantly share code, notes, and snippets.

@herbowicz
Created March 30, 2018 16:58
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save herbowicz/1ead21622d78906b306ad3fde8c18d5f to your computer and use it in GitHub Desktop.
3 pics
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Holiday</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<section class="content">
<div class="left">
<h2 class="title">Big Picture Left</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.
</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
Donec eu libero sit amet quam egestas semper.
</p>
</div>
<div class="right">
<div class="top">
<h2 class="title">Top Right</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="bottom">
<h2 class="title">Bottom Right</h2>
<p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
</section>
</body>
</html>
body {
background-color: MintCream;
box-sizing: border-box;
margin: 1em 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}
section {
margin: 0 auto;
max-width: 1200px;
width: calc(100% - 2em);
color: MintCream;
display: flex;
flex-direction: row;
}
.left {
flex: 1;
margin: 0 1em 0 0;
background: url(img/big.jpg) no-repeat scroll center center / cover;
background-size: cover;
padding: 1em;
}
.right {
flex: 1;
flex-direction: column;
margin: 0;
}
.top {
background: url(img/small1.jpg) no-repeat scroll center center / cover;
background-size: cover;
padding: 1em;
margin-bottom: 1em;
}
.bottom {
background: url(img/small2.jpg) no-repeat scroll center center / cover;
background-size: cover;
padding: 1em;
}
.title {
text-align: center;
font-size: 2em;
}
p {
background-color: rgba(0, 0, 0, 0.6);
font-size: .9em;
margin: 1em;
padding: 1em 2em;
}
@media (max-width: 640px) {
section {
flex-direction: column;
}
div.left {
margin: 0 0 1em 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment