Posts

Showing posts from May, 2021

FINALS* INTERACTIVE Ex 10: Counting Drill

-
  <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Counting Game </title> <style> html { font-family: cursive; margin-left: 4%; background-color: #91fc44;     }        body { max-width: 800px; min-width: 480px;     } fieldset { background-color: pink; } button { background-color: #6aff00; color: black; border-radius: 10px; width: 100px; height: 40px; } </style> </head> <body> <h1>Let's Count!</h1> <p> Let's count the shapes on the screen! </p> <fieldset> <canvas id="myCanvas" width="1200" height="300" style="border:none;"> </canvas> <label> How many shapes do you see? </label> <input type="number" id="answer"> </input> <!-- <button id="colors" onclick="colors()" > Colors </button> --...
Post a Comment
Read more

FINALS* WEB PROG. Ex 11: Multimedia

-
  HTML <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Linking Videos </title> <link rel="stylesheet" href="Exercise 011 iFrame video CSS codes.css"> </head> <body> <div class="navbar"> <a href="#home">Home</a> <a href="https://www.blogger.com/profile/10763411263729214682" target="Unhappy">About</a> <a href="https://https://www.facebook.com/darenkate.ojascastro.9/" target="Unhappy">Contacts</a> </div> <div id="row1" class="row"> <div class="column1"> </div> <div id="row1" class="row"> <div class="column2"> <h1 id="home"> HOME </h1> <h3> Welcome! come and join me to watch cute animals.  </h3> <hr> <h...
Post a Comment
Read more

FINALS* INTERACTIVE Ex 9: Canvas Drawing

-
Image
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Exercise 010 Drawing in Canvas</title> </head> <body> <canvas id="myCanvas" width="1345.5" height="603.5" style="border:1px solid #000000;"> </canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.globalAlpha = 0.8 ctx.fillStyle = "#000000"; ctx.fillRect(500,110,283,353); ctx.fillStyle = "#54f7e7"; ctx.fillRect(520,128,245,300); ctx.fillStyle = "#fff36e"; ctx.beginPath(); ctx.arc(580,190,50,0,2*Math.PI); ctx.fill(); ctx.fillStyle = "##42ffef"; ctx.beginPath(); ctx.arc(580,190,40,0,2*Math.PI); ctx.fill(); ctx.fillStyle = "#ffae00"; ctx.beginPath(); ctx.arc(580,190,30,0,2*Math.PI); ctx.fill(); ctx.fillStyle = "#02bd22"; ctx.fillRe...
Post a Comment
Read more

FINALS* WEB PROG: Ex 10: Animation

-
  <!DOCTYPE html> <html> <head> <style>  div {   width: 100px;   height: 50px;   background-color: red;   font-weight: bold;   position: relative;   animation: mymove 5s infinite; } #div1 {animation-timing-function: linear;} #div2 {animation-timing-function: ease;} #div3 {animation-timing-function: ease-in;} #div4 {animation-timing-function: ease-out;} #div5 {animation-timing-function: ease-in-out;} @keyframes mymove {   from {left: 0px;}   to {left: 300px;} } </style> </head> <body> <p><strong>Note:</strong> Send this to your family and love ones.</p> <div id="div1">I</div> <div id="div2">LOVE</div> <div id="div3">YOU</div> <div id="div4">SO</div> <div id="div5">MUCH</div> <p><strong>Show your love this pandemic and send it to your family, friends or classmates.</p> </body> </html>
Post a Comment
Read more

FINALS!!!

-
Post a Comment
Read more

MIDTERM* WEB PROG Ex: 9 CSS flexbox and iframe

-
Image
                                                    <!DOCTYPE html> <html> <head> <style> fieldset     { background: #32a852;       }                body {background-color: #2a8017;}     }           iframe:focus {   outline: none; } iframe[seamless] {   display: block; } .navbar {   overflow: hidden;   background-color: #121211; } .navbar a {   float: left;   font-size: 16px;   color: #c6ff94;   text-align: center;   padding: 14px 16px;   text-decoration: none; } .dropdown {   float: left;   overflow: hidden; } .dropdown .dropbtn {   font-size: 16px;     border: none;   outline: none;   color:#c6ff94; ...
Post a Comment
Read more