[ILH] qeel - v53

In this example below you will see how to do a [ILH] qeel - v53 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by darkdreams, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright darkdreams ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>[ILH] qeel - v53</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato|Parisienne|Roboto+Slab|Raleway:400,300,700,900|Roboto+Condensed|Schoolbell|Eater|Coming+Soon|Merriweather|Oswald:300,400|Just+Another+Hand'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="qeel">
    <div class="stats">
        <span id="qeelNbPosts">{TOTAL_POSTS}</span><br/>
        <span id="qeelNbUsers">{TOTAL_USERS}</span><br/>
        <span id="qeelNewestUser">{NEWEST_USER}</span><br/>
        <span id="qeelNbOnline">{TOTAL_USERS_ONLINE}</span><br/>
    </div>
    <div class="avatar">
        <span id="av_newestMember"></span>
    </div>
    <div class="actu">
        {RECORD_USERS}
        <br />
        <br /> {LOGGED_IN_USER_LIST}
    </div>
    <div class="groupes">
        <div class="onglets">
            <a href="#" class="onglet default" data-name="default"></a>
            <a href="#" class="onglet cabot" data-name="cabot"></a>
            <a href="#" class="onglet dunster" data-name="dunster"></a>
            <a href="#" class="onglet eliot" data-name="eliot"></a>
            <a href="#" class="onglet lowell" data-name="lowell"></a>
            <a href="#" class="onglet mather" data-name="mather"></a>
            <a href="#" class="onglet quincy" data-name="quincy"></a>
            <a href="#" class="onglet winthrop" data-name="winthrop"></a>
            <a href="#" class="onglet student" data-name="student"></a>
            <a href="#" class="onglet staff" data-name="staff"></a>
            <a href="#" class="onglet citizen" data-name="citizen"></a>
            <a href="#" class="onglet kids" data-name="kids"></a>
        </div>
        <div class="contents">
            <div class="content default">
                <span class="house">Houses' budget</span>
                <ul>
                    <li><span class="house_c mather">Mather House</span><span class="howmuch">$ 10,061</span></li>
                    <li><span class="house_c dunster">Dunster House</span><span class="howmuch">$ 7,560</span></li>
                    <li><span class="house_c eliot">Eliot House</span><span class="howmuch">$ 7,076</span></li>
                    <li><span class="house_c quincy">Quincy House</span><span class="howmuch">$ 6,931</span></li>
                    <li><span class="house_c winthrop">Winthrop House</span><span class="howmuch">$ 6,129</span></li>
                    <li><span class="house_c lowell">Lowell House</span><span class="howmuch">$ 5,225</span></li>
                    <li><span class="house_c cabot">Cabot House</span><span class="howmuch">$ 5,199</span></li>
                </ul>
            </div>
            <div class="content cabot">
                <span class="house cabot">Cabot House</span>
                <ul class="details">
                    <li class="title"><span>Présidente</span><span>Vice-présidente</span></li>
                    <li class="pres"><span>Maëlys Helington</span><span>Mecky A. Stevenof</span></li>
                    <br>
                    <li class="groups"><span><a href="http://www.i-love-harvard.com/g5-cabot-house">Members</a><br>(<i class="cabot">#FF7A95</i>)</span></span><span><a href="http://www.i-love-harvard.com/g133-bizuts-cabots">Bizuts</a><br><a href="http://www.i-love-harvard.com/f90-flood-prive-cabot-house">Flood privé</a></span></li>
                </ul>
            </div>
            <div class="content dunster">
                <span class="house dunster">Dunster House</span>
                <ul class="details">
                    <li class="title"><span>Présidente</span><span>Vice-présidente</span></li>
                    <li class="pres"><span>Talya V. Blackburn</span><span>Sienna Rose</span></li>
                    <br>
                    <li class="groups"><span><a href="http://www.i-love-harvard.com/g9-dunster-house">Members</a><br>(<i class="dunster">#B39B00</i>)</span></span><span><a href="http://www.i-love-harvard.com/g130-bizuts-dunsters">Bizuts</a><br><a href="http://www.i-love-harvard.com/f87-flood-prive-dunster-house">Flood privé</a></span></li>
                </ul>
            </div>
            <div class="content eliot">
                <span class="house eliot">Eliot House</span>
                <ul class="details">
                    <li class="title"><span>Présidente</span><span>Vice-présidente</span></li>
                    <li class="pres"><span>L. Victoria S.-Wildingham</span><span>Tate L.Murray</span></li>
                    <br>
                    <li class="groups"><span><a href="http://www.i-love-harvard.com/g2-eliot-house">Members</a><br>(<i class="eliot">#509EED</i>)</span></span><span><a href="http://www.i-love-harvard.com/g128-bizuts-eliots">Bizuts</a><br><a href="http://www.i-love-harvard.com/f86-flood-prive-eliot-house">Flood privé</a></span></li>
                </ul>
            </div>
            <div class="content lowell">
                <span class="house lowell">Lowell House</span>
                <ul class="details">
                    <li class="title"><span>Présidente</span><span>Vice-présidente</span></li>
                    <li class="pres"><span>Maggie Clayton-Khalski</span><span>K. Olyvia Dereham</span></li>
                    <br>
                    <li class="groups"><span><a href="http://www.i-love-harvard.com/g64-lowell-house">Members</a><br>(<i class="lowell">#965BEF</i>)</span></span><span><a href="http://www.i-love-harvard.com/g134-bizuts-lowells">Bizuts</a><br><a href="http://www.i-love-harvard.com/f217-flood-prive-lowell-house">Flood privé</a></span></li>
                </ul>
            </div>
            <div class="content mather">
                <span class="house mather">Mather House</span>
                <ul class="details">
                    <li class="title"><span>Présidente</span><span>Vice-présidente</span></li>
                    <li class="pres"><span>Alexys Carpenter</span><span>Emma J. Müller</span></li>
                    <br>
                    <li class="groups"><span><a href="http://www.i-love-harvard.com/g6-mather-house">Members</a><br>(<i class="mather">#76AD23</i>)</span></span><span><a href="http://www.i-love-harvard.com/g132-bizuts-mathers">Bizuts</a><br><a href="http://www.i-love-harvard.com/f91-flood-prive-mather-house">Flood privé</a></span></li>
                </ul>
            </div>
            <div class="content quincy">
                <span class="house quincy">Quincy House</span>
                <ul class="details">
                    <li class="title"><span>Présidente</span><span>Vice-présidente</span></li>
                    <li class="pres"><span>C. Nevada Lewis-Kennedy</span><span>Charlie A. Harrington</span></li>
                    <br>
                    <li class="groups"><span><a href="http://www.i-love-harvard.com/g4-quincy-house">Members</a><br>(<i class="quincy">#ED7B34</i>)</span></span><span><a href="http://www.i-love-harvard.com/g131-bizuts-quincys">Bizuts</a><br><a href="http://www.i-love-harvard.com/f88-flood-prive-quincy-house">Flood privé</a></span></li>
                </ul>
            </div>
            <div class="content winthrop">
                <span class="house winthrop">Winthrop House</span>
                <ul class="details">
                    <li class="title"><span>Président</span><span>Vice-président</span></li>
                    <li class="pres"><span>Joachim E. Lazarus</span><span>&nbsp;</span></li>
                    <br>
                    <li class="groups"><span><a href="http://www.i-love-harvard.com/g3-winthrop-house">Members</a><br>(<i class="winthrop">#C92724</i>)</span><span><a href="http://www.i-love-harvard.com/g129-bizuts-winthrops">Bizuts</a><br><a href="http://www.i-love-harvard.com/f89-flood-prive-winthrop-house">Flood privé</a></span></li>
                    <br>
                </ul>
            </div>
            <div class="content student">
                <span class="house student">Harvard' students</span>
                <ul class="details">
                    <li class="groups"><span><a href="http://www.i-love-harvard.com/g7-students">Members</a> (<i class="student">#8A8A8A</i>)</span><span><a href="http://www.i-love-harvard.com/f206-flood-prive-students">Flood privé</a></span></li>
                </ul>
                <span class="house pnj margintop">Harvard's Nemesis</span>
                <ul class="details">
                    <li class="groups"><span><a href="http://www.i-love-harvard.com/g173-nemesis">Members</a></span><span><a href="http://www.i-love-harvard.com/f25-les-bureaux-de-nemesis">Flood privé</a></span></li>
                    <li class="one cta"><span><a href="http://www.i-love-harvard.com/t50643-nemesis-postuler">Join the team</a></span></li>
                </ul>
            </div>
            <div class="content staff">
                <span class="house staff margintop">Harvard' staff</span>
                <ul class="details">
                    <li class="groups"><span><a href="http://www.i-love-harvard.com/g257-harvard-s-staff">Members</a> (<i class="staff">#32368A</i>)</span><span><a href="http://www.i-love-harvard.com/f126-flood-prive-staff-d-harvard">Flood privé</a></span></li>
                    <li class="one cta"><span><a href="http://www.i-love-harvard.com/t51289-etre-responsable-de-maison-demandes">Be a ref. professor</a></span></li>
                </ul>
            </div>
             <div class="content citizen">
                <span class="house citizen">Cambridge/Boston Citizens</span>
                <ul class="details">
                    <li class="groups"><span><a href="http://www.i-love-harvard.com/g8-cambridge-s-citizens">Members</a> (<i class="citizen">#9E3474</i>)</span><span><a href="http://www.i-love-harvard.com/f129-flood-prive-citizens">Flood privé</a></span></li>
                </ul>
            </div>
            <div class="content kids">
                <span class="house kids">kids of the future</span>
                <ul class="details">
                    <li class="groups"><span><a href="http://www.i-love-harvard.com/g71-kids-of-the-future">Members</a> (<i class="kids">#2C998B</i>)</span><span><a href="http://www.i-love-harvard.com/f178-flood-prive-kids-of-the-future">Flood privé</a></span></li>
                </ul>
                <span class="house pnj margintop">Non-played characters</span>
                <ul class="details">
                    <li class="groups"><span class="pnj"><a href="http://www.i-love-harvard.com/u1">Le Doyen</a><br><a href="http://www.i-love-harvard.com/u259">Cambridge's Secrets</a></span><span class="pnj"><a href="http://www.i-love-harvard.com/u2637">Nemesis</a><br><a href="http://www.i-love-harvard.com/u5510">The Wicked Witch</a></span></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="connected">
        <table class="trans">
            <tr>
                <td>
                    <div style="font-size:11px;"><span class="gensmall">Membres connectés au cours des 24 dernières heures : <a href="/u5241"><span style="color:#6A6DA3"><strong>Aaron Miller</strong></span></a>, <a href="/u4677"><span style="color:#8A8A8A"><strong>Aaron W.-Buckley</strong></span></a>, <a href="/u3855"><span style="color:#ED7B34"><strong>Abby E.D'orange</strong></span></a>, <a href="/u5934"><span style="color:#B39B00"><strong>Acacia Windsor</strong></span></a>, <a href="/u4046"><span style="color:#C42D2D"><strong>Adam C. Rice</strong></span></a>, <a href="/u1633"><span style="color:#95BADB"><strong>Adam H. Katrya-Moore</strong></span></a>, <a href="/u5070"><span style="color:#509EED"><strong>Adrian Ekström</strong></span></a>, <a href="/u6235"><span style="color:#7B8F53"><strong>Adriel Rhodes</strong></span></a>, <a href="/u6048"><span style="color:#95BADB"><strong>Ael C. Raudenfeld</strong></span></a>, <a href="/u156"><span style="color:#8A8A8A"><strong>Agathe M.-Thomspers</strong></span></a>, <a href="/u5733"><span style="color:#95BADB"><strong>Ah Puch Castel</strong></span></a>, <a href="/u5046"><span style="color:#5E9112"><strong>Alaska Hamilton</strong></span></a>, <a href="/u6283">Alban Saddler</a>, <a href="/u3495"><span style="color:#B39B00"><strong>Alejandro Ortega</strong></span></a>, <a href="/u1146"><span style="color:#ED7B34"><strong>Alek E. Lewis-Kennedy</strong></span></a>, <a href="/u2126"><span style="color:#5E9112"><strong>Alexander Strudwick</strong></span></a>, <a href="/u3218"><span style="color:#5E9112"><strong>Alexys Carpenter</strong></span></a>, <a href="/u6287"><span style="color:#EB9B5E"><strong>Alicia E. Johnson</strong></span></a>, <a href="/u6220"><span style="color:#F5B1BE"><strong>Alizea O. Newton</strong></span></a>, <a href="/u5437"><span style="color:#ED7B34"><strong>Amanda S. Connor</strong></span></a>, <a href="/u6035"><span style="color:#8A8A8A"><strong>Anastasia Reynolds</strong></span></a>, <a href="/u5650"><span style="color:#8A8A8A"><strong>Andrea Weasley</strong></span></a>, <a href="/u3715"><span style="color:#C42D2D"><strong>Andrew R. Windsor</strong></span></a>, <a href="/u5853"><span style="color:#8A8A8A"><strong>Andy Granger</strong></span></a>, <a href="/u5121"><span style="color:#9E3474"><strong>Annalynne Malcolm</strong></span></a>, <a href="/u4166"><span style="color:#509EED"><strong>Antwan L. Wayans</strong></span></a>, <a href="/u6274"><span style="color:#A08ABA"><strong>Apollinna E. M-Austen</strong></span></a>, <a href="/u6066"><span style="color:#6A6DA3"><strong>Aramis Wheatley</strong></span></a>, <a href="/u5519"><span style="color:#509EED"><strong>Arès J. Errington</strong></span></a>, <a href="/u6224"><span style="color:#F5B1BE"><strong>Ariel E. Windsor</strong></span></a>, <a href="/u6061"><span style="color:#5E9112"><strong>Artur Mordachov</strong></span></a>, <a href="/u5875"><span style="color:#FF00CC"><strong>Asher P. Burke</strong></span></a>, <a href="/u5912"><span style="color:#FF7A95"><strong>Athena V. Campbell</strong></span></a>, <a href="/u6238"><span style="color:#E05E5E"><strong>August R. Luttazzi</strong></span></a>, <a href="/u2950"><span style="color:#5E9112"><strong>Austin J. Da Silva</strong></span></a>, <a href="/u2482"><span style="color:#C42D2D"><strong>Avery C. M-Silver</strong></span></a>, <a href="/u3670"><span style="color:#8A8A8A"><strong>Azraël-Sky Strudwick</strong></span></a>, <a href="/u6047"><span style="color:#C42D2D"><strong>Baptiste C. Archibald</strong></span></a>, <a href="/u6097"><span style="color:#95BADB"><strong>Billie-Aly White</strong></span></a>, <a href="/u1932"><span style="color:#975BF0"><strong>Blueberry P. Sanders</strong></span></a>, <a href="/u5649"><span style="color:#ED7B34"><strong>Bonaventure S. Weasley</strong></span></a>, <a href="/u6185"><span style="color:#8A8A8A"><strong>Braxton C. Rosebury</strong></span></a>, <a href="/u6256"><span style="color:#95BADB"><strong>Brianna Koch</strong></span></a>, <a href="/u733"><span style="color:#9E3474"><strong>Briony Silver</strong></span></a>, <a href="/u19"><span style="color:#ED7B34"><strong>C. Nevada Lewis-Kennedy</strong></span></a>, <a href="/u3808"><span style="color:#B39B00"><strong>C. Osean Cobain</strong></span></a>, <a href="/u5475"><span style="color:#ED7B34"><strong>C. Summer Wingfield</strong></span></a>, <a href="/u5487"><span style="color:#509EED"><strong>Caesar S-Belobrova</strong></span></a>, <a href="/u3089"><span style="color:#5E9112"><strong>Calypso Thomspers</strong></span></a>, <a href="/u5379"><span style="color:#8A8A8A"><strong>Camille T. Emrys</strong></span></a>, <a href="/u5675"><span style="color:#6A6DA3"><strong>Carlisle Bellamy</strong></span></a>, <a href="/u5552"><span style="color:#9E3474"><strong>Carrie E. Emrys</strong></span></a>, <a href="/u6303"><span style="color:#9E3474"><strong>Casey Buchanan</strong></span></a>, <a href="/u6259"><span style="color:#A08ABA"><strong>Casey R. Morrisson</strong></span></a>, <a href="/u6285"><span style="color:#A08ABA"><strong>Cerceï B-P. Steele</strong></span></a>, <a href="/u4402"><span style="color:#ED7B34"><strong>Charlie A. Harrington</strong></span></a>, <a href="/u5927"><span style="color:#8A8A8A"><strong>Charline J. Granger</strong></span></a>, <a href="/u6289"><span style="color:#9E3474"><strong>Cheyenne Oak</strong></span></a>, <a href="/u5084"><span style="color:#9E3474"><strong>Clay Fitz. Cooper</strong></span></a>, <a href="/u5898"><span style="color:#FF00CC"><strong>Cole S.-Wildingham</strong></span></a>, <a href="/u6263"><span style="color:#CFBB36"><strong>Cooper N. Hyland</strong></span></a>, <a href="/u5635"><span style="color:#5E9112"><strong>Cornélia Van Rosen</strong></span></a>, <a href="/u5879"><span style="color:#FF7A95"><strong>Dana Nguyen</strong></span></a>, <a href="/u5918"><span style="color:#C42D2D"><strong>Dante D. Basini</strong></span></a>, <a href="/u5738"><span style="color:#FF00CC"><strong>Delilah R. Carmichael</strong></span></a>, <a href="/u6193"><span style="color:#6A6DA3"><strong>Devan R. Newman</strong></span></a>, <a href="/u6300"><span style="color:#E05E5E"><strong>Dimitri V. Milanov</strong></span></a>, <a href="/u6301"><span style="color:#E05E5E"><strong>E. Xavi Fàbregas</strong></span></a>, <a href="/u6204"><span style="color:#F5B1BE"><strong>Edelweiss A. Jenkins</strong></span></a>, <a href="/u6296"><span style="color:#6A6DA3"><strong>Elio Carreirao</strong></span></a>, <a href="/u6062"><span style="color:#8A8A8A"><strong>Ellana Anderson</strong></span></a>, <a href="/u6307"><span style="color:#8A8A8A"><strong>Elliott C. Windsor</strong></span></a>, <a href="/u6043"><span style="color:#FF7A95"><strong>Emilia S. de Bourbon</strong></span></a>, <a href="/u1156"><span style="color:#5E9112"><strong>Emma J. Müller</strong></span></a>, <a href="/u6156"><span style="color:#9E3474"><strong>Esteban Jimenez</strong></span></a>, <a href="/u1712"><span style="color:#5E9112"><strong>Feldt Crossroad</strong></span></a>, <a href="/u1336"><span style="color:#EB9B5E"><strong>Feryel Oswald</strong></span></a>, <a href="/u6205"><span style="color:#F5B1BE"><strong>Fidji P. Jones</strong></span></a>, <a href="/u4428"><span style="color:#8A8A8A"><strong>Finn Mansfield</strong></span></a>, <a href="/u5960"><span style="color:#ED7B34"><strong>G. Eden de Glücksbourg</strong></span></a>, <a href="/u6295"><span style="color:#E05E5E"><strong>G. Matthieu Maureau</strong></span></a>, <a href="/u2867"><span style="color:#9E3474"><strong>Gabriel A-B Batista</strong></span></a>, <a href="/u6210"><span style="color:#8A8A8A"><strong>Gideon Blackthorn</strong></span></a>, <a href="/u1753"><span style="color:#8A8A8A"><strong>Grace St-James</strong></span></a>, <a href="/u4459"><span style="color:#C42D2D"><strong>Graham B. Singleton</strong></span></a>, <a href="/u6310">H.-C. Phoenix Holland</a>, <a href="/u6116"><span style="color:#8A8A8A"><strong>Harlow V. Falgren</strong></span></a>, <a href="/u6269"><span style="color:#E05E5E"><strong>Hayden Lee Muñoz</strong></span></a>, <a href="/u2179"><span style="color:#B39B00"><strong>Haytam B. Winchester</strong></span></a>, <a href="/u5602"><span style="color:#ED7B34"><strong>Hazel N. Pennington</strong></span></a>, <a href="/u5200"><span style="color:#95BADB"><strong>Iris L. Castel</strong></span></a>, <a href="/u4620"><span style="color:#B39B00"><strong>Isaac Jackson</strong></span></a>, <a href="/u6302"><span style="color:#9E3474"><strong>Isaiha J. Buchanan</strong></span></a>, <a href="/u6278"><span style="color:#F5B1BE"><strong>Ivy L. Martin</strong></span></a>, <a href="/u6029"><span style="color:#5E9112"><strong>J. Sage Lewis</strong></span></a>, <a href="/u6266"><span style="color:#E05E5E"><strong>J. Warren Cooper</strong></span></a>, <a href="/u4098"><span style="color:#C42D2D"><strong>J.Oliver Scott-Castellan</strong></span></a>, <a href="/u6118"><span style="color:#EB9B5E"><strong>Jake N. Chevallier</strong></span></a>, <a href="/u5969"><span style="color:#A08ABA"><strong>Jamie-Melya Ambrose</strong></span></a>, <a href="/u3474"><span style="color:#ED7B34"><strong>Jarod N. Sullivan</strong></span></a>, <a href="/u6305"><span style="color:#8A8A8A"><strong>Jason A. Brigg</strong></span></a>, <a href="/u807"><span style="color:#9E3474"><strong>Jasper O. Ellington</strong></span></a>, <a href="/u5467"><span style="color:#C42D2D"><strong>Jaysaël D Scott-Castellan</strong></span></a>, <a href="/u6250"><span style="color:#F5B1BE"><strong>Jessy M-S. Fawkes</strong></span></a>, <a href="/u6157"><span style="color:#8A8A8A"><strong>Jezabel Wellington</strong></span></a>, <a href="/u6231"><span style="color:#CFBB36"><strong>Jimmy Bodovsky</strong></span></a>, <a href="/u5625"><span style="color:#FF00CC"><strong>Joelyn B. M-Thompson</strong></span></a>, <a href="/u6236"><span style="color:#F5B1BE"><strong>Jolene Onassis</strong></span></a>, <a href="/u6309">Jonas B. Holt</a>, <a href="/u5664"><span style="color:#975BF0"><strong>Jordan Weasley</strong></span></a>, <a href="/u6239"><span style="color:#FF00CC"><strong>Josh Edern-Lloyd</strong></span></a>, <a href="/u6024"><span style="color:#FF00CC"><strong>Judith Thompson</strong></span></a>, <a href="/u5844"><span style="color:#7B8F53"><strong>Jules De Lacroix</strong></span></a>, <a href="/u4700"><span style="color:#975BF0"><strong>K. Olyvia Dereham</strong></span></a>, <a href="/u4823"><span style="color:#8A8A8A"><strong>Kathleen Buchanan</strong></span></a>, <a href="/u5978"><span style="color:#F5B1BE"><strong>Kelly Flynn</strong></span></a>, <a href="/u273"><span style="color:#8A8A8A"><strong>Keyla Haven Hepburn</strong></span></a>, <a href="/u5888"><span style="color:#8A8A8A"><strong>Kyla Carmichael</strong></span></a>, <a href="/u6067"><span style="color:#F5B1BE"><strong>L. Aurora K. Haugland</strong></span></a>, <a href="/u4726"><span style="color:#509EED"><strong>L. Victoria S.-Wildingham</strong></span></a>, <a href="/u5586"><span style="color:#8A8A8A"><strong>Lana Milkovich</strong></span></a>, <a href="/u6147"><span style="color:#CFBB36"><strong>Lawrence H. Austen</strong></span></a>, <a href="/u1"><span style="color:#000000"><strong>Le Doyen</strong></span></a>, <a href="/u3432"><span style="color:#9E3474"><strong>Leevy W-Cartwith</strong></span></a>, <a href="/u4077"><span style="color:#5E9112"><strong>Leo Halberstam</strong></span></a>, <a href="/u5670"><span style="color:#5E9112"><strong>Leonor Von Hohenzollern</strong></span></a>, <a href="/u5929"><span style="color:#7B8F53"><strong>Lewis Holloway</strong></span></a>, <a href="/u6290"><span style="color:#8A8A8A"><strong>Liam B. Deschanel</strong></span></a>, <a href="/u4738"><span style="color:#509EED"><strong>Lilia E. Caldeira</strong></span></a>, <a href="/u6087"><span style="color:#A08ABA"><strong>Lily-Rose S. Hopkins</strong></span></a>, <a href="/u3656"><span style="color:#C42D2D"><strong>Loukas S. Jefferson</strong></span></a>, <a href="/u5559"><span style="color:#5E9112"><strong>Lucas J. Watson</strong></span></a>, <a href="/u6127"><span style="color:#95BADB"><strong>Ludmila Petrova</strong></span></a>, <a href="/u6163"><span style="color:#95BADB"><strong>Lukà D. Petrov</strong></span></a>, <a href="/u5466"><span style="color:#5E9112"><strong>Luke E. Forks</strong></span></a>, <a href="/u5998"><span style="color:#5E9112"><strong>Lysandre H. D'York</strong></span></a>, <a href="/u28"><span style="color:#975BF0"><strong>Maddy L. Delaunay</strong></span></a>, <a href="/u4100"><span style="color:#8A8A8A"><strong>Maden A. Granger</strong></span></a>, <a href="/u2951"><span style="color:#FF7A95"><strong>Madisson L. Galloway</strong></span></a>, <a href="/u6242"><span style="color:#6A6DA3"><strong>Magdalena Stark</strong></span></a>, <a href="/u3510"><span style="color:#975BF0"><strong>Maggie Clayton-Khalski</strong></span></a>, <a href="/u5351"><span style="color:#5E9112"><strong>Malachy O'Leary</strong></span></a>, <a href="/u5721"><span style="color:#975BF0"><strong>Malicia Lewis</strong></span></a>, <a href="/u3466">Marie-Lou Burberry</a>, <a href="/u5972"><span style="color:#5E9112"><strong>Maxence Atwoodth</strong></span></a>, <a href="/u4011"><span style="color:#5E9112"><strong>Maxime T. Jackson</strong></span></a>, <a href="/u6150"><span style="color:#F5B1BE"><strong>Maxine M.-Thomspers</strong></span></a>, <a href="/u5797"><span style="color:#8A8A8A"><strong>Maxwell F.-Steadworth</strong></span></a>, <a href="/u5959"><span style="color:#8A8A8A"><strong>May Chan Lee</strong></span></a>, <a href="/u6275"><span style="color:#F5B1BE"><strong>Mecky A. Stevenof</strong></span></a>, <a href="/u6237"><span style="color:#CFBB36"><strong>Meera V. Talwar</strong></span></a>, <a href="/u6028"><span style="color:#5E9112"><strong>Megan Forks</strong></span></a>, <a href="/u6217"><span style="color:#FF00CC"><strong>Megara P. Lazaridis</strong></span></a>, <a href="/u6023"><span style="color:#5E9112"><strong>Méline B. Milkovich</strong></span></a>, <a href="/u4228"><span style="color:#975BF0"><strong>Mia Douglas</strong></span></a>, <a href="/u6304"><span style="color:#F5B1BE"><strong>Millicent D. Weasley</strong></span></a>, <a href="/u4623"><span style="color:#B39B00"><strong>Milo T. Cantor-Day</strong></span></a>, <a href="/u4443"><span style="color:#ED7B34"><strong>Mira J. Hudson</strong></span></a>, <a href="/u4118"><span style="color:#509EED"><strong>Misha V. Ienchenski</strong></span></a>, <a href="/u6113"><span style="color:#95BADB"><strong>N. Hippolyte Dunford</strong></span></a>, <a href="/u11"><span style="color:#5E9112"><strong>N. Jude S-Montgomery</strong></span></a>, <a href="/u6218"><span style="color:#CFBB36"><strong>N. Lena Khalski</strong></span></a>, <a href="/u5271"><span style="color:#509EED"><strong>Naima T. Bekri</strong></span></a>, <a href="/u5608"><span style="color:#8A8A8A"><strong>Nate J. Hawkins</strong></span></a>, <a href="/u5855"><span style="color:#509EED"><strong>Nekho Z. Heruben</strong></span></a>, <a href="/u2916"><span style="color:#975BF0"><strong>Nikolaï Clayton-Khalski</strong></span></a>, <a href="/u6083"><span style="color:#8A8A8A"><strong>Nina Bishop-Clayton</strong></span></a>, <a href="/u5447"><span style="color:#509EED"><strong>Noah Arjen d'Aremberg</strong></span></a>, <a href="/u5954"><span style="color:#C42D2D"><strong>O. Brent Keegan</strong></span></a>, <a href="/u5081"><span style="color:#509EED"><strong>Oksanna T. Petrova</strong></span></a>, <a href="/u6032"><span style="color:#9E3474"><strong>Olive B. Shark</strong></span></a>, <a href="/u5834"><span style="color:#975BF0"><strong>Oliver Matthiew Davis</strong></span></a>, <a href="/u5727"><span style="color:#B39B00"><strong>Paris A. Maconahey</strong></span></a>, <a href="/u6176"><span style="color:#8A8A8A"><strong>Phèdre Mikaelson</strong></span></a>, <a href="/u3652"><span style="color:#B39B00"><strong>Priam J. Smith</strong></span></a>, <a href="/u2336"><span style="color:#FF00CC"><strong>Priape Zacharias</strong></span></a>, <a href="/u6136"><span style="color:#E05E5E"><strong>Rafael Levingston</strong></span></a>, <a href="/u4643"><span style="color:#509EED"><strong>Rainier "Nemo" Grimaldi</strong></span></a>, <a href="/u6075"><span style="color:#8A8A8A"><strong>Raphael T. White</strong></span></a>, <a href="/u6003"><span style="color:#ED7B34"><strong>River S. Everdeen</strong></span></a>, <a href="/u5601"><span style="color:#9E3474"><strong>Robin Z. Chemtov</strong></span></a>, <a href="/u6158"><span style="color:#7B8F53"><strong>Romane Scott-Castellan</strong></span></a>, <a href="/u6065"><span style="color:#8A8A8A"><strong>Romy Oswald</strong></span></a>, <a href="/u2575"><span style="color:#C42D2D"><strong>Royce A. Magyar</strong></span></a>, <a href="/u6121"><span style="color:#8A8A8A"><strong>S. Elena Archibald</strong></span></a>, <a href="/u510"><span style="color:#8A8A8A"><strong>Sacha C. Angharad</strong></span></a>, <a href="/u3433"><span style="color:#8A8A8A"><strong>Sally L-A. Mendoza</strong></span></a>, <a href="/u6308">Samantha R. Drake</a>, <a href="/u5877"><span style="color:#FF7A95"><strong>Sanaa E. Droski</strong></span></a>, <a href="/u6268"><span style="color:#A08ABA"><strong>Sarah Crawford</strong></span></a>, <a href="/u5842"><span style="color:#8A8A8A"><strong>Sharon F. Gretchko</strong></span></a>, <a href="/u4069"><span style="color:#FF00CC"><strong>Sienna Rose</strong></span></a>, <a href="/u5413"><span style="color:#C42D2D"><strong>Simba O-Teicedeiro</strong></span></a>, <a href="/u6074"><span style="color:#7B8F53"><strong>Skyler Cartwright</strong></span></a>, <a href="/u5947"><span style="color:#509EED"><strong>Sloan Bushnell</strong></span></a>, <a href="/u6186"><span style="color:#8A8A8A"><strong>Sophia B. Delenikas</strong></span></a>, <a href="/u6064"><span style="color:#509EED"><strong>Soren Castel</strong></span></a>, <a href="/u4632"><span style="color:#509EED"><strong>Stuart X. Newton</strong></span></a>, <a href="/u5460"><span style="color:#5E9112"><strong>Swan E. Keynes</strong></span></a>, <a href="/u4401"><span style="color:#B39B00"><strong>Talya V. Blackburn</strong></span></a>, <a href="/u3846"><span style="color:#509EED"><strong>Tate L.Murray</strong></span></a>, <a href="/u4020"><span style="color:#ED7B34"><strong>Tessy R. Magyar</strong></span></a>, <a href="/u6132"><span style="color:#95BADB"><strong>Thiago De Arroyo-O'Hara</strong></span></a>, <a href="/u6281"><span style="color:#6A6DA3"><strong>Tobias S. Walsh</strong></span></a>, <a href="/u5303"><span style="color:#8A8A8A"><strong>Tommy van Dijk</strong></span></a>, <a href="/u6068"><span style="color:#8A8A8A"><strong>Valentina Linetti</strong></span></a>, <a href="/u6063"><span style="color:#95BADB"><strong>Valentine R. Evans</strong></span></a>, <a href="/u6092"><span style="color:#7B8F53"><strong>Vega C-R. Vanderbilt</strong></span></a>, <a href="/u6109"><span style="color:#A08ABA"><strong>Veïa D. Alvisio</strong></span></a>, <a href="/u6233"><span style="color:#E05E5E"><strong>Victor Da Firenze</strong></span></a>, <a href="/u3858"><span style="color:#5E9112"><strong>Wade B. Forbes</strong></span></a>, <a href="/u5385"><span style="color:#5E9112"><strong>Walter J. Rutherford</strong></span></a>, <a href="/u6251"><span style="color:#95BADB"><strong>Willow P-Sanchez</strong></span></a>, <a href="/u5828"><span style="color:#8A8A8A"><strong>Zachary L. Scott</strong></span></a></span></div>
                </td>
            </tr>
        </table>
    </div>
    <div class="player">
        <iframe style="border:none; margin-top:-5px" src="http://files.podsnack.com/iframe/embed.html?hash=avzcfxxz&t=1440871463" width="330" height="30" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
    </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/darkdreams/ilh-qeel-v53-bpPKgv */
* { box-sizing: border-box; }
body { color: #575757; }
a { text-decoration: none; outline: none; color: #DE0615; }

.margintop {
  margin-top: 10px;
}

.qeel {
  position: relative;
  width: 730px;
  height: 630px;
  margin: 0 auto;
  background: #EBEBED;
}


.qeel .actu {
  position: absolute;
  z-index: 201;
  top: 10px;
  right: 10px;
  width: 320px;
  height: 170px;
  padding: 10px;
  background: #DBDCE1;
  border: 1px solid #D9D3D6;
  text-align: justify;
  font-size: 10px !important;
  line-height: 10px;
  overflow: auto;
  font-family: verdana;
}

.qeel .stats {
  position: absolute;
  z-index: 201;
  top: 10px;
  left: 10px;
  width: 250px;
  height: 170px;
  padding: 10px;
  background: #DBDCE1;
  border: 1px solid #D9D3D6;
  text-align: justify;
  font-size: 10px !important;
  line-height: 10px;
  overflow: auto;
  font-family: verdana;
}

.qeel .connected {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 290px;
  height: 390px;
  padding: 5px;
  background: #DBDCE1;
  border: 1px solid #D9D3D6;
  overflow: auto;
  text-align: justify;
  font-size: 10px !important;
  line-height: 10px;
  font-family: Verdana;
}

.qeel .player {
  position: absolute;
  bottom: 25px;
  right: 25px;
  width: 360px;
  height: 30px;
  padding: 4px 0px;
  background: #DBDCE1;
  border: 1px solid #D9D3D6;
  z-index: 1;
}
.qeel .groupes {
  position: absolute;
  bottom: 100px;
  right: 10px;
  width: 350px;
  height: 300px;
  z-index:200;
}
.qeel .groupes .onglets {
  position: relative;
  z-index: 200;
  text-align: justify;
  padding-top: 24px;
}

.qeel .groupes a.onglet {
  display: inline-block;
  margin: 0 1px;
  width: 52px;
  height: 25px;
  color: rgba(255,255,255,.5);
    border: 2px solid rgba(255,255,255,0);
  transition: border 500ms ease-in-out; 
}

.qeel .groupes .onglet:hover {
  transition: border 500ms ease-in-out; 
  border: 2px solid rgba(255,255,255,.5);
}

.qeel .groupes .onglet.active {
  border: 2px solid rgba(255,255,255,.75);
}

.onglet.default    { background-color: #FFFFFF; color: #8a8a8a !important; }
.onglet.cabot      { background-color: #FF7A95; } /*CC72BD*/
.onglet.dunster    { background-color: #B39B00; }
.onglet.eliot      { background-color: #509EED; } /*2289F0*/
.onglet.lowell     { background-color: #965BEF; } /*7637C7*/
.onglet.mather     { background-color: #76AD23; }
.onglet.quincy     { background-color: #ED7B34; }
.onglet.winthrop   { background-color: #C92724; }
.onglet.student    { background-color: #8A8A8A; }
.onglet.staff      { background-color: #6A6DA3; }
.onglet.citizen    { background-color: #9E3474; }
.onglet.kids       { background-color: #2C998B; }
.onglet.pnj        { background-color: #000000 !important; }

.qeel .groupes .contents {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.qeel .groupes .content {
  position: absolute;
  z-index: 100;
    top: 85px;
    left: 1px;
    right: 1px;
    bottom: 0;
  background: #DBDCE1;
  border: 1px solid #D9D3D6;
  opacity: 0;
  padding: 5px;
}

.qeel .groupes .content.active {
  opacity: 1;
  z-index: 500;
}

.qeel .groupes .content .house {
  display: block;
  text-align: center;
  font: 900 18px Raleway;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.05);
  margin-top: 10px;
}

.qeel .groupes .content.default .house {
  margin-top: 5px;
}

.qeel ul {
  list-style-type: none;
  padding:0;
  margin: 10px 0 0;
}

.qeel li {
  display: table;
  width: 90%;
  margin: 0 auto;
}

.qeel li span {
  display: table-cell;
}
.qeel li .house_c {
  width: 50%;
  text-transform: uppercase;
  text-align: right;
  padding-right: 20px;
  font: 700 14px/12px Raleway;

}
.qeel li .howmuch {
  width: 40%;
  text-align: right;
  padding-right:35px;
  font: 14px Courier;
}

.qeel ul.details li { width: 100% !important; }

.qeel li.title span,
.qeel li.pres span,
.qeel li.groups span,
.qeel li.others span {
  text-align: center;
  width: 50%;
}

.qeel li.title span {
  text-transform: uppercase;
  font: 700 12px Raleway;
  margin-top: 10px;
  display: inline-block;
  color: #FFF !important;
}

.qeel li.pres span {
  font: 14px Calligraffitti;
}

.qeel li.groups span {
  letter-spacing: 1px;
  font: 12px Coming Soon;
  text-transform: uppercase;
  text-align: left;
  padding: 0 0 0 20px;
}

.qeel li.groups i {
  font-style: normal;
  letter-spacing: 0;
  font-family: Courier New;
}

.qeel li.groups span:first-child {
  text-align: right;
  padding: 0 19px 0 0;
  border-right: 1px solid rgba(255,255,255,.15);
}

.qeel li.one span {
  display: block;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  font: 12px Raleway;
}

.qeel li.cta span {
  margin: 10px auto 0;
  width: 75%;
  border: 1px solid rgba(255,255,255,.15);
  font-weight: 700;
}

.qeel li.groups span.pnj {
  letter-spacing: 0;
}

.cabot      { color: #FF7A95; } /*CC72BD*/
.dunster    { color: #B39B00; }
.eliot      { color: #509EED; } /*2289F0*/
.lowell     { color: #965BEF; } /*7637C7*/
.mather     { color: #76AD23; }
.quincy     { color: #ED7B34; }
.winthrop   { color: #C92724; }
.student    { color: #8A8A8A; }
.citi       { color: #5357A0; }
.citizen    { color: #9E3474; }
.staff      { color: #6A6DA3; }
.kids       { color: #2C998B; }
.pnj        { color: #000000 !important; }
.columbia   { color: #3A5F96; }

/*Downloaded from https://www.codeseek.co/darkdreams/ilh-qeel-v53-bpPKgv */
$(document).ready(function() {
  $(".qeel .onglets .default, .qeel .contents .default").addClass('active');

  var $tabs = $(" .qeel .onglets a.onglet "); 

  $tabs.on("click", function(e) {
    e.preventDefault();
    var classSelected = '.'.concat($(this).data('name'));

    $tabs.removeClass(' active ');
    $(this).addClass(' active ');
    $(".qeel .contents .content" + classSelected).addClass(' active ').animate({
      opacity: 1, duration: 1000 
    }).siblings().removeClass(' active ').animate({
      opacity: 0, duration: 1000
    });
  });
});

Comments