Technigo · Anna2024WebDev · Aug 22, 2024 · Aug 22, 2024 · Aug 22, 2024 · Aug 23, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+    "liveServer.settings.port": 5503,
+    "CodeGPT.apiKey": "CodeGPT Plus Beta"
+}
diff --git a/README.md b/README.md
@@ -1,12 +1,13 @@
-# News Site
+The News Site Project
 
-Replace this readme with your own information about your project. 
+The project for our second week was to produce a responsive news site by using CSS Flexbox, Grid and media queries. 
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+The planning and problems
 
-## The problem
+I started by sketching on paper and then adding it step by step, first  HTML and then going in to the styling. I used both Flexbox and grid. Flexbox for the main news item and Grid for the other news items. I played around testing different media queries as well as different Flexbox and Grid types. 
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+I think the media queries in combination with using Flexbox and Grid was tricky.  If I had more time I would dig deeper into media queries as well as both Flexbox and Grid and how to combine them all in the best way to make the site even more responsive. 
 
-## View it live
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+See my page here https://thesweetscoop.netlify.app/ 
+
+See the updated accessibility version here https://project-news-site-a11y--thesweetscoop.netlify.app/
diff --git a/code/assets/baking.jpg b/code/assets/baking.jpg
diff --git a/code/assets/cakelogo.png b/code/assets/cakelogo.png
diff --git a/code/assets/cakelogo_favicon.png b/code/assets/cakelogo_favicon.png
diff --git a/code/assets/expensive_cakes.jpg b/code/assets/expensive_cakes.jpg
diff --git a/code/assets/logo.svg b/code/assets/logo.svg
diff --git a/code/assets/princess_cake-removebg.png b/code/assets/princess_cake-removebg.png
diff --git a/code/assets/princess_cake.jpg b/code/assets/princess_cake.jpg
diff --git a/code/assets/robot.jpg b/code/assets/robot.jpg
diff --git a/code/assets/rose.jpg b/code/assets/rose.jpg
diff --git a/code/index.html b/code/index.html
@@ -1,23 +1,110 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <!-- Change the title below -->
-    <title>News Site</title>
-    <link rel="stylesheet" href="./style.css" />
-    <!-- dont forget the meta tag for responsiveness -->
-  </head>
-  <body>
-    <header>
-      <!-- Some kind of logo and navbar -->
-    </header>
-
-    <section class="big-news">
-      <!-- The big news content -->
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <title>The Sweet Scoop</title>
+  <link rel="stylesheet" href="./style.css" />
+  <!--favicon image-->
+  <link rel="icon" type="image.png" href="assets/cakelogo_favicon.png" />
+  <meta name="News page about baking" content="Baking News and trends with images">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+<body>
+
+  <header>
+    <!-- Logotype and heading-->
+    <div>
+      <img src="assets/cakelogo.png"
+        alt="cake logo"><!--Cake icons created by Nur syifa fauziah - Flaticon,https://www.flaticon.com-->
+      <h1>The Sweet Scoop</h1>
+    </div>
+
+    <!-- Navigation bar-->
+
+    <nav>
+      <ul class="nav-list">
+        <li><a href="https://www.barry-callebaut.com/en/manufacturers/trends-insights/top-6-trends-watch-bakery"
+            target="_blank">Trends</a></li>
+        <li><a href="https://www.allrecipes.com/recipes/276/desserts/cakes/" target="_blank">Recepies</a></li>
+        <li><a href="https://www.baking-forums.com/forums/cakes.6/" target="_blank">Forum</a></li>
+        <li><a href="https://www.bakemag.com/magazine_subscriptions" target="_blank">Subscribe</a></li>
+        <li><a href="https://www.tantfondant.se/" target="_blank">Shop</a></li>
+        <li><a href="https://www.bakemag.com/contact-us" target="_blank">Contact us</a></li>
+      </ul>
+    </nav>
+  </header>
+
+
+  <!-- The big news content -->
+  <main>
+    <section>
+      <img src="assets/princess_cake-removebg.png" alt="Princess cake">
+      <div>
+        <h2>The Princess cake</h2>
+        <p>The so called Princess cake has become popular all over the world. The cake is a
+          traditional Swedish layer cake or torte consisting of alternating layers of airy sponge cake,
+          pastry cream, and a thick-domed layer of whipped cream. The cake is covered by a layer of rolled marzipan,
+          giving it a smooth, rounded top. </p>
+        <p>
+          The marzipan overlay is usually green, sprinkled with powdered sugar, and
+          often decorated with a pink marzipan rose. While the original recipe did not contain any fruit, modern
+          versions
+          usually include layers of jam or fresh fruit, usually raspberries.</p>
+        <a href="https://www.tastingtable.com/1371175/classic-swedish-princess-cake-prinsesstarta-recipe">
+          <button>Read more<span class="visually-hidden">about the Princess cake</span></button></a>
+      </div>
     </section>
 
-    <section class="">
-      <!-- The other news  -->
+    <!-- The other news  -->
+    <section>
+      <article>
+        <a
+          href="https://liliscakes.com/basics/decorating-cakes-and-desserts/marzipan-almond-paste/making-almond-paste-marzipan-roses-and-leaves/">
+          <img src="assets/rose.jpg" alt="marsipan rose"><span class="visually-hidden">click enter to read an article
+            about how to create a marsipan rose</span></a>
+        <h3>How to create a marsipan rose</h3>
+        <p>Making almond paste roses and leaves is actually pretty easy.
+          As usual you just need to practise a little and suddenly one day your roses
+          are coming out all bloomin’ lovely!</p>
+      </article>
+
+      <article>
+        <a href="https://businessday.ng/bd-weekender/article/the-most-expensive-cakes-in-the-world/">
+          <img src="assets/expensive_cakes.jpg" alt="expensive cake"><span class="visually-hidden">click enter to read
+            an article about the most expensive cakes in the world</span></a></a>
+        <h3>The most expensive cakes in the world</h3>
+        <p> While most of us are accustomed to regular bakery cakes, there exists a world where cakes become true works
+          of art, crafted with the finest ingredients and adorned with opulent decorations.</p>
+      </article>
+
+      <article>
+        <a href="https://www.independent.co.uk/indy-eats/janes-patisserie-cookbook-mary-berry-b2592412.html"><img
+            src="assets/baking.jpg" alt="baking"><span class="visually-hidden">click enter to read an article about the
+            golden rules of baking</span></a>
+        <h3>The golden rules of baking</h3>
+        <p>Her first book became the fastest-selling baking book of all time, she helped judge the Queen’s Jubilee
+          Platinum Pudding alongside Mary Berry and she’s a Saturday Kitchen regular. Now, Jane Dunn is sharing her
+          secrets.
+        </p>
+      </article>
+
+      <article>
+        <a href="https://www.bakemag.com/articles/19296-robotic-decorating-addresses-bakery-needs">
+          <img src="assets/robot.jpg" alt="robot"><span class="visually-hidden">click enter to read an article about
+            robotic decorating</span></a>
+        <h3>Robotic decorating</h3>
+        <p>Decorating cakes, cupcakes, cookies, and pies are labor-intensive tasks. With the drastic reduction of
+          skilled decorators retiring or not entering the industry, robotic decorating offers the perfect answer for
+          bakeries looking to stay competitive.
+        </p>
+      </article>
     </section>
-  </body>
-</html>
+  </main>
+  <footer>
+    <p>&copy; 2024 The Sweet Scoop Inc</p>
+  </footer>
+</body>
+
+</html>
diff --git a/code/style.css b/code/style.css
@@ -1,4 +1,163 @@
-html {
-  background: #0025ff;
-  color: #fff;
+* {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+
+body {
+  color: #131212;
+  padding: 10px 15px;
+}
+
+/* Logo image */
+header div img {
+  display: block;
+  max-width: 100%;
+  width: 80px;
+  height: auto;
+}
+
+/* Logotype and heading*/
+header div {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+/* Navigation bar */
+
+
+nav ul li {
+  margin-left: 0;
+  margin-top: 10px;
+}
+
+
+.nav-list {
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+  padding: 20px;
+  list-style: none;
+  gap: 1rem;
+  background-color: #7badb1;
+  border-radius: 15px/20px;
+  justify-content: center;
+}
+
+.nav-list li {
+  margin: 0 15px;
+
+}
+
+.nav-list a {
+
+  color: #0c0c0c;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+main section h2 {
+  font-size: 30px;
+  font-weight: bold;
+  color: #0c0c0c;
+  padding-top: 10px;
+  overflow: hidden;
+}
+
+/* Flexbox main news article */
+
+main section:first-of-type {
+
+  display: flex;
+  background-color: #f8fafa;
+  margin: 15px 0;
+  padding: 15px;
+  padding-left: 15px;
+  border-radius: 10px/10px;
+}
+
+main section:first-of-type img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 10px/10px;
+}
+
+main section:first-of-type div {
+  padding-left: 15px;
+}
+
+button {
+  background-color: #7badb1;
+  font-weight: bold;
+  font-size: 18px;
+  color: #0c0c0c;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 10px/10px;
+  cursor: pointer;
+  text-align: center;
+}
+
+.visually-hidden {
+  display: none; 
+}
+
+/* Grid other news articles */
+main section:last-of-type {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+article {
+  padding: 20px;
+  background-color:  #7badb1;
+  border-radius: 10px 10px;
+  margin: 10px 10px 10px 10px;
+  color: #0c0c0c; 
+}
+
+article img {
+  display: block;
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  margin-bottom: 15px;
+  border-radius: 10px 10px;
+}
+
+article a {
+  text-decoration: none;
+  color: #0c0c0c;
+}
+
+
+/* ------------------------------------Media Queries--------------------------------------- */
+
+/* desktop screen */
+@media (max-width: 1200px) {
+  main section:last-of-type {
+    grid-template-columns: repeat(4, 1fr);
+
+  }
+}
+
+/* Tablets and mobiles */
+@media (max-width: 800px) {
+  main section:first-of-type {
+    flex-direction: column;
+  }
+
+  main section:first-of-type div {
+    padding-left: 0;
+  }
+
+  main section:last-of-type {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  main section:last-of-type {
+    grid-template-columns: 1fr;
+  }
 }