CodeYourFuture · theTrainMan · Nov 30, 2020 · Nov 30, 2020 · Nov 30, 2020 · Dec 1, 2020
diff --git a/README.md b/README.md
@@ -16,9 +16,9 @@ It should include the following elements:
 - A page header with a title and description for the site.
 - An articles section with three articles, each including a title, summary and a link.
 - A page footer containing info about you or the site.
-- Proper use of the semantic HTML tags we discussed.
 - Research the `:first-child` pseudo-class and use it to style the first article so that it stands out from the others.
 - Use this website [Lorem Ipsum](http://www.lipsum.com/) to generate random blocks of contents to fill your website.
+- Proper use of the semantic HTML tags we discussed.
 - **Commit often (with good meaningful commit messages), and Push to Github regularly.**
 - Use the sketch below to guide you towards the layout and content you are trying to achieve. _Please note that this is just a sketch - you can choose the colours, fonts and images that you want to use in the page._
 

diff --git a/assest/pic-nuts-1.jfif b/assest/pic-nuts-1.jfif
diff --git a/assest/pic-nuts-2.jfif b/assest/pic-nuts-2.jfif
diff --git a/assest/pic-nuts-3.jfif b/assest/pic-nuts-3.jfif
diff --git a/assest/pic-nuts-logo-1.jpg b/assest/pic-nuts-logo-1.jpg
diff --git a/assest/pic-nuts-logo.jpg b/assest/pic-nuts-logo.jpg
diff --git a/css/style.css b/css/style.css
@@ -1,8 +1,149 @@
-/**
- * Add your custom styles below
- * 
- * Remember: 
- * - Be organised, use comments and separate your styles into meaningful chunks
- *    for example: General styles, Navigation styles, Hero styles, Footer etc.
- * 
- */
+@import url('https://fonts.googleapis.com/css2?family=Inconsolata&family=Josefin+Sans:wght@500&family=Lato:wght@700&display=swap');
+body {
+    background-color: #fef6e4;
+    padding: 0;
+    margin: 0;
+    line-height: 1.2;
+}
+
+h1,
+h2 {
+    color: #c24914;
+    text-transform: uppercase;
+    font-family: 'Lato', sans-serif;
+}
+
+h1 {
+    color: transparent;
+    background: #c24914;
+    -webkit-background-clip: text;
+    -moz-background-clip: text;
+    background-clip: text;
+    text-shadow: 0px 3px 3px rgba(255, 255, 255, 0.5);
+    font-size: 50px;
+}
+
+h2 {
+    padding-bottom: 20px;
+}
+
+header,
+main,
+footer {
+    box-sizing: border-box;
+    width: 100%;
+}
+
+article {
+    background-color: whitesmoke;
+    border: 1px solid #eeeded;
+    margin: 50px 0;
+}
+
+img,
+video {
+    width: 100%;
+}
+
+i {
+    font-size: 12px;
+}
+
+p {
+    font-family: 'Josefin Sans', sans-serif;
+    padding: 20px;
+}
+
+header {
+    background: #603813;
+    /* fallback for old browsers */
+    background: -webkit-linear-gradient(to bottom, #b29f94, #603813);
+    /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to bottom, #b29f94, #603813);
+    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    -webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
+    box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
+    color: whitesmoke;
+}
+
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 25px auto;
+    width: 60%;
+}
+
+.box {
+    text-align: center;
+    width: 100%;
+}
+
+article:first-child {
+    background-color: #6d3f048c;
+    border: 1px solid #666962;
+    border-radius: 5px;
+    -webkit-box-shadow: 2px 5px 16px 0px #0B325E, 5px 5px 15px 5px rgba(0, 0, 0, 0);
+    box-shadow: 2px 5px 16px 0px #0B325E, 5px 5px 15px 5px rgba(0, 0, 0, 0);
+    color: whitesmoke;
+}
+
+article a {
+    background-color: #6d3f04;
+    cursor: pointer;
+    padding: 10px 50px;
+    margin-bottom: 20px;
+    border: none;
+    color: whitesmoke;
+    font-family: 'Inconsolata', sans-serif;
+    text-decoration: none;
+}
+
+article a:hover {
+    font-size: large;
+}
+
+footer {
+    background: #603813;
+    /* fallback for old browsers */
+    background: -webkit-linear-gradient(to bottom, #b29f94, #603813);
+    /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to bottom, #b29f94, #603813);
+    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    color: whitesmoke;
+    padding: 20px 0;
+}
+
+.social-media {
+    display: flex;
+    align-items: center;
+    padding-top: 20px;
+    justify-content: center;
+}
+
+.social-media i {
+    padding-right: 10px;
+}
+
+
+/************** BOOTSTRAP PAGES **********/
+
+.jumbotron {
+    background-repeat: no-repeat;
+    margin-bottom: 1em;
+}
+
+@media screen and (max-width: 580px) {
+    .container {
+        width: 100%;
+        padding: 0;
+        margin: 0;
+    }
+    article:first-child {
+        border: none;
+        box-shadow: none;
+        border-radius: none;
+    }
+    article {
+        border: none;
+    }
+}
diff --git a/index copy.html b/index copy.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
+    <link rel="stylesheet" href="css/style.css">
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+
+    <title>Hello, world!</title>
+</head>
+
+<body>
+    <div class="container">
+        <div class="row">
+            <div class="col">
+                <div class="jumbotron card card-image" style="background-image: url(https://img.freepik.com/free-psd/nuts-assortment-mock-up-background_23-2148481637.jpg?size=626&ext=jpg);">
+                    <div class="text-white text-center py-5 px-4">
+                        <h1>The Nut Factory</h1>
+                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque, mollitia.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col">
+                <div class="card" style="width: 18rem;">
+                    <img src="./assest/pic-nuts-3.jfif" class="card-img-top" alt="...">
+                    <div class="card-body">
+                        <h5 class="card-title">Why we love Nuts</h5>
+                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                        <a href="#" class="btn btn-primary">Read More</a>
+                    </div>
+                </div>
+            </div>
+            <div class="col">
+                <div class="card" style="width: 18rem;">
+                    <img src="./assest/pic-nuts-1.jfif" class="card-img-top" alt="...">
+                    <div class="card-body">
+                        <h5 class="card-title">We Sell a Variety of Imported and Local Nuts
+                        </h5>
+                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                        <a href="#" class="btn btn-primary">Read More</a>
+                    </div>
+                </div>
+            </div>
+            <div class="col">
+                <div class="card" style="width: 18rem;">
+                    <img src="./assest/pic-nuts-2.jfif" class="card-img-top" alt="...">
+                    <div class="card-body">
+                        <h5 class="card-title">Types of Nuts?</h5>
+                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                        <a href="#" class="btn btn-primary"> Read More</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <!-- Optional JavaScript; choose one of the two! -->
+
+    <!-- Option 1: Bootstrap Bundle with Popper -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
+
+    <!-- Option 2: Separate Popper and Bootstrap JS -->
+    <!--
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
+    -->
+</body>
+
+</html>
diff --git a/index.html b/index.html
@@ -1,22 +1,58 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <title>My Blog</title>
-    <link
-      href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <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 -->
-  </body>
-</html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
+    <link rel="stylesheet" href="/css/style.css">
+    <title>The Nut Cracker</title>
+</head>
+
+<body>
+    <header>
+        <div class="box red">
+            <h1 class="title">The Nut Factory</h1>
+            <p class="title-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat ea adipisci earum perferendis officia ex.</p>
+        </div>
+    </header>
+    <main class="container">
+        <article class="box art1">
+            <h2>Why we Love Nuts</h2>
+            <img src="./assest/pic-nuts-3.jfif" alt="picture of random nuts">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed tempora facere corrupti consectetur ut? Assumenda, maxime dolores. Dolore laborum perspiciatis fugit deleniti laudantium culpa, error, atque magni consectetur nostrum perferendis?
+            </p>
+            <a class="link-rdmore" href="#"><i class="fab fa-readme"> </i> Read more</a>
+        </article>
+
+        <article class="box art2">
+            <h2>We Sell a Variety of Imported and Local Nuts</h2>
+            <img src="./assest/pic-nuts-1.jfif" alt="picture of random nuts">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed tempora facere corrupti consectetur ut? Assumenda, maxime dolores. Dolore laborum perspiciatis fugit deleniti laudantium culpa, error, atque magni consectetur nostrum perferendis?
+            </p>
+            <a class="link-rdmore" href="https://kitchenofyouth.com/tag/pistachios/" target="_blank"><i class="fab fa-readme"> </i> Read more</a>
+        </article>
+
+        <article class="box art3">
+            <h2>Types of Nuts?</h2>
+            <img src="./assest/pic-nuts-2.jfif" alt="">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed tempora facere corrupti consectetur ut? Assumenda, maxime dolores. Dolore laborum perspiciatis fugit deleniti laudantium culpa, error, atque magni consectetur nostrum perferendis?
+            </p>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis cupiditate consequatur, autem in excepturi illo! Molestiae placeat dolor neque error eos? Fugit harum explicabo, quas accusamus ipsa quasi quod cumque?Voluptatibus assumenda
+                exercitationem eligendi consectetur, voluptates eaque ducimus dolores omnis, nostrum, quisquam pariatur facilis sequi facere ipsum corporis veniam suscipit? Eveniet recusandae maiores rerum deserunt quas. Magnam minima officia optio!</p>
+            <a class="link-rdmore" href="https://www.dietdoctor.com/low-carb/keto/nuts" target="_blank"><i class="fab fa-readme"> </i> Read more</a>
+        </article>
+    </main>
+    <footer>
+        <div class="box green"><small>theTrainMan2020</small></div>
+        <div class="social-media">
+            <i class="fab fa-facebook"></i>
+            <i class="fab fa-instagram-square"></i>
+            <i class="fab fa-linkedin"></i>
+            <i class="fab fa-google"></i>
+            <i class="fab fa-cc-paypal"></i>
+        </div>
+    </footer>
+</body>
+
+</html>
diff --git a/package-lock.json b/package-lock.json