forked from CodeYourFuture/HTML-CSS-Coursework-Week1
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
100 lines (100 loc) · 4.64 KB
/
index.html
File metadata and controls
100 lines (100 loc) · 4.64 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>My Blog</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<header>
<h1>Mehreen's Travel Blog</h1>
<h2>Detailed Reviews from Around the World</h2>
<button class="buttons">Follow My Socials</button>
</header>
<ul>
<li><a href="home.asp">Home</a></li>
<li><a href="city-reviews.asp">City reviews</a></li>
<li><a href="about.asp">About me</a></li>
<li><a href="contact.asp">Contact me</a></li>
</ul>
</body>
<main>
<section id="ttt">
<h3>Top Travelling Tips</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas purus augue, iaculis eget ultrices non, interdum quis odio.
Pellentesque metus lorem, rutrum vitae maximus eget, venenatis sed dolor.
Suspendisse vel velit ac massa dapibus sollicitudin.
Integer non nunc at metus condimentum dignissim.
Sed mattis et arcu nec tincidunt. Nullam nec facilisis lorem.
Suspendisse consectetur augue sed leo accumsan, vitae feugiat metus maximus.
Praesent a tincidunt magna, eget consectetur odio.
</p>
</section>
<section>
<div class="container">
<article class="box">
<img src="https://image.shutterstock.com/image-photo/eunpyeong-hanok-village-korean-traditional-600w-2155257251.jpg" alt="Picture of Seoul City">
<div class="texts">
<h2>Seoul</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas purus augue, iaculis eget ultrices non, interdum quis odio.
Pellentesque metus lorem, rutrum vitae maximus eget, venenatis sed dolor.
Suspendisse vel velit ac massa dapibus sollicitudin.
Integer non nunc at metus condimentum dignissim.
Sed mattis et arcu nec tincidunt. Nullam nec facilisis lorem.
Suspendisse consectetur augue sed leo accumsan, vitae feugiat metus maximus.
Praesent a tincidunt magna, eget consectetur odio.</p>
<button type="more">More details...</button>
</div>
</article>
<article class="box">
<img src="https://image.shutterstock.com/image-photo/cancun-sunset-drone-wiew-600w-1903587787.jpg" alt="Picture of Cancun city, Mexico">
<div class="texts">
<h2>Cancun</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas purus augue, iaculis eget ultrices non, interdum quis odio.
Pellentesque metus lorem, rutrum vitae maximus eget, venenatis sed dolor.
Suspendisse vel velit ac massa dapibus sollicitudin.
Integer non nunc at metus condimentum dignissim.
Sed mattis et arcu nec tincidunt. Nullam nec facilisis lorem.
Suspendisse consectetur augue sed leo accumsan, vitae feugiat metus maximus.
Praesent a tincidunt magna, eget consectetur odio.</p>
<button type="more">More details...</button>
</div>
</article>
<article class="box">
<img src="https://image.shutterstock.com/image-photo/maldivian-capital-above-600w-159659003.jpg" alt="Picture of Male City, Maldives">
<div class="texts">
<h2>Malé</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas purus augue, iaculis eget ultrices non, interdum quis odio.
Pellentesque metus lorem, rutrum vitae maximus eget, venenatis sed dolor.
Suspendisse vel velit ac massa dapibus sollicitudin.
Integer non nunc at metus condimentum dignissim.
Sed mattis et arcu nec tincidunt. Nullam nec facilisis lorem.
Suspendisse consectetur augue sed leo accumsan, vitae feugiat metus maximus.
Praesent a tincidunt magna, eget consectetur odio.</p>
<button type="more">More details...</button>
</div>
</article>
</div>
</section>
<footer>
<p>Created by Mehreen Aziz</p>
<a href="contact">Contact me</a>
<a href="mysocials">My socials</a>
</footer>
</main>
</main>
</body>
</html>