-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
159 lines (148 loc) · 7.52 KB
/
index.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/3e060ad153.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<!--Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand fs-2 fw-bold" href="#">Berglandschaft</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link fs-5 mx-lg-2 active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link fs-5 mx-lg-2" href="#mountains">Mountains</a>
</li>
<li class="nav-item">
<a class="nav-link fs-5 mx-lg-2" href="#trekking">Trekking</a>
</li>
</ul>
<div>
<li class="d-flex align-items-center gap-3 ps-3">
<a class="text-white" href="#"><i class="fab fab fa-lg fa-instagram"></i></a>
<a class="text-white" href="#"><i class="fab fab fa-lg fa-twitter"></i></a>
<a class="text-white" href="#"><i class="fab fab fa-lg fa-facebook"></i></a>
</li>
</div>
</div>
</div>
</nav>
<!--Image Slider-->
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/mountain1.jpg" class="slider-image">
</div>
<div class="carousel-item">
<img src="assets/mountain2.jpg" class="slider-image">
</div>
<div class="carousel-item">
<img src="assets/mountain3.jpg" class="slider-image">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!--Website Infos-->
<div class="container mt-5">
<h1>Mountains</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ullam dignissimos veritatis inventore eos? Dolorum velit alias doloremque eos obcaecati
tempora nihil? Iste est pariatur soluta architecto odit, officia possimus corrupti totam
aperiam aliquam repellat incidunt laudantium voluptate consequatur doloribus autem suscipit ex nam,
accusamus accusantium aliquid? Cumque quis quisquam mollitia, vero commodi tenetur aperiam officiis
dolores nobis accusamus hic praesentium quos quasi eligendi amet eos perspiciatis, nemo facere beatae
explicabo voluptatibus id exercitationem? Dolorum tempore, ex amet illo voluptas sed ad reiciendis! Dolore
minus beatae vero facere perferendis ipsum mollitia voluptate inventore odio tempora quibusdam, aliquam aut.
Impedit, ad. Deserunt aperiam nihil sint fuga quos repudiandae corporis veritatis officia molestiae odio,
perferendis atque eius dolorem, nostrum optio exercitationem adipisci ratione, cupiditate necessitatibus?
Corporis doloribus maxime quo, obcaecati explicabo aperiam distinctio atque facere inventore veritatis accusamus
enetur veniam eius. Omnis.</p>
</div>
<!--Mountains overview-->
<div class="container" id="mountains">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100 shadow">
<img src="assets/mount everst.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title fs-6 text-center">Mount Everst</h5>
<h4 class="card-subtitle">Platz 1</h4>
<p class="card-text pt-4">Der Mount Everest ist mit 8.848 Metern über dem Meeresspiegel der höchste Berg der Welt.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 shadow">
<img src="assets/Mount Godwin Austen.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title fs-6 text-center">Mount Godwin Austen</h5>
<h4 class="card-subtitle">Platz 2</h4>
<p class="card-text pt-4">Auf Rang 2 befindet sich der Mount Godwin Austen (K2) mit einer Höhe von 8.610 Metern</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100 shadow">
<img src="assets/Kangchendzönga.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title fs-6 text-center">Kangchendzönga</h5>
<h4 class="card-subtitle">Platz 3</h4>
<p class="card-text pt-4">Der Kangchendzönga ist mit 8586 m der dritthöchste Berg der Erde und zugleich der am östlichsten gelegene Achttausender.</p>
</div>
</div>
</div>
</div>
</div>
<!--Trekking Infos-->
<div class="container mt-5" id="trekking">
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card shadow">
<img src="assets/pexels-abhishek-gaurav-771079.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Trekking</h5>
<p class="card-text">Einer der größten Vorteile vom Wandern ist, dass es extrem einfach zu machen ist, unabhängig von deinem Fitnesslevel.</p>
</div>
</div>
</div>
<div class="col">
<div class="card shadow">
<img src="assets/trekking2.jpg" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Schnee Wanderung</h5>
<p class="card-text">Einer der größten Vorteile vom Wandern ist, dass es extrem einfach zu machen ist, unabhängig von deinem Fitnesslevel.</p>
</div>
</div>
</div>
</div>
</div>
<!--Unten foto Infos-->
<div class="" style="margin-top: -350px;">
<img src="assets/hintergrund unten.png" class="img-fluid" >
</div>
<!--Unten foto Infos-->
<div class="text-center m-4 fs-4">Copyright Tobias Solski</div>
<!--Bootstrap js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>