Terrible

Bienvenue sur Terrible, le forum de libre-service pour vos codages de forums. Venez trouver ici toutes sortes de codes pour agrémenter aussi bien vos templates que vos messages, sans avoir besoin d'inscription !


Terrible :: Codes messages :: Fiches RP
avatar
le Lun 5 Mar - 1:09

Black out.

@tag
notes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit quam, tristique in nisl ac, posuere dignissim augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer lacinia sapien dolor, vitae feugiat ligula consequat eget. Praesent eget mauris enim. Aenean a quam felis. Morbi non congue lorem. Quisque volutpat eros eu odio sagittis, quis bibendum erat tristique. Suspendisse fermentum lectus justo, quis malesuada enim facilisis ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit quam, tristique in nisl ac, posuere dignissim augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer lacinia sapien dolor, vitae feugiat ligula consequat eget. Praesent eget mauris enim. Aenean a quam felis. Morbi non congue lorem. Quisque volutpat eros eu odio sagittis, quis bibendum erat tristique. Suspendisse fermentum lectus justo, quis malesuada enim facilisis ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit quam, tristique in nisl ac, posuere dignissim augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer lacinia sapien dolor, vitae feugiat ligula consequat eget. Praesent eget mauris enim. Aenean a quam felis. Morbi non congue lorem. Quisque volutpat eros eu odio sagittis, quis bibendum erat tristique. Suspendisse fermentum lectus justo, quis malesuada enim facilisis ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit quam, tristique in nisl ac, posuere dignissim augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer lacinia sapien dolor, vitae feugiat ligula consequat eget. Praesent eget mauris enim. Aenean a quam felis. Morbi non congue lorem. Quisque volutpat eros eu odio sagittis, quis bibendum erat tristique. Suspendisse fermentum lectus justo, quis malesuada enim facilisis ut.


L'image est une image de fond à modifier dans le CSS de .black-out > div > div:first-child. Sa taille idéale est de 248*496 pixels minimum, mais elle se redimensionnera pour adopter la taille du bloc.

Code:
<link href='https://fonts.googleapis.com/css?family=Playfair+Display|Lato|PT+Serif' rel='stylesheet' type='text/css'><style>.black-out {width: 500px;height: 500px;margin: 10px auto;position: relative;box-sizing: border-box;padding: 1px;border: 1px solid #000;}.black-out > div:first-child {width: 100%;height: 100%;background-color: #000;display: flex;overflow: hidden;}.black-out > div > div {flex: 1;min-width: 248px;}.black-out > div > div:first-child {background-image: url("http://image.noelshack.com/fichiers/2018/09/7/1520175827-pixiv-id-10226946-full-2277487.jpg");background-size: cover;flex: 1;transition: all 0.3s;}.black-out > div:first-child:hover > div:first-child {flex:0;min-width: 0;}.black-out > div > div:nth-child(2) {display: flex;flex-direction: column;box-sizing: border-box;padding: 10px;}.black-out > div > div:nth-child(2) h2 {color: #fff;margin: auto 0 0;font-family: "Playfair Display", serif;font-size: 30px;}.black-out-accent {color: #a55753;}.black-out > div > div:nth-child(2) h2 + div {margin-top: auto;border-top: 1px solid #fff;margin-bottom: 2px;}.black-out > div > div:nth-child(2) h2 + div span {display: inline-block;border-top: 2px solid #fff;padding-top: 3px;}.black-out > div > div:nth-child(2) div {color: #fff;letter-spacing: 1px;font-family: "Lato", sans-serif;font-size: 7px;line-height: 7px;}.black-out > div > div:nth-child(3) {height: 100%;padding: 10px;box-sizing: border-box;background: #fff;}.black-out > div > div:nth-child(3) > div {font-family: "Source Sans Pro", sans-serif;font-family: "PT Serif", serif;height: 100%;overflow: auto;font-size: 11px;text-align: justify;padding-right: 10px;}.black-out > div > div:nth-child(3) > div l {font-size: 2.8em;float: left;margin-right: 5px;}.black-out > div > div:nth-child(3) > div::-webkit-scrollbar { width: 2px;background: #A1A2A7;border: 3px solid #fafafa;}.black-out > div > div:nth-child(3) > div::-webkit-scrollbar-thumb {background: #000;  }.black-out-credit {margin-top: 5px;}.black-out-credit a {font-family: "Lato", sans-serif;font-size: 8px;text-transform: uppercase;letter-spacing: 1px;text-decoration: none !important;color: #999!important;font-weight: bold;}</style><div class="black-out"><div><div></div><div><h2>Black out<span class="black-out-accent">.</span></h2><div><span>@tag</span></div><div>notes</div></div><div><div><l>L</l>orem ipsum dolor sit amet, consectetur adipiscing elit. In elit quam, tristique in nisl ac, posuere dignissim augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer lacinia sapien dolor, vitae feugiat ligula consequat eget. Praesent eget mauris enim. Aenean a quam felis. Morbi non congue lorem. Quisque volutpat eros eu odio sagittis, quis bibendum erat tristique. Suspendisse fermentum lectus justo, quis malesuada enim facilisis ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit quam, tristique in nisl ac, posuere dignissim augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer lacinia sapien dolor, vitae feugiat ligula consequat eget. Praesent eget mauris enim. Aenean a quam felis. Morbi non congue lorem. Quisque volutpat eros eu odio sagittis, quis bibendum erat tristique. Suspendisse fermentum lectus justo, quis malesuada enim facilisis ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit quam, tristique in nisl ac, posuere dignissim augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer lacinia sapien dolor, vitae feugiat ligula consequat eget. Praesent eget mauris enim. Aenean a quam felis. Morbi non congue lorem. Quisque volutpat eros eu odio sagittis, quis bibendum erat tristique. Suspendisse fermentum lectus justo, quis malesuada enim facilisis ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In elit quam, tristique in nisl ac, posuere dignissim augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer lacinia sapien dolor, vitae feugiat ligula consequat eget. Praesent eget mauris enim. Aenean a quam felis. Morbi non congue lorem. Quisque volutpat eros eu odio sagittis, quis bibendum erat tristique. Suspendisse fermentum lectus justo, quis malesuada enim facilisis ut.</div></div></div><div class="black-out-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum