Website 5
Replace script in editor and save as
index.html
.
<!DOCTYPE html> <html> <head> <title>CITG Website</title> <meta charset="UTF-8"> <meta name="description" content="CUA Web Project"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="vasey" > <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="assets/styles.css"> <script src="assets/translate.js"></script> <script src="assets/team.js"></script> </head> <body> <header> CITG Website </header> <!-- About --> <table align="center"> <tr><td> This website identifies local knowledge and protocols that will inform the users of the site. The training that produced websites like this holds young people accountable for their actions, encourages their reintegration into the community and promotes community awareness.</td> <td> <canvas id="logo" width="300" height="300"> Your browser does not support the HTML5 canvas tag </canvas> <script> var canvas=document.getElementById("logo"); var ctx=canvas.getContext("2d"); var origin = canvas.height / 2; ctx.translate(origin, origin); // Outer Circle var radius = 115; ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2 * Math.PI, false); ctx.fillStyle = "black"; ctx.fill(); ctx.lineWidth = 5; ctx.strokeStyle = "red"; ctx.stroke(); // Inner Circle var radius = 70; ctx.beginPath(); ctx.arc(0, 0, radius, 0, 2 * Math.PI, false); ctx.fillStyle = "yellow"; ctx.fill(); // Small Circles var radius = 15; var xpos = [0,0,90,-90, 65, 65, -65, -65, 35, 35, -35, -35, 85, -85, 85, -85]; var ypos = [90,-90,0,0, 65, -65, 65, -65, 85, -85, 85, -85, 35, 35, -35, -35]; ctx.fillStyle = "yellow"; for (num = 0; num < 17; num++){ ctx.beginPath(); ctx.arc(xpos[num], ypos[num], radius, 0, 2 * Math.PI, false); ctx.fill(); } // Red Bars var xpos = [55, 55, 55, -145, -145, -145, 55, 55, 55,-145, -145, -145]; var ypos = [-30,-7.5,15, -30,-7.5, 15, 12.5, -7.5, -30, 15,-7.5, -30]; ctx.fillStyle="red"; ctx.rotate(45 * Math.PI / 180); for (num = 0; num<3; num++) { ctx.beginPath(); ctx.rect(xpos[num], ypos[num], 90, 15); ctx.fill(); } ctx.rotate(-90 * Math.PI / 180); for (num = 3; num<6; num++) { ctx.beginPath(); ctx.rect(xpos[num], ypos[num], 90, 15); ctx.fill(); } ctx.rotate(-90 * Math.PI / 180); for (num = 6; num<9; num++) { ctx.beginPath(); ctx.rect(xpos[num], ypos[num], 90, 15); ctx.fill(); } ctx.rotate(-90 * Math.PI / 180); for (num = 9; num<12; num++) { ctx.beginPath(); ctx.rect(xpos[num], ypos[num], 90, 15); ctx.fill(); } </script> </td> <td>The goal is to provide a fair and balanced response to young people who may have become disengaged from traditional learning. There are opportunities across the state, country and even the world offering real jobs to young people including those needing assistance to get back on track. </td></tr> </table> <!-- End About --> <h2>Team Members</h2> <main> <p><img id="myImage" src="images/team1.jpg" style="width:800px"></p> <button onMouseDown="return playImage1()">Cathie</button> <button onMouseDown="return playImage2()">Kenneth</button> <button onMouseDown="return playImage3()">Jasmine</button> <button onMouseDown="return playImage4()">Christopher</button> <button onMouseDown="return playImage5()">Taylor</button> </main> <table align="center"> <tr><th>Given Name</th><th>Family Name</th><th>Community</th><th>Clan</th></tr> <tr><td>Cathie</td><td>Harris</td><td>Bundaberg</td><td>Gubbi</td></tr> <tr><td>Kenneth</td><td>Jackson</td><td>Hervey Bay</td><td>Badtjala</td></tr> <tr><td>Jasmine</td><td>Johnson</td><td>Gin Gin</td><td>Wakka</td></tr> <tr><td>Christopher</td><td>Miller</td><td>Turkey Beach</td><td>Gooreng</td></tr> <tr><td>Taylor</td><td>Johnson</td><td>Murgon</td><td>Wakka</td></tr> </table> <h2>Community Map</h2> <div align="center"> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 500" height="500" width="300" id="svg2" version="1.1"> <g style="stroke:#0000ff;stroke-width:2;"> <path id="Gooreng Gooreng" d="m 19.435819,52.933534 c 18.794473,57.411126 11.259813,74.450936 0,85.778836 -2.735008,12.54814 -8.310415,24.22231 1.504892,40.63209 l 9.029351,38.37474 c 2.91691,12.80798 6.55847,24.3478 13.49796,30.11627 3.53597,-11.26585 11.22874,-24.17802 31.6488,-41.40296 l 28.592938,-21.06849 c 8.53414,-4.6455 17.08365,-9.20396 28.59295,3.00979 l 12.79158,12.03913 27.8405,-9.7818 13.54403,-11.28668 4.51468,2.25733 14.29647,-12.03913 -29.75387,-29.68937 -19.90756,-25.99163 c -4.42011,-10.56029 -5.43343,-20.552774 -3.76223,-30.097842 L 136.06494,68.734899 C 132.64399,61.611624 133.09988,51.719174 123.27336,49.171304 L 100.69998,30.360155 90.165742,16.816128 C 69.527782,28.267526 45.122372,40.472415 19.435819,52.933534 Z" style="fill:#00ffff;" /> <path id="Waka Waka" d="m 43.468022,247.83547 c -5.5862,9.68757 46.46669,71.21228 28.01863,122.46749 -8.25629,11.86753 -3.95341,27.37822 7.23577,33.89385 18.6813,10.87841 36.018138,31.43434 46.080398,75.02347 12.52428,-9.097 24.83089,-15.14678 36.11934,-6.94223 6.54651,1.65117 12.27541,8.20801 18.24426,13.32516 4.55066,9.10133 13.58346,3.78623 15.32825,-4.09796 6.47411,-11.04405 15.99485,-14.47153 15.99485,-14.47153 l 5.01416,-0.90454 c -37.8475,-79.63375 -96.485,-118.75354 -70.40939,-265.71624 -11.7977,-4.32996 -16.67956,-29.25461 -41.38453,-15.04892 l -28.592938,21.06849 c -11.20944,11.16161 -23.36635,18.53339 -31.6488,41.40296 z" style="fill:#ffff00;" /> <path id="Gubbi Gubbi" d="m 145.09429,200.41294 27.8405,-9.7818 13.54403,-11.28668 4.51468,2.25733 14.29647,-12.03913 1.40725,31.98182 c 5.53579,0.69197 9.05746,13.01767 10.32746,14.6009 2.10219,2.62067 9.25911,11.75194 9.25911,11.75194 -4.69727,-1.34208 -21.54776,12.20909 -26.70896,22.79165 -11.62389,13.17642 -4.28128,29.55791 -1.06836,29.55791 6.4325,9.19374 14.128,17.37709 25.28448,22.79165 l 22.79165,3.91731 1.06835,17.44986 v 16.02537 l -5.34179,14.24478 -5.34179,15.31314 7.83463,22.07941 -3.5612,27.06507 -0.35612,7.47851 -7.83462,34.89971 -17.54638,4.61749 c -20.88395,-41.21861 -55.10073,-87.35089 -69.86591,-140.45172 -10.69969,-38.47987 -9.36038,-80.60121 -0.54348,-125.26452 z" style="fill:#00ff00;" /> <path id="Badtjala" d="m 226.28379,227.89732 c -12.11187,3.31871 -19.35745,13.1258 -26.70896,22.79165 -10.4142,15.05509 -6.09248,22.48816 -1.06836,29.55791 6.19435,9.54582 15.05466,16.76607 25.28448,22.79165 l 22.79165,3.91731 0.71223,-7.12239 7.83463,-6.05403 c 0.83147,-9.41564 3.69626,-12.05351 6.05403,-16.38149 0.5724,-13.40782 4.00561,-11.55803 6.05403,-17.09374 l 2.84896,-21.72328 8.54687,-11.75195 -1.7806,-9.97134 -8.90299,3.56119 -0.35612,4.98568 -6.05403,-4.27344 -5.69791,5.3418 0.71224,11.75194 3.20508,6.05403 c -2.07098,2.32985 -2.27197,17.86911 -1.42448,13.88866 0.41951,-1.97035 -7.83463,13.53254 -6.41015,12.10806 1.42448,-1.42448 -3.5612,8.19075 -3.5612,8.19075 l -1.78059,9.61522 c 0,0 0.71223,5.69791 -0.71224,4.98567 -1.42448,-0.71223 -9.25911,-21.01104 -9.25911,-21.01104 l 1.42448,-19.94269 -2.49284,-11.75195 z" style="fill:#d40000;" /> </g> <g style="stroke:#0000ff;stroke-width:1;font-size:30px;"> <text x="0" y="25" transform="translate(90, 20) rotate(60)">Gooreng</text> <text x="0" y="75" transform="translate(90, 20) rotate(60)">Gooreng</text> <text x="175" y="275">Badtjala</text> <text x="0" y="75" transform="translate(210, 210) rotate(75)">Gubbi Gubbi</text> <text x="0" y="75" transform="translate(135, 210) rotate(75)">Waka Waka</text> </g> </svg> </div> <!-- End Map --> <!-- Community --> <h2>Community Information</h2> <div class="row"> <div class="column"> <h3>Aunty Sally - Lowmead - June 2021</h3> <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</h4> </div> <div class="column"> <h3>Aunty Rena - Rosedale - June 2021</h3> <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</h4> </div> <div class="column"> <h3>Uncle John - Wartburg - August 2021</h3> <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</h4> </div> <div class="column"> <h3>Uncle Mick - Rules Beach - August 2021</h3> <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</h4> </div> </div> <!-- End Community --> <!-- Language Table --> <h2 align="center">Languages</h2> <h2 align="center">Gooreng Gooreng - English</h2> <main> <button onMouseDown="playBina()">Bina - Ears</button> <button onMouseDown="playBii()">Bii - Knee</button> <button onMouseDown="playBiru()">Biru - Hand</button> <button onMouseDown="playBulu()">Bulu - Belly</button> <br/> <button onMouseDown="playDaigil()">Daigil - Bone</button> <button onMouseDown="playDii()">Dii- Blood</button> <button onMouseDown="playDira()">Dira - Teeth</button> <button onMouseDown="playDjanyar()">Djanyar - Leg</button> <br/> <button onMouseDown="playDjina()">Djina - Foot</button> <button onMouseDown="playDulga()">Dulga - Heart</button> <button onMouseDown="playDunga()">Dunga - Tongue</button> <button onMouseDown="playGaman()">Gaman - Hip</button> <br/> <button onMouseDown="playGana()">Gana - Liver</button> <button onMouseDown="playGeem()">Geem - Mouth</button> <button onMouseDown="playGilun()">Gilun - Shoulders</button> <button onMouseDown="playGini()">Gini - Arm</button> <br/> <button onMouseDown="playGoomoo()">Goomoo - Elbow</button> <button onMouseDown="playGubu()">Gubu - Hair</button> <button onMouseDown="playGunGun()">Gun Gun - Face</button> <button onMouseDown="playMil()">Mil - Eyes</button> <br/> <button onMouseDown="playMundi()">Mundi - Bottom</button> <button onMouseDown="playMuru()">Muru - Nose</button> <button onMouseDown="playMundoie()">Mundoie - Toes</button> <button onMouseDown="playTeeping()">Teeping - Eyebrow</button> <br/> <button onMouseDown="playWandal()">Wandal - Neck</button> <button onMouseDown="playWogoo()">Wogoo - Belly Button</button> <button onMouseDown="playWugul()">Wugul - Ankle</button> <button onMouseDown="playWurul()">Wurul - Head</button> <br/> <button onMouseDown="playYillim()">Yillim - Lip</button> <button onMouseDown="playYinboo()">Yinboo - Chin</button> <button onMouseDown="playYulan()">Yulan - Skin</button> <br/> </main> <br/><br/> <footer>Website Under Construction</footer> </body> </html>
Modify CSS script in editor and save as
styles.css
in assets folder.
/* Styles */ body { font-family: arial, sans-serif; color: #000000; /* Black */ } h1, h2, h3, h4 { text-align: center; color: #006600; /* Green */ } main { text-align: center;} table { font-size: 20px; color: rgb(0,140,0); /* Dark Green */ width: 100%; } th { font-size: 24px;} tr { text-align: center;} img { max-width: 100%; padding: 10px; height: auto; /* fit to height */ } header { background-color: rgb(0,140,0); /* Dark Green */ color: rgb(255,255,0); /* Yellow */ text-align: center; font-size: 40px; font-weight: bold; padding: 25px; } footer { background-color: rgb(0,140,0); /* Dark Green */ color: rgb(255,255,0); /* Yellow */ font-size: 20px; font-style: italic; text-align: center; padding: 25px; } button { background-color: rgb(0,140,0); /* Dark Green */ color: rgb(255,255,0); /* Yellow */ border: none; border-radius: 15px; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; margin: 4px 2px; cursor: pointer; } button:hover { background-color: rgb(255,255,0); /* Yellow */ color: rgb(0,140,0); /* Dark Green */ } /* Create four equal columns that floats next to each other */ .column { float: left; width: 23.0%; padding: 10px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Columns stack on top of each other instead of next to each other */ @media screen and (max-width:600px) { .column { width: 100%; } } nav { background-color: rgb(0,140,0); /* Dark Green */ color: rgb(255,255,0); /* Yellow */ overflow: hidden; position: fixed; top: 0; width: 100%; } nav a { float: left; display: block; color: #ffffff; /* White */ text-align: center; padding: 14px 16px; text-decoration: none; font-size: 24px; } nav a:hover { color: #008B00; /* Dark Green */ background-color: #ffffff; /* White */ }
Copy JS script in editor and save as
team.js
in assets folder.
/ * team.js */ function playImage1(){ document.getElementById('myImage').src='images/team1.jpg'; return true; } function playImage2(){ document.getElementById('myImage').src='images/team2.jpg'; return true; } function playImage3(){ document.getElementById('myImage').src='images/team3.jpg'; return true; } function playImage4(){ document.getElementById('myImage').src='images/team4.jpg'; return true; } function playImage5(){ document.getElementById('myImage').src='images/team5.jpg'; return true; }
Website 5
