Html mockup #9
@@ -12,7 +12,7 @@ main {
|
||||
}
|
||||
|
||||
nav {
|
||||
height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 96px);
|
||||
height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 64px);
|
||||
overflow-y: auto;
|
||||
/* Scrollbar, wenn der Inhalt zu groß ist */
|
||||
display: flex; /* Macht die Liste horizontal */
|
||||
@@ -20,12 +20,12 @@ nav {
|
||||
flex-direction: column; /* Elemente vertikal anordnen */
|
||||
border: 1px solid var(--secondary-color);
|
||||
border-radius: var(--box-border-radius);
|
||||
margin: 16px;
|
||||
margin-left: 16px;
|
||||
@media (max-width: 768px) {
|
||||
margin: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
padding: 5px;
|
||||
background-color: var(--primary-font-color);
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
nav ul {
|
||||
@@ -45,7 +45,6 @@ nav ul li a:hover {
|
||||
font-weight: bold; /* Macht den Text fett */
|
||||
}
|
||||
|
||||
|
||||
.editor-container {
|
||||
height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 96px);
|
||||
display: flex;
|
||||
|
||||
@@ -13,3 +13,13 @@ footer {
|
||||
margin: 8px; /* Adjust the margin for smaller screens */
|
||||
}
|
||||
}
|
||||
|
||||
footer a {
|
||||
text-decoration: none; /* Entfernt die Unterstreichung */
|
||||
color: var(--secondary-font-color); /* Setzt die Schriftfarbe */
|
||||
}
|
||||
footer a:hover {
|
||||
text-decoration: underline; /* Unterstreichung beim Überfahren mit der Maus */
|
||||
font-weight: bold; /* Macht den Text fett */
|
||||
}
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
</div>
|
||||
</header>
|
||||
<div class="row">
|
||||
<nav class="col-3 col-s-6">
|
||||
<nav class="col-2 col-s-6">
|
||||
<ul>
|
||||
<li><a href="#">Eigenschaften</a></li>
|
||||
<li><a href="#">Produkte</a></li>
|
||||
@@ -32,7 +32,7 @@
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
|
||||
<div class="col-3 col-s-12">
|
||||
<div class="col-6 col-s-12">
|
||||
<div class="aside">
|
||||
<h2>Sidebar</h2>
|
||||
<p>Wir ziehen mit unserem Equipment zurück in die Zollkantine in Bremen. Wir teilen uns dann den Raum mit Myrre und ihrer Band.</p>
|
||||
@@ -40,10 +40,8 @@
|
||||
</div>
|
||||
</main>
|
||||
</div> <!-- Closing the initial row div -->
|
||||
<footer>
|
||||
<div class="row col-12">
|
||||
<p>© 2026 Simply CPQ - All rights reserved - contact: <a href="mailto:Thomas.Sindt@gmx.de">Thomas.Sindt@gmx.de</a></p>
|
||||
</div>
|
||||
<footer class="row col-12">
|
||||
<h6>© 2026 Simply CPQ - All rights reserved - contact: <a href="mailto:Thomas.Sindt@gmx.de">Thomas.Sindt@gmx.de</a></h6>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user