Technigo · MalLunBar · Jan 29, 2025 · Jan 30, 2025 · Jan 30, 2025 · Jan 30, 2025
diff --git a/Images/DNA.png b/Images/DNA.png
diff --git a/Images/Dad-Wasnt-Really-Dad.jpg b/Images/Dad-Wasnt-Really-Dad.jpg
diff --git a/Images/Familys-Dark-Past.jpg b/Images/Familys-Dark-Past.jpg
diff --git a/Images/Instagram.png b/Images/Instagram.png
diff --git a/Images/Married-to-a-Cousin.jpg b/Images/Married-to-a-Cousin.jpg
diff --git a/Images/Secret-Sibling.jpg b/Images/Secret-Sibling.jpg
diff --git a/Images/Secret-Sibling2.jpg b/Images/Secret-Sibling2.jpg
diff --git a/Images/Switched-at-Birth.jpg b/Images/Switched-at-Birth.jpg
diff --git a/README.md b/README.md
@@ -1 +1,2 @@
 # Intro days project
+
diff --git a/index.html b/index.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>DNA Article</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  <div class="header">
+    <nav>
+      <a href="index.html">Home</a>
+      <a href="index.html">About</a>
+      <a href="index.html">Contact</a>
+    </nav>
+    <h1> Here are five shocking DNA test results that people have discovered! </h1>
+  </div>
+
+  <main>
+    <!--content1-->
+    <div class="content">
+      <!--image1-->
+      <div class="images">
+        <img src="Images/Switched-at-Birth.jpg" alt="">
+      </div>
+
+      <!--text1-->
+      <div class="text">
+        <h2>Switched at Birth </h2>
+        <p>A man took a DNA test for fun and found out he wasn't biologically related to his parents.
+          After investigating, he learned he was accidentally switched at birth in the hospital.</p>
+      </div>
+
+    </div>
+
+    <!--content2-->
+    <div class="content">
+      <!--image2-->
+      <div class="images">
+        <img src="Images/Secret-Sibling2.jpg" alt="">
+      </div>
+
+      <!--text2-->
+      <div class="text">
+        <h2>Secret Sibling</h2>
+        <p>A woman took a DNA test and found a half-brother she never knew existed.
+          Turns out, her father had an affair and kept it a secret for decades.</p>
+      </div>
+
+    </div>
+
+    <!--content3-->
+    <div class="content">
+      <!--image3-->
+      <div class="images">
+        <img src="Images/Familys-Dark-Past.jpg" alt="">
+      </div>
+      <!--text3-->
+      <div class="text">
+        <h2>Family's Dark Past</h2>
+        <p>A woman researching her family tree found out her grandfather wasn't who they thought—he had changed his name
+          to hide his criminal past, which involved fleeing another country.</p>
+      </div>
+
+    </div>
+
+    <!-- content 4 -->
+    <div class="content">
+      <!-- image 4 -->
+      <div class="images">
+        <img src="Images/Married-to-a-Cousin.jpg" alt="">
+      </div>
+
+      <!-- text 4 -->
+      <div class="text">
+        <h2>Married to a Cousin</h2>
+        <p>A couple took DNA tests out of curiosity and were horrified to discover they were actually cousins. They had
+          been married for years and had no idea they were related.</p>
+      </div>
+
+    </div>
+    <!-- content 5 -->
+    <div class="content">
+      <!-- image 5 -->
+      <div class="images">
+        <img src="Images/Dad-Wasnt-Really-Dad.jpg" alt="">
+      </div>
+
+      <!-- text 5 -->
+      <div class="text">
+        <h2>Dad Wasn't Really Dad</h2>
+        <p>A man in his 40s gifted his whole family DNA test kits for Christmas.
+          The results revealed that his father wasn't his biological dad, his mother had a brief relationship with
+          someone else.
+        </p>
+      </div>
+
+    </div>
+
+  </main>
+
+  <footer>
+    <p> © 2021 DNA Article</p>
+    <a href="https://www.instagram.com/"> <img src="Images/Instagram.png" alt="" id="insta"> </a>
+    <p>Test your DNA <a href="https://www.23andme.com/en-eu/"><strong><i>here</i></strong></a></p>
+
+  </footer>
+</body>
+<!-- made with care by Tiago, Malin, Selin, Alex at Technigo2025 -->
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,93 @@
+body {
+  background-image: url("Images/DNA.png");
+  background-attachment: fixed;
+  background-size: cover;
+  margin: 0;
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+
+  /* woop woop!! :D */
+}
+
+.header {
+  background-color: rgba(128, 207, 247, 0.5);
+
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 2000px;
+}
+
+nav {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  justify-content: space-around;
+  padding: 10px;
+}
+
+a {
+  text-decoration: none;
+  color: black;
+}
+
+a:hover {
+  background-color: rgba(84, 167, 234, 0.7);
+}
+
+nav a {
+  font-family: 'Times New Roman', Times, serif;
+  font-size: 25px;
+}
+
+h1 {
+  text-align: center;
+  padding: 10px;
+}
+
+p {
+  font-size: 20px;
+}
+
+.content {
+  background-color: rgb(160, 160, 160, 0.3);
+  padding: 20px;
+  width: 800px;
+  margin: 20px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  box-shadow: 3px 3px rgb(160, 160, 160, 0.6);
+
+}
+
+.content img {
+  width: 100%;
+  border-radius: 5px;
+
+}
+
+.images {
+  width: 250px;
+}
+
+.text {
+  padding: 5px;
+
+}
+
+footer {
+  background-color: rgba(105, 188, 229, 0.553);
+  font-family: 'Times New Roman', Times, serif;
+  display: flex;
+  align-items: center;
+  padding: 5px;
+  gap: 20px;
+}
+
+#insta {
+  width: 50px;
+}