Über Uns
JoulianALS
@ -0,0 +1,8 @@
|
||||
const swiper = new Swiper('.swiper', {
|
||||
direction: 'vertical',
|
||||
loop: true,
|
||||
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
},
|
||||
});
|
||||
BIN
Src/elefant.jpg
Normal file
|
After Width: | Height: | Size: 271 KiB |
BIN
Src/giraffe.jpg
Normal file
|
After Width: | Height: | Size: 243 KiB |
BIN
Src/gorilla.jpg
Normal file
|
After Width: | Height: | Size: 375 KiB |
BIN
Src/loewe.jpg
Normal file
|
After Width: | Height: | Size: 746 KiB |
BIN
Src/zebra.jpg
Normal file
|
After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 20 KiB |
@ -2,3 +2,12 @@ section {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.swiper-pagination .swiper-pagination-bullet {
|
||||
background-color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
|
||||
33
index.html
@ -5,24 +5,45 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="Styles/style.css">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
|
||||
<title>ZooWebsite</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navbar -->
|
||||
<nav>
|
||||
<a><img>logo</a>
|
||||
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Über Uns Section -->
|
||||
<section>
|
||||
<h1>Über Uns</h1>
|
||||
<p>Über Uns</p>
|
||||
<section class="container" id="ueberUns">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<!-- Gallery -->
|
||||
<div class="swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<!-- Slides -->
|
||||
<div class="swiper-slide"><img src="Src/loewe.jpg" class="img-fluid" alt="Loewe"></div>
|
||||
<div class="swiper-slide"><img src="Src/gorilla.jpg" class="img-fluid" alt="Gorilla"></div>
|
||||
<div class="swiper-slide"><img src="Src/zebra.jpg" class="img-fluid" alt="Zebra"></div>
|
||||
<div class="swiper-slide"><img src="Src/elefant.jpg" class="img-fluid" alt="Elefant"></div>
|
||||
<div class="swiper-slide"><img src="Src/giraffe.jpg" class="img-fluid" alt="Giraffe"></div>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Text content -->
|
||||
<div class="col-md-6">
|
||||
<h2>Text on the Right</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida, justo eget sagittis malesuada, leo velit lobortis orci, ac sodales lectus ipsum in libero. Phasellus hendrerit justo et risus blandit, nec ultricies ligula facilisis. Pellentesque luctus, justo id vehicula consectetur, metus tortor auctor felis, eget eleifend lorem neque eget lectus. Cras semper, velit non gravida pellentesque, elit lectus rhoncus eros, nec malesuada est nulla eu metus.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Öffnungszeiten Section -->
|
||||
@ -39,16 +60,18 @@
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</footer>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
|
||||
<script src="Javascript/app.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||