-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
143 lines (123 loc) · 8.88 KB
/
index.html
File metadata and controls
143 lines (123 loc) · 8.88 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Components</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.blockquote {
padding: 5%;
}
.nav .nav-link {
color: black;
}
</style>
</head>
<body>
<section id="title" class="d-flex h-100 text-center text-black" style="background: url('./img/bg.jpg') no-repeat center center; background-size: cover; min-height: 130vh;">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-globe-americas" viewBox="0 0 20 20">
<path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"/>
</svg>Traveller's Blog</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About Me</a>
<a class="nav-link" href="#">Contact Me</a>
</nav>
</div>
</header>
<main class="px-3">
<blockquote class="blockquote text-start">
<p class="mb-3 display-6">“Nothing develops intelligence like travel.”</p>
<footer class="blockquote-footer">Emile Zola <cite title="Source Title">French novelist and journalist
</cite></footer>
</blockquote>
</main>
</section>
<section id="about-me">
<div class="px-4 py-5 my-5 text-center">
<h1 class="display-5 fw-bold">About Me</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">Hi there! I'm Kate, an adventure enthusiast with an insatiable curiosity for exploring the world’s hidden gems. I’ve always believed that travel isn’t just about the destination—it’s about the stories, the connections, and the experiences that shape us along the way.
From wandering through bustling city streets to hiking remote mountain trails, I’m on a mission to embrace every corner of our planet. I’ve traveled to 41 countries and counting, each journey fueling my passion for discovering new cultures, flavors, and perspectives.
Let’s explore the world together—one adventure at a time!</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<button type="button" class="btn btn-dark btn-lg px-4 gap-3">Explore my countries</button>
<button type="button" class="btn btn-outline-dark btn-lg px-4">Explore my cities</button>
</div>
</div>
</div>
</section>
<section id="tips-for-travellers">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="./img/uk.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Rainy days of England</h5>
<h6 class="card-subtitle mb-2 text-muted">Cambridge and Oxford, UK</h6>
<p class="card-text">
A trip to the UK offers a captivating blend of history, culture, and scenic landscapes, from exploring the iconic landmarks of London to strolling through the historic streets of Cambridge and Oxford. Whether admiring the architecture of grand universities or enjoying a traditional afternoon tea, the UK provides a rich and diverse travel experience.</p>
<div class="d-flex justify-content-between align-items-center">
<p><a href="#" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Read more</a></p>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="./img/capeverde.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Bright lights in winter</h5>
<h6 class="card-subtitle mb-2 text-muted">Sal, Cape Verde</h6>
<p class="card-text">A trip to Cape Verde offers a unique blend of stunning beaches, vibrant Creole culture, and dramatic volcanic landscapes across its diverse islands. Whether relaxing on the sandy shores of Sal or hiking through the lush mountains of Santo Antão, Cape Verde provides an ideal mix of adventure and tranquility.</p>
<div class="d-flex justify-content-between align-items-center">
<p><a href="#" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Read more</a></p>
<small class="text-muted">7 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" src="./img/sweden.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">The taste of Scandinavia</h5>
<h6 class="card-subtitle mb-2 text-muted">Stockholm, Sweden</h6>
<p class="card-text">A trip to Stockholm offers a blend of history and culture, with highlights like visiting the Nobel Prize Museum in the charming old town of Gamla Stan and exploring the city’s picturesque archipelago. From learning about groundbreaking achievements to enjoying vibrant Scandinavian design, Stockholm delivers a unique and enriching experience.</p>
<div class="d-flex justify-content-between align-items-center">
<p><a href="#" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Read more</a></p>
<small class="text-muted">6 mins</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="footer">
<div class="container">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<p class="col-md-4 mb-0 text-body-secondary">2024 © All rights reserved</p>
<a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-globe-americas" viewBox="0 0 16 16"><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"/></svg>
</a>
<ul class="nav col-md-4 justify-content-end">
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About Me</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Contact Me</a></li>
</ul>
</footer>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
crossorigin="anonymous"></script>
</body>
</html>