393 - Teste de templates (alheios pq não sei fazer)

Template do Lauts bonitim, gosto assim simples. Mudei pouca coisa, mas por algum motivo as cores são difíceis de mudar pra que a gente quer

Laboratório

Primavera | Dia

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nunc felis, venenatis quis porttitor et, volutpat sit amet nunc. Aliquam lacinia vehicula semper. Morbi consectetur leo sed leo tristique luctus. Vestibulum condimentum iaculis orci in molestie. Duis placerat tortor nec libero fermentum ullamcorper. Proin tristique sapien quis ultrices semper. Morbi ex urna, fermentum et elementum non, gravida ut quam. Aliquam vel lorem quis velit auctor egestas at sed nulla. Donec accumsan velit in mi placerat feugiat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nunc felis, venenatis quis porttitor et, volutpat sit amet nunc. Aliquam lacinia vehicula semper. Morbi consectetur leo sed leo tristique luctus. Vestibulum condimentum iaculis orci in molestie. Duis placerat tortor nec libero fermentum ullamcorper. Proin tristique sapien quis ultrices semper. Morbi ex urna, fermentum et elementum non, gravida ut quam. Aliquam vel lorem quis velit auctor egestas at sed nulla. Donec accumsan velit in mi placerat feugiat. Donec sit amet maximus mi, nec dictum nisi. Suspendisse fringilla eget purus viverra hendrerit. Donec lectus massa, mollis vel tempor ultrices, cursus sit amet nunc. Nam commodo tempus molestie. Sed efficitur leo eu magna blandit, eu faucibus mi blandit.

Fusce efficitur molestie libero, a imperdiet lorem aliquam condimentum. Phasellus facilisis turpis sit amet ante venenatis lacinia. Donec tristique lectus eu molestie cursus. Praesent ac placerat ante. Cras iaculis diam ac porttitor viverra. Integer sed vestibulum quam. Nulla facilisis sapien non nisi rutrum bibendum. Mauris ac congue risus, et bibendum lacus. Quisque euismod orci vitae dolor placerat tristique. Duis pretium blandit ante in condimentum. Duis nec sagittis enim.

Cras enim libero, ultricies ac sapien at, fermentum laoreet orci. Fusce vel laoreet diam, nec accumsan purus. Mauris elementum ut nibh vel sollicitudin. Aenean ut hendrerit dolor. Nam sodales finibus sagittis. Duis et risus auctor, fermentum lectus sit amet, mattis eros. Etiam sollicitudin mauris a lorem pharetra, nec dapibus purus luctus. Fusce enim magna, mattis nec tempor id, congue vel ligula. Pellentesque volutpat in mauris eget dignissim. Aliquam erat volutpat. Donec tellus augue, tincidunt imperdiet congue sed, dapibus vestibulum sapien. Suspendisse sit amet vestibulum nibh, nec aliquam enim.

- Piplup

Spoiler:

Atualização:
[url=?]?.03.2021[/url] Recebeu um Piplup, a Pokédex e cinco Pokéballs no laboratório.

Template bonitim 2 que é muito difícil de mexer, quer muito diminuir o tamanho dessa parte da imagem e título em altura, mas mexi tudo em height e não funcionou.

Laboratório

Primavera | Dia

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Galleta

Template bonitim 2 original. Mas acho que não vou usar não, fui editar a mensagem do anterior e bugou foi tudo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Titulo Aquí

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.

Galleta

Código:: <div id="black"><div class="blackim1"><div class="blackim2"><img src="https://i.imgur.com/s0v5LVT.gif'"> </div></div><div class="blacktext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. <b>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</b> Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div><div class="blackbot"><div class="blacktit">Titulo Aquí</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</div></div><div class="cre"><a href="https://cookiecodes.tumblr.com">Galleta</a></div> <style>#black{width:250px;background:var(--black2);padding:45px;margin: 0 auto;}.blackim1{background:var(--black2);width:124px; height: 124x;border: 55px solid var(--black1);padding:8px;}.blackim2{width:120px; height: 120px;border: 2px solid var(--black1);}.blackim2 img{max-width: 120px;max-height: 120px;}.blackbot{background: var(--black1);width:220px;padding:15px;text-transform: uppercase;color:var(--black2);font-family: 'Quicksand';font-size:7px;font-weight: 700;letter-spacing:2px;text-align:center;line-height: 125%;}.blacktext{color:var(--black3);font-family: 'Roboto';font-size:11px;font-weight: 400;line-height: 130%;text-align: justify;margin-top:5px;margin-bottom:5px;padding:5px;}#black{--black1: #972228;--black2: #111111;--black3: #dddddd;}.blacktit{font-family: 'Playfair Display', serif;font-size:30px;line-height: 105%;font-style: italic;text-transform: none;letter-spacing:0px;font-weight: 600;}#black b{color:var(--black1);font-weight: 500;}.cre{margin:0 auto; font-size: 10px; text-align:center;family: Arial;}</style><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,600&family=Quicksand:wght@600;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet">

Esse também é bonito, mas não combina com coordenador

Sem imagem

Código:: <div id="frac"><div class="fracti"><fract>Don't <fraci>leave</fraci> me here in the <fraci>dark</fraci> when it's hard to see. <fraci>Show me your heart</fraci>, shed a light on <fraci>me.</fraci></fract></div><div class="fracti2"><fraci>[b]With[/b]</fraci> <fract>Aquí va el nombre del personaje</fract></div><div class="frac2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. —<vv> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. </vv>— Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. —<cc> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. </cc>— Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</div><div class="fracbot"><div class="fracbin">dato 1</div><div class="fracbin">dato 2</div><div class="fracbin">Puedes escribir algo muy largo aquí</div></div></div><div class="cre"><a href="https://cookiecodes.tumblr.com">Galleta</a></div> <style>#frac{width:400px;background: var(--frac1);margin: 0 auto ;color: var(--frac4);padding:50px;font-family: 'Roboto';font-size:12px;font-weight: 300;line-height: 170%;text-align: justify;}#frac fract{color: var(--frac2);font-family: 'Merriweather';}#frac fraci{color: var(--frac3);font-family: 'Raleway'; font-style: italic;}.frac2{margin-bottom:10px;margin-top:10px;}.fracti{font-size:40px;border-bottom: 1px solid var(--frac2);text-align: left; padding-bottom:10px;line-height: 100%;}.fracti2{font-size:15px;text-align: right;}.fracbot{display: flex;justify-content:center;flex-wrap:wrap;border-top: 1px solid var(--frac2);padding-top:10px;}.fracbin{background: var(--frac3);padding:5px;color: var(--frac1);text-transform: uppercase;font-size:9px;font-weight: 900;line-height: 100%;margin-right:5px;margin-bottom:5px;}#frac vv{color: var(--frac2);font-style:italic;}#frac cc{color:var(--frac3);}#frac{--frac1: #111111;--frac2: #4b9e87;--frac3: #9ad276;--frac4: #888888;}.cre{margin:0 auto; font-size: 10px; text-align:center;family: Arial;}</style><link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300&family=Raleway:ital,wght@1,100&family=Roboto:wght@300;900&display=swap" rel="stylesheet">

Com imagem

Código:: <div id="frac"><div class="fracim2"><div class="fracim" style="background:url('https://i.imgur.com/Z9shOL1.jpg')"></div></div><div class="fracti"><fract>Don't <fraci>leave</fraci> me here in the <fraci>dark</fraci> when it's hard to see. <fraci>Show me your heart</fraci>, shed a light on <fraci>me.</fraci></fract></div><div class="fracti2"><fraci>[b]With[/b]</fraci> <fract>Aquí va el nombre del personaje</fract></div><div class="frac2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. —<vv> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. </vv>— Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. —<cc> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. </cc>— Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</div><div class="fracbot"><div class="fracbin">dato 1</div><div class="fracbin">dato 2</div><div class="fracbin">Puedes escribir algo muy largo aquí</div></div></div><div class="cre"><a href="https://cookiecodes.tumblr.com">Galleta</a></div> <style>#frac{width:400px;background: var(--frac1);margin: 0 auto ;color: var(--frac4);padding:50px;font-family: 'Roboto';font-size:12px;font-weight: 300;line-height: 170%;text-align: justify;}.fracim{width:400px;height:180px;clip-path: polygon(0 0, 100% 1%, 100% 85%, 50% 100%, 0 85%);}.fracim2{width:400px;height:180px;clip-path: polygon(0 0, 100% 1%, 100% 85%, 50% 100%, 0 85%);padding-bottom:5px;background: var(--frac2)}#frac fract{color: var(--frac2);font-family: 'Merriweather';}#frac fraci{color: var(--frac3);font-family: 'Raleway';font-style: italic;}.frac2{margin-bottom:10px;margin-top:10px;}.fracti{font-size:40px;border-bottom: 1px solid var(--frac2);text-align: left; padding-bottom:10px;line-height: 100%;}.fracti2{font-size:15px;text-align: right;}.fracbot{display: flex;justify-content:center;flex-wrap:wrap;border-top: 1px solid var(--frac2);padding-top:10px;}.fracbin{background: var(--frac3);padding:5px;color: var(--frac1);text-transform: uppercase;font-size:9px;font-weight: 900;line-height: 100%;margin-right:5px;margin-bottom:5px;}#frac vv{color: var(--frac2);font-style:italic;}#frac cc{color:var(--frac3);}#frac{--frac1: #111111;--frac2: #027273;--frac3: #f7612f;--frac4: #888888;}.cre{margin:0 auto; font-size: 10px; text-align:center;family: Arial;}</style><link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300&family=Raleway:ital,wght@1,100&family=Roboto:wght@300;900&display=swap" rel="stylesheet">

Kubik escreveu:Template bonitim 2 que é muito difícil de mexer, quer muito diminuir o tamanho dessa parte da imagem e título em altura, mas mexi tudo em height e não funcionou.

Laboratório
Primavera | Dia
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Galleta

As dimensões da imagem são codificadas no "blackim2 img", mas se você mudar as dimensões da imagem, tem que mudar das molduras também