CodeYourFuture · munozirianni1988 · Jan 26, 2023 · Jan 26, 2023 · Jan 26, 2023 · Jan 26, 2023
diff --git a/Media/KerreraOystersLogo.png b/Media/KerreraOystersLogo.png
diff --git a/Media/icons8-facebook-64.png b/Media/icons8-facebook-64.png
diff --git a/Media/icons8-instagram-64.png b/Media/icons8-instagram-64.png
diff --git a/Media/pexels-elle-hughes-2647939.jpg b/Media/pexels-elle-hughes-2647939.jpg
diff --git a/Media/pexels-rodnae-productions-10375854.jpg b/Media/pexels-rodnae-productions-10375854.jpg
diff --git a/Media/pexels-toon-machiels-11567733.jpg b/Media/pexels-toon-machiels-11567733.jpg
diff --git a/css/style.css b/css/style.css
@@ -6,3 +6,60 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+
+/*General styles*/
+
+:root {
+    --white: #FEFEFE;
+    --paleblue: #A8CDDA;
+    --charcoal: #292929;
+    --skyblue: #2D89B4;
+    --darkblue: #15303D;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Ubuntu', sans-serif;
+    color: var(--charcoal);
+}
+
+a {
+    text-decoration: none;
+}
+
+ul {
+    list-style: none;
+}
+
+/*Header, Navigation*/
+
+.head-section {
+    background-color: var(--white);
+    border-bottom: 1px solid #2D89B4;
+    padding-bottom: 0;
+    display: flex;
+    align-items: center;
+
+}
+
+.navigation {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.logo {
+    max-width: 200px;
+
+}
+
+.link-container {
+    display: flex;
+    padding-right: 2rem;
+}
+
+li {
+    padding-left: 3rem;
+
+}
diff --git a/index.html b/index.html
@@ -1,22 +1,100 @@
 <!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, shrink-to-fit=no" />
+  <title>Isle of Kerrera Oysters</title>
+  <link href="//fonts.googleapis.com/css?family=Roboto:400,500,300" rel="stylesheet" type="text/css" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
+  <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="head-section">
+    <div class="logo-container">
+      <img class="logo" src="Media/KerreraOystersLogo.png" alt="Logo of an oyster farm in the Isle of Kerrera">
+    </div>
+    <nav class="navigation">
+
+      <ul class="nav-links">
+        <div class="link-container">
+          <li><a href="#">Home</a></li>
+          <li><a href="#">Our Story</a></li>
+          <li><a href="#">Gallery</a></li>
+          <li><a href="#">Order</a></li>
+          <li><a href="#">Contact Us</a></li>
+        </div>
+      </ul>
+
+    </nav>
+
+  </header>
+  <main>
+
+    <section class="main-content">
+
+      <article class="content-article">
+        <span class="article-title">Why are Kererra Oysters the best in the world?</span>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et massa consequat nunc malesuada lobortis.
+          Fusce sit amet ornare mi. Maecenas eget tellus id enim dictum ornare non vitae odio. Cras fermentum at massa
+          at lobortis. Sed eget ullamcorper justo. Sed dictum purus tortor, sed sodales purus mollis eu. In at pharetra
+          libero, sed dignissim neque. Aenean leo metus, maximus quis quam bibendum, ornare fermentum orci. In feugiat
+          ornare vestibulum. Quisque congue feugiat mauris dictum pharetra. Fusce purus metus, consequat a maximus vel,
+          ultricies et dolor. Sed eros odio, tempor sed interdum in, mollis ut... <a href="#">Learn More</a></p>
+      </article>
+
+      <article class="content-article">
+        <img src="Media/pexels-toon-machiels-11567733.jpg" alt="Oysters growing on the shore">
+        <span class="article-title">Going eco-friendly on the oyster farming industry</span>
+        <p>Cras cursus lacinia malesuada. Donec sit amet elit varius, dictum leo cursus, consequat ex. Mauris elementum,
+          diam vel tincidunt convallis, enim mi tristique ligula, at tempus lectus ligula semper dui. Proin malesuada
+          felis vel venenatis condimentum. Sed tristique sapien metus, a maximus quam gravida sed. Vivamus eu urna
+          imperdiet, sollicitudin ante id, ornare ipsum. Morbi ligula nibh, ornare sit amet efficitur at, facilisis non
+          magna. Sed sagittis placerat elit ac lacinia...<a href="#">Learn More</a></p>
+      </article>
+
+      <article class="content-article">
+        <img src="Media/pexels-rodnae-productions-10375854.jpg" alt="Platter of oysters">
+        <span class="article-title">Raw or cooked? The 5 best recipes to enjoy your oysters</span>
+        <p>Praesent vel eleifend augue. Maecenas imperdiet luctus massa quis imperdiet. Praesent pharetra sapien
+          ullamcorper justo hendrerit convallis. Nulla hendrerit, turpis ut ornare pretium, tellus nisi laoreet tortor,
+          feugiat aliquet lectus justo eget libero. Integer rutrum tincidunt tellus ac hendrerit. Curabitur eu dui
+          accumsan, varius ipsum in, convallis mauris. Aenean blandit orci eu urna commodo, tristique dignissim nisi
+          pharetra. Sed congue rhoncus bibendum...<a href="#">Learn More</a></p>
+      </article>
+
+
+    </section>
+
+  </main>
+
+  <footer>
+    <section class="footer-content">
+      <span class="social-media">Follow us on Social Media</span>
+      <a href="#"><img src="Media/icons8-facebook-64.png" alt="Facebook"></a>
+      <a href="#"><img src="Media/icons8-instagram-64.png" alt="Instagram"></a>
+    </section>
+
+    <section class="footer-content">
+      <span class="creator-info">This website was made by <a href="https://github.com/munozirianni1988">Irianni
+          Munoz</a></span>
+    </section>
+
+
+
+  </footer>
+
+
+</body>
+
+<!--<a target="_blank" href="https://icons8.com/icon/kQzCK4emnaD2/facebook">Facebook</a> icon by <a target="_blank" href="https://icons8.com">Icons8</a>-->
+<!--<a target="_blank" href="https://icons8.com/icon/RhYNENh5cxlS/instagram">Instagram</a> icon by <a target="_blank" href="https://icons8.com">Icons8</a>-->
+
+</html>