Skip to content

Instantly share code, notes, and snippets.

@jnewman12

jnewman12/index.html

Created June 18, 2013 06:12
Show Gist options
  • Save jnewman12/5803010 to your computer and use it in GitHub Desktop.
Save jnewman12/5803010 to your computer and use it in GitHub Desktop.
Download ZIP
This is part of what we did at General Assembly for the first day of WDI. It is a focus on how all html documents are boxes, squares, and how we can manipulate them. Thanks to @machikoyasuda for helping me out with this.
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body style="">
<div id="background">
<div id="blue">
<div class="red" style="margin-top: 40px"></div>
<div class="red" style="margin-top:10px"></div>
<div class="red" style="margin-top:10px"></div>
</div>
<div id="container">
<div class="square" style="background: yellow; margin-left: 200px; margin-bottom: -20px; z-index: 0; top: 60px;"></div>
<div class="square" style="background: green; margin-left: 100px; margin-bottom: -20px; z-index: 1; top: 170px;"></div>
<div class="square" style="background: pink; z-index: 2; margin-top: 245;"></div>
</div>
</div>
</body>
</html>
Raw
style.css
#background {
background: #d3d3d3;
width: 90%;
height: 420px;
margin: 0 auto;
}
#blue {
background: blue;
float: left;
width: 40%;
height: 360px;
margin-left: 50px;
margin-top: 30px;
}
.red {
background: red;
border: 4px black solid;
border-radius: 30px;
width: 80%;
height: 80px;
margin-left: 40px;
}
#container {
margin-left: 65%;
margin-top: 30px;
}
.square {
border: 3px black solid;
width: 140px;
height: 140px;
position: absolute;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment