Thursday, April 15, 2021

 


Exercise 7- CSS Layout and web page concept






<!DOCTYPE html>

<html>

<head>

<style>

* {

  box-sizing: border-box;

}


body {

  font-family: Arial;

  padding: 10px;

  background: #e04138;

}



.header {

  padding: 30px;

  text-align: center;

  background:  #e04138;

}


.header h1 {

  font-size: 50px;

}



.topnav {

  overflow: hidden;

  background-color:#05101f;

}



.topnav a {

  float: left;

  display: block;

  color: #f2f2f2;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

}



.topnav a:hover {

  background-color: #ddd;

  color: grey;

}



.leftcolumn {   

  float: left;

  width: 75%;

}


.rightcolumn {

  float: left;

  width: 25%;

  background-color: #e04138;

  padding-left: 20px;

}




.card {

  background-color: grey;

  padding: 20px;

  margin-top: 20px;

}


.row:after {

  content: "";

  display: table;

  clear: both;

}



.footer {

  padding: 5px;

  text-align: center;

  background: grey;

  margin-top: 5px;

}



@media screen and (max-width: 800px) {

  .leftcolumn, .rightcolumn {   

    width: 100%;

    padding: 0;

  }

}



@media screen and (max-width: 400px) {

  .topnav a {

    float: none;

    width: 100%;

  }

}

</style>

</head>

<body>


<div class="header">

  <h1>All About Valorant </h1>

 <img src="https://i.ibb.co/yXtcKDW/Valorant-Wallpaper-Boys-Dark-Display.jpg" alt="Valorant-Wallpaper-Boys-Dark-Display" border="0">

</div>


<div class="topnav">

  <a href="#">About me</a>

  <a href="#">My favorite agent</a>

  <a href="#">wallpapers</a>

 

</div>


<div class="row">

  <div class="leftcolumn">

    <div class="card">

      <h2>MY Favorite Agent</h2>

      <h5></h5>

      <a href="https://ibb.co/56PpCgB"><img src="https://i.ibb.co/G0qYG4c/V9RZPkF.png" alt="V9RZPkF" border="0"></a>

      <p>Phoenix </p>

      <p>Phoenix is an explosive pyromancer who excels at initiating combat for his team. He can use his flames to not only manipulate the battlefield, but also heal himself. With a ton of offensive options, he's one of the best 1v1 fighters among the Valorant agents.</p>

    </div>

    <div class="card">

      <h2>2nd Favorite Agent</h2>

  <img src="https://i.ibb.co/DKXHyjn/original.webp" alt="original"

     

      <p>Sova</p>

      <p>Sova is a VALORANT agent, who specializes in scouting and reconnaisance. Sova's entire kit is built around finding the enemies and marking them for his allies. Owl Drone and Recon Bolt are a single target and AoE scanners, respectively<br><br> Abilities: <br> 

Shock Bolt; Owl Drone<br>

Signature Ability: Recon Bolt<br>

Ultimate: Hunter's Fury<br></p>

    </div>

  </div>

  <div class="rightcolumn">

    <div class="card">

      <h2>About Me</h2>

   

      <p>Hi Im Adrian Im a small time wanna be gamer and this is my website about Valorat<br>

      <br> you can watch my strean @wannabegamer.gg</p>

    </div>

    <div class="card">

      <h3>TIPS</h3>

      <p><br>Always communicate with your teammates.<br>

<br>Practice shooting as much as possible.<br>

<br>In the beginning, avoid movement while shooting.<br>

<br>Get familiar with gun recoil.<br>

<br>Use strafe movements in a head-on battle.<br></p>

    </div>

    <div class="card">

      <h3>Follow Me</h3>

      <p> <a href="https://www.facebook.com/adrian.guisihan.3"> Facebook </a> </p>

<p> <a href="https://www.youtube.com/channel/UC5ldvw522w9QWRgNZgdd2Ww"> YouTube </a> </p>

<p><a href="https://frst-blog-101.blogspot.com/ " target =blank> Portfolios </a> </p>

    </div>

  </div>

</div>


<div class="footer">

  <img src="https://i.ibb.co/TTyQ0Vb/4cc22fbc-valorant-killbanners-top-half.jpg" alt="4cc22fbc-valorant-killbanners-top-half" style=width:985px;height:224.5px;;border: 1px

    

</div>


</body>

</html>


Posted by at No comments:

Monday, April 12, 2021

 Exercise #6: Order List


<!DOCTYPE html>

<html>

<head>

<style>

h1 {

margin-left: 280px; 

font-family: "Century Gothic"; 

}

h4 {

margin-left: 285px; 

font-family: Century Gothic; 

}

P {

margin-left:40px; 

}


label {

display: inline-block;

width: 200px;

height: 30px;

padding:20px;

margin-left: 20px;

font-family: "Century Gothic"; 

}

fieldset {

margin-left: 280px; 

margin-right: 280px; 

background: #635fb0;

padding: 5px; 

font-family: "Century Gothic"; 

}

#demo {

position: relative; 

margin-left: 280px; 

margin-right: 280px; 

}

#runthis {

margin-left: 205px; 

margin-top:25px; 

}

</style>

</head> 

<body> 


<h1>OrderList </h1>

<h4>Please enter your details below </h4>


<fieldset> 

<label for="name">Enter your Name: </label> 

<input type="text" placeholder="Enter name" onfocus="this.placeholder=''" name="Name" id="name" value="" required> <br>

<label for="number">Enter your order code: </label>

<input type="number" placeholder="Enter order code" onfocus="this.placeholder=''" name="Code" id="code" value="" required><br>

<label style="margin-top:-22px;"> <i><br><br> Type "1" for Package 1 <br> Type "2" for Package 2 <br> Type "3" for Package 3 </i> </label> <br><br>

<label for="number">Enter number of days: </label>

<input type="number" placeholder="Enter number of days" onfocus="this.placeholder=''" name="Days" id="days" value="" required> <br>

<button type="button" id="runthis" onclick="display()">Display</button> <br><br> 


 </fieldset> 


<p id="demo"></p>  


<script>




function display()

{

name=document.getElementById("name").value;

code=document.getElementById("code").value;

days=document.getElementById("days").value;

switch(code)

{

case '1':

price = 10000;

total = price*days

order = "1: Photo Shoot";

document.getElementById("demo").innerHTML = "Name: "+name+"<br> Order: "+order+

"<br> Package: 200 Printed photos, copy of digital photos with Make-up Artist and Stylist"

+"<br>.Price: 10,000 per day"+"<br> Number of Days: "+days+"<br> Total amount due: "+total;

break;

case '2':

price = 25000;

total = price*days

order = "2: Photo and Video Coverage";

document.getElementById("demo").innerHTML = "Name: "+name+"<br> Order: "+order+

"<br> Package: 300 Printed photos, copy of digital photos / 1 edited video, copy of raw video footages"

+"<br>.Price: 25,000 per day"+"<br> Number of Days: "+days+"<br> Total amount due: "+total;

break;

case '3':

price = 15000;

total = price*days

order = "2: Video Coverage";

document.getElementById("demo").innerHTML = "Name: "+name+"<br> Order: "+order+

"<br> Package: 1 edited video, copy of raw video footages, with Make-up Artist and Stylist"

+"<br>.Price: 15,000 per day"+"<br> Number of Days: "+days+"<br> Total amount due: "+total;

break;

default:

document.getElementById("demo").innerHTML = "No package found!";

break;

}

}

</script>

</body>

</html>

Posted by at No comments:

Thursday, April 8, 2021

 

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;

}

Posted by at No comments:
Subscribe to: Posts (Atom)