Activity Exercise 1

body{margin:0%;} nav{display:inline-block; height:80px; width:100%; border:1px solid blue;} .box1{background:red; height:250px; width:15%; margin-top:18px; margin-right:3%; float:left;} .box2{background:orange; height:250px; width:15%; margin-top:18px; margin-right:3%; float:left;} .box3{background:yellow; height:250px; width:15%; margin-top:18px; margin-right:3%; float:left;} .box4{background:green; height:250px; width:15%; margin-top:18px; margin-right:3%; float:left;} .box5{background:blue; height:250px; width:28%; margin-top:18px; margin-right:none; float:left;} .box6{background-image:linear-gradient(blue,red); width:25%; height:120px; margin-right:4%; margin-top:18px; float:left;} .box7{ background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); width:30%; height:120px; margin-right:4%; margin-top:18px; float:left;} .box8{background-image:linear-gradient(blue,red); width:37%; height:120px; margin-top:18px; float:left;} footer{display:inline-block; margin-top:18px; width:100%; background:blue; height:80px;}

Activity Exercise 2

body{margin:0%;} nav{background:black; height:60px;} .box-top{height:340px; background-image:url("naturo-monkey-selfie.jpg"); background-size:100%;} .c1,.c2,.c3,.c4,.c5{margin-top:16px; border-radius: 70px 70px 70px 70px; height:120px; background:red; display:inline-block;} .c1{background:red; width:15.2%; margin-left:6%;} .c2{background:gold; margin-right:3%; margin-left:3%; width:15.2%;} .c3{background:pink; margin-right:3%; width:15.2%;} .c4{background:blue; margin-right:3%; width:15.2%;} .c5{background:yellow; width:15.2%;} .i1,.i2,.i3{height:240px; margin-top:16px; width:27.33%; display:inline-block;} .i1{margin-left:6%; background:green; margin-right:3%;} .i2{background:orange; margin-right:3%;} .i3{background:brown; margin-right:3%;} footer{border-radius:3px 3px 3px 3px; height:80px; border: 1px solid; width:40%; margin-right:30%; margin-left:30%; margin-top:16px; margin-bottom:16px;}

Activity Exercise 3

body{margin:0%;} nav{height:85px; width:100%; border: 1px solid red; display:inline-block;} .set-b1{display:inline-block; width:88%; height:200px; margin-top:6px; margin-right:6%; margin-left:6%; background:#FFD700;} .sb1{float:left; background:#FFA500; margin-top:24px; height:230px; width:30%; border-right:1px solid red; border-top:1px solid red; border-left:1px solid red;} .sb2{float:right; background:#FF6347; margin-top:24px; height:230px; width:64%; border-right:1px solid red; border-top:1px solid red; border-left:1px solid red;} footer{display:inline-block; border:1px solid red; height:85px; width:100%;}

Activity Exercise 4

.set-box1{background:cyan; margin:10%; height:50px; margin-bottom:18px; margin-right:10%; margin-top:5%;} .box1{background:black; height:150px; width:253px; margin-left:10%; margin-top:18px; display:inline-block;} .box2{background:black; height:150px; width:253px; margin-top:18px; margin-left:14px; display:inline-block;} .box3{background:black; height:150px; width:253px; margin-left:14px; display:inline-block;} .box4{background:black; height:150px; width:253px; margin-left:14px; display:inline-block; margin-top:18px;} .box5{background:green; height:280px; width:344px; margin-top:18px; margin-left:10%; display:inline-block;} .box6{background:green; height:280px; width:344px; margin-left:14px; display:inline-block;} .box7{background:green; height:280px; width:344px; margin-left:14px; display:inline-block;} .box8{background:orange; height:560px; width:532px; margin-left:10%; margin-top:18px; display:inline-block;} .box9{background:orange; height:560px; width:532px; margin-top:18px; display:inline-block;}