From ff37d732f07d41602520862b311db0e68bf92900 Mon Sep 17 00:00:00 2001 From: kunalarya873 Date: Thu, 19 Oct 2023 22:12:20 +0530 Subject: [PATCH] learning flexbox --- index.html | 22 ++++++++++------------ index2.html | 22 ++++++++++++++++++++++ style.css | 31 +++++++++++++++++++++++++++---- style2.css | 7 +++++++ 4 files changed, 66 insertions(+), 16 deletions(-) create mode 100644 index2.html create mode 100644 style2.css diff --git a/index.html b/index.html index 7ab7d47..17582d4 100644 --- a/index.html +++ b/index.html @@ -2,21 +2,19 @@ + + CSS level 4 - Document -

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?

-
Love Nature
-

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.

+

Flexbox Model

+
+
Box 1
+
Box 2
+
Box 3
+
Box 4
+
Box 5
+
\ No newline at end of file diff --git a/index2.html b/index2.html new file mode 100644 index 0000000..7ab7d47 --- /dev/null +++ b/index2.html @@ -0,0 +1,22 @@ + + + + + + + Document + + +

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?

+
Love Nature
+

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.

+ + \ No newline at end of file diff --git a/style.css b/style.css index f46a744..eaae2bf 100644 --- 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; } \ No newline at end of file diff --git a/style2.css b/style2.css new file mode 100644 index 0000000..f46a744 --- /dev/null +++ b/style2.css @@ -0,0 +1,7 @@ +div { + height:50px; + width:100px; + background-color:grey; + background-image: url("amazon_logo.png"); + background-size: cover; +} \ No newline at end of file