No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Materialize

Curso de Materialize

Diego De Granda

Diego De Granda

Estilos al header

9/17
Recursos

Aportes 17

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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=鈥減age-footer鈥>
<div class=鈥渃ontainer鈥>
<div class=鈥渞ow鈥>
<div class=鈥渃ol l6 s12鈥>
<h5 class=鈥渨hite-text鈥>Footer Content</h5>
<p class=鈥済rey-text text-lighten-4鈥>You can use rows and columns here to organize your footer content.</p>
</div>
<div class=鈥渃ol l4 offset-l2 s12鈥>
<h5 class=鈥渨hite-text鈥>Links</h5>
<ul>
<li><a class=鈥済rey-text text-lighten-3鈥 href="#!">Link 1</a></li>
<li><a class=鈥済rey-text text-lighten-3鈥 href="#!">Link 2</a></li>
<li><a class=鈥済rey-text text-lighten-3鈥 href="#!">Link 3</a></li>
<li><a class=鈥済rey-text text-lighten-3鈥 href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class=鈥渇ooter-copyright鈥>
<div class=鈥渃ontainer鈥>
漏 2014 Copyright Text
<a class=鈥済rey-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;
}