alguien puede ayudarme con el diseño de lo que coloco en l imagen siguiente:
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
<>
).