-
Notifications
You must be signed in to change notification settings - Fork 0
/
bio.html
123 lines (110 loc) · 4.75 KB
/
bio.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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/feef8a8d33.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<title>About Hamza</title> <!-- Title of the page -->
</head>
<!-- HEADER KEEP SAME ON ALL PAGES -->
<body> <!-- Header - same for every site, don't change CSS styling -->
<header class="header">
<div class="logo-container">
<i class="fa-regular fa-user"></i>
<h4 class="logo">Hamza Jugon</h4>
</div>
<nav>
<ul class="nav-links">
<li><a class="nav-link" href="index.html">Home</a> </li>
<li><a class="nav-link" href="bio.html">Bio</a></li>
<li><a class="nav-link" href="projects.html">Projects</a> </li>
<li><a class="nav-link" href="hobbies.html">Hobbies</a> </li>
</ul>
</nav>
<!-- Adding clickable images that take you to the expedia/multiverse websites -->
<nav class="company-logo">
<a href="https://www.expediagroup.com/home/default.aspx"><img src="./images/expedia logo.png" alt="Expedia Logo"/></a>
<a href="https://www.multiverse.io/en-GB" ><img src="./images/multiverse-logo.png" alt="Multiverse Logo"/></a>
</nav>
</header>
<!-- MAIN BODY-->
<main>
<section class="bio-presentation">
<div class="introduction">
<div class="intro-text">
<h1>Bio Page</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<table class="bio-table" border="1">
<tr>
<td rowspan ="2">
<img id="profile-pic" src="/images/profile pic.jpeg" alt="Profile picture of Hamza">
</td>
<th>About me</th>
</tr>
<tr>
<td>
<li>Name : Hamza</li>
<li>Age : 22</li>
<li>Job : Software Engineer </li>
</td>
</tr>
<tr>
<th colspan="2">About Moi</th>
</tr>
<tr>
<td colspan="2">
<p>Lorem ipsum</p><br>
</td>
</tr>
<tr>
<th colspan="2">TBC</th>
</tr>
<tr>
<td colspan="2">
<p>Lorem ipsum</p><br>
</td>
</tr>
</table>
</section>
</main>
<!-- FOOTER -->
<footer class="bio-footer"> <!-- The start of the footer section of the page-->
<section class="column1">
<h3>INTERNAL LINKS</h3>
<a href="/bio.html">Bio</a>
<a href="/projects.html">Projects</a>
<a href="/hobbies.html">Hobbies</a>
</section>
<section class="column2">
<h3>NEWSLETTER</h3>
<form>
<!-- Line below is to create the input field, it has "email" so it only accepts the email data type.
It also has the required section at the end to stop the user submitting an empty box -->
<input type="email" placeholder="Enter your email to subscribe to my newsletter!" required>
<br> <!-- This <br> tag is to put a gap between the form and the subcribe buttom-->
<button type="submit"> SIGN ME UP!</button>
</form>
</section>
<section class="column3">
<h3>CONTACT</h3>
<a class="email-link" href="mailto: [email protected]">[email protected]</a>
<div class="social-media">
<a href="https://www.linkedin.com/in/hamza-jugon-254707121/" class="fa-brands fa-linkedin-in"></a>
<a href="https://github.com/HamzaJugon" class="fa-brands fa-github"></a>
<a href="" class="fa-brands fa-twitter"></a>
<a href="https://www.instagram.com/hamza_jugon/" class="fa-brands fa-instagram"></a>
<a id="strava" href="https://www.strava.com/athletes/17712387" class="fa-brands fa-strava"></a>
</div>
</section>
</footer>
</body>
</html>