Skip to content

Instantly share code, notes, and snippets.

@blambeau

blambeau/alice.html

Last active March 5, 2020 20:44
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 blambeau/048362e172e323202a668c0d30552ed6 to your computer and use it in GitHub Desktop.
Save blambeau/048362e172e323202a668c0d30552ed6 to your computer and use it in GitHub Desktop.
Download ZIP
CSS layout exercice
Raw
alice.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://gist.githubusercontent.com/DavidWells/18e73022e723037a50d6/raw/ead7e72d11c847ad9b81f094686543522101c278/reset.css" />
<style>
body {
margin: 10%;
}
.container {
border: 1px solid red;
display: flex;
flex-flow: column;
justify-content: space-between;
width: 100%;
padding: 16px;
}
.content-right .box:last-child {
margin-bottom: 0px;
}
.content-right .full:first-child {
margin-bottom: 16px;
}
.box {
border: 1px solid #ccc;
margin-bottom: 16px;
width: 100%;
}
@media screen and (min-width: 600px) {
.container {
flex-flow: column;
}
.content-left {
width: 100%;
margin-right: 24px;
}
.content-left .box:last-child {
margin-bottom: 16px;
}
.content-right {
width: 100%;
display: flex;
flex-flow: column;
}
.content-right .full:first-child {
margin-bottom: 16px;
}
.full {
width: 100%;
display: flex;
flex-flow: row;
}
.full .box {
margin-bottom: 0px;
}
.demi {
width: 50%;
}
.demi:first-child {
margin-right: 16px;
}
}
@media screen and (min-width: 900px) {
.container {
flex-flow: row;
}
.content-left {
width: 40%;
}
.content-left .box:last-child {
margin-bottom: 0px;
}
.content-right {
width: 60%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="content-left">
<div class="box">
<h3>Key information</h3>
<div>Content...</div>
<div>Content...</div>
<div>Content...</div>
<div>Content...</div>
<div>Content...</div>
</div>
<div class="box">
<h3>Key financial</h3>
<div>Content...</div>
</div>
</div>
<div class="content-right">
<div class="full">
<div class="box">
<h3>Risk profile</h3>
<div>Content...</div>
</div>
</div>
<div class="full">
<div class="box demi">
<h3>Shareholders</h3>
<div>Content...</div>
</div>
<div class="box demi">
<h3>Headquarters</h3>
<div>Content...</div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
base.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://gist.githubusercontent.com/DavidWells/18e73022e723037a50d6/raw/ead7e72d11c847ad9b81f094686543522101c278/reset.css" />
<style>
body {
margin: 10%;
}
.container {
border: 1px solid red;
}
.box {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="box size40">
<h3>Key information</h3>
<div>Content...</div>
</div>
<div class="box size40">
<h3>Key financial</h3>
<div>Content...</div>
</div>
<div class="box size60">
<h3>Risk profile</h3>
<div>Content...</div>
</div>
<div class="box size30">
<h3>Shareholders</h3>
<div>Content...</div>
</div>
<div class="box size60">
<h3>Headquarters</h3>
<div>Content...</div>
</div>
</div>
</body>
</html>
Raw
bernard.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://gist.githubusercontent.com/DavidWells/18e73022e723037a50d6/raw/ead7e72d11c847ad9b81f094686543522101c278/reset.css" />
<style>
body {
margin: 10%;
}
.container {
border: 1px solid red;
width: 100%;
padding: 16px;
}
.box {
border: 1px solid #ccc;
}
/* desktop */
@media screen and (min-width: 600px) {
.container,
.column,
.row {
display: flex;
}
.column {
flex-direction: column;
flex-grow: 1;
}
.column-60 {
width: 60%;
}
.column-40 {
width: 40%;
}
.row {
flex-direction: row;
}
.box {
flex-grow: 1;
}
.column + .column {
margin-left: 16px;
}
.row + .row {
margin-top: 16px;
}
.column > .box + .box {
margin-top: 16px;
}
.row > .box + .box {
margin-left: 16px;
}
}
/* mobile */
@media screen and (max-width: 600px) {
.container,
.column,
.row {
display: block;
}
.box {
margin-top: 16px;
}
.container {
/* This one is ugly */
padding-top: 0px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="column column-40">
<div class="box">
<h3>Key information</h3>
<div>Content...</div>
<div>Content...</div>
<div>Content...</div>
<div>Content...</div>
<div>Content...</div>
</div>
<div class="box">
<h3>Key financial</h3>
<div>Content...</div>
</div>
</div>
<div class="column column-60">
<div class="row">
<div class="box">
<h3>Risk profile</h3>
<div>Content...</div>
</div>
</div>
<div class="row">
<div class="box">
<h3>Shareholders</h3>
<div>Content...</div>
</div>
<div class="box">
<h3>Headquarters</h3>
<div>Content...</div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
grid.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://gist.githubusercontent.com/DavidWells/18e73022e723037a50d6/raw/ead7e72d11c847ad9b81f094686543522101c278/reset.css" />
<style>
body {
margin: 10%;
}
.container {
border: 1px solid red;
width: 100%;
padding: 16px;
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: auto auto;
gap: 16px;
}
.box {
border: 1px solid #ccc;
}
/* desktop */
@media screen and (min-width: 600px) {
.box.key-info {
grid-area: 1 / 1 / span 1 / span 4;
}
.box.key-financial {
grid-area: 2 / 1 / span 1 / span 4;
}
.box.risk-profile {
grid-area: 1 / 5 / span 1 / span 6;
}
.box.shareholders {
grid-area: 2 / 5 / span 1 / span 3;
}
.box.headquarters {
grid-area: 2 / 8 / span 1 / span 3;
}
}
/* mobile */
@media screen and (max-width: 600px) {
.container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box key-info">
<h3>Key information</h3>
<div>Content...</div>
<div>Content...</div>
<div>Content...</div>
<div>Content...</div>
<div>Content...</div>
</div>
<div class="box key-financial">
<h3>Key financial</h3>
<div>Content...</div>
</div>
<div class="box risk-profile">
<h3>Risk profile</h3>
<div>Content...</div>
</div>
<div class="box shareholders">
<h3>Shareholders</h3>
<div>Content...</div>
</div>
<div class="box headquarters">
<h3>Headquarters</h3>
<div>Content...</div>
</div>
</div>
</body>
</html>
Raw
grid2.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://gist.githubusercontent.com/DavidWells/18e73022e723037a50d6/raw/ead7e72d11c847ad9b81f094686543522101c278/reset.css" />
<style>
body {
margin: 10%;
}
.container {
border: 1px solid red;
width: 100%;
padding: 16px;
display: grid;
gap: 16px;
}
.column {
display: grid;
gap: 16px;
}
.box {
border: 1px solid #ccc;
}
/* desktop */
@media screen and (min-width: 600px) {
.container {
grid-template-columns: 4fr 6fr;
}
.column-right {
grid-template-columns: repeat(2, 1fr);
}
.risk-profile {
grid-column-end: span 2;
}
}
</style>
</head>
<body>
<div class="container">
<div class="column column-left">
<div class="box key-info">
<h3>Key information</h3>
<div>Content...</div>
<div>Content...</div>
<div>Content...</div>
<div>Content...</div>
<div>Content...</div>
</div>
<div class="box key-financial">
<h3>Key financial</h3>
<div>Content...</div>
</div>
</div>
<div class="column column-right">
<div class="box risk-profile">
<h3>Risk profile</h3>
<div>Content...</div>
</div>
<div class="box shareholders">
<h3>Shareholders</h3>
<div>Content...</div>
</div>
<div class="box headquarters">
<h3>Headquarters</h3>
<div>Content...</div>
</div>
</div>
</div>
</body>
</html>
Raw
louis.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://gist.githubusercontent.com/DavidWells/18e73022e723037a50d6/raw/ead7e72d11c847ad9b81f094686543522101c278/reset.css" />
<style>
body {
margin: 10%;
}
.container {
border: 1px solid red;
display: flex;
flex-wrap: wrap;
padding: 8px;
justify-content: space-between;
}
.box {
border: 1px solid #ccc;
flex-grow: 1;
margin: 8px;
}
.size40 {
min-width: 300px;
}
.size60 {
min-width: 600px;
}
.size30 {
min-width: 150px;
}
.box * {
padding: 5px;
}
.box .rows .row {
font-size: 16px;
padding: 8px;
border-top: 1px solid grey;
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="container">
<div class="box size40">
<h3>Key information</h3>
<div>Content...</div>
<div>Content...</div>
<div>Content...</div>
<div>Content...</div>
<div>Content...</div>
</div>
<div class="box size60">
<h3>Risk profile</h3>
<div>Content...</div>
</div>
<div class="box size40">
<h3>Key financial</h3>
<div>Content...</div>
</div>
<div class="box size30">
<h3>Shareholders</h3>
<div>Content...</div>
</div>
<div class="box size30">
<h3>Headquarters</h3>
<div>Content...</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment