Technigo · tildetilde · Jan 29, 2025 · Jan 30, 2025 · Jan 30, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/img/Croquettes.png b/img/Croquettes.png
diff --git a/img/Croquettes2.png b/img/Croquettes2.png
diff --git a/img/egg.png b/img/egg.png
diff --git a/img/egg2.png b/img/egg2.png
diff --git a/img/fries.jpg b/img/fries.jpg
diff --git a/img/mash.jpg b/img/mash.jpg
diff --git a/img/tator.jpg b/img/tator.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Potato Buzzfeed</title>
+  <link rel="stylesheet" href="style.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=Manrope:wght@200..800&display=swap" rel="stylesheet">
+  <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=Bebas+Neue&display=swap" rel="stylesheet">
+</head>
+
+<body>
+
+  <h1>Only a True Potato Lover Will Get Their Perfect Match!</h1>
+  <section>
+
+    <div class="contentContainer">
+      <img src="img/fries.jpg" alt="A picture of sweet potato fries with sweet chilimayo">
+      <h2>Are you trendy, adventurous, and slightly chaotic?</h2>
+      <p>You're the kind of person who dives headfirst into new experiences, thrives in spontaneity, and has a taste for
+        the bold. You don’t just follow trends—you set them. Whether it's trying the latest food craze, booking a
+        last-minute weekend trip, or switching up your style on a whim, you bring energy and excitement wherever you go.
+        <br>
+        <br>Do you want to know more your best potato match?
+      </p>
+      <button><a href="https://www.ontysplate.com/sweet-potato-fries-with-sweet-chili-mayo/" target="_blank"
+          rel="noopener noreferrer">Find out!</a></button>
+    </div>
+
+    </div>
+
+    <div class="contentContainer">
+      <img src="img/mash.jpg" alt="A picture of Mashed Potatoes with Brown Butter & Garlic">
+      <h2>Are you warm, reliable, and everyone’s favorite at the table?</h2>
+      <p>You're the kind of person who makes everyone feel at home, offering comfort, support, and a touch of nostalgia.
+        You’re the steady presence in any group, always bringing warmth and a sense of belonging. Whether it's hosting
+        cozy gatherings, sharing words of encouragement, or simply being there when it matters most, you make life
+        richer for those around you.
+        <br>
+        <br>Do you want to know more your best potato match?
+      </p>
+      <button><a href="https://vikalinka.com/brown-butter-mashed-potatoes/" target="_blank"
+          rel="noopener noreferrer">Find out!</a></button>
+    </div>
+
+    <div class="contentContainer">
+      <img src="img/egg.png" alt="A picture of crispy rösti with a fried egg on top">
+      <h2>Are you European, effortlessly cool, and slightly mysterious?</h2>
+      <p>You have an air of sophistication that turns heads without even trying. Effortlessly stylish and always
+        composed, you bring a certain intrigue to every room you enter. Whether it’s your sharp wit, your refined taste,
+        or the way you always seem to know the best hidden spots in town, there’s something undeniably magnetic about
+        you.
+        <br>
+        <br>Do you want to know more your best potato match?
+      </p>
+      <button><a href="https://www.epicurious.com/recipes/food/views/rosti-with-fried-eggs-51144200" target="_blank"
+          rel="noopener noreferrer">Find
+          out!</a></button>
+
+    </div>
+
+    <div class="contentContainer">
+      <img src="img/tator.jpg" alt="A picture of tater tot nachos">
+      <h2>Are you wild, fun-loving, and full of surprises?</h2>
+      <p>You're the life of the party, always bringing energy, laughter, and a little bit of chaos in the best way. You
+        thrive on spontaneity, turning even the most ordinary moments into unforgettable adventures. Whether it's a
+        last-minute road trip, a dance-off in the kitchen, or a hilarious group chat that never sleeps, you're the one
+        who keeps things exciting.
+        you.
+        <br>
+        <br>Do you want to know more your best potato match?
+      </p>
+      <button><a
+          href="https://www.seriouseats.com/totchos-tater-tots-nachos-cheese-sauce-tomato-salsa-chorizo-pickled-jalapenos-2"
+          target="_blank" rel="noopener noreferrer">Find
+          out!</a></button>
+    </div>
+
+    <div class="contentContainer">
+      <img src="img/Croquettes.png" alt="A picture of potato croquettes with melty chesse center">
+      <h2>Are you fancy on the outside, gooey on the inside?</h2>
+      <p>You’ve got an effortlessly polished exterior, turning heads with your charm and sophistication. But beneath
+        that refined surface lies a warm, melty core—full of heart, depth, and just the right amount of indulgence. You
+        appreciate the finer things in life but never take yourself too seriously, making you the perfect mix of
+        elegance and approachability.
+        <br>
+        <br>Do you want to know more your best potato match?
+      </p>
+      <button><a href="https://thedefineddish.com/twice-baked-potatoes-with-truffle-salt-and-gruyere/" target="_blank"
+          rel="noopener noreferrer">Find
+          out!</a></button>
+
+    </div>
+
+  </section>
+
+  <footer>
+    <p>A potato site made by team fire 1: Tilde, Simon & Ida.</p>
+  </footer>
+
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,77 @@
+body {
+  background-color: #b90000;
+  color: #f6eee3;
+  text-align: center;
+  font-family: "Manrope", serif;
+}
+
+section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.contentContainer {
+  background-color: #5D0F0A;
+  width: 60%;
+  height: 30%;
+  margin: 20px;
+  padding: 30px 50px;
+  border-radius: 15px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+h1 {
+  font-family: "Bebas Neue", serif;
+  font-size: 75px;
+  margin: 15% 20%;
+  letter-spacing: 3px;
+}
+
+p {
+  max-width: 76%;
+  line-height: 27px;
+}
+
+a {
+  text-decoration: none;
+  color: #5D0F0A;
+  transition: ease 0.5s;
+}
+
+a:hover {
+  color: #be2626;
+  font-size: 105%;
+}
+
+button {
+  border: none;
+  background-color: #f6eee3;
+  font-size: 30px;
+  margin: 20px;
+  padding: 10px 20px;
+  border-radius: 15px;
+  transition: ease 0.5s;
+}
+
+button:hover {
+  background-color: white;
+}
+
+img {
+  width: 10vw;
+  /* Detta betyder att den skalar bilden till 10% av sidans brädd */
+  height: 10vw;
+  max-width: 150px;
+  max-height: 150px;
+  /* Detta betyder att den inte streachas oönskat */
+  object-fit: cover;
+  border-radius: 50%;
+  margin: 20px 0px 10px 0px;
+}
+
+footer {
+  margin-top: 120px;
+}