Skip to content

Instantly share code, notes, and snippets.

@pastleo

pastleo/left-right.html

Created July 10, 2019 07:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pastleo/fe912a43e01376a55a8a59dfc678f068 to your computer and use it in GitHub Desktop.
Save pastleo/fe912a43e01376a55a8a59dfc678f068 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
left-right.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: stretch;
flex-direction: row;
}
.container {
flex: 1;
display: flex;
align-items: stretch;
flex-direction: row;
}
.content-bg {
flex: 0.65;
background: green;
display: flex;
justify-content: flex-end;
align-items: center;
}
.right-bg {
flex: 0.35;
background: blue;
display: flex;
justify-content: flex-start;
align-items: center;
}
.content {
flex: 1;
position: relative;
padding: 20px;
max-width: 832px;
height: 500px;
}
.right {
flex: 1;
position: relative;
padding: 20px;
max-width: 448px;
height: 500px;
}
</style>
</head>
<body>
<div class='content-bg'>
<div class='content'>
<h2>content</h2>
</div>
</div>
<div class='right-bg'>
<div class='right'>
<h2>right</h2>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment