0

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

introducir la descripción de la imagen aquí

Lo que tengo

introducir la descripción de la imagen aquí

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

1
  • Quieres colocar todo el diseño como una imagen sola sobre un div? Si es así intenta: <div><img src="imagen.jpg"></div>. Eso es lo único que entendí, tu pregunta no da muchos detalles :/
    – user166844
    el 14 jun. 2020 a las 21:41

1 respuesta 1

1

div {
  width:200px;
  height:200px;
  position:absolute; 
}

.azul {
  background:blue;
  z-index:1; /*El z-index de la caja azul es menor al de la caja roja*/
}

.rojo {
  background:red;
  z-index:2; /*El z-index es mayor al de la caja azul por lo que se muestra primero que la caja roja*/
  left:100px;
  top:100px;
}
<div class="azul">Tu fondo</div>
<div class="rojo">Tu imagen</div>

puedes agregar la propiedad a tu imagen

z-index: 1;

z-index nos permite manejar los elementos como si fueran capas permitiéndonos decidir que elemento aparecerá arriba de otro.

Ademas te recomiendo leer acerca del sistema de grillas para poder ordenar el contenido de tu pagina.

4
  • algún ejemplo que me puedas mandar para guiarme por favor
    – Javier fr
    el 14 jun. 2020 a las 21:49
  • codepen.io/falconmasters/pen/GEFHc ahi hay un ejemplo simple, imagina que tu imagen es el cuadrado rojo y tu fondo el azul. Agregale z-index para asi estar por encima de tu div, es eso lo que buscas verdad? el 14 jun. 2020 a las 21:56
  • El ejemplo ayudaría más aquí amigo
    – BetaM
    el 14 jun. 2020 a las 21:57
  • @BetaM edite la respuesta y agregue el ejemplo en ella, espero haberlo hecho de manera adecuada, soy nuevo y la verdad que solo buscaba ayudar con ese link, saludos! el 14 jun. 2020 a las 22:14

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.