CodeYourFuture · chandredewet · Jun 3, 2022 · Jun 3, 2022 · Jun 3, 2022 · Jun 4, 2022
diff --git a/css/style.css b/css/style.css
@@ -6,3 +6,154 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+
+@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Tiro+Gurmukhi&display=swap');
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/*  Webpage Colours */
+:root {
+    --clr-primary: #143668;
+    --clr-secondary: #FD6D6D;
+    --clr-light:#FFF;
+
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    width:100%;
+    height: 100%;
+    font-size: 1.125rem;
+    color: var(--clr-light);
+     background-color: var(--clr-primary);
+     font-family: 'Tiro Gurmukhi', serif;
+}
+
+.header {
+    margin-top: -20px;
+    padding:0;
+    width:100vw;
+    height: 100vh;
+    background-image: url(/images/travel.png);
+    background-size: cover;
+    background-attachment: fixed;
+    background-position: center top;
+}
+
+nav {
+
+    padding: 50px 50px;
+}
+
+nav ul {
+
+    list-style: none;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.alink {
+    text-decoration: none;
+    padding: 0 1em;
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--clr-primary);
+    font-family: 'Libre Baskerville', serif;
+    font-weight: 700;
+}
+
+.titlecontainer {
+    padding: 50px 50px;
+}
+
+h1 {
+    color: var(--clr-secondary);
+    font-size: 70px;
+    width: 25%;
+}
+
+.downarrow {
+    display: block;
+    text-align: center;
+    color: var(--clr-secondary); 
+    padding-bottom: 50px;
+}
+
+.aboutcontainer {
+    width:100vw;
+    height: 800px;
+    background-image: url(/images/molumen-world-map.svg);
+    background-size: cover;
+    background-attachment: fixed;
+    background-position: center top;
+}
+
+.aboutcontainer p {
+    padding: 10px 50px;
+    line-height: 50px;
+}
+
+.aboutcontainer h2 {
+    color: var(--clr-secondary);
+    font-size: 35px;
+    text-align: center;
+    padding-top: 50px;
+}
+
+
+.blogcontainer  {
+    background-color: var(--clr-secondary);
+    /* font-size: 35px;
+    text-align: right;
+    margin-right: 100px; */
+    padding: 50px;   
+    /* z-index: 2; */
+}
+
+.blogcontainer h2 {
+    color: var(--clr-light);
+    font-size: 35px;
+    text-align: right;
+    margin-right: 50px;
+}
+
+article:first-child {
+    color: var(--clr-primary);
+    font-family: 'Libre Baskerville', serif;
+    font-size: 30px;
+    font-weight: 700;
+    background-color: #FFF;
+    border-radius: 5px;
+    padding: 10px;
+}
+
+
+footer {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    /* padding: 50px 10px; */
+    margin-top: -50px;
+    width:100%;
+    height: 200px;
+    background-image: url(/images/foot.png);
+    background-size: cover;
+    background-attachment: fixed;
+    background-position: center top;
+}
+
+footer h2 {
+    color: var(--clr-secondary);
+    font-size: 35px;
+    padding-top: 50px;
+    margin-right: 100px;
+}
+
+.contactdetails {
+
+}
diff --git a/images/foot.png b/images/foot.png
diff --git a/images/heroimage.jpg b/images/heroimage.jpg
diff --git a/images/molumen-world-map.svg b/images/molumen-world-map.svg
diff --git a/images/polygon.png b/images/polygon.png
diff --git a/images/travel.png b/images/travel.png
diff --git a/index.html b/index.html
@@ -12,11 +12,77 @@
       rel="stylesheet"
       type="text/css"
     />
+    <script src="https://kit.fontawesome.com/5077b611f9.js" crossorigin="anonymous"></script>
+  </head>
     <link rel="stylesheet" href="css/style.css" />
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
-  </head>
+    
   <body>
     <!-- Add your HTML markup here -->
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
+    <header class="header">
+      <nav>
+        <ul>
+          <li><a href="#" class="alink">home</a></li>
+          <li><a href="#about" class="alink">about</a></li>
+          <li><a href="#blog" class="alink">blog</a></li>
+          <li><a href="#contact" class="alink">contact</a></li>
+        </ul>
+      </nav>
+      <div class="titlecontainer">
+          <h1>nomadic mentality</h1>
+          <p>Capturing the movement and diverse legacy of mixed race families in Southern Africa.</p>
+        <i class="fa-solid fa-angles-down downarrow"></i>
+        </div>
+    </header>
+
+    <main>
+      <section id="about" class="aboutcontainer">
+        <h2 class="partheader">about</h2>
+        <div class="imgtextcontainer">
+            <!-- <img src="/images/molumen-world-map.svg" alt="world map" clas="aboutimg"> -->
+            <div class="abouttext">
+              <p> At the end of the 19th century, a group of one stream of my ancestors, pioneering mixed (European/Khoi) ancestors settled just beyond the northern border of the Cape Colony, the Orange River. Research done by Martin Legassick, tells us that it was said of them from their white contemporaries, that they had a “trek-geest”, a nomadic mentality. Even their missionary Christiaan Schroder leading their group mentioned his fear that they would sell their properties and trek further North for a freer life. </p> 
+              <p> Whilst the above perceived in a negative manner, the truth is, that for various reasons, in various time periods my family has a legacy of movement, movement for better opportunities, movement away from oppression, movement accross continents, forced movement through slavery. The author’s own movements because of missions and charity have strangely often lead her unknowingly, to the vary areas these ancestors trekked. This blog aims to document the stories, the processes, the daily finds, the timelines and photos and legacies of this profound journey spanning four hundred years and invites you to journey along and acquire a similair trek-geest!
+              </p>
+              <i class="fa-solid fa-angles-down downarrow"></i>
+            </div>
+          </div>
+      </section>
+      <section id="blog" class="blogcontainer">
+         <h2 class="partheader">blog</h2> 
+         <div class="articles">
+            <article>
+              <h3 class="blogheader">June Tips - How to Conduct Family Research</h2>
+              <p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas repellendus reiciendis dolorum eos. Quia, ratione recusandae sapiente quo libero voluptatum asperiores optio accusantium? Consequuntur doloremque harum magnam, similique asperiores placeat.
+              </p>
+          </article>
+          <article>
+            <h3 class="blogheader">May Tips - How to Conduct Family Research</h2>
+              <p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas repellendus reiciendis dolorum eos. Quia, ratione recusandae sapiente quo libero voluptatum asperiores optio accusantium? Consequuntur doloremque harum magnam, similique asperiores placeat.
+              </p>
+          </article>          
+          <article>
+            <h3 class="blogheader">April Tips - How to Conduct Family Research</h2>
+              <p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas repellendus reiciendis dolorum eos. Quia, ratione recusandae sapiente quo libero voluptatum asperiores optio accusantium? Consequuntur doloremque harum magnam, similique asperiores placeat.
+              </p>
+          </article>
+        </div>   
+      </section>
+    </main> 
+    <footer id="contact">
+      <h2 class="partheader">contact</h2>
+      <div class="contactdetails">
+        <p> begin your research journey today:</p>
+          <ul> 
+            <li>email: nomadicmentality@gmail.com</li>
+            <li>youtube: nomadicmentality@gmail.com</li>
+            <li>instagram: nomadicmentality@gmail.com</li>
+          </ul>
+      </div>
+    </footer>
   </body>
 </html>