-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtravel.html
103 lines (89 loc) · 5.71 KB
/
travel.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>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travel - Bridget Meyboom</title>
<link rel="stylesheet" href="style.css">
<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=Pixelify+Sans:wght@400;700&display=swap" rel="stylesheet">
<!--link below from searching font awesome cdn, for close icon for smaller devices -->
<script src="https://kit.fontawesome.com/dfd5dc561d.js" crossorigin="anonymous"></script>
</head>
<body>
<section class = "sub-header">
<nav>
<a href="index.html"><img src="images/bike.png"></a>
<div class="nav-links" id="navLinks"> <!-- id identifies script? -->
<i class="fa-solid fa-xmark" onclick="hideMenu()"></i> <!-- close icon for small device menu -->
<ul>
<li><a href = "index.html">HOME</a></li> <!-- HREF references the other pages! -->
<li><a href = "about.html">ABOUT</a></li>
<li><a href = "projects.html">PROJECTS ETC.</a></li>
<li><a href = "travel.html">TRAVEL</a></li>
<li><a href = "contact.html">CONTACT</a></li>
</ul>
</div>
<i class="fa-solid fa-bars" onclick="showMenu()"></i> <!-- menu icon for small devices -->
</nav>
<H1>Travel</H1>
</section>
<!-- travel content -->
<section class="travel-content">
<div class="row">
<div class="travel-left">
<img src="images/taiwan gorge waterfall.JPG" alt="">
<h2>Exploring gorges in Taiwan.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed egestas egestas fringilla phasellus. Felis eget velit aliquet sagittis. Turpis egestas sed tempus urna et pharetra pharetra massa. Viverra orci sagittis eu volutpat odio facilisis. Sit amet volutpat consequat mauris nunc congue. A pellentesque sit amet porttitor eget. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Elit at imperdiet dui accumsan. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper. Facilisi cras fermentum odio eu feugiat pretium nibh. Ut consequat semper viverra nam libero justo laoreet. Cursus risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. In arcu cursus euismod quis. Aliquam sem et tortor consequat id.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed egestas egestas fringilla phasellus. Felis eget velit aliquet sagittis. Turpis egestas sed tempus urna et pharetra pharetra massa. Viverra orci sagittis eu volutpat odio facilisis. Sit amet volutpat consequat mauris nunc congue. A pellentesque sit amet porttitor eget. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Elit at imperdiet dui accumsan. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper. Facilisi cras fermentum odio eu feugiat pretium nibh. Ut consequat semper viverra nam libero justo laoreet. Cursus risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. In arcu cursus euismod quis. Aliquam sem et tortor consequat id.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed egestas egestas fringilla phasellus. Felis eget velit aliquet sagittis. Turpis egestas sed tempus urna et pharetra pharetra massa. Viverra orci sagittis eu volutpat odio facilisis. Sit amet volutpat consequat mauris nunc congue. A pellentesque sit amet porttitor eget. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Elit at imperdiet dui accumsan. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper. Facilisi cras fermentum odio eu feugiat pretium nibh. Ut consequat semper viverra nam libero justo laoreet. Cursus risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. In arcu cursus euismod quis. Aliquam sem et tortor consequat id.</p>
<div class="comment-box">
<h3>Leave a comment</h3>
<form class="comment-form">
<input type="text" placeholder="Enter name">
<input type="email" placeholder="Enter email">
<textarea rows="5" placeholder="Your comment"></textarea>
<button type="submit" class="hero-btn red-btn">POST COMMENT</button>
</form>
</div>
</div>
<div class="travel-right">
<h3>Countries</h3>
<div>
<span>Japan</span>
<span>3</span>
</div>
<div>
<span>Taiwan</span>
<span>2</span>
</div>
<div>
<span>South Korea</span>
<span>1</span>
</div>
<div>
<span>Thailand</span>
<span>3</span>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section class="footer">
<h4>BRIDGET MEYBOOM</h4>
<p>Engineering Physics</br>Environment and Social Sustainability</br>Cyclist and Adventurer</br><a href="contact.html" class="foot-btn">Get in touch!</a></p>
</section>
<!--------JavaScript for Toggle Menu ------->
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0"; // in java??!! changes style to show menu
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
</body>
</html>