I also tried linking the html to google font and changed the background into a full image. Linking google font allows the text on the website using more varieties of different fonts. This is a completely different layout from the first one. Compared to the first version, I think that this version has less interaction and less justification.
<!DOCTYPE html>
<html>
<head>
<title>Stand with Hong Kong</title>
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:700|Noto+Sans+TC&display=swap" rel="stylesheet">
<style>
head {color: white}
body {background-image: url("picture/002.jpg");
background-size: cover;
font-family: 'Noto Sans TC', sans-serif;
color: white}
img {width: 512px;
height: 341px;
margin-left: 600px}
table, th, td {
margin-top: 200px;
border: 1px solid yellow;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: center;
color: yellow;
}
h1{
color: yellow;
text-align: center;
#text-decoration: underline;
font-family: 'Noto Sans TC', sans-serif;
font-size: 150px;
margin: -5px;
}
marquee{
font-family: 'IBM Plex Mono', monospace;
font-size: 40pt;
color: #ffffff;
height: 70px;
padding-top: 40px;
#scrollamount = "15";
direction = "right";
}
</style>
</head>
<body>
<marquee>On a sweltering afternoon in August, antigovernment protesters in gas masks and hard hats flooded a six-lane road, prompting riot police officers to fire tear gas. But life on that Hong Kong street continued after the clashes faded, even as the neighborhood became the focus of further unrest.</marquee>
<a href="001.html">
<h1>香港加油</h1>
</a>
<table style="width:100%">
<tr>
<th>+852 Before-and-After</th>
<th>Stand with Hong Kong</th>
<th>Fight for freedom</th>
</tr>
</table>
<marquee>On a sweltering afternoon in August, antigovernment protesters in gas masks and hard hats flooded a six-lane road, prompting riot police officers to fire tear gas. But life on that Hong Kong street continued after the clashes faded, even as the neighborhood became the focus of further unrest.</marquee>
</body>
</html>
ATTEMPT 4
This is the second one I did today. I changed the background into another image which is before the protest. This communicates the idea of before protest, and when people click onto the three options on the table, it will bring them to different websites thats about the after images and incidents of the protest.
No comments:
Post a Comment