-
Notifications
You must be signed in to change notification settings - Fork 0
/
asia.html
84 lines (64 loc) · 4.75 KB
/
asia.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
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<!--Font from Google-->
<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=League+Spartan:wght@600&display=swap" rel="stylesheet">
<title>The Three of Us - Asia</title>
</head>
<body>
<header>
<!--image made by me on Canva-->
<img id="logo" src="Images/logo-text.png" alt="text saying the three of us" width="200" height="200">
<!-- Navigation bar -->
<nav class="nav">
<ul class="nav-links">
<li class="nav-page"><a href="index.html">Home</a></li>
<li class="nav-page"><a href="soon.html">About</a></li>
<li class="nav-page"><a href="profiles.html">Profiles</a></li>
<li class="nav-page"><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<!--Logo Flexbox-->
<main>
<div class="flex-container">
<div class="flex-item"><hr class="line"></div>
<div class="flex-item1"><img src="Images/logo.png" alt="a blue and green globe with the website name, the three of us around the top" width="200" height="200"></div>
<div class="flex-item"><hr class="line"></div>
</div>
<h1>Welcome to Asia</h1>
<!--Gallery Flexbox, the flex1 so I can assign CSS styling (flex) to the section, in my stylesheet the img tag is also assigned so that I can manipulate the size using media query -->
<section class="flex1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img src="Images/food-2362678_1920.jpg" alt="yellow bowl containing broth with potato snack" width="400" height="400">
<img src="Images/ramen-7187810_1920.jpg" alt="bowl of ramen with boiled egg split in half" width="400" height="400">
<img src="Images/sushi-354628_1920.jpg" alt="variety of sushi pieces" width="400" height="400">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</main>
<!--Footer which will be the same on all pages, containing copywrite, social media links and a email sign up form -->
<footer>
<hr class="line">
<p class="sign-up"> Sign up today to keep up to date with the three of us!</p>
<div class="form">
<form>
<label for="fname">First Name</label>
<input type="text" id="fname">
<label for="email">Email address</label>
<input type="text" id="email">
<input type="submit" value="Submit">
</form>
</div>
<!--Social media icons which would link to social media pages-->
<div id="social">
<img src="Images/icon1.svg" alt="twitter logo">
<img src="Images/icon2.svg" alt="twitch logo">
<img src="Images/icon3.svg" alt="insta logo">
</div>
<p id="trademark">website made by woods91</p>
</footer>