Borsino politico(2) by @dpaapa - Codewith.it

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

References

<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
<tbody>Definisce il contenuto principale di una tabella.
<head>Tag primario di un documento HTML
placeholderDefinisce un testo segnaposto per un elemento input o textarea
_blankApre i collegamenti ipertestuali in una nuova scheda del browser
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina

Users

Log in to search for users

Explore

Find inspiration

esercizio 04 pagina beep

Custom JS alert box

black - social bar

Le bambole Mattel

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<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">Gregorio <strong> Sekvaggi</strong></div>
<div class="bor_img">
<div class="bor_back"></div>
<div class="bor_sti">50 anni, operaiop</div>
<img class="adaptive lazy" alt="" data-src="https://www.lacnews24.it/images/borsino/amato2.jpg" /></div>
<div class="bor_fre stroke"><img class="adaptive F-L 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. Lorem ipsuim eccetera. ecce</div>
</div>
</div>
<div class="card">
<div class="bor_tit">Sergio <strong> Mattarella</strong></div>
<div class="bor_img">
<div class="bor_back"></div>
<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 stroke"><img class="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_back"></div>
<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 stroke"><img class="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_back"></div>
<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 stroke"><img class="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_back"></div>
<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 stroke"><img class="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">Matteo<strong> Renzi</strong></div>
<div class="bor_img">
<div class="bor_back"></div>
<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 stroke"><img class="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)}svg{fill:#17141d;stroke-width:2px}.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:20px;width:20%}.card:hover .stroke{top:50px;right:0;width:29%;stroke-dashoffset:100;transition:.3s ease-out}.bor_fre img,.bor_img img{margin:0!important}.bor_back{position:absolute;background:#000027;background:linear-gradient(270deg,#000 35%,rgba(255,255,255,0) 100%,rgba(255,255,255,0) 100%);content:'';z-index:0;width:90px;height:100%;right:0}.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}.card{width:33%}.card:not(:first-child){margin-left:15px}.bor_fre{position:absolute;top:50px}}@media screen and (max-width: 767px){.container_stu{display:block}.bor_img{height:185px}.bor_fre{top:50px;right:10px}.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;})();