Borsino politico by @dpaapa - Codewith.it

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

Referenze

<blockquote>Inserisce citazioni in un documento HTML
<a>Inserisce link e collegamenti ipertestuali
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
_topApre collegamenti ipertestuali nell'elemento parent assoluto
<table>Tag primario per la creazione di tabelle
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Tracker delle attività 2

Calcolatrice Pitagora

associazioni e. movimenti

Navbar Example 3

ESERCIZIO FINALE

STATI HTML TEST TABELLA

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;})();