Skip to content

Commit

Permalink
ultimos detalles
Browse files Browse the repository at this point in the history 
Estilos responsivos en footer
Efectos hover en etiquetas <a> de enlaces en el header y footer
  • Loading branch information
@Nath-Maya
Nath-Maya committed Feb 19, 2023
1 parent b50d60d commit 09f0908
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 25 deletions.
96 changes: 84 additions & 12 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,24 @@ body {
margin-left: 0.7rem;
}

.head-enlace a {
padding: 0.5rem;

transition: 200ms;
}

.head-enlace a:hover {
background: rgba(239, 221, 221, 0.29);
border-radius: 5px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(3.4px);
-webkit-backdrop-filter: blur(3.4px);
border: 1px solid rgba(239, 221, 221, 0.22);

font-weight: bold;
}


/* !CUERPO PRINCIPAL */

.llamada {
Expand Down Expand Up @@ -241,12 +259,16 @@ body {

.sobre_nosotros__titulo {
color: var(--fuente-ceniza-oscuro);

font-weight: 700;
font-size: 1.5rem;
font-family: var(--montserrat);

text-transform: uppercase;
text-align: center;

margin-bottom: 1.25rem;
padding-top: 1rem;
}

.sobre_nosotros__texto {
Expand Down Expand Up @@ -509,9 +531,22 @@ body {
margin: 0 .5rem .7rem;
}

.footer-enlace a:hover {
background: rgba(239, 221, 221, 0.29);
border-radius: 5px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(3.4px);
-webkit-backdrop-filter: blur(3.4px);
border: 1px solid rgba(239, 221, 221, 0.22);

/* ?RESPONSIVE DESKTOP 1024px */
font-weight: bold;
}

.footer-enlace a {
padding: 0.5rem;
}

/* ?RESPONSIVE DESKTOP 1024px */

@media screen and (min-width: 1024px) {
.container {
Expand All @@ -524,6 +559,7 @@ body {
justify-content: space-between;
border: none;
}

/* LLAMADA */
.llamada {
background-image: url(/img/bg-intro.jpg);
Expand All @@ -536,6 +572,7 @@ body {
font-size: 3.25rem;
margin-bottom: 2rem;
}

/* DIFERENCIALES */
.diferenciales {
background-color: var(--cinza-claro);
Expand All @@ -544,6 +581,7 @@ body {
.diferenciales-lista {
justify-content: space-around;
}

/* INSTITUCIONAL */
.institucional-descripcion {
width: 100%;
Expand All @@ -560,6 +598,25 @@ body {
.institucionaL-contacto-email {
display: block;
}

.institucional__contenido {
width: 100%;
display: flex;
justify-content: space-between;
text-align: left;
}

.institucional-video {
align-self: flex-end;
width: 375px;
}

.institucional__informaciones {
display: flex;
flex-direction: column;
justify-content: center;
}

/* PLANES */
.planes__tarjetas {
flex-direction: row;
Expand All @@ -570,17 +627,13 @@ body {
.tarjetas {
max-width: 300px;
}
/* FOOTER */
.footer {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}

.footer-navegacion {
text-align: left;
min-width: 600px;
.planes__tarjetas li:nth-child(2) {
margin-right: 0.5rem;
margin-left: 0.5rem;
}


/* SOBRE NOSOTROS */
.sobre_nosotros {
display: flex;
Expand All @@ -591,7 +644,7 @@ body {
}

.sobre_nosotros__titulo {
text-align: left;
text-align: center;
}

.sobre-nosotros__texto--division {
Expand All @@ -608,11 +661,24 @@ body {
border-radius: 10px;
}

/* FOOTER */
.footer {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}

.footer-navegacion {
text-align: left;
min-width: 600px;
}
}

/* ?RESPONSIVE TABLET */
/* ?RESPONSIVE TABLET 768px */

@media screen and (min-width:768px) {

/* CUERPO PRINCIPAL */
.llamada-texto {
max-width: 600px;
}
Expand All @@ -621,6 +687,8 @@ body {
max-width: 400px;
}

/* INSTITUCIONAL */

.institucional-contacto-email {
display: inline-block;
}
Expand All @@ -629,6 +697,10 @@ body {
width: 100%;
}



/* DESTACADOS */

.destacados-panel-imagen {
border-radius: 10px;
}
Expand Down
31 changes: 18 additions & 13 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ <h3 class="tarjetas__titulo">Start</h3>
<p class="tarjetas__texto">5 manutenciones mensuales</p>
<p class="tarjetas__texto">App SEO</p>
<p class="tarjetas__texto">1 sistema operacional</p>
<p class="tarjetas__texto">Asignar plan</p>
<a href="#" class="tarjetas__boton tarjetas__boton--start boton">Asignar plan</a>
</articule>
</li>
Expand All @@ -136,7 +137,7 @@ <h3 class="tarjetas__titulo">Ultra</h3>
<li class="tarjetas tarjetas--mega">
<h3 class="tarjetas__titulo">Mega</h3>
<articule class="tarjetas__contenido">
<p class="tarjetas__precio"><em>$ 1500</em></p>
<p class="tarjetas__precio"><em>$ 1000</em></p>
<p class="tarjetas__texto">10 manutenciones mensuales</p>
<p class="tarjetas__texto">App SEO</p>
<p class="tarjetas__texto">2 sistemas operacionales</p>
Expand All @@ -154,18 +155,22 @@ <h2 class="contacto__titulo">Contacto</h2>
<!-- !INSTITUCIONAL -->
<section class="institucional container">
<h2 class="institucional-titulo">Institucional</h2>
<p class="institucional-descripcion">Un poco más sobre Apeperia</p>
<address class="institucional-direcction">Calle Vergueiro, 3185
<br>
Villa Mariana, São Paulo
<article class="institucional-contacto">
<p>
<a href="tel:+551155712751" class="institucional-contacto-telefono">+55 11 55712751</a><a
href="mailto:contacto@apeperia.com" class="institucional-contacto-email">contacto@apeperia.com</a>
</p>
</article>
</address>
<video src="img/formacion-java.mp4" class="institucional-video" controls></video>
<div class="institucional__contenido">
<div class="institucional__informaciones">
<p class="institucional-descripcion">Un poco más sobre Apeperia</p>
<address class="institucional-direcction">Calle Vergueiro, 3185
<br>
Villa Mariana, São Paulo
<article class="institucional-contacto">
<p>
<a href="tel:+551155712751" class="institucional-contacto-telefono">+55 11 55712751</a><a
href="mailto:contacto@apeperia.com" class="institucional-contacto-email">contacto@apeperia.com</a>
</p>
</article>
</address>
</div>
<video src="img/formacion-java.mp4" class="institucional-video" controls></video>
</div>
</section>
</main>
<!-- !FOOTER -->
Expand Down

1 comment on commit 09f0908

@Nath-Maya
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok

Please # to comment.