Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous" />
<title>Titre du document</title>
<style>
#hexagons {
max-width: 893px;
margin: 1em auto 16em;
font: normal 16px/20px Helvetica, Arial, sans-serif;
padding-top: 4em;
position: relative;
}
#categories {
overflow: hidden;
width: 100%;
}
.clr:after {
content: "";
display: block;
clear: both;
}
#categories li {
position: relative;
list-style-type: none;
width: 32.33333333%; /* = (100- 3) / 3 */
padding-bottom: 37.33641263%; /* = width /0.866 */
float: left;
overflow: hidden;
visibility: hidden;
margin-left: 0.5%;
margin-right: 0.5%;
-webkit-transform: rotate(-60deg) skewY(30deg);
-ms-transform: rotate(-60deg) skewY(30deg);
transform: rotate(-60deg) skewY(30deg);
cursor: pointer;
}
@media (min-width: 768px) {
#categories li:nth-child(5n + 4) {
margin-left: 1%;
}
#categories li:nth-child(5n + 4),
#categories li:nth-child(5n + 5) {
margin-top: -8.083333333%; /* = w / 4 */
margin-bottom: -8.083333333%; /* = w / 4 */
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
#categories li:nth-child(5n + 6) {
clear: left;
transform: translateX(0) rotate(-60deg) skewY(30deg);
}
#categories li:nth-child(5n + 4):last-child,
#categories li:nth-child(5n + 5):last-child {
margin-bottom: 0%;
}
}
@media (max-width: 767px) {
#categories li {
width: 48.75%; /* = (100 -2.5) / 2 */
padding-bottom: 56.29330254%; /* = width /0.866 */
}
#categories li:nth-child(3n + 3) {
margin-left: 25.5%;
clear: both;
margin-top: -12.1875%; /* = w / 4 */
margin-bottom: -12.1875%; /* = w / 4 */
}
#categories li:nth-child(3n + 2) {
float: right;
}
#categories li:nth-child(3n + 3):last-child {
margin-bottom: 0%;
}
#categories li:nth-child(3n + 4) {
clear: left;
transform: translateX(0) rotate(-60deg) skewY(30deg);
}
}
#categories li * {
position: absolute;
visibility: visible;
overflow: hidden;
}
#categories li > div {
width: 100%;
height: 100%;
text-align: center;
color: #fff;
overflow: hidden;
-webkit-transform: skewY(-30deg) rotate(60deg);
-ms-transform: skewY(-30deg) rotate(60deg);
transform: skewY(-30deg) rotate(60deg);
-webkit-backface-visibility: hidden;
}
/* CONTENU HEX */
#categories li img {
left: 50%;
top: 50%;
width: auto;
margin: 0 auto;
transform: translate(-50%, -50%);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
#categories li .flip-content {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #000;
text-align: center;
width: 100%;
padding: 20px 3px;
}
#categories li .front .flip-content {
font-size: 21px;
}
#categories li .flip-content * {
position: static;
}
#categories li .flip-content {
font-size: 19px;
line-height: 1.2;
}
#categories li .front {
background-repeat: repeat;
background-position: center;
}
#categories li .flip-content p {
color: #666666;
padding-bottom: 10px;
}
#categories li .flip-content.lg {
font-size: 27px;
}
#categories li .flip-content.md {
font-size: 24px;
}
#categories li .flip-content.title-xs {
font-size: 38px;
}
#categories li .front .flip-content,
#categories li .front .flip-content p {
color: #fff;
}
#categories li .flip-content p:last-child {
padding-bottom: 0;
}
#categories li .back .flip-content p a {
background: #df5d53;
display: inline-block;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
color: #fff;
text-transform: uppercase;
padding: 4px 6px 4px 11px;
font-size: 12px;
font-weight: 600;
text-decoration: none;
}
#categories li .back .flip-content p a i {
font-size: 21px;
vertical-align: middle;
padding-left: 3px;
}
@media (max-width: 1024px) {
#news-month.style2 {
overflow: hidden;
}
#hexagons {
margin-bottom: 15em;
}
}
@media (max-width: 991px) {
#categories li .front .flip-content.title-xs {
font-size: 29px;
}
#categories li .front .flip-content {
font-size: 17px;
}
#categories li .flip-content.lg {
font-size: 22px;
}
#categories li .flip-content.md {
font-size: 18px;
}
#categories li .flip-content {
font-size: 16px;
}
.initiative.style2 .initiative--title {
font-size: 19px;
}
#hexagons {
overflow: hidden;
margin: 1em auto 0;
padding-top: 3em;
padding-bottom: 3em;
}
#categories {
width: auto;
padding: 0 12px;
}
#hexagons .el-bg.bg-11 {
top: 996px;
}
#hexagons .el-bg.bg-12 {
top: 1152px;
}
.page-template-our-impact .header {
max-height: none;
}
}
@media (max-width: 767px) {
#categories li .front .flip-content.title-xs {
font-size: 32px;
}
#categories li .front .flip-content {
font-size: 23px;
}
#categories li .flip-content.lg {
font-size: 27px;
}
#categories li .flip-content.md {
font-size: 26px;
}
#categories li .flip-content {
font-size: 23px;
}
#hexagons .el-bg.bg-14 {
top: 1751px;
}
#categories li img {
height: 100%;
}
.initiative.style2 a {
padding-bottom: 20px;
padding-top: 10px;
}
#news-month.style2 .news-figure {
background-position: 0 0;
padding: 20px 16px 20px;
}
.initiative.style2 {
padding-top: 20px;
padding-bottom: 20px;
}
.page-template-our-impact .header {
background-position: -62px;
}
}
@media (max-width: 560px) {
#categories li .front .flip-content.title-xs {
font-size: 22px;
}
#categories li .front .flip-content {
font-size: 13px;
}
#categories li .flip-content.lg {
font-size: 17px;
}
#categories li .flip-content.md {
font-size: 16px;
}
#categories li .flip-content {
font-size: 13px;
}
#categories {
padding: 0 8px;
}
#categories li .back .flip-content p a {
font-size: 11px;
padding: 0px 6px 0px 11px;
}
#categories li .back .flip-content p a i {
font-size: 15px;
line-height: 1.5;
}
}
@media (max-width: 375px) {
.page-template-our-impact .header {
background-position: -87px;
}
}
@media (max-width: 320px) {
#categories li .front .flip-content.title-xs {
font-size: 19px;
}
#categories li .front .flip-content {
font-size: 12px;
}
#categories li .flip-content.lg {
font-size: 13px;
}
#categories li .flip-content.md {
font-size: 12px;
}
#categories li .flip-content {
font-size: 11px;
}
#categories li .flip-content p {
padding-bottom: 5px;
}
.page-template-our-impact .header {
background-position: -104px;
}
}
/* EFFET de Retournement */
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-ms-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
}
/* MISE À JOUR! retourner le volet en survol */
.flip-container:hover {
}
.flip-container:hover .back {
transform: rotateY(0deg);
}
.flip-container:hover .front {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 100%;
height: 100%;
}
/* la vitesse de retournement */
.flipper {
width: 100%;
height: 100%;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-ms-transition: 0.6s;
-moz-transition: 0.6s;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative !important;
}
/* masquer l'arrière du volet pendant l'échange */
.front,
.back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(0deg);
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-moz-transform: rotateY(0deg);
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
-o-transform: rotateY(0deg);
-ms-transition: 0.6s;
-ms-transform-style: preserve-3d;
-ms-transform: rotateY(0deg);
transition: 0.6s;
transform-style: preserve-3d;
transform: rotateY(0deg);
position: absolute;
top: 0;
left: 0;
}
/* MISE À JOUR! volet frontal, placé au dessus de l'arrière */
.front {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
z-index: 2;
}
/* arrière, volet initialement masqué */
.back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
background: #eeeeee;
}
</style>
</head>
<body>
<div id="hexagons">
<ul id="categories" class="clr">
<li>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background-color: #1c87c9;"></div>
<div class="back">
<div class="flip-content">
<p>
"Lorem Ipsum est <br />
simplemet du faux texte <br />
employé dans la composition <br />
et la mise en page <br />
avant impression."
</p>
<p>
<a href="#">en lire plus <i class="fa fa-arrow-circle-right"></i></a>
</p>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background-color: #ff6347;">
<div class="flip-content title-xs">
<p>
"Qu'est-ce que c'est <br />
Lorem <br />
Ipsum?"
</p>
</div>
</div>
<div class="back">
<div class="flip-content">
<p>
"Lorem Ipsum est <br />
simplemet du faux texte <br />
employé dans la composition <br />
et la mise en page <br />
avant impression."
</p>
<p>
<a href="#">en lire plus <i class="fa fa-arrow-circle-right"></i></a>
</p>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background-color: #8ebf42;"></div>
<div class="back">
<div class="flip-content lg">
<p>
"Lorem Ipsum est<br />
simplemet du faux texte <br />
employé dans la composition <br />
et la mise en page <br />
avant impression."
</p>
<p>
<a href="#">en lire plus <i class="fa fa-arrow-circle-right"></i></a>
</p>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img src="https://www.w3docs.com//uploads/media/default/0001/01/e7a97bd9b2d25886cc7b9115de83b6b28b73b90b.jpeg" alt="fruits" />
</div>
<div class="back">
<div class="flip-content md">
<p>
"Lorem Ipsum est<br />
simplement du faux texte <br />
employé dans la composition <br />
et la mise en page <br />
avant impression."
</p>
<p>
<a href="#">en lire plus <i class="fa fa-arrow-circle-right"></i></a>
</p>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background-color: #ffcc00;"></div>
<div class="back">
<div class="flip-content lg">
<p>
"Lorem Ipsum est<br />
simplement du faux texte <br />
employé dans la composition <br />
et la mise en page <br />
avant impression."
</p>
<p>
<a href="#">en lire plus <i class="fa fa-arrow-circle-right"></i></a>
</p>
</div>
</div>
</div>
</div>
</li>
<li></li>
</ul>
</div>
</body>
</html>