Skip to content

Instantly share code, notes, and snippets.

@Andre-LA

Andre-LA/estilos.css

Last active September 1, 2020 23:10
Show Gist options
  • Save Andre-LA/436c4de2cd8900e102a53b21f3021258 to your computer and use it in GitHub Desktop.
Save Andre-LA/436c4de2cd8900e102a53b21f3021258 to your computer and use it in GitHub Desktop.
Download ZIP
HTML-basico em lpages
Raw
estilos.css
-- estilos/estilos.css
html {
font-family: "Roboto Slab", sans-serif;
background-color: #00539F;
color: #461f02;
}
body {
width: 600px;
margin: 0 auto;
background-color: #ECAB50;
padding: 0px 20px 20px 20px;
}
h1 {
margin: 0;
padding: 20px 0;
color: #FFEF00;
font-size: 60px;
font-family: "Lobster";
text-align: center;
text-shadow: 3px 3px 1px #3c1f014f;
}
p, li {
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
}
img {
display: block;
margin: 0 auto;
}
Raw
html-basico.lua
-- Repositório do lpages: https://github.com/andre-la/lpages
-- $ tree . #estrutura do projeto
-- .
-- ├── estilos
-- │   └── estilo.css
-- ├── html-basico.html
-- ├── html-basico.lua
-- └── imagens
-- ├── firefox-logo.png
-- └── firefox-products.svg
-- Para gerar o HTML:
-- lua html-basico.lua
-- Para um desenvolvimento mais rápido, eu uso o [luamon](https://github.com/edubart/luamon)
-- luamon html-basico.lua
-- inspect = require 'inspect'
local lpages = require 'lpages'
local e = lpages.elements
local tags = {
h1 = lpages.tag.new'h1',
h2 = lpages.tag.new'h2',
h3 = lpages.tag.new'h3',
h4 = lpages.tag.new'h4',
h5 = lpages.tag.new'h5',
h6 = lpages.tag.new'h6',
ul = lpages.tag.new'ul',
ol = lpages.tag.new'ol',
li = lpages.tag.new'li',
a = lpages.tag.new'a',
link = lpages.tag.new'link',
}
local page = e.html{
e.head{
e.title'teste',
e.meta{charset = 'utf-8'},
lpages.element.new(tags.link, {href="estilos/estilo.css", rel="stylesheet"}),
lpages.element.new(tags.link, {href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto+Slab&display=swap", rel="stylesheet"}),
},
e.body{
--[ Aprendendo HTML via MDN [
lpages.element.new(tags.h1, nil, 'Aprendendo HTML via MDN'),
--[ Sobre o meu gato [
lpages.element.new(tags.h2, nil, 'Sobre o meu gato'),
e.p{'Meu gatinho é ', e.strong'muito', 'mal humorado'},
--] Sobre meu gato ]
--[ Sobre a Mozilla [
lpages.element.new(tags.h2, nil, 'Sobre a Mozilla'),
e.p{'A Mozilla é uma comunidade global de'},
lpages.element.new(tags.ul, nil,
lpages.element.new(tags.li, nil, 'técnologos'),
lpages.element.new(tags.li, nil, 'pensadores'),
lpages.element.new(tags.li, nil, 'construtores')
),
e.p{'Trabalhando juntos...'},
--[ Marca Firefox [
lpages.element.new(tags.h3, nil, 'Marca Firefox'),
e.p{'Abaixo encontra-se o logotipo da marca Firefox, que abrange alguns softwares ou serviços, como o Firefox, Lockwise, entre outros'},
e.img{src='imagens/firefox-logo.png', alt='Logotipo da marca Firefox'},
e.p{'Outros produtos da marca Firefox:'},
lpages.element.new(tags.ol, nil,
lpages.element.new(tags.li, nil, 'Monitor'),
lpages.element.new(tags.li, nil, 'Send'),
lpages.element.new(tags.li, nil, 'Listen'),
lpages.element.new(tags.li, nil, 'Lockwise')
),
e.p{'Logotipos podem ser vistos abaixo'},
e.img{
src = 'imagens/firefox-products.svg',
alt = 'Lista vertical de produtos Firefox: Monitor (o ícone é uma lupa); Send (o ícone é um guarda-chuva); Listen (o ícone são duas orelhas); Lockwise (o ícone é uma fechadura)'
},
e.p{'Não deixe de ler o ', lpages.element.new(tags.a, {href='https://www.mozilla.org/pt-BR/about/manifesto/'}, 'Mozilla Manifesto')}
--] Marca Firefox ]
--] Sobre a Mozilla ]
--] Aprendendo HTML via MDN ]
}
}
--print(inspect(page))
io.open('html-basico.html', 'w')
:write('<!DOCTYPE html>\n' .. tostring(page))
:close()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment