flexbox assignment submission-Niyati Jain

InnogeeksOrganization · Feb 5, 2023 · dcf46be · dcf46be
1 parent 63a11b2
commit dcf46be
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 1 deletion.
diff --git a/NiyatiJain/assignment.txt b/NiyatiJain/assignment.txt
diff --git a/NiyatiJain/flexbox.html b/NiyatiJain/flexbox.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flexbox</title>
+    <style>
+    body{ border:2px solid black;}
+    .div1{
+            display:flex;
+            flex-direction: column;
+            background-color:white;
+            border: 30px;
+
+
+
+
+
+    }
+    #first {
+         background-color: darkturquoise;
+
+         color: white;
+         margin: 5px;
+         padding: 20px;
+
+
+
+}
+    #second{
+
+
+         background-color: red;
+         color: white;
+         height: 3cm;
+         margin: 5px;
+         padding: 20px;
+}
+
+    .div2{ display:flex;
+            flex-direction: row;
+            background-color:white;
+            border: 30px;
+
+
+
+
+}
+#third{border:300px solid green ;
+         background-color: green;
+         color: white;
+         margin: 5px;
+         padding: 20px;
+
+
+        }
+#fourth{
+    border:100px solid purple ;
+         background-color: purple;
+         color: white;
+         margin: 5px;
+         padding: 20px;
+
+
+}
+
+
+.div3{display:flex;
+            flex-direction: row;
+            background-color:grey;
+            border: 20px solid grey;
+            padding-bottom: 20px;
+            color: white;
+
+}
+    </style>
+</head>
+<body>
+    <div class="div1">
+    <div id="first">Header</div>
+
+    <div id="second">Hero</div>
+    </div>
+
+    <div class="div2">
+    <div id="third" style="flex-grow: 5;">Content</div>
+    <div id="fourth" style="flex-grow: 2;">Sidebar</div>
+    </div>
+    <div class="div3">
+        Footer
+    </div>
+</body>
+</html>
diff --git a/flexbox.png b/flexbox.png