Nikolai/sportstudio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 0.1

Browse Source
This commit is contained in:
Nikolai
2025-10-20 14:47:07 +02:00
parent 9961db0135
commit db9fe0265b
5 changed files with 319 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
index.css Normal file
View File

@@ -0,0 +1,101 @@
.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);
}

16
index.html
View File

@@ -17,13 +17,13 @@
</div>
<div class="header_bottom_wrap">
<div class="logo_wrap">
<a href="/"><img src="/img/logo_tr_k.png" class="logo" alt="" srcset=""></a>
<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>
<a href="/">Home</a>
<a href="kurse.html">Kursen</a>
<a href="#about_us">About us</a>
<a href="#time">Öffnungszeiten</a>
</nav>
</div>
</header>
@@ -45,7 +45,7 @@
</div>
<div class="block_wrap">
<div class="block_wrap" id="about_us">
<div class="features_wrap">
<div class="feature_wrap">
<div>
@@ -84,8 +84,8 @@ In unserem großzügigen Ruhebereich können Sie die Entspannungsphasen Ihres We
</div>
<div class="block_wrap">
<img src="/img/logo_tr_k.png" class="logo bottom_logo" alt="" srcset="">
<div class="block_wrap" id="time">
<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>

14
kurse.css Normal file
View File

@@ -0,0 +1,14 @@
td,th {
padding: 10px;
border: solid;
}
table {
margin-top: 100px;
border-collapse: collapse;
width: 100%;
font-family: "Quicksand";
}
tr:nth-child(2n) {
background-color: lightgrey;
}

137
kurse.html
View File

@@ -0,0 +1,137 @@
<!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/kurse.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="https://ritter.bplaced.net/Ritter/webeditor/workspace/2BKI2_FesenkoMykola/Sportstudio/index.html">Home</a>
<a href="#">Kursen</a>
<a href="https://ritter.bplaced.net/Ritter/webeditor/workspace/2BKI2_FesenkoMykola/Sportstudio/index.html#about_us">About us</a>
<a href="https://ritter.bplaced.net/Ritter/webeditor/workspace/2BKI2_FesenkoMykola/Sportstudio/index.html#time">Öffnungszeiten</a>
</nav>
</div>
</header>
<div class="block_wrap">
<table >
<tr>
<th></th>
<th>Montag</th>
<th>Dienstag</th>
<th>Mittwoch</th>
<th>Donnerstag</th>
<th>Freitag</th>
</tr>
<tr>
<td>09:30 – 10:15</td>
<td>Rückenfit</td>
<td>Pilates</td>
<td>Bodyforming</td>
<td>Pilates</td>
<td>Rückenfit</td>
</tr>
<tr>
<td>10:30 – 11:15</td>
<td>Indoor Cycling</td>
<td>Cisomba</td>
<td></td>
<td></td>
<td>Step & Burn</td>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>17:30 – 18:15</td>
<td>Zumba</td>
<td>Step & Burn</td>
<td>Indoor Cycling</td>
<td>Body-Workout</td>
<td>Yoga</td>
</tr>
<tr>
<td>18:30 – 19:15</td>
<td>Body-Workout</td>
<td>Zumba</td>
<td>Rückenfit</td>
<td>Cisomba</td>
<td>Zumba</td>
</tr>
<tr>
<td>20:00 – 20:45</td>
<td></td>
<td>Yoga</td>
<td></td>
<td>Yoga</td>
<td></td>
</tr>
</table>
</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>

59
main.css Normal file
View File

@@ -0,0 +1,59 @@
@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;
scroll-behavior: smooth;
}
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%;
}
.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;
}