chore: add newspaper layout with CSS Grid and user stories (#676)

* feat: add newspaper layout with CSS Grid and user stories * apply suggestions * add article elements * fix article Co-authored-by: Dario-DC <[email protected]> --------- Co-authored-by: Dario-DC <[email protected]>
freeCodeCamp · Feb 24, 2025 · 88a6221 · 88a6221
1 parent 43048a4
commit 88a6221
Show file tree

Hide file tree

Showing 4 changed files with 182 additions and 0 deletions.
diff --git a/fullstack-cert/css-projects/newspaper-css-grid-lab/index.html b/fullstack-cert/css-projects/newspaper-css-grid-lab/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Newspaper Layout</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <main class="newspaper-layout">
+        <header>
+            <h1 class="title">The Daily Local News</h1>
+        </header>
+
+        <article class="feature-article">
+            <h2>Breaking News: Volcano Eruption Disrupts Tourism</h2>
+            <p>Recently, a volcano erupted in a popular tourist destination. The eruption has caused widespread panic
+                and has disrupted tourism in the area. The volcano has been spewing lava and ash for several days now,
+                and authorities are urging residents and tourists to evacuate the area immediately. The eruption has
+                also caused a number of flights to be cancelled, leaving many tourists stranded. The situation is still
+                developing, and authorities are working to contain the eruption and ensure the safety of everyone in the
+                area.</p>
+        </article>
+
+        <article class="small-article1">
+            <h3>Sports: Local Team Wins Championship</h3>
+            <p>Hockey fans are celebrating today as the local team has won the championship. The team, which has been on
+                a winning streak all season, clinched the title in a thrilling final match. Fans took to the streets to
+                celebrate the victory, waving flags and chanting the team's name.</p>
+        </article>
+
+        <article class="small-article2">
+            <h3>Health: Tips for a Balanced Diet</h3>
+            <p>A diet high in calories, sugar, and unhealthy fats can lead to a variety of health problems, including
+                obesity, diabetes, and heart disease. To maintain a healthy weight and reduce your risk of chronic
+                diseases, it's important to eat a balanced diet that includes a variety of nutrient-rich foods. Here are
+                some tips for eating a balanced diet:</p>
+        </article>
+
+        <article class="small-article3">
+            <h3>Travel: Top 10 Destinations for 2025</h3>
+            <p>Traveling is one of the best ways to experience new cultures, meet new people, and see the world. If
+                you're looking for inspiration for your next trip, here are the top 10 destinations for 2025:</p>
+        </article>
+
+        <article class="secondary-article">
+            <h2>Technology: The Rise of AI</h2>
+            <p>Artificial intelligence (AI) is changing the way we live and work. From self-driving cars to virtual
+                assistants, AI is revolutionizing the world around us. But what exactly is AI, and how does it work? In
+                this article, we'll explore the rise of AI and its impact on society.</p>
+        </article>
+
+        <figure class="cover-image">
+            <img src="./travel.jpg" alt="Cover Image">
+        </figure>
+    </main>
+</body>
+
+</html>
diff --git a/fullstack-cert/css-projects/newspaper-css-grid-lab/styles.css b/fullstack-cert/css-projects/newspaper-css-grid-lab/styles.css
@@ -0,0 +1,89 @@
+body {
+    font-family: 'Georgia', 'Times New Roman', Times, serif;
+    padding: 0;
+    margin: 0;
+    background-color: #f0f0f0;
+}
+
+main {
+    display: grid;
+    grid-template-areas:
+        "title title title"
+        "feature-article feature-article cover-image"
+        "secondary-article secondary-article cover-image"
+        "small-article1 small-article2 small-article3";
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: auto 1fr 1fr auto auto;
+    gap: 15px;
+    background-color: #fff;
+    padding: 15px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+    text-align: justify;
+}
+
+header {
+    grid-area: title;
+    background-color: #1B1B32;
+    color: white;
+    padding: 15px;
+    text-align: center;
+}
+
+header h1 {
+    font-size: 2.5rem;
+    line-height: 1.3;
+    margin: 0;
+}
+
+.feature-article,
+.secondary-article {
+    background-color: #f9f9f9;
+    padding: 15px;
+    font-size: 1rem;
+}
+
+.feature-article {
+    grid-area: feature-article;
+}
+
+.secondary-article {
+    grid-area: secondary-article;
+}
+
+.small-article1,
+.small-article2,
+.small-article3 {
+    background-color: #e9e9e9;
+    padding: 15px;
+    font-size: 0.9rem;
+}
+
+.small-article1 {
+    grid-area: small-article1;
+}
+
+.small-article2 {
+    grid-area: small-article2;
+}
+
+.small-article3 {
+    grid-area: small-article3;
+}
+
+figure.cover-image {
+    grid-area: cover-image;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #ddd;
+    padding: 15px;
+    margin: 0;
+}
+
+.cover-image img {
+    max-width: 100%;
+    height: 350px;
+    width: 350px;
+    border-radius: 5px;
+}
diff --git a/fullstack-cert/css-projects/newspaper-css-grid-lab/travel.jpg b/fullstack-cert/css-projects/newspaper-css-grid-lab/travel.jpg
diff --git a/fullstack-cert/css-projects/newspaper-css-grid-lab/userstories.md b/fullstack-cert/css-projects/newspaper-css-grid-lab/userstories.md
@@ -0,0 +1,32 @@
+**User Stories:**
+
+1. Your page should contain a `main` element with the class `newspaper-layout`.
+
+2. The `.newspaper-layout` should include a `header` containing an `h1` with the class `title` to display the newspaper's name.
+
+3. The `.newspaper-layout` should include an `article` with the class `feature-article` for the main news article.
+
+4. The `.news-article` should include an `h2` element for the article title and a `p` element for the article content.
+
+5. You should add three more `article` elements for smaller articles, with classes `small-article1`, `small-article2`, and `small-article3`.
+
+6. Each of the smaller articles should include an `h3` element for the article title and a `p` element for the article content.
+
+7. The `.newspaper-layout` should include an `article` element with the class `secondary-article` for an additional news section.
+
+8. The `.newspaper-layout` should include a `figure` with the class `cover-image` to display an image that represents the newspaper's content.
+
+9. Your layout should use CSS Grid with a `grid-template-areas` property to define the arrangement of sections:
+
+   - The `header` should span across the top row.
+   - The `.feature-article` should span two columns in the second row, with the `.cover-image` in the third column.
+   - The `.secondary-article` should span two columns in the third row, with the `.cover-image` in the third column.
+   - The three small articles should appear in the fourth row.
+
+10. The `.newspaper-layout` should have a `grid-template-columns` property that divides the space into three equal columns.
+
+11. You should set the `.newspaper-layout`'s `grid-template-rows` property to `auto` for the first row and divide the remaining space into equal parts for the other rows.
+
+12. Add a gap between grid items and set the width of `.newspaper-layout` to `90%` to take up most of the viewport width.
+
+13. Ensure that the image inside the `.cover-image` `figure` fits within the designated space.