Meet me halfway
Feat joueur 1 & joueur 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at diam et ex luctus mattis. Pellentesque sodales blandit leo, eget tempor purus eleifend at. Morbi nulla justo, elementum nec turpis eu, lacinia viverra justo. Morbi magna dolor, viverra vel ex at, mattis rhoncus nibh. Nullam lacus turpis, venenatis vel gravida vitae, maximus ut nibh. Donec sit amet varius ante. Nunc non ornare orci. Maecenas semper in neque nec vestibulum. Mauris interdum posuere enim, in efficitur ipsum.Curabitur ac nibh diam. Suspendisse maximus massa at ultricies posuere. Donec feugiat tortor quam, vehicula suscipit felis mollis eget. Praesent et porttitor magna. Duis ac massa arcu. Vestibulum vel sapien metus. Donec aliquam eu turpis in faucibus. Sed ut turpis at orci mollis euismod quis ac tellus. Mauris porta nunc in molestie pellentesque. Praesent eu justo at lorem scelerisque pretium. Nulla eget orci dapibus, condimentum metus quis, condimentum ex. Proin et magna efficitur, dapibus nibh sed, mollis mi. Vivamus suscipit scelerisque nulla at eleifend. Curabitur pharetra varius augue pretium fringilla.Cras hendrerit lacinia arcu, sed convallis massa aliquet et. Donec commodo lorem eu massa vestibulum, et posuere tortor feugiat. Cras iaculis felis sapien, non pellentesque tortor pellentesque egestas. In hac habitasse platea dictumst. Donec aliquam libero lacus, sit amet ultricies lacus condimentum nec. Duis faucibus tellus vel blandit vehicula. Proin dapibus, nisi at tincidunt mollis, justo nisl commodo velit, in vulputate mi nisi a enim.Morbi tincidunt nisi justo, ac congue ex blandit sed. Morbi varius, mauris quis interdum euismod, est tortor ultrices enim, eget consequat lorem augue quis metus. Nunc nec bibendum massa. Sed placerat arcu quam, at sodales felis gravida et. Nulla nec ex ut mauris condimentum euismod sit amet congue est. Aliquam velit metus, feugiat id nisi nec, euismod pellentesque nunc. Mauris pellentesque ultrices augue sit amet cursus. Donec fermentum ex ac mauris tincidunt, et interdum risus lacinia. Nam eget dolor metus. Vestibulum tincidunt sodales viverra.Suspendisse potenti. Etiam suscipit, ligula a euismod fermentum, massa eros egestas est, vitae scelerisque libero mi sit amet sem. Fusce eu lectus sit amet risus auctor faucibus non id mauris. In hac habitasse platea dictumst. Nulla odio urna, rhoncus auctor tellus ac, congue congue nisi. Maecenas finibus tincidunt ante, eu mollis mi dignissim nec. Maecenas at hendrerit magna. Nulla eleifend ut libero quis posuere. Aliquam volutpat tellus nec velit consequat tincidunt. Sed massa ante, iaculis non nunc ut, ultrices iaculis quam. Suspendisse commodo pretium nisi, nec elementum nunc varius ut. Nam egestas, enim non dictum sagittis, tellus justo vestibulum velit, eget consectetur libero nisi eget elit. Vestibulum sodales efficitur massa, vel aliquet ante eleifend a. Vivamus non auctor sem. Suspendisse potenti.
- Code:
<style>@import url('https://fonts.googleapis.com/css?family=Raleway:400,900|Roboto'); .thread * { box-sizing: border-box;} .thread { width: 550px; height: 700px; border: 1px solid #ccc; font-family: 'Roboto', sans-serif; display: flex; margin: auto; position: relative; } .thread__img { width: 250px; background-image: url('https://image.noelshack.com/fichiers/2018/08/4/1519310030-to-the-sky-by-hangmoon-d655wks.jpg'); background-size: cover; background-position: 30% 0; position: relative; } .thread__img::after { content:""; background: #fff; background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%); width: 80px; height: 100%; position: absolute; right: 0; } h2.thread__title { margin: 0; font-weight: 900; font-family: 'Raleway', sans-serif; font-size: 11px; text-transform: uppercase; display: inline-block; border: 1px solid; padding: 2px 5px; color: #000; } h3.thread__subtitle { margin: 3px 0 20px; font-weight: 400; font-family: 'Raleway', sans-serif; font-size: 8px; text-transform: uppercase; letter-spacing: 1px; color: #999; } .thread__content { padding: 30px; flex:1; background: #fff; } .thread__txt { line-height: 150%; font-size: 11px; text-align: justify; overflow: auto; max-height: 500px; padding-right: 10px; } .thread notes { display: block; font-size: 9px; margin-top: 30px; border-top: 1px solid #999; } .thread notes b { display: inline-block; border: 1px solid #999; border-top: 0; padding: 2px 5px; color: #999; background: #fff; margin-right: 5px; }.thread__txt::-webkit-scrollbar { width: 2px; } .thread__txt::-webkit-scrollbar-track { background-color: #efefef; } .thread__txt::-webkit-scrollbar-thumb { background-color: #ccc; } .thread__credit { position: absolute; right: 10px; bottom: 10px; } .thread__credit a { color: #ccc; text-transform: uppercase; font-size: 8px; letter-spacing: 1px; text-decoration: none; }</style>
<div class="thread"><div class="thread__img"></div><div class="thread__content"><h2 class="thread__title">Meet me halfway</h2><!--
--><h3 class="thread__subtitle">Feat joueur 1 & joueur 2</h3><!--
--><div class="thread__txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at diam et ex luctus mattis. Pellentesque sodales blandit leo, eget tempor purus eleifend at. Morbi nulla justo, elementum nec turpis eu, lacinia viverra justo. Morbi magna dolor, viverra vel ex at, mattis rhoncus nibh. Nullam lacus turpis, venenatis vel gravida vitae, maximus ut nibh. Donec sit amet varius ante. Nunc non ornare orci. Maecenas semper in neque nec vestibulum. Mauris interdum posuere enim, in efficitur ipsum.Curabitur ac nibh diam. Suspendisse maximus massa at ultricies posuere. Donec feugiat tortor quam, vehicula suscipit felis mollis eget. Praesent et porttitor magna. Duis ac massa arcu. Vestibulum vel sapien metus. Donec aliquam eu turpis in faucibus. Sed ut turpis at orci mollis euismod quis ac tellus. Mauris porta nunc in molestie pellentesque. Praesent eu justo at lorem scelerisque pretium. Nulla eget orci dapibus, condimentum metus quis, condimentum ex. Proin et magna efficitur, dapibus nibh sed, mollis mi. Vivamus suscipit scelerisque nulla at eleifend. Curabitur pharetra varius augue pretium fringilla.Cras hendrerit lacinia arcu, sed convallis massa aliquet et. Donec commodo lorem eu massa vestibulum, et posuere tortor feugiat. Cras iaculis felis sapien, non pellentesque tortor pellentesque egestas. In hac habitasse platea dictumst. Donec aliquam libero lacus, sit amet ultricies lacus condimentum nec. Duis faucibus tellus vel blandit vehicula. Proin dapibus, nisi at tincidunt mollis, justo nisl commodo velit, in vulputate mi nisi a enim.Morbi tincidunt nisi justo, ac congue ex blandit sed. Morbi varius, mauris quis interdum euismod, est tortor ultrices enim, eget consequat lorem augue quis metus. Nunc nec bibendum massa. Sed placerat arcu quam, at sodales felis gravida et. Nulla nec ex ut mauris condimentum euismod sit amet congue est. Aliquam velit metus, feugiat id nisi nec, euismod pellentesque nunc. Mauris pellentesque ultrices augue sit amet cursus. Donec fermentum ex ac mauris tincidunt, et interdum risus lacinia. Nam eget dolor metus. Vestibulum tincidunt sodales viverra.Suspendisse potenti. Etiam suscipit, ligula a euismod fermentum, massa eros egestas est, vitae scelerisque libero mi sit amet sem. Fusce eu lectus sit amet risus auctor faucibus non id mauris. In hac habitasse platea dictumst. Nulla odio urna, rhoncus auctor tellus ac, congue congue nisi. Maecenas finibus tincidunt ante, eu mollis mi dignissim nec. Maecenas at hendrerit magna. Nulla eleifend ut libero quis posuere. Aliquam volutpat tellus nec velit consequat tincidunt. Sed massa ante, iaculis non nunc ut, ultrices iaculis quam. Suspendisse commodo pretium nisi, nec elementum nunc varius ut. Nam egestas, enim non dictum sagittis, tellus justo vestibulum velit, eget consectetur libero nisi eget elit. Vestibulum sodales efficitur massa, vel aliquet ante eleifend a. Vivamus non auctor sem. Suspendisse potenti.</div><!--
--><notes><b>@tag pseudo</b>Des petites notes ici si vous le désirez</notes><!--
--></div><div class="thread__credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>