From a2e4867ba76864cea98e7d82505306841b86e364 Mon Sep 17 00:00:00 2001
From: Anita-ihuman <charlesanita403@gmail.com>
Date: Wed, 17 Feb 2021 11:09:50 +0100
Subject: [PATCH] positioned items for  the main

---
 pages/index.js          | 98 +++++++++++++++++++++++------------------
 pages/main.tsx          | 37 ++++++++++------
 styles/main.module.scss | 11 ++---
 3 files changed, 85 insertions(+), 61 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 9d70f85..8eaad45 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,65 +1,79 @@
 import Head from "next/head";
 import styles from "../styles/Home.module.css";
-import { Element } from '../pages/main'
+import { Element } from "../pages/main";
 
 export default function Home() {
   return (
     <>
-    <div className={styles.Header}>
-      <div className={styles.Header_title}>
-        <div className={styles.Header_social}>
-          <p>Follow</p>
-          <div>
-            <img src="Vector (1).png" alt="" />
-          </div>
-
-          <div>
-            <img src="twitter.png" alt="" />
-          </div>
-        </div>
-        <div className={styles.Header_text}>
-          <div className={styles.Header_top}>
-            <div className={styles.Header_line}>
-              <img src="Rectangle 2.1.png" alt="" />
+      <div className={styles.Header}>
+        <div className={styles.Header_title}>
+          <div className={styles.Header_social}>
+            <p>Follow</p>
+            <div>
+              <img src="Vector (1).png" alt="" />
             </div>
+
             <div>
-              <p>A Hiking guide</p>
+              <img src="twitter.png" alt="" />
             </div>
           </div>
-          <h1 className={styles.Header_top_bold}>
-            Be prepared for the Mountains and beyond!
-          </h1>
-          <div className={styles.Header_bottom}>
-            <span className={styles.Header_span}>scroll down</span>
-            <div>
-              <img src="arrow_downward.png" alt="" />
+          <div className={styles.Header_text}>
+            <div className={styles.Header_top}>
+              <div className={styles.Header_line}>
+                <img src="Rectangle 2.1.png" alt="" />
+              </div>
+              <div>
+                <p>A Hiking guide</p>
+              </div>
+            </div>
+            <h1 className={styles.Header_top_bold}>
+              Be prepared for the Mountains and beyond!
+            </h1>
+            <div className={styles.Header_bottom}>
+              <span className={styles.Header_span}>scroll down</span>
+              <div>
+                <img src="arrow_downward.png" alt="" />
+              </div>
             </div>
           </div>
+          <div className={styles.Header_measure}>
+            <img src="Text.png" alt="" className={styles.Header_meter} />
+            <img src="slider BG.png" alt="" className={styles.Header_ruler} />
+            <img
+              src="slider Indicator.png"
+              className={styles.Header_rulerthick}
+              alt=""
+            />
+          </div>
         </div>
-        <div className={styles.Header_measure}>
-          <img src="Text.png" alt="" className={styles.Header_meter} />
-          <img src="slider BG.png" alt="" className={styles.Header_ruler} />
-          <img
-            src="slider Indicator.png"
-            className={styles.Header_rulerthick}
-            alt=""
-          />
-        </div>
-      </div>
 
-      <img src="BG Hero.png" className={styles.topshade} alt="" />
-      <img src="HG.png" className={styles.sky} alt="" />
-      <img src="MG.png" className={styles.mountain} alt="" />
-      <img src="VG.png" className={styles.person} alt="" />
-      <img src="BG Content.png" className={styles.shade} alt="" />
+        <img src="BG Hero.png" className={styles.topshade} alt="" />
+        <img src="HG.png" className={styles.sky} alt="" />
+        <img src="MG.png" className={styles.mountain} alt="" />
+        <img src="VG.png" className={styles.person} alt="" />
+        <img src="BG Content.png" className={styles.shade} alt="" />
       </div>
-    <Element
+
+      <Element
         headtop="GET STARTED"
         headbold="What level of  hiker are you?"
         headtext="Determining what level of hiker you are can be an important tool when planning future hikes. This hiking level guide will help you plan hikes according to different hike ratings set by various websites like All Trails and Modern Hiker. What type of hiker are you – novice, moderate, advanced moderate, expert, or expert backpacker? "
         headbottom="read more"
       />
-  
+      <Element
+        headtop="Hiking Essentials"
+        headbold="Picking the right Hiking Gear!"
+        headtext="The nice thing about beginning hiking is that you don’t really need any special gear, you can probably get away with things you already have.
+Let’s start with clothing. A typical mistake hiking beginners make is wearing jeans and regular clothes, which will get heavy and chafe wif they get sweaty or wet. "
+        headbottom="read more"
+        left='"01.png"'
+      />
+      <Element
+        headtop="where you go is the key"
+        headbold="Understand Your Map & Timing"
+        headtext="To start, print out the hiking guide and map. If it’s raining, throw them in a Zip-Lock bag. Read over the guide, study the map, and have a good idea of what to expect. I like to know what my next landmark is as I hike. For example, I’ll read the guide and know that say, in a mile, I make a right turn at the junction.."
+        headbottom="read more"
+      />
     </>
   );
 }
diff --git a/pages/main.tsx b/pages/main.tsx
index 8316973..674064d 100644
--- a/pages/main.tsx
+++ b/pages/main.tsx
@@ -6,6 +6,7 @@ export interface ElementProps {
   headbold: string;
   headtext: string;
   headbottom: string;
+  left: boolean;
 }
 
 export function Element({
@@ -13,34 +14,42 @@ export function Element({
   headbold,
   headtext,
   headbottom,
+  left,
 }: ElementProps) {
   return (
-    <div className={styles.main}>
-      <div className={styles.main_content}>
-        <div className={styles.main_content1}>
+    <main className={styles.main}>
+      <section className={styles.main_content}>
+        <article className={styles.main_content1}>
+          {left && (
+            <figure className={styles.content_sideimg}>
+              <img src="01.png" alt="" width="400px" />
+            </figure>
+          )}
           <div className={styles.content_text}>
-            <div>
+            <figure>
               <img src="" className={styles.content_fade} />
-            </div>
+            </figure>
             <div className={styles.content_top}>
               <div className={styles.content_line}>
                 <img src="Rectangle 2.1.png" alt="" />
               </div>
-              <p className={styles.content_orange}>{headtop}</p>
+              <h4 className={styles.content_orange}>{headtop}</h4>
             </div>
-            <h3 className={styles.content_bold}>{headbold}</h3>
+            <h2 className={styles.content_bold}>{headbold}</h2>
             <p>{headtext}</p>
             <div className={styles.content_bottom}>
-              <p>{headbottom}</p>
+              <a href="/">{headbottom}</a>
               <img src="arrow_downward.png" />
             </div>
           </div>
-          <div className={styles.content_sideimg}>
-            <img src="01.png" alt="" width="400px" />
-          </div>
-        </div>
-      </div>
-    </div>
+          {!left && (
+            <figure className={styles.content_sideimg}>
+              <img src="01.png" alt="" width="400px" />
+            </figure>
+          )}
+        </article>
+      </section>
+    </main>
   );
 }
 
diff --git a/styles/main.module.scss b/styles/main.module.scss
index 005db3a..1e11797 100644
--- a/styles/main.module.scss
+++ b/styles/main.module.scss
@@ -38,8 +38,8 @@ background-color: #0B1D26;
 .content_top {
   display: flex;
 }
-.content_top p {
-  margin: 0px 0px;
+.content_top h4 {
+  margin: 7px 0px;
   padding-left: 1rem;
   font-family: Gilroy;
   font-style: normal;
@@ -52,17 +52,18 @@ background-color: #0B1D26;
 .content_bottom {
   display: flex;
 }
-.content_bottom p {
+.content_bottom a {
   font-family: Gilroy;
   font-size: 0.7rem;
   color: #fbd784;
-  width: 70px;
+  
   margin: 0;
 }
 .content_bottom img {
   width: 7px;
   height: 20px;
-  margin-top: 6px;
+  margin-top: -2px;
+  margin-left: 20px;
   transform: rotate(-90deg);
   color: #fbd784;
 }