Posts

Showing posts from May, 2021

Exercise 11 : Counting Drill Game (IMD)

Image
 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Counting Game 0v0 </title> <style> html { font-family: Century Gothic; margin-left: 20%; background-color: #17b8d4;     }        body { max-width: 100px; min-width: 480px;     } fieldset { background-color:#ae94e0; } button { background-color:#c9c012; color: black; border-radius: 30px; width: 200px; height: 60px; } </style> </head> <body> <h1>Count Game!!!</h1> <p> Let's count the shapes on the screen!!!</p> <fieldset> <canvas id="myCanvas" width="995" height="500" style="border:20px;"> </canvas> <label> How many shapes do you see??? </label> <input type="number" id="answer"> </input> <!-- <button id="colors" onclick="colors()" > Colors </but...
Post a Comment
Read more

Exercise 11: YouTube Video Link Parameters (WP)

Image
  HTML <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Linking Videos </title> <link rel="stylesheet" href="Exercise 11 Audio Video.css"> </head> <body> <div class="navbar"> <a href="#home">Home</a> <a href="https://finalssss009.blogspot.com/" >About</a> <a href="https://finalssss009.blogspot.com/">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> I wanna share some videos! ☺ </h3> <hr> <h1> short films </h1> <p> This video will autoplay but is muted </p> <iframe width="420" heig...
Post a Comment
Read more

Exercise 10 : Drawing in canvass (IMD)

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="1350" height="700" style="border:56px solid #302f2f;"> </canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d");    ctx.globalAlpha = 0.9    ctx.fillStyle = "#d4172d"; ctx.fillRect(65,75,125,125);  ctx.fillStyle = "#ba9565"; ctx.fillRect(85,95,125,125); ctx.fillStyle = "#11a882"; ctx.fillRect(100,110,125,125); ctx.fillStyle = "#8f396e"; ctx.fillRect(120,128,125,125); ctx.fillStyle = "#00aeff"; ctx.beginPath(); ctx.arc(180,190,50,0,2*Math.PI); ctx.fill(); ctx.fillStyle = "#fffde3"; ctx.beginPath(); ctx.arc(180,190,40,0,2*Math.PI); ctx.fill(); ctx.fillS...
Post a Comment
Read more

Exercise 10 animated web page (WP)

Image
 <!DOCTYPE html> <html> <head> <style> div {  background-color: red;  animation-name: example; animation-duration: 15s;      animation-iteration-count: infinite; } @keyframes example  {  from {background-color: violetn;} to {background-color: yellow;}  10% {background-color: violet;}  25% {background-color: blue;}  35% {background-color: yellow;}  40% {background-color: green;}  45% {background-color: grey;} .p1{ font-size:10px; color: red ; animation-name: p1; animation-duration: 4s; } fieldset     {  background: #9e4333;       }                body {background-color: #00A4E4;}     }           iframe:focus {   outline: none; } iframe[seamless] {   display: block; } .navbar {   overflow: hidden;   background-color: #121211; } .navbar a {   floa...
Post a Comment
Read more