I tired making a completely different layout. I played around with the background and the layout of the website.
Accidentally placed an image on top of another image. It coincidently aligned with the background image.
Contrast: before and after
after --> background
before --> foreground
I also tried to change the font of the Chinese characters, however it was not successful in the coding process.
<!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/001.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 = "left";
}
</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="002.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>
No comments:
Post a Comment