- Joined
- Jul 5, 2022
- Messages
- 1
- Reaction score
- 0
I am currently having difficulty trying to contain these images / video as shown as well as making them web responsive. When running my code, my images fill up at least half of the page rather than 1/4 of the page in which I need. The image below is showing what I am currently trying to make. So far I have the first 3 images starting from the left and the video which shows up at the bottom of the page. I'm new to this platform so anything will help!
NOTE: The images shown are images the company has given me to use so if you run my code, you will not be able to see them.
NOTE: The images shown are images the company has given me to use so if you run my code, you will not be able to see them.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assessment</title>
<!-- CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Banner Section -->
<div class="banner">
<div class="content">
<div class="title">Lorem Ipsum</div>
<div class="subTitle">Dolar sit amet aran</div>
<div class="sentence">Rerum quas delectus non ab eveniet nihil, eaque tempora incidunt blanditiis, molestias
sit,
unde id? Tempora eius illo labore officiis quis quae.</div>
</div>
</div>
<!-- Section 2 -->
<div class="section-2">
<div class="container">
<section>
<div>
<img src="./images/COLLAGE_IMAGE_1.jpg" alt="Image #1">
</div>
<div>
<img src="./images/COLLAGE_IMAGE_5.jpg" alt="Image #2">
<img src="./images/COLLAGE_IMAGE_4.jpg" alt="Image #3">
<video width="500" height="250" controls>
Your browser does not support the video tag.
</video>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
CSS:
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
/* Global */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;;
}
/* Banner Section */
.banner {
width: 100vw;
min-height: 55vh;
background: url(./images/HERO\ 1.jpg) no-repeat;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: bottom;
}
.content {
width: 90%;
text-align: center;
}
.content .title {
color: #de041c;
font-size: 65px;
font-weight: 800;
letter-spacing: 2.0px;
text-transform: uppercase;
margin-bottom: -20px;
}
.content .subTitle {
color: #fff;
font-size: 42px;
font-weight: 600;
text-transform: uppercase;
}
.content .sentence {
color: #fff;
font-size: 16px;
margin: 30px 0 0 0;
}
/* Section 2 */
.section-2 {
border-top: 50px solid #de041c;
}
/* Media Queries */
@media only screen and (max-width:320px) {
.container {
flex-direction: column;
grid-template-columns: 1fr;
grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
grid-template-areas:
"banner"
"section-2";
}
}