Terrible :: Codes messages :: Fiches liens

We are family

Awful

Jeu 19 Avr - 11:25

Osomatsu matsuno

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor. Maecenas hendrerit finibus dignissim. Vestibulum lacinia eu diam id blandit. Proin vel nunc metus. Donec molestie elit at diam dictum placerat. Donec eros augue, ultricies gravida malesuada non, lobortis ac sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin est ligula, eget venenatis risus auctor nec. Sed pulvinar metus nec libero bibendum vulputate.

Karamatsu matsuno

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.

Choromatsu matsuno

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.

Ichimatsu matsuno

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.

Jyuushimatsu matsuno

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.

Todomatsu matsuno

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.

Awful

Le code alterne automatiquement l'image à gauche et à droite un bloc sur deux. L'image fait 100 x 100 pixels, elle est automatiquement redimensionnée. Pour changer la couleur du texte dégradé et du bloc dégradé, c'est dans le CSS :

Code:: .family-item:nth-child(2) .family-bloc h2 { background: #8b9dd6; background: linear-gradient(to bottom, #fff 0%,#8b9dd6 100%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } .family-item:nth-child(2) .family-bloc { border-image: linear-gradient(to bottom,#8b9dd6,#fff) 1 100%; }

La première couleur est un fallback (optionnel) pour les vieux navigateurs qui ne savent pas interpréter les dégradés (si c'est le cas pour votre navigateur, pensez à en changer). Le nth-child(x) est l'ordre d'apparition de l'élément (comprendre ici "nth-child(x)" = "enfant n°x"). On a ici 6 blocs, donc si vous souhaitez en ajouter un avec une couleur différente, il faudra écrire nth-child(7) dans votre CSS.

Vous n'êtes pas obligés de mettre un dégradé pour la couleur, vous pouvez mettre une couleur unie si vous le souhaitez. Pous vous faciliter la vie, un générateur de dégradés : ici.

Code:: <style>@import url('https://fonts.googleapis.com/css?family=Montserrat:900|PT+Sans|Playfair+Display:900');.family * { box-sizing: content-box; }.family {width: 600px;border: 1px solid #e0e0e0;font-family: 'PT Sans', sans-serif;padding: 10px;background: #fcfcfc;position: relative;margin: 0 auto 10px;}.family > div:first-child {border: 1px solid #e3e3e3;padding: 30px;background-image: url("https://www.toptal.com/designers/subtlepatterns/patterns/concrete-texture.png");}.family > div > div {border: 1px solid #dbdbdb;padding: 30px;background: #fff;}.family h1 {margin: 0 0 30px;font-family: 'Playfair Display', serif;border: 1px solid #000;font-family: 'Montserrat', sans-serif;font-size: 25px;text-transform: uppercase;text-align: center;}.family-item {display: flex;margin-bottom: 20px;}.family-item:last-child {margin-bottom: 0px;}.family-item:nth-child(even) {flex-direction: row-reverse;}.family-icon {height: 100px;width: 100px;padding: 5px;border: 1px solid #ccc;margin-right: 20px;}.family-icon img {width: 100px;height: 100px;}.family-item:nth-child(even) .family-icon {margin-right: 0px;margin-left: 20px;}.family-bloc {display: flex;flex-direction: column;height: 100px;align-self: center;border-right: 10px solid violet;padding-right: 10px;border-image: linear-gradient(to bottom,#db6a92,#fff) 1 100%;}.family-item:nth-child(even) .family-bloc {border-left: 10px solid #db6a92;padding-left: 10px;border-right: 0;padding-right: 0;}.family-bloc h2 {line-height: 1.526;font-family: 'Montserrat', sans-serif;margin: 0;font-size: 25px;text-transform: lowercase;font-weight: 900;letter-spacing: -1px;background:#db6a92;background: linear-gradient(to bottom,#fff 0%,#db6a92 100%);-webkit-text-fill-color: transparent;-webkit-background-clip: text;}.family-item:nth-child(2) .family-bloc h2 {background: #8b9dd6;background: linear-gradient(to bottom, #fff 0%,#8b9dd6 100%);-webkit-text-fill-color: transparent;-webkit-background-clip: text;}.family-item:nth-child(2) .family-bloc {border-image: linear-gradient(to bottom,#8b9dd6,#fff) 1 100%;}.family-item:nth-child(3) .family-bloc h2 {background: #dbe7a6;background: linear-gradient(to bottom, #fff, #dbe7a6 100%);-webkit-text-fill-color: transparent;-webkit-background-clip: text;}.family-item:nth-child(3) .family-bloc {border-image: linear-gradient(to bottom,#dbe7a6,#fff) 1 100%;}.family-item:nth-child(4) .family-bloc h2 {background: rgb(219, 106, 146);background: linear-gradient(to bottom, #fff, #9e73c3 100%);-webkit-text-fill-color: transparent;-webkit-background-clip: text;}.family-item:nth-child(4) .family-bloc {border-image: linear-gradient(to bottom,#9e73c3,#fff) 1 100%;}.family-item:nth-child(5) .family-bloc h2 {background: #ebcf7b;background: linear-gradient(to bottom, #fff, #ebcf7b 100%);-webkit-text-fill-color: transparent;-webkit-background-clip: text;}.family-item:nth-child(5) .family-bloc {border-image: linear-gradient(to bottom,#ebcf7b,#fff) 1 100%;}.family-item:nth-child(6) .family-bloc h2 {background: #bf73b4;background: linear-gradient(to bottom, #fff, #bf73b4 100%);-webkit-text-fill-color: transparent;-webkit-background-clip: text;}.family-item:nth-child(6) .family-bloc {border-image: linear-gradient(to bottom,#bf73b4,#fff) 1 100%;}.family-bloc h3 {margin: 5px 0 10px;font-size: 8px;text-transform: uppercase;font-weight: normal;line-height: 11px;color: #aaa;}.family-bloc p {margin: 0;font-size: 10px;line-height: 12px;flex: 1;overflow: auto;text-align: justify;padding-right: 10px;}.family-bloc p::-webkit-scrollbar {width: 2px;}.family-bloc p::-webkit-scrollbar-track {background-color: #efefef;}.family-bloc p::-webkit-scrollbar-thumb {background-color: #ccc;}.family-credit {position: absolute;bottom: -18px;left: 0;}.family-credit a {font-size: 8px;text-transform: uppercase;letter-spacing: 1px;color: #ccc!important;text-decoration: none!important;}</style> <div class="family"><div><div><div class="family-item"><div class="family-icon"><img src="https://i.imgur.com/uRwwsS2.png" /></div><div class="family-bloc"><h2>Osomatsu matsuno</h2><h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor. Maecenas hendrerit finibus dignissim. Vestibulum lacinia eu diam id blandit. Proin vel nunc metus. Donec molestie elit at diam dictum placerat. Donec eros augue, ultricies gravida malesuada non, lobortis ac sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin est ligula, eget venenatis risus auctor nec. Sed pulvinar metus nec libero bibendum vulputate.</p></div></div><div class="family-item"><div class="family-icon"><img src="https://i.imgur.com/pRZg6T1.png" /></div><div class="family-bloc"><h2>Karamatsu matsuno</h2><h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor. Maecenas hendrerit finibus dignissim. Vestibulum lacinia eu diam id blandit. Proin vel nunc metus. Donec molestie elit at diam dictum placerat. Donec eros augue, ultricies gravida malesuada non, lobortis ac sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin est ligula, eget venenatis risus auctor nec. Sed pulvinar metus nec libero bibendum vulputate.</p></div></div><div class="family-item"><div class="family-icon"><img src="https://i.imgur.com/LBYEmoS.png" /></div><div class="family-bloc"><h2>Choromatsu matsuno</h2><h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor. Maecenas hendrerit finibus dignissim. Vestibulum lacinia eu diam id blandit. Proin vel nunc metus. Donec molestie elit at diam dictum placerat. Donec eros augue, ultricies gravida malesuada non, lobortis ac sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin est ligula, eget venenatis risus auctor nec. Sed pulvinar metus nec libero bibendum vulputate.</p></div></div><div class="family-item"><div class="family-icon"><img src="https://i.imgur.com/D1DWl0I.png" /></div><div class="family-bloc"><h2>Ichimatsu matsuno</h2><h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor. Maecenas hendrerit finibus dignissim. Vestibulum lacinia eu diam id blandit. Proin vel nunc metus. Donec molestie elit at diam dictum placerat. Donec eros augue, ultricies gravida malesuada non, lobortis ac sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin est ligula, eget venenatis risus auctor nec. Sed pulvinar metus nec libero bibendum vulputate.</p></div></div><div class="family-item"><div class="family-icon"><img src="https://i.imgur.com/53KcMPr.png" /></div><div class="family-bloc"><h2>Jyuushimatsu matsuno</h2><h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor. Maecenas hendrerit finibus dignissim. Vestibulum lacinia eu diam id blandit. Proin vel nunc metus. Donec molestie elit at diam dictum placerat. Donec eros augue, ultricies gravida malesuada non, lobortis ac sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin est ligula, eget venenatis risus auctor nec. Sed pulvinar metus nec libero bibendum vulputate.</p></div></div><div class="family-item"><div class="family-icon"><img src="https://i.imgur.com/lpGDvcQ.png" /></div><div class="family-bloc"><h2>Todomatsu matsuno</h2><h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor.</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis sapien eu semper condimentum. Duis suscipit ex in vestibulum auctor. Maecenas hendrerit finibus dignissim. Vestibulum lacinia eu diam id blandit. Proin vel nunc metus. Donec molestie elit at diam dictum placerat. Donec eros augue, ultricies gravida malesuada non, lobortis ac sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin est ligula, eget venenatis risus auctor nec. Sed pulvinar metus nec libero bibendum vulputate.</p></div></div></div></div><div class="family-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>