CodeYourFuture · Neil0696 · May 20, 2021 · May 20, 2021 · May 20, 2021 · May 20, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/css/style.css b/css/style.css
@@ -6,3 +6,123 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+* {
+    padding: 0px;
+    margin: 0px;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    text-align: center;
+    color: white;
+}
+
+.topTitle {
+    color: rgb(255, 255, 255);
+    background: rgba(52, 181, 181, 0.756);
+    padding: 20px 0;
+    text-align: center;
+}
+
+.topPara{
+    text-align: center;
+    font-size: 20px;
+    margin: 20px 40px;
+    padding: 20px 20px;
+    color: black;
+}
+
+main {   
+    padding: 10px;
+    margin: 0px 40px;
+    background: rgba(52, 181, 181, 0.623);
+}
+
+section {
+    padding: 10px;
+}
+
+p {
+    font-size: 15px;
+}
+
+main p {
+    font-size: 20px;
+    margin: 30px 0px;
+}
+
+h2 {
+    margin: 20px 0px;
+}
+
+ul li {
+    list-style: none;
+    padding: 5px;
+    margin: 2px;
+}
+
+
+a {
+    text-decoration: none;
+    color: white;
+    font-size: 20px;
+}
+
+a:hover {
+    color: rgba(248, 130, 4, 0.945);
+}
+
+
+.img1, .img2 {
+    margin: 25px 0;
+    border: 1px solid black;
+}
+main .img1 {
+    width: 30%;
+}
+
+main .img2 {
+    width: 50%;  
+}
+
+h2:first-child {
+    background: rgb(255, 152, 42);
+    padding: 20px 0;
+    border-radius: 6px
+}
+
+hr { 
+    width: 95%;
+    margin-top: 4em;
+    margin-bottom: 4em;
+    margin-left: auto;
+    margin-right: auto;
+  } 
+
+footer {
+    background: rgba(52, 181, 181, 0.756);   
+}
+
+footer ul {
+    display: flex;
+    flex-direction: row;
+}
+
+footer li {
+    margin: 25px 110px;
+    padding: 20px 20px;
+    font-size: 20px;
+}
+
+@media screen and (min-width: 600px) {
+    footer ul {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    footer ul li {
+        font-size: 16px;
+    }
+
+    .img1, .img2 {
+        width: 300px;
+        height: auto;
+    }
+}
diff --git a/images/homeworkout.jpeg b/images/homeworkout.jpeg
diff --git a/images/stressed-out.jpeg b/images/stressed-out.jpeg
diff --git a/index.html b/index.html
@@ -18,5 +18,48 @@
   <body>
     <!-- Add your HTML markup here -->
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
-  </body>
-</html>
+
+    <header>
+      <h1 class="topTitle">LIFE IN LOCKDOWN</h1>
+      <p class="topPara">We had some of the hardest time during the lockdown period. I will be touching upon how lockdown can effect our lives whether it's mentally or physically and how we can keep ourselves healthy if we had to go through it again.</p>     
+    </header>
+
+    <main> 
+      <section class="section1">
+        <h2>How can it effect us?</h2>
+        <p class="">It effected us all in different ways, but most of us had suffered mentally, physically and our relationships with friends and family were effected too. Click on the links below to find out more about them!</p>
+        <div class="effectList">
+          <ul class="list1">
+            <li><a href="https://www.medicalnewstoday.com/articles/mental-health-during-the-pandemic-1-year-on" target="_blank">Mentally</a></li>
+            <li><a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7825978/" target="_blank">Physically</a></li>
+            <li><a href="https://www.google.com/search?q=google&oq=goo&aqs=chrome.0.69i59i131i433j0i131i433l2j69i59j69i60l4.912j1j4&sourceid=chrome&ie=UTF-8" target="_blank">Relationships</a></li>
+          </ul>
+        </div>
+        <img class="img1" src="images/stressed-out.jpeg" alt="abstract art picture of a man sitting down in isolation"> 
+      </section>
+
+      <section class="section2">
+          <h2>How can you keep yourself healthy?</h2>
+          <p>
+            Here are some important ways to keep yourself healthy mentally and physically incase we're in lockdown again. Click on the links below to get more info:
+              <ul class="list2">
+                  <li><a href="#">Exercising</a></li>
+                  <li><a href="#">Eating Healthily</a></li>
+                  <li><a href="#">Sleeping</a></li>
+                  <li><a href="#"> Staying in touch with your friends via phone calls or texts</a></li>
+                </ul>
+            </p>
+            <img class="img2" src="images/homeworkout.jpeg" alt="pic of man exercising at home">     
+          </section>
+</main> 
+      <hr>
+          <footer>
+                <ul>
+                  <li>About</li>
+                  <li>Privay</li>
+                  <li>Terms</li>
+                  <li>Contact</li>
+                </ul>
+          </footer>
+  </body>  
+</html>