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.
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.
Choromatsu 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.
Ichimatsu 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.
Jyuushimatsu 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.
Todomatsu 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.
- 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%;
}
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><!--
1ER BLOC
--><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><!--
2EME BLOC
--><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><!--
3EME BLOC
--><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><!--
4EME BLOC
--><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><!--
5EME BLOC
--><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><!--
6EME BLOC
--><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>