[Agregar] responsive design a parte del home
This commit is contained in:
parent
d5f0e8ece1
commit
ad910843c2
|
@ -11,8 +11,8 @@ Metodologia => BEM
|
|||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 60%;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
max-width: 360px;
|
||||
min-width: 288px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
|
|
@ -0,0 +1,49 @@
|
|||
/* Estilos para el header */
|
||||
|
||||
.hero {
|
||||
flex-direction: row-reverse;
|
||||
text-align: initial;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hero__img-wrapper {
|
||||
flex-basis: 40%;
|
||||
max-width: 400px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hero__text-container {
|
||||
flex-basis: 50%;
|
||||
}
|
||||
|
||||
|
||||
.hero__CTA {
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.hero__secundary-CTA {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.hero__button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Estilos para la seccion de posts mas recientes */
|
||||
|
||||
.recent__posts {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.recent-cards__container {
|
||||
grid-template-columns: repeat(auto-fill,minmax(288px, 1fr));
|
||||
gap: 30px 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.CTA__button {
|
||||
width: 40%;
|
||||
}
|
||||
|
|
@ -6,11 +6,16 @@
|
|||
5. Otros
|
||||
Metodologia => BEM
|
||||
*/
|
||||
body {
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
|
||||
/* Estilos al header */
|
||||
.header {
|
||||
min-width: 320px;
|
||||
padding: 0 20px;
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
min-width: 310px;
|
||||
/* padding: 0 20px; */
|
||||
padding-bottom: 30px;
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
|
@ -173,6 +178,7 @@ Metodologia => BEM
|
|||
|
||||
.hero__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hero__CTA {
|
||||
|
@ -190,11 +196,15 @@ Metodologia => BEM
|
|||
}
|
||||
|
||||
.hero__button {
|
||||
min-width: 200px;
|
||||
display: block;
|
||||
border-radius: 40px;
|
||||
padding: 10px 20px;
|
||||
width: 200px;
|
||||
height: 45px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
font-size: 1.4rem;
|
||||
line-height: 45px;
|
||||
margin: 0 auto;
|
||||
font-weight: 500;
|
||||
background-color: var(--color-primary-red);
|
||||
color: #FFF;
|
||||
|
@ -246,7 +256,7 @@ Metodologia => BEM
|
|||
min-width: 320px;
|
||||
text-align: center;
|
||||
padding: 33px 0;
|
||||
background-color: var(--color-background);
|
||||
/* background-color: var(--color-background); */
|
||||
}
|
||||
|
||||
.recent-posts__title {
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
'pages/home/home.css',
|
||||
) ?>
|
||||
<?php $desktop_styles = array(
|
||||
array('pages/home/home-desktop.css', 'attributes' => 'media="(max-width: 720px)"'),
|
||||
array('pages/home/home-desktop.css', 'attributes' => 'media="screen and (min-width: 600px)"'),
|
||||
) ?>
|
||||
<?php $scripts = array(
|
||||
'home.js',
|
||||
|
@ -20,11 +20,13 @@
|
|||
<source srcset="<?= NABU_DIRECTORY['images'] ?>/hero-desktop.png" media="(min-width: 600px)">
|
||||
<img src="<?= NABU_DIRECTORY['images'] ?>/hero.png" alt="Imagen inspiración en cualquier momento y cualquier lugar" class="hero__img">
|
||||
</picture>
|
||||
<h1 class="hero__CTA">Lee, inspírate y escribe</h1>
|
||||
<p class="hero__secundary-CTA">
|
||||
Lo mejor que puedes compartir es tu conocimiento.
|
||||
</p>
|
||||
<a href="<?= NABU_ROUTES['signup'] ?>" class="hero__button">Comienza a escribir</a>
|
||||
<div class="hero__text-container">
|
||||
<h1 class="hero__CTA">Lee, inspírate y escribe</h1>
|
||||
<p class="hero__secundary-CTA">
|
||||
Lo mejor que puedes compartir es tu conocimiento.
|
||||
</p>
|
||||
<a href="<?= NABU_ROUTES['signup'] ?>" class="hero__button">Comienza a escribir</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
Loading…
Reference in a new issue