I tried to align the text close to the images as shown below in the picture (to give spaces in the middle). As you can see from the picture, The "AVENUE FOR GROWTH" and "NETWORKING OPPORTUNITIES" texts are close to Man's hand and wallet picture respectively. So I need to code a way to shift those texts closer to their respective images. That's more to the left.
Here is the full Html and CSS of the page:
/* img {
-webkit-filter: grayscale(100%) contrast(110%) blur(1px); Chrome, Safari, Opera
/* filter: grayscale(100%); */
.test {
width: 100%;
height: 700px;
background-size: cover;
background-image: url('//ehealth4everyone.com/wp-content/uploads/2019/07/Group-510.jpg');
text-align: center;
}
.clapimg{
max-width:70%;
float:left;
padding:10px;
}
.clapimg2{
max-width:30%;
/* float:right; */
padding:10px;
border-radius:50px;
}
.content{
margin-top:20%;
margin-left:20%;
color:white !important;
text-align:justify;
}
.btn-default{
background-color: #ffffff !important;
color:black;
}
.button{
background-color: #2372B7;
color: white;
display: block;
height: 40px;
line-height: 40px;
text-decoration: none;
width: 100px;
text-align: center;
border-radius: 5px;
}
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: #2372B7;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}
/* Style the collapsible content. Note: hidden by default */
.drop {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #2372B7;
}
.collapsible:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: white;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}<p>[vc_row][vc_column][vc_column_text]</p>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="test">
<div class="row">
<div class="col-md-6">
<div class="content">
<h1 style="color:white; font-weight:bolder; line-height: normal;">HEALTH TECH</h1>
<h2 style="color:white; font-weight:300; line-height: normal;">INTERNSHIP</h2>
<p style="color:white; font-weight:300; font-size: 20px; padding-top:5%;">Seeking to develop technical skillset for innovation<br />in the health sector? Then this internship is for you.</p>
<p><a class="btn btn-default" href="//ehealth4everyone.com/health-tech-form/" target="_blank" rel="noopener noreferrer" style="color:black; font-weight:bold;">APPLY HERE</a></div>
</div>
</div>
</div>
<div class="container" style="padding-top:5%">
<p style="text-align:left; color:black; font-weight:300; font-size: 20px;">
We are looking for individuals who are result-oriented, goal-driven, self-motivated, focused and are seeking to develop their skillset through hard work and commitment.</div>
<div class="container" style="padding-top:5%; padding-bottom:5%;">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Mask-Group-8.jpg" class="clapimg"></div>
<div class="col-md-6">
<h6 style="color: black; font-weight: bold; font-size: 17px;">AVENUE FOR GROWTH</h6>
<p style="text-align:left; color:black; font-weight:300; font-size: 15px;">We are providing the opportunity for personal and career growth through mentorship and coaching.</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Mask-Group-9.jpg" class="clapimg"></div>
<div class="col-md-6">
<h6 style="color: black; font-weight: bold; font-size: 17px;">JOB OPPORTUNITIES</h6>
<p style="text-align:left; color:black; font-weight:300; font-size: 15px;">After the internship, successful interns would be given the opportunity to join our team<br><br /></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 ">
<div class="row">
<div class="col-md-6 col-sm-12">
<img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Mask-Group-10.jpg" class="clapimg"></div>
<div class="col-md-6 col-sm-12">
<h6 style="color: black; font-weight: bold; font-size: 17px; padding-top:5%;">NETWORKING OPPORTUNITIES</h6>
<p style="text-align:left; color:black; font-weight:300; font-size: 15px;">We are providing a platform and the opportunity to work with others in your field and make meaningful connections.</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-md-6">
<img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Mask-Group-11.jpg" class="clapimg"></div>
<div class="col-md-6 col-sm-12">
<h6 style="color: black; font-weight: bold; font-size: 17px; padding-top:5%;">PERFORMANCE-BASED STIPENDS</h6>
<p style="text-align:left; color:black; font-weight:300; font-size: 15px;">Stipends would be given to interns based on task completion and weekly performance.</div>
</div>
</div>
</div>
</div>
<div class="row" style=" background-color:#efefef; padding-top:5%; padding-bottom:5%;">
<div class="container">
<h3 style="color: black; font-weight: bold; font-size: 20px;">AREAS OF SPECIALIZATION</h3>
<div class="row" style="text-align:center;">
<div class="col-md-4">
<div>
<p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-516.jpg" class="clapimg2" style="color: black; font-weight: 400;">PROGRAMMING</div>
</div>
<div class="col-md-4">
<div>
<p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-515.jpg" class="clapimg2">DESIGN</div>
</div>
<div class="col-md-4">
<div>
<p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-514.jpg" class="clapimg2">DEV-OPS</div>
</div>
</div>
<div class="row" style="text-align:center;">
<div class="col-md-4">
<div>
<p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-511.jpg" class="clapimg2">DATA</div>
</div>
<div class="col-md-4">
<div>
<p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-512.jpg" class="clapimg2">PUBLIC HEALTH</div>
</div>
<div class="col-md-4">
<div>
<p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-513.jpg" class="clapimg2">SOFTWARE TESTING</div>
</div>
</div>
</div>
</div>
<div class="row" style="background-color:#ffffff; padding-top:30px; padding-bottom:5%;">
<div class="container">
<div class="row">
<div class="col-md-6">
<h3 style="color: black; font-weight: bold; font-size: 20px;">WHO CAN APPLY</h3>
<p style="color:black; font-weight:300; font-size: 17px;">Absolutely ANYONE interested in learning<br />under any of the areas of specialization listed<br />above. No prior knowledge is required.<br />Just come willing to learn and work hard.</div>
<div class="col-md-6">
<h3 style="color: black; font-weight: bold; font-size: 20px; float: right;">INTERNSHIP REQUIREMENTS</h3>
<ul style="color:black; font-weight:300; font-size: 17px; float: right;">
<li>A Computer (preferably a Laptop)</li>
<li>A working internet connection</li>
<li>The willingness to learn</li>
</ul>
</div>
</div>
<button class="collapsible" style="border-radius:5px;">RULES</button>
<div class="drop">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible" style="border-radius:5px;">FAQ</button>
<div class="drop">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<a href="//ehealth4everyone.com/health-tech-form/" target="_blank" rel="noopener noreferrer" style="margin:auto; text-align:center; display:block; font-weight:bold;" class="button">APPLY HERE</a>
<p>[/vc_column_text][/vc_column][/vc_row]</p>
