Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions display-exercise.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,20 @@

<!-- 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 -->
<p>Placeholder!</p>
<main>
<div class="box-parent">
<div class="centered">
<div class="box box_half green"></div>
<div class="box box_half blue"></div>
<div class="box box_third grey"></div>
<div class="box box_third black"></div>
<div class="box box_third orange"></div>
</div>

<main>
</body>
</html>
55 changes: 55 additions & 0 deletions styles/display-page.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
main{
font-size: 0;
}

.box-parent {
margin-top: 90px;
margin-left: auto;
margin-right: auto;
width: 800px;
}

.box {
border: 1px solid black;
display: inline-block;
}

.box_half {
width: 50%;
height: 200px;
}

box_third {
width: 33.33%;
height: 300px;
}

.black {
background-color: black;
width: 33.33%;
height: 300px;
}

.green {
background-color: green;
}

.blue {
background-color: blue;
}

.orange {
background-color: orange;
width: 33.33%;
height: 300px;
}
.grey {
background-color: grey;
width: 33.33%;
height: 300px;
}


.centered {
text-align: center;
}
2 changes: 1 addition & 1 deletion styles/main.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
body * {
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
}

a {
text-decoration: none;
Expand Down