Exercise 6 : External CSS style of color values
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS of Color Values</title>
<link href="Exercise 6 CSS colorDIV.css" rel="stylesheet">
</head>
<style>
* {
box-sizing: border-box;
}
body {
margin-top: 15px;
margin-left: 100px;
margin-right: 100px;
}
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 300px;
.row:after {
content: "";
display: table;
clear: both;
}
</style>
<body>
<h1>Color Values </h1>
<div class="row">
<div class="column">
<div class="green1">
<h1> Green 1 </h1>
</div>
<div class="green2">
<h1> Green 0.9 </h1>
</div>
<div class="green3">
<h1> Green 0.8 </h1>
</div>
<div class="green4">
<h1> Green 0.7</h1>
</div>
<div class="green5">
<h1> Green 0.6 </h1>
</div>
<div class="green6">
<h1> Green 0.5 </h1>
</div>
<div class="green7">
<h1> Green 0.4 </h1>
</div>
<div class="green8">
<h1> Green 0.3 </h1>
</div>
<div class="green9">
<h1> Green 0.2 </h1>
</div>
<div class="green10">
<h1> Green 0.1 </h1>
</div>
<div class="lightblue1">
<h1> light blue 1 </h1>
</div>
<div class="lightblue2">
<h1> light blue 0.9 </h1>
</div>
<div class="lightblue3">
<h1> light blue 0.8 </h1>
</div>
<div class="lightblue4">
<h1> light blue 0.7</h1>
</div>
<div class="lightblue5">
<h1> light blue 0.6 </h1>
</div>
<div class="lightblue6">
<h1> light blue 0.5 </h1>
</div>
<div class="lightblue7">
<h1> light blue 0.4 </h1>
</div>
<div class="lightblue8">
<h1> light blue 0.3 </h1>
</div>
<div class="lightblue9">
<h1> light blue 0.2 </h1>
</div>
<div class="lightblue10">
<h1> light blue 0.1 </h1>
</div>
<div class="Blue1">
<h1> Blue 1</h1>
</div>
<div class="Blue2">
<h1> Blue 0.9 </h1>
</div>
<div class="Blue3">
<h1> Blue 0.8 </h1>
</div>
<div class="Blue4">
<h1> Blue 0.7</h1>
</div>
<div class="Blue5">
<h1> Blue 0.6 </h1>
</div>
<div class="Blue6">
<h1> Blue 0.5 </h1>
</div>
<div class="Blue7">
<h1> Blue 0.4 </h1>
</div>
<div class="Blue8">
<h1> Blue 0.3 </h1>
</div>
<div class="Blue9">
<h1> Blue 0.2 </h1>
</div>
<div class="Blue10">
<h1> Blue 0.1 </h1>
</div>
</div>
<div class="column">
<div class="Violet1">
<h1> Violet 1 </h1>
</div>
<div class="Violet2">
<h1> Violet 0.9 </h1>
</div>
<div class="Violet3">
<h1> Violet 0.8 </h1>
</div>
<div class="Violet4">
<h1> Violet 0.7</h1>
</div>
<div class="Violet5">
<h1> Violet 0.6 </h1>
</div>
<div class="Violet6">
<h1> Violet 0.5 </h1>
</div>
<div class="Violet7">
<h1> Violet 0.4 </h1>
</div>
<div class="Violet8">
<h1> Violet 0.3 </h1>
</div>
<div class="Violet9">
<h1> Violet 0.2 </h1>
</div>
<div class="Violet10">
<h1> Violet 0.1 </h1>
</div>
<div class="Red1">
<h1> Red 1 </h1>
</div>
<div class="Red2">
<h1> Red 0.9 </h1>
</div>
<div class="Red3">
<h1> Red 0.8 </h1>
</div>
<div class="Red4">
<h1> Red 0.7</h1>
</div>
<div class="Red5">
<h1> Red 0.6 </h1>
</div>
<div class="Red6">
<h1> Red 0.5 </h1>
</div>
<div class="Red7">
<h1> Red 0.4 </h1>
</div>
<div class="Red8">
<h1> Red 0.3 </h1>
</div>
<div class="Red9">
<h1> Red 0.2 </h1>
</div>
<div class="Red10">
<h1> Red 0.1 </h1>
</div>
<div class="Orange1">
<h1> Orange 1 </h1>
</div>
<div class="Orange2">
<h1> Orange 0.9 </h1>
</div>
<div class="Orange3">
<h1> Orange 0.8 </h1>
</div>
<div class="Orange4">
<h1> Orange 0.7</h1>
</div>
<div class="Orange5">
<h1> Orange 0.6 </h1>
</div>
<div class="Orange6">
<h1> Orange 0.5 </h1>
</div>
<div class="Orange7">
<h1> Orange 0.4 </h1>
</div>
<div class="Orange8">
<h1> Orange 0.3 </h1>
</div>
<div class="Orange9">
<h1> Orange 0.2 </h1>
</div>
<div class="Orange10">
<h1> Orange 0.1 </h1>
</div>
</div>
<div class="column">
<div class="Yellow1">
<h1> Yellow 1 </h1>
</div>
<div class="Yellow2">
<h1> Yellow 0.9 </h1>
</div>
<div class="Yellow3">
<h1> Yellow 0.8 </h1>
</div>
<div class="Yellow4">
<h1> Yellow 0.7</h1>
</div>
<div class="Yellow5">
<h1> Yellow 0.6 </h1>
</div>
<div class="Yellow6">
<h1> Yellow 0.5 </h1>
</div>
<div class="Yellow7">
<h1> Yellow 0.4 </h1>
</div>
<div class="Yellow8">
<h1> Yellow 0.3 </h1>
</div>
<div class="Yellow9">
<h1> Yellow 0.2 </h1>
</div>
<div class="Yellow10">
<h1> Yellow 0.1 </h1>
</div>
<div class="Neonblue1">
<h1> Neonblue 1 </h1>
</div>
<div class="Neonblue2">
<h1> Neonblue 0.9 </h1>
</div>
<div class="Neonblue3">
<h1> Neonblue 0.8 </h1>
</div>
<div class="Neonblue4">
<h1> Neonblue 0.7</h1>
</div>
<div class="Neonblue5">
<h1> Neonblue 0.6 </h1>
</div>
<div class="Neonblue6">
<h1> Neonblue 0.5 </h1>
</div>
<div class="Neonblue7">
<h1> Neonblue 0.4 </h1>
</div>
<div class="Neonblue8">
<h1> Neonblue 0.3 </h1>
</div>
<div class="Neonblue9">
<h1> Neonblue 0.2 </h1>
</div>
<div class="Neonblue10">
<h1> Neonblue 0.1 </h1>
</div>
<div class="Black1">
<h1> Black 1 </h1>
</div>
<div class="Black2">
<h1> Black 0.9 </h1>
</div>
<div class="Black3">
<h1> Black 0.8 </h1>
</div>
<div class="Black4">
<h1> Black 0.7</h1>
</div>
<div class="Black5">
<h1> Black 0.6 </h1>
</div>
<div class="Black6">
<h1> Black 0.5 </h1>
</div>
<div class="Black7">
<h1> Black 0.4 </h1>
</div>
<div class="Black8">
<h1> Black 0.3 </h1>
</div>
<div class="Black9">
<h1> Black 0.2 </h1>
</div>
<div class="Black10">
<h1> Black 0.1 </h1>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
________________________
div.green1 {
background:rgba(3, 252, 48, 1);
margin-top: 30px ;
margin-left: -18px;
margin-bottom: -20px;
}
div.green2 {
background:rgba(3, 252, 48, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.green3 {
background: rgba(3, 252, 48, 0.8);
margin-left: -18px;
margin-bottom: -20px;
}
div.green4 {
background: rgba(3, 252, 48, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}
div.green5 {
background: rgba(3, 252, 48, 0.6);
margin-left: -18px;
margin-bottom: -20px;
}
div.green6 {
background: rgba(3, 252, 48, 0.5);
margin-left: -18px;
margin-bottom: -20px;
}
div.green7 {
background: rgba(3, 252, 48, 0.4);
margin-left: -18px;
margin-bottom: -20px;
}
div.green8 {
background: rgba(3, 252, 48, 0.3);
margin-left: -18px;
margin-bottom: -20px;
}
div.green9 {
background: rgba(3, 252, 48, 0.2);
margin-left: -18px;
margin-bottom: -20px;
}
div.green10 {
background: rgba(3, 252, 48, 0.1);
margin-left: -18px;
margin-bottom: -20px;
}
div.lightblue1 {
background: rgba(3, 177, 252, 1);
margin-top: 30px;
margin-left: -18px;
margin-bottom: -20px;
}
div.lightblue2 {
background: rgba(3, 177, 252, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.lightblue3 {
background: rgba(3, 177, 252, 0.8);
margin-left: -18px;
margin-bottom: -20px;
}
div.lightblue4 {
background: rgba(3, 177, 252, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}
div.lightblue5 {
background: rgba(3, 177, 252, 0.6);
margin-left: -18px;
margin-bottom: -20px;
}
div.lightblue6 {
background: rgba(3, 177, 252, 0.5);
margin-left: -18px;
margin-bottom: -20px;
}
div.lightblue7 {
background: rgba(3, 177, 252, 0.4);
margin-left: -18px;
margin-bottom: -20px;
}
div.lightblue8 {
background: rgba(3, 177, 252, 0.3);
margin-left: -18px;
margin-bottom: -20px;
}
div.lightblue9 {
background: rgba(3, 177, 252, 0.2);
margin-left: -18px;
margin-bottom: -20px;
}
div.lightblue10 {
background: rgba(3, 177, 252, 0.1);
margin-left: -18px;
margin-bottom: -20px;
}
div.Blue1 {
background: rgba(3, 65, 252, 1);
margin-top: 30px;
margin-left: -18px;
margin-bottom: -20px;
}
div.Blue2 {
background: rgba(3, 65, 252, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.Blue3 {
background: rgba(3, 65, 252, 0.8);
margin-left: -18px;
margin-bottom: -20px;
}
div.Blue4 {
background: rgba(3, 65, 252, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}
div.Blue5 {
background: rgba(3, 65, 252, 0.6);
margin-left: -18px;
margin-bottom: -20px;
}
div.Blue6 {
background: rgba(3, 65, 252, 0.5);
margin-left: -18px;
margin-bottom: -20px;
}
div.Blue7 {
background: rgba(3, 65, 252, 0.4);
margin-left: -18px;
margin-bottom: -20px;
}
div.Blue8 {
background: rgba(3, 65, 252, 0.3);
margin-left: -18px;
margin-bottom: -20px;
}
div.Blue9 {
background: rgba(3, 65, 252, 0.2);
margin-left: -18px;
margin-bottom: -20px;
}
div.Blue10 {
background: rgba(3, 65, 252, 0.1);
margin-left: -18px;
margin-bottom: -20px;
}
div.Violet1 {
background: rgba(128, 3, 252, 1);
margin-top: 30px;
margin-left: -18px;
margin-bottom: -20px;
}
div.Violet2 {
background: rgba(128, 3, 252, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.Violet3 {
background: rgba(128, 3, 252, 0.8);
margin-left: -18px;
margin-bottom: -20px;
}
div.Violet4 {
background: rgba(128, 3, 252, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}
div.Violet5 {
background: rgba(128, 3, 252, 0.6);
margin-left: -18px;
margin-bottom: -20px;
}
div.Violet6 {
background: rgba(128, 3, 252, 0.5);
margin-left: -18px;
margin-bottom: -20px;
}
div.Violet7 {
background: rgba(128, 3, 252, 0.4);
margin-left: -18px;
margin-bottom: -20px;
}
div.Violet8 {
background: rgba(128, 3, 252, 0.3);
margin-left: -18px;
margin-bottom: -20px;
}
div.Violet9 {
background: rgba(128, 3, 252, 0.2);
margin-left: -18px;
margin-bottom: -20px;
}
div.Violet10 {
background: rgba(128, 3, 252, 0.1);
margin-left: -18px;
margin-bottom: -20px;
}
div.Red1 {
background: rgba(255, 0, 0, 1);
margin-top: 30px;
margin-left: -18px;
margin-bottom: -20px;
}
div.Red2 {
background: rgba(255, 0, 0, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.Red3 {
background: rgba(255, 0, 0, 0.8);
margin-left: -18px;
margin-bottom: -20px;
}
div.Red4 {
background: rgba(255, 0, 0, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}
div.Red5 {
background: rgba(255, 0, 0, 0.6);
margin-left: -18px;
margin-bottom: -20px;
}
div.Red6 {
background: rgba(255, 0, 0, 0.5);
margin-left: -18px;
margin-bottom: -20px;
}
div.Red7 {
background: rgba(255, 0, 0, 0.4);
margin-left: -18px;
margin-bottom: -20px;
}
div.Red8 {
background: rgba(255, 0, 0, 0.3);
margin-left: -18px;
margin-bottom: -20px;
}
div.Red9 {
background: rgba(255, 0, 0, 0.2);
margin-left: -18px;
margin-bottom: -20px;
}
div.Red10 {
background: rgba(255, 0, 0, 0.1);
margin-left: -18px;
margin-bottom: -20px;
}
div.Orange1 {
background: rgba(255, 153, 0, 1);
margin-top: 30px;
margin-left: -18px;
margin-bottom: -20px;
}
div.Orange2 {
background: rgba(255, 153, 0, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.Orange3 {
background: rgba(255, 153, 0, 0.8);
margin-left: -18px;
margin-bottom: -20px;
}
div.Orange4 {
background: rgba(255, 153, 0, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}
div.Orange5 {
background: rgba(255, 153, 0, 0.6);
margin-left: -18px;
margin-bottom: -20px;
}
div.Orange6 {
background: rgba(255, 153, 0, 0.5);
margin-left: -18px;
margin-bottom: -20px;
}
div.Orange7 {
background: rgba(255, 153, 0, 0.4);
margin-left: -18px;
margin-bottom: -20px;
}
div.Orange8 {
background: rgba(255, 153, 0, 0.3);
margin-left: -18px;
margin-bottom: -20px;
}
div.Orange9 {
background: rgba(255, 153, 0, 0.2);
margin-left: -18px;
margin-bottom: -20px;
}
div.Orange10 {
background: rgba(255, 153, 0, 0.1);
margin-left: -18px;
margin-bottom: -20px;
}
div.Yellow1 {
background: rgba(255, 230, 0, 1);
margin-top: 30px;
margin-left: -18px;
margin-bottom: -20px;
}
div.Yellow2 {
background: rgba(255, 230, 0, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.Yellow3 {
background: rgba(255, 230, 0, 0.8);
margin-left: -18px;
margin-bottom: -20px;
}
div.Yellow4 {
background: rgba(255, 230, 0, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}
div.Yellow5 {
background: rgba(255, 230, 0, 0.6);
margin-left: -18px;
margin-bottom: -20px;
}
div.Yellow6 {
background: rgba(255, 230, 0, 0.5);
margin-left: -18px;
margin-bottom: -20px;
}
div.Yellow7 {
background: rgba(255, 230, 0, 0.4);
margin-left: -18px;
margin-bottom: -20px;
}
div.Yellow8 {
background: rgba(255, 230, 0, 0.3);
margin-left: -18px;
margin-bottom: -20px;
}
div.Yellow9 {
background: rgba(255, 230, 0, 0.2);
margin-left: -18px;
margin-bottom: -20px;
}
div.Yellow10 {
background: rgba(255, 230, 0, 0.1);
margin-left: -18px;
margin-bottom: -20px;
}
div.Neonblue1 {
background: rgba(0, 255, 217, 1);
margin-top: 30px;
margin-left: -18px;
margin-bottom: -20px;
}
div.Neonblue2 {
background: rgba(0, 255, 217, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.Neonblue3 {
background: rgba(0, 255, 217, 0.8);
margin-left: -18px;
margin-bottom: -20px;
}
div.Neonblue4 {
background: rgba(0, 255, 217, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}
div.Neonblue5 {
background: rgba(0, 255, 217, 0.6);
margin-left: -18px;
margin-bottom: -20px;
}
div.Neonblue6 {
background: rgba(0, 255, 217, 0.5);
margin-left: -18px;
margin-bottom: -20px;
}
div.Neonblue7 {
background: rgba(0, 255, 217, 0.4);
margin-left: -18px;
margin-bottom: -20px;
}
div.Neonblue8 {
background: rgba(0, 255, 217, 0.3);
margin-left: -18px;
margin-bottom: -20px;
}
div.Neonblue9 {
background: rgba(0, 255, 217, 0.2);
margin-left: -18px;
margin-bottom: -20px;
}
div.Neonblue10 {
background: rgba(0, 255, 217, 0.1);
margin-left: -18px;
margin-bottom: -20px;
}
div.Black1 {
background: rgba(23, 23, 23, 1);
margin-top: 30px;
margin-left: -18px;
margin-bottom: -20px;
}
div.Black2 {
background: rgba(23, 23, 23, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.Black3 {
background: rgba(23, 23, 23, 0.8);
margin-left: -18px;
margin-bottom: -20px;
}
div.Black4 {
background: rgba(23, 23, 23, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}
div.Black5 {
background: rgba(23, 23, 23, 0.6);
margin-left: -18px;
margin-bottom: -20px;
}
div.Black6 {
background: rgba(23, 23, 23, 0.5);
margin-left: -18px;
margin-bottom: -20px;
}
div.Black7 {
background: rgba(23, 23, 23, 0.4);
margin-left: -18px;
margin-bottom: -20px;
}
div.Black8 {
background: rgba(23, 23, 23, 0.3);
margin-left: -18px;
margin-bottom: -20px;
}
div.Black9 {
background: rgba(23, 23, 23, 0.2);
margin-left: -18px;
margin-bottom: -20px;
}
div.Black10 {
background: rgba(23, 23, 23, 0.1);
margin-left: -18px;
margin-bottom: -20px;
}
No comments:
Post a Comment