-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
80 lines (75 loc) · 2.81 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
<!--
This is an HTML comment
You can write text in a comment and the content won't be visible in the page
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--
This is the page head - it contains info the browser uses
Like the title, which appears on the browser tab but not inside the page
Further down you'll see the content that displays in the page
-->
<title>Hello World!</title>
<!--
The website stylesheet
This connects your CSS file to your HTML
-->
<link rel="stylesheet" href="style.css" />
<!--
Here you can import your fonts
You can find all sort of fonts here: https://fonts.google.com/
Find the one that you like and copy hte <link> part from Selected family
-->
<link
href="https://fonts.googleapis.com/css2?family=Sono&display=swap"
rel="stylesheet"
/>
</head>
<body>
<!--
The body includes the content you see in the page
Each element is defined using tags, like this <div></div>
The attributes like class="wrapper" let us style elements in the CSS
We have already prepared basic structure for your elements, but you can change them anyway you like
-->
<div class="wrapper">
<div class="content">
<!-- Our main title -->
<h1 class="title">Hello World!</h1>
<!--
Here you can implement the logo from assets folder
For source attribute you will need to copy the url link of the picture,
because it's uploaded online
-->
<img
class="logo"
src="https://cdn.glitch.global/39f68ee0-2072-468c-bcbc-449a606dfefe/green_fox_logo.png?v=1699760651353"
/>
<!--
This is our main text area
Look closely on the page that you should recreate and figure out what tags you have to add
-->
<div class="main">
<h2 class="subtitle">Beginning of something big</h2>
<p class="subtext">
Welcome to my
<span class="bold-text">First Website Project! </span> First let me
introduce myself My name is Bruce Wayne and I want to become the
very best software developer, that works by day an protect innocent
by night. Here is a list of my biggest achievements:
</p>
<ul class="framed-list">
<li>Own multibillion company Wayne Enterprises</li>
<li>Defeated Joker and sent him to Arkham Asylum</li>
<li>Fought aliens to save Gotham City</li>
<li>Looking way better than Clark Kent</li>
</ul>
<!-- Add more elements and style them in the CSS file -->
</div>
</div>
</div>
</body>
</html>