learning flexbox

kunalarya873 · Oct 19, 2023 · ff37d73 · ff37d73
1 parent 0e66f06
commit ff37d73
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -2,21 +2,19 @@
 <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>CSS level 4</title>
     <link rel="stylesheet" href="style.css">
-    <title>Document</title>
 </head>
 <body>
-    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore magni, doloremque labore architecto eligendi consequatur aperiam totam ipsum dicta enim quisquam ipsa, voluptate, laboriosam omnis! Eos fuga excepturi error iste.
-    Quod pariatur consequatur commodi incidunt, nobis magni alias illum natus numquam rem molestiae sit in voluptate beatae eligendi consequuntur quibusdam aspernatur. Eius quod qui ea cupiditate non dolor aliquid porro?
-    Incidunt cupiditate accusamus facere recusandae sed voluptatum delectus, amet ipsam mollitia! Esse illo, vero veniam facilis sint, debitis obcaecati nisi, quidem maiores quia inventore enim labore atque ipsa repellendus earum?
-    Sequi aperiam quis rem modi neque eos amet corrupti dolorum officia ab tenetur minima laudantium vero, placeat unde mollitia ut nesciunt dignissimos. Dicta voluptate officiis accusamus, iste aperiam molestiae reiciendis.
-    In laudantium molestiae provident blanditiis illo quibusdam dolorum facere nihil vitae qui doloremque laborum repudiandae eaque voluptatem vel velit, veritatis quos natus tenetur voluptas rerum sequi ducimus ipsam minus. Iusto?</p>
-    <div>Love Nature</div>
-    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum harum tempore esse deleniti a velit molestias, voluptas eius perspiciatis autem, dolorem laudantium voluptatem qui vitae natus alias! Maxime, velit illo!
-    A voluptate praesentium quibusdam, officia, ab deserunt odit debitis nisi similique quis aliquam aspernatur? Quas dolores, eum, amet suscipit inventore et libero saepe repellat perspiciatis veniam aspernatur ducimus non ad.
-    Natus itaque molestiae aperiam corrupti mollitia nihil quo assumenda. Quibusdam, voluptas alias sint debitis laboriosam, ullam omnis doloribus repudiandae, enim libero commodi iste quisquam non recusandae ducimus asperiores harum odit.
-    Voluptatibus magni laudantium distinctio ducimus quod in voluptatem hic mollitia sint adipisci assumenda accusamus provident blanditiis aut optio, nesciunt repellat voluptate, animi dolorum facilis molestiae saepe. Eveniet suscipit eligendi architecto!
-    Saepe, blanditiis doloribus voluptas maiores velit quae molestiae nam dicta nostrum beatae sed non perspiciatis ducimus dolorem tempora accusantium illo repellat autem tempore veritatis incidunt? Quaerat iste voluptatem nostrum nihil.</p>
+    <h1>Flexbox Model</h1>
+    <div id="container">
+        <div id="box1">Box 1</div>
+        <div id="box2">Box 2</div>
+        <div id="box3">Box 3</div>
+        <div id="box4">Box 4</div>
+        <div id="box5">Box 5</div>
+    </div>
 </body>
 </html>
diff --git a/index2.html b/index2.html
@@ -0,0 +1,22 @@
+<!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="style.css">
+    <title>Document</title>
+</head>
+<body>
+    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore magni, doloremque labore architecto eligendi consequatur aperiam totam ipsum dicta enim quisquam ipsa, voluptate, laboriosam omnis! Eos fuga excepturi error iste.
+    Quod pariatur consequatur commodi incidunt, nobis magni alias illum natus numquam rem molestiae sit in voluptate beatae eligendi consequuntur quibusdam aspernatur. Eius quod qui ea cupiditate non dolor aliquid porro?
+    Incidunt cupiditate accusamus facere recusandae sed voluptatum delectus, amet ipsam mollitia! Esse illo, vero veniam facilis sint, debitis obcaecati nisi, quidem maiores quia inventore enim labore atque ipsa repellendus earum?
+    Sequi aperiam quis rem modi neque eos amet corrupti dolorum officia ab tenetur minima laudantium vero, placeat unde mollitia ut nesciunt dignissimos. Dicta voluptate officiis accusamus, iste aperiam molestiae reiciendis.
+    In laudantium molestiae provident blanditiis illo quibusdam dolorum facere nihil vitae qui doloremque laborum repudiandae eaque voluptatem vel velit, veritatis quos natus tenetur voluptas rerum sequi ducimus ipsam minus. Iusto?</p>
+    <div>Love Nature</div>
+    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum harum tempore esse deleniti a velit molestias, voluptas eius perspiciatis autem, dolorem laudantium voluptatem qui vitae natus alias! Maxime, velit illo!
+    A voluptate praesentium quibusdam, officia, ab deserunt odit debitis nisi similique quis aliquam aspernatur? Quas dolores, eum, amet suscipit inventore et libero saepe repellat perspiciatis veniam aspernatur ducimus non ad.
+    Natus itaque molestiae aperiam corrupti mollitia nihil quo assumenda. Quibusdam, voluptas alias sint debitis laboriosam, ullam omnis doloribus repudiandae, enim libero commodi iste quisquam non recusandae ducimus asperiores harum odit.
+    Voluptatibus magni laudantium distinctio ducimus quod in voluptatem hic mollitia sint adipisci assumenda accusamus provident blanditiis aut optio, nesciunt repellat voluptate, animi dolorum facilis molestiae saepe. Eveniet suscipit eligendi architecto!
+    Saepe, blanditiis doloribus voluptas maiores velit quae molestiae nam dicta nostrum beatae sed non perspiciatis ducimus dolorem tempora accusantium illo repellat autem tempore veritatis incidunt? Quaerat iste voluptatem nostrum nihil.</p>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -1,7 +1,30 @@
+body {
+    text-align: center;
+}
 div {
-    height:50px;
+    height:100px;
     width:100px;
-    background-color:grey;
-    background-image: url("amazon_logo.png");
-    background-size: cover;
+    display: inline-block;
+    border: 2px solid black;
+}
+#container {
+    width: 800px;
+    height: 200px;
+    display: flex;
+    flex-direction: row-reverse;
+}
+#box1 {
+    background-color: aqua;
+}
+#box2 {
+    background-color: pink;
+}
+#box3 {
+    background-color: darkkhaki;
+}
+#box4 {
+    background-color: indianred;
+}
+#box5 {
+    background-color: slateblue;
 }
diff --git a/style2.css b/style2.css
@@ -0,0 +1,7 @@
+div {
+    height:50px;
+    width:100px;
+    background-color:grey;
+    background-image: url("amazon_logo.png");
+    background-size: cover;
+}