-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
62 lines (53 loc) · 3.13 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
<!DOCTYPE html>
<html lang="en"> <!--specifying language as english, understandable-->
<head>
<meta charset="utf-8"> <!--specifying character encoding-->
<title>Feast and Wonder</title> <!--specifying title to make the website operable-->
<link rel="stylesheet" href="styles.css"> <!--defines a default stylesheet and its source-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--setting the width of the page to follow the width of the viewport, with an inital zoom level of 1-->
</head>
<body>
<header> <!--using semantic html to create 3 distinct blocs: header, main, and footer-->
<div class="skip-to-main">
<a href="#main">Skip to main content</a>
</div>
<nav class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="seoul.html">Seoul</a></li>
<li><a href="paris.html">Paris</a></li>
<li><a href="visuals.html">Visuals</a></li>
<li><a href="prototypes.html">Prototypes</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main id="main"> <!--Attributing an id to target it in CSS and also to allow skip to main to work-->
<section class="grid-main"> <!--creating a section to apply grid in css for the layout of the page-->
<div class="title-container">
<h1><span class="larger">Feast</span><br><span class="between">&</span><span class="smaller">Wonder</span></h1>
<hr>
</div>
<div class="body-container">
<p>Welcome to Feast & Wonder, a food travel blog.
Follow my travels through videos and pictures of typical cuisine around the world.
Through my portfolio, I hope that whenever you come accross some of these meals or
ingredients in real life you are transported into the city associated with it.
Alternatively, whenever you find yourself in one of these places please keep your
senses open to feel the wonderful culinary experiences available to you!
</p>
</div>
</section>
</main>
<footer>
<h2>Want to see more?</h2>
<hr>
<ul class="socials">
<li><a href="http://www.example.org"><img src="images/icons8-instagram-96.png" width="96" height="96" alt="Instagram icon"></a></li>
<li><a href="http://www.example.org"><img src="images/icons8-facebook-96.png" width="96" height="96" alt="Facebook icon"></a></li>
<li><a href="http://www.example.org"><img src="images/icons8-pinterest-96.png" width="96" height="96" alt="Pinterest icon"></a></li>
<li class="attribution"> <a href="https://icons8.com/icon/84884/instagram">Instagram</a>,<a href="https://icons8.com/icon/118487/facebook">Facebook</a>,<a href="https://icons8.com/icon/87072/pinterest">Pinterest</a>icons by<a href="https://icons8.com">Icons8</a></li> <!--further comments on licensing in README.md-->
</ul>
</footer>
</body>
</html>