Fabian/kbm-html
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
Fabian Märker
2021-11-29 18:47:26 +01:00
parent 53f463c13a
commit b115342cac
6 changed files with 79 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
assets/seiten/b-waren.html
View File

@@ -3,7 +3,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="with=device-width, initial-scale=1.0"> <meta name="viewport" content="with=device-width, initial-scale=1.0">
<title>B-Waren Shop</title> <title>B-Waren Shop</title>
<link rel="stylesheet" type="text/css" href="../seiten/css/design.css"/> <link rel="stylesheet" type="text/css" href="./css/design.css"/>
<link rel="icon" type="image/png" href="../bilder/icon.png"> <link rel="icon" type="image/png" href="../bilder/icon.png">
<link rel="stylesheet" type="text/css" href="./css/shop.css"/> <link rel="stylesheet" type="text/css" href="./css/shop.css"/>
</head> </head>
@@ -21,7 +21,21 @@
</div> </div>
</div> </div>
<div class="seite"> <div class="seite">
<!-- Sterne -->
<div class="sterne">
<section>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</section>
</div>
</div> </div>
</body> </body>
</html> </html>

8
assets/seiten/css/design.css
View File

@@ -28,15 +28,14 @@ body{
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
height: 8rem; height: 7rem;
background: transparent;
padding-right: 1.25rem; padding-right: 1.25rem;
padding-left: 1.25rem; padding-left: 1.25rem;
} }
.menu a{ .menu a{
float: left; float: left;
height: 50%; height: 60%;
display: block; display: block;
color: #f2f2f2; color: #f2f2f2;
text-align: center; text-align: center;
@@ -108,9 +107,8 @@ body{
top: 45%; top: 45%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
height: 100%; height: 105%;
width: fit-content; width: fit-content;
} }
/* Hauptseite */ /* Hauptseite */

15
assets/seiten/css/index.css
View File

@@ -26,9 +26,18 @@
} }
#content { #content {
position: fixed;
height: 100%;
min-height: 100%;
width: 100%; width: 100%;
height: 100%;
z-index: -1;
position: absolute;
top: 101%;
left: 0;
right: 0;
background-color: #121212; background-color: #121212;
} }
#down {
z-index: 1;
position: relative;
}

18
assets/seiten/services.html
View File

@@ -3,7 +3,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="with=device-width, initial-scale=1.0"> <meta name="viewport" content="with=device-width, initial-scale=1.0">
<title>B-Waren Shop</title> <title>B-Waren Shop</title>
<link rel="stylesheet" type="text/css" href="../seiten/css/design.css"/> <link rel="stylesheet" type="text/css" href="./css/design.css"/>
<link rel="icon" type="image/png" href="../bilder/icon.png"> <link rel="icon" type="image/png" href="../bilder/icon.png">
<link rel="stylesheet" type="text/css" href="./css/services.css"/> <link rel="stylesheet" type="text/css" href="./css/services.css"/>
</head> </head>
@@ -21,7 +21,21 @@
</div> </div>
</div> </div>
<div class="seite"> <div class="seite">
<!-- Sterne -->
<div class="sterne">
<section>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</section>
</div>
</div> </div>
</body> </body>
</html> </html>

16
assets/seiten/shop.html
View File

@@ -20,6 +20,20 @@
<a class="neon-button" href="./login.html"><br>Anmelden<br></a> <a class="neon-button" href="./login.html"><br>Anmelden<br></a>
</div> </div>
</div class="seite"> </div class="seite">
<!-- Sterne -->
<div class="sterne">
<section>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</section>
</div>
</body> </body>
</html> </html>

21
index.html
View File

@@ -6,10 +6,25 @@
<link rel="stylesheet" type="text/css" href="./assets/seiten/css/design.css"/> <link rel="stylesheet" type="text/css" href="./assets/seiten/css/design.css"/>
<link rel="stylesheet" type="text/css" href="./assets/seiten/css/index.css"/> <link rel="stylesheet" type="text/css" href="./assets/seiten/css/index.css"/>
<link rel="icon" type="image/png" href="./assets/bilder/Logo.png"> <link rel="icon" type="image/png" href="./assets/bilder/Logo.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var scroll_position = 0;
$(".seite").scroll(function() {
scroll_position = $(this).scrollTop();
if (scroll_position > 20) {
$(".menu").css("background-color", "#121212");
} else {
$(".menu").css("background-color", "transparent");
}
console.log(scroll_position)
});
});
</script>
</head> </head>
<body> <body>
<!-- Menü --> <!-- Menü -->
<div class="menu"> <div id="menu" class="menu">
<div class="btn-left"> <div class="btn-left">
<a class="neon-button " href="./assets/seiten/shop.html"><br>Shop<br></a> <a class="neon-button " href="./assets/seiten/shop.html"><br>Shop<br></a>
<a class="neon-button " href="./assets/seiten/b-waren.html"><br>B-Waren<br></a> <a class="neon-button " href="./assets/seiten/b-waren.html"><br>B-Waren<br></a>
@@ -38,13 +53,11 @@
</section> </section>
</div> </div>
<!-- Hauptseite --> <!-- Hauptseite -->
<!-- On Top Knopf --> <!-- On Top Knopf -->
<a id="up-btn" href="#top">Nach Oben</a> <a id="up-btn" href="#top">Nach Oben</a>
<!-- Scroll Down Knopf--> <!-- Scroll Down Knopf-->
<a id="down-btn" href="#content"><img src="./assets/bilder/arrow_down.png"></a> <a id="down-btn" href="#content"><img src="./assets/bilder/arrow_down.png"></a>
<!-- Hauptseiten Content (Text, Bilder, Verknüpfungen,...)-->
<div id="content"> <div id="content">
<h1>- Überschrift -</h1> <h1>- Überschrift -</h1>
</div> </div>