Skip to content
Snippets Groups Projects
Commit 8304396d authored by Richard Taesler's avatar Richard Taesler
Browse files

design vorschlag

parent 85bd7acb
No related branches found
No related tags found
No related merge requests found
......@@ -31,11 +31,6 @@
font-weight: bold;
}
.nav-dots {
display: flex;
gap: 2rem;
}
.dot {
width: 8px;
height: 8px;
......@@ -53,14 +48,35 @@
/* Main Content */
.main-content {
padding: 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-columns: 1fr 1px 1fr; /* Drei Spalten: links, Trennlinie, rechts */
gap: 2rem;
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
}
/* Vertikale Trennlinie */
.divider {
background-color: #000000;
height: 100%;
margin: 0 1rem;
}
/* Linke Spalte */
.left-column {
display: flex;
flex-direction: column;
gap: 2rem;
}
/* Rechte Spalte */
.right-column {
display: flex;
align-items: center;
justify-content: center;
}
.box {
border: 1px solid #ddd;
padding: 1.5rem;
......@@ -72,6 +88,22 @@
justify-content: center;
background-color: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
width: 100%;
}
/* Responsive Design */
@media (max-width: 768px) {
.main-content {
grid-template-columns: 1fr;
}
.divider {
display: none;
}
.left-column, .right-column {
padding: 0;
}
}
</style>
</head>
......@@ -79,23 +111,27 @@
<nav class="navbar">
<div class="logo">LOGO</div>
<div class="nav-dots">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<h1>HOME</h1>
</div>
<a href="#" class="account-btn">Account</a>
</nav>
<main class="main-content">
<div class="box">
<h2>ADD Course</h2>
</div>
<div class="box">
<h2>Prog 1</h2>
<div class="left-column">
<div class="box">
<h2>ADD Course</h2>
</div>
<div class="box">
<h2>Cosmetic Shop</h2>
</div>
</div>
<div class="box">
<h2>Cosmetic Shop</h2>
<div class="divider"></div>
<div class="right-column">
<div class="box">
<h2>Prog 1</h2>
</div>
</div>
</main>
</body>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment