<!DOCTYPE html> <html> <head> <title>IT2805</title> <style type="text/css"> html, body{ margin: 0; padding: 0; height: 100%; } /* Part 1 */ .header{ font-family: sans-serif; padding-top: 30px; margin-bottom: 40px; } .box{ border-width: 2px; border-color: #0060A3; border-style: solid; height: 400px; margin: 0 25%; } .one{ width: 100px; height: 100px; border-width: 2px; border-color: #FAA21B; border-style: solid; margin-top: 25px; margin-left: 25px; } .two{ width: 100px; height: 100px; border-width: 2px; border-color: #FAA21B; border-style: solid; background-color: #fff; margin-left: 25px; position: relative; top: 145px; } .three{ width: 100px; height: 100px; border-width: 2px; border-color: #FAA21B; border-style: solid; background-color: #fff; margin-left: auto; position: relative; left: 50px; bottom: 150px; } .five{ bottom: 10px; font-size: 35px; font-family: sans-serif; text-align: right; margin-right: 25px; } .four{ width: 50px; height: 50px; border-width: 2px; border-color: #FAA21B; border-style: solid; margin: 25px auto; } /* Part 2 */ a { color:blue; } a:hover { color: cyan; } a::selection { background-color: orange; } a:visited { color: purple; } a:visited:hover { color: green; } </style> </head> <body> <div class="header"> <h1>Assignment 3: position</h1> </div> <div class="box"> <div class="one"></div> <div class="two"></div> <div class="three"> <div class="four"></div> </div> <div class="five"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS is awesome</a> </div> </div> </body> </html>