Borsino politico by @dpaapa - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

listCollega un elemento input con una lista di opzioni datalist
hrefDefinisce l'URL della risorsa/pagina di destinazione.
<q>Indica una parte di testo come citazione breve
<b>Formatta il testo in grassetto
multipleConverte in lista a selezione multipla
methodDetermina il metodo di invio dei dati di un form al server

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

attività della settimana

copia di unfollow me

JEANSON ANCHETA

lezione 31.10 1

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<script src="https://lacstatic.it/sites/lacnews/plugin/lazy/lazysizes.min.js" async></script>

<!-- inizio codice da incorporare -->
<div class="container_stu">
<div class="card">
<div class="bor_tit">Giuliano <strong> Amato</strong></div>
<div class="bor_img">
<div class="bor_sti">76 anni, giudice costituzionale</div>
<img class="adaptive lazy" alt="" data-src="https://www.lacnews24.it/images/borsino/amato2.jpg" /></div>
<div class="bor_fre"><img class="stroke adaptive F-L lazy" alt="" data-src="https://www.lacnews24.it/images/borsino/su.svg" /></div>
<div class="bor_txt">
<div class="bor_par"><strong>Chi lo sponsorizza:</strong> centristi, bersaniani e berlusconiani.</div>
<div class="bor_par"><strong>A sfavore:</strong> renziani, Lega, grillini, ex M5S e Sel.</div>
<div class="bor_par"><strong>Pro:</strong> non saprei</div>
<div class="bor_par"><strong>Contro:</strong> l'opinione pubblica l'ho considera un membro della casta.</div>
</div>
</div>
<div class="card">
<div class="bor_tit">Sergio <strong> Mattarella</strong></div>
<div class="bor_img">
<div class="bor_sti">76 anni, Presidente</div>
<img class="adaptive lazy" alt="" data-src="https://www.lacnews24.it/images/borsino/mattarella.jpg" /></div>
<div class="bor_fre"><img class="stroke adaptive lazy" alt="" data-src="https://www.lacnews24.it/images/borsino/giu.svg" /></div>
<div class="bor_txt">
<div class="bor_par"><strong>Chi lo sponsorizza:</strong> centristi, bersaniani e berlusconiani.</div>
<div class="bor_par"><strong>A sfavore:</strong> renziani, Lega, grillini, ex M5S e Sel.</div>
<div class="bor_par"><strong>Pro:</strong> profilo internazionale, ed esperienza istituzionale.</div>
<div class="bor_par"><strong>Contro:</strong> l'opinione pubblica l'ho considera un membro della casta.</div>
</div>
</div>
<div class="card">
<div class="bor_tit">Mario<strong> Draghi</strong></div>
<div class="bor_img">
<div class="bor_sti">66 anni, Presidente del Consiglio</div>
<img class="adaptive lazy" alt="" data-src="https://www.lacnews24.it/images/borsino/draghi.jpg" /></div>
<div class="bor_fre"><img class="stroke adaptive lazy" alt="" data-src="https://www.lacnews24.it/images/borsino/uguale.svg" /></div>
<div class="bor_txt">
<div class="bor_par"><strong>Chi lo sponsorizza:</strong> centristi, bersaniani e berlusconiani.</div>
<div class="bor_par"><strong>A sfavore:</strong> renziani, Lega, grillini, ex M5S e Sel.</div>
<div class="bor_par"><strong>Pro:</strong> profilo internazionale, ed esperienza istituzionale.</div>
<div class="bor_par"><strong>Contro:</strong> l'opinione pubblica l'ho considera un membro della casta.</div>
</div>
</div>
</div>
<div class="container_stu">
<div class="card">
<div class="bor_tit">Giorgia <strong> Meloni</strong></div>
<div class="bor_img">
<div class="bor_sti">50 anni, parlamentare FDI</div>
<img class="adaptive lazy" alt="" data-src="https://img.lacstatic.it/_pageimg/2022-04-13/mini_2022_meloni.jpg" /></div>
<div class="bor_fre"><img class="stroke adaptive F-L lazy" alt="" data-src="https://www.lacnews24.it/images/borsino/su.svg" /></div>
<div class="bor_txt">
<div class="bor_par"><strong>Chi lo sponsorizza:</strong> centristi, bersaniani e berlusconiani.</div>
<div class="bor_par"><strong>A sfavore:</strong> renziani, Lega, grillini, ex M5S e Sel.</div>
<div class="bor_par"><strong>Pro:</strong> profilo internazionale.</div>
<div class="bor_par"><strong>Contro:</strong> l'opinione pubblica l'ho considera un membro della casta.</div>
</div>
</div>
<div class="card">
<div class="bor_tit">Matteo <strong> Salvini</strong></div>
<div class="bor_img">
<div class="bor_sti">50 anni, senatore Lega</div>
<img class="adaptive lazy" alt="" data-src="https://img.lacstatic.it/_pageimg/2022-04-13/mini_2022_salvini.jpg" /></div>
<div class="bor_fre"><img class="stroke adaptive lazy" alt="" data-src="https://www.lacnews24.it/images/borsino/su.svg" /></div>
<div class="bor_txt">
<div class="bor_par"><strong>Chi lo sponsorizza:</strong> centristi, bersaniani e berlusconiani.</div>
<div class="bor_par"><strong>A sfavore:</strong> renziani, Lega, grillini, ex M5S e Sel.</div>
<div class="bor_par"><strong>Pro:</strong> profilo internazionale, ed esperienza istituzionale.</div>
<div class="bor_par"><strong>Contro:</strong> l'opinione pubblica l'ho considera un membro della casta.</div>
</div>
</div>
<div class="card">
<div class="bor_tit">Matteo<strong> Renzi</strong></div>
<div class="bor_img">
<div class="bor_sti">56 anni, figo</div>
<img class="adaptive lazy" alt="" data-src="https://img.lacstatic.it/_pageimg/2022-04-13/mini_2022_renzi.jpg" /></div>
<div class="bor_fre"><img class="stroke adaptive lazy" alt="" data-src="https://www.lacnews24.it/images/borsino/uguale.svg" /></div>
<div class="bor_txt">
<div class="bor_par"><strong>Chi lo sponsorizza:</strong> centristi, bersaniani e berlusconiani.</div>
<div class="bor_par"><strong>A sfavore:</strong> renziani, Lega, grillini, ex M5S e Sel.</div>
<div class="bor_par"><strong>Pro:</strong> figo.</div>
<div class="bor_par"><strong>Contro:</strong> l'opinione pubblica l'ho considera un membro della casta.</div>
</div>
</div>
</div>
<!-- fine codice da incorporare -->

img{max-width:100%;height:auto;display:block;margin:18px;}.container_stu{display:flex}.card{height:auto;width:calc(33%+30px);background-color:#fff;box-shadow:0 0 1rem rgba(0,0,0,0.5);transition:.4s ease-out;position:relative;left:0;z-index:10}.card:not(:first-child){margin-left:-20px}.card:hover{transform:translateY(-20px);transition:.4s ease-out}.card:hover~.card{position:relative;left:30px;transition:.4s ease-out}.title{color:#fff;font-weight:300;position:absolute;left:20px;top:15px}.bar{position:absolute;top:100px;left:20px;height:5px;width:150px}.emptybar{background-color:#fff;width:100%;height:100%}.filledbar{position:absolute;top:0;z-index:3;width:0;height:100%;background:#009ad9;background:linear-gradient(90deg,rgba(0,154,217,1) 0%,rgba(217,147,0,1) 65%,rgba(255,186,0,1) 100%);transition:.6s ease-out}.card:hover .filledbar{width:120px;transition:.4s ease-out}.circle{position:absolute;top:150px;left:calc(50% - 60px)}.stroke{display:none!important}svg{fill:#17141d;stroke-width:2px}.card:hover .stroke{display:block!important;stroke-dashoffset:100;transition:.6s ease-out}.bor_img{width:100%;height:150px;overflow:hidden;position:relative;-webkit-box-shadow:0 4px 7px -5px rgba(0,0,0,0.8);box-shadow:0 4px 7px -5px rgba(0,0,0,0.8);border-left:5px solid #BD1823}.bor_tit{font-size:16px;font-weight:500;padding:7px 14px;border-left:5px solid #BD1823;-webkit-box-shadow:inset 0 -4px 10px -5px rgba(0,0,0,0.8);box-shadow:inset 0 -4px 10px -5px rgba(0,0,0,0.8);position:relative;z-index:1;padding-top:10px}.bor_tit strong{font-weight:700}.bor_sti{font-size:10px;font-weight:500;position:absolute;width:100%;bottom:0;color:#fff;background-color:rgba(0,0,0,0.5);padding-left:10px;-webkit-box-shadow:0 -3px 7px 0 rgba(0,0,0,0.5);box-shadow:0 -3px 7px 0 rgba(0,0,0,0.5)}.bor_fre{position:absolute;top:55px;right:0}.bor_fre img{width:65px;margin:0!important}.bor_img img{margin:0!important}.bor_txt{padding:10px 15px;padding-bottom:20px}.bor_par{font-size:13px;font-weight:500}.bor_par strong{color:#333;font-weight:800}@media screen and (max-width:1180px){.bor_tit{font-size:14px}.bor_img{height:130px}.stroke{display:block!important}.card{width:33%}.card:not(:first-child){margin-left:15px}.bor_fre{position:absolute;top:50px}.bor_fre img{width:55px}}@media screen and (max-width:767px){.container_stu{display:block}.bor_img{height:185px}.bor_fre{top:45px;right:10px}.bor_fre img{width:75px}.card:first-child,.card:not(:first-child){width:100%;margin-left:0;margin-top:30px}.bor_tit{font-size:18px}}

(function(){var docElem = document.documentElement;	window.lazySizesConfig = window.lazySizesConfig || {}; window.lazySizesConfig.lazyClass = 'lazy'; window.lazySizesConfig.loadMode = 1;})();