From a5d21ce0204e0367e75c97aad04c82d5e945d4d4 Mon Sep 17 00:00:00 2001 From: SHRAVANI98 Date: Thu, 3 Sep 2020 13:50:55 +0530 Subject: [PATCH 1/2] done responsive layout using flexbox --- index.html | 103 ++++++++++++++++++++++++++++++++++++++--------------- style.css | 69 +++++++++++++++++++++++++++++++++++ 2 files changed, 144 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index 5d7baa3..632b3cb 100644 --- a/index.html +++ b/index.html @@ -1,31 +1,78 @@ - - - - Document - - - + + + + Flexbox + + +
-

Responsive Layout using Flexbox

-
- -
- - - -
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Non sodales neque sodales ut etiam sit amet nisl purus. Risus pretium quam vulputate dignissim suspendisse in est ante in. Dolor purus non enim praesent elementum facilisis leo. Sed libero enim sed faucibus turpis in. Nunc sed velit dignissim sodales ut eu sem integer. Etiam dignissim diam quis enim. Cursus in hac habitasse platea dictumst. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tristique nulla aliquet enim tortor at auctor urna nunc. Orci nulla pellentesque dignissim enim. Consectetur a erat nam at lectus urna duis convallis convallis. A cras semper auctor neque vitae tempus quam pellentesque nec. Quisque egestas diam in arcu cursus euismod quis viverra nibh. Accumsan sit amet nulla facilisi morbi tempus iaculis urna id.

- -

At in tellus integer feugiat scelerisque. Urna cursus eget nunc scelerisque viverra mauris. Arcu non odio euismod lacinia at quis. Et egestas quis ipsum suspendisse ultrices gravida dictum. Lectus sit amet est placerat in. Aliquet risus feugiat in ante metus. Rutrum tellus pellentesque eu tincidunt. Augue interdum velit euismod in pellentesque massa placerat. Id nibh tortor id aliquet lectus proin nibh nisl condimentum. Mi bibendum neque egestas congue quisque egestas.

-
- -
- - - - - \ No newline at end of file +

Responsive Layout using Flexbox

+ + +
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Non + sodales neque sodales ut etiam sit amet nisl purus. Risus pretium quam + vulputate dignissim suspendisse in est ante in. Dolor purus non enim + praesent elementum facilisis leo. Sed libero enim sed faucibus turpis + in. Nunc sed velit dignissim sodales ut eu sem integer. Etiam + dignissim diam quis enim. Cursus in hac habitasse platea dictumst. + Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi + tincidunt. Tristique nulla aliquet enim tortor at auctor urna nunc. + Orci nulla pellentesque dignissim enim. Consectetur a erat nam at + lectus urna duis convallis convallis. A cras semper auctor neque vitae + tempus quam pellentesque nec. Quisque egestas diam in arcu cursus + euismod quis viverra nibh. Accumsan sit amet nulla facilisi morbi + tempus iaculis urna id. +

+ +

+ At in tellus integer feugiat scelerisque. Urna cursus eget nunc + scelerisque viverra mauris. Arcu non odio euismod lacinia at quis. Et + egestas quis ipsum suspendisse ultrices gravida dictum. Lectus sit + amet est placerat in. Aliquet risus feugiat in ante metus. Rutrum + tellus pellentesque eu tincidunt. Augue interdum velit euismod in + pellentesque massa placerat. Id nibh tortor id aliquet lectus proin + nibh nisl condimentum. Mi bibendum neque egestas congue quisque + egestas. + +

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Non + sodales neque sodales ut etiam sit amet nisl purus. Risus pretium quam + vulputate dignissim suspendisse in est ante in. Dolor purus non enim + praesent elementum facilisis leo. Sed libero enim sed faucibus turpis + in. Nunc sed velit dignissim sodales ut eu sem integer. Etiam + dignissim diam quis enim. Cursus in hac habitasse platea dictumst. + Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi + tincidunt. Tristique nulla aliquet enim tortor at auctor urna nunc. + Orci nulla pellentesque dignissim enim. Consectetur a erat nam at + lectus urna duis convallis convallis. A cras semper auctor neque vitae + tempus quam pellentesque nec. Quisque egestas diam in arcu cursus + euismod quis viverra nibh. Accumsan sit amet nulla facilisi morbi + tempus iaculis urna id. +

+ +

+ At in tellus integer feugiat scelerisque. Urna cursus eget nunc + scelerisque viverra mauris. Arcu non odio euismod lacinia at quis. Et + egestas quis ipsum suspendisse ultrices gravida dictum. Lectus sit + amet est placerat in. Aliquet risus feugiat in ante metus. Rutrum + tellus pellentesque eu tincidunt. Augue interdum velit euismod in + pellentesque massa placerat. Id nibh tortor id aliquet lectus proin + nibh nisl condimentum. Mi bibendum neque egestas congue quisque + egestas. +

+
+ +
+ + + diff --git a/style.css b/style.css index 8b13789..32ce402 100644 --- a/style.css +++ b/style.css @@ -1 +1,70 @@ +@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;400;700;800&display=swap"); +body { + font-family: "Nunito Sans", sans-serif; + background-color: white; + display: flex; + flex-direction: column; +} + +* { + padding: 0; + margin: 0; +} + +#main { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; +} + +h1 { + font-weight: 200; + background-color: #ff8c00; + font-size: 2.5em; + color: white; + display: flex; + justify-content: center; + padding: 40px 10px; +} +article { + background-color: #65754d; + height: 1000px; + width: 1300px; + border: 50px; + color: white; + padding: 40px; + margin: 10px 10px 10px 0; +} +.break { + display: block; + padding: 10px; +} +p { + font-size: 1.5em; + text-align: justify; + text-justify: inter-word; +} +nav, +aside { + font-size: 30px; + height: 1000px; + width: 450px; + border: 50px; + color: white; + padding: 40px; + background-color: #6b8e23; + margin: 10px 10px 10px 0; +} + +footer { + font-weight: 200; + background-color: #ffa500; + font-size: 2em; + color: white; + display: flex; + justify-content: left; + padding: 40px 40px 60px 40px; +} From 29e78ee499d54a75c49ec0ee375ddedbb0d1df89 Mon Sep 17 00:00:00 2001 From: "sravs3692@gmail.com" Date: Thu, 3 Sep 2020 14:36:50 +0530 Subject: [PATCH 2/2] done responsive layout using flexbox --- index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/index.html b/index.html index 632b3cb..ea06436 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,6 @@

Responsive Layout using Flexbox

-