-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathsemantic.html
More file actions
172 lines (172 loc) · 9.59 KB
/
Copy pathsemantic.html
File metadata and controls
172 lines (172 loc) · 9.59 KB
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<html>
<link rel="stylesheet" href="semantic.css">
<body>
<section class="header">
<section class="items">
<ul>
<li><p><a href="#" target="_blank">Home</a></p></li>
<li><a href="#" target="_blank">Guides</a></li>
<li><a href="#" target="_blank">Flights</a></li>
<li><a href="#" target="_blank">About</a></li>
<button>Contact Us</button>
</ul>
</section>
</section>
<section class="block">
<section class="travel">
<h1>Travel to</h1>
<h1>Your Dream</h1>
<h1>Destination</h1>
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo dolores nemo minima? Corrupti vel, commodi illum deserunt sequi inventore rerum ad voluptas pariatur quam ea mollitia nihil excepturi ratione repellendus?</h4>
<button>Reserve Ticket</button>
</section>
<section class="photo">
<img src="/Images/mountain.webp" alt="mountain">
</section>
</section>
<section class="blackia">
<h2>Create a Memory</h2>
<h2>to remember</h2>
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi magni totam, libero magnam harum autem mollitia impedit dolore distinctio? Doloribus nisi dicta cumque necessitatibus nihil. Possimus quam libero aspernatur quod.</h4>
<button>My Travel Logs</button>
</section>
<section class="combine">
<section class="three">
<img src="/Images/pic1.webp" alt="Pic 1">
<h2>Lorem ipsum dolor sit amet</h2>
<h5>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatibus ducimus qui, quis odit inventore, quas officia fugiat ut, facilis suscipit veritatis eveniet itaque exercitationem quos velit cum aperiam quod. Aspernatur.</h5>
</section>
<section class="three">
<img src="/Images/pic2.webp" alt="Pic 2">
<h2>Lorem ipsum dolor sit amet</h2>
<h5>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatibus ducimus qui, quis odit inventore, quas officia fugiat ut, facilis suscipit veritatis eveniet itaque exercitationem quos velit cum aperiam quod. Aspernatur.</h5>
</section>
<section class="three">
<img src="/Images/pic3.webp" alt="Pic 3">
<h2>Lorem ipsum dolor sit amet</h2>
<h5>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatibus ducimus qui, quis odit inventore, quas officia fugiat ut, facilis suscipit veritatis eveniet itaque exercitationem quos velit cum aperiam quod. Aspernatur.</h5>
</section>
</section>
<section class="plane">
<h1>See Places You've</h1>
<h1><a>Never</a> been before</h1>
<h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque dolor</h5>
</section>
<section class="arrow">
<section class="one">
<img src="/Images/arrow-pic1.webp" alt="big mountain">
</section>
<section class="two">
<img src="/Images/arrow-pic2.webp" alt="small mountain">
<h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate sed do ei</h3>
<h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium voluptatum animi quasi minima ducimus unde vitae dignissimos natus iste, enim quae, asperiores esse illo culpa, est rerum! Dignissimos, provident maxime.</h5>
<h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem nisi reiciendis vero fugit, ipsam autem facere nemo repudiandae laudantium officiis? Iure cupiditate ex, officia blanditiis saepe magnam accusantium nostrum maiores.</h5>
<h1>→</h1>
</section>
</section>
<section class="both">
<section class="choose">
<h1>Choose anywhere</h1>
<h1>you'd like to be</h1>
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia modi dolores voluptatum molestias. Voluptatibus, nesciunt reiciendis aliquid magni adipisci blanditiis delectus voluptate iure eligendi enim illo cumque eaque dolor fuga!</p>
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia modi dolores voluptatum molestias. Voluptatibus, nesciunt reiciendis aliquid magni adipisci blanditiis delectus voluptate iure eligendi enim illo cumque eaque dolor fuga!</p>
</section>
<section class="person">
<img src="/Images/person.webp" alt="Person holding a stick">
</section>
</section>
<section class="white">
<section class="lorem">
<h1>Lorem ipsum dolor sit amet consectetur</h1>
<h2>______________________________________________</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit <a>+</a></p>
<h2>______________________________________________</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit <a>+</a></p>
<h2>______________________________________________</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit <a>+</a></p>
<h2>______________________________________________</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit <a>+</a></p>
<h2>______________________________________________</h2>
</section>
<section class="sit">
<img src="/Images/person-sit.webp" alt="Person sitting on a mountain">
</section>
</section>
<section class="here">
<h1>Here's what they</h1>
<h1>have to say...</h1>
</section>
<section class="template">
<section class="left-arrow">←</section>
<section class="scroll">
<img src="/Images/2d_person.webp" alt="Customer's Picture">
<h3>Customer Name</h3>
<h6>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo tempore omnis molestiae, ipsam labore autem, itaque accusamus iste dicta libero laboriosam earum eveniet iure aliquid odio aperiam recusandae impedit at?</h6>
</section>
<section class="scroll">
<img src="/Images/2d_person.webp" alt="Customer's Picture">
<h3>Customer Name</h3>
<h6>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo tempore omnis molestiae, ipsam labore autem, itaque accusamus iste dicta libero laboriosam earum eveniet iure aliquid odio aperiam recusandae impedit at?</h6>
</section>
<section class="scroll">
<img src="/Images/2d_person.webp" alt="Customer's Picture">
<h3>Customer Name</h3>
<h6>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo tempore omnis molestiae, ipsam labore autem, itaque accusamus iste dicta libero laboriosam earum eveniet iure aliquid odio aperiam recusandae impedit at?</h6>
</section>
<section class="right-arrow">→</section>
</section>
<section class="update">
<section class="form-container">
<h1>Be Updated!</h1>
<section class="up1">
<input type="text" placeholder="First Name">
</section>
<section class="up2">
<input type="text" placeholder="Last Name">
</section>
<section class="up3">
<input type="email" placeholder="Email Subject">
</section>
<section class="up4">
<textarea type="text" placeholder="Write something here..."></textarea>
</section>
<button>Submit Email</button>
</section>
<section class="date">
<img src="/Images/valley.webp" alt="valley">
</section>
</section>
<section class="footer">
<h1>My Log</h1>
<h1>Travels</h1>
<table class="links">
<tr>
<h4>Quick Links</h4>
<td>
<a href="#">Home</a><br>
<a href="#">About Us</a><br>
<a href="#">My Travel Logs</a>
</td>
<td>
<a href="#">Travels</a><br>
<a href="#">Promo Flights</a><br>
<a href="#">Travel Routes</a>
</td>
<td>
<a href="#">Recommendations</a><br>
<a href="#">Guides</a><br>
<a href="#">Blogs</a>
</td>
<td>
<a href="#">Mission Statement</a><br>
<a href="#">The Team</a><br>
<a href="#">Contact Us</a>
</td>
</tr>
</table>
<h6>2021-2022 My Log Travels.All Rights Reserved</h6>
</section>
</body>
</html>