Website 3

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">
</head>
<body>
   <header>
      CITG Website
   </header>

   <div align="center">
<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>   
   </div>


	<h2>Team Members</h2>
<table align="center">
   <tr><th>Given Name</th><th>Family Name</th><th>Community</th><th>Clan</th></tr>
   <tr><td>Jason</td><td>Harris</td><td>Bundaberg</td><td>Gubbi</td></tr>
   <tr><td>Eve</td><td>Jackson</td><td>Hervey Bay</td><td>Badtjala</td></tr>
   <tr><td>Adam</td><td>Johnson</td><td>Gin Gin</td><td>Wakka</td></tr>
   <tr><td>Isabel</td><td>Miller</td><td>Turkey Beach</td><td>Gooreng</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>
   <h2>Community Information</h2>
<table align="center">
   <tr><th>Date</th><th>Place</th><th>Information</th><th>Name</th></tr>
   <tr><td>June 2021</td><td>Lowmead</td><td>Lorem Ipsum</td><td>Aunty Sally</td></tr>
   <tr><td>June 2021</td><td>Rosedale</td><td>Lorem Ipsum</td><td>Aunty Rena</td></tr>
   <tr><td>June 2021</td><td>Wartburg</td><td>Lorem Ipsum</td><td>Uncle John</td></tr>
   <tr><td>June 2021</td><td>Rules Beach</td><td>Lorem Ipsum</td><td>Uncle Mick</td></tr>
</table>

<h2>Put LANGUAGE BUTTONS here</h2>

<footer>Website Under Construction</footer>

</body>
</html>

Website 3

Replace script in editor and save as index.html.

Copy CSS script in editor and save as styles.css in assets folder.

Website 3