design vorschlag

test.html

@@ -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>