Hola bunas tardes esto intentando pasar este diseño a html con Bootstrap pero no puedo colocar las imágenes sobre mis divs, tiene alguna idea de como hacer un diseño parecido a mi diseño en photoshop. Hasta el momento esto es lo que tengo.
Diseño esperado
Lo que tengo
Mi Código
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-MX" xml:lang="es-MX">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030">
<title>Seguridad | Abacom</title>
<meta name="description" content="Seguridad">
<link href="http://localhost/Abacom/images/icon.png" type="image/x-icon" rel="shortcut icon" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="http://localhost/Abacom/assets/jquery/jquery.min.js"></script>
<link rel="stylesheet" href="http://localhost/Abacom/assets/bootstrap/css/bootstrap.min.css" >
<link rel="stylesheet" href="http://localhost/Abacom/assets/fontawesome/css/font-awesome.min.css" >
<link rel="stylesheet" href="http://localhost/Abacom/css/stylesheet.css" >
<link rel="stylesheet" href="http://localhost/Abacom/css/animate.css" >
<link rel="stylesheet" href="http://localhost/Abacom/css/rateYo.css">
<link rel="stylesheet" href="http://localhost/Abacom/assets/menu/menu.min.css">
<link rel="stylesheet" href="http://localhost/Abacom/assets/landing/css/style.css">
<link rel="stylesheet" href="http://localhost/Abacom/assets/css/style.css">
<link rel="stylesheet" href="http://localhost/Abacom/assets/css/corporate.css">
<link rel="stylesheet" href="http://localhost/Abacom/assets/aos/aos.css">
<script src="https://www.google.com/recaptcha/api.js?render=6LcKW5MUAAAAAFDEbbeidit-Mp68IWpXBXuHtmuZ"></script>
<style>
textarea:required:focus {
border-color: red;
}
input:required {
border-color: red;
}
</style>
<style type="text/css">
.bg-overlay {
background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("https://unsplash.imgix.net/photo-1416339442236-8ceb164046f8?q=75&fm=jpg&s=8eb83df8a744544977722717b1ea4d09");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
color: #fff;
/*height: 450px;*/
padding-top: 50px;
width: 100%
}
</style>
<style type="text/css">
.sangria{
list-style-type: disc;
list-style-position: inside;
text-indent: -1em;
padding-left: 1em;
}
.descripcion {
padding-top: 6%!important;
/*padding-bottom: 20px;*/
background-color: #fff;
}
</style>
</head>
<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
<div class="loader">
<div class="loader__figure"></div>
<p class="loader__label">Abacom</p>
</div>
</div>
<!-- Cabeza -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top navbar-toggleable-md" id="mainNav">
<div class="col-md-2 col-sm-4 col-6 offset-md-5">
<a class="navbar-brand" href="/Abacom" style="padding: 0px">
<img alt="Abacom Telecomunicaciones" src="../assets/images/logo/logo_blue.png" style="width: 200px; height: 30%">
</img>
</a>
</div>
</nav>
<!-- ./Cabeza -->
<!-- Cuerpo -->
<div class="">
<div class="descripcion col-sm-12" style="padding-bottom: 0px">
<!-- ============================================================== -->
<!-- Container fluid -->
<!-- ============================================================== -->
<div class="row">
<div class="container-fluid">
<!-- ============================================================== -->
<!-- Static Slider 4 -->
<!-- ============================================================== -->
<div class="static-slider4">
<div class="container" style="background-image: url(http://localhost/Abacom/assets/images/landing/l8/Fondo.png);">
<!-- Row -->
<div class="row">
<div class="col-md-5 img-anim" data-aos="fade-up" data-aos-duration="3200">
<img alt="wrapkit" class="img-fluid" src="http://localhost/Abacom/assets/images/landing/l8/Globo.png" style="height: 50%; width: auto;"/>
</div>
<!-- Column -->
<div class="col-md-6 ml-auto align-self-center" data-aos-duration="1200">
<img alt="wrapkit" class="img-fluid" src="http://localhost/Abacom/assets/images/landing/l8/Why.png" style="height: 500px; width: 500px"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Column -->
<!-- ============================================================== -->
<!-- End Static Slider 4 -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Feature 2 -->
<!-- ============================================================== -->
<div class="spacer feature5" style="color: #000">
<div class="container">
<!-- Row -->
<div class="row">
<div class="col-md-8 text-center">
<h2 class="title font-medium">
Porque hoy comenzó a perder dinero . .</br>
Le secuestraron su información.
</h2>
<!-- <h6>
¿Sabes cuanto le cuesta a tú empresa una interrupción de internet?
</h6> -->
</div>
</div>
<!-- Row -->
</div>
</div>
<div class="feature5" style="background-color: #2581c4; color: #fff">
<div class="container">
<!-- Row -->
<div class="row">
<div class="col-md-8 text-center">
<h2 class="title font-medium">
Y tú, ¿Que estás haciendo para</br>
proteger los datos de tú compañia?
</h2>
<!-- <h6>
¿Sabes cuanto le cuesta a tú empresa una interrupción de internet?
</h6> -->
</div>
</div>
<!-- Row -->
</div>
</div>
<div class="feature5" style="color: #000">
<div class="container">
<!-- Row -->
<div class="row">
<div class="col-md-8 text-center">
<h2 class="title font-medium">
Los ladrones evolucionan y ya no necesitan
antifaces, ni se conforman con carteras, los ladrones de estos tiempos secuestran tu información y piden un rescate por ella.
</h2>
<!-- <h6>
¿Sabes cuanto le cuesta a tú empresa una interrupción de internet?
</h6> -->
</div>
</div>
<!-- Row -->
</div>
</div>
<!-- ============================================================== -->
<!-- End Feature 2 -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Feature 39 -->
<!-- ============================================================== -->
<!-- Projects Section -->
<section class="projects-section">
<div class="container">
<!-- Project One Row -->
<div class="row justify-content-center no-gutters mb-5 mb-lg-0">
<div class="col-md-6 col-xs-12 p-5" style="border: 2px solid black;">
<div class="container" style="color: #000;">
<!-- <div class="row"> -->
<!-- <div class="col-md-10 col-xs-12 col-md-offset-2 col-xs-offset-0"> -->
<h5>
Puede ayudarte a minimizar el riesgo de tú operación a través de la seguridad administrada.
</h5>
<!-- <h5>
Nos especializamos en que tu comunicación funcione al 100% desde el inicio!
</h5> -->
<!-- </div> -->
<!-- </div> -->
</div>
</div>
<div class="col-md-6 col-xs-12 p-5" style="background-color: #2581c4;">
<div class="container">
<ul>
<li style="color: #fff!important">
<mark style="color: #fff!important">
Protge tus datos.
</mark>
</li>
<li style="color: #fff!important">
<mark style="color: #fff!important">
Conoce que páginas consultan tus empleados.
</mark>
</li>
<li style="color: #fff!important">
<mark style="color: #fff!important">
Bloquea sitios por contenido, usuario y horario.
</mark>
</li>
<li style="color: #fff!important">
<mark style="color: #fff!important">
Asegura la continuidad de tu negocio sin preocupaciones y sin interrupciones.
</mark>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- ./Cuerpo -->
<!-- Modales -->
<!-- ./Modales -->
<!-- Archivos JS -->
<script src="http://localhost/Abacom/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="http://localhost/Abacom/js/pooper.js"></script>
<script src="http://localhost/Abacom/js/bootstrap.js"></script>
<script src="http://localhost/Abacom/js/abacomjs2.js"></script>
<script src="http://localhost/Abacom/js/rateYo.js"></script>
<script src="http://localhost/Abacom/assets/menu/menu.min.js"></script>
<script src="http://localhost/Abacom/assets/datatables/datatables.min.js"></script>
<!-- <script src="http://localhost/Abacom/assets/js/swiper.min.js"></script> -->
<script src="http://localhost/Abacom/assets/js/custom.min.js"></script>
<script src="http://localhost/Abacom/assets/sweetalert/sweetalert.min.js"></script>
<script src="http://localhost/Abacom/assets/aos/aos.js"></script>
<!-- ./Archivos JS -->
</body>
</html>
Lo que intento colocar bien son las imágenes sobre los divs, no importa el footer.
Espero me puedan apoyar
<div><img src="imagen.jpg"></div>
. Eso es lo único que entendí, tu pregunta no da muchos detalles :/