-
Notifications
You must be signed in to change notification settings - Fork 0
/
home.html
101 lines (88 loc) · 4.38 KB
/
home.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
<!DOCTYPE html>
<html>
<head>
<title>Timo's Bootstrap project - TL</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/laakkonen.css" rel="stylesheet">
<meta name="author" content="Timo Laakkonen">
</head>
<body class='mt-2 mb-2 ms-2 me-2'>
<main class="container-fluid">
<header class='row'>
<div class='mt-3'>
<h1>Timo's Bootstrap project</h1>
</div>
<div class='ps-1 pe-1'>
<nav class="navbar navbar-dark navbar-expand-md mb-1 mt-1">
<button class="navbar-toggler ms-1" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse ms-1" id="navbar">
<ul class="navbar-nav">
<li class="nav-item"><a href="index.html" class="nav-link active">My city</a></li>
<li class="nav-item"><a href="touristsTL.html" class="nav-link">Tourists</a></li>
<li class="nav-item"><a href="imagesTL.html" class="nav-link">Images</a></li>
<li class="nav-item"><a href="parallaxTL.html" class="nav-link">Parallax</a></li>
<li class="nav-item"><a href="QuizTL.html" class="nav-link">Quiz</a></li>
<li class="nav-item"><a href="BMI.html" class="nav-link">BMI</a></li>
</ul>
</div>
</nav>
</div>
</header>
<section class='row mt-2 bg-index'>
<div class='col-md-4 d-flex justify-content-center mt-md-5 mb-md-5 mb-0'>
<figure>
<img src="img/puijo_summer_md.jpg" class='img-fluid' />
<figcaption> Puijo observation tower</figcaption>
</figure>
</div>
<div class='col-md-8 mt-md-5 mb-md-5 mb-0'>
<h2>Kuopio</h2>
<h6><b>Like most Finnish provincial cities, Kuopio comes into its own in the summer when it plays host to a
major
dance festival, as well as a lively wine festival. The city’s essence, however, comes from its lakeside
location on the shores of Kallavesi and its role as a harbour for lake traffic.</b></h6>
<p>On a nearby ridge overlooking Kuopio is the Puijo observation tower and it offers some of the best lake views
in Finland. Located in the heart of the Savo district, this delightful city boasts its own distinct dialect
and is also home to the Finnish Orthodox Church, the country’s official religion.</p>
<p>
During the summer, Kuopio has a number of restaurant terraces down by the harbour from which you can watch
steam boats chugging about on the water. Enjoying an evening cruise on a passenger steamer departing from
Kuopio’s harbour is a quintessential Finnish summer experience.
</p>
<address class='myLink'><i>Source:
<a href='https://www.visitfinland.com/article/kuopio-a-lakeland-harbour-town/#88588903'
target='_blank'>Kuopio – a lakeland harbour town</a></i>
</address>
<address class='myLink'>For more information:
<a href='https://www.kuopio.fi/en/etusivu' target='_blank'>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#448D76" class="bi bi-eye-fill"
viewBox="0 0 16 16">
<path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z" />
<path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" />
</svg></a>
</address>
</div>
</section>
<footer class='row text-center mt-1'>
<div class='col-md-6 text-md-start'>
<p>Timo Laakkonen<br>2021 </p>
</div>
<div class='col-md-6 text-md-end'>
<p>Bootstrap and jQuery</p>
</div>
</footer>
</main>
<!-- some Bootstrap components need popper.js library -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous">
</script>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous">
</script>
</body>
</html>