Skip to content

Commit

Permalink
positioned items for the main
Browse files Browse the repository at this point in the history
  • Loading branch information
@Anita-ihuman
Anita-ihuman committed Feb 17, 2021
1 parent d5bbccd commit a2e4867
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 61 deletions.
98 changes: 56 additions & 42 deletions pages/index.js
View file
Original file line number Diff line number Diff line change
@@ -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"
/>
</>
);
}
37 changes: 23 additions & 14 deletions pages/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,41 +6,50 @@ export interface ElementProps {
headbold: string;
headtext: string;
headbottom: string;
left: boolean;
}

export function Element({
headtop,
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>
);
}

Expand Down
11 changes: 6 additions & 5 deletions styles/main.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
Expand Down

0 comments on commit a2e4867

Please sign in to comment.