changing the elemente to sematic html

Anita-ihuman · Feb 17, 2021 · 457c064 · 457c064
1 parent 097f91d
commit 457c064
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 27 deletions.
diff --git a/components/footer.tsx b/components/footer.tsx
@@ -4,9 +4,9 @@ import styles from "../styles/footer.module.scss";
 const Footer = () => {
   return (
     <>
-      <footer>
-        <div className={styles.Third}>
-          <div className={styles.text}>
+      <footer className={styles.footer}>
+        <section className={styles.Third}>
+          <article className={styles.text}>
             <div>
               <img src="Logo.png" className={styles.textimg} />
               <p>
@@ -17,25 +17,29 @@ const Footer = () => {
             <div className={styles.copy}>
               Copyright 2019 MNTN, Inc. Terms & Privacy
             </div>
-          </div>
-          <div className={styles.text2}>
-            <div className={styles.text}>
+          </article>
+          <article className={styles.text2}>
+            <div className={styles.text1}>
               <h3>More on The Blog</h3>
-              <p>About MNTN</p>
-              <p>Contributors & Writers</p>
-              <p>Write For Us</p>
-              <p>Contact Us</p>
-              <p>Privacy Policy</p>
+              <ul>
+                <li>About MNTN</li>
+                <li>Contributors & Writers</li>
+                <li>Write For Us</li>
+                <li> Contact Us</li>
+                <li>Privacy Policy</li>
+              </ul>
             </div>
 
             <div className={styles.text1}>
               <h3>More on MNTN</h3>
-              <p>The Team </p>
-              <p>Jobs </p>
-              <p>Press </p>
+              <ul>
+                <li>The Team</li>
+                <li>Jobs</li>
+                <li>Press</li>
+              </ul>
             </div>
-          </div>
-        </div>
+          </article>
+        </section>
       </footer>
     </>
   );

diff --git a/components/nav.tsx b/components/nav.tsx
@@ -6,9 +6,9 @@ const Navbar = () => {
     <>
       <nav className={styles.nav}>
         <div className={styles.header}>
-          <div className={styles.brand}>
+          <figure className={styles.brand}>
             <img src="/Logo.png" alt="Logo" color="black" />
-          </div>
+          </figure>
 
 
           <div>

diff --git a/styles/footer.module.scss b/styles/footer.module.scss
@@ -1,22 +1,29 @@
+.footer {
+  width: 100%;
+    background: #10222a;
+}
+
 .Third {
   color: white;
   display: flex;
   padding: 40px 0px;
-  width: 100%;
-  justify-content: space-around;
-  background: #10222a;
+  width: 90%;
+  justify-content: space-evenly;
+margin: 0 auto;
 }
 
 .text2 {
   display: flex;
   justify-content: space-evenly;
   font-family: Gilroy;
   font-style: normal;
+  margin-right: 90px;
 }
 .text1 {
   margin-left: 100px;
   color: white;
   font-family: Gilroy;
+
 }
 .text p {
   font-family: Gilroy;
@@ -25,13 +32,24 @@
   line-height: 22px;
   width: 170px;
 }
-.text1 p {
+.text ul {
+  font-family: Gilroy;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 22px;
+  list-style: none;
+  padding: 0;
+}
+.text1 ul {
+  padding: 0;
+  list-style: none;
   font-family: Gilroy;
   font-weight: normal;
   font-size: 12px;
   line-height: 22px;
 }
 .text {
+  margin-right: 150px;
 }
 .textimg {
   width: 70px;
@@ -66,13 +84,13 @@
   text-align: center;
 }
 @media (max-width: 600px) {
-  .third{
+  .third {
     flex-wrap: wrap;
-flex-direction: row;
-justify-content: center;
+    flex-direction: row;
+    justify-content: center;
   }
-  .text2{
+  .text2 {
     flex-wrap: wrap;
     flex-direction: row;
   }
-}
+}