Skip to content

Instantly share code, notes, and snippets.

@eliaperantoni

eliaperantoni/index.html

Created October 16, 2016 12:01
Show Gist options
  • Save eliaperantoni/73084175f60dc50de82e4c9913f48b04 to your computer and use it in GitHub Desktop.
Save eliaperantoni/73084175f60dc50de82e4c9913f48b04 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html>
<head>
<title>Figure</title>
<style>
body{
margin: 0
}
div.f{
float: left;
}
.container-one{
padding: 1%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
width: 25%;
}
.container-two{
text-align: center;
padding: 1%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
width: 50%;
}
.container-three{
padding: 1%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
width: 25%;
}
.red{
background-color: #D32F2F;
width: 100%;
height: 40%;
}
.green{
width: 100%;
height: 60%;
border: 4px solid #43A047;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.blue{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
text-align: center;
margin: 0 2% 0 2%;
background-color: #29B6F6;
height: 100%;
width: 15%;
border: 4px solid #0277BD;
}
.spacing{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.b{
margin-top: 4%;
}
</style>
</head>
<body>
<div class="f container-one">
<div class="f red spacing" style="height: 38%"></div>
<div class="f green spacing b"></div>
</div>
<div class="f container-two">
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
</div>
<div class="f container-three">
<div class="f green spacing" style="height: 58%"></div>
<div class="f red spacing b"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment