index.html - here is the index.html file code containing all the necessary html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Streaming</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<nav>
<div class="logo"><i class="fas fa-play"></i></div>
<div class="stream">
<ul>
<li><a href="#">View All</a></li>
<li>
<h1>Net Steam</h1>
</li>
<li><a href="#">Subscribe</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col">
<div class="img-container"><img src="./img-1.jpg" alt="img-1"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>Take Mantrix</h1>
<p>Take the Yellow Pill to get into the zone</p>
<a href="#">Watch Now</a>
</div>
</div>
<div class="col">
<div class="img-container"><img src="./img-2.jpg" alt="img-2"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>2 Fast 2 Soon</h1>
<p>Take the Yellow Pill to get into the zone</p>
<a href="#">Watch Now</a>
</div>
</div>
<div class="col">
<div class="img-container"><img src="./img-3.jpg" alt="img-3"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>Take Outback</h1>
<p>Take the Yellow Pill to get into the zone</p>
<a href="#">Watch Now</a>
</div>
</div>
</div>
</div>
</body>
</html>
style.css - following is the CSS code from style.css that includes all the necessary styling
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
margin: 0;
background-color : #000;
color : #fff;
padding : 1rem 4rem;
}
nav {
display : flex;
flex-direction : column;
align-items: center;
border-bottom : 2px solid #fff;
margin : 0;
padding : 0;
}
.stream{
max-width : 1000px;
width : 100%;
}
.fa-play {
font-size : 3rem;
}
ul {
list-style-type: none;
display : flex;
justify-content: space-around;
align-items: center;
margin : 0;
padding : 0;
}
li h1{
font-size : 3rem;
}
a{
color : black;
text-decoration: none;
padding : 1rem 2rem;
background-color : white;
}
.row {
display : flex;
}
.col {
padding : 1rem;
flex : 1;
}
.col img{
max-width : 100%;
}
.img-container {
position : relative;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text {
display : flex;
flex-direction : column;
align-items: center;
}
I am trying to center the play icon on all three images using CSS but currently I can only achieve it for the center image. How can I center the play icon on all three images simultaneously? I intend to position the play font-awesome icon in the center of each image.