Skip to content

solved lab ironhack news #529

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

solved lab ironhack news #529

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
131 changes: 59 additions & 72 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,80 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ironhack News</title>
<link rel="stylesheet" href="styles/style.css" />
</head>
<body>
<header>
<h1 class="newspaper-name">Ironhack News</h1>
<nav>
<ul class="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Tech</a></li>
<li><a href="#">Sports</a></li>
</ul>
</nav>
</header>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ironhack News</title>
<link rel="stylesheet" href="styles/style.css" />
</head>
<body>

<main>
<article class="main-article">
<div class="image">
<img src="/images/main-article.jpg" alt="Article 1 Image" />
</div>
<div class="content">
<h2>Main Article</h2>
<p>
This is the first article's content. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Morbi ac lacinia nibh, nec faucibus
enim. Nullam quis lorem posuere, hendrerit tellus eget, tincidunt
ipsum. Nam nulla tortor, elementum in elit nec, fermentum dignissim
sapien. Sed a mattis nisi, sit amet dignissim elit. Sed finibus eros
sit amet ipsum scelerisque interdum. Curabitur justo nibh,
</p>
<button class="btn btn-blue">Read more</button>
</div>
<header class="navbar">
<h1 class="brand">Ironhack News</h1>
<nav class="nav">
<ul class="nav-list">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Tech</a></li>
<li><a href="#">Sports</a></li>
</ul>
</nav>
<img class="menu-icon" src="images/menu-icon.png" alt="menu" />
</header>

<main>
<section class="main-article">
<div class="image">
<img src="images/main-article.jpg" alt="Main article" />
</div>
<div class="content">
<h2>Main Article</h2>
<p>This is the first article’s content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac lacus nibh, nec faucibus enim. Nullam quis lorem posuere, hendrerit tellus eget, tincidunt ipsum. Nam luctus tortor, elementum in elit nec, fermentum dignissim sapien.</p>
<a class="btn btn-blue" href="#">Read more</a>
</div>
</section>

<section class="grid">
<article class="card">
<img src="images/article-1.jpg" alt="Article 1" />
<h3>Article 1</h3>
<p>This is the second article content. Lorem ipsum dolor sit amet…</p>
<a class="btn btn-blue" href="#">Read more</a>
</article>

<section class="articles-container">
<article class="article">
<img src="images/article-1.jpg" alt="Article 1 Image" />
<h2>Article 1</h2>
<p>
This is the second article's content. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</p>
<button class="btn btn-blue">Read more</button>
</article>
<article class="card">
<img src="images/article-2.jpg" alt="Article 2" />
<h3>Article 2</h3>
<p>This is the third article content. Lorem ipsum dolor sit amet…</p>
<a class="btn btn-blue" href="#">Read more</a>
</article>

<article class="article">
<img src="images/article-2.jpg" alt="Article 2 Image" />
<h2>Article 2</h2>
<p>
This is the third article's content. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</p>
<button class="btn btn-blue">Read more</button>
</article>
<article class="card">
<img src="images/article-3.jpg" alt="Article 3" />
<h3>Article 3</h3>
<p>This is the fourth article content. Lorem ipsum dolor sit amet…</p>
<a class="btn btn-blue" href="#">Read more</a>
</article>
</section>
</main>

<article class="article">
<img src="images/article-3.jpg" alt="Article 3 Image" />
<h2>Article 3</h2>
<p>
This is the third article's content. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</p>
<button class="btn btn-blue">Read more</button>
</article>
</section>
</main>
<footer class="footer">© Ironhack News</footer>


<!-- DO NOT REMOVE - viewport width label -->
<span class="viewport-dimensions"></span>
<!-- DO NOT REMOVE - A simple JS script used to display the viewport width label -->
<script src="javascript/width-label.js"></script>
</body>
</html>
<div id="vw-badge"></div>
<script>
(function(){var b=document.getElementById('vw-badge');function u(){b.textContent='W: '+window.innerWidth+'px'};window.addEventListener('resize',u);window.addEventListener('DOMContentLoaded',u);u();})();
</script>
</body>
</html>
Loading