Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</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>Заголовок документа</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;
}
/* HEX CONTENT */
#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;
}
}
/* Flip EFFECT */
.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;
}
/* UPDATED! flip the pane when hovered */
.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%;
}
/* flip speed goes here */
.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;
}
/* hide back of pane during swap */
.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;
}
/* UPDATED! front pane, placed above back */
.front {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
z-index: 2;
}
/* back, initially hidden pane */
.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 это <br/>”текст-рыба”,<br/>часто используемый в <br/>печати и <br/>вэб-дизайне."</p>
<p>
<a href="#">read more <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>"Что такое <br>Lorem <br>Ipsum?"</p>
</div>
</div>
<div class="back">
<div class="flip-content">
<p>"Lorem Ipsum - это<br/>”текст-рыба”, <br/>часто используемый<br/> в печати и <br/>и вэб-дизайне."</p>
<p>
<a href="#">Узнайте больше <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 - это <br/>”текст-рыба”<br/>часто используемый <br/>в печати и <br/>вэб-дизайне."</p>
<p>
<a href="#">Узнайте больше <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 - это <br/>”текст-рыба”, <br/>часто используемый<br/>в печати и <br/>вэб-дизайне."</p>
<p>
<a href="#">Узнайте больше<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 -это <br/>”текст-рыба”, <br/>часто используемый <br/>в печати и <br/>вэб-дизайне."</p>
<p>
<a href="#">Узнайте больше<i class="fa fa-arrow-circle-right"></i></a>
</p>
</div>
</div>
</div>
</div>
</li>
<li>
</ul>
</div>
</body>
</html>