Finalizando ejercicio de Landing Page

Interesante pug verdad, pero no me gusta.

Aunque entiendo la relevancia de poner h1 en el footer, creo y me corrigen si estoy mal por favor, esta sería una mala practica para SEO. Aunque fácilmente en footer podría llevar un h4 por ejemplo y fin de la mala práctica.

Interpolation

Example:

section.intro
    .intro__image: img(src="images/image.png")

String Multiple

Example:

p.
  Lorem ipsum dolor sit amet,
  consectetur adipisicing elit.
  Quod repellendus ipsum laborum voluptates nostrum,
  qui aspernatur quos perferendis quae recusandae pariatur
  suscipit sint quidem sit, sequi asperiores sunt accusamus dolorum.

p
  | Lorem ipsum dolor sit amet,
  | consectetur adipisicing elit.
  | Quod repellendus ipsum laborum voluptates nostrum,
  | qui aspernatur quos perferendis quae recusandae pariatur
  | suscipit sint quidem sit, sequi asperiores sunt accusamus dolorum.
  span
    | Lorem ipsum dolor sit amet,
    | consectetur adipisicing elit consectetur adipisicing elit.

Variables

Example

Notes: Variables, mixins and functions must be declared before the html doctype tag

-var title = "Main Title"
-var titles = ["Titulo Principal", "Subtitulo 1", "Subtitulo 2", "Subtitulo 3"]
doctype html
    body
    h2= title
    h2 #{title}
    h2 #{titles[0][1]}

Loops

Example

ul
  each title in titles
    li=title

Conditional

Example

-var user = 'Paco'
doctype html
  body
    if user
      a Hola #{user}
    else
      a.boton Registro

Mixins

Example

mixin caja(imagen, titulo, contenido)
  .caja
    .caja__imagen: img(src="images/"+imagen)
    .caja__contenido
      h3= titulo
      p= contenido
      a.buton Leer Más
doctype html
  body
    +caja('imagen.png', titles[1], 'Lorem ipsum dolor sit amet')
    +caja('imagen.png', titles[2], 'Lorem ipsum dolor sit amet')
    +caja('imagen.png', titles[3], 'Lorem ipsum dolor sit amet')

Includes

Example

Notes: Create a head.pug component first

	include components/head.pug

Extends

Example
Notes: Create a template.pug component first

//template.pug
-var title = "Sub-titulo Principal"
-var titles = ["Titulo Principal", "Subtitulo 1", "Subtitulo 2", "Subtitulo 3"]
-var user = 'Paco'
mixin caja(imagen, titulo, contenido)
	.caja
		.caja__imagen: img(src="images/"+imagen)
		.caja__contenido
			h3= titulo
			p= contenido
			a.buton Leer Más
doctype html
html
	include head.pug
	body
		header
			h1 PlatziGames
			if user
				a Hola #{user}
			else
				a.boton Registro
    block content


//Use
extend components/template.pug
block content

Felicidades y aplausos a ustedes 👏 ¡Excelentes trabajos con esos retos!

Pienso mucho en vue y como muchas de las cosas de pug ya no se necesitarían por ejemplo condicionales y ciclos en el html, en pug son algo más estáticas pero no suficientemente dinamicas como lo pueden ser en los frameworks modernos.

Creo que para crear sitios estáticos como landing pages sería una forma más profesional usar pug, pero hasta ahí.

Hay muchos comentarios diciendo que “Mejor me quedo con mi archivo.html”, brothers, aun no han hecho proyectos con al menos 3 archivos html? Eso de tener que cambiar un link varias veces en cada pagina es una perdida de tiempo.
.
Lo que ofrece pug es que “optimización de código”, además de una mayor legibilidad, es valioso.

Lo que hice fue crear más mixins y reutilizar variables:

siempre me quedo la duda como seleccionaba todo y lo identaba.
aquí les dejo como:

para quitar espacios
teclas SHIF+TAB

para agregar espacios:
tecla TAB

Reto cumplido:

// ARCHIVO CSS

.container{
	display:flex;

}

.container__menu{

	width: 35%;
	background: #F1F3F9;
	padding: 40px;
}

.container__menu ul{
	margin-top:30px;
}
.container__menu li{
	list-style-type: none;
	font-weight: bold;
	margin-top:20px;
	color: #012178;
}

.container__content{
	width: 65%;
	padding:20px;
}

.container__content .boton{
	margin-top: 20px;
}

// ARCHIVO PUG

extend components/plantilla.pug
block contenidos
    .container
        .container__menu
            h3 Menú
            ul
            each enlace in enlaces
                li #{enlace}
        .container__content
            h1  Título Principal
            p
            |  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            |   Proin ex mi, gravida sit amet imperdiet vel, sodales a mi. 
            |   Proin sit amet tellus nec nisl bibendum ornare nec at augue. 
            |   Integer semper feugiat varius.
            p
            |  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            |   Proin ex mi, gravida sit amet imperdiet vel, sodales a mi. 
            a.boton hola amigos

homepage.pug

include ../components/configs.pug
<!DOCTYPE html>
html(lang="en")
  include ../components/head.pug
  body
    include ../components/header.pug
    .contenido
      .contenido__side
        h2 Menu
        ul
          each menu in menus
            li=menu
      .contenido__principal
        h2 Titulo Principal
        p Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus expedita eum tempora. Inventore ipsum provident sint voluptatibus sapiente architecto officiis incidunt at, iste non, deserunt similique repellat quaerat laudantium voluptatem!
        p Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus expedita eum tempora. Inventore ipsum provident sint voluptatibus sapiente architecto officiis incidunt at, iste non, deserunt similique repellat quaerat laudantium voluptatem!
        a.boton Ver Más
  include ../components/footer.pug

.contenido{
	display: grid;
	grid-template-columns: 1fr 3fr;
	height: 75vh;
}

.contenido__side{
	display: flex;
	flex-direction: column;
	text-transform: uppercase;
	font-weight: bold;
	justify-content: center;
	background-color: #EEF1F8;
	padding: 35px;
	width: 100%;
	height: 100%;
}
.contenido__side ul{
	height: 50%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	color:#012179;
	list-style: none;
	padding: 0;
}

.contenido__principal{
	padding: 50px;
}

Tengan mucho cuidado con no dejar espacios extra al final de sus componentes. Si no se los marcara como error.

Me gusto bastante la parte de corroborar la clase anterior, lo sentí muy personal, como si se pusiera en mi lugar. Genial por eso. No creo que sea muy relevante para le curso pero pienso vale la pena decirlo. 😎

Así me quedó el reto

Reto:

Hace poco maqueté un proyecto de 3 páginas, todos tenían enlaces internos que se repetían por estar en servidor de desarrollo y en dos archivos se compartía un bloque diferente de información que estaba dentro de otro archivo.
Cuando llegó la hora de entregar el proyecto fue una pesadilla porque tuve que cambiar los enlaces de prueba por los enlaces de producción. Aparte de eso hubo cambios en el header y algunos bloques más. Pug me hubiera salvado en ese entonces, pero no tenía ni idea de su existencia.
Aunque el curso fue muy básico, lo que sigue ahora es practicar e ir conociendo el resto de beneficios que ofrece pug porque para ser tan conocido debe existir una gran cantidad de funcionalidades

Gracias por el curso, fue excelente

Reto superado!

Código:

reto.pug

extend componentes/plantilla.pug
block contenidos
  section.grid
    aside
        h2 Menu
        ul
        each enlace in enlaces
          li= enlace
    article
        h2= titulo
        p Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum animi tempora molestias
optio odio unde maiores, voluptas culpa aut autem corrupti non vel saepe in architecto nisi.
        p Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum rerum sit repellat quisquam at reprehenderit molestias, , debitis fugit ipsa dolore molestiae!
        a.boton Ver Más

Agrego en el CSS

.grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.grid aside {
	padding-top: 20%;
	padding-left: 20%;
	background-color: rgba(90, 121, 205, 0.200);
}

.grid li {
	color: #4667b9;
	list-style: none;
	text-transform: uppercase;
	font-size: 1.25rem;
	line-height: 3rem;
	font-weight: bold;
}

.grid article {
	padding: 10%;
	grid-column: 2/4;
}

.grid p {
	font-size: 1.5rem;
}

16. Finalizando ejercicio de Landing Page:

Interesante pug, bastante complejo en vez de usar HTML, pero con bastante potencial.

Reto cumplido 😊👍💚

Interesante pug, pero realmente es muy tedioso para proyectos sencillos, es bueno conocerlo y entenderlo un poco. Si existe es que esta solucionando un problema, me imagino que deben ser proyectos complejos y grandes, pero es una gran explicación.

mi reto:

SI tienen problema de identacion o espacios pueden usar la extension para VSCODE pug(jade) formatter

Reto cumplido

Si hago el include del footer en plantilla.pug , el footer no se en la pagina resultante, si el include lo hago en landing.pug , luego del contenido
entonces si se ve bien.

Lo que mas me ha encantado de PUG es que siento que me a ayudado a practicar y entender sobre la modularización, preparando terreno para cuando necesite usar modulos en React 😄

Esto fue lo que terminé haciendo en este módulo
https://codepen.io/joseriosdev/full/qBrGajB

Reto superado

extend componentes/platilla.pug
block contenidos
    section.container
      aside.left
        h2 menu
        ul
          each enlace in enlaces
            li=enlace
      article.right
        h2 #{titulos[0]}
        p.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas neque id facilis libero eligendi illo iusto? Ullam, consequatur ipsum tempora dolorem harum qui, magnam voluptatibus molestiae suscipit ad alias? Obcaecati.Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis cupiditate unde in magnam debitis enim ex eum eligendi, pariatur omnis et dolorem possimus vero a fugit id, dolore voluptate error.
        p.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas neque id facilis libero eligendi illo iusto? Ullam, consequatur ipsum tempora dolorem harum qui, magnam voluptatibus molestiae suscipit ad alias? Obcaecati.Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis cupiditate unde in magnam debitis enim ex eum eligendi, pariatur omnis et dolorem possimus vero a fugit id, dolore voluptate error.
        a.boton ver más

.container {
	display: grid;
	grid-template-columns: minmax(100px, 300px) 1fr;
	grid-template-rows: 1fr;
	height: 73.6vh;
}

.left{
	background-color: #eef1f8;
	text-align: center;
	padding-top: 50%;
}

.left ul{
	list-style: none;
	padding: 0 37%;
	line-height: 30px;
	text-align: start;
}
.left ul li{
	color: #012179;
	font-weight: 800;
	text-transform: uppercase;
}

.right{
	grid-column: 2 / span 3;
	margin: auto 100px;
}

Reto realizado 😃

Cometí varios errores , la cuestión es de práctica y paciencia.

Reto cumplido
layout
.

include data/data

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")
        link(rel="stylesheet", href="css/stylus.css")
        title #{titulo}
    body
        block header
            include include/header

        block main
        
        block footer
            include include/footer

data
.

-var titulo = "PlatziGames"
-var menu = ["Acerca","Noticias","Contacto"]

header

header 
    .header__titulo 
        h1 #{titulo} 
    .header__button 
        a(href="#") Registro

index
.

extends layout 

block main 
    main
        aside
            .aside__wrap
                h2 Menu
                ul
                    each opcion in menu 
                        li #{opcion}

        section
            article
                h2 Título Principal
                p Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus optio amet similique numquam dolor quaerat vero est, reiciendis beatae consectetur, quae nostrum ipsa facilis culpa nobis ipsum repellendus reprehenderit totam obcaecati sed repudiandae laborum quisquam.

                p Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse et corporis nam perferendis voluptate sed eligendi nulla voluptas natus est incidunt sequi maiores voluptatum obcaecati recusandae, modi, quasi aut impedit perspiciatis. Reiciendis sequi laudantium dolorem!

                a(href="#") Ver más

footer
.

footer 
    .footer__titulo 
        h1 #{titulo}
    nav
        ul
            each opcion in menu 
                    li #{opcion}

.
.
🌠🌠Resultado🌠🌠

Así quedo 😃 quieres ver el código?

.

El pug principal basado en la plantilla quedó así:

extend components/plantilla.pug
block contenidos
    section.description
        include components/sideMenu.pug 
        .description__article
                h2= titulos[0] 
                p Lorem ipsum dolor 
                 
                p Lorem ipsum 
                a.boton Ver más

El pug del sideMenu lo hice así…

aside.side-menu
    .side-menu__div
        h2 Menu 
        ul.side-menu__links 
             each enlace in enlaces 
                 li=enlace

Y los estilos de CSS que agregué fueron estos:

.description {
	display: flex;
	width: 100vw;
	height: calc(100vh - 200px);
}

.description__article {
	padding: 70px;
	display: inline-block;
	width: 75%;
	min-width: 480px;
	max-height: 700px;
	
}

.description__article p {
	margin: 30px 0;
	font-size: 20px;
}

.side-menu {
	width: 25%;
	max-width: 380px;
	min-width: 170px;
	padding: 70px 0 0 0;
	display: flex;
		flex-direction: column;
		align-items: center;
	background-color: #EEF1F7;
}

.side-menu__div {
	margin-right: 35%;
	/* margin-left: 10px; */ 
}

.side-menu__links {
	list-style: none;
	margin:0;
	padding: 10px 0;
}

.side-menu__links li {
	margin: 40px 0;
	font-size: 17px;
	font-weight: bold;
	color: #012179;
	text-transform: uppercase;
}

Lo que me gusto de pug es que ya solo te enfocas en el contenido que cambia, ahorrándote copiar y pegar código

Reto completado, buena clase, me ha gustado el tema este

Interesante PUG pero por alguna razón no le veo tan necesario cuando se trabaja con librerias como react etc:

La verdad muy interesante Pug pero, he echo los mismos pasos
que el profesor y prepos se me a cansado de tirarme errores con lo cual se me hizo bastante denso, obio que no quito que debo tener errores yo en la sintaxis.
Aun que parece facil, es bastante complejo y sacar la costumbre de usar TAB y espacio.

Mi reto

Magnífico, me llama bastante la atención pug. Creo que lo empezaré a usar de ahora en adelante.

Hasta el momento creo que este es uno de los mejores cursos y pug una de las herramientas más útiles, no sé por que no está en la Carrera de Desarrollo Web 😯

Reto cumplido.

Voy a probarlo, pero se ve mejor que el fenecido dreamweaver

Challenge complete¡¡

Me gusta bastante como se ve pug, esta bastante sencillo de utilizar.

Reto Cumplido:

listo use flex para posicionar y algunas clases, ahora lo interesante seria trabajar pug con movil first eso seria el siguiente nivel, o ya verlo con algun framework, que creo seria la verdadera tirada de los preprocesadores.

Reto cumplido

Reto cumplido

homepage.pug

extend componentes/plantilla.pug
block contenidos
  section.home
    aside.home__menu
      h2 menu 
      ul 
          each enlace in enlaces
              li.home__enlaces=enlace 
    section.home__articulo
      h2 #{tituloPrincipal}
      p.
          | Lorem ipsum dolor sit amet consectetur adipisicing elit. 
          | Commodi, quos cumque voluptatum labore nisi id quod temporibus 
          | tempore eos esse quae minima facere culpa numquam doloremque vel provident, cum quibusdam?
      p.
          | Lorem ipsum dolor sit amet consectetur adipisicing elit. 
          | Expedita enim quas eos sed recusandae totam repudiandae blanditiis quae officiis accusantium, explicabo, 
          | nisi consequuntur odit, eligendi illo iusto provident error! Deleniti voluptatum exercitationem nulla dolores 
          | excepturi delectus, repellat ullam? Sed, ea voluptatibus quam enim architecto cum non recusandae nulla nisi maxime!

      a.boton Ver Más

css

.home {
	display: flex;
}
.home__menu {
	padding: 2rem 9rem 2rem 2rem;
	background-color: #e4f5fb;
	min-height: 50vh;
}
.home__menu > ul {
	margin-left: 0;
	padding-left: 0;
}
.home__articulo {
	padding: 2rem 5rem;
	line-height: 1.4;
}
.home__articulo > p {
	margin-bottom: 2rem;
}
.home__enlaces {
	list-style: none;
	text-transform: uppercase;
	margin: 2rem 0;
	font-weight: 600;
	color: #3c5697;
}

el reto de la clasee siuuu!!

reto cumplido, me da unos errores cuando lo modularice, pero compila bien.

un detalle que no me gusta de pug es que si puede ser útil al momento de reusar código pero no me parece del todo como tener que manejar tantos archivos por estar dividiendo cada sección del código. A lo que quiero llegar es que no se me hace muy útil el hecho de tener un archivo header.pug otro section.pug otro footer.pug etc… Claro que gustos hay muchos!

La verdad pug puede ahorrarte tiempo, pero no megusta en el sentido de que si haces mal un espacio te manda un error o tu codigo se vuelve una nada -_- yo creo que es por que estoy acostumbrado a trabajar con el codigo puro de HTML, le voy a dar una oportunidad para usarlo por que tiene cosas muy interesantes.

Reto Cumplido !

Desarrolle el ejercicio desde 0, pueden verlo en mi repositorio.

https://github.com/juliolh0686/Reto_Pug

Así lo hice yo, espero sea de ayuda.
Tuve que agregar unas cuantas lineas al CSS y fueron estas

aside {
	display: inline-block;
	width: 25%;
	height: 71vh;
	padding: 60px 30px;
	background-color: #EEF1F7;
}
aside h1 {
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	margin: 0;
	font-size: 40px;
}
.aside__link-container {
	list-style: none;
	padding: 0;
}
aside li {
	padding: 18px;
	padding-left: 0;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	color: #012179;
}
main {
	display: inline-block;
	width: 74%;
	height: 71vh;
	padding: 0 50px;
}
main h1 {
	margin-top: 100px;
}

Luego agregue en el PUG lo siguiente

extend componentes/plantilla.pug
block contenidos
  aside
    h1.aside__title MENU
    ul.aside__link-container
      for enlace in enlaces
        li=enlace
  main
    h1 #{titulos[0]}
    p Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus repellendus nostrum harum numquam rerum nesciunt omnis sunt autem praesentium libero nemo similique atque dolor officia ad velit, sequi voluptas. Ipsa.
    p Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem sapiente molestiae veritatis rerum fuga harum consectetur? Nisi, nemo similique aut harum temporibus corporis natus explicabo debitis magnam ea modi atque!
    a.boton VER MAS

Y quedo así.

Me encanto la verdad seguire estudiandolo ❤️ …!
Profe = 5 stars

finalizando reto

Al principio fui reacio a PUG. Pero entiendo que es mi mente negandose a aprender. Así que lo tomare como un reto. Don’t stop learning

No se dice “Y todo se mira mucho mas limpio”, se dice “Y todo se ve mucho mas limpio”

Se parece 😄

Principal diferencia entre include & extends

• Con include, tu vas a agregar codigo dentro de una etiqueta
• Con extends, tu vas a seguir agregando codigo, pero fuera de una etiqueta. Por eso se le agrega un block bloc_name cuando usamos un extends.

.
En otras palabras, extends extiendo el contenido del html, mientras que include, solo incluye mas contenido adentro de una etiqueta.

me quedo con mi html clásico

Reto Cumplido:

Listo!!

La verdad es que me gusta como enseña el profesor y me pareció un módulo sumamente interesante pero, creo que me quedo con el HTML clásico. 😅

Usar pug me parece contraproducente.Genera mas trabajo.

Reto Finalizado

home.pug

extend componentes/plantilla.pug
block contenidos
  main.home
    .menu
      h2 MENU
      ul
        each enlace in enlaces 
          li
            a=enlace
    .content
      h1 TITULO PRINCIPAL 
      p #{contenido}
      p #{contenido}
      a.boton VER MAS

CSS

.home {
	width: 100%;
	min-height: 600px;
	display: flex;
}

.menu {
	width: 25%;
	min-width: 100px;
	padding-top: 40px;
	padding-left: 40px;
	background-color: #EEF1F8;
}

.content {
	width: 75%;
	min-width: 220px;
	padding: 50px 70px 0 50px;
}

.menu ul {
	padding-left: 0;
	list-style: none;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 1px;
}

.menu li {
	margin-top: 20px;
	color: #405694;
}

RETO TERMINADO

Código homepage.pug

extend componentes/plantilla.pug
block contenidos
	.container 
	section.menu
			.menu__contenido
		h2 #{titulos[4]}
		ul 
			each enlace in enlaces 
				li=enlace
	section.main
		h1 #{titulos[0]}
		p Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi reprehenderit unde itaque dicta hic repellendus ducimus quia distinctio deleniti iure autem iusto exercitationem magni, id suscipit voluptas odio optio atque.
		p Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti similique iure voluptas voluptates reprehenderit neque consequatur dolorum asperiores numquam quos repudiandae incidunt maiores officiis, non nemo vel nostrum inventore minus?
		a.boton ver mas

CSS

.container{
	display: flex;
	align-items: center;
}
.menu{
	display: flex;
	background-color: #EEF1F7;
	width: 400px;
	padding: 50px 0 50px 40px;
}

.menu h2{
	font-size: 24px;
}

.menu ul{
	padding: 0;
}
.menu ul li{
	list-style: none;
	line-height: 50px;
	text-transform: uppercase;
	font-weight: 700;
	color: #8898C0;
}

.main{
	padding: 30px;
}

He aquí el desafío nenes

Hice el reto, pero tuve un problema con extend y block: me compilaba sin problemas pero lo que tenía en mi archivo de pug no lo renderizaba en el HTML. Al final terminé utilizando include para todo y sí fucionó.

Resultados:

Me costo un poco finalizarlo pero al final salió:

puede ser mi interpretación pero pug es agradable de usar si ya tienes el css listo sino perdería gran parte del dinamismos con el que funciona o no sabes nada de react

No es mucho, pero es trabajo honesto

Aquí el código en Pug

extend componentes/plantilla.pug
block contenidos
    main.reto 
        .main__menu-lateral 
            include componentes/menu-lateral.pug
        .main__contenido
            h2 Titulo Principal 
            p.
                Lorem ipsum dolor sit, amet consectetur 
                adipisicing elit. Blanditiis mollitia 
                sint explicabo! Voluptate amet quasi 
                magni ab ad aut iusto maiores delectus 
                sed odit soluta enim voluptatum, 
                perspiciatis sint in.
            p.
                Lorem ipsum dolor sit, amet consectetur 
                adipisicing elit. Blanditiis mollitia 
                sint explicabo! Voluptate amet quasi 
                magni ab ad aut iusto maiores delectus 
                sed odit soluta enim voluptatum, 
                perspiciatis sint in.
            a.boton Ver Más

Aquí el código del menú lateral

h3 MENÚ
ul
    each enlace in enlaces 
        li
            a(href="/")=enlace

Intente hacerlo con extend pero no me funciono, tendre que repasar las clases para entenderlo mejor:)

Y por ultimo el css

.reto{
	display: flex;
	height: calc(100vh - 200px);
}
.main__menu-lateral{
	width: 30%;
	margin-top: 40px;
	padding-left: 40px;
}
.main__menu-lateral h3{
	margin-bottom: 20px;
}
.main__menu-lateral ul{
	list-style: none;
	padding: 0;
}
.main__menu-lateral ul li{
	margin-bottom: 30px;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 700;
	color: #435792;
}
.main__menu-lateral ul li a{
	text-decoration: none;
}
.main__contenido{
	width: 70%;
}
.main__contenido h2{
	margin: 40px 0;
}
.main__contenido p{
	margin-bottom: 40px;
	font-size: 18px;
}

Así se ve en el navegador
![](

Cualquier recomendación o corrección es bienvenida 😄

El resultado del reto:

extend components/plantilla.pug
block contenidos
	.main-container 
		nav.menu
			h2 MENU 
			ul.menu__lista
				each enlace in enlaces 
					li.menu__item=enlace
		section.intro 
			.intro__contenido
				h2 #{titulos[0]}
				p Lorem ipsum dolor sit amet consectetur adipisicing elit. 
					| Accusamus, dolorum veritatis nisi quisquam quo suscipit
					| aliquid voluptates sequi excepturi exercitationem voluptatum
					| aliquid voluptates sequi excepturi exercitationem voluptatum
				p Lorem ipsum dolor sit amet consectetur adipisicing elit. 
					| Accusamus, dolorum veritatis nisi quisquam quo suscipit
					| aliquid voluptates sequi excepturi exercitationem voluptatum
					| aliquid voluptates sequi excepturi exercitationem voluptatum
				a.boton Leer Mas

No es mucho pero es trabajo honesto

Reto cumplido, cuesta un poco acostumbrarse a pug, considero que es utili para temas de plantilla, reutilizar partes de codigo agiliza y reduce tiempo.

Aunque me “lleve un poquito mas de trabajo”, aunque solo haga landing pages, mejor sigo haciendo mis bonitas etiquetas de abre y cierra, copiando y pegando bloques de codigo xdd

Recuerda que son herramientas, y la mejor de todas es aquella con la que te sientas comodo trabajando.

.
En mi caso, una vez le hechas un ojo a React, y a ver todo como componentes, no le veo mucha relevancia a Pug. Ya un pre para CSS si ya es otra cosa. 💚

Despues de repasar un poco de css, lo termine 😃
https://imgur.com/a/fBGpB5y

Link del ejercicio en la nube por si quieren darle una visita
Link del ejercicio

Link del template de glitch con pug

Pug es el nuevo React xD
creo que primero fue pug, pero para una SPA creo que estaria muy bien, usando js solo para mover componentes y las rutas

Reto completado:

La verdad a mí sí me ha gustado mucho PUG! 😃

Saludos.

Así me quedó el reto.

Excelente clase 👌