FINALS* WEBPROG. Ex 12-14: Responsive Website Page Design, Video Tutorial & Compilation of Activities
Exercise 12 : Responsive Website Page Design Exercise 13:Video Tutorial Exercise 14: Compilation of Activities
Posts
FINAL* INTERACTIVE EX 11: Chat Box
HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Message Box </title> <link rel="stylesheet" href="Final Interactive Exercise 12 Chat box"> </head> <body> <section> <h1> Click the chat button below to start chatting </h1> <button class="chat-btn"> <b> CHAT </b> </button> <div id="chat-container" onclick="changeColor()" class="chat-popup"> <div class="chat-area"> <div class="income-msg"> <img src="https://scontent.fmnl17-4.fna.fbcdn.net/v/t1.6435-9/119750405_2384811515158425_5837654595196179074_n.jpg?_nc_cat=104&ccb=1-3&_nc_sid=174925&_nc_eui2=AeGoOCv5B7EbHQm0GPd6xiTQo5YSZYd-j-qjlhJlh36P6uiVIMedAwR8ggszK-Ns8ZtNIsP2Ox1xR4PsBKq0JXXV&_nc_ohc=rnhO5oBjj5...
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> --...
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...
FINALS* INTERACTIVE Ex 9: Canvas Drawing
<!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...
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>