Skip to content

Instantly share code, notes, and snippets.

@dropways

dropways/index.html

Created January 29, 2020 12:04
Show Gist options
  • Save dropways/46bd64f71b841fe1dfab0987e31b7aa6 to your computer and use it in GitHub Desktop.
Save dropways/46bd64f71b841fe1dfab0987e31b7aa6 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Honeycomb Layout #hexagon
Raw
index.html
<div class="Polygon-wrap">
<div class="container">
<div class="title text-center">
<h2><span>Polygon</span> Honeycomb</h2>
</div>
<div class="core-features-list">
<!-- Polygon Shadow -->
<div class="shadow-svg">
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="Polygon-shadow-blue" x="0" y="0" width="342.449" height="372.37" filterUnits="userSpaceOnUse">
<feOffset dx="6" dy="6"/>
<feGaussianBlur stdDeviation="8" result="blur"/>
<feFlood class="Polygon-shadow" flood-color="#29abe2" flood-opacity="0.2"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="Polygon-shadow-dark" x="0" y="0" width="342.449" height="372.37" filterUnits="userSpaceOnUse">
<feOffset dx="6" dy="6"/>
<feGaussianBlur stdDeviation="8" result="blur"/>
<feFlood class="Polygon-shadow" flood-color="#000000" flood-opacity="0.1"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
</svg>
</div>
<ul>
<li class="select">
<div class="polygon-box">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="342.449" height="372.37" viewBox="0 0 342.449 372.37">
<g data-name="Group 1" transform="translate(-185 -1072.25)">
<g class="Dark_Blue_Border_Polygon" data-name="Dark Blue Border Polygon">
<g class="Polygon">
<g class="polygon-shadow" transform="matrix(1, 0, 0, 1, 185, 1072.25)" filter="url(#Polygon-shadow-dark)">
<path class="Path_1-2" data-name="Path 1" d="M350.225,1414.62a44.385,44.385,0,0,1-10.027-1.11,31.644,31.644,0,0,1-8.563-3.24l-110.069-62.99a31.371,31.371,0,0,1-7.107-5.73,44.759,44.759,0,0,1-10.013-17.22,31.09,31.09,0,0,1-1.446-8.99V1189.53a30.973,30.973,0,0,1,1.446-8.98,44.7,44.7,0,0,1,10.013-17.23,31.371,31.371,0,0,1,7.107-5.73l110.069-62.98a31.324,31.324,0,0,1,8.563-3.25,45.84,45.84,0,0,1,20.053,0,31.325,31.325,0,0,1,8.563,3.25l110.069,62.98a31.37,31.37,0,0,1,7.107,5.73A44.7,44.7,0,0,1,496,1180.55a30.972,30.972,0,0,1,1.446,8.98v125.81a31.089,31.089,0,0,1-1.446,8.99,44.759,44.759,0,0,1-10.013,17.22,31.37,31.37,0,0,1-7.107,5.73l-110.069,62.99a31.645,31.645,0,0,1-8.563,3.24A44.383,44.383,0,0,1,350.225,1414.62Z" transform="translate(-185 -1072.25)" fill="#fff"/>
</g>
<path class="Path_2" data-name="Path 2" d="M350.225,1411.12c6.385,0,12.526-1.42,16.851-3.89l110.069-62.99c9.109-5.21,16.8-18.44,16.8-28.9V1189.53c0-10.46-7.7-23.69-16.8-28.9l-110.069-62.99c-4.325-2.47-10.467-3.89-16.851-3.89s-12.527,1.42-16.852,3.89L223.3,1160.63c-9.109,5.21-16.8,18.44-16.8,28.9v125.81c0,10.46,7.7,23.69,16.8,28.9l110.069,62.99c4.325,2.47,10.467,3.89,16.852,3.89m0,7c-7.358,0-14.715-1.6-20.328-4.82l-110.069-62.98c-11.227-6.42-20.328-22.08-20.328-34.98V1189.53c0-12.89,9.1-28.55,20.328-34.98L329.9,1091.57c5.613-3.21,12.97-4.82,20.328-4.82s14.714,1.61,20.327,4.82l110.069,62.98c11.227,6.43,20.328,22.09,20.328,34.98v125.81c0,12.9-9.1,28.56-20.328,34.98L370.552,1413.3C364.939,1416.52,357.582,1418.12,350.225,1418.12Z" fill="#2c3e50"/>
</g>
</g>
<g class="Sky_Blue_Polygon" data-name="Sky Blue Polygon">
<path class="Polygon-2" data-name="Polygon" d="M368.5,1398.07c-10.093,5.816-26.456,5.816-36.549,0L233,1341.05c-10.093-5.816-18.275-19.992-18.275-31.663V1195.48c0-11.671,8.182-25.847,18.275-31.664l98.95-57.016c10.093-5.816,26.456-5.816,36.549,0l98.951,57.021c10.093,5.816,18.275,19.992,18.275,31.664v113.906c0,11.671-8.182,25.847-18.275,31.663Z" fill="#29abe2"/>
</g>
</g>
</svg>
</div>
<div class="features-content-box">
<div class="features-content">
<div class="features-icon">
<img src="https://image.flaticon.com/icons/svg/2362/2362346.svg" class="svg" alt="">
</div>
<div class="features-title">
Body <br>Language
</div>
</div>
</div>
</li>
<li class="select">
<div class="polygon-box">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="342.449" height="372.37" viewBox="0 0 342.449 372.37">
<g data-name="Group 1" transform="translate(-185 -1072.25)">
<g class="Dark_Blue_Border_Polygon" data-name="Dark Blue Border Polygon">
<g class="Polygon">
<g class="polygon-shadow" transform="matrix(1, 0, 0, 1, 185, 1072.25)" filter="url(#Polygon-shadow-dark)">
<path class="Path_1-2" data-name="Path 1" d="M350.225,1414.62a44.385,44.385,0,0,1-10.027-1.11,31.644,31.644,0,0,1-8.563-3.24l-110.069-62.99a31.371,31.371,0,0,1-7.107-5.73,44.759,44.759,0,0,1-10.013-17.22,31.09,31.09,0,0,1-1.446-8.99V1189.53a30.973,30.973,0,0,1,1.446-8.98,44.7,44.7,0,0,1,10.013-17.23,31.371,31.371,0,0,1,7.107-5.73l110.069-62.98a31.324,31.324,0,0,1,8.563-3.25,45.84,45.84,0,0,1,20.053,0,31.325,31.325,0,0,1,8.563,3.25l110.069,62.98a31.37,31.37,0,0,1,7.107,5.73A44.7,44.7,0,0,1,496,1180.55a30.972,30.972,0,0,1,1.446,8.98v125.81a31.089,31.089,0,0,1-1.446,8.99,44.759,44.759,0,0,1-10.013,17.22,31.37,31.37,0,0,1-7.107,5.73l-110.069,62.99a31.645,31.645,0,0,1-8.563,3.24A44.383,44.383,0,0,1,350.225,1414.62Z" transform="translate(-185 -1072.25)" fill="#fff"/>
</g>
<path class="Path_2" data-name="Path 2" d="M350.225,1411.12c6.385,0,12.526-1.42,16.851-3.89l110.069-62.99c9.109-5.21,16.8-18.44,16.8-28.9V1189.53c0-10.46-7.7-23.69-16.8-28.9l-110.069-62.99c-4.325-2.47-10.467-3.89-16.851-3.89s-12.527,1.42-16.852,3.89L223.3,1160.63c-9.109,5.21-16.8,18.44-16.8,28.9v125.81c0,10.46,7.7,23.69,16.8,28.9l110.069,62.99c4.325,2.47,10.467,3.89,16.852,3.89m0,7c-7.358,0-14.715-1.6-20.328-4.82l-110.069-62.98c-11.227-6.42-20.328-22.08-20.328-34.98V1189.53c0-12.89,9.1-28.55,20.328-34.98L329.9,1091.57c5.613-3.21,12.97-4.82,20.328-4.82s14.714,1.61,20.327,4.82l110.069,62.98c11.227,6.43,20.328,22.09,20.328,34.98v125.81c0,12.9-9.1,28.56-20.328,34.98L370.552,1413.3C364.939,1416.52,357.582,1418.12,350.225,1418.12Z" fill="#2c3e50"/>
</g>
</g>
<g class="Sky_Blue_Polygon" data-name="Sky Blue Polygon">
<path class="Polygon-2" data-name="Polygon" d="M368.5,1398.07c-10.093,5.816-26.456,5.816-36.549,0L233,1341.05c-10.093-5.816-18.275-19.992-18.275-31.663V1195.48c0-11.671,8.182-25.847,18.275-31.664l98.95-57.016c10.093-5.816,26.456-5.816,36.549,0l98.951,57.021c10.093,5.816,18.275,19.992,18.275,31.664v113.906c0,11.671-8.182,25.847-18.275,31.663Z" fill="#29abe2"/>
</g>
</g>
</svg>
</div>
<div class="features-content-box">
<div class="features-content">
<div class="features-icon">
<img src="https://image.flaticon.com/icons/svg/1373/1373419.svg" class="svg" alt="">
</div>
<div class="features-title">
Language
</div>
</div>
</div>
</li>
<li class="select">
<div class="polygon-box">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="342.449" height="372.37" viewBox="0 0 342.449 372.37">
<g data-name="Group 1" transform="translate(-185 -1072.25)">
<g class="Dark_Blue_Border_Polygon" data-name="Dark Blue Border Polygon">
<g class="Polygon">
<g class="polygon-shadow" transform="matrix(1, 0, 0, 1, 185, 1072.25)" filter="url(#Polygon-shadow-dark)">
<path class="Path_1-2" data-name="Path 1" d="M350.225,1414.62a44.385,44.385,0,0,1-10.027-1.11,31.644,31.644,0,0,1-8.563-3.24l-110.069-62.99a31.371,31.371,0,0,1-7.107-5.73,44.759,44.759,0,0,1-10.013-17.22,31.09,31.09,0,0,1-1.446-8.99V1189.53a30.973,30.973,0,0,1,1.446-8.98,44.7,44.7,0,0,1,10.013-17.23,31.371,31.371,0,0,1,7.107-5.73l110.069-62.98a31.324,31.324,0,0,1,8.563-3.25,45.84,45.84,0,0,1,20.053,0,31.325,31.325,0,0,1,8.563,3.25l110.069,62.98a31.37,31.37,0,0,1,7.107,5.73A44.7,44.7,0,0,1,496,1180.55a30.972,30.972,0,0,1,1.446,8.98v125.81a31.089,31.089,0,0,1-1.446,8.99,44.759,44.759,0,0,1-10.013,17.22,31.37,31.37,0,0,1-7.107,5.73l-110.069,62.99a31.645,31.645,0,0,1-8.563,3.24A44.383,44.383,0,0,1,350.225,1414.62Z" transform="translate(-185 -1072.25)" fill="#fff"/>
</g>
<path class="Path_2" data-name="Path 2" d="M350.225,1411.12c6.385,0,12.526-1.42,16.851-3.89l110.069-62.99c9.109-5.21,16.8-18.44,16.8-28.9V1189.53c0-10.46-7.7-23.69-16.8-28.9l-110.069-62.99c-4.325-2.47-10.467-3.89-16.851-3.89s-12.527,1.42-16.852,3.89L223.3,1160.63c-9.109,5.21-16.8,18.44-16.8,28.9v125.81c0,10.46,7.7,23.69,16.8,28.9l110.069,62.99c4.325,2.47,10.467,3.89,16.852,3.89m0,7c-7.358,0-14.715-1.6-20.328-4.82l-110.069-62.98c-11.227-6.42-20.328-22.08-20.328-34.98V1189.53c0-12.89,9.1-28.55,20.328-34.98L329.9,1091.57c5.613-3.21,12.97-4.82,20.328-4.82s14.714,1.61,20.327,4.82l110.069,62.98c11.227,6.43,20.328,22.09,20.328,34.98v125.81c0,12.9-9.1,28.56-20.328,34.98L370.552,1413.3C364.939,1416.52,357.582,1418.12,350.225,1418.12Z" fill="#2c3e50"/>
</g>
</g>
<g class="Sky_Blue_Polygon" data-name="Sky Blue Polygon">
<path class="Polygon-2" data-name="Polygon" d="M368.5,1398.07c-10.093,5.816-26.456,5.816-36.549,0L233,1341.05c-10.093-5.816-18.275-19.992-18.275-31.663V1195.48c0-11.671,8.182-25.847,18.275-31.664l98.95-57.016c10.093-5.816,26.456-5.816,36.549,0l98.951,57.021c10.093,5.816,18.275,19.992,18.275,31.664v113.906c0,11.671-8.182,25.847-18.275,31.663Z" fill="#29abe2"/>
</g>
</g>
</svg>
</div>
<div class="features-content-box">
<div class="features-content">
<div class="features-icon">
<img src="https://image.flaticon.com/icons/svg/1989/1989846.svg" class="svg" alt="">
</div>
<div class="features-title">
Transmission
</div>
</div>
</div>
</li>
<li class="select">
<div class="polygon-box">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="342.449" height="372.37" viewBox="0 0 342.449 372.37">
<g data-name="Group 1" transform="translate(-185 -1072.25)">
<g class="Dark_Blue_Border_Polygon" data-name="Dark Blue Border Polygon">
<g class="Polygon">
<g class="polygon-shadow" transform="matrix(1, 0, 0, 1, 185, 1072.25)" filter="url(#Polygon-shadow-dark)">
<path class="Path_1-2" data-name="Path 1" d="M350.225,1414.62a44.385,44.385,0,0,1-10.027-1.11,31.644,31.644,0,0,1-8.563-3.24l-110.069-62.99a31.371,31.371,0,0,1-7.107-5.73,44.759,44.759,0,0,1-10.013-17.22,31.09,31.09,0,0,1-1.446-8.99V1189.53a30.973,30.973,0,0,1,1.446-8.98,44.7,44.7,0,0,1,10.013-17.23,31.371,31.371,0,0,1,7.107-5.73l110.069-62.98a31.324,31.324,0,0,1,8.563-3.25,45.84,45.84,0,0,1,20.053,0,31.325,31.325,0,0,1,8.563,3.25l110.069,62.98a31.37,31.37,0,0,1,7.107,5.73A44.7,44.7,0,0,1,496,1180.55a30.972,30.972,0,0,1,1.446,8.98v125.81a31.089,31.089,0,0,1-1.446,8.99,44.759,44.759,0,0,1-10.013,17.22,31.37,31.37,0,0,1-7.107,5.73l-110.069,62.99a31.645,31.645,0,0,1-8.563,3.24A44.383,44.383,0,0,1,350.225,1414.62Z" transform="translate(-185 -1072.25)" fill="#fff"/>
</g>
<path class="Path_2" data-name="Path 2" d="M350.225,1411.12c6.385,0,12.526-1.42,16.851-3.89l110.069-62.99c9.109-5.21,16.8-18.44,16.8-28.9V1189.53c0-10.46-7.7-23.69-16.8-28.9l-110.069-62.99c-4.325-2.47-10.467-3.89-16.851-3.89s-12.527,1.42-16.852,3.89L223.3,1160.63c-9.109,5.21-16.8,18.44-16.8,28.9v125.81c0,10.46,7.7,23.69,16.8,28.9l110.069,62.99c4.325,2.47,10.467,3.89,16.852,3.89m0,7c-7.358,0-14.715-1.6-20.328-4.82l-110.069-62.98c-11.227-6.42-20.328-22.08-20.328-34.98V1189.53c0-12.89,9.1-28.55,20.328-34.98L329.9,1091.57c5.613-3.21,12.97-4.82,20.328-4.82s14.714,1.61,20.327,4.82l110.069,62.98c11.227,6.43,20.328,22.09,20.328,34.98v125.81c0,12.9-9.1,28.56-20.328,34.98L370.552,1413.3C364.939,1416.52,357.582,1418.12,350.225,1418.12Z" fill="#2c3e50"/>
</g>
</g>
<g class="Sky_Blue_Polygon" data-name="Sky Blue Polygon">
<path class="Polygon-2" data-name="Polygon" d="M368.5,1398.07c-10.093,5.816-26.456,5.816-36.549,0L233,1341.05c-10.093-5.816-18.275-19.992-18.275-31.663V1195.48c0-11.671,8.182-25.847,18.275-31.664l98.95-57.016c10.093-5.816,26.456-5.816,36.549,0l98.951,57.021c10.093,5.816,18.275,19.992,18.275,31.664v113.906c0,11.671-8.182,25.847-18.275,31.663Z" fill="#29abe2"/>
</g>
</g>
</svg>
</div>
<div class="features-content-box">
<div class="features-content">
<div class="features-icon">
<img src="https://image.flaticon.com/icons/svg/2463/2463002.svg" class="svg" alt="">
</div>
<div class="features-title">
Grammar
</div>
</div>
</div>
</li>
<li class="select">
<div class="polygon-box">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="342.449" height="372.37" viewBox="0 0 342.449 372.37">
<g data-name="Group 1" transform="translate(-185 -1072.25)">
<g class="Dark_Blue_Border_Polygon" data-name="Dark Blue Border Polygon">
<g class="Polygon">
<g class="polygon-shadow" transform="matrix(1, 0, 0, 1, 185, 1072.25)" filter="url(#Polygon-shadow-dark)">
<path class="Path_1-2" data-name="Path 1" d="M350.225,1414.62a44.385,44.385,0,0,1-10.027-1.11,31.644,31.644,0,0,1-8.563-3.24l-110.069-62.99a31.371,31.371,0,0,1-7.107-5.73,44.759,44.759,0,0,1-10.013-17.22,31.09,31.09,0,0,1-1.446-8.99V1189.53a30.973,30.973,0,0,1,1.446-8.98,44.7,44.7,0,0,1,10.013-17.23,31.371,31.371,0,0,1,7.107-5.73l110.069-62.98a31.324,31.324,0,0,1,8.563-3.25,45.84,45.84,0,0,1,20.053,0,31.325,31.325,0,0,1,8.563,3.25l110.069,62.98a31.37,31.37,0,0,1,7.107,5.73A44.7,44.7,0,0,1,496,1180.55a30.972,30.972,0,0,1,1.446,8.98v125.81a31.089,31.089,0,0,1-1.446,8.99,44.759,44.759,0,0,1-10.013,17.22,31.37,31.37,0,0,1-7.107,5.73l-110.069,62.99a31.645,31.645,0,0,1-8.563,3.24A44.383,44.383,0,0,1,350.225,1414.62Z" transform="translate(-185 -1072.25)" fill="#fff"/>
</g>
<path class="Path_2" data-name="Path 2" d="M350.225,1411.12c6.385,0,12.526-1.42,16.851-3.89l110.069-62.99c9.109-5.21,16.8-18.44,16.8-28.9V1189.53c0-10.46-7.7-23.69-16.8-28.9l-110.069-62.99c-4.325-2.47-10.467-3.89-16.851-3.89s-12.527,1.42-16.852,3.89L223.3,1160.63c-9.109,5.21-16.8,18.44-16.8,28.9v125.81c0,10.46,7.7,23.69,16.8,28.9l110.069,62.99c4.325,2.47,10.467,3.89,16.852,3.89m0,7c-7.358,0-14.715-1.6-20.328-4.82l-110.069-62.98c-11.227-6.42-20.328-22.08-20.328-34.98V1189.53c0-12.89,9.1-28.55,20.328-34.98L329.9,1091.57c5.613-3.21,12.97-4.82,20.328-4.82s14.714,1.61,20.327,4.82l110.069,62.98c11.227,6.43,20.328,22.09,20.328,34.98v125.81c0,12.9-9.1,28.56-20.328,34.98L370.552,1413.3C364.939,1416.52,357.582,1418.12,350.225,1418.12Z" fill="#2c3e50"/>
</g>
</g>
<g class="Sky_Blue_Polygon" data-name="Sky Blue Polygon">
<path class="Polygon-2" data-name="Polygon" d="M368.5,1398.07c-10.093,5.816-26.456,5.816-36.549,0L233,1341.05c-10.093-5.816-18.275-19.992-18.275-31.663V1195.48c0-11.671,8.182-25.847,18.275-31.664l98.95-57.016c10.093-5.816,26.456-5.816,36.549,0l98.951,57.021c10.093,5.816,18.275,19.992,18.275,31.664v113.906c0,11.671-8.182,25.847-18.275,31.663Z" fill="#29abe2"/>
</g>
</g>
</svg>
</div>
<div class="features-content-box">
<div class="features-content">
<div class="features-icon">
<img src="https://image.flaticon.com/icons/svg/2362/2362284.svg" class="svg" alt="">
</div>
<div class="features-title">
Meaning
</div>
</div>
</div>
</li>
<li class="select">
<div class="polygon-box">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="342.449" height="372.37" viewBox="0 0 342.449 372.37">
<g data-name="Group 1" transform="translate(-185 -1072.25)">
<g class="Dark_Blue_Border_Polygon" data-name="Dark Blue Border Polygon">
<g class="Polygon">
<g class="polygon-shadow" transform="matrix(1, 0, 0, 1, 185, 1072.25)" filter="url(#Polygon-shadow-dark)">
<path class="Path_1-2" data-name="Path 1" d="M350.225,1414.62a44.385,44.385,0,0,1-10.027-1.11,31.644,31.644,0,0,1-8.563-3.24l-110.069-62.99a31.371,31.371,0,0,1-7.107-5.73,44.759,44.759,0,0,1-10.013-17.22,31.09,31.09,0,0,1-1.446-8.99V1189.53a30.973,30.973,0,0,1,1.446-8.98,44.7,44.7,0,0,1,10.013-17.23,31.371,31.371,0,0,1,7.107-5.73l110.069-62.98a31.324,31.324,0,0,1,8.563-3.25,45.84,45.84,0,0,1,20.053,0,31.325,31.325,0,0,1,8.563,3.25l110.069,62.98a31.37,31.37,0,0,1,7.107,5.73A44.7,44.7,0,0,1,496,1180.55a30.972,30.972,0,0,1,1.446,8.98v125.81a31.089,31.089,0,0,1-1.446,8.99,44.759,44.759,0,0,1-10.013,17.22,31.37,31.37,0,0,1-7.107,5.73l-110.069,62.99a31.645,31.645,0,0,1-8.563,3.24A44.383,44.383,0,0,1,350.225,1414.62Z" transform="translate(-185 -1072.25)" fill="#fff"/>
</g>
<path class="Path_2" data-name="Path 2" d="M350.225,1411.12c6.385,0,12.526-1.42,16.851-3.89l110.069-62.99c9.109-5.21,16.8-18.44,16.8-28.9V1189.53c0-10.46-7.7-23.69-16.8-28.9l-110.069-62.99c-4.325-2.47-10.467-3.89-16.851-3.89s-12.527,1.42-16.852,3.89L223.3,1160.63c-9.109,5.21-16.8,18.44-16.8,28.9v125.81c0,10.46,7.7,23.69,16.8,28.9l110.069,62.99c4.325,2.47,10.467,3.89,16.852,3.89m0,7c-7.358,0-14.715-1.6-20.328-4.82l-110.069-62.98c-11.227-6.42-20.328-22.08-20.328-34.98V1189.53c0-12.89,9.1-28.55,20.328-34.98L329.9,1091.57c5.613-3.21,12.97-4.82,20.328-4.82s14.714,1.61,20.327,4.82l110.069,62.98c11.227,6.43,20.328,22.09,20.328,34.98v125.81c0,12.9-9.1,28.56-20.328,34.98L370.552,1413.3C364.939,1416.52,357.582,1418.12,350.225,1418.12Z" fill="#2c3e50"/>
</g>
</g>
<g class="Sky_Blue_Polygon" data-name="Sky Blue Polygon">
<path class="Polygon-2" data-name="Polygon" d="M368.5,1398.07c-10.093,5.816-26.456,5.816-36.549,0L233,1341.05c-10.093-5.816-18.275-19.992-18.275-31.663V1195.48c0-11.671,8.182-25.847,18.275-31.664l98.95-57.016c10.093-5.816,26.456-5.816,36.549,0l98.951,57.021c10.093,5.816,18.275,19.992,18.275,31.664v113.906c0,11.671-8.182,25.847-18.275,31.663Z" fill="#29abe2"/>
</g>
</g>
</svg>
</div>
<div class="features-content-box">
<div class="features-content">
<div class="features-icon">
<img src="https://image.flaticon.com/icons/svg/1464/1464656.svg" class="svg" alt="">
</div>
<div class="features-title">
Voice
</div>
</div>
</div>
</li>
<li class="select">
<div class="polygon-box">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="342.449" height="372.37" viewBox="0 0 342.449 372.37">
<g data-name="Group 1" transform="translate(-185 -1072.25)">
<g class="Dark_Blue_Border_Polygon" data-name="Dark Blue Border Polygon">
<g class="Polygon">
<g class="polygon-shadow" transform="matrix(1, 0, 0, 1, 185, 1072.25)" filter="url(#Polygon-shadow-dark)">
<path class="Path_1-2" data-name="Path 1" d="M350.225,1414.62a44.385,44.385,0,0,1-10.027-1.11,31.644,31.644,0,0,1-8.563-3.24l-110.069-62.99a31.371,31.371,0,0,1-7.107-5.73,44.759,44.759,0,0,1-10.013-17.22,31.09,31.09,0,0,1-1.446-8.99V1189.53a30.973,30.973,0,0,1,1.446-8.98,44.7,44.7,0,0,1,10.013-17.23,31.371,31.371,0,0,1,7.107-5.73l110.069-62.98a31.324,31.324,0,0,1,8.563-3.25,45.84,45.84,0,0,1,20.053,0,31.325,31.325,0,0,1,8.563,3.25l110.069,62.98a31.37,31.37,0,0,1,7.107,5.73A44.7,44.7,0,0,1,496,1180.55a30.972,30.972,0,0,1,1.446,8.98v125.81a31.089,31.089,0,0,1-1.446,8.99,44.759,44.759,0,0,1-10.013,17.22,31.37,31.37,0,0,1-7.107,5.73l-110.069,62.99a31.645,31.645,0,0,1-8.563,3.24A44.383,44.383,0,0,1,350.225,1414.62Z" transform="translate(-185 -1072.25)" fill="#fff"/>
</g>
<path class="Path_2" data-name="Path 2" d="M350.225,1411.12c6.385,0,12.526-1.42,16.851-3.89l110.069-62.99c9.109-5.21,16.8-18.44,16.8-28.9V1189.53c0-10.46-7.7-23.69-16.8-28.9l-110.069-62.99c-4.325-2.47-10.467-3.89-16.851-3.89s-12.527,1.42-16.852,3.89L223.3,1160.63c-9.109,5.21-16.8,18.44-16.8,28.9v125.81c0,10.46,7.7,23.69,16.8,28.9l110.069,62.99c4.325,2.47,10.467,3.89,16.852,3.89m0,7c-7.358,0-14.715-1.6-20.328-4.82l-110.069-62.98c-11.227-6.42-20.328-22.08-20.328-34.98V1189.53c0-12.89,9.1-28.55,20.328-34.98L329.9,1091.57c5.613-3.21,12.97-4.82,20.328-4.82s14.714,1.61,20.327,4.82l110.069,62.98c11.227,6.43,20.328,22.09,20.328,34.98v125.81c0,12.9-9.1,28.56-20.328,34.98L370.552,1413.3C364.939,1416.52,357.582,1418.12,350.225,1418.12Z" fill="#2c3e50"/>
</g>
</g>
<g class="Sky_Blue_Polygon" data-name="Sky Blue Polygon">
<path class="Polygon-2" data-name="Polygon" d="M368.5,1398.07c-10.093,5.816-26.456,5.816-36.549,0L233,1341.05c-10.093-5.816-18.275-19.992-18.275-31.663V1195.48c0-11.671,8.182-25.847,18.275-31.664l98.95-57.016c10.093-5.816,26.456-5.816,36.549,0l98.951,57.021c10.093,5.816,18.275,19.992,18.275,31.664v113.906c0,11.671-8.182,25.847-18.275,31.663Z" fill="#29abe2"/>
</g>
</g>
</svg>
</div>
<div class="features-content-box">
<div class="features-content">
<div class="features-icon">
<img src="https://image.flaticon.com/icons/svg/2327/2327583.svg" class="svg" alt="">
</div>
<div class="features-title">
Conversation
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="title text-center pt-5">
<h2><span>Polygon</span> Hover Status</h2>
</div>
<div class="core-features-list">
<!-- Polygon Shadow -->
<div class="shadow-svg">
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="Polygon-shadow-blue" x="0" y="0" width="342.449" height="372.37" filterUnits="userSpaceOnUse">
<feOffset dx="6" dy="6"/>
<feGaussianBlur stdDeviation="8" result="blur"/>
<feFlood class="Polygon-shadow" flood-color="#29abe2" flood-opacity="0.2"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
<filter id="Polygon-shadow-dark" x="0" y="0" width="342.449" height="372.37" filterUnits="userSpaceOnUse">
<feOffset dx="6" dy="6"/>
<feGaussianBlur stdDeviation="8" result="blur"/>
<feFlood class="Polygon-shadow" flood-color="#000000" flood-opacity="0.1"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
</svg>
</div>
<ul>
<li>
<div class="polygon-box">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="342.449" height="372.37" viewBox="0 0 342.449 372.37">
<g data-name="Group 1" transform="translate(-185 -1072.25)">
<g class="Dark_Blue_Border_Polygon" data-name="Dark Blue Border Polygon">
<g class="Polygon">
<g class="polygon-shadow" transform="matrix(1, 0, 0, 1, 185, 1072.25)" filter="url(#Polygon-shadow-dark)">
<path class="Path_1-2" data-name="Path 1" d="M350.225,1414.62a44.385,44.385,0,0,1-10.027-1.11,31.644,31.644,0,0,1-8.563-3.24l-110.069-62.99a31.371,31.371,0,0,1-7.107-5.73,44.759,44.759,0,0,1-10.013-17.22,31.09,31.09,0,0,1-1.446-8.99V1189.53a30.973,30.973,0,0,1,1.446-8.98,44.7,44.7,0,0,1,10.013-17.23,31.371,31.371,0,0,1,7.107-5.73l110.069-62.98a31.324,31.324,0,0,1,8.563-3.25,45.84,45.84,0,0,1,20.053,0,31.325,31.325,0,0,1,8.563,3.25l110.069,62.98a31.37,31.37,0,0,1,7.107,5.73A44.7,44.7,0,0,1,496,1180.55a30.972,30.972,0,0,1,1.446,8.98v125.81a31.089,31.089,0,0,1-1.446,8.99,44.759,44.759,0,0,1-10.013,17.22,31.37,31.37,0,0,1-7.107,5.73l-110.069,62.99a31.645,31.645,0,0,1-8.563,3.24A44.383,44.383,0,0,1,350.225,1414.62Z" transform="translate(-185 -1072.25)" fill="#fff"/>
</g>
<path class="Path_2" data-name="Path 2" d="M350.225,1411.12c6.385,0,12.526-1.42,16.851-3.89l110.069-62.99c9.109-5.21,16.8-18.44,16.8-28.9V1189.53c0-10.46-7.7-23.69-16.8-28.9l-110.069-62.99c-4.325-2.47-10.467-3.89-16.851-3.89s-12.527,1.42-16.852,3.89L223.3,1160.63c-9.109,5.21-16.8,18.44-16.8,28.9v125.81c0,10.46,7.7,23.69,16.8,28.9l110.069,62.99c4.325,2.47,10.467,3.89,16.852,3.89m0,7c-7.358,0-14.715-1.6-20.328-4.82l-110.069-62.98c-11.227-6.42-20.328-22.08-20.328-34.98V1189.53c0-12.89,9.1-28.55,20.328-34.98L329.9,1091.57c5.613-3.21,12.97-4.82,20.328-4.82s14.714,1.61,20.327,4.82l110.069,62.98c11.227,6.43,20.328,22.09,20.328,34.98v125.81c0,12.9-9.1,28.56-20.328,34.98L370.552,1413.3C364.939,1416.52,357.582,1418.12,350.225,1418.12Z" fill="#2c3e50"/>
</g>
</g>
<g class="Sky_Blue_Polygon" data-name="Sky Blue Polygon">
<path class="Polygon-2" data-name="Polygon" d="M368.5,1398.07c-10.093,5.816-26.456,5.816-36.549,0L233,1341.05c-10.093-5.816-18.275-19.992-18.275-31.663V1195.48c0-11.671,8.182-25.847,18.275-31.664l98.95-57.016c10.093-5.816,26.456-5.816,36.549,0l98.951,57.021c10.093,5.816,18.275,19.992,18.275,31.664v113.906c0,11.671-8.182,25.847-18.275,31.663Z" fill="#29abe2"/>
</g>
</g>
</svg>
</div>
<div class="features-content-box">
<div class="features-content">
<div class="features-icon">
<img src="https://image.flaticon.com/icons/svg/2362/2362346.svg" class="svg" alt="">
</div>
<div class="features-title">
Body <br>Language
</div>
</div>
</div>
</li>
<li>
<div class="polygon-box">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="342.449" height="372.37" viewBox="0 0 342.449 372.37">
<g data-name="Group 1" transform="translate(-185 -1072.25)">
<g class="Dark_Blue_Border_Polygon" data-name="Dark Blue Border Polygon">
<g class="Polygon">
<g class="polygon-shadow" transform="matrix(1, 0, 0, 1, 185, 1072.25)" filter="url(#Polygon-shadow-dark)">
<path class="Path_1-2" data-name="Path 1" d="M350.225,1414.62a44.385,44.385,0,0,1-10.027-1.11,31.644,31.644,0,0,1-8.563-3.24l-110.069-62.99a31.371,31.371,0,0,1-7.107-5.73,44.759,44.759,0,0,1-10.013-17.22,31.09,31.09,0,0,1-1.446-8.99V1189.53a30.973,30.973,0,0,1,1.446-8.98,44.7,44.7,0,0,1,10.013-17.23,31.371,31.371,0,0,1,7.107-5.73l110.069-62.98a31.324,31.324,0,0,1,8.563-3.25,45.84,45.84,0,0,1,20.053,0,31.325,31.325,0,0,1,8.563,3.25l110.069,62.98a31.37,31.37,0,0,1,7.107,5.73A44.7,44.7,0,0,1,496,1180.55a30.972,30.972,0,0,1,1.446,8.98v125.81a31.089,31.089,0,0,1-1.446,8.99,44.759,44.759,0,0,1-10.013,17.22,31.37,31.37,0,0,1-7.107,5.73l-110.069,62.99a31.645,31.645,0,0,1-8.563,3.24A44.383,44.383,0,0,1,350.225,1414.62Z" transform="translate(-185 -1072.25)" fill="#fff"/>
</g>
<path class="Path_2" data-name="Path 2" d="M350.225,1411.12c6.385,0,12.526-1.42,16.851-3.89l110.069-62.99c9.109-5.21,16.8-18.44,16.8-28.9V1189.53c0-10.46-7.7-23.69-16.8-28.9l-110.069-62.99c-4.325-2.47-10.467-3.89-16.851-3.89s-12.527,1.42-16.852,3.89L223.3,1160.63c-9.109,5.21-16.8,18.44-16.8,28.9v125.81c0,10.46,7.7,23.69,16.8,28.9l110.069,62.99c4.325,2.47,10.467,3.89,16.852,3.89m0,7c-7.358,0-14.715-1.6-20.328-4.82l-110.069-62.98c-11.227-6.42-20.328-22.08-20.328-34.98V1189.53c0-12.89,9.1-28.55,20.328-34.98L329.9,1091.57c5.613-3.21,12.97-4.82,20.328-4.82s14.714,1.61,20.327,4.82l110.069,62.98c11.227,6.43,20.328,22.09,20.328,34.98v125.81c0,12.9-9.1,28.56-20.328,34.98L370.552,1413.3C364.939,1416.52,357.582,1418.12,350.225,1418.12Z" fill="#2c3e50"/>
</g>
</g>
<g class="Sky_Blue_Polygon" data-name="Sky Blue Polygon">
<path class="Polygon-2" data-name="Polygon" d="M368.5,1398.07c-10.093,5.816-26.456,5.816-36.549,0L233,1341.05c-10.093-5.816-18.275-19.992-18.275-31.663V1195.48c0-11.671,8.182-25.847,18.275-31.664l98.95-57.016c10.093-5.816,26.456-5.816,36.549,0l98.951,57.021c10.093,5.816,18.275,19.992,18.275,31.664v113.906c0,11.671-8.182,25.847-18.275,31.663Z" fill="#29abe2"/>
</g>
</g>
</svg>
</div>
<div class="features-content-box">
<div class="features-content">
<div class="features-icon">
<img src="https://image.flaticon.com/icons/svg/1373/1373419.svg" class="svg" alt="">
</div>
<div class="features-title">
Language
</div>
</div>
</div>
</li>
<li>
<div class="polygon-box">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="342.449" height="372.37" viewBox="0 0 342.449 372.37">
<g data-name="Group 1" transform="translate(-185 -1072.25)">
<g class="Dark_Blue_Border_Polygon" data-name="Dark Blue Border Polygon">
<g class="Polygon">
<g class="polygon-shadow" transform="matrix(1, 0, 0, 1, 185, 1072.25)" filter="url(#Polygon-shadow-dark)">
<path class="Path_1-2" data-name="Path 1" d="M350.225,1414.62a44.385,44.385,0,0,1-10.027-1.11,31.644,31.644,0,0,1-8.563-3.24l-110.069-62.99a31.371,31.371,0,0,1-7.107-5.73,44.759,44.759,0,0,1-10.013-17.22,31.09,31.09,0,0,1-1.446-8.99V1189.53a30.973,30.973,0,0,1,1.446-8.98,44.7,44.7,0,0,1,10.013-17.23,31.371,31.371,0,0,1,7.107-5.73l110.069-62.98a31.324,31.324,0,0,1,8.563-3.25,45.84,45.84,0,0,1,20.053,0,31.325,31.325,0,0,1,8.563,3.25l110.069,62.98a31.37,31.37,0,0,1,7.107,5.73A44.7,44.7,0,0,1,496,1180.55a30.972,30.972,0,0,1,1.446,8.98v125.81a31.089,31.089,0,0,1-1.446,8.99,44.759,44.759,0,0,1-10.013,17.22,31.37,31.37,0,0,1-7.107,5.73l-110.069,62.99a31.645,31.645,0,0,1-8.563,3.24A44.383,44.383,0,0,1,350.225,1414.62Z" transform="translate(-185 -1072.25)" fill="#fff"/>
</g>
<path class="Path_2" data-name="Path 2" d="M350.225,1411.12c6.385,0,12.526-1.42,16.851-3.89l110.069-62.99c9.109-5.21,16.8-18.44,16.8-28.9V1189.53c0-10.46-7.7-23.69-16.8-28.9l-110.069-62.99c-4.325-2.47-10.467-3.89-16.851-3.89s-12.527,1.42-16.852,3.89L223.3,1160.63c-9.109,5.21-16.8,18.44-16.8,28.9v125.81c0,10.46,7.7,23.69,16.8,28.9l110.069,62.99c4.325,2.47,10.467,3.89,16.852,3.89m0,7c-7.358,0-14.715-1.6-20.328-4.82l-110.069-62.98c-11.227-6.42-20.328-22.08-20.328-34.98V1189.53c0-12.89,9.1-28.55,20.328-34.98L329.9,1091.57c5.613-3.21,12.97-4.82,20.328-4.82s14.714,1.61,20.327,4.82l110.069,62.98c11.227,6.43,20.328,22.09,20.328,34.98v125.81c0,12.9-9.1,28.56-20.328,34.98L370.552,1413.3C364.939,1416.52,357.582,1418.12,350.225,1418.12Z" fill="#2c3e50"/>
</g>
</g>
<g class="Sky_Blue_Polygon" data-name="Sky Blue Polygon">
<path class="Polygon-2" data-name="Polygon" d="M368.5,1398.07c-10.093,5.816-26.456,5.816-36.549,0L233,1341.05c-10.093-5.816-18.275-19.992-18.275-31.663V1195.48c0-11.671,8.182-25.847,18.275-31.664l98.95-57.016c10.093-5.816,26.456-5.816,36.549,0l98.951,57.021c10.093,5.816,18.275,19.992,18.275,31.664v113.906c0,11.671-8.182,25.847-18.275,31.663Z" fill="#29abe2"/>
</g>
</g>
</svg>
</div>
<div class="features-content-box">
<div class="features-content">
<div class="features-icon">
<img src="https://image.flaticon.com/icons/svg/1989/1989846.svg" class="svg" alt="">
</div>
<div class="features-title">
Transmission
</div>
</div>
</div>
</li>
<li>
<div class="polygon-box">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="342.449" height="372.37" viewBox="0 0 342.449 372.37">
<g data-name="Group 1" transform="translate(-185 -1072.25)">
<g class="Dark_Blue_Border_Polygon" data-name="Dark Blue Border Polygon">
<g class="Polygon">
<g class="polygon-shadow" transform="matrix(1, 0, 0, 1, 185, 1072.25)" filter="url(#Polygon-shadow-dark)">
<path class="Path_1-2" data-name="Path 1" d="M350.225,1414.62a44.385,44.385,0,0,1-10.027-1.11,31.644,31.644,0,0,1-8.563-3.24l-110.069-62.99a31.371,31.371,0,0,1-7.107-5.73,44.759,44.759,0,0,1-10.013-17.22,31.09,31.09,0,0,1-1.446-8.99V1189.53a30.973,30.973,0,0,1,1.446-8.98,44.7,44.7,0,0,1,10.013-17.23,31.371,31.371,0,0,1,7.107-5.73l110.069-62.98a31.324,31.324,0,0,1,8.563-3.25,45.84,45.84,0,0,1,20.053,0,31.325,31.325,0,0,1,8.563,3.25l110.069,62.98a31.37,31.37,0,0,1,7.107,5.73A44.7,44.7,0,0,1,496,1180.55a30.972,30.972,0,0,1,1.446,8.98v125.81a31.089,31.089,0,0,1-1.446,8.99,44.759,44.759,0,0,1-10.013,17.22,31.37,31.37,0,0,1-7.107,5.73l-110.069,62.99a31.645,31.645,0,0,1-8.563,3.24A44.383,44.383,0,0,1,350.225,1414.62Z" transform="translate(-185 -1072.25)" fill="#fff"/>
</g>
<path class="Path_2" data-name="Path 2" d="M350.225,1411.12c6.385,0,12.526-1.42,16.851-3.89l110.069-62.99c9.109-5.21,16.8-18.44,16.8-28.9V1189.53c0-10.46-7.7-23.69-16.8-28.9l-110.069-62.99c-4.325-2.47-10.467-3.89-16.851-3.89s-12.527,1.42-16.852,3.89L223.3,1160.63c-9.109,5.21-16.8,18.44-16.8,28.9v125.81c0,10.46,7.7,23.69,16.8,28.9l110.069,62.99c4.325,2.47,10.467,3.89,16.852,3.89m0,7c-7.358,0-14.715-1.6-20.328-4.82l-110.069-62.98c-11.227-6.42-20.328-22.08-20.328-34.98V1189.53c0-12.89,9.1-28.55,20.328-34.98L329.9,1091.57c5.613-3.21,12.97-4.82,20.328-4.82s14.714,1.61,20.327,4.82l110.069,62.98c11.227,6.43,20.328,22.09,20.328,34.98v125.81c0,12.9-9.1,28.56-20.328,34.98L370.552,1413.3C364.939,1416.52,357.582,1418.12,350.225,1418.12Z" fill="#2c3e50"/>
</g>
</g>
<g class="Sky_Blue_Polygon" data-name="Sky Blue Polygon">
<path class="Polygon-2" data-name="Polygon" d="M368.5,1398.07c-10.093,5.816-26.456,5.816-36.549,0L233,1341.05c-10.093-5.816-18.275-19.992-18.275-31.663V1195.48c0-11.671,8.182-25.847,18.275-31.664l98.95-57.016c10.093-5.816,26.456-5.816,36.549,0l98.951,57.021c10.093,5.816,18.275,19.992,18.275,31.664v113.906c0,11.671-8.182,25.847-18.275,31.663Z" fill="#29abe2"/>
</g>
</g>
</svg>
</div>
<div class="features-content-box">
<div class="features-content">
<div class="features-icon">
<img src="https://image.flaticon.com/icons/svg/2463/2463002.svg" class="svg" alt="">
</div>
<div class="features-title">
Grammar
</div>
</div>
</div>
</li>
<li>
<div class="polygon-box">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="342.449" height="372.37" viewBox="0 0 342.449 372.37">
<g data-name="Group 1" transform="translate(-185 -1072.25)">
<g class="Dark_Blue_Border_Polygon" data-name="Dark Blue Border Polygon">
<g class="Polygon">
<g class="polygon-shadow" transform="matrix(1, 0, 0, 1, 185, 1072.25)" filter="url(#Polygon-shadow-dark)">
<path class="Path_1-2" data-name="Path 1" d="M350.225,1414.62a44.385,44.385,0,0,1-10.027-1.11,31.644,31.644,0,0,1-8.563-3.24l-110.069-62.99a31.371,31.371,0,0,1-7.107-5.73,44.759,44.759,0,0,1-10.013-17.22,31.09,31.09,0,0,1-1.446-8.99V1189.53a30.973,30.973,0,0,1,1.446-8.98,44.7,44.7,0,0,1,10.013-17.23,31.371,31.371,0,0,1,7.107-5.73l110.069-62.98a31.324,31.324,0,0,1,8.563-3.25,45.84,45.84,0,0,1,20.053,0,31.325,31.325,0,0,1,8.563,3.25l110.069,62.98a31.37,31.37,0,0,1,7.107,5.73A44.7,44.7,0,0,1,496,1180.55a30.972,30.972,0,0,1,1.446,8.98v125.81a31.089,31.089,0,0,1-1.446,8.99,44.759,44.759,0,0,1-10.013,17.22,31.37,31.37,0,0,1-7.107,5.73l-110.069,62.99a31.645,31.645,0,0,1-8.563,3.24A44.383,44.383,0,0,1,350.225,1414.62Z" transform="translate(-185 -1072.25)" fill="#fff"/>
</g>
<path class="Path_2" data-name="Path 2" d="M350.225,1411.12c6.385,0,12.526-1.42,16.851-3.89l110.069-62.99c9.109-5.21,16.8-18.44,16.8-28.9V1189.53c0-10.46-7.7-23.69-16.8-28.9l-110.069-62.99c-4.325-2.47-10.467-3.89-16.851-3.89s-12.527,1.42-16.852,3.89L223.3,1160.63c-9.109,5.21-16.8,18.44-16.8,28.9v125.81c0,10.46,7.7,23.69,16.8,28.9l110.069,62.99c4.325,2.47,10.467,3.89,16.852,3.89m0,7c-7.358,0-14.715-1.6-20.328-4.82l-110.069-62.98c-11.227-6.42-20.328-22.08-20.328-34.98V1189.53c0-12.89,9.1-28.55,20.328-34.98L329.9,1091.57c5.613-3.21,12.97-4.82,20.328-4.82s14.714,1.61,20.327,4.82l110.069,62.98c11.227,6.43,20.328,22.09,20.328,34.98v125.81c0,12.9-9.1,28.56-20.328,34.98L370.552,1413.3C364.939,1416.52,357.582,1418.12,350.225,1418.12Z" fill="#2c3e50"/>
</g>
</g>
<g class="Sky_Blue_Polygon" data-name="Sky Blue Polygon">
<path class="Polygon-2" data-name="Polygon" d="M368.5,1398.07c-10.093,5.816-26.456,5.816-36.549,0L233,1341.05c-10.093-5.816-18.275-19.992-18.275-31.663V1195.48c0-11.671,8.182-25.847,18.275-31.664l98.95-57.016c10.093-5.816,26.456-5.816,36.549,0l98.951,57.021c10.093,5.816,18.275,19.992,18.275,31.664v113.906c0,11.671-8.182,25.847-18.275,31.663Z" fill="#29abe2"/>
</g>
</g>
</svg>
</div>
<div class="features-content-box">
<div class="features-content">
<div class="features-icon">
<img src="https://image.flaticon.com/icons/svg/2362/2362284.svg" class="svg" alt="">
</div>
<div class="features-title">
Meaning
</div>
</div>
</div>
</li>
<li>
<div class="polygon-box">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="342.449" height="372.37" viewBox="0 0 342.449 372.37">
<g data-name="Group 1" transform="translate(-185 -1072.25)">
<g class="Dark_Blue_Border_Polygon" data-name="Dark Blue Border Polygon">
<g class="Polygon">
<g class="polygon-shadow" transform="matrix(1, 0, 0, 1, 185, 1072.25)" filter="url(#Polygon-shadow-dark)">
<path class="Path_1-2" data-name="Path 1" d="M350.225,1414.62a44.385,44.385,0,0,1-10.027-1.11,31.644,31.644,0,0,1-8.563-3.24l-110.069-62.99a31.371,31.371,0,0,1-7.107-5.73,44.759,44.759,0,0,1-10.013-17.22,31.09,31.09,0,0,1-1.446-8.99V1189.53a30.973,30.973,0,0,1,1.446-8.98,44.7,44.7,0,0,1,10.013-17.23,31.371,31.371,0,0,1,7.107-5.73l110.069-62.98a31.324,31.324,0,0,1,8.563-3.25,45.84,45.84,0,0,1,20.053,0,31.325,31.325,0,0,1,8.563,3.25l110.069,62.98a31.37,31.37,0,0,1,7.107,5.73A44.7,44.7,0,0,1,496,1180.55a30.972,30.972,0,0,1,1.446,8.98v125.81a31.089,31.089,0,0,1-1.446,8.99,44.759,44.759,0,0,1-10.013,17.22,31.37,31.37,0,0,1-7.107,5.73l-110.069,62.99a31.645,31.645,0,0,1-8.563,3.24A44.383,44.383,0,0,1,350.225,1414.62Z" transform="translate(-185 -1072.25)" fill="#fff"/>
</g>
<path class="Path_2" data-name="Path 2" d="M350.225,1411.12c6.385,0,12.526-1.42,16.851-3.89l110.069-62.99c9.109-5.21,16.8-18.44,16.8-28.9V1189.53c0-10.46-7.7-23.69-16.8-28.9l-110.069-62.99c-4.325-2.47-10.467-3.89-16.851-3.89s-12.527,1.42-16.852,3.89L223.3,1160.63c-9.109,5.21-16.8,18.44-16.8,28.9v125.81c0,10.46,7.7,23.69,16.8,28.9l110.069,62.99c4.325,2.47,10.467,3.89,16.852,3.89m0,7c-7.358,0-14.715-1.6-20.328-4.82l-110.069-62.98c-11.227-6.42-20.328-22.08-20.328-34.98V1189.53c0-12.89,9.1-28.55,20.328-34.98L329.9,1091.57c5.613-3.21,12.97-4.82,20.328-4.82s14.714,1.61,20.327,4.82l110.069,62.98c11.227,6.43,20.328,22.09,20.328,34.98v125.81c0,12.9-9.1,28.56-20.328,34.98L370.552,1413.3C364.939,1416.52,357.582,1418.12,350.225,1418.12Z" fill="#2c3e50"/>
</g>
</g>
<g class="Sky_Blue_Polygon" data-name="Sky Blue Polygon">
<path class="Polygon-2" data-name="Polygon" d="M368.5,1398.07c-10.093,5.816-26.456,5.816-36.549,0L233,1341.05c-10.093-5.816-18.275-19.992-18.275-31.663V1195.48c0-11.671,8.182-25.847,18.275-31.664l98.95-57.016c10.093-5.816,26.456-5.816,36.549,0l98.951,57.021c10.093,5.816,18.275,19.992,18.275,31.664v113.906c0,11.671-8.182,25.847-18.275,31.663Z" fill="#29abe2"/>
</g>
</g>
</svg>
</div>
<div class="features-content-box">
<div class="features-content">
<div class="features-icon">
<img src="https://image.flaticon.com/icons/svg/1464/1464656.svg" class="svg" alt="">
</div>
<div class="features-title">
Voice
</div>
</div>
</div>
</li>
<li>
<div class="polygon-box">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="342.449" height="372.37" viewBox="0 0 342.449 372.37">
<g data-name="Group 1" transform="translate(-185 -1072.25)">
<g class="Dark_Blue_Border_Polygon" data-name="Dark Blue Border Polygon">
<g class="Polygon">
<g class="polygon-shadow" transform="matrix(1, 0, 0, 1, 185, 1072.25)" filter="url(#Polygon-shadow-dark)">
<path class="Path_1-2" data-name="Path 1" d="M350.225,1414.62a44.385,44.385,0,0,1-10.027-1.11,31.644,31.644,0,0,1-8.563-3.24l-110.069-62.99a31.371,31.371,0,0,1-7.107-5.73,44.759,44.759,0,0,1-10.013-17.22,31.09,31.09,0,0,1-1.446-8.99V1189.53a30.973,30.973,0,0,1,1.446-8.98,44.7,44.7,0,0,1,10.013-17.23,31.371,31.371,0,0,1,7.107-5.73l110.069-62.98a31.324,31.324,0,0,1,8.563-3.25,45.84,45.84,0,0,1,20.053,0,31.325,31.325,0,0,1,8.563,3.25l110.069,62.98a31.37,31.37,0,0,1,7.107,5.73A44.7,44.7,0,0,1,496,1180.55a30.972,30.972,0,0,1,1.446,8.98v125.81a31.089,31.089,0,0,1-1.446,8.99,44.759,44.759,0,0,1-10.013,17.22,31.37,31.37,0,0,1-7.107,5.73l-110.069,62.99a31.645,31.645,0,0,1-8.563,3.24A44.383,44.383,0,0,1,350.225,1414.62Z" transform="translate(-185 -1072.25)" fill="#fff"/>
</g>
<path class="Path_2" data-name="Path 2" d="M350.225,1411.12c6.385,0,12.526-1.42,16.851-3.89l110.069-62.99c9.109-5.21,16.8-18.44,16.8-28.9V1189.53c0-10.46-7.7-23.69-16.8-28.9l-110.069-62.99c-4.325-2.47-10.467-3.89-16.851-3.89s-12.527,1.42-16.852,3.89L223.3,1160.63c-9.109,5.21-16.8,18.44-16.8,28.9v125.81c0,10.46,7.7,23.69,16.8,28.9l110.069,62.99c4.325,2.47,10.467,3.89,16.852,3.89m0,7c-7.358,0-14.715-1.6-20.328-4.82l-110.069-62.98c-11.227-6.42-20.328-22.08-20.328-34.98V1189.53c0-12.89,9.1-28.55,20.328-34.98L329.9,1091.57c5.613-3.21,12.97-4.82,20.328-4.82s14.714,1.61,20.327,4.82l110.069,62.98c11.227,6.43,20.328,22.09,20.328,34.98v125.81c0,12.9-9.1,28.56-20.328,34.98L370.552,1413.3C364.939,1416.52,357.582,1418.12,350.225,1418.12Z" fill="#2c3e50"/>
</g>
</g>
<g class="Sky_Blue_Polygon" data-name="Sky Blue Polygon">
<path class="Polygon-2" data-name="Polygon" d="M368.5,1398.07c-10.093,5.816-26.456,5.816-36.549,0L233,1341.05c-10.093-5.816-18.275-19.992-18.275-31.663V1195.48c0-11.671,8.182-25.847,18.275-31.664l98.95-57.016c10.093-5.816,26.456-5.816,36.549,0l98.951,57.021c10.093,5.816,18.275,19.992,18.275,31.664v113.906c0,11.671-8.182,25.847-18.275,31.663Z" fill="#29abe2"/>
</g>
</g>
</svg>
</div>
<div class="features-content-box">
<div class="features-content">
<div class="features-icon">
<img src="https://image.flaticon.com/icons/svg/2327/2327583.svg" class="svg" alt="">
</div>
<div class="features-title">
Conversation
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Raw
responsive-honeycomb-layout-hexagon.markdown
Raw
script.js
jQuery('img.svg').each(function() {
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
jQuery.get(imgURL, function(data) {
var $svg = jQuery(data).find('svg');
if (typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
if (typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass + ' replaced-svg');
}
$svg = $svg.removeAttr('xmlns:a');
if (!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
$svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
}
$img.replaceWith($svg);
}, 'xml');
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Raw
style.scss
$primary-font: 'Josefin Sans', sans-serif;
$color-white: #ffffff;
$primary-color: #28abe1;
$secondary-color: #2c3e50;
$secondary-color-light: #3d5163;
$cta-hover-color: #0e9bd6;
$section-bg-color: #f0f5ff;
$spindle-color: #b3d3ea;
$gray-color: #dddddd;
$footer-bg-color: #2d3e4e;
$footer-copyright-bg-color: #161f27;
@mixin transition($args...) {
transition: $args;
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
-o-transition: $args;
}
// @include transition(all 0.3s ease-in-out);
// responsive media function
// https://gist.github.com/dropways/3e7489bcc093528f6f1d0c091a219462
@mixin breakpoint( $max_min , $point ) {
@if $max_min==min{
@media ( min-width: ($point + px) ) {
@content;
}
} @if $max_min==max{
@media ( max-width: ($point + px) ) {
@content;
}
}
}
@mixin breakpoint-between($lower, $upper) {
@media (min-width: ($lower + px)) and (max-width: ($upper + px)) {
@content;
}
}
path{
@include transition(all 0.3s ease-in-out);
}
.container {
max-width: 1330px;
margin: 0 auto;
width: 100%;
padding: 0 15px;
}
.title{
h1{
font-size: 56px;
line-height: 1.28;
font-family: $primary-font;
font-weight: bold;
color: $secondary-color;
}
h2{
font-size: 46px;
line-height: 1.3;
font-family: $primary-font;
color: $secondary-color;
font-weight: bold;
}
h1,h2{
span{
color: $primary-color;
}
}
&.title-center{
text-align: center;
}
}
.Polygon-wrap{
padding: 100px 0;
}
.core-features-list{
position: relative;
@include breakpoint( max , 767){
overflow: auto;
}
.shadow-svg{
position: absolute;
z-index: -123;
}
ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
z-index: 1;
list-style-type: none;
margin: 0;
padding: 0;
@include breakpoint( max , 767){
display: inline-flex;
flex-wrap: nowrap;
}
li{
flex: 0 1 25%;
position: relative;
z-index: -1;
@include breakpoint( max , 767){
flex: 0 1 100%;
width: 250px;
}
&:nth-child(n + 5){
margin-top: -94px;
}
@include breakpoint( max , 1279){
&:nth-child(n + 5){
margin-top: -60px;
}
}
@include breakpoint( max , 991){
&:nth-child(n + 5){
margin-top: -35px;
}
}
@include breakpoint( max , 767){
&:nth-child(n + 5){
margin-top: 0;
}
}
.polygon-box{
svg{
width: 100%;
@include breakpoint( max , 1279){
height: auto
}
}
.polygon-shadow{
@include transition(all 0.3s ease-in-out);
}
.Dark_Blue_Border_Polygon{
.Path_2{
fill: $color-white;
@include transition(all 0.3s ease-in-out);
}
}
.Sky_Blue_Polygon{
path{
fill: $color-white;
@include transition(all 0.3s ease-in-out);
}
}
}
.features-content-box{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.features-content{
text-align: center;
margin-left: -10px;
}
.features-icon{
padding-bottom: 25px;
.svg{
width: 100px;
height: 100px;
&#VPN_included_with_al{
width: 123px;
}
@include breakpoint( max , 1279){
width: 80px;
height: 80px;
}
@include breakpoint( max , 991){
width: 50px;
height: 50px;
}
@include breakpoint( max , 767){
width: 70px;
height: 70px;
}
}
}
.features-title{
font-size: 24px;
line-height: 1.16;
font-family: $primary-font;
color: $secondary-color;
@include transition(all 0.3s ease-in-out);
a{
color: $secondary-color;
display: inline-block;
@include transition(all 0.3s ease-in-out);
}
@include breakpoint( max , 1279){
font-size: 20px;
}
@include breakpoint( max , 991){
font-size: 16px;
}
@include breakpoint( max , 991){
font-size: 20px;
}
}
}
&:hover,
&.select{
.polygon-box{
.Polygon-shadow{
flood-color: #29ABE2;
flood-opacity: .2;
}
.polygon-shadow{
filter: url(#Polygon-shadow-blue);
}
.Dark_Blue_Border_Polygon{
.Path_2{
fill: #2C3E50;
}
}
.Sky_Blue_Polygon{
path{
fill: #29ABE2;
}
}
}
.features-content-box{
.features-title{
color: $color-white;
a{
color: $color-white;
}
}
.features-icon{
.svg{
path{
fill: $color-white
}
}
}
}
}
}
}
}
Raw
styles
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment