You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

2 Días
21 Hrs
55 Min
56 Seg
Curso de Materialize

Curso de Materialize

Diego De Granda

Diego De Granda

Estilos al header

9/17
Resources

How to structure a CSS project on a web page?

When approaching web project development, CSS organization is crucial for a clean and functional page. In this class, we will learn how to structure CSS to apply styles efficiently. We begin by understanding how the Machinalla framework facilitates this process.

How does Machiyo la es handle styling?

Machiyo la es is different because it works with display: flex by default. This allows elements to be positioned easily. To understand the necessary code, we can review the documentation within the components section of Machiyo la es.

How to apply basic styles to the body?

Let's start by styling the body of the document to have a solid foundation:

body { margin: 0; padding: 0; display: flex; min-height: 100vh; flex-direction: column;}

This configuration resets styles, uses flexbox for layout and defines a minimum height in relation to the user's view.

How to style the header and navigation bar?

It is essential to delimit the header for a coherent design. To do this, we can follow these steps:

How to limit header dimensions?

header { height: 500px;}

This ensures that the header maintains constant dimensions, facilitating responsive design.

How do we style the nav?

Within the header, the nav plays an essential role. Here, we configure additional features:

nav { background-color: white; box-shadow: none;}

Removing the shadow helps keep the container clean and professional.

How to align and format the navigation elements?

To adjust the navigation content:

nav ul { height: 100px; color: white;}

Defining the height and color provides consistent visual behavior.

How to integrate a background image?

Adding a background image effectively requires some additional steps:

How to set the background?

First, we verify that our image is correctly placed:

  1. Ensure that the images exist in the correct folder within our project.
  2. Set the background:
.hero-image { width: 100%; height: 400px; background-image: url('../img/background.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;}

This configuration ensures that the background image fits the container, providing an attractive design.

Conclusion

Through careful structuring and design, you can ensure that the elements interact harmoniously, achieving a user-friendly interface. In this way, you lay the groundwork for further development of the project. In our next session we will delve into the layout of the main section of the site. Keep learning and practicing!

Contributions 17

Questions 2

Sort by:

Want to see more contributions, questions and answers from the community?

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;
}