HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="header">
<h1>Chelsea's Attack</h1>
<p>Featuring Aubameyang, Sterling, and Joao Felix</p>
</div>
<div class="container">
<div class="player">
<img src="aubameyang.jpg" alt="Aubameyang">
<h2>Pierre-Emerick Aubameyang</h2>
<p>Striker</p>
</div>
<div class="player">
<img src="sterling.jpg" alt="Sterling">
<h2>Raheem Sterling</h2>
<p>Winger</p>
</div>
<div class="player">
<img src="joao-felix.jpg" alt="Joao Felix">
<h2>Joao Felix</h2>
<p>Forward</p>
</div>
</div>
</body>
</html>
CSS
body {
background: linear-gradient(to bottom, blue, black);
font-family: Arial, Helvetica, sans-serif;
color: white;
margin: 0;
padding: 0;
}
.header {
background-color: rgba(0, 0, 0, 0.7);
padding: 20px;
text-align: center;
}
.container {
display: flex;
justify-content: space-around;
align-items: center;
padding: 20px;
}
.player {
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
text-align: center;
border-radius: 10px;
transition: transform 0.3s;
}
.player:hover {
transform: scale(1.1);
}
.player img {
width: 200px;
border-radius: 50%;
margin-bottom: 10px;
}
.player h2 {
font-family: "Courier New", Courier, monospace;
font-size: 24px;
text-transform: uppercase;
}
.player p {
font-family: "Times New Roman", Times, serif;
font-size: 18px;
}
