Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Frontend Responsa: Implementando código modular: index.html.slim
/ Hero
.row
.hero
.container
h1.hero__title Nós sómos Waza
h2.hero__subtitle Lorem lipsum dolor sit amet consectue lorem dorem.
.hero__links
= link_to 'Conheça o nosso trabalho', '/', class: 'btn'
/ About
.row
.section.section--about
.section__header
h1.section__title Nossa história
h2.section__subtitle Lorem lipsum dolor sit amet consectue lorem dorem lipsum.
.section__body
.video-player
= image_tag 'video-placeholder--large.jpg'
p Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
p Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
/ Works
.row
.section.section--work
.section__header
h1.section__title Últimos trabalhos
h2.section__subtitle Lorem lipsum dolor sit amet consectue lorem dorem lipsum.
.section__body
.list.list--work
- for i in (1..4)
.list__item
= link_to '/', class: 'card' do
.card__media = image_tag "work-thumb-0#{i}.jpg"
.card__title Lorem Dorem
.card__body
p Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.
.cta
= link_to 'Ver todos os projetos', '/', class: 'btn'
/ Testimonial
.row
.section.section--testimonial
.section__header
h1.section__title Clientes Satisfeitos
h2.section__subtitle Lorem lipsum dolor sit amet consectue lorem dorem lipsum.
.section__body
blockquote.testimonial
.testimonial__meta
.testimonial__media
.avatar
= image_tag 'testimonial-avatar.jpg'
.testimonial__name Rafael Torales
.testimonial__description Designer no Startaê
.testimonial__quote
p Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut.
/ Contact
.row
.section.section--contact
.section__header
h1.section__title Fale com a gente
h2.section__subtitle Lorem lipsum dolor sit amet consectue lorem dorem lipsum.
.section__body
form.form
fieldset.fieldset
.form__row
.form__field
input.form__input type='text' placeholder='Nome'
.form__row
.form__field
input.form__input type='email' placeholder='Email'
.form__row
.form__field
input.form__input type='text' placeholder='Telefone'
.form__row
.form__field
textarea.form__input placeholder='Mensagem'
.form_row
button.btn type='submit' Enviar
.list.list--contact
.list__item.list__item--address
address.address
| Superquadra Norte 214<br>
| Bloco A, Sala 214<br>
| Asa Norte<br>
| Brasília, Brasil<br>
.list__item.list__item--email
= link_to 'oi@waza.io', 'mailto:oi@waza.io'
.list__item.list__item--phone
= link_to '+55 61 3344-3344', 'tel:3344-3344'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment