Hey everyone!
I am brand new to the world of HTML and CSS.
I am currently developing a website that features 5 unique cards:
- The first card contains a single container with an image on the left and a paragraph on the right
- The second card is split into two containers with a paragraph on the left and an image on the right
- The third card is also split into two containers, this time with an image on the left and a paragraph on the right
- The fourth card has a single container with an image on the left, a paragraph in the middle, and another image on the right
- The fifth card features a single container with a centered paragraph
#home {
&-a {
.card {
&-container {
display: flex;
background: $main-color;
box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.3);
width: auto;
height: auto;
margin: 5rem 1rem;
padding: 0.5rem;
.text-wrapper {
width: 150%;
}
&:nth-child(4) {
background: $secondary-color;
}
&-split {
display: flex;
margin: 5rem 1rem;
height: auto;
}
&-text {
background: $secondary-color;
box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.3);
margin-right: 2rem;
width: 300%;
}
&-image {
background: $secondary-color;
box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.3);
padding: 0.5rem;
}
}
}
.image-wrapper {
background: $dark-color;
padding: 3rem;
}
.text-wrapper {
padding: 1rem;
margin: 2rem;
}
}
}
.container {
max-width: $website-width;
margin: auto;
padding: auto;
overflow: hidden;
}
.reverse {
flex-direction: row-reverse;
}<section id="home-a">
<div class="container">
<!-- 1st Card -->
<div class="card-container my-2">
<div class="image-wrapper">
<img src="img/darts.jpg" alt="Darts" />
</div>
<div class="text-wrapper">
<h2>Darts</h2>
<h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam ab
inventore ratione architecto velit labore quae consequatur minus
rem incidunt.
</h3>
</div>
</div>
<!-- 2nd Card - Split -->
<div class="card-container-split my-2">
<div class="card-container-text">
<div class="text-wrapper">
<h2>Unsere Getränkekarte</h2>
<h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam ab
inventore ratione architecto velit labore quae consequatur minus
rem incidunt.
</h3>
</div>
</div>
<div class="card-container-image">
<div class="image-wrapper">
<img src="img/drinks.jpg" alt="Getränke" />
</div>
</div>
</div>
<!-- 3rd Card - Split Reverse -->
<div class="card-container-split my-2 reverse">
<div class="card-container-text">
<div class="text-wrapper">
<h2>Reservierung</h2>
<h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam ab
inventore ratione architecto velit labore quae consequatur minus
rem incidunt.
</h3>
</div>
</div>
<div class="card-container-image">
<div class="image-wrapper">
<img src="img/reserved.jpg" alt="Reservierung" />
</div>
</div>
</div>
<!-- 4th Card Reverse -->
<div class="card-container my-2 reverse">
<div class="image-wrapper">
<img src="img/open.jpg" alt="Öffnungsschild" />
</div>
<div class="text-wrapper">
<h2>Öffnungszeiten</h2>
<h3>
Montag: 11:00 - 23:30 Uhr
</h3>
<h3>
Dienstag: 11:00 - 23:30 Uhr
</h3>
<h3>
Mittwoch: 11:00 - 23:30 Uhr
</h3>
<h3>
Donnerstag: 11:00 - 23:30 Uhr
</h3>
<h3>
Freitag: 11:00 - 23:30 Uhr
</h3>
<h3>
Samstag: 11:00 - 23:30 Uhr
</h3>
<h3>
Sonntag: 11:00 - 23:30 Uhr
</h3>
</div>
</div>
<!-- 5th Card -->
<div class="card-container my-2">
<div class="text-wrapper">
<h2>Covid 19</h2>
<h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam ab
inventore ratione architecto velit labore quae consequatur minus
rem incidunt.
</h3>
</div>
</div>
</div>
</section>Now I am looking to style the background of these cards with alternating $main-color and $secondary-colors. I successfully applied the background color change to the 4th card using nth-child(4), but I am struggling to target the two inner containers of the 3rd card to add margin and change the background color!
Any help would be greatly appreciated! Thank you!