0

alguien puede ayudarme con el diseño de lo que coloco en l imagen siguiente: introducir la descripción de la imagen aquí

Este es mi código html, en el cual estoy trabajando:

<div Class="Contenedor">
<div Class="Cuadro">
  <div Class="Titulo">
   
    <h2> <img src="dinosaur.jpg" />HORA DESTACADA</h2>
  </div>
  <div Class="Info">
    <div Class="Fecha">
      <p>Hora Local</p>
      <div Class="Dias">
      <div Class="inicio">
        <spam> MAR </spam>
        <spam> SEP </spam>
        <spam> 18 </spam>
      </div>
      <div Class="fin">
        <spam> MAR </spam>
        <spam> SEP </spam>
        <spam> 20 </spam>
      </div>
  </div>
  </div>
    <div Class="Poke">
    <img src="shiny.png" />
    <img src="poke.jpg" />
  </div>
    <div Class="Texto">
    <p> Aqui colocamos info</p>
  </div>
  </div>
</div>

Y este es el CSS en el cual requiero de su ayuda para poder lograr lo indicado, espero me puedan apoyar:

    h1 {
    font-family: Impact, sans-      serif;
     color: #CE5937;
    }
   .Cuadro{
   background: blue;

     }
   .Titulo{
     background: red;
    width:100%;
     display: inline-block;
     vertical-align: middle;
        }
     .Info{
      background: blue;
     display: flex;

       }
      .inicio{
    background: black;
    color:#800080;
      display: flex;
      }
  .fin{
    background: black;
      color:#800080;
      display: flex;
      }
 .Poke{
     background: black;
      }

Me gustaría hacerlo tal cual la imagen y responsiva ( cuando esté en pc mostrar 2 cuadros y en celular mostrar solo un cuadro)

Espero su apoyo compañeros

1
  • Pulsa en editar y describe el problema específico que has tenido. Recuerda además que, ya que es HTML + CSS, puedes mostrar un ejemplo mínimo verificable ejecutable a través de un snippet (con el botón que indica <>).
    – padaleiana
    el 20 sep. a las 11:23

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.