123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <link href='https://fonts.googleapis.com/css?family=Ubuntu|Lobster|Metamorphous|UnifrakturMaguntia|Unica+One|Courgette|Kaushan+Script|BenchNine|Wire+One|Cabin|Codystar' rel='stylesheet' type='text/css'>
<div class="forum">
  <div style="font-family: 'Codystar'; font-size: 90px; line-height: 100%; text-align: center; color: #898989;position:absolute;left:200px;top:30px;z-index:1;text-shadow: 7px 0px 5px #861612; letter-spacing: 1px;">Passion in Las Vegas</div>
  <div style="width:1400px;height:500px;background-image:url('https://i.imgur.com/knBNmh5.png');background-position:right;position:relative;">
    <table>
      <td>
        <div style="width:97px; height:97px; background-image:URL(https://i.imgur.com/mVTEIVX.jpg);border-radius:100%;position:relative;top:210px;left:40px"></div>
        <div style="font-size:210px;position:relative;top:72px;left:10px;color:#8C867D;font-family:times new roman;opacity:0.35">♀</div>
      </td>
      <td>
        <div style="width:97px;height:97px; background-image:URL(https://i.imgur.com/ap5DXvF.png);border-radius:100%;position:relative;top:211px;left:17px"></div>
        <div style="font-size:210px;position:relative;top:-2px;color:#8C867D;font-family:times new roman;opacity:0.35">♂</div>
      </td>
      <td>
        <div style="width:97px; height:97px; background-image:URL(https://i.imgur.com/oiqLXM5.jpg);border-radius:100%;position:relative;top:210px;left:-5px"></div>
        <div style="font-size:210px;position:relative;top:70px;left:-35px;color:#8C867D;font-family:times new roman;opacity:0.35">♀</div>
      </td>
      <td>
        <div style="width:97px; height:97px; background-image:URL(https://i.imgur.com/5TWnybE.png);border-radius:100%;position:relative;top:208px;left:-29px"></div>
        <div style="font-size:210px;position:relative;top:-5px;left:-45px;color:#8C867D;font-family:times new roman;opacity:0.35">♂</div>
      </td>
    </table>
  </div>
  <div style="width:575px;height:180px;opacity:0.75;background-color:#4D4D4D;position:relative;top:-380px;left:640px;overflow:auto;margin-bottom:-180px;color:#BCBCBC;padding:3px;font-family:Courgette;font-size:14px;">Mi az, ami először eszedbe jut Las Vegas-ról? Nevada állam legnépesebb városa? A kaszinók világa? A legdizájnosabb szállodák? A bűn fényes városa? A Rat Pack és a Sands Hotel? Az illegális prostitúció (bár Nevadában legális, ám csak 28 kijelölt bordélyra
    vonatkozóan)? A szerencsejátékok Paradicsoma? A másnapok és a legemlékezetesebb éjszakák? Nos, a felsoroltak bármelyikére is bólintottál rá, teljesen jogos volt! Vegas számtalan lehetőséget nyújt a szórakozásra, ki így, ki úgy jut hozzá a legális
    vagy épp illegális élvezetekhez! A várost évente mintegy 40 millió turista látogatja. Netán te is egy vagy közülük? Vagy csak tervezed? Már el is döntötted, hogy itt próbálsz szerencsét? Ha kiszíneznéd a szürke mindennapokat, elvernéd a pénzed, hozzámennél
    egy vadidegenhez egy alkoholmámoros éjszakán, itt a helyed! Úgy gondolod, többre mész, ha könnyű nőcskékre költöd a pénzed vagy illegális ügyletekbe bonyolódsz? Kaszinókba fektetnél? Drogokkal üzletelnél? Vagy inkább kockáztatsz és lányokat futtatsz?
    Egyszerű vegas-i lakóként próbálod fenntartani a látszatát egy tökéletesebb életnek? Vonz a csillogás és az sem okoz gondot, hogy ennek érdekében eladd a tested és lelked? Végigszáguldoznád a város külterületét a Harleyddal? Én mondom, drágám, az
    ördög Vegas-ba költözött és van úgy, hogy mindent szabad! De ennek a mindennek ára van. Felkészültél?</div>
  <div style="width:1500px; padding: 10px; height: 150px; position: relative; top: -5px;left:15%;">
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td>
          <div style="position: absolute; -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg);height: 30px; font-family: Metamorphous; color:#AAA9AB; text-align: center;font-size: 15px;top:40%; left:-2%;">nouvelles</div>
        </td>
        <td>
          <div style="width: 10px;"></div>
        </td>
        <td>
          <div class="nouvelles"> <b>01/02</b> - trois quatre </div>
        </td>
        <td>
          <div style="width: 10px;"></div>
        </td>
        <td>
          <div style="height: 150px; width: 160px;"><img src="http://placehold.it/130x70/BCBCBC/000000" style="border-radius: 2em 1em 4em / 0.5em 3em;"></img> <img src="http://placehold.it/130x70/4D4D4D/000000" style="border-radius: 2em 1em 4em / 0.5em 3em;margin-top:10px;"></img>
        </td>
        </div>
        <td>
          <div style="height: 150px; width: 160px;position: relative;">
            <table cellpadding="0" cellspacing="0">
              <td> <img src="http://placehold.it/130x70/4D4D4D/000000" style="border-radius: 2em 1em 4em / 0.5em 3em;"></img> <img src="http://placehold.it/130x70/BCBCBC/000000" style="border-radius: 2em 1em 4em / 0.5em 3em;margin-top:10px;"></img>
              </td>
              <td>
                <div style="position: absolute; -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(9deg); width: 150px; height: 30px; font-family: Metamorphous; color:#AAA9AB; text-align: center;font-size: 13px;top: 65px; left:-90px;">Staff</div>
              </td>

            </table>
          </div>
          <td>
            <div class="nouvelles">Az oldalon található összes kép a deviantart.com és a Google keresőoldalról származnak. A Passion in Las Vegas design-jához a változtatásokat Delilah S. Montgomery és Nora Raynhood végezték. A kódolások, azok alapjai és egyes részletei mind-mind
              online is fellelhetőek. A leírásokat a staff tagjainak köszönhetjük.
              <hr> Nektek, Tagoknak is köszönjük, hogy velünk, itt vagytok. Nélkületek nem lenne az igazi.</div>
          </td><td>
            <div class="nouvelles" style="margin-left:15px">Az oldalon erotikus tartalmú játékok is fellelhetőek. Obszcén és durva kifejezésekkel találkozhatsz, amikért felelősséget nem vállalunk, az alkotók szabad kezet kapnak a nyelvezet megválasztásában. Ne feledjétek, hogy a játéktéren karakterekkel találkoztok. Megértéseteket köszönjük! 
Az oldal tartalma eltérhet a valóságtól egyes esetekben.</div>
          </td>
          <td>
            <div class="nouvelles" style="margin-left:15px">
              <textarea rows="7" cols="21" style="background-color: #000;color:#BEAA94;border-radius:30px/10px">CCS / HTML</textarea>
              <a href="#">
                <div class="sbliens" style="width:170px">Hírdetések</div>
              </a>
            </div>
          </td>
      </tr>
      </td>
    </table>
  </div>
  <br>
  <br>
  <br>
  <br>
  <center>
    <div id="forumall">
      <div style="width: 300px; height: 120px; background-image: url(https://i.imgur.com/DStpAbX.jpg); background-position: right;">
        <div class="descspace">
          <div class="forumdescscroll">
            <a href="#">
              <div class="forumdescun">un</div>
            </a>
            <a href="#">
              <div class="forumdesdeux">deux</div>
            </a>
            <a href="#">
              <div class="forumdescun">trois</div>
            </a>
            <a href="#">
              <div class="forumdesdeux">quatre</div>
            </a>
            <a href="#">
              <div class="forumdescun">cinq</div>
            </a>
          </div>
        </div>
        <div class="descspacedeux">
          <div class="descspacedescun"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
        </div>
      </div>
    </div>
  </center>
  <center>
    <div class="monhisnom">prénom / nom</div>
    <table>
      <td valign="top">
        <div style="width: 200px; height: 320px;background-image: url(http://placehold.it/200x320); border: 5px solid #3F3F3F;border-radius:110px 10px 10px 10px;"></div>
      </td>
      <td>
        <div class="monhispers">personnalité</div>
        <div class="monhispersun">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt felis et urna condimentum vehicula. Donec suscipit nulla eget tortor interdum laoreet. Praesent non imperdiet justo. Nunc nec nisl id nibh tempor accumsan a eu urna. Sed nec viverra
          erat. Vestibulum interdum congue sagittis. Fusce eu neque enim. Vestibulum bibendum mauris tortor. Pellentesque tortor nisl, interdum facilisis laoreet varius, finibus ac nisl. Aenean consequat dui in pretium elementum. Quisque condimentum dui
          eu euismod suscipit. Sed felis eros, tempus ut dolor vel, condimentum eleifend erat. Suspendisse eget volutpat mauris. Integer fringilla pulvinar felis, quis commodo dui gravida et. Donec at pellentesque metus, gravida efficitur sem. Nunc fringilla
          risus at tristique auctor. Sed semper ex viverra justo efficitur vulputate eget ut lorem. Nunc justo orci, molestie quis est ac, ultrices commodo sapien. Sed nec ligula id orci laoreet dapibus. Praesent a consectetur purus. Nunc fringilla iaculis
          nulla ut feugiat.</div>
        <table>
          <tr>
            <td>
              <div class="monhisinf">âge</div>
            </td>
            <td>
              <div class="monhisinf">nationalité</div>
            </td>
            <td>
              <div class="monhisinf">occupation</div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="monhisinf">sexualité</div>
            </td>
            <td>
              <div class="monhisinf">groupe</div>
            </td>
            <td>
              <div class="monhisinf">DDF</div>
            </td>
          </tr>
        </table>
    </table>
    <div class="monhispersdeux">Mon histoire</div>
    <div class="monhisperstrois">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt felis et urna condimentum vehicula. Donec suscipit nulla eget tortor interdum laoreet. Praesent non imperdiet justo. Nunc nec nisl id nibh tempor accumsan a eu urna. Sed nec viverra
      erat. Vestibulum interdum congue sagittis. Fusce eu neque enim. Vestibulum bibendum mauris tortor. Pellentesque tortor nisl, interdum facilisis laoreet varius, finibus ac nisl. Aenean consequat dui in pretium elementum. Quisque condimentum dui eu
      euismod suscipit. Sed felis eros, tempus ut dolor vel, condimentum eleifend erat. Suspendisse eget volutpat mauris. Integer fringilla pulvinar felis, quis commodo dui gravida et. Donec at pellentesque metus, gravida efficitur sem. Nunc fringilla
      risus at tristique auctor. Sed semper ex viverra justo efficitur vulputate eget ut lorem. Nunc justo orci, molestie quis est ac, ultrices commodo sapien. Sed nec ligula id orci laoreet dapibus. Praesent a consectetur purus. Nunc fringilla iaculis
      nulla ut feugiat. Fusce non justo at sem rutrum tincidunt. Aliquam erat volutpat. Curabitur orci velit, pretium id ipsum vitae, viverra semper neque. Morbi aliquam risus non massa molestie pretium. Nam vel consequat risus. Pellentesque nec euismod
      ipsum, congue pellentesque quam. Fusce feugiat dui sit amet arcu tincidunt molestie. Fusce non justo at sem rutrum tincidunt. Aliquam erat volutpat. Curabitur orci velit, pretium id ipsum vitae, viverra semper neque. Morbi aliquam risus non massa
      molestie pretium. Nam vel consequat risus. Pellentesque nec euismod ipsum, congue pellentesque quam. Fusce feugiat dui sit amet arcu tincidunt molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt felis et urna condimentum
      vehicula. Donec suscipit nulla eget tortor interdum laoreet. Praesent non imperdiet justo. Nunc nec nisl id nibh tempor accumsan a eu urna. Sed nec viverra erat. Vestibulum interdum congue sagittis. Fusce eu neque enim. Vestibulum bibendum mauris
      tortor. Pellentesque tortor nisl, interdum facilisis laoreet varius, finibus ac nisl. Aenean consequat dui in pretium elementum. Quisque condimentum dui eu euismod suscipit. Sed felis eros, tempus ut dolor vel, condimentum eleifend erat. Suspendisse
      eget volutpat mauris. Integer fringilla pulvinar felis, quis commodo dui gravida et. Donec at pellentesque metus, gravida efficitur sem. Nunc fringilla risus at tristique auctor. Sed semper ex viverra justo efficitur vulputate eget ut lorem. Nunc
      justo orci, molestie quis est ac, ultrices commodo sapien. Sed nec ligula id orci laoreet dapibus. Praesent a consectetur purus. Nunc fringilla iaculis nulla ut feugiat. Fusce non justo at sem rutrum tincidunt. Aliquam erat volutpat. Curabitur orci
      velit, pretium id ipsum vitae, viverra semper neque. Morbi aliquam risus non massa molestie pretium. Nam vel consequat risus. Pellentesque nec euismod ipsum, congue pellentesque quam. Fusce feugiat dui sit amet arcu tincidunt molestie.Lorem ipsum
      dolor sit amet, consectetur adipiscing elit. Duis tincidunt felis et urna condimentum vehicula. Donec suscipit nulla eget tortor interdum laoreet. Praesent non imperdiet justo. Nunc nec nisl id nibh tempor accumsan a eu urna. Sed nec viverra erat.
      Vestibulum interdum congue sagittis. Fusce eu neque enim. Vestibulum bibendum mauris tortor. Pellentesque tortor nisl, interdum facilisis laoreet varius, finibus ac nisl. Aenean consequat dui in pretium elementum. Quisque condimentum dui eu euismod
      suscipit. Sed felis eros, tempus ut dolor vel, condimentum eleifend erat. Suspendisse eget volutpat mauris. Integer fringilla pulvinar felis, quis commodo dui gravida et. Donec at pellentesque metus, gravida efficitur sem. Nunc fringilla risus at
      tristique auctor. Sed semper ex viverra justo efficitur vulputate eget ut lorem. Nunc justo orci, molestie quis est ac, ultrices commodo sapien. Sed nec ligula id orci laoreet dapibus. Praesent a consectetur purus. Nunc fringilla iaculis nulla ut
      feugiat. Fusce non justo at sem rutrum tincidunt. Aliquam erat volutpat. Curabitur orci velit, pretium id ipsum vitae, viverra semper neque. Morbi aliquam risus non massa molestie pretium. Nam vel consequat risus. Pellentesque nec euismod ipsum,
      congue pellentesque quam. Fusce feugiat dui sit amet arcu tincidunt molestie.</div>
</div>
</center>
<center>
  <table>
    <td>
      <div style="width: 200px; height: 320px;background-image: url(http://placehold.it/200x320); border: 5px solid #3E352E;border-radius:110px 10px 10px 10px;box-shadow:0px 0px 10px #120907;"></div>
    </td>
    <td>
      <div class="csnomprenom"> prénom / nom </div>
      <div class="cstextedeux">
        <div class="cstexteun"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt felis et urna condimentum vehicula. Donec suscipit nulla eget tortor interdum laoreet. Praesent non imperdiet justo. Nunc nec nisl id nibh tempor accumsan a eu urna. Sed nec
          viverra erat. Vestibulum interdum congue sagittis. Fusce eu neque enim. Vestibulum bibendum mauris tortor. Pellentesque tortor nisl, interdum facilisis laoreet varius, finibus ac nisl. Aenean consequat dui in pretium elementum. Quisque condimentum
          dui eu euismod suscipit. Sed felis eros, tempus ut dolor vel, condimentum eleifend erat. Suspendisse eget volutpat mauris. Integer fringilla pulvinar felis, quis commodo dui gravida et. Donec at pellentesque metus, gravida efficitur sem. Nunc
          fringilla risus at tristique auctor. Sed semper ex viverra justo efficitur vulputate eget ut lorem. Nunc justo orci, molestie quis est ac, ultrices commodo sapien. Sed nec ligula id orci laoreet dapibus. Praesent a consectetur purus. Nunc fringilla
          iaculis nulla ut feugiat. </div>
      </div>
    </td>
  </table>
  <table>
    <tr>
      <td>
        <div class="csun">Áge</div>
      </td>
      <td>
        <div class="csun">NATIONALITÉ</div>
      </td>
      <td>
        <div class="csun">OCCUPATION</div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="csun">SEXUALITÉ</div>
      </td>
      <td>
        <div class="csun">GROUPE</div>
      </td>
      <td>
        <div class="csun">DDF</div>
      </td>
    </tr>
  </table>
</center>

<div id="sidebar">
  <img src="https://s-media-cache-ak0.pinimg.com/736x/31/7e/99/317e9955e0f7d378d121fbd9101f2d53.jpg" style="border-radius:30px 30px 0px 0px;margin-left:5px;width:230px;height:150px;-webkit-filter: grayscale(0.8);">
  <div class="sbtitle">Intro</div>
  <div class="sbtexte">Hogy is lehetne minősíteni vagy értékelni azt az Istentől távol eső, sivatagi várost, ahol ráadásul állandóan hőség van – mégis évi 40 millióan keresik fel. Már most is 150 ezer szállodai szobája évről évre ezrekkel gyarapodik az évi 21 615 kongresszus
    pedig már a szerencsejátékokkal egyenértékű bevételt jelent…és persze el ne felejtsük: minden egyes turista átlag 500 dollárt játszik el a póker vagy rulett asztaloknál.</div>
  <img src="https://i.imgur.com/MXposjk.jpg" style="border-radius:30px 30px 0px 0px;margin-left:5px;width:230px;height:150px;-webkit-filter: grayscale(0.8);">
  <div class="sbtitle">liens rapides</div>
  <div class="sbtexte">
    <a href="#">
      <div class="sbliens">Szabályzat</div>
    </a>
    <a href="#">
      <div class="sbliens">Hírek</div>
    </a>
    <a href="#">
      <div class="sbliens">Csoportok</div>
    </a>
    <a href="#">
      <div class="sbliens">Előtörténet Minta</div>
    </a>
    <a href="#">
      <div class="sbliens">Karakterkereső</div>
    </a>
    <a href="#">
      <div class="sbliens">Álláshirdetések</div>
    </a>
    <a href="#">
      <div class="sbliens">Avatárfoglaló</div>
    </a>
    <a href="#">
      <div class="sbliens">Foglalt Vezetéknevek</div>
    </a>
    <a href="#">
      <div class="sbliens">Kérések-Kérdések</div>
    </a>
  </div>
  <img src="http://mafiatoday.com/wp-content/uploads/2011/10/Godfather-11-e1318252560131.jpg" style="border-radius:30px 30px 0px 0px;margin-left:5px;width:230px;height:150px;-webkit-filter: grayscale(0.8);">
  <div class="sbtitle">Chatbox</div>
  <div class="sbtexte"><img src="http://placehold.it/185x300">
    <br>
    <br>Lehetőleg kerülje mindenki az obszcén és trágár szavak használatát, azt játéktéren alkalmazzátok. Ezen felül bárki, bármit megoszthat. Az admini közlemények minden esetben más színnel lesznek kiemelve.</div>
  <img src="https://i.imgur.com/U7edSX7.jpg" style="border-radius:30px 30px 0px 0px;margin-left:5px;width:230px;height:150px;-webkit-filter: grayscale(0.8);">
  <div class="sbtitle">la météo</div>
  <div class="sbtexte"><span style="display: block !important; width: 180px; text-align: center; font-family: sans-serif; font-size: 12px;"><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:00000.126.07480&bannertypeclick=wu_simplegray" title="Vienne, Franciaország Weather Forecast" target="_blank"><img src="http://weathersticker.wunderground.com/weathersticker/cgi-bin/banner/ban/wxBanner?bannertype=wu_simplegray_metric&airportcode=LFLY&ForcedCity=Vienne&ForcedState=Franciaország&wmo=07480&language=HU" alt="Find more about Weather in Vienne, FR" width="160" /></a><br><a href="http://www.wunderground.com/cgi-bin/findweather/getForecast?query=zmw:00000.126.07480&bannertypeclick=wu_simplegray" title="Get latest Weather Forecast updates" style="font-family: sans-serif; font-size: 12px" target="_blank">Click for weather forecast</a></span></div>
  <img src="https://i.imgur.com/UnlQZEy.jpg" style="border-radius:30px 30px 0px 0px;margin-left:5px;width:230px;height:150px;-webkit-filter: grayscale(0.8);">
  <div class="sbtitle">derniers messages</div>
  <div class="sbtexte">
    <marquee direction="up" scrollamount="2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</marquee>
  </div>
  <img src="https://i.imgur.com/XGq5P0Z.jpg" style="border-radius:30px 30px 0px 0px;margin-left:5px;width:230px;height:150px;-webkit-filter: grayscale(0.8);">
  <div class="sbtitle">citations</div>
  <div class="sbtexte">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
            
          
!
            
              body {
  width: 1400px;
  font-family: 'Cabin';
  color: #CCCCCC;
  background-color: #000000;
}

.forum {
  width: 1400px;
  background-color: #000000;
  padding: 10px;
  color: #9E9090
}

#forumall {
  width: 300px;
  height: 120px;
  position: relative;
  overflow: hidden;
}

#forumall .descspace {
  width: 80px;
  height: 100px;
  padding: 10px;
  background-color: #757077;
  box-shadow: 0px 0px 10px 5px #444444 inset;
  position: absolute;
  overflow: hidden;
  top: 0px;
  left: 0px;
  transition: all 0.9s ease-in-out .2s;
  -moz-transition: all 0.9s ease-in-out .2s;
  -webkit-transition: all 0.9s ease-in-out .2s;
  -ms-transition: all 0.9s ease-in-out .2s;
  -o-transition: all 0.9s ease-in-out .2s;
}

#forumall .descspacedeux {
  width: 200px;
  height: 120px;
  background-color: #3F3F3F;
  color: #CCCCCC;
  position: absolute;
  overflow: hidden;
  bottom: 0px;
  right: 0px;
  -webkit-transition: 2s ease;
  -moz-transition: 2s ease;
  -o-transition: 2s ease;
  -ms-transition: 2s ease;
  transition: 2s ease;
  opacity: 0
}

#forumall:hover .descspacedeux {
  bottom: 0px;
  right: 0px;
  -webkit-transition: 2s ease;
  -moz-transition: 2s ease;
  -o-transition: 2s ease;
  -ms-transition: 2s ease;
  transition: 2s ease;
  opacity: 1
}

.forumdescun {
  box-shadow: 0px 0px 20px 2px #000000 inset;
  padding: 3px;
  padding-right: 5px;
  margin-bottom: 3px;
  background-color: #ADACAE;
  font-family: 'Ubuntu', sans-serif;
  text-align: center;
  color: #CCCCCC;
  font-size: 11px;
  line-height: 100%;
}

.forumdescun:hover {
  box-shadow: 0px 0px 10px 2px #000000 inset;
  color: #000000;
  background-color: #999999;
}

.forumdesdeux {
  box-shadow: 0px 0px 20px 2px #000000 inset;
  padding: 3px;
  padding-right: 5px;
  margin-bottom: 3px;
  background-color: #999999;
  font-family: Ubuntu;
  text-align: center;
  color: #000000;
  font-size: 11px;
  line-height: 100%;
}

.forumdesdeux:hover {
  box-shadow: 0px 0px 10px 2px #000000 inset;
  color: #CCCCCC;
  background-color: #474747;
}

.descspacedescun {
  width: 180px;
  font-family: Ubuntu;
  font-size: 10px;
  text-transform: uppercase;
  padding: 5px;
  text-align: justify;
  overflow: auto;
  line-height: 100%;
  height: 110px;
}

.descspacedescun:first-letter {
  padding-right: 10px;
  line-height: 100%;
  float: left;
  font-family: Lobster;
  font-size: 25px;
  color: #FFFFFF;
}

.forumdescscroll {
  padding-right: 1px;
  overflow: auto;
  height: 100px;
}

.nouvelles {
  height: 148px;
  width: 177px;
  background-color: #414141;
  padding: 7px;
  overflow: auto;
  font-family: 'Ubuntu', sans-serif;
  font-size: 11px;
  color: #CCCCCC;
  line-height: 100%;
  text-align: justify;
  opacity: 0.6;
  border-radius: 30px/10px
}

.nouvelles b {
  color: #C9BEBE;
  font-size: 15px;
}

#sidebar {
  margin-top: -1820px;
  width: 240px;
  padding: 8px
}

.sbtitle {
  font-family: 'Metamorphous', cursive;
  font-size: 14px;
  font-weight: 900;
  background-color: #4D4D4D;
  box-shadow: 0px 0px 10px 5px #000000 inset;
  border-radius: 30px/100px;
  color: #ACACA7;
  text-align: center;
  line-height: 100%;
  padding: 15px;
  margin-top: -3px;
}

.sbtexte {
  font-size: 12.5px;
  padding: 15px 30px;
  text-align: justify;
  line-height: 100%;
}

.sbliens {
  width: 100%;
  height: 20px;
  background-color: #4D4D4D;
  box-shadow: 0px 0px 10px 2px #000000 inset;
  border-radius: 55px/100px;
  color: #D6D6D6;
  text-align: center;
  margin-bottom: 3px;
  font-family: 'Courgette';
  font-size: 13.5px;
  padding: 5px;
  line-height: 150%;
  transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
}

.sbliens:hover {
  color: #3D3D3D;
  font-family: 'Kaushan Script';
  background-color: #999999;
  letter-spacing: 2px;
}

.monhisinf {
  opacity: 0.85;
  width: 93px;
  height: 30px;
  background-color: #3F3F3F;
  color: #BCBCBC;
  text-align: center;
  font-family: BenchNine;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 250%;
  margin-top: 5px;
  border-radius: 20px 0px 20px 0px;
  box-shadow: 0px 0px 7px 2px #8C867D inset;
}

.monhisnom {
  font-family: 'UnifrakturMaguntia', sans-serif;
  font-size: 50px;
  text-shadow: 1px 1px black, 2px 2px #323132, 3px 3px black, 6px 5px 6px black;
  letter-spacing: 1px;
  color: #3E352E;
  margin-bottom: 10px;
  margin-top: 15px;
  color: #BCBCBC;
}

.monhispers {
  opacity: 0.85;
  width: 280px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: #323132;
  font-family: 'Wire One';
  font-size: 35px;
  text-transform: uppercase;
  line-height: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #BCBCBC;
  text-align: center;
  letter-spacing: 5px;
  text-shadow: 1px 1px 0px #130E0A;
  margin-top: -8px;
  border-radius: 40px 40px 0px 0px;
  box-shadow: 0px 0px 10px 5px #8C867D inset;
}

.monhispersun {
  width: 270px;
  height: 180px;
  padding: 10px;
  background-color: #323132;
  color: #BCBCBC;
  text-align: justify;
  line-height: 120%;
  font-family: Cabin;
  font-size: 13px;
  overflow: auto;
}

.monhispersdeux {
  opacity: 0.85;
  width: 480px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #3F3F3F;
  font-family: 'Wire One';
  font-size: 35px;
  text-transform: uppercase;
  line-height: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #BCBCBC;
  text-align: center;
  letter-spacing: 5px;
  text-shadow: 1px 1px 0px #130E0A;
  margin-top: -2px;
  box-shadow: 0px 0px 10px 5px #8C867D inset;
}

.monhisperstrois {
  width: 480px;
  height: auto;
  padding: 10px;
  background-color: #323132;
  color: #BCBCBC;
  text-align: justify;
  line-height: 120%;
  font-family: Cabin;
  font-size: 13px;
  border-radius: 0px 0px 10px 10px;
}

.csnomprenom {
  width: 280px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: #323132;
  font-family: 'Wire One';
  font-size: 35px;
  text-transform: uppercase;
  line-height: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #CCCCCC;
  text-align: center;
  letter-spacing: 5px;
  text-shadow: 1px 1px 0px #130E0A;
  margin-top: -8px;
  border-radius: 40px 40px 0px 0px;
  box-shadow: 0px 0px 10px 5px #838380 inset;
  opacity: 0.85
}

.cstexteun {
  width: 272px;
  height: 260px;
  padding-right: 5px;
  overflow: auto;
  color: #ACACA7
}

.cstextedeux {
  width: 270px;
  height: 265px;
  padding: 10px;
  background-color: #2A292A;
  text-align: justify;
  line-height: 120%;
  font-family: Cabin;
  font-size: 13px;
  border-radius: 0px 0px 10px 10px
}

.csun {
  width: 150px;
  height: auto;
  background-color: #2A292A;
  color: #CCCCCC;
  text-align: center;
  font-family: BenchNine;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 22px;
  border-radius: 40px 0px 40px 0px;
  box-shadow: 0px 0px 10px 2px #ACACA7 inset;
  opacity: 0.85
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console