Web Programming:Activity 5

 







HTML CODE:


<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="backgroundcode.css">
</head>
<body>

<style>
body {background-color: black;}
    h1 {color: white;}
    p  {color: white;}
</style>


<center> <h1>Transparent Box</h1> </center>
<center> <p>With opacity:</p> </center>
<div class="row">
<div class="column" style"opacity:0.1;">
<h1>10% opacity</h1>
</div>

<div class="column" style="opacity:0.3;">
<h1>30% opacity</h1>
</div>
</div>
<div style="opacity:0.6;">
<h1>60% opacity</h1>
</div>

<div>
<h1>opacity</h1>
</div>

<center> <p>With RGBA color values:</p> </center>
<div class="first">
<h1>10% opacity</h1>
</div>

<div class="second">
<h1>30% opacity</h1>
</div>

<div class="third">
<h1>60% opacity</h1>
</div>

<div class="fourth">
<h1>80% opacity</h1>
</div>

<div>
<h1>default</h1>
</div>

</body>
</html>

CSS CODE:


div { 
background: rgb(234, 0,58, 100);
}

div.first { 
background: rgb(0, 128, 10,0.1);
}

div.second { 
background: rgb(230, 70, 53,90, 0.3);
}

div.third { 
background: rgb(0, 128, 0, 0.6);
}

div.fourth { 
background: rgb(0, 150, 0, 0.8);
}



Comments

Post a Comment

Popular posts from this blog

Activity #4 (Finals) Password form to open your blog

  SIGN UP CODE <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Password form to open your blog </title> </head> <style> body { font-size: 16px; background: #AB2121; font-family: Arial; } * { box-sizing: border-box; } h2 { text-align: center; } input[type=text], input[type=password], input[type=confirm-password-input] { width: 100%; padding: 15px; margin: 5px 0 22px 0; display: inline-block; border: none; background: white; } input[type=text]:focus, input[type=password]:focus, input[type=confirm-password-input]:focus. { background-color: #AB2121; outline: none; } button { background-color: Black; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 5px; cursor: pointer; width: 100%; opacity: 0.9; } button:hover { opacity:1; } form { width: 600px; background: #AB2121; border: 1px solid #ccc; margin: 1.5% auto auto auto; border-radius: 5px...
Read more

Activity #3 (Finals) Counting Drill Game

  HTML CODE <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Counting Drill Game </title> <style>        body { max-width: 200px; min-width: 580px;  } fieldset { background-color: white; margin: auto; align-content: center; padding: 60px; width: 100px; height: 600px; } buon { background-color: black; color: white; border-radius: 10px; width: 100px; height: 50px; } .demo{ background-color:red; color:yellow; font-size: 20px; } html { font-family: arial; margin-left: 4%; background-color: maroon;     } </style> </head> <body> <h1> Counting Drill Game</h1> <p> Count how many square on the screen! </p> <fieldset> <canvas id="myCanvas" width="900" height="200" style="border:none;"> </canvas> <p id="demo" class="demo"> </p> <label> How man...
Read more