I am new to the world of coding, having just embarked on this journey less than a week ago. Following a tutorial by a developer on YouTube, I tried to add my own twist to the project in order to differentiate it from the original. However, I've hit a roadblock.
My goal was to assign a unique background image to each flex box within the "Services" section. Despite my efforts to create a separate div for the image, similar to the .icon and the <p>, I encountered issues with the positioning and visibility of the images within the boxes.
Upon inspecting the code, I realized that all the boxes shared the same background image due to the main container setting the background for all elements.
I'm struggling to find a solution that allows me to have distinct background images for each box.
Your assistance would be greatly appreciated!
/* Services Section */
#Services {
background-color: #f4f6ff;
}
#Services .services {
flex-direction: column;
text-align: center;
max-width: 1500px;
margin: 0 auto;
padding: 50px 0;
background-color: #f4f6ff;
}
.header-title {
font-size: 3rem;
font-weight: lighter;
color: black;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1rem;
text-align: center;
}
#Services .section-header p {
font-size: 1rem;
font-weight: lighter;
margin-top: 2px;
margin-bottom: 20px;
font-family: sans-serif;
}
#Services .services-cards {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
#Services .services-content {
flex-basis: 90%;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
padding: 25px;
border-radius: 10px;
background-image: url(./img/customer-support.jpg);
background-size: cover;
margin: 10px 5%;
position: relative;
z-index: 1;
overflow: hidden;
}
#Services .services-content::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-image: linear-gradient(60deg, #0a2647 0%, #584a2a 100%);
opacity: 80%;
z-index: -1;
}
#Services .services-cards .icon {
height: 90px;
width: 50px;
margin-bottom: 0;
}
`enter code here` #Services .services-content h2 {
font-size: 1.2rem;
color: gold;
text-transform: uppercase;
}<! -- Services Section -->
<section id="Services">
<div class="services container">
<div class="section-header">
<h1 class="header-title">Services</h1>
<p>I have worked with successful businesses over the years, I have helped companies activate their audience through social media marketing, facilitated the on-boarding process for their new customers.<br><br>I also managed projects for 20 plus brand
ambassadors and led company team members so they can produce quality and engaging content delivered to our social media channels efficiently.</p>
</div>
<div class="services-cards">
<div class="services-content">
<div class="icon"><img src="" /></div>
<h2>Customer Support</h2>
<p>I have worked as a BPO Rep for 3 years. I have the fundamental knowledge in handling customer calls, emails and provide the adequate support, so that you can focus on the important aspect of your business.</p>
</div>
</div>
<div class="services-cards">
<div class="services-content">
<div class="icon"><img src="" /></div>
<h2>Administrative Assistant</h2>
<p>Data entry, Research, Invoicing, Calendar Management, CRM maintenance, Appointment Setting, Recruitment, and more. I will take charge of the routine back-office tasks and you can keep focus on what matters for your brand.</p>
</div>
</div>
<div class="services-cards">
<div class="services-content">
<div class="icon"><img src="" /></div>
<h2>Porject Management</h2>
<p>Launching a new product? Do you need help in Content creation and Scheduling? Or are you looking for a point-person to lead your marketing team and start pulling-in audience for your brand? I have 5 years of Social Media management experience,
supported brands with different products catering to different demographics. I can develop a distinct strategy that will work for you. </p>
</div>
</div>
<div class="services-cards">
<div class="services-content">
<div class="icon"><img src="" /></div>
<h2>Front-End Web Development</h2>
<p>I can hand-code HTML, CSS with some knowledge in CSS Flexbox, Bootstrap, and Javascript.</p>
</div>
</div>
</div>
</section>