first upload

2025-10-19 14:43:55 +00:00
commit 9961db0135
48 changed files with 273 additions and 0 deletions
--- a/Vertiefungsaufgabe.docx
+++ b/Vertiefungsaufgabe.docx
--- a/css/index.css
+++ b/css/index.css
@@ -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;
+}
--- a/css/main.css
+++ b/css/main.css
@@ -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%;
+}
--- a/img/0_bodysports_logo.jpeg
+++ b/img/0_bodysports_logo.jpeg
--- a/img/0_bodysports_logo_k.jpeg
+++ b/img/0_bodysports_logo_k.jpeg
--- a/img/1_intro1.jpeg
+++ b/img/1_intro1.jpeg
--- a/img/1_intro2.jpeg
+++ b/img/1_intro2.jpeg
--- a/img/1_intro3.jpeg
+++ b/img/1_intro3.jpeg
--- a/img/2_racket_1.jpeg
+++ b/img/2_racket_1.jpeg
--- a/img/2_racket_2.jpeg
+++ b/img/2_racket_2.jpeg
--- a/img/3_cardio1.jpeg
+++ b/img/3_cardio1.jpeg
--- a/img/3_cardio2.jpeg
+++ b/img/3_cardio2.jpeg
--- a/img/3_cardio3.jpeg
+++ b/img/3_cardio3.jpeg
--- a/img/3_cardio4.jpeg
+++ b/img/3_cardio4.jpeg
--- a/img/3_cardio6.jpeg
+++ b/img/3_cardio6.jpeg
--- a/img/3_cardio7.jpeg
+++ b/img/3_cardio7.jpeg
--- a/img/4_kraft1.jpeg
+++ b/img/4_kraft1.jpeg
--- a/img/4_kraft2.jpeg
+++ b/img/4_kraft2.jpeg
--- a/img/4_kraft3.jpeg
+++ b/img/4_kraft3.jpeg
--- a/img/4_kraft4.jpeg
+++ b/img/4_kraft4.jpeg
--- a/img/4_kraft5.jpeg
+++ b/img/4_kraft5.jpeg
--- a/img/4_kraft6.jpeg
+++ b/img/4_kraft6.jpeg
--- a/img/5_hantel1.jpeg
+++ b/img/5_hantel1.jpeg
--- a/img/5_hantel2.jpeg
+++ b/img/5_hantel2.jpeg
--- a/img/5_hantel3.jpeg
+++ b/img/5_hantel3.jpeg
--- a/img/5_hantel4.jpeg
+++ b/img/5_hantel4.jpeg
--- a/img/5_hantel5.jpeg
+++ b/img/5_hantel5.jpeg
--- a/img/5_hantel6.jpeg
+++ b/img/5_hantel6.jpeg
--- a/img/6_kurse1.jpeg
+++ b/img/6_kurse1.jpeg
--- a/img/6_kurse2.jpeg
+++ b/img/6_kurse2.jpeg
--- a/img/6_kurse3.jpeg
+++ b/img/6_kurse3.jpeg
--- a/img/7_wellness1.jpeg
+++ b/img/7_wellness1.jpeg
--- a/img/7_wellness2.jpeg
+++ b/img/7_wellness2.jpeg
--- a/img/7_wellness3.jpeg
+++ b/img/7_wellness3.jpeg
--- a/img/7_wellness4.jpeg
+++ b/img/7_wellness4.jpeg
--- a/img/7_wellness5.jpeg
+++ b/img/7_wellness5.jpeg
--- a/img/7_wellness6.jpeg
+++ b/img/7_wellness6.jpeg
--- a/img/7_wellness7.jpeg
+++ b/img/7_wellness7.jpeg
--- a/img/logo_tr.png
+++ b/img/logo_tr.png
--- a/img/logo_tr_k.png
+++ b/img/logo_tr_k.png
--- a/img/right-arrow.png
+++ b/img/right-arrow.png
--- a/img/trick/IMG-20180312-WA0013.jpg
+++ b/img/trick/IMG-20180312-WA0013.jpg
--- a/img/trick/IMG-20180312-WA0017.jpg
+++ b/img/trick/IMG-20180312-WA0017.jpg
--- a/img/trick/IMG-20180312-WA0024.jpg
+++ b/img/trick/IMG-20180312-WA0024.jpg
--- a/img/trick/IMG-20180312-WA0026.jpg
+++ b/img/trick/IMG-20180312-WA0026.jpg
--- a/img/trick/xx_kurse4.jpg
+++ b/img/trick/xx_kurse4.jpg
--- a/index.html
+++ b/index.html
@@ -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>
--- a/kurse.html
+++ b/kurse.html