Skip to main content
se eliminaron 3 caracteres en el cuerpo
Origen Enlace
Antonio Galicia
  • 1.3k
  • 1
  • 4
  • 14
body {
  background-color: beige;
}

.nav__responsive-ul {
  display: none;
}

/*AL NAV LE ASIGNAMOS DISPLAY FLEX Y CON FLEX-END ALINEAMOS A LA DERECHA*/
.nav {
  display: flex;
  justify-content: flex-end;
  background-color: #94a7ae;
}


/*AL CONTENEDOR DE LAS LISTAS TAMBIEN LE ASIGNAMOS DISPLAY FLEX Y ALINEAMOS LOS ELEMENTOS EN COLUMNASFILAS, ASIGNAMOS UN WIDTH, ES IMPORTANTE PARA QUE LA ALINEACION SE LLEVE ACABO SEGUN EL TAMAÑO DEL CONTENEODR UL*/

.nav-ul {
  display: flex;
  flex-direction: row;
  width: 58%;
}


/*PADDING PARA LOS ENLACES a SE SEPRAREN DEL ICONO*/

a {
  padding-left: 5px;
}

.nav__li {
  display: inline-block;
  padding: ;
  color: aliceblue;
  width: 100%;
}

.nav__li :hover>a {
  color: #bbb;
}

.nav__li :hover {
  color: #bbb;
}

.nav__li a {
  color: white;
  text-decoration: none;
}

.nav__li i {
  width: 1.875rem;
  box-sizing: border-box;
  text-align: right;
  margin-left: 0.313rem;
}

* {
  font-weight: 100;
  font-size: 20px;
}

div {
  width: 100%;
  display: inline-block;
}

h1 {
  font-size: 24px;
}

h2 {
  text-align: left;
  font-size: 23px;
  padding: 1.5rem;
}

.nav__responsive-button {
  float: right;
}

@media only screen and (max-width: 50rem) {
  .nav-ul {
    display: none;
  }
  .nav__responsive-ul {
    display: block;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JSDevs</title>
  <script src="https://kit.fontawesome.com/8af7719ad1.js" crossorigin="anonymous"></script>

  <body>
    <header>
      <nav class="nav">
        <ul class="nav-ul">
          <li class="nav__li">
            <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
          </li>
          <li class="nav__li">
            <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
          </li>
          <li class="nav__li">
            <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
          </li>
          <li class="nav__li">
            <i class="fa-solid fa-address-card"></i><a href="#">Sobre nosotros</a>
          </li>
        </ul>
        <ul class="nav__responsive-ul">
          <div class="nav__responsive-button fas fa-bars"></div>
          <div class="nav__li-container">
            <li class="nav__responsive-li">
              <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-solid fa-address-card"></i><a href="#">Sobre nosotros</a>
            </li>
          </div>
        </ul>
      </nav>
    </header>
  </body>
body {
  background-color: beige;
}

.nav__responsive-ul {
  display: none;
}

/*AL NAV LE ASIGNAMOS DISPLAY FLEX Y CON FLEX-END ALINEAMOS A LA DERECHA*/
.nav {
  display: flex;
  justify-content: flex-end;
  background-color: #94a7ae;
}


/*AL CONTENEDOR DE LAS LISTAS TAMBIEN LE ASIGNAMOS DISPLAY FLEX Y ALINEAMOS LOS ELEMENTOS EN COLUMNAS, ASIGNAMOS UN WIDTH, ES IMPORTANTE PARA QUE LA ALINEACION SE LLEVE ACABO SEGUN EL TAMAÑO DEL CONTENEODR UL*/

.nav-ul {
  display: flex;
  flex-direction: row;
  width: 58%;
}


/*PADDING PARA LOS ENLACES a SE SEPRAREN DEL ICONO*/

a {
  padding-left: 5px;
}

.nav__li {
  display: inline-block;
  padding: ;
  color: aliceblue;
  width: 100%;
}

.nav__li :hover>a {
  color: #bbb;
}

.nav__li :hover {
  color: #bbb;
}

.nav__li a {
  color: white;
  text-decoration: none;
}

.nav__li i {
  width: 1.875rem;
  box-sizing: border-box;
  text-align: right;
  margin-left: 0.313rem;
}

* {
  font-weight: 100;
  font-size: 20px;
}

div {
  width: 100%;
  display: inline-block;
}

h1 {
  font-size: 24px;
}

h2 {
  text-align: left;
  font-size: 23px;
  padding: 1.5rem;
}

.nav__responsive-button {
  float: right;
}

@media only screen and (max-width: 50rem) {
  .nav-ul {
    display: none;
  }
  .nav__responsive-ul {
    display: block;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JSDevs</title>
  <script src="https://kit.fontawesome.com/8af7719ad1.js" crossorigin="anonymous"></script>

  <body>
    <header>
      <nav class="nav">
        <ul class="nav-ul">
          <li class="nav__li">
            <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
          </li>
          <li class="nav__li">
            <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
          </li>
          <li class="nav__li">
            <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
          </li>
          <li class="nav__li">
            <i class="fa-solid fa-address-card"></i><a href="#">Sobre nosotros</a>
          </li>
        </ul>
        <ul class="nav__responsive-ul">
          <div class="nav__responsive-button fas fa-bars"></div>
          <div class="nav__li-container">
            <li class="nav__responsive-li">
              <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-solid fa-address-card"></i><a href="#">Sobre nosotros</a>
            </li>
          </div>
        </ul>
      </nav>
    </header>
  </body>
body {
  background-color: beige;
}

.nav__responsive-ul {
  display: none;
}

/*AL NAV LE ASIGNAMOS DISPLAY FLEX Y CON FLEX-END ALINEAMOS A LA DERECHA*/
.nav {
  display: flex;
  justify-content: flex-end;
  background-color: #94a7ae;
}


/*AL CONTENEDOR DE LAS LISTAS TAMBIEN LE ASIGNAMOS DISPLAY FLEX Y ALINEAMOS LOS ELEMENTOS EN FILAS, ASIGNAMOS UN WIDTH, ES IMPORTANTE PARA QUE LA ALINEACION SE LLEVE ACABO SEGUN EL TAMAÑO DEL CONTENEODR UL*/

.nav-ul {
  display: flex;
  flex-direction: row;
  width: 58%;
}


/*PADDING PARA LOS ENLACES a SE SEPRAREN DEL ICONO*/

a {
  padding-left: 5px;
}

.nav__li {
  display: inline-block;
  padding: ;
  color: aliceblue;
  width: 100%;
}

.nav__li :hover>a {
  color: #bbb;
}

.nav__li :hover {
  color: #bbb;
}

.nav__li a {
  color: white;
  text-decoration: none;
}

.nav__li i {
  width: 1.875rem;
  box-sizing: border-box;
  text-align: right;
  margin-left: 0.313rem;
}

* {
  font-weight: 100;
  font-size: 20px;
}

div {
  width: 100%;
  display: inline-block;
}

h1 {
  font-size: 24px;
}

h2 {
  text-align: left;
  font-size: 23px;
  padding: 1.5rem;
}

.nav__responsive-button {
  float: right;
}

@media only screen and (max-width: 50rem) {
  .nav-ul {
    display: none;
  }
  .nav__responsive-ul {
    display: block;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JSDevs</title>
  <script src="https://kit.fontawesome.com/8af7719ad1.js" crossorigin="anonymous"></script>

  <body>
    <header>
      <nav class="nav">
        <ul class="nav-ul">
          <li class="nav__li">
            <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
          </li>
          <li class="nav__li">
            <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
          </li>
          <li class="nav__li">
            <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
          </li>
          <li class="nav__li">
            <i class="fa-solid fa-address-card"></i><a href="#">Sobre nosotros</a>
          </li>
        </ul>
        <ul class="nav__responsive-ul">
          <div class="nav__responsive-button fas fa-bars"></div>
          <div class="nav__li-container">
            <li class="nav__responsive-li">
              <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-solid fa-address-card"></i><a href="#">Sobre nosotros</a>
            </li>
          </div>
        </ul>
      </nav>
    </header>
  </body>
se eliminaron 3 caracteres en el cuerpo
Origen Enlace
Antonio Galicia
  • 1.3k
  • 1
  • 4
  • 14
body {
  background-color: beige;
}

.nav__responsive-ul {
  display: none;
}

/*AL NAV LE ASIGNAMOS DISPLAY FLEX Y CON FLEX-END ALINEAMOS A LA DERECHA*/
.nav {
  display: flex;
  justify-content: flex-end;
  background-color: #94a7ae;
}


/*AL CONTENEDOR DE LAS LISTAS TAMBIEN LE ASIGNAMOS DISPLAY FLEX Y ALINEAMOS LOS ELEMENTOS EN COLUMNAS, ASIGNAMOS UN WIDTH, ES IMPORTANTE PARA QUE LA ALINEACION SE LLEVE ACABO SEGUN EL TAMAÑO DEL CONTENEODR UL*/

.nav-ul {
  display: flex;
  felxflex-direction: column;row;
  width: 58%;
}


/*PADDING PARA LOS ENLACES a SE SEPRAREN DEL ICONO*/

a {
  padding-left: 5px;
}

.nav__li {
  display: inline-block;
  padding: ;
  color: aliceblue;
  width: 100%;
}

.nav__li :hover>a {
  color: #bbb;
}

.nav__li :hover {
  color: #bbb;
}

.nav__li a {
  color: white;
  text-decoration: none;
}

.nav__li i {
  width: 1.875rem;
  box-sizing: border-box;
  text-align: right;
  margin-left: 0.313rem;
}

* {
  font-weight: 100;
  font-size: 20px;
}

div {
  width: 100%;
  display: inline-block;
}

h1 {
  font-size: 24px;
}

h2 {
  text-align: left;
  font-size: 23px;
  padding: 1.5rem;
}

.nav__responsive-button {
  float: right;
}

@media only screen and (max-width: 50rem) {
  .nav-ul {
    display: none;
  }
  .nav__responsive-ul {
    display: block;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JSDevs</title>
  <script src="https://kit.fontawesome.com/8af7719ad1.js" crossorigin="anonymous"></script>

  <body>
    <header>
      <nav class="nav">
        <ul class="nav-ul">
          <li class="nav__li">
            <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
          </li>
          <li class="nav__li">
            <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
          </li>
          <li class="nav__li">
            <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
          </li>
          <li class="nav__li">
            <i class="fa-solid fa-address-card"></i><a href="#">Sobre nosotros</a>
          </li>
        </ul>
        <ul class="nav__responsive-ul">
          <div class="nav__responsive-button fas fa-bars"></div>
          <div class="nav__li-container">
            <li class="nav__responsive-li">
              <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-solid fa-address-card"></i><a href="#">Sobre nosotros</a>
            </li>
          </div>
        </ul>
      </nav>
    </header>
  </body>
body {
  background-color: beige;
}

.nav__responsive-ul {
  display: none;
}

/*AL NAV LE ASIGNAMOS DISPLAY FLEX Y CON FLEX-END ALINEAMOS A LA DERECHA*/
.nav {
  display: flex;
  justify-content: flex-end;
  background-color: #94a7ae;
}


/*AL CONTENEDOR DE LAS LISTAS TAMBIEN LE ASIGNAMOS DISPLAY FLEX Y ALINEAMOS LOS ELEMENTOS EN COLUMNAS, ASIGNAMOS UN WIDTH, ES IMPORTANTE PARA QUE LA ALINEACION SE LLEVE ACABO SEGUN EL TAMAÑO DEL CONTENEODR UL*/

.nav-ul {
  display: flex;
  felx-direction: column;
  width: 58%;
}


/*PADDING PARA LOS ENLACES a SE SEPRAREN DEL ICONO*/

a {
  padding-left: 5px;
}

.nav__li {
  display: inline-block;
  padding: ;
  color: aliceblue;
  width: 100%;
}

.nav__li :hover>a {
  color: #bbb;
}

.nav__li :hover {
  color: #bbb;
}

.nav__li a {
  color: white;
  text-decoration: none;
}

.nav__li i {
  width: 1.875rem;
  box-sizing: border-box;
  text-align: right;
  margin-left: 0.313rem;
}

* {
  font-weight: 100;
  font-size: 20px;
}

div {
  width: 100%;
  display: inline-block;
}

h1 {
  font-size: 24px;
}

h2 {
  text-align: left;
  font-size: 23px;
  padding: 1.5rem;
}

.nav__responsive-button {
  float: right;
}

@media only screen and (max-width: 50rem) {
  .nav-ul {
    display: none;
  }
  .nav__responsive-ul {
    display: block;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JSDevs</title>
  <script src="https://kit.fontawesome.com/8af7719ad1.js" crossorigin="anonymous"></script>

  <body>
    <header>
      <nav class="nav">
        <ul class="nav-ul">
          <li class="nav__li">
            <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
          </li>
          <li class="nav__li">
            <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
          </li>
          <li class="nav__li">
            <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
          </li>
          <li class="nav__li">
            <i class="fa-solid fa-address-card"></i><a href="#">Sobre nosotros</a>
          </li>
        </ul>
        <ul class="nav__responsive-ul">
          <div class="nav__responsive-button fas fa-bars"></div>
          <div class="nav__li-container">
            <li class="nav__responsive-li">
              <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-solid fa-address-card"></i><a href="#">Sobre nosotros</a>
            </li>
          </div>
        </ul>
      </nav>
    </header>
  </body>
body {
  background-color: beige;
}

.nav__responsive-ul {
  display: none;
}

/*AL NAV LE ASIGNAMOS DISPLAY FLEX Y CON FLEX-END ALINEAMOS A LA DERECHA*/
.nav {
  display: flex;
  justify-content: flex-end;
  background-color: #94a7ae;
}


/*AL CONTENEDOR DE LAS LISTAS TAMBIEN LE ASIGNAMOS DISPLAY FLEX Y ALINEAMOS LOS ELEMENTOS EN COLUMNAS, ASIGNAMOS UN WIDTH, ES IMPORTANTE PARA QUE LA ALINEACION SE LLEVE ACABO SEGUN EL TAMAÑO DEL CONTENEODR UL*/

.nav-ul {
  display: flex;
  flex-direction: row;
  width: 58%;
}


/*PADDING PARA LOS ENLACES a SE SEPRAREN DEL ICONO*/

a {
  padding-left: 5px;
}

.nav__li {
  display: inline-block;
  padding: ;
  color: aliceblue;
  width: 100%;
}

.nav__li :hover>a {
  color: #bbb;
}

.nav__li :hover {
  color: #bbb;
}

.nav__li a {
  color: white;
  text-decoration: none;
}

.nav__li i {
  width: 1.875rem;
  box-sizing: border-box;
  text-align: right;
  margin-left: 0.313rem;
}

* {
  font-weight: 100;
  font-size: 20px;
}

div {
  width: 100%;
  display: inline-block;
}

h1 {
  font-size: 24px;
}

h2 {
  text-align: left;
  font-size: 23px;
  padding: 1.5rem;
}

.nav__responsive-button {
  float: right;
}

@media only screen and (max-width: 50rem) {
  .nav-ul {
    display: none;
  }
  .nav__responsive-ul {
    display: block;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JSDevs</title>
  <script src="https://kit.fontawesome.com/8af7719ad1.js" crossorigin="anonymous"></script>

  <body>
    <header>
      <nav class="nav">
        <ul class="nav-ul">
          <li class="nav__li">
            <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
          </li>
          <li class="nav__li">
            <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
          </li>
          <li class="nav__li">
            <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
          </li>
          <li class="nav__li">
            <i class="fa-solid fa-address-card"></i><a href="#">Sobre nosotros</a>
          </li>
        </ul>
        <ul class="nav__responsive-ul">
          <div class="nav__responsive-button fas fa-bars"></div>
          <div class="nav__li-container">
            <li class="nav__responsive-li">
              <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-solid fa-address-card"></i><a href="#">Sobre nosotros</a>
            </li>
          </div>
        </ul>
      </nav>
    </header>
  </body>
Origen Enlace
Antonio Galicia
  • 1.3k
  • 1
  • 4
  • 14

Te dejo un ejemplo utilizando display flex y alineando con justify-content:flex-end;, el cual lo hace a tu derecha como lo quieres, recuerda que a los contenedores se les tiene que asignar un width, para que los elementos se distribuyan sobre el espacio existente, si no lo haces, hara la alineación pero no te percataras de ella ya que el espacio no es suficiente. Comente en el CSS para que lo comprendas mejor.

body {
  background-color: beige;
}

.nav__responsive-ul {
  display: none;
}

/*AL NAV LE ASIGNAMOS DISPLAY FLEX Y CON FLEX-END ALINEAMOS A LA DERECHA*/
.nav {
  display: flex;
  justify-content: flex-end;
  background-color: #94a7ae;
}


/*AL CONTENEDOR DE LAS LISTAS TAMBIEN LE ASIGNAMOS DISPLAY FLEX Y ALINEAMOS LOS ELEMENTOS EN COLUMNAS, ASIGNAMOS UN WIDTH, ES IMPORTANTE PARA QUE LA ALINEACION SE LLEVE ACABO SEGUN EL TAMAÑO DEL CONTENEODR UL*/

.nav-ul {
  display: flex;
  felx-direction: column;
  width: 58%;
}


/*PADDING PARA LOS ENLACES a SE SEPRAREN DEL ICONO*/

a {
  padding-left: 5px;
}

.nav__li {
  display: inline-block;
  padding: ;
  color: aliceblue;
  width: 100%;
}

.nav__li :hover>a {
  color: #bbb;
}

.nav__li :hover {
  color: #bbb;
}

.nav__li a {
  color: white;
  text-decoration: none;
}

.nav__li i {
  width: 1.875rem;
  box-sizing: border-box;
  text-align: right;
  margin-left: 0.313rem;
}

* {
  font-weight: 100;
  font-size: 20px;
}

div {
  width: 100%;
  display: inline-block;
}

h1 {
  font-size: 24px;
}

h2 {
  text-align: left;
  font-size: 23px;
  padding: 1.5rem;
}

.nav__responsive-button {
  float: right;
}

@media only screen and (max-width: 50rem) {
  .nav-ul {
    display: none;
  }
  .nav__responsive-ul {
    display: block;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JSDevs</title>
  <script src="https://kit.fontawesome.com/8af7719ad1.js" crossorigin="anonymous"></script>

  <body>
    <header>
      <nav class="nav">
        <ul class="nav-ul">
          <li class="nav__li">
            <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
          </li>
          <li class="nav__li">
            <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
          </li>
          <li class="nav__li">
            <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
          </li>
          <li class="nav__li">
            <i class="fa-solid fa-address-card"></i><a href="#">Sobre nosotros</a>
          </li>
        </ul>
        <ul class="nav__responsive-ul">
          <div class="nav__responsive-button fas fa-bars"></div>
          <div class="nav__li-container">
            <li class="nav__responsive-li">
              <i class="fa-solid fa-house"></i><a href="#">Inicio</a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-brands fa-blogger"></i><a href="#">Blog </a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-solid fa-user-group"></i><a href="#">Servicios</a>
            </li>
            <li class="nav__responsive-li">
              <i class="fa-solid fa-address-card"></i><a href="#">Sobre nosotros</a>
            </li>
          </div>
        </ul>
      </nav>
    </header>
  </body>

Pruebalo en tu navegador, aquí no se ve bien, dime si te sirvió.

introducir la descripción de la imagen aquí