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

update

Browse Source
This commit is contained in:
Fabian Märker
2021-11-09 21:16:38 +01:00
parent 789c1f8773
commit e82ad44d8a
2 changed files with 100 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
assets/design.css
View File

@@ -1,56 +1,102 @@
* {
box-sizing: border-box;
*{
margin: 0;
padding: 0;
background-color: #24252A;
}
li, a, button {
box-sizing: border-box;
font-family: sans-serif;
font-weight: 500;
font-size: 16px;
color: #ecf0f1;
text-decoration: none;
}
header {
body{
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
justify-content: center;
}
.logo {
.menu {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.menu a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 25px 16px;
text-decoration: none;
transition: ease 0.3s;
}
.menu p{
position: fixed;
top: 25px;
right: 100px;
color: #f2f2f2;
}
.menu a:hover {
background: #ddd;
color: black;
}
.seite {
width: 100%;
height: 100%;
padding: 80px 20px;
transition: .4s ease;
}
.seite h1 {
text-align: center;
}
.seite p {
padding: 30px 0;
}
#dark_mode {
position: fixed;
top: 20px;
right: 20px;
appearance: none;
-webkit-appearance : none;
-moz-appearance : none;
-o-appearance : none;
width: 70px;
height: 35px;
background: black;
border-radius: 22px;
cursor: pointer;
outline: none;
}
.menu_list {
list-style: none;
}
.menu_list li {
display: inline-block;
padding: 0px 20px;
}
.menu_list li a {
transition: all 0.3s ease 0.5s;
}
.menu_list li a :hover {
color: #0088a9;
}
button {
padding: 9px 25px;
background-color: rgba(0,13,169,1);
border: none;
border-radius: 50px;
#dark_mode::before {
content: '';
position: absolute;
width: 35px;
height: 30px;
background-color:white;
border-radius: 35px;
top: 2px;
left: 2px;
cursor: pointer;
transition: all 0.3s ease 0s;
transition: .3s linear;
}
button:hover {
background-color: rgba(0,13,169,0.8);
#dark_mode:checked + .seite {
background-color: rgb(19, 18, 18);
color: white;
}
#dark_mode:checked::before {
left: 30px;
}
#dark_mode:checked {
background: rgb(12, 177, 81);
}

26
index.html
View File

@@ -2,21 +2,23 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="with=device-width, initial-scale=1.0">
<title>KBM - Startseite</title>
<title>Startseite</title>
<link rel="stylesheet" type="text/css" href="assets/design.css"/>
<link rel="icon" type="image/png" href="assets/bilder/icon.png">
</head>
<body>
<header>
<img class="logo" src="assets/bilder/logo_wide.png" alt="logo">
<nav>
<ul class="menu_list">
<li><a href='#'>Startseite</a></li>
<li><a href='#'>Seite1</a></li>
<li><a href='#'>Seite2</a></li>
</ul>
</nav>
<a href="#"><button>Knopf</button></a>
</header>
<!-- Menü -->
<div class="menu">
<a href="#start">Startseite</a>
<a href="#seite2">2. Seite</a>
<a href="#seite3">3. Seite</a>
<p>Darkmode </p>
</div>
<input type="checkbox" id="dark_mode">
<div class="seite">
<!-- Hauptseite -->
<h1>Test</h1>
</div>
</body>
</html>