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
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
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
58 changes: 58 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,58 @@
<!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>
<div class="newspaper-layout">
<div class="title">The Daily Local News</div>

<div 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>
</div>
<div 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>
</div>

<div class="small-article2">
<h3>Health: Tips for a Balanced Diet</h3>
<p>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>
</div>

<div 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>
</div>
<div 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>
</div>

<div class="cover-image">
<img src="https://cdn.freecodecamp.org/curriculum/labs/alps.jpg" alt="Cover Image">
</div>

</div>
</body>

</html>
83 changes: 83 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,83 @@
body {
font-family: 'Georgia', 'Times New Roman', Times, serif;
padding: 0;
margin: 0;
background-color: #f0f0f0;
}

.newspaper-layout {
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;
width: 90%;
background-color: #fff;
padding: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
text-align: justify;
}

.title {
grid-area: title;
background-color: #1B1B32;
color: white;
padding: 15px;
text-align: center;
font-size: 2.5rem;
line-height: 1.3;
}

.feature-article {
grid-area: feature-article;
background-color: #f9f9f9;
padding: 15px;
font-size: 1rem;
}

.secondary-article {
grid-area: secondary-article;
background-color: #f9f9f9;
padding: 15px;
font-size: 1rem;
}

.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;
}

.cover-image {
grid-area: cover-image;
display: flex;
justify-content: center;
align-items: center;
background-color: #ddd;
padding: 15px;
}

.cover-image img {
max-width: 100%;
height: auto;
border-radius: 5px;
}
30 changes: 30 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,30 @@
**User Stories:**

1. Your page should contain a `div` with the class `newspaper-layout`.

2. The `.newspaper-layout` should include a `div` for the title with the class `title` to display the newspaper's name.

3. The `.newspaper-layout` should include a `div` with the class `feature-article` for the main news article.

4. There should be three smaller articles, each contained in a `div` with classes `small-article1`, `small-article2`, and `small-article3`.

5. Each of the smaller articles should include an `h3` element for the article title and a `p` element for the article content.

6. The `.newspaper-layout` should include a `div` with the class `secondary-article` for an additional news section.

7. The `.newspaper-layout` should include a `div` with the class `cover-image` to display an image that represents the newspaper's content.

8. Your layout should use CSS Grid with a `grid-template-areas` property to define the arrangement of sections:

- The `.title` 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.

9. The `.newspaper-layout` should have a `grid-template-columns` property that divides the space into three equal columns.

10. 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.

11. Add a gap between grid items and set the width of `.newspaper-layout` to 90% to take up most of the viewport width.

12. You should ensure that the image inside the `.cover-image` should fit within the designated space.