-
Notifications
You must be signed in to change notification settings - Fork 0
/
hobbies.html
103 lines (87 loc) · 4.18 KB
/
hobbies.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
<!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>Hobbies</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>Hobbies</h1>
<p>
This page is to show off some of my hobbies! Click the images for further context!
</p>
</div>
</div>
</section>
<div class="box-container">
<a class="box-1" href="https://www.youtube.com/watch?v=hPr-Yc92qaY"></a>
<a class="box-2" href="https://www.youtube.com/watch?v=hPr-Yc92qaY"></a>
</div>
<div class="box-container">
<a class="box-3" href="https://www.youtube.com/watch?v=hPr-Yc92qaY"></a>
<a class="box-4" href="https://www.youtube.com/watch?v=hPr-Yc92qaY"></a>
</div>
</main>
<!-- FOOTER -->
<footer class="hobbies-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>