<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>triple pro</title>
<style>
* {
box-sizing: border-box;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
hr {
width: auto;
}
#c1 {
width: 100%;
height: 100px;
}
#title1 {
color: black;
font-size: 30px;
text-indent: 50px;
font-family: fantasy;
letter-spacing: 2px;
margin-top: 4px;
margin-bottom: -1px;
padding-bottom: 0px;
}
#img1 {
float: left;
}
#heter1 {
padding-top: 2px;
margin-top: 2px;
}
#button1 {
display: block;
background-color: blue;
color: ghostwhite;
padding: 4px;
}
#button2 {
display: block;
background-color: #000;
color: #EEE;
padding: 5px;
margin: 5px;
}
#table1 {
color: #111;
font-weight: bold;
font-size: medium;
background-color: #EEEEEE;
border-color: dimgrey;
border-style: outset;
height: 50px;
}
#lzh3 {
border-radius: 15px;
color: honeydew;
text-align: center;
background-color: #333333;
float: left;
line-height: 170%;
height: fit-content;
}
#lzh4 {
background-color: #EEEEEE;
float: left;
line-height: 50%;
padding: 20px;
}
#bottom {
color: white;
background-color: #3a3936;
clear: both;
text-align: center;
}
#mail {
line-height: 150%;
font-family: Arial, Helvetica, sans-serif;
}
a:link {
text-decoration: none;
color: #EEEEEE;
display: block;
border-radius: 15px;
}
a:visited {
text-decoration: none;
color: #EEEEEE;
display: block;
border-radius: 15px;
}
a:hover {
text-decoration: underline;
text-size-adjust: 17px;
background-color: rgb(0, 0, 0);
display: block;
border-radius: 15px;
}
a:active {
text-decoration: line-through;
text-size-adjust: 17px;
background-color: rgb(0, 0, 0);
display: block;
border-radius: 15px;
}
</style>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</head>
<body>
<div id="c1" class="col-12">
<div id="title1">
<img id="img1" src="https://lh3.googleusercontent.com/eWKpYpuDjfojD2iKKRw9dwqh7Q1SCKMYqgb-EveSa12PeQIABLuQnWLSAv1GIa7q5MBM-Q=s100" alt="Triple pro icon">
<h1>TRIPLE PRO</h1>
</div>
<ul id="heter1">
<li><a href="#c1">first page</a></li>
<li><a href="#introdustion">introduction</a></li>
<li><a href="" onclick="alert('No such page')">--</a></li>
<li><a href="" onclick="alert('No such page')">--</a></li>
</ul><br>
<div id="lzh3" class="col-1">
<b>menu</b>
<br>
<a href="#c1">first page</a>
<br>
<a href="#introduction">introduction</a>
<br>
<a href="#team-member">Team Members</a>
<br>
<a href="#servis2">School Projects</a>
<br>
<a href="" onclick="alert('No such page')">1</a>
</div>
<div id="lzh4" class="col-10">
<h1>Frist page</h1>
<h5>Hi there welcom our "website" page.</h5>
<h3>Who are you? If you are a teacher please click teacher. Thanks.</h3>
<a href="#servis2" id="button1">teacher</a>
<hr>
<hr>
<div id="introdustion">
<h1>introdustion</h1>
<hr>
<h3>This is a team that can do anytthings. They had no company but a team name. This is their home page.</h3>
<h2>Cheack out their servis by clicking the button below.</h2>
<a href="#servis1" id="button2">Food dilivery</a>
<a href="#servis2" id="button2">School Projects</a>
</div>
<hr>
<hr>
<div id="team-member">
<h1>Team Members</h1>
<hr>
<table id="table1" cellpadding="10">
<caption>Member</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>job</th>
</tr>
<tr>
<td>Pan Zi Lok</td>
<td>14</td>
<td>data provider</td>
</tr>
<tr>
<td>Lau Chin Hean</td>
<td>14</td>
<td>data provider</td>
</tr>
<tr>
<td>Low Zi Hong</td>
<td>14</td>
<td>website desingner</td>
</tr>
</table>
</div>
<hr>
<hr>
<div id="servis1">
<h2>Food dilivery</h2>
<p>sorry, This servis is only avalable in certain time and onlyy in SMK Poi Lam.</p>
</div>
<hr>
<hr>
<div id="servis2">
<h2>School Projects</h2>
<br>
<p>Below are about our school's Projects that invovling internet.</p>
<table>
<tr>
<th>subject</th>
<th>Projects link</th>
</tr>
<tr>
<td>English</td>
<td>
<ol type="I">
<li><a href="#E.1">job suggestion</a></li>
</ol>
</td>
</tr>
</table>
</div>
<hr>
<hr>
<div id="E.1">
<h1>English Projects</h1>
<hr>
<h1>Job suggest</h1>
<p>There some link below that you can find some great jobs.</p>
<h5>**provider:Lau Chin Hean & Pan Zi Lok</h5>
<p>Tutoring</p>
<a href="https://www.superprof.com.my/recruitment/" id="button2">superprof</a>
<p>Others pert-time job</p>
<a href="https://my.jora.com/" id="button2">Jora</a>
<h4>Or more than a job...</h4>
<p>book writing & publishing</p>
<a href="https://kdp.amazon.com/" id="button2">amazon</a>
<p>Yotuber</p>
<a href="https://www.youtube.com/" id="button2">youtube</a>
<p>Photographer</p>
<a href="https://www.shutterstock.com/discover/image-footage-music?kw=shutterstock&c3apidt=p15832500245&gclid=CjwKCAiAsOmABhAwEiwAEBR0Zsbri4QIPBr_f97W3uetbHjCN7weuEzoRF5lmOHNyrWu1WSdw-rPUBoCaD4QAvD_BwE&gclsrc=aw.ds" id="button2">shutterstock</a>
<a href="https://500px.com/" id="button2">500px</a>
<p>online selling things</p>
<a href="https://shopee.com.my/" id="button2">shopee</a>
<a href="https://www.lazada.com.my/" id="button2">lazada</a>
<h3>I suggest you to choose online jobs since the pandemic is stil so serious. </h3>
<h3>end</h3>
</div>
<hr>
<hr> Suggestion to this "website"
<hr>
<h3>I fyou have any suggestion to this website you can coment below...👍</h3>
<h5>Since this is the first time to code a website</h5>
<fieldset>
<legend>Coment</legend>
Name:<input type="text" name="name" value="name"> <br>Email:
<input type="email" name="mail" value="mail"> <br>How was the website? :<br> <input type="radio" name="It was " value="Very Good!">Very Good<br>
<input type="radio" name="It was " value="Good!">Good!<br>
<input type="radio" name="It was " value="slightly Good.">slightly good.<br>
<input type="radio" name="It was " value="Bad">Bad<br>
<input type="radio" name="It was " value="Very bad">very bad<br> Coment:
<input type="text" name="Coment" value="coment">
<br>
<input type="submit" value="submit">
</fieldset>
</form>
<h3>Thanks for reading our website, bye!
</h3>
<a href="https://www.google.com/" background-color="black" color="black">bye</a>
</div>
</div>
<div id="bottom">No copyright</div>
</body>
</html>