Football news template web site home page html

Here is a basic template for a football news website's home page in HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Football News</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a rel="nofollow" target="_blank" href="#">Home</a></li>
                <li><a rel="nofollow" target="_blank" href="#">News</a></li>
                <li><a rel="nofollow" target="_blank" href="#">Fixtures</a></li>
                <li><a rel="nofollow" target="_blank" href="#">Results</a></li>
                <li><a rel="nofollow" target="_blank" href="#">Teams</a></li>
            </ul>
        </nav>
        <h1>Football News</h1>
    </header>
    <main>
        <section class="hero">
            <h2>Latest News</h2>
            <p>Stay up to date with the latest football news from around the world.</p>
            <a rel="nofollow" target="_blank" href="#" class="btn">Read More</a>
        </section>
        <section class="latest-news">
            <h2>Latest News</h2>
            <ul>
                <li>
                    <h3>Manchester City Win Premier League Title</h3>
                    <p>Manchester City have won the Premier League title after a thrilling 2-1 win over Brighton.</p>
                    <a rel="nofollow" target="_blank" href="#" class="btn">Read More</a>
                </li>
                <li>
                    <h3>Barcelona Sack Manager Ernesto Valverde</h3>
                    <p>Barcelona have sacked manager Ernesto Valverde after a disappointing start to the season.</p>
                    <a rel="nofollow" target="_blank" href="#" class="btn">Read More</a>
                </li>
                <li>
                    <h3>Real Madrid Sign Eden Hazard from Chelsea</h3>
                    <p>Real Madrid have signed Eden Hazard from Chelsea in a deal worth £89 million.</p>
                    <a rel="nofollow" target="_blank" href="#" class="btn">Read More</a>
                </li>
            </ul>
        </section>
        <section class="featured-stories">
            <h2>Featured Stories</h2>
            <ul>
                <li>
                    <h3>The Rise of Liverpool: How the Reds Became Champions</h3>
                    <p>A look at the factors that contributed to Liverpool's success in the 2019-2020 season.</p>
                    <a rel="nofollow" target="_blank" href="#" class="btn">Read More</a>
                </li>
                <li>
                    <h3>The Impact of VAR on Football</h3>
                    <p>A discussion on the effects of Video Assistant Referee (VAR) on the game.</p>
                    <a rel="nofollow" target="_blank" href="#" class="btn">Read More</a>
                </li>
            </ul>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 Football News</p>
    </footer>
</body>
</html>

And here is an example of what the CSS file (styles.css) could look like:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: #fff;
  padding: 1em;
  text-align: center;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

nav li {
  margin-right: 20px;
}

nav a {
  color: #fff;
  text-decoration: none;
}

nav a:hover {
  color: #ccc;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2em;
}

.hero {
  background-image: url('hero-image.jpg');
  background-size: cover;
  background-position: center;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.hero h2 {
  font-size: 36px;
  margin-bottom: 10px;
}

.hero p {
  font-size: 18px;
  margin-bottom: 20px;
}

.hero.btn {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
}

.hero.btn:hover {
  background-color: #444;
}

.latest-news {
  padding: 2em;
}

.latest-news h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.latest-news ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.latest-news li {
  margin-bottom: 20px;
}

.latest-news h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.latest-news p {
  font-size: 16px;
  margin-bottom: 20px;
}

.latest-news.btn {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
}

.latest-news.btn:hover {
  background-color: #444;
}

.featured-stories {
  padding: 2em;
}

.featured-stories h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.featured-stories ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.featured-stories li {
  margin-bottom: 20px;
}

.featured-stories h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.featured-stories p {
  font-size: 16px;
  margin-bottom: 20px;
}

.featured-stories.btn {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
}

.featured-stories.btn:hover {
  background-color: #444;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 1em;
  text-align: center;
  clear: both;
}

This is just a basic template and you can customize it as per your requirement. You can add more sections, styles and functionality as needed.

NewsBreakers

Football news template web site home page html