Je suis un titre
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ante eget sapien facilisis sagittis non interdum dolor. Praesent a augue interdum, laoreet metus sit amet, tincidunt orci. Ut lobortis, ex sit amet laoreet porta, ante mauris ornare tellus, ac rutrum neque erat a turpis. Nulla quis tempus eros. Aenean gravida justo sed ligula laoreet, id placerat nisi rutrum. Nunc fringilla, nulla congue elementum gravida, tortor eros vehicula quam, in aliquet erat tortor et erat. Nam tempor auctor lectus, porta sollicitudin lacus porttitor nec. Phasellus blandit dapibus ligula in pulvinar. In hac habitasse platea dictumst. In posuere blandit erat, in condimentum massa elementum at. Aenean quis gravida metus. Vestibulum pellentesque sit amet arcu id tristique. Mauris lobortis nibh non congue fermentum. Ut in nibh at ipsum hendrerit feugiat. In ut erat felis. Morbi laoreet lacus vitae sapien commodo, vel tristique ipsum vehicula.Sed tempus, est at fringilla placerat, risus eros vehicula lacus, ac tincidunt magna nisi at diam. Vivamus a semper lectus, a vulputate metus. Praesent scelerisque, nisi vitae bibendum dignissim, neque odio lacinia dui, eu aliquam turpis est euismod diam. Proin tempor orci ut fringilla efficitur. Nunc nec luctus massa. Donec sit amet rhoncus ex. Curabitur vitae bibendum massa. Vestibulum egestas ante id risus posuere, eu pharetra sem tristique. Nullam augue erat, pulvinar at mattis in, volutpat ac sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Praesent interdum ipsum nec ultricies gravida. Duis in lorem turpis. Suspendisse ornare at massa a tincidunt.
Curabitur sed nisl faucibus, vestibulum lorem suscipit, lacinia mi. Nulla pulvinar sollicitudin nisl, sit amet viverra nunc bibendum in. Suspendisse sagittis, sapien vel dignissim tincidunt, lacus lectus gravida libero, sed aliquet nunc velit et leo. Donec posuere justo massa, sit amet dignissim turpis dapibus ac. Nullam eu purus at lacus faucibus iaculis in nec lectus. Praesent ac sem auctor, aliquet sem sit amet, lacinia orci. Vivamus nec volutpat odio, et feugiat neque.
Curabitur faucibus cursus nibh dapibus mattis. Curabitur ac lectus scelerisque, faucibus turpis a, faucibus enim. Maecenas aliquam vitae massa nec placerat. Pellentesque maximus luctus dolor in rutrum. Etiam congue placerat mauris sit amet imperdiet. Aenean vel justo egestas, interdum mi et, varius mi. Fusce at lacus sodales, sollicitudin felis blandit, mattis massa. Nam finibus erat nec semper ultricies. Nam dapibus diam justo, a euismod lectus dapibus in. In augue sem, congue ut est aliquam, posuere venenatis odio. Ut interdum ex ac pretium facilisis. Vivamus gravida pellentesque neque, non tempus libero tincidunt sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut tortor sem, mollis sed pharetra quis, tempor sodales erat.
L'image de fond s'adapte automatiquement, mais idéalement sa taille minimale est de 438x438. Pour la modifier, il faut changer le background-image de .shipper-img dans le CSS.
- Code:
<link href="https://fonts.googleapis.com/css?family=Spectral:400,700" rel="stylesheet"> <style>.shipper-wrap {height: 500px;width: 500px;padding: 10px;border: 1px solid #e8e8e8;background: #fbfbfb;position: relative;margin: 0 auto;}.shipper {height: 100%;width: 100%;border: 1px solid #e8e8e8;box-sizing: border-box;padding: 30px;background: #f8f8f8;}.shipper-img {overflow: hidden;background-image: url('http://image.noelshack.com/fichiers/2017/51/3/1513808776-jellyfish.png');background-size: cover;}.shipper-content {height: 100%;width: 100%;background: #fff;box-sizing: border-box;padding: 30px;text-align: justify;overflow: auto;font-family: 'Spectral', serif;font-size: 0.9em;line-height: 1.6em;margin-top: 110%;transition: all 0.3s;}.shipper:hover .shipper-content {margin-top: initial;}.shipper-content h2 {font-family: inherit;margin: 0 0 30px;font-size: 16px;color: #424242;position: relative;}.shipper-content h2:after {content: "";height: 1px;width: 20%;position: absolute;left: 0;bottom: -10px;background: #d2d2d2;}.shipper-content hr {border: 0;border-top: 1px solid #ccc;width: 50%;margin: 20px auto;}.shipper-credit {width: 100%;position: absolute;bottom: -20px;left: 0;text-align: center;}.shipper-credit a {text-decoration: none!important;font-size: 7px;letter-spacing: 2px;color: #ccc!important;text-transform: uppercase;}</style>
<div class="shipper-wrap"><div class="shipper"><div class="shipper shipper-img"><div class="shipper-content">
<h2>Je suis un titre</h2>
Votre texte ici
<hr>Vous pouvez ajouter une séparation avec un hr
</div></div></div><div class="shipper-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>