From bf9d19bb83dc7a00ab9ab2786565d4613468e912 Mon Sep 17 00:00:00 2001 From: divyashree-N Date: Thu, 17 Sep 2020 18:06:24 +0530 Subject: [PATCH 1/2] changes made in flex --- .vscode/settings.json | 3 ++ index.html | 53 +++++++++++++++++++---------- style.css | 77 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 115 insertions(+), 18 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html index 5d7baa3..17a49ad 100644 --- a/index.html +++ b/index.html @@ -1,31 +1,48 @@ + Document +

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.

+
+ +
+ + + + \ No newline at end of file diff --git a/style.css b/style.css index 8b13789..59ec665 100644 --- a/style.css +++ b/style.css @@ -1 +1,78 @@ +@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;400&display=swap"); +body { + font-family: 'Nunito Sans', sans-serif; +} + + +header { + display: flex; + justify-content: center; + align-items: center; + background: orange; + color: white; + width: 100%; + +} + +h1 { + font-weight: 100; +} + + +nav { + width: 150px; + height: 280px; + float: left; + background-color: darkolivegreen; + color: white; + display: flex; + padding: 10px; + font-weight: 100; + margin-right: 3px; +} + +aside { + width: 145px; + height: 280px; + float: right; + background-color: darkolivegreen; + color: white; + display: flex; + margin-left: 2px; + padding: 10px; + font-weight: 100; + + + +} + +article { + display: flex; + justify-content: center; + background-color: #cccc99; + color: white; + height: 300px; + font-family: 'Nunito Sans', sans-serif; + align-items: center; + width: 77.5%; + margin: 20px; + flex-direction: column; + text-align: center; + margin: 5px; + margin-left: 5px; + margin-right: 5px; + +} + +footer { + display: flex; + justify-content: left; + background: orange; + color: white; + font-size: 10px; + align-items: center; + width: 98.7%; + height: 50px; + padding: 10px; +} \ No newline at end of file From 8c80973588a66c65e23b8bc1977571f97ed014e8 Mon Sep 17 00:00:00 2001 From: divyashree-N Date: Sat, 19 Sep 2020 13:32:32 +0530 Subject: [PATCH 2/2] changes made --- .vscode/settings.json | 2 +- project-builder-html-css-npm | 1 + style.css | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) create mode 160000 project-builder-html-css-npm diff --git a/.vscode/settings.json b/.vscode/settings.json index 6f3a291..f673a71 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "liveServer.settings.port": 5501 + "liveServer.settings.port": 5502 } \ No newline at end of file diff --git a/project-builder-html-css-npm b/project-builder-html-css-npm new file mode 160000 index 0000000..5c9546b --- /dev/null +++ b/project-builder-html-css-npm @@ -0,0 +1 @@ +Subproject commit 5c9546b767623c40ee3facaad3d393501ebd6291 diff --git a/style.css b/style.css index 59ec665..b99cd06 100644 --- a/style.css +++ b/style.css @@ -55,7 +55,7 @@ article { height: 300px; font-family: 'Nunito Sans', sans-serif; align-items: center; - width: 77.5%; + width: 77.3%; margin: 20px; flex-direction: column; text-align: center;