Created
April 13, 2017 01:42
-
-
Save camckin10/4a603eec170f2e1ea8ab9fe842528043 to your computer and use it in GitHub Desktop.
displayexerciseproject
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Display exercise project HTML | |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>CSS Layout Exercises | display property</title> | |
<meta charset="utf-8" name="description" content="Layout exercise on `display` property for Thinkful's front end web development course"> | |
<!-- fonts --> | |
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> | |
<!-- reset --> | |
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css"> | |
<!-- styles --> | |
<link rel="stylesheet" type="text/css" href="styles/main.css"> | |
<!-- your styles will go in display-page.css --> | |
<link rel="stylesheet" type="text/css" href="styles/display-page.css"> | |
</head> | |
<body> | |
<!-- your HTML here to implement the colored box design --> | |
<div class = "container"> | |
<div class = "first_row"> | |
<div class = "box green"></div> | |
<div class = "box blue"></div> | |
</div> | |
<div class = "second_row"> | |
<div class = "box third one"></div> | |
<div class = "box third two"></div> | |
<div class = "box third three"></div> | |
</div> | |
</div> | |
<p>Placeholder!</p> | |
</body> | |
</html> | |
//Display exercise project CSS | |
.container { | |
width:800px; | |
height:auto; | |
display:block; | |
position:relative; | |
font-size:0; | |
} | |
.first_row , .second_row { | |
width:100%; | |
height:200px; | |
position:relative; | |
display:block; | |
} | |
.second_row { | |
height:300px; | |
} | |
.box { | |
width:50%; | |
height:inherit; | |
display:inline-block; | |
background-color: orange; | |
position: relative; | |
border:1px solid black; | |
} | |
.green { | |
background-color:green; | |
} | |
.blue { | |
background-color: blue; | |
} | |
.third { | |
width:33.33%; | |
} | |
.box.third.one { | |
background-color:gray; | |
} | |
.box.third.two { | |
background-color:black; | |
} | |
.box.third.three { | |
background-color: orange; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment