News Accueil

Terrible

Libre-service de codages pour vos forums


Interstellar

par Awful le le Ven 27 Jan - 13:51

Interstellar

Do not go gentle into that good night. Old age should burn and rave at close of day. Rage, rage against the dying of the light.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam feugiat mollis felis posuere vestibulum. Quisque id lacus dignissim, aliquam ligula eu, porttitor ante. Sed ac lacus sed ipsum pulvinar vulputate eu et erat. Praesent consectetur ac nisl in semper. Duis dictum, neque in ornare vulputate, justo mi convallis felis, nec dignissim quam eros a augue. Sed eget vehicula leo, quis euismod odio. Vestibulum fringilla diam quis suscipit facilisis. Suspendisse a urna faucibus, luctus ante nec, varius dolor. Pellentesque pulvinar urna est, eget euismod nibh convallis in. Curabitur varius vulputate justo id euismod. Integer facilisis lectus sit amet ligula eleifend scelerisque. Proin suscipit, leo id placerat iaculis, urna purus pellentesque enim, eu vehicula ipsum ex sed tortor. Proin bibendum luctus accumsan. Phasellus pharetra fermentum mollis. Maecenas congue lobortis arcu eget vestibulum. Morbi gravida nisl eu ligula pellentesque, vel eleifend ligula convallis. Donec varius ac libero eu consectetur. Quisque hendrerit vehicula dapibus. Vestibulum eros purus, dignissim sit amet mi congue, dictum semper neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis a ante eget libero molestie commodo ac ullamcorper diam. Pellentesque at eros venenatis, ullamcorper sapien non, egestas arcu. Nullam ac eros sit amet lacus efficitur vulputate ut vitae massa. Morbi sed ante fermentum, semper erat eget, eleifend diam. Aenean id sapien sit amet nisl feugiat blandit ullamcorper aliquet nisi. Donec in ipsum lobortis, pretium libero in, vehicula dolor. Curabitur in faucibus libero. In feugiat tristique malesuada. Curabitur scelerisque odio non dui rhoncus, nec tempor quam rutrum. Phasellus convallis lobortis libero non condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eu felis orci. Etiam vel ligula accumsan, accumsan ante sit amet, tincidunt tortor. Fusce eget congue dui, sit amet ultrices ex. Etiam tempus odio a ex interdum, eget luctus magna tempor. Vestibulum luctus, nisl at consequat pretium, mauris orci consectetur magna, a bibendum risus urna ut eros. Mauris eros sapien, lobortis eget ultricies eget, tempus a enim. Nunc ut dolor et eros fringilla cursus.


L'image de fond est à changer dans le CSS, dans .wrap-inter

De même, vous pouvez changer la couleur de la bande dans .color


Code:
<link href="https://fonts.googleapis.com/css?family=Hind+Siliguri|Raleway:800" rel="stylesheet"><style> .wrap-inter { width: 450px; height: 450px; margin: auto; background-image: url(http://40.media.tumblr.com/337d87558663ed051f19fe5f9f389790/tumblr_n7dl1d6aew1r4ueyro1_500.png); background-size: 500px auto; position: relative; overflow: hidden; } .wrap-inter h2 { margin: 0; padding: 100px 20px 0; text-transform: uppercase; font: 40px 'Raleway', sans-serif; color: #fff; letter-spacing: 2px; position: relative; z-index: 2; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); transition: all 0.4s; } .wrap-inter:hover h2 { -webkit-transform: translate(-100%,0); -ms-transform: translate(-100%,0); transform: translate(-100%,0); } .wrap-inter h3 { margin:0 50px 0; background: #fff; max-width: 80%; padding: 2px 8px; position: relative; z-index: 2; font: normal 7px/100% 'Hind Siliguri', sans-serif; text-transform: uppercase; letter-spacing: 1px; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); transition: all 0.4s; } .wrap-inter:hover h3 { -webkit-transform: translate(120%,0); -ms-transform: translate(120%,0); transform: translate(120%,0); } .color { width: 100%; height: 280px; top: 125px; background-color: #7db9ae; position: absolute; mix-blend-mode: color; } .inter-txt { width: 380px; height: 380px; background-color: #fff; position: absolute; top: 35px; left: 35px; overflow: auto; padding: 30px 40px; text-align: justify; font: 11px/1.7em 'Hind Siliguri', sans-serif;color: #2d2d2d; box-sizing: border-box; -webkit-transform: translate(0,110%); -ms-transform: translate(0,110%); transform: translate(0,110%); transition: all 0.4s; } .wrap-inter:hover .inter-txt { -webkit-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0); } .bot { top: 100%; height: 10px; width: 1px; } .inter-credit { position: absolute; bottom: 2px; left: 5px; } .inter-credit a { color: #ccc; font: 9px 'Hind Siliguri', sans-serif; text-decoration: none; text-transform: lowercase; letter-spacing: 1px; } </style>
<div class="wrap-inter"><!--
--><h2>Interstellar</h2><!--
--><h3>Do not go gentle into that good night. Old age should burn and rave at close of day. Rage, rage against the dying of the light.</h3><!--
--><div class="color"></div><!--
--><div class="inter-txt">VOTRE TEXTE ICI<div class="bot"></div></div><div class="inter-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>