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:

Saturday, March 27, 2021

 Exercise #4 interactive 





</head>

<body>


<h1>Determine Salary and Tax </h1>


<p>Enter your details : </p>


<fieldset>


<label>Enter your name </label>


<input type="text" onfocus="this.value=''" name="fname" id="fname" value="" /> <br>



<label>Enter your salary </label>


 

<input type="number" onfocus="this.value=''" name="salary" id="salary" value="" /> <br>

<input type=button onclick="display()" name="display" id="display" value="display"> </button> 


</fieldset>


<p id=“demo”>

<input type=“number” id=“salary” value=“ ” name=“fname” />></p> 

<p id="demo2"></p>



<style> 

margin-bottom: 10px;

}

label {

display: inline-block;

width: 200px;

}

fieldset {

background: #A3C1AD;

}

legend {

padding: 20px 0;

font-size: 20px;

}

p{

display: inline-block;

width: 1000px;

}



<script> 



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


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


document.getElementById("demo").innerHTML = "Name " + fname + "<br> Grade :" +salary; 


If(salary >=45001 )

 {

 tax = salary *0.20 ;

 remarks = ‘<style color:“blue” ; font-size:40px; > Tax 20% : ‘ + tax;

 }

 else if (salary >=35001)

 {

 tax= salary * 0.15;

 remarks = ‘ <style color:“green” ; font-size:40px; > Tax 15% : ‘ +tax;

 }

 else if (salary >=25001)

 {

 tax= salary * 0.10;

 remaks = ‘<style color:violet ; font-size:40px; > Tax 10% : ‘ + tax ;

 }

 else

 remarks = "<style color:violet ; font-size:40px; > Tax Exempted: ‘ + tax ; 


document.getElementById("demo2").innerHTML= "<br> Remarks :" +remarks; 


}



</body>

</html>


Posted by at No comments:

 Exercise #5

<!DOCTYPE html>

<html lang="en">


<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

body {font-family: "Lato", sans-serif}

.mySlides {display: none}

</style>

<body>


<!-- Navbar on small screens (remove the onclick attribute if you want the navbar to always show on top of the content when clicking on the links) -->

<div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px">

  <a href="#band" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">BAND</a>

  <a href="#tour" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">TOUR</a>

  <a href="#contact" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">CONTACT</a>

  <a href="#" class="w3-bar-item w3-button w3-padding-large" onclick="myFunction()">MERCH</a>

</div>


<!-- Page content -->

<div class="w3-content" style="max-width:2000px;margin-top:46px">


  <!-- Automatic Slideshow Images -->

  <div class="mySlides w3-display-container w3-center">

    <img src=https://i.ibb.co/xLyCqYQ/van-x-roberto-1-0.jpg" alt="van-x-roberto-1-0" style="width:100%">

    <div class="w3-display-bottommiddle w3-container w3-text-white w3-padding-32 w3-hide-small">

      <h3>Los Angeles</h3>

      <p><b>We had the best time playing at Venice Beach!</b></p>   

    </div>

 


  <!-- The Band Section -->

  <div class="w3-container w3-content w3-center w3-padding-64" style="max-width:800px" id="band">

    <h2 class="w3-wide">my works</h2>

    <p class="w3-opacity"><i>I love graphic art</i></p>

    <p class="w3-justify"> As you can see below this is my top 3 arts I like the most</p>

    <div class="w3-row w3-padding-32">

      <div class="w3-third">

        <p>Name</p>

        <img src="https://i.ibb.co/ZzfXK7k/John-Wick-4.png" alt="John-Wick-4" class="w3-round w3-margin-bottom" alt="Random Name" style="width:60%">

      </div>

      <div class="w3-third">

        <p>Name</p>

        <img src="https://i.ibb.co/PWYysXm/black.png" alt="black"class="w3-round w3-margin-bottom" alt="Random Name" style="width:60%">

      </div>

      <div class="w3-third">

        <p>Name</p>

        <img src="https://i.ibb.co/wz3cqJQ/brand-logo-cstmz-1.png" alt="brand-logo-cstmz-1" class="w3-round" alt="Random Name" style="width:60%">

      </div>

    </div>

  </div>


 


 

  

<!-- End Page Content -->

</div>


<!-- Image of location/map -->

<img src="https://i.ibb.co/6H4p6Fg/ign.png" alt="ign"  class="w3-image w3-greyscale-min" style="width:100%">


<!-- Footer -->

<footer class="w3-container w3-padding-64 w3-center w3-opacity w3-light-grey w3-xlarge">

  <i class="fa fa-facebook-official w3-hover-opacity"></i>

  <i class="fa fa-instagram w3-hover-opacity"></i>

  <i class="fa fa-snapchat w3-hover-opacity"></i>

  <i class="fa fa-pinterest-p w3-hover-opacity"></i>

  <i class="fa fa-twitter w3-hover-opacity"></i>

  <i class="fa fa-linkedin w3-hover-opacity"></i>

  <p class="w3-medium"> <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>

</footer>


<script>

// Automatic Slideshow - change image every 4 seconds

var myIndex = 0;

carousel();


function carousel() {

  var i;

  var x = document.getElementsByClassName("mySlides");

  for (i = 0; i < x.length; i++) {

    x[i].style.display = "none";  

  }

  myIndex++;

  if (myIndex > x.length) {myIndex = 1}    

  x[myIndex-1].style.display = "block";  

  setTimeout(carousel, 4000);    

}



</script>


</body>

</html>


Posted by at No comments:

 Exercise #4


<!DOCTYPE html>

<html>

  <body>

    <h2>Floating Images</h2>

    <p><strong>Float the image to the right:</strong></p>

    <p>

      <img src="https://i.ibb.co/Y3qtVSL/kiyo1.jpg" alt="kiyo1" 

      style="float:right;width:421px;height:224.5px;margin-right:100px;border:

      5px solid #003b57;border-style:double;" hspace="15" vspace="15" A

      paragraph with a floating image. A paragraph with a floating image. A

      paragraph with a floating image.

    </p>

    <p><strong>Float the image to the left:</strong></p>

    <p>

    

      <img src="https://i.ibb.co/dkJWz70/rikkaasa.png" alt="rikkaasa"

      style="float:left;width:421px;height:224.5px;margin-left:100px;border: 5px

      solid #003b57;border-style:double;" hspace="15" vspace="15" A paragraph

      with a floating image. A paragraph with a floating image. A paragraph with

      a floating image.

    </p>

  </body>

</html>

Posted by at No comments:

Tuesday, March 9, 2021

 

exercise 3 register form

<!DOCTYPE html>

<html>

<head>

<title>Form Elelents and attributes</title>

<style> //format and styles

  div{

margin-bottom: 10px

  }

  label {

display: line-block

width: 120px;

   }

    fieldset {

background: #E749A0;

   }

    legend {

     padding: 20px 0;

   }

           body {background-color: #562F44;} // styles applied to body tag

</style>

</head>

<body>

<form action="/form/submit" method="GET or POST" >

<fieldset>

<legend>Personal Information:</legend>

<label for="fname">Name</label>

<input type="text"name="Name"id="dname"value"mary"/><br/><br/>

<label for="number">Phone</label>

<input type="number"name="phone"id="number"/><br/><br/>

<label for="email">Email</label>

<input type+"email"placeholder="Enter Email"name"required><br/><br/>

</fieldset>


  <fieldset>

  <legend>Gender:</legend>

  <input type="radio"placeholder="male"name"gender"required>male<br/><br/>

  <input type="radio"placeholder="Female"name"gender"required>Female<br/><br/>

  </fieldset>

 

<fieldset>

  <legend>Talents/Skills :</legend>

  <input type="checkbox"placeholder="drawing"name="talents"required>Drawing<br/><br/>

  <input type="checkbox"placeholder="Photography"name="talents"required>Photography<br/><br/>

</fieldset>

 

<fieldset>

        <legend>Course:</legend>

<select name="list" id="list" width=10px >

<option value="MMA">MMA</option>

<option value="CRIMINOLOGY">CRIMINOLOGY</option>

<option value="PSYCHOLOGY">PSYCHOLOGY</option>

<option value="ABCOM">ABCOM</option>

<option value="js">JavaScript</option>

</select><br><br>

<textarea name="Comment" rows="3" cols="30" placeholder="Type some text here"></textarea><br/>

<input type="submit" value="Submit"/><br/><br/>

</fieldset>

 

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