holy_grail

RohitSharma50 · RohitSharma50 · commit 0d1c8c5d1f33 · 2025-02-07T16:40:33.000+05:30
diff --git a/Holy Grail/index.css b/Holy Grail/index.css
@@ -0,0 +1,49 @@
+body {
+  margin: 0;
+  display: flex;
+  justify-content: space-between;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+header,
+footer {
+  color: aliceblue;
+  text-align: center;
+  background-color: black;
+  padding: 20px 0px;
+}
+
+.container {
+  display: flex;
+  flex: 1;
+  align-items: stretch; /* Ensure children stretch to full height */
+  justify-content: space-between;
+}
+
+.left,
+.right {
+  background-color: palevioletred;
+  width: 200px;
+  padding: 20px;
+  display: flex; /* Ensure the content inside stretches */
+  flex-direction: column; /* Stack content vertically */
+}
+
+main {
+  flex: 1; /* Allow the main content to take remaining space */
+  background-color: lightgray; /* Optional: Add a background color to main */
+  padding: 20px; /* Optional: Add padding to main */
+}
+
+@media only screen and (max-width: 960px) {
+  .container {
+    flex-direction: column;
+  }
+  .container,
+  .left,
+  .right {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
diff --git a/Holy Grail/index.html b/Holy Grail/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="index.css" />
+    <title>Holy Grail</title>
+  </head>
+  <body>
+    <header>
+      <h> Header</h>
+    </header>
+    <div class="container">
+      <aside class="left">
+        <h1>left</h1>
+        <p>rohit is on left</p>
+      </aside>
+      <main>
+        <h1>middle</h1>
+      </main>
+      <aside class="right">
+        <h1>Right</h1>
+        <p>rohit is on left</p>
+      </aside>
+    </div>
+    <footer>Footer</footer>
+  </body>
+</html>
