first upload
BIN
L1_14 Vertiefungsaufgabe.docx
Normal file
115
css/index.css
Normal file
@@ -0,0 +1,115 @@
|
|||||||
|
.arrow_slider {
|
||||||
|
width: 100px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
opacity: 0.5;
|
||||||
|
filter: drop-shadow(4px 3px 2px #ffffff) contrast(1000%) invert(100%) ;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow_slider:nth-child(1) {
|
||||||
|
left: 10%;
|
||||||
|
rotate: 180deg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow_slider:nth-child(2) {
|
||||||
|
right: 10%;
|
||||||
|
}
|
||||||
|
.slider_wrap:hover .arrow_slider {
|
||||||
|
opacity: 1.0;
|
||||||
|
filter: drop-shadow(4px 3px 2px #ffffff) contrast(1000%) invert(100%) brightness(1.0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider_wrap {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
.slider_image {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 850px;
|
||||||
|
filter: brightness(0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider_info {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.slider_info h2 {
|
||||||
|
font-size: 200%;
|
||||||
|
color: whitesmoke !important;
|
||||||
|
margin: 0 30% 0 30%;
|
||||||
|
}
|
||||||
|
.slider_info p {
|
||||||
|
color: whitesmoke !important;
|
||||||
|
font-size: 120%;
|
||||||
|
margin: 0 30% 0 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider_info a {
|
||||||
|
|
||||||
|
color: whitesmoke !important;
|
||||||
|
margin: 20px 30% 0 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.features_wrap {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: wrap;
|
||||||
|
row-gap: 30px;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature_wrap {
|
||||||
|
width: 48%;
|
||||||
|
height: 300px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.feature_wrap div {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
backdrop-filter: brightness(0.5);
|
||||||
|
}
|
||||||
|
.feature_wrap p, h3 {
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px;
|
||||||
|
color: whitesmoke;
|
||||||
|
text-shadow: 10px 10px 5px #000;
|
||||||
|
}
|
||||||
|
.feature_wrap:nth-child(1) {
|
||||||
|
background-image: url(../img/4_kraft2.jpeg);
|
||||||
|
}
|
||||||
|
.feature_wrap:nth-child(2) {
|
||||||
|
background-image: url(../img/3_cardio4.jpeg);
|
||||||
|
}
|
||||||
|
.feature_wrap:nth-child(3) {
|
||||||
|
background-image: url(../img/2_racket_2.jpeg);
|
||||||
|
}
|
||||||
|
.feature_wrap:nth-child(4) {
|
||||||
|
background-image: url(../img/7_wellness1.jpeg);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.bottom_wrap {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 110%;
|
||||||
|
}
|
||||||
|
.bottom_wrap h2 {
|
||||||
|
color: #2E2E2E !important;
|
||||||
|
}
|
||||||
|
.bottom_logo {
|
||||||
|
width: 10%;
|
||||||
|
margin: auto;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
44
css/main.css
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
|
||||||
|
:root {
|
||||||
|
--bg-color: #F8F8F8;
|
||||||
|
--tx-color: #2E2E2E;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
a,p,h1,h2,h3 {
|
||||||
|
color: var(--tx-color);
|
||||||
|
font-family: "Quicksand";
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
}
|
||||||
|
.header_bottom_wrap {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 15px 120px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.header_bottom_wrap a {
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.block_wrap {
|
||||||
|
|
||||||
|
padding: 0 120px;
|
||||||
|
margin: 0 0 80px 0;
|
||||||
|
}
|
||||||
|
.logo {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
.header_top_wrap {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5px 120px;
|
||||||
|
opacity: 50%;
|
||||||
|
}
|
||||||
BIN
img/0_bodysports_logo.jpeg
Normal file
|
After Width: | Height: | Size: 47 KiB |
BIN
img/0_bodysports_logo_k.jpeg
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
img/1_intro1.jpeg
Normal file
|
After Width: | Height: | Size: 128 KiB |
BIN
img/1_intro2.jpeg
Normal file
|
After Width: | Height: | Size: 86 KiB |
BIN
img/1_intro3.jpeg
Normal file
|
After Width: | Height: | Size: 72 KiB |
BIN
img/2_racket_1.jpeg
Normal file
|
After Width: | Height: | Size: 190 KiB |
BIN
img/2_racket_2.jpeg
Normal file
|
After Width: | Height: | Size: 112 KiB |
BIN
img/3_cardio1.jpeg
Normal file
|
After Width: | Height: | Size: 154 KiB |
BIN
img/3_cardio2.jpeg
Normal file
|
After Width: | Height: | Size: 197 KiB |
BIN
img/3_cardio3.jpeg
Normal file
|
After Width: | Height: | Size: 197 KiB |
BIN
img/3_cardio4.jpeg
Normal file
|
After Width: | Height: | Size: 197 KiB |
BIN
img/3_cardio6.jpeg
Normal file
|
After Width: | Height: | Size: 114 KiB |
BIN
img/3_cardio7.jpeg
Normal file
|
After Width: | Height: | Size: 192 KiB |
BIN
img/4_kraft1.jpeg
Normal file
|
After Width: | Height: | Size: 205 KiB |
BIN
img/4_kraft2.jpeg
Normal file
|
After Width: | Height: | Size: 292 KiB |
BIN
img/4_kraft3.jpeg
Normal file
|
After Width: | Height: | Size: 207 KiB |
BIN
img/4_kraft4.jpeg
Normal file
|
After Width: | Height: | Size: 98 KiB |
BIN
img/4_kraft5.jpeg
Normal file
|
After Width: | Height: | Size: 196 KiB |
BIN
img/4_kraft6.jpeg
Normal file
|
After Width: | Height: | Size: 115 KiB |
BIN
img/5_hantel1.jpeg
Normal file
|
After Width: | Height: | Size: 397 KiB |
BIN
img/5_hantel2.jpeg
Normal file
|
After Width: | Height: | Size: 147 KiB |
BIN
img/5_hantel3.jpeg
Normal file
|
After Width: | Height: | Size: 212 KiB |
BIN
img/5_hantel4.jpeg
Normal file
|
After Width: | Height: | Size: 182 KiB |
BIN
img/5_hantel5.jpeg
Normal file
|
After Width: | Height: | Size: 116 KiB |
BIN
img/5_hantel6.jpeg
Normal file
|
After Width: | Height: | Size: 243 KiB |
BIN
img/6_kurse1.jpeg
Normal file
|
After Width: | Height: | Size: 104 KiB |
BIN
img/6_kurse2.jpeg
Normal file
|
After Width: | Height: | Size: 223 KiB |
BIN
img/6_kurse3.jpeg
Normal file
|
After Width: | Height: | Size: 128 KiB |
BIN
img/7_wellness1.jpeg
Normal file
|
After Width: | Height: | Size: 202 KiB |
BIN
img/7_wellness2.jpeg
Normal file
|
After Width: | Height: | Size: 250 KiB |
BIN
img/7_wellness3.jpeg
Normal file
|
After Width: | Height: | Size: 100 KiB |
BIN
img/7_wellness4.jpeg
Normal file
|
After Width: | Height: | Size: 110 KiB |
BIN
img/7_wellness5.jpeg
Normal file
|
After Width: | Height: | Size: 152 KiB |
BIN
img/7_wellness6.jpeg
Normal file
|
After Width: | Height: | Size: 149 KiB |
BIN
img/7_wellness7.jpeg
Normal file
|
After Width: | Height: | Size: 104 KiB |
BIN
img/logo_tr.png
Normal file
|
After Width: | Height: | Size: 103 KiB |
BIN
img/logo_tr_k.png
Normal file
|
After Width: | Height: | Size: 26 KiB |
BIN
img/right-arrow.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
BIN
img/trick/IMG-20180312-WA0013.jpg
Normal file
|
After Width: | Height: | Size: 80 KiB |
BIN
img/trick/IMG-20180312-WA0017.jpg
Normal file
|
After Width: | Height: | Size: 110 KiB |
BIN
img/trick/IMG-20180312-WA0024.jpg
Normal file
|
After Width: | Height: | Size: 135 KiB |
BIN
img/trick/IMG-20180312-WA0026.jpg
Normal file
|
After Width: | Height: | Size: 106 KiB |
BIN
img/trick/xx_kurse4.jpg
Normal file
|
After Width: | Height: | Size: 75 KiB |
114
index.html
Normal file
@@ -0,0 +1,114 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Sportstudio</title>
|
||||||
|
<link rel="stylesheet" href="css\main.css">
|
||||||
|
<link rel="stylesheet" href="css/index.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="header_top_wrap">
|
||||||
|
<p>bodysports Fitness & Squash GmbH</p>
|
||||||
|
<div>
|
||||||
|
<p>Tel. 0711-4568555 <span style="margin-left: 10px;">Email: info@bodysports.de</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header_bottom_wrap">
|
||||||
|
<div class="logo_wrap">
|
||||||
|
<a href="/"><img src="/img/logo_tr_k.png" class="logo" alt="" srcset=""></a>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<a href="">Home</a>
|
||||||
|
<a href="">Kursen</a>
|
||||||
|
<a href="">About us</a>
|
||||||
|
<a href="">Öffnungszeiten</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="block_wrap">
|
||||||
|
<div class="slider_wrap">
|
||||||
|
|
||||||
|
<img class="arrow_slider" src="img/right-arrow.png" alt="" srcset="">
|
||||||
|
<img class="arrow_slider" src="img/right-arrow.png" alt="" srcset="">
|
||||||
|
<div >
|
||||||
|
<img class="slider_image" src="img/3_cardio1.jpeg" alt="" srcset="">
|
||||||
|
</div>
|
||||||
|
<div class="slider_info">
|
||||||
|
<h2>Wellness</h2>
|
||||||
|
<p>Genießen Sie pure Entspannung und lassen Sie Ihr Fitnessprogramm in unserem modernen und vielseitigen Wellnessbereich harmonisch ausklingen..</p>
|
||||||
|
<a href="#">Mehr lesen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="block_wrap">
|
||||||
|
<div class="features_wrap">
|
||||||
|
<div class="feature_wrap">
|
||||||
|
<div>
|
||||||
|
<h3>Philosophie</h3>
|
||||||
|
<p>Mit unserem breiten Angebot motivieren wir Menschen durch eine professionelle Beratung und individuelle Betreuung aktiv ihre Gesundheit und ihr Wohlbefinden zu optimieren. Im Mittelpunkt unseres Handelns stehen das Wohlbefinden und die Gesundheit unserer Kunden. Die Atmosphäre in unserem Hause ist geprägt von Freundlichkeit, Herzlichkeit und einem gepflegten Ambiente.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature_wrap">
|
||||||
|
<div>
|
||||||
|
<h3>Kraft und Cardio</h3>
|
||||||
|
<p>Unser Fitnessangebot umfasst alles, was das Sportlerherz begehrt: von der Trainingsbetreuung über das Krafttraining bis zum Freihanteltraining.
|
||||||
|
Unsere professionellen Trainer holen Sie auf Ihrem aktuellen Fitness-Level ab. Sie definieren gemeinsam mit Ihnen Ihre Ziele und erstellen einen individuellen Trainingsplan.
|
||||||
|
In unserem Kraftraum können Sie zwischen rund 30 verschiedenen Gerätetypen unseres Partners FIT99 wählen und gezielt sämtliche Muskeln auf vielseitige Art trainieren.
|
||||||
|
Neben dem Krafttraining ist das Cardiotraining (Ausdauertraining) das wichtigste Element beim Fitnesstraining. Hierfür bieten wir neben Fahrradergometern und Laufbändern auch moderne Ellipsentrainer.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature_wrap">
|
||||||
|
<div>
|
||||||
|
<h3>Squash</h3>
|
||||||
|
<p>Wir bieten neben den klassischen Fitnessangeboten auch ein umfassendes Spektrum an Sportmöglichkeiten rund um den Ball: Squash und Badminton. Unsere Squash-Courts können Sie mit Freunden und Kollegen oder in einer Hobbyrunde flexibel buchen.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="feature_wrap">
|
||||||
|
<div>
|
||||||
|
<h3>Wellness</h3>
|
||||||
|
<p>Genießen Sie pure Entspannung und lassen Sie Ihr Fitnessprogramm in unserem modernen und vielseitigen Wellnessbereich harmonisch ausklingen.
|
||||||
|
In unserer Saunalandschaft haben Sie die Wahl zwischen finnischer Sauna, Bio-Sauna, Infrarotkabine sowie einem Dampfbad.
|
||||||
|
In unserem großzügigen Ruhebereich können Sie die Entspannungsphasen Ihres Wellness-Programms genießen. Alternativ steht Ihnen ein abgetrennter Ruheraum zur Verfügung-</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="block_wrap">
|
||||||
|
<img src="/img/logo_tr_k.png" class="logo bottom_logo" alt="" srcset="">
|
||||||
|
<div class="bottom_wrap">
|
||||||
|
<div class="bottom_info_wrap">
|
||||||
|
<h2>Firma</h2>
|
||||||
|
<p>bodysports Fitness & Squash GmbH</p>
|
||||||
|
<p>Benzstraße 19</p>
|
||||||
|
<p>70199 Stuttgart</p>
|
||||||
|
<p>0711-4568555</p>
|
||||||
|
<p>info@bodysports.de</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>Links</h2>
|
||||||
|
<p><a href="/">Home</a></p>
|
||||||
|
<p><a href="/">Kursen</a></p>
|
||||||
|
<p><a href="/">About us</a></p>
|
||||||
|
<p><a href="/">Öffnungszeiten</a></p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>Öffnungszeiten</h2>
|
||||||
|
<p>Montag – Freitag 09:30 – 23:30 Uhr</p>
|
||||||
|
<p>Samstag 13:00 – 21:00 Uhr</p>
|
||||||
|
<p>Sonntag 10:00 – 14:00 Uhr</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||