prograd-org · radhikagupta6 · Aug 20, 2020 · Aug 21, 2020
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-![Image description](https://i1.faceprep.in/ProGrad/face-logo-resized.png)
+
 
 # ProGrad Lab | Html & CSS Flex Layout
 
@@ -11,44 +11,5 @@ In this exercise, the goal is to apply as many as possible of the concepts you'v
 - how to use flexbox to position elements on the page and
 - how to style the page.
 
-## Getting started
-
-1. [Fork](https://github.com/FACEPrep-ProGrad/lab-html-css-flex-layout.git) this repo
-2. [Clone](https://github.com/FACEPrep-ProGrad/lab-html-css-flex-layout.git) this repo
-
-Whenever you create a first significant change, you should make your first commit.
-
-3. Follow these [guidelines to add, commit and push changes](https://github.com/FACEPrep-ProGrad/general-guidelines-labs-project-builders.git).
-
-In the end of this document, you will find guidelines on how to submit the exercise.
-
-**Keep in mind that you don't have to wait to fully finish the exercise to make a pull request. You only have to make a pull request once. After that, every time when you make a commit, it will be automatically added and shown in the pull request.**
-
-## Instructions
-The starter-code contains all the files, images, and text content needed to create the scoreboard. 
-The text is in the index.html, and a css file is created in style.css. Font to be used should be Nunito Sans. Remember to follow the best practices.
-
-### Introduction
-
-In this exercise, you will create a flex layout. Our goal is to get as close as this. You already have all the assets for this version in the images folder as well as the necessary text in the `index.html`.
-Our goal is to get as close as possible to this:
-![Image description](https://i1.faceprep.in/ProGrad/flex-2.png)
-
-
-### Progression 1: Where is my head
-Your task in this iteration is to create a header.
-- Make the text center justified.
-- use flex to design the layout.
-
-### Progression 2: Design Design Design
-Your task in this iteration is create the aside bar and article as per the expected output.
-- Use lorem ipsum to generate the paragraph.
-- Use aside and article tag
-- use flex to design the layout.
-
-### Progression 3: Where is my foot 
-Your task in this iteration is to create a footer.
-- use flex to design the layout.
-
+https://radhikagupta6.github.io/html-css-flex-layout/
 
-Happy Coding ❤️
diff --git a/index.html b/index.html
@@ -1,31 +1,55 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
-    <header>
-        <h1>Responsive Layout using Flexbox</h1>
-   </header>
-
-   <div id="main">
-       <nav>nav</nav>
-       <aside>aside</aside>
-
-       <article>
-         <p>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.</p>
-
-   <p>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.</p>
-       </article>
-
-   </div>
-   <footer>
-   Footer
-   </footer>
-
-
+    <div class="container">
+        <header>
+            <h1>Responsive Layout using Flexbox</h1>
+        </header>
+
+        <div id="main">
+            <nav>nav</nav>
+
+
+            <article>
+                <p>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.</p>
+                <br>
+                <p>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.</p>
+            </article>
+            <aside>aside</aside>
+
+        </div>
+        <footer>
+            Footer
+        </footer>
+
+    </div>
 </body>
+
 </html>
diff --git a/style.css b/style.css
@@ -1 +1,109 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200&display=swap');
 
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "Nunito Sans", sans-serif;
+    font-size: 20px;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    height: max-content;
+    align-items: stretch;
+}
+
+header,
+#main,
+footer {
+    flex-shrink: 0;
+}
+
+header {
+    background: #ffad33;
+    color: white;
+    font-weight: normal;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    height: 120px;
+}
+
+.break {
+    display: block;
+}
+
+h1 {
+    font-size: 2em;
+    padding-top: 30px;
+}
+
+#main {
+    display: flex;
+    flex-direction: row;
+    height: 750px;
+}
+
+footer {
+    height: 50%;
+    background: #ffad33;
+    color: white;
+    height: 100px;
+    justify-content: left;
+    align-items: center;
+    font-size: 1.3em;
+    padding: 0.8em;
+
+
+}
+
+
+#main nav {
+    background: #4d4d00;
+    color: white;
+    flex-direction: column;
+    margin-left: 0%;
+    margin-top: 0.5em;
+    margin-right: 0.5em;
+    margin-bottom: 0.5em;
+    align-items: stretch;
+    justify-content: center;
+    padding: 1.5em;
+    width: 1800px;
+    font-size: 1.3em;
+
+}
+
+#main article {
+    background: #999966;
+    color: white;
+    flex-direction: column;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+    align-items: center;
+    justify-content: center;
+    text-align: justify;
+    padding: 1.8em;
+    font-size: 1.4em;
+
+}
+
+#main aside {
+    background: #4d4d00;
+    color: white;
+    flex-direction: column;
+    margin-right: 0%;
+    margin-top: 0.5em;
+    margin-left: 0.5em;
+    margin-bottom: 0.5em;
+    align-items: stretch;
+    justify-content: center;
+    padding: 1.5em;
+    width: 1800px;
+    font-size: 1.3em;
+}