Technigo · Heleneabrahamsson · Aug 25, 2024
diff --git a/README.md b/README.md
@@ -1,12 +1,12 @@
 # News Site
 
-Replace this readme with your own information about your project. 
+A news site to practice CSS Grid and Flexbox layout. 
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
 
 ## The problem
 
-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 have tested my way and tried to find solutions along the way, mainly by going back to the course material but also by googling solutions.
 
+If I had more time I would have liked to improve the responsive design and spend more time on the overall appearance of the page.
 ## 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.
+https://66cad036882f3dbda1c736bc--bejewelled-bubblegum-a74c42.netlify.app/
diff --git a/index.html b/index.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tech-Driven Triumphs: How Innovation is Shaping Athlete Performance</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <!-- Header and navigation -->
+    <header class="header">
+        <div class="logo">SPORTSTECH</div>
+        <nav class="nav">
+            <a href="#">Home</a>
+            <a href="#">Articles</a>
+            <a href="#">Sports Tech</a>
+            <a href="#">Contact Us</a>
+        </nav>
+    </header>
+
+    <!-- Hero Section -->
+    <section class="hero">
+        <h1>TECH-DRIVEN TRIUMPHS: HOW INNOVATION IS SHAPING ATHLETE PERFORMANCE</h1>
+    </section>
+
+    <!-- Articles section -->
+    <section class="grid-container">
+        <div class="main-article">
+            <img src="istockphoto-916859188-612x612.jpg" alt="main-article img">
+            <h2>The Role of Technology in Enhancing Athlete Performance: A Game-Changer in Modern Sports</h2>
+            <p class="main-article-text">This article explores how technology is revolutionizing athlete performance
+                across various sports. It
+                covers advancements in wearable tech, data analytics, virtual reality training, and biomechanical
+                analysis. The article provides insights from experts, including coaches and athletes, on how these
+                technologies are being integrated into training regimens to optimize performance, prevent injuries, and
+                extend athletic careers. It also discusses the potential ethical concerns and the future of technology
+                in sports. <br><br><a href="#">Read More</a></p>
+        </div>
+        <div class="related-article">
+            <img src="istockphoto-906511890-612x612.jpg" alt="Related Article 1">
+            <h3>How Wearable Technology is Transforming Athlete Training Routines</h3>
+            <p>This article focuses on the impact of wearable devices, such as smartwatches and fitness trackers, on
+                athlete training. It discusses how these devices provide real-time data on heart rate, sleep patterns,
+                and recovery times, allowing for more personalized and effective training plans.</p>
+            <a href="#">Read More</a>
+        </div>
+        <div class="related-article">
+            <img src="istockphoto-1330061008-612x612.jpg" alt="Related Article 2">
+            <h3>Data Analytics in Sports: The New Frontier of Competitive Edge</h3>
+            <p>This piece delves into how data analytics is being used by coaches and teams to gain a competitive
+                advantage. It highlights how data-driven insights can optimize training, strategy, and in-game
+                decision-making, leading to better performance outcomes.</p>
+            <a href="#">Read More</a>
+        </div>
+        <div class="related-article">
+            <img src="pexels-photo-8097890.webp" alt="Related Article 3">
+            <h3>Virtual Reality Training: Preparing Athletes for Real-World Scenarios</h3>
+            <p>This article explores the use of virtual reality (VR) as a training tool for athletes. It discusses how
+                VR can simulate game situations, allowing athletes to practice and refine their skills in a controlled
+                environment, thereby improving their reaction times and decision-making abilities.</p>
+            <a href="#">Read More</a>
+        </div>
+        <div class="related-article">
+            <img src="istockphoto-1209784765-612x612.jpg" alt="Related Article 4">
+            <h3>Biomechanical Analysis: The Science Behind Perfecting Athletic Performance</h3>
+            <p>This article examines the role of biomechanical analysis in enhancing athletic performance. It explains
+                how detailed studies of movement patterns help in refining techniques, preventing injuries, and
+                improving overall efficiency.</p>
+            <a href="#">Read More</a>
+        </div>
+    </section>
+
+    <!-- Footer-->
+    <footer>
+        <div>
+            <h4>FOLLOW US</h4>
+            <a class="footer-link" href="#">Facebook</a>
+            <a class="footer-link" href="#">Twitter</a>
+            <a class="footer-link" href="#">Instagram</a>
+        </div>
+    </footer>
+</body>
+
+</html>
diff --git a/istockphoto-1209784765-612x612.jpg b/istockphoto-1209784765-612x612.jpg
diff --git a/istockphoto-1330061008-612x612.jpg b/istockphoto-1330061008-612x612.jpg
diff --git a/istockphoto-906511890-612x612.jpg b/istockphoto-906511890-612x612.jpg
diff --git a/istockphoto-916859188-612x612.jpg b/istockphoto-916859188-612x612.jpg
diff --git a/pexels-photo-8097890.webp b/pexels-photo-8097890.webp
diff --git a/styles.css b/styles.css
@@ -0,0 +1,226 @@
+body {
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    background-color: #fffaf0;
+
+}
+
+a {
+    color: black;
+}
+
+
+/* Header */
+.header {
+    background-color: #fffaf0;
+    color: #052f4c;
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    text-align: center;
+}
+
+.logo {
+    font-size: 24px;
+    font-family: garamond;
+}
+
+.nav a {
+    margin-left: 20px;
+    color: #052f4c;
+    font-family: sans-serif;
+
+}
+
+/* Hero section */
+.hero {
+    margin: 20px;
+    padding: 20px;
+    font-size: 35px;
+    font-family: 'Playfair Display';
+    color: #052f4c;
+    text-align: center;
+}
+
+
+/* Articles seection  */
+.grid-container {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+    padding: 20px;
+}
+
+/* Main article*/
+.main-article {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    grid-template-rows: auto auto;
+    background: #fffaf0;
+    padding: 20px;
+    border-radius: 8px;
+    gap: 20px;
+    grid-column: span 4;
+    margin: 0 auto;
+}
+
+.main-article h2 {
+    grid-column: 2 / 3;
+    grid-row: 1;
+    margin: 0 0 10px 0;
+    font-size: 24px;
+}
+
+.main-article img {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+    grid-column: 1 / 2;
+    grid-row: 1 / span 2;
+}
+
+.main-article-text {
+    grid-column: 2 / 3;
+    grid-row: 2;
+}
+
+/* Related articles */
+.related-article {
+    display: grid;
+    grid-template-rows: 1fr;
+    background: #D3D3D3;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+}
+
+.related-article img {
+    border-radius: 8px;
+    margin-bottom: 10px;
+    max-width: 100%;
+    height: auto;
+    display: block;
+    grid-row: 1;
+}
+
+.related-article h3 {
+    margin: 10px 0;
+    grid-row: 2;
+}
+
+.related-article p {
+    grid-row: 3;
+}
+
+/* Footer */
+footer {
+    background-color: #052f4c;
+    color: #fff;
+    display: flex;
+    padding: 30px;
+    justify-content: center;
+    text-align: center;
+    margin-top: 10px;
+    font-family: sans-serif;
+    font-size: large;
+}
+
+.footer-link {
+    color: white;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/* Responsive design */
+
+/* Tablets */
+@media (max-width: 1024px) {
+    .header {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .grid-container {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .main-article {
+        grid-column: span 2;
+    }
+
+    .main-article img {
+        height: auto;
+        grid-row: 2/ span 3;
+        grid-column: span 1;
+    }
+
+    .main-article h2 {
+        grid-column: 1 / 4;
+        grid-row: 1;
+        font-size: 24px;
+    }
+}
+
+/* Smartphones */
+@media (max-width: 667px) {
+    .header {
+        text-align: center;
+    }
+
+    .nav a {
+        margin-left: 0;
+        margin-bottom: 10px;
+    }
+
+    .hero h1 {
+        font-size: 24px;
+    }
+
+    .footer {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 20px;
+    }
+
+    .footer-link {
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+        align-items: center;
+    }
+
+    .grid-container {
+        grid-template-columns: 1fr;
+    }
+
+
+    .main-article {
+        grid-column: 1;
+        text-align: center;
+        grid-template-columns: 1fr;
+        grid-template-rows: auto auto auto;
+    }
+
+    .main-article img {
+        grid-column: 1;
+        grid-row: 1;
+        max-width: 100%;
+        height: auto;
+    }
+
+    .main-article h2 {
+        grid-column: 1;
+        grid-row: 2;
+        margin: 10px 0;
+    }
+
+    .main-article-text {
+        grid-column: 1;
+        grid-row: 3;
+    }
+}