Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
Feb 24, 2025
+182 −0
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c617b52
feat: add newspaper layout with CSS Grid and user stories
zairahira Jan 21, 2025
04ffd3a
apply suggestions
zairahira Feb 18, 2025
32d1421
add article elements
zairahira Feb 21, 2025
96296cf
fix article
zairahira Feb 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 61 additions & 0 deletions fullstack-cert/css-projects/newspaper-css-grid-lab/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
89 changes: 89 additions & 0 deletions fullstack-cert/css-projects/newspaper-css-grid-lab/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Binary file added fullstack-cert/css-projects/newspaper-css-grid-lab/travel.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 32 additions & 0 deletions fullstack-cert/css-projects/newspaper-css-grid-lab/userstories.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.