WEB PROGRAMMING: CSS-Color Sheet (MIDTERMS)
ASSIGNMENT 2.1
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>CSS of Color Values</title>
<link rel="stylesheet" href="CSS.css">
</head>
<header>COLOR VALUES</header>
<body>
<div class="row">
<div class="column">
<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="pink1">
<h1> Pink 1 </h1>
</div>
<div class="pink2">
<h1> Pink 0.9 </h1>
</div>
<div class="pink3">
<h1> Pink 0.8 </h1>
</div>
<div class="pink4">
<h1> Pink 0.7 </h1>
</div>
<div class="pink5">
<h1> Pink 0.6 </h1>
</div>
<div class="pink6">
<h1> Pink 0.5 </h1>
</div>
<div class="pink7">
<h1> Pink 0.4 </h1>
</div>
<div class="pink8">
<h1> Pink 0.3 </h1>
</div>
<div class="pink9">
<h1> Pink 0.2 </h1>
</div>
<div class="pink10">
<h1> Pink 0.1 </h1>
</div>
<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="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>
</body>
</html>
CSS:
header {
position:fixed;
font-family: 'century gothic';
top:0px;
left:0px;
width:100%;
height:10%;
color:#FFFFFF;
background-color: rgb(0,0,0);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 200% 50%;
font-size: 50px;
padding:15px;
font-color: rgb(255,255,255);
}
body {
margin-top: 80px;
margin-left: 100px;
margin-right: 100px;
font-family: "century gothic";
background-color: rgb(232,232,232);
}
.column {
float: left;
width: 100%;
padding: 10px;
height: 300px;
}
.red1 {
background: rgba(252, 3, 3, 1);
margin-left: -20px;
margin-bottom: -20px;
}
.red2 {
background: rgba(252, 3, 3, 0.9);
margin-left: -20px;
margin-bottom: -20px;
}
div.red3 {
background: rgba(252, 3, 3, 0.8);
margin-left: -20px;
margin-bottom: -20px;
}
div.red4 {
background: rgba(252, 3, 3, 0.7);
margin-left: -20px;
margin-bottom: -20px;
}
div.red5 {
background: rgba(252, 3, 3, 0.6);
margin-left: -20px;
margin-bottom: -20px;
}
div.red6 {
background: rgba(252, 3, 3, 0.5);
margin-left: -20px;
margin-bottom: -20px;
}
div.red7 {
background: rgba(252, 3, 3, 0.4);
margin-left: -20px;
margin-bottom: -20px;
}
div.red8 {
background: rgba(252, 3, 3, 0.3);
margin-left: -20px;
margin-bottom: -20px;
}
div.red9 {
background: rgba(252, 3, 3, 0.2);
margin-left: -20px;
margin-bottom: -20px;
}
div.red10 {
background: rgba(252, 3, 3, 0.1);
margin-left: -20px;
margin-bottom: -20px;
}
div.yellow1 {
background: rgba(252, 227, 3, 1);
margin-left: -18px;
margin-bottom: -20px;
}
div.yellow2 {
background: rgba(252, 227, 3, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.yellow3 {
background: rgba(252, 227, 3, 0.8);
margin-left: -18px;
margin-bottom: -20px;
}
div.yellow4 {
background: rgba(252, 227, 3, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}
div.yellow5 {
background: rgba(252, 227, 3, 0.6);
margin-left: -18px;
margin-bottom: -20px;
}
div.yellow6 {
background: rgba(252, 227, 3, 0.5);
margin-left: -18px;
margin-bottom: -20px;
}
div.yellow7 {
background: rgba(252, 227, 3, 0.4);
margin-left: -18px;
margin-bottom: -20px;
}
div.yellow8 {
background: rgba(252, 227, 3, 0.3);
margin-left: -18px;
margin-bottom: -20px;
}
div.yellow9 {
background: rgba(252, 227, 3, 0.2);
margin-left: -18px;
margin-bottom: -20px;
}
div.yellow10 {
background: rgba(252, 227, 3, 0.1);
margin-left: -18px;
margin-bottom: -20px;
}
div.green1 {
background: rgba(26, 227, 0, 1);
margin-top: 30px;
margin-left: -18px;
margin-bottom: -20px;
}
div.green2 {
background: rgba(26, 227, 0, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.green3 {
background: rgba(26, 227, 0, 0.8);
margin-left: -18px;
margin-bottom: -20px;
}
div.green4 {
background: rgba(26, 227, 0, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}
div.green5 {
background: rgba(26, 227, 0, 0.6);
margin-left: -18px;
margin-bottom: -20px;
}
div.green6 {
background: rgba(26, 227, 0, 0.5);
margin-left: -18px;
margin-bottom: -20px;
}
div.green7 {
background: rgba(26, 227, 0, 0.4);
margin-left: -18px;
margin-bottom: -20px;
}
div.green8 {
background: rgba(26, 227, 0, 0.3);
margin-left: -18px;
margin-bottom: -20px;
}
div.green9 {
background: rgba(26, 227, 0, 0.2);
margin-left: -18px;
margin-bottom: -20px;
}
div.green10 {
background: rgba(26, 227, 0, 0.1);
margin-left: -18px;
margin-bottom: -20px;
}
div.blue1 {
background: rgba(31, 15, 255, 1);
margin-top: 30px;
margin-left: -18px;
margin-bottom: -20px;
}
div.blue2 {
background: rgba(31, 15, 255, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.blue3 {
background: rgba(31, 15, 255, 0.8);
margin-left: -18px;
margin-bottom: -20px;
}
div.blue4 {
background: rgba(31, 15, 255, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}
div.blue5 {
background: rgba(31, 15, 255, 0.6);
margin-left: -18px;
margin-bottom: -20px;
}
div.blue6 {
background: rgba(31, 15, 255, 0.5);
margin-left: -18px;
margin-bottom: -20px;
}
div.blue7 {
background: rgba(31, 15, 255, 0.4);
margin-left: -18px;
margin-bottom: -20px;
}
div.blue8 {
background: rgba(31, 15, 255, 0.3);
margin-left: -18px;
margin-bottom: -20px;
}
div.blue9 {
background: rgba(31, 15, 255, 0.2);
margin-left: -18px;
margin-bottom: -20px;
}
div.blue10 {
background: rgba(31, 15, 255, 0.1);
margin-left: -18px;
margin-bottom: -20px;
}
div.violet1 {
background: rgba(195, 0, 255, 1);
margin-top: 30px;
margin-left: -18px;
margin-bottom: -20px;
}
div.violet2 {
background: rgba(195, 0, 255, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.violet3 {
background: rgba(195, 0, 255, 0.8);
margin-left: -18px;
margin-bottom: -20px;
}
div.violet4 {
background: rgba(195, 0, 255, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}
div.violet5 {
background: rgba(195, 0, 255, 0.6);
margin-left: -18px;
margin-bottom: -20px;
}
div.violet6 {
background: rgba(195, 0, 255, 0.5);
margin-left: -18px;
margin-bottom: -20px;
}
div.violet7 {
background: rgba(195, 0, 255, 0.4);
margin-left: -18px;
margin-bottom: -20px;
}
div.violet8 {
background: rgba(195, 0, 255, 0.3);
margin-left: -18px;
margin-bottom: -20px;
}
div.violet9 {
background: rgba(195, 0, 255, 0.2);
margin-left: -18px;
margin-bottom: -20px;
}
div.violet10 {
background: rgba(195, 0, 255, 0.1);
margin-left: -18px;
margin-bottom: -20px;
}
div.pink1 {
background: rgba(255, 0, 111, 1);
margin-top: 30px;
margin-left: -18px;
margin-bottom: -20px;
}
div.pink2 {
background: rgba(255, 0, 111, 0.9);
margin-left: -18px;
margin-bottom: -20px;
}
div.pink3 {
background: rgba(255, 0, 111, 0.8);
margin-left: -18px;
margin-bottom: -20px;
}
div.pink4 {
background: rgba(255, 0, 111, 0.7);
margin-left: -18px;
margin-bottom: -20px;
}
div.pink5 {
background: rgba(255, 0, 111, 0.6);
margin-left: -18px;
margin-bottom: -20px;
}
div.pink6 {
background: rgba(255, 0, 111, 0.5);
margin-left: -18px;
margin-bottom: -20px;
}
div.pink7 {
background: rgba(255, 0, 111, 0.4);
margin-left: -18px;
margin-bottom: -20px;
}
div.pink8 {
background: rgba(255, 0, 111, 0.3);
margin-left: -18px;
margin-bottom: -20px;
}
div.pink9 {
background: rgba(255, 0, 111, 0.2);
margin-left: -18px;
margin-bottom: -20px;
}
div.pink10 {
background: rgba(255, 0, 111, 0.1);
margin-left: -18px;
margin-bottom: -20px;
}
RESULT:
Comments
Post a Comment