Skip to content

Instantly share code, notes, and snippets.

@dethbiscuit

dethbiscuit/layout.css

Created July 5, 2018 05:49
Show Gist options
  • Save dethbiscuit/95dfd773fb14e7a45972c7464ff2869f to your computer and use it in GitHub Desktop.
Save dethbiscuit/95dfd773fb14e7a45972c7464ff2869f to your computer and use it in GitHub Desktop.
Download ZIP
Website basic layout
Raw
layout.css
body{
background-color:#F2F2F2;
}
div{
margin-left:auto;
margin-right:auto;
width:400px;
background-color:transparent;
text-align:center;
}
.banner{background-color:#FFFFFF;height:50px;margin-top:-50px;}
.top{background-color:#D1D1D1;height:50px;width:600px;}
.barre{background-color:#48A046;width:600px;height:30px;}
.container{-moz-box-shadow: 3px 0px 26px #FF3B3B;-webkit-box-shadow: 3px 0px 26px #FF3B3B;box-shadow: 3px 0px 26px #FF3B3B;width:400px;height:auto;}
.middle{background-color:#FFFFFF;height:200px;width:400px;}
.footer{background-color:#f5f5f5;height:30px;width:400px;margin-top:-50px;-moz-box-shadow: 3px 5px 8px #FF3B3B;-webkit-box-shadow: 3px 5px 8px #FF3B3B;box-shadow: 3px 5px 8px #FF3B3B;}
.bottom{background-color:#C4C4C4;height:50px;width:600px;}
Raw
layout.html
<div class="top"></div>
<div class="banner">banner</div>
<div class="barre">barre</div>
<div class="container">
<div class="middle">middle</div>
</div>
<div class="bottom">bottom</div>
<div class="footer">footer</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment