Rodapé, conteúdo periférico e links - @Curso em Vídeo HTML5 e CSS3

[@_Victor-Lourenco]

*PROPRIEDADES DE ESTILO PARA LISTAS:* Segue algumas Propriedades de Estilo extras apresentadas no vídeo para usarmos dentro de seletores de listas ( ex.: *ul {...}* ): Quando criamos uma lista dentro de outro elemento, dentro de um aside por exemplo, geralmente as "bolinhas" da lista (marcadores sequenciais no caso de listas ordenadas) irão ficar para fora do elemento pai (aside)... Para resolver isso e manter a lista inteira dentro do elemento pai, devemos utilizar a _Propriedade de Estilo_ " *list-style-position* " com o valor " *inside* " (por padrão marcadores de listas são posicionados com o valor " _outside_ "). Essa propriedade define a *posição dos marcadores da lista* e dessa forma as "bolinhas" ficarão para dentro do elemento pai. Outra questão, às vezes temos uma lista com muitos itens, muito extensa... E queremos dividi-la em duas partes para manter uma formatação mais agradável... Para fazer isso, temos a _Propriedade de Estilo_ " *columns* " com o valor " *2* ". Com isso iremos dividir a nossa lista em *duas colunas* (se quiser dividir em mais de duas colunas é só alterar o valor numérico da propriedade). É possível trocar as "bolinhas" ou marcadores de listas por outro símbolo, um emoji por exemplo. Para fazer isso, devemos usar a _Propriedade de Estilo_ " *list-style-type* "... Como valor dessa propriedade, devemos colocar entre aspas 'simples' o *número do código do emoji* que escolhermos (sem o "U+"), e após isso, para de fato carregar o emoji, adicionar uma contrabarra ( *\* ) antes do código do emoji e ainda dentro das aspas 'simples'. *Obs.:* A troca de símbolos de lista não é 100% compatível com todos os navegadores. Uma coisa que pode acontecer é o nosso símbolo ficar "grudado" no item da lista, para evitar isso é indicado acrescentar um "espaço" *entre* o emoji e o item de lista. Para fazer isso, ainda dentro das aspas 'simples' e DEPOIS do código do emoji, acrescente outra contrabarra ( *\* ) e logo após isso o código " *00A0* " ou " *0020* " (comando de *espaço* ). Se você quiser, pode inserir mais de um espaço, é só repetir o processo. *Obs.:* Sempre que você quiser dar um "espaço" ou inserir emojis pelo CSS, para qualquer outro elemento e não somente listas, faça como foi orientado nesse texto. *Exemplo geral:* ul { list-style-position: inside; columns: 2; list-style-type: '\1F5F8\00A0\00A0'; } *Nota:* Ainda existem muitas outras Propriedades de Estilo para *listas* além dessas três apresentadas no vídeo e descritas nesse texto. *MARGIN NEGATIVA:* No nosso projeto, dentro da área " *Saiba Mais* " (aside), formatamos o nosso h3 de um jeito que parece que o _subtítulo faz parte do topo da caixa._ Para fazer isso, inicialmente atribuímos um destaque de cores ao subtítulo e adicionamos um pequeno padding de 10px no mesmo... O resultado desejado seria que a caixa do h3 crescesse para "fora" e ocupasse a exata forma do topo da caixa do aside, resultando no efeito descrito. Para isso, configuramos as margins *laterais e superior* do nosso h3 com um valor *negativo de -10px,* dessa forma a caixa do h3 irá crescer para "fora" e ocupará a forma do topo da caixa aside. A margin (espaçamento externo) foi configurada com um valor negativo, *na prática essa margin está indo para dentro e se expandindo de forma inversa,* abrangendo o topo do aside. Uma mesma configuração com um valor positivo no margin não daria o mesmo efeito. Para fechar, posteriormente é só fazer o arredondamento da parte de cima da caixa do h3, para ficar condizente com a parte inferior da nossa caixa aside.

[@joaobomfim695]

Terminei esse projeto, centralizei o video, ficou mt bom, dá até orgulho de ver o site completo.

[@romulonunes7908]

como fez com o video? tentei aqui e até agora nada :(

[@joaobomfim695]

@@romulonunes7908 no material pdf tem explicando como faz, mas pra entender como funciona recomendo pesquisar sobre "position" dps

[@joaobomfim695]

@@romulonunes7908 pra centralizar vc usa margem negativa ou padding tbm funciona

[@romulonunes7908]

@@joaobomfim695 ah mano botofé, só reparei agora, geralmente eu leio o pdf dps do modulo p relembrar as coisas, mas vou dar uma olhada antes partir de agora, vlw ;)

[@deyvidgondimdejesus7172]

Valeu por lembrar do pdf tava sofrendo aqui pra fazer o vídeo 😅

[@deverik.]

Cara, quando fui fazer meu projeto, tive mt dificuldade pra dividir a lista em 2, fiz duas ID pra conseguir mas deu certo. O Gurnabara só utilizou (columns: 2;) kkkkk. Mano, fiquei com a boca aberta, o que é a informação em galera? Aula top, Parabéns.

[@matheusferraz8964]

tava co o mesmo problema, eu não tinha colocado as "li" dentro da "ul", aí envelopei e deu certo

[@Umgolbege]

@@matheusferraz8964 e eu fiz o mesmo deu maior trampo pra ficar igual (quase igual) coloquei float coloquei text align left e tudo mais fiquei uns 30 min fuçando kkk até ver que era so por isso !! kkkkkkkkk

[@robertsmith1762]

Eu tbm fui pelo caminho mais difícil.. que raiva vei kkkkkkkkkkkkkkkk

[@UkuleleNaoÉCavaquinho]

@@robertsmith1762 eu quebrei muito a cabeça mas usei o display: inline block; kkk com esse comando eles ficam em linha mas ainda são block level se não estou enganado.

[@robertsmith1762]

@@UkuleleNaoÉCavaquinho 😂😂😂😂

[@pedrolira4134]

Gente, tenho uma dica para vocês, ao invés de criarem uma classe e ter que colocar ela em cada link externo vocês podem colocar o parâmetro blank no CSS. Segue o modo que utilizei: a[target="_blank"]::after {content: '\00a0\1f517';} Desse modo, todos os links que levam para a área externa terão o clipe :)

[@ViniBenzAmg]

muito bom irmão valeu ai

[@beatrizcarmo9911]

valeuuuu😁

[@afonsoguastucci769]

13:34 DICA: Coloque o cursor em uma das palavras "blank" do seu código; Aperte ctrl+D e toda palavra "blank" a partir daquela será selecionada. Após isto utilize a seta direita e digite a class="externo"

[@luiz7766]

obg merece o mundo

[@reed0ne853]

vlw pela dica amigo !

[@deverik.]

orra, que massa

[@carlinhosbatistaf7]

Só 13 likes? Lamentável. Obrigado, meu brother, que Deus abençoe

[@MBLGBTQI]

@@carlinhosbatistaf7 26

[@Geremiasafirmacoes]

Vai cara, pula. Você é um gato. kkkkkkkkk Top demais as aulas, estou amando e praticando muito. O negócio é praticar. Parabéns ao canal e toda a equipe, por disponibilizar um conteúdo tão rico gratuito Muito obrigado, Gustavo!!

[@gambiarradeveloper4950]

gato sedentario obsoleto quase cai

[@robertsmith1762]

falhou em ser gato kkkk

[@ThiagoSantos-gu7my]

Triste saber que esse vídeo tem 10k de views e não tem 1k de likes, um curso maravilhoso, gratuito, o mínimo que deveríamos fazer é deixar o like sempre......

[@thaynyan]

Poisé Thiago, quem faz pela plataforma do curso em vídeo a gente nao tem acesso a deixar o like lá. Tem que abrir o youtube pra deixar o like as vezes isso acaba impactando negativamente, eu mesmo não abro TODOS os videos no youtube para assistir. Todos que eu vi pelo YT eu deixei like

[@aninha22ist61]

é pq muita gente assiste no site oficial pra pegar certificado e lá n tem como dar like!

[@augustomedeiros9759]

Pior ainda é na época que eu tô vendo, tem atualmente 71k de views e pouco menos de 5k de likes

[@renanntj]

Que orgulho chegar aqui usando um telefone!!!

[@ErikaAlves]

Parabéns!!!!!

[@Rúben-f3i]

Uma lenda

[@blackphoenix9680]

Parabéns Você é um guerreiro!!

[@williamoliveira8123]

Eu também tô no "celular".

[@p4uloc4rv4lho]

Força

[@moises1625]

Para quem quer criar diferentes colulas na lista para cada tela faça assim: Coloque esse comando @media (max-width: 600px) { aside > ul { display: grid; grid-template-columns: 1ft; } } E no comando coloque: UL { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; } Com isso vc terá 3 colunas quando a tela tive maior que 600px e 1 só coluna quando estiver igual ou menos que 600px; Espero ter ajudado 😉

[@jordandeodato]

Alterei o ícone da lista dessa forma: list-style-type: '✓' e deu certo 😁

[@henriquemafortt]

em alguns navegadores não funciona essa função. mais ela funciona sim

[@TokaGado]

Eu usei aquela pseudo-elemento: aside > ul > li::before{ content: '✓ ' }

[@wesleyscunha]

Obrigado Guanabara e CursoemVideo. Tenho um tempo desanimação, mais vocês estão deixando meu crescimento na carreira cerscer novamente.

[@spectralofc1967]

N desisti n mn👊🏽

[@lucasmelo1039]

Incrível como com você sempre aprendemos coisas novas, ta aí 3 propriedades que eu não conhecia, text-indent, list-style-position e o colum. Antes de ver os vídeos em que você vai criando o projeto, como eu não conhecia essas propriedades acabei recorrendo ao display: flex na lista dividindo a mesma em duas listas com a tag , e nesse caso da indentação utilizei o pseudo-elemento before, não ficou totalmente igual mas é legal saber que tem mais de uma forma de fazer, muito top.😁

[@eddiedojiu-jitsu1251]

Também fui na mesa pegada, fiz duas UL coloquei dentro de uma div e coloquei o display-flex

[@romulonunes7908]

obg por ser um divisor de águas na minha vida.

[@sandwicheems]

6:11 interssante, para criar colunas fiz o seguinte: HTML: Cupcake 1.6 - Donut 3.0 - Eclair 2.2 - Froyo 2.3 - Gingerbread 3.0 - Honeycomb 4.0 - Ice Cream Sandwich 4.1 - Jelly Bean 4.4 - KitKat 5.0 - Lolipop 6.0 - Marshmallow 7.0 - Nougat 8.0 - Oreo 9.0 - Pie CSS: div { display: inline-block; }

[@HamiltonGJr]

Apanhei pra configurar as fontes lá atrás. Insisti como o professor orientou a fazer e deu tudo certo. Ouçam o mestre!

[@drimachado667]

Estou apaixonada pelo resultado, simples e incrível, muito conteúdo nesse projeto

[@helenformighieri]

fiquei horas tentando colocar em duas colunas o ul no meu projeto haha, como é bom ter conhecimento, simplifica a vida demais!

[@zoltancaputo9562]

Fiz módulo 2 direto na plataforma. Excelente material didático em pdf, exercícios propostos . Vale a pena se inscrever!

[@Familyhayzn]

top, top, top

[@Hector-np3zi]

Kkkkkkk esse gato do Guanabara é deveras fofo

[@alexmacau81]

Terminei o projeto centralizei o vídeo, mas quero assistir a próxima aula, assim mesmo. Guanabara é muito ótimo!

[@mohamedbinladen9711]

Didática incrível, aprendi muito mais do que com vários materiais por ai

[@epires2]

O melhor momento do vídeo 7:55 kkk Esse gatinho tinha que participar de todos os vídeos 😂

[@onacelio3994]

Finalmente Guanabara, tava loucão pra esse vídeo, não tava conseguindo fazer umas etapas. 😺

[@omidmobilecontent4748]

Apenas marcando presença, com um comentário para melhorar o engajamento do vídeo, valeu professor Guanabara! Ótimo vídeo!

[@gabrielanimacoes9752]

Obg prof por mais uma aula, o curso está maravilhoso, continue assim! :)

[@gabrielanimacoes9752]

(Antho se tiver aq........)

[@PatsFerrer]

Caraca eu fiz umas gambiarras nessas colunas antes de ver esse vídeo, viu.. uahsuahus eu tinha separado ela em duas, colocando elas dentro de uma div.. aushuahs resumindo, só sei que tive que usar o 'inline-block' e dar gap. E no 'Quer aprender mais?' fiz outra gambiarra, usando "border-top-right-radius;", "border-top-left-radius;" e "outline: 10px solid cor;" sei nem o que eu fiz, eu só fui lá no 'inspecionar' e saí fazendo até juntar direitinho.. uahsuahsu Com o mestre fazendo tudo fica mais fácil uahsuhaus

[@lucasvilasboas7326]

Muito fera !!!! professor tu manja muito !

[@questao01]

Pra quem ficou na duvida, dentro de o link perdeu o background-color, a solução que eu achei foi coloca-lo em uma class sozinho. a.externoA::after{ content: '\00A0\1F517'; } a.externoA{ background-color: var(--cor2); }

[@Gostosolucas]

se você quiser deixar o footer um pouquinho mais f*d*, faz isso aqui: footer { background-color: var(--cor5); color: white; text-align: center; font-size: 0.8em; padding: 5px; } footer a { color: white; font-weight: bolder; text-decoration: none; transition-duration: 0.5s; } footer a:hover { background-color: var(--cor3); border-radius: 5px; text-decoration: underline; margin-left: 5px; } footer a ::after { margin-left: 0px; background-color: var(--cor5); border-radius: 0px; text-decoration: none; } explicação: o 'footer a :hover', vai adicionar um background e afastar o link que você colocou. daí o 'footer a ::after', vai tirar esse background e esse afastamento assim que o mouse/cursor sair de cima do link, mas de uma maneira mais suave. Bons estudos!

[@alexsilva663]

Muito boa aula, e engraçada a parte da invasão do gato kkk!

[@guilhermechaves3833]

o site é lindo demaisssss, projeto maravilhoso

[@franklinnilk7908]

Professor incrível 👏🏻👏🏻... Gostei do "pulo do gato" 😅😂😂😂❤️

[@murilosantos187]

Vídeo sensacional, um dia quero ir no Rio de Janeiro agradecer você pessoalmente.

[@erikreis2391]

cara, que foda seu curto irmão!

[@abrahamfelix1837]

Adorando como o projeto tá ficando

[@Onsllaught]

Perfeito professor !! Eu modifiquei a parte das versões do Android, ali eu fiz um hover para modificar a cor quando passa nas versões com nomes de doce.

[@raise8715]

conteudo top demais

[@petbanhoetosa6786]

a aula é excelente , mas o gato roubou a cena ...kkkkkkkk amo gatos

[@clebersantos7519]

Boa Gustavo, solta mais vídeos desse projeto na semana ✌️.....

[@lobosiz834]

Muito obrigado Guanabara ti aprendendo muito 🐱🐱🐱

[@Loop.developer]

Muito bommm vc e o melhor 👏🏻👏🏻👏🏻👏🏻

[@muriloferreira8175]

like em todos os videos, conteúdo maravilhoso.

[@victoryohan5495]

Obrigado por mais uma aula professor Gustavo & time ! ri muito com o pulo espalhafatoso do gatinho web ahuhsuahua

[@GabrielAlves-cf8wy]

Consegui fazer o projeto praticamente sozinho, que orgulho!

[@amortyzador.5766]

Kkkkkkkkkkkkk o gatinho foi a mais

[@carloshenriqueoliveira79]

vai vai pula vc é gato ksksksksksk todo serio aqui e o cara faz isso ksksksksksksksk bom demais cara foi digitando codigos contigo nas suas aulas que minha digitação melhorou absurdamente galera que tem medo de digitar devagar pratiquem ajuda demais ce ta doido o foda é que a gente erra pra caraaaalho tbm ai complica ksksks mas apaga e tenta de novo faz parte do ser humano

[@Manualmind.]

por enquanto ta moleza ja terminei o site e criei uma nav totalmente adaptada pra celular, super responsivo, acho que o mais difícil são as ideias de site mas acho que em uma situação real de trabalho pode ser que tenha um design que ja entregue o protótipo do site, dai você só põe pra funcionar

[@Alexander-m2]

Top eu também Tava aguardando 🤩

[@MPENT12]

não estou nem um pouco afim de estudar programação hj, mas com muita disciplina irei estudar!

[@esporte2036]

Opa vamos de curso.⚡👏

[@Gustavo-Ayres-Lima]

- Pula você é um gato. ( 8:06 ) Ele quase errou o pulo tadinho. 😂😂😂😂😂

[@didimarinhoo]

vou sentir saudades depois que finalizar o curso kk

[@rafaelcampanincarneiro3553]

curso top demais slk ❤

[@sandwicheems]

8:29 o gato está apenas observando se o guanabara está explicando direitinho 😂

[@GuilhermeSilva-yp4fe]

ótima aula!

[@marcusribeiro5759]

mto legal!

[@snailsfastestworld8228]

No meu caso (estou utilizando o navegador Edge), não foi possível usar valores negativos para a margem, então mudei o css para aside { background-color: var(--cor1); border-radius: 15px; } aside > * { /* faz todos que estão dentro do aside ficarem com essa propriedade */ padding: 10px; } aside > h3 { border-radious: 15px 15px 0px 0px; /* usei 15px para a caixa do aside */ }

[@Familyhayzn]

galera de like

[@lucasnovaes-programacao2869]

Você poderia fazer aulas sobre o Vue.js ou de JavaScript intermediário?

[@AS_Souza]

Eu consegui colocar o emoji de link e o checked no meu site, mas eu fiz de outra maneira, eu usei uma imagem .svg que são bem mais leves que outros formatos e pode ser regulado a largura e altura muito fácíil direto pelo VS Code, já que é uma imagem gerada por vetores. (menos de 3KB pelas duas imagens, e ela não perde qualidade se dermos zoom.)

[@jhulycurty4964]

mdssss FINALLY

[@stupidcompguy]

oi

[@jonaspetty8767]

@@stupidcompguy opa chapa

[@hebergoncalves4981]

Obrigado!!!

[@Isadora-kr9pu]

Final do módulo 2 e eu ainda não desacostumei dele dizendo: "meu nome é Gustavo Guanabara, eu sou seu professor e está começando agora mais uma aula".

[@ChristyanBrayan]

só faltou o "olá, pequeno gafanhoto"

[@alantchunay]

10:00 pra galera mais experiente, dentro do aside eu coloquei o header e configurei background-color(cor) dai ficou todo preenchido como o do guanabara, tem algum problema ter colocado o header dentro do aside? por que se me lembro bem o professor disse que no html5 foi liberado colocar qualquer tag dentro de outra tag

[@andretakayama2088]

Baita aula

[@Akwjbwbqm]

Pessoal, eu não sei se foi dito durante o curso, mas tem algum vídeo que ele falou sobre o aside, section, nav e outras estruturas? Eu lembro dele comentando no vídeo sobre box, em vídeos onde ele fez só o header do site, em alguns sobre semantica, mas não lembro se teve explicação diretamente sobre o que cada um faz. Não ficou mt claro para mim em que situação usar cada um

[@l-victorss2218]

cabo q fazendo sozinho eu tirei o estilo do ul e so coloquei no li::before o content com o emoji do proprio windows (win + .) / agr despausando o video vi q ele usou os codigos p dar espaço, com o content eu so dei um espaço depois do emoji e deu certinho

[@laraconde11]

conheci o seu anal por outra pessoa e amei, to começando a programar e ja vi alguns videos do curso de python (que vou rever) e queria saber se o curso ainda serviria atualmente, pq o curso foi gravado em 2017. De qualquer forma amo sua didatica, e adorei saber que vc tem um gato, tenho 5 (risos), de qualquer forma adoro suas aulas ^^

[@joaocuriosidades2331]

melhoor professor

[@tiagovelloso4989]

kkkkkkkkkkkkkk "pula você é gato" o gato pulando:"meu deus será se sou um gato msm?"

[@lEduardol]

8:08 -Pula vc e gato 🤣🤣🤣

[@lucasclemente5093]

eu te amo, guanabara

[@mcperaltaitz]

O pulo do gato 🐈 kkkkkkkkkkk

[@RaimundoNonato-of3fo]

Aula bem explica e objetiva Professor como faço para mudar a cor de uma palavra numa frase? Por exemplo: semana passada do mês passado Quero deixar a palavra SEMANA na cor vermelha e o restante da frase na cor branca

[@Houlz]

Você pode utilizar a tag **palavra** e estilizar no css, colocando um *color: red;*

[@daianesampaio8172]

Fiquei presa do momento do gato kkkkkkkkkkkkkkkkkkk

[@GracielaMoreiraCosta]

'Parabéns você, o teu fiofó da famoso' kkkkkkkkkkkkkkkkkkkkkkkkkkkk

[@HamiltonGJr]

O gato tava com preguiça de pular... 🐱🐱🐱

[@MarcosFelipe-up9lc]

Toopppppppppppppp!!

[@rodrigoramos1x]

*Dúvida* : Por que ao configurar a margem em 9:10 , o alinhamento das caixas funcionou perfeitamente com valores negativos e não positivos? Qual seria a diferença entre um valor positivo e um negativo afinal?

[@antoniojunior6229]

O valor positivo, basicamente funciona pra "dentro" da caixa h3. Quando se coloca o valor negativo, o padding tá indo pra fora da caixa, na direção contrária (negativa) do "normal", q seria um padding pra dentro. Afinal, o padding é o preenchimento da caixa, ou seja, entre a borda e o conteúdo. No caso do padding negativo, ele ta preenchendo pra fora, sacou?

[@rodrigoramos1x]

@@antoniojunior6229 Ah entendi! Mas isso não seria a mesma coisa que configurar uma margem? Por que optar por um padding negativo?

[@sweetappalled]

@@rodrigoramos1x.

[@rerofreaks3796]

Não tankei o gato caindo XDDDDDDDDDDDDDD

[@EduardoOliveira-ic9ho]

Será que quando esse curso termina o curso de php ainda vai está atualizado?

[@latissia1]

hahaha gato sem vergoinha :D

[@lu7_exemple]

tropa do que le o pdf e n sabia que ele ia fazer video explicando como fazer

[@Lumini_Luminiverso]

Nos primeiros vídeos, 6k curtidas, agora tem só 1.8k... tomara que não tenham desistido.

[@MarcosFelipe-up9lc]

Volta com o curso de GitHub por favor.

[@danielmatheus4594]

no site do curso em vídeo tem esse curso. dá uma conferida lá.

[@dennisro93]

4:42 no meu funcionou

[@samuel_s_a_m]

❤️

[@danielmatheus4594]

Professor, esta aula ainda não está no site do Curso em Vídeo. Tem alguma previsão de quando estará lá e de quando a prova de certificação do Módulo II estará disponível?

[@aninha22ist61]

já está funcionando!

[@RMenethil]

Tem como mexer no tamanho dos ícones de estilo?

[@zackoevangelista]

Para tirar os pontilhados do (pq achei feio): abbr[title] { text-decoraction: none; } vc pode botar outra forma de marcar pra o usuário entender que tem um significado quando passar o mouse

[@bromoliver]

deus

[@PatinMe]

infelizmente não consegui terminar o projeto completamente, fiz o que consegui, mas com outras práticas eu consigo

[@caeet]

6:20 Meu Deus !!! Eu tinha feito duas Divs e coloquei elas com display inline block KKKKKKKKKKKKKKKKKKKKKKKKKKKKK Gambiarra braba a minha hein?! Kkkkkkkkkk

[@matematicasimples-q4e]

Kkkk

[@edoardopazz]

Hoje cheguei tarde mas cheguei.

[@vickfeh486]

Não recebo notificação do youtube e o canal do telegram aparentemente não está ativo

[@ajinacios]

Se quer aprender, esteja disposto a começar do zero várias vezes.

[@eduardoportela9437]

up

[@medroso1411]

Sendo bem sincero eu nunca teria pensado em colocar o margin negativo para preencher aqueles espaços sobrando

[@lucienefreitas7889]

Galera, estou acompanhando tudo desde do inicio, não sei porque o meu "aside > ul { } " não entra de jeito nenhum as duas colunas, já fiz até o teste colocando "li" ao invés do "ul", mas não deu certo. Alguém poderia me ajudar?

[@rafaelestevam4720]

Boa noite, tenta sem o >. aside ul{}

[@rafaelamoreira926]

conseguiu resolver como?

[@sidneymorais]

estou com o mesmo problema, ja tentei de todas as formas. Sem

[@rafaelamoreira926]

aside{ background-color: var(--cor1); padding: 10px; border-radius: 10px; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.799); } aside >h3{ background-color: var(--cor4); color:white; padding:5px; margin:-10px -10px 0px -10px; border-radius: 10px 10px 0px 0px; } aside > ul{ list-style-type:none ; list-style-position: inside; columns:2; } faz assim

[@sidneymorais]

@@rafaelamoreira926 Obrigado! fiz extamente como vc colocou, copiei e colei kakakak mas por algum motivo nao ta dividindo em duas colunas, nem a pau. Unica diferença que no meu só modifica a css quando coloco: aside > li (com ul nao ta indo) mas mto obrigado!

[@κπυα]

Uma solução alternativa ao problema dos links externos, que elimina a necessidade de criação de uma nova classe: No lugar de a.externo, podemos utilizar a[href^=""].

[@th2480]

era só usar "article a{ }"