categories bar update
This commit is contained in:
parent
a76889aaf8
commit
328f833ebb
47
assets/css/home.css
Normal file
47
assets/css/home.css
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
.home-nav {
|
||||||
|
min-height: 56px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #000961; /* helleres Lapis-/Hellblau */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inner zentriert */
|
||||||
|
.home-nav__inner {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* List: 5 gleich große Bereiche */
|
||||||
|
.home-nav__list {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Kategorien */
|
||||||
|
.home-nav__list li {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 1rem 0;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Trennstriche */
|
||||||
|
.home-nav__list li:not(:last-child)::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 20%;
|
||||||
|
height: 60%;
|
||||||
|
width: 1px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.6);
|
||||||
|
}
|
||||||
@ -12,7 +12,7 @@
|
|||||||
|
|
||||||
<title>Geizkragen</title>
|
<title>Geizkragen</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
<!--==================== HEADER ====================-->
|
<!--==================== HEADER ====================-->
|
||||||
<header class="header" id="header">
|
<header class="header" id="header">
|
||||||
<nav class="nav" aria-label="Hauptnavigation">
|
<nav class="nav" aria-label="Hauptnavigation">
|
||||||
|
|||||||
44
home.php
44
home.php
@ -4,42 +4,40 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
<link rel="stylesheet" href="/style.css">
|
<link rel="stylesheet" href="assets/css/home.css">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<nav class="nav" aria-label="Homenavigation">
|
|
||||||
<div class="nav__inner2 container">
|
|
||||||
<div class="nav__menu" id="nav-menu">
|
|
||||||
|
|
||||||
<ul class="nav__list">
|
<nav class="home-nav" aria-label="Homenavigation">
|
||||||
|
<div class="home-nav__inner container">
|
||||||
|
<ul class="home-nav__list">
|
||||||
|
|
||||||
<li class="nav__categories">
|
<li class="home-nav__item">
|
||||||
<p>Elektronik</p>
|
<p>Elektronik</p>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="nav__categories">
|
<li class="home-nav__item">
|
||||||
<p>Computer</p>
|
<p>Computer</p>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="nav__categories">
|
<li class="home-nav__item">
|
||||||
<p>Smartphones</p>
|
<p>Smartphones</p>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="nav__categories">
|
<li class="home-nav__item">
|
||||||
<p>Kopfhörer</p>
|
<p>Kopfhörer</p>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="nav__categories">
|
<li class="home-nav__item">
|
||||||
<p>Laptop</p>
|
<p>Laptop</p>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<?php echo "Test123" ?>
|
<?php echo "Test123" ?>
|
||||||
|
|
||||||
<?php include "footer.php"; ?>
|
<?php include "footer.php"; ?>
|
||||||
Loading…
Reference in New Issue
Block a user