Estilos al header

Materialize utiliza por defecto el display flex.

• Esta clase alinea de forma vertical el contenido: valign-wrapper

• Esta clase hace responsive una imagen: brand-logo, responsive-img

• Clase que alinea al lado izquierdo: left

• Clase que alinea al lado derecho: right

• Clase que delimita un boton: btn

Ya se empieza a ver bonito

Estaría bueno agregar los imágenes

19 de abril. Primer vuelo en marte

Me encanta lo facil que es

🌻Todo va bien💚

Perfecto, sigamos!

Genial como va quedando 😃

Sería excelente que adjuntaran los recursos de las imágenes

Pueden usar el shorthand de la propiedad background de esta forma:

background: url("...") center/cover no-repeat;

pero deben seguir ese orden el position/size

Vaya que genial, los mas importante es repasar cada concepto de la documentación y ponerlo en practica para trabajarlo de manera natural.

En realidad no se necesitan las comillas dentro de url(). Pruébenlo uds mismos.

s

<footer class=“page-footer”>
<div class=“container”>
<div class=“row”>
<div class=“col l6 s12”>
<h5 class=“white-text”>Footer Content</h5>
<p class=“grey-text text-lighten-4”>You can use rows and columns here to organize your footer content.</p>
</div>
<div class=“col l4 offset-l2 s12”>
<h5 class=“white-text”>Links</h5>
<ul>
<li><a class=“grey-text text-lighten-3” href="#!">Link 1</a></li>
<li><a class=“grey-text text-lighten-3” href="#!">Link 2</a></li>
<li><a class=“grey-text text-lighten-3” href="#!">Link 3</a></li>
<li><a class=“grey-text text-lighten-3” href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class=“footer-copyright”>
<div class=“container”>
© 2014 Copyright Text
<a class=“grey-text text-lighten-4 right” href="#!">More Links</a>
</div>
</div>
</footer>

Pensé que solo utilizaríamos en framework. Pero usamos CSS no me parece tan poderoso materialize.

Uhmm… vengo del curso de Tailwinds… Me parece que es mucho mas poderoso 🤔

Bueno sigamos probando Materialize a ver que tal

Como dar estilos a la imagen del header

.header-main-pic {
  width: 100%;
  height: 400px;
  background-image: url('../assets/img/Banner.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}