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>
MIDTERM* WEB PROG Ex: 9 CSS flexbox and iframe
<!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; ...
MIDTERM* INTERACTIVE Ex: 8 Change Button Properties on change events
Javascript Events Change Button Properties onchange events Enter color Enter number
MIDTERM*WEB PRO Ex:7 CSS Layout & Webpage Concept
BESTSELLER Products Contacts javascript BESTSELLER PROTECT YOUR SKIN DAY AND NIGHT! 🔥 We got your skin covered this summer! The addiction in this sunblock cream-gel with spf 45 by Brightest Skin Essential Main never stops! 💥 BSEssential Products What's yor fave products of Brightest Skin? Let us know! 💖 Contact Us What are you waiting for? Buy now! If you want to be reseller contuct us our Bailen Distrubutor ✨ all rights reserve 2021 ©. ...
MIDTERM*Interactive Ex6: Order List
Order List Please enter your details below Enter your Name: Enter your code: Type "1" for Package 1 Type "2" for Package 2 Type "3" for Package 3 Enter number of days: Display
MIDTERM*WEBPRO. Ex 6: HTML Color Values
COLOR PALETTE file:///C:/Users/Asus/Downloads/EXERCISE%20006/Color%20Style%20Sheet.html Click to see the code and the source of color! HTML FILE CSS FILE
WEB PROGRAMMING Ex 5: Header & body
EXERCISE 5 <!DOCTYPE html> <html> <head> <style> body, html { height: 100%; margin: 0; font-family: Times New Roman; background: url("https://scontent.fmnl4-4.fna.fbcdn.net/v/t1.0-9/70242776_2439389376152255_8887865040120578048_o.jpg?_nc_cat=102&ccb=1-3&_nc_sid=19026a&_nc_eui2=AeHkihiUq9Ic1PXUZIssJEfOYW9wiVNLRmNhb3CJU0tGY6Xa9401SSnQH1MuuEybwdFa4t8Nlb-ouGKO21TKNz31&_nc_ohc=Mw1hJnaZVXsAX-6qAUV&_nc_ht=scontent.fmnl4-4.fna&oh=345e2eb735432a8d1623541351ac0cfc&oe=6083B8B5") fixed; background-repeat: no-repeat; background-position: 55% 29.5%; position: relative; } </style> </head> <body> <h2>Daren Kate A. Ojascastro</h2> <p>I'm a 21 years old and a 3rd year student in Perpetual taking a Bachelor of Multimedia Arts.Being a MMA student is so fun yet stressful. Just imagine finising all of the projects and activity in the majors and also minors. Majors subject can cost you a l...
WEB PROGRAMMING Ex 4: Image
Floating Images Float the image to the right: Float the image to the left:
WEB PROGRAMMING Ex 2: Online Resume
My Profile Name : Daren Kate Ojascastro dare.kate.ojascastro@gmail.com 008 Brg. Tabora Gen. E. Aguinaldo, Bailen, Cavite/ Cell 0995-021-14441 My Profile My Education Tabora Elementary School General Emilio Aguinaldo Highschool Olivarez College Tagaytay University of Perpetual Help Skills adobe photoshop adobe illustrator adobe premier pro adobe animate krita blender java Links to your portfolio Facebook Instagram Portfolios Discuss about the contents of your portfolio
INTERACTIVE MEDIA Ex 4: Salary and Tax
Determine Salary and Tax Enter your details : Enter your name Enter your salary >