Skip to content

Instantly share code, notes, and snippets.

@GCSBOSS

GCSBOSS/index.html

Created May 9, 2025 15:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save GCSBOSS/e6e2a9e0a97dbb6ed6dc184e0afe4a97 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save GCSBOSS/e6e2a9e0a97dbb6ed6dc184e0afe4a97 to your computer and use it in GitHub Desktop.
Download ZIP
Tarefas da Luna
Raw
index.html
<h1>Tarefas</h1>
<section>
<p>Abrir Cortinas</p>
<div></div>
</section>
<section>
<p>Colocar os Calçados</p>
<div></div>
</section>
<section>
<p>Vestir a Roupa</p>
<div></div>
</section>
<section>
<p>Marcar o Calendário</p>
<div></div>
</section>
<section>
<p>Lavar o Rosto</p>
<div></div>
</section>
<section>
<p>Escovar os Dentes</p>
<div></div>
</section>
<section>
<p>Pentear os Cabelos</p>
<div></div>
</section>
<section>
<p>Arrumar a Mochila</p>
<div></div>
</section>
<section>
<p>Praticar Assovio</p>
<div></div>
</section>
<section>
<p>Tirar Lixo do Banheiro</p>
<div></div>
</section>
<section>
<p>Tirar Lixo das Fraldas</p>
<div></div>
</section>
<section>
<p>Tirar Lixo dos Papéis</p>
<div></div>
</section>
<section>
<p>Encher Garrafas de Água</p>
<div></div>
</section>
<section>
<p>Juntar Calçados</p>
<div></div>
</section>
<section>
<p>Juntar Brinquedos</p>
<div></div>
</section>
<section>
<p>Praticar Xilofone</p>
<div></div>
</section>
<section>
<p>Arrumar as Cobertas</p>
<div></div>
</section>
<section>
<p>Organizar a Mesa de Estudo</p>
<div></div>
</section>
<section>
<p>Regar as Plantas</p>
<div></div>
</section>
<section>
<p>Praticar Inglês</p>
<div></div>
</section>
<aside>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
<article>
</article>
</aside>
Raw
script.js
document.querySelectorAll('div').forEach(dEl => Array(26).fill(0).forEach(_ => {
const cb = document.createElement('input');
cb.type = 'checkbox';
dEl.appendChild(cb);
}))
Raw
style.css
body {
position: relative;
font-family: Roboto;
box-sizing: border-box;
margin: 0;
padding: 0;
height: 210mm;
width: 297mm;
display: flex;
flex-direction: column;
}
h1 {
padding: 0 16px;
margin: 0;
line-height: 52px;
}
section {
flex: 1;
display: flex;
align-items: center;
}
div {
margin-left: auto;
display: flex;
gap: 6.4px;
padding: 0 4px;
position: relative;
z-index: 2;
}
[type=checkbox] {
width: 24px;
height: 24px;
}
p {
margin: 0;
padding: 0 10px;
font-size: 12px;
width: 120px;
font-weight: bold;
}
section:nth-child(even) {
background: #eee;
}
aside {
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
height: calc(210mm - 54px);
width: calc(297mm - 150px);
display: flex;
}
article {
flex: 1;
}
article:nth-child(odd) {
background: #0001;
}
section:nth-of-type(5n-1) {
background: #91A6FF55
}
section:nth-of-type(5n-2) {
background: #FFFFFF
}
section:nth-of-type(5n-3) {
background: #FF88DC55
}
section:nth-of-type(5n-4) {
background: #FAFF7F55
}
section:nth-of-type(5n-5) {
background: #FF515455
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment