[row][column size=”1/2″]{source}
<script src=’http://s.codepen.io/assets/libs/prefixfree.min.js’></script>
<style class=”cp-pen-styles”>body {
margin: 0;
background-color: #fff;
}
.menu-container {
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
filter:alpha(opacity=80);
opacity:.8;
}
.hex-wrapper {
display: inline-block;
}
.hex-row {
}
.shift {
margin-left: 60px;
}
.hexagon {
float: left;
position: relative;
margin: 21px 4px;
width: 112px;
height: 64px;
background-color: #64ceff;
background-position: center center;
z-index: 1;
/* Text styling */
line-height: 60px;
text-align: center;
font-family: sans-serif;
font-size: 0.7em;
font-weight: bold;
letter-spacing: 2px;
color: #000;
color: rgba(0, 0, 0, 10);
cursor: pointer;
transition: color 500ms ease, text-shadow 500ms ease, background-color 500ms ease, -webkit-transform 1s ease-in-out;
}
.hexagon2 {
float: left;
position: relative;
margin: 21px 4px;
width: 112px;
height: 64px;
background-color: #527ea4;
background-position: center center;
z-index: 1;
/* Text styling */
line-height: 60px;
text-align: center;
font-family: sans-serif;
font-size: 0.7em;
font-weight: bold;
letter-spacing: 2px;
color: #000;
color: rgba(0, 0, 0, 10);
cursor: pointer;
transition: color 500ms ease, text-shadow 500ms ease, background-color 500ms ease, -webkit-transform 1s ease-in-out;
}
.hexagon3 {
float: left;
position: relative;
margin: 21px 4px;
width: 112px;
height: 64px;
background-color: #3c54a3;
background-position: center center;
z-index: 1;
/* Text styling */
line-height: 60px;
text-align: center;
font-family: sans-serif;
font-size: 0.7em;
font-weight: bold;
letter-spacing: 2px;
color: #000;
color: rgba(0, 0, 0, 10);
cursor: pointer;
transition: color 500ms ease, text-shadow 500ms ease, background-color 500ms ease, -webkit-transform 1s ease-in-out;
}
.hexagon4 {
float: left;
position: relative;
margin: 21px 4px;
width: 112px;
height: 64px;
background-color: #c0a64a;
background-position: center center;
z-index: 1;
/* Text styling */
line-height: 25px;
text-align: center;
font-family: sans-serif;
font-size: 0.7em;
font-weight: bold;
letter-spacing: 2px;
color: #000;
color: rgba(0, 0, 0, 10);
cursor: pointer;
transition: color 500ms ease, text-shadow 500ms ease, background-color 500ms ease, -webkit-transform 1s ease-in-out;
}
.hexagon5 {
float: left;
position: relative;
margin: 21px 4px;
width: 112px;
height: 64px;
background-color: #a1872e;
background-position: center center;
z-index: 1;
/* Text styling */
line-height: 25px;
text-align: center;
font-family: sans-serif;
font-size: 0.7em;
font-weight: bold;
letter-spacing: 2px;
color: #000;
color: rgba(0, 0, 0, 10);
cursor: pointer;
transition: color 500ms ease, text-shadow 500ms ease, background-color 500ms ease, -webkit-transform 1s ease-in-out;
}
.hexagon6 {
float: left;
position: relative;
margin: 21px 4px;
width: 112px;
height: 64px;
background-color: #ffc600;
background-position: center center;
z-index: 1;
/* Text styling */
line-height: 15px;
text-align: center;
font-family: sans-serif;
font-size: 0.7em;
font-weight: bold;
letter-spacing: 2px;
color: #000;
color: rgba(0, 0, 0, 10);
cursor: pointer;
transition: color 500ms ease, text-shadow 500ms ease, background-color 500ms ease, -webkit-transform 1s ease-in-out;
}
.hexagon7 {
float: left;
position: relative;
margin: 21px 4px;
width: 112px;
height: 64px;
background-color: #ef1e3c;
background-position: center center;
z-index: 1;
/* Text styling */
line-height: 64px;
text-align: center;
font-family: sans-serif;
font-size: 0.7em;
font-weight: bold;
letter-spacing: 2px;
color: #000;
color: rgba(0, 0, 0, 10);
cursor: pointer;
transition: color 500ms ease, text-shadow 500ms ease, background-color 500ms ease, -webkit-transform 1s ease-in-out;
}
.hexagon8 {
float: left;
position: relative;
margin: 21px 4px;
width: 112px;
height: 64px;
background-color: #a4393b;
background-position: center center;
z-index: 1;
/* Text styling */
line-height: 64px;
text-align: center;
font-family: sans-serif;
font-size: 0.7em;
font-weight: bold;
letter-spacing: 2px;
color: #000;
color: rgba(0, 0, 0, 10);
cursor: pointer;
transition: color 500ms ease, text-shadow 500ms ease, background-color 500ms ease, -webkit-transform 1s ease-in-out;
}
.hexagon:hover {
color: #fff;
text-shadow: 0 0 10px white;
background-color: #20a6c4;
}
.hexagon .face1,
.hexagon .face2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: inherit;
z-index: -1;
/* Keeps borders smooth in webkit */
backface-visibility: hidden;
}
.hexagon .face1:before,
.hexagon .face2:before {
content: ”;
position: absolute;
width: 220px;
height: 220px;
background: inherit;
}
.hexagon .face1 { transform: rotate(60deg); }
.hexagon .face1:before {
left: 0;
transform-origin: left top;
transform: rotate(-60deg) translate(-110px, 0);
}
.hexagon .face2 { transform: rotate(-60deg); }
.hexagon .face2:before {
right: 0;
transform-origin: right top;
transform: rotate(60deg) translate(110px, 0);
}
.hexagon2:hover {
color: #fff;
text-shadow: 0 0 10px white;
background-color: #20a6c4;
}
.hexagon2 .face1,
.hexagon2 .face2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: inherit;
z-index: -1;
/* Keeps borders smooth in webkit */
backface-visibility: hidden;
}
.hexagon2 .face1:before,
.hexagon2 .face2:before {
content: ”;
position: absolute;
width: 220px;
height: 220px;
background: inherit;
}
.hexagon2 .face1 { transform: rotate(60deg); }
.hexagon2 .face1:before {
left: 0;
transform-origin: left top;
transform: rotate(-60deg) translate(-110px, 0);
}
.hexagon2 .face2 { transform: rotate(-60deg); }
.hexagon2 .face2:before {
right: 0;
transform-origin: right top;
transform: rotate(60deg) translate(110px, 0);
}
.hexagon3:hover {
color: #fff;
text-shadow: 0 0 10px white;
background-color: #20a6c4;
}
.hexagon3 .face1,
.hexagon3 .face2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: inherit;
z-index: -1;
/* Keeps borders smooth in webkit */
backface-visibility: hidden;
}
.hexagon3 .face1:before,
.hexagon3 .face2:before {
content: ”;
position: absolute;
width: 220px;
height: 220px;
background: inherit;
}
.hexagon3 .face1 { transform: rotate(60deg); }
.hexagon3 .face1:before {
left: 0;
transform-origin: left top;
transform: rotate(-60deg) translate(-110px, 0);
}
.hexagon3 .face2 { transform: rotate(-60deg); }
.hexagon3 .face2:before {
right: 0;
transform-origin: right top;
transform: rotate(60deg) translate(110px, 0);
}
.hexagon4:hover {
color: #fff;
text-shadow: 0 0 10px white;
background-color: #20a6c4;
}
.hexagon4 .face1,
.hexagon4 .face2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: inherit;
z-index: -1;
/* Keeps borders smooth in webkit */
backface-visibility: hidden;
}
.hexagon4 .face1:before,
.hexagon4 .face2:before {
content: ”;
position: absolute;
width: 220px;
height: 220px;
background: inherit;
}
.hexagon4 .face1 { transform: rotate(60deg); }
.hexagon4 .face1:before {
left: 0;
transform-origin: left top;
transform: rotate(-60deg) translate(-110px, 0);
}
.hexagon4 .face2 { transform: rotate(-60deg); }
.hexagon4 .face2:before {
right: 0;
transform-origin: right top;
transform: rotate(60deg) translate(110px, 0);
}
.hexagon5:hover {
color: #fff;
text-shadow: 0 0 10px white;
background-color: #20a6c4;
}
.hexagon5 .face1,
.hexagon5 .face2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: inherit;
z-index: -1;
/* Keeps borders smooth in webkit */
backface-visibility: hidden;
}
.hexagon5 .face1:before,
.hexagon5 .face2:before {
content: ”;
position: absolute;
width: 220px;
height: 220px;
background: inherit;
}
.hexagon5 .face1 { transform: rotate(60deg); }
.hexagon5 .face1:before {
left: 0;
transform-origin: left top;
transform: rotate(-60deg) translate(-110px, 0);
}
.hexagon5 .face2 { transform: rotate(-60deg); }
.hexagon5 .face2:before {
right: 0;
transform-origin: right top;
transform: rotate(60deg) translate(110px, 0);
}
.hexagon6:hover {
color: #fff;
text-shadow: 0 0 10px white;
background-color: #20a6c4;
}
.hexagon6 .face1,
.hexagon6 .face2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: inherit;
z-index: -1;
/* Keeps borders smooth in webkit */
backface-visibility: hidden;
}
.hexagon6 .face1:before,
.hexagon6 .face2:before {
content: ”;
position: absolute;
width: 220px;
height: 220px;
background: inherit;
}
.hexagon6 .face1 { transform: rotate(60deg); }
.hexagon6 .face1:before {
left: 0;
transform-origin: left top;
transform: rotate(-60deg) translate(-110px, 0);
}
.hexagon6 .face2 { transform: rotate(-60deg); }
.hexagon6 .face2:before {
right: 0;
transform-origin: right top;
transform: rotate(60deg) translate(110px, 0);
}
.hexagon7:hover {
color: #fff;
text-shadow: 0 0 10px white;
background-color: #20a6c4;
}
.hexagon7 .face1,
.hexagon7 .face2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: inherit;
z-index: -1;
/* Keeps borders smooth in webkit */
backface-visibility: hidden;
}
.hexagon7 .face1:before,
.hexagon7 .face2:before {
content: ”;
position: absolute;
width: 220px;
height: 220px;
background: inherit;
}
.hexagon7 .face1 { transform: rotate(60deg); }
.hexagon7 .face1:before {
left: 0;
transform-origin: left top;
transform: rotate(-60deg) translate(-110px, 0);
}
.hexagon7 .face2 { transform: rotate(-60deg); }
.hexagon7 .face2:before {
right: 0;
transform-origin: right top;
transform: rotate(60deg) translate(110px, 0);
}
.hexagon8:hover {
color: #fff;
text-shadow: 0 0 10px white;
background-color: #20a6c4;
}
.hexagon8 .face1,
.hexagon8 .face2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: inherit;
z-index: -1;
/* Keeps borders smooth in webkit */
backface-visibility: hidden;
}
.hexagon8 .face1:before,
.hexagon8 .face2:before {
content: ”;
position: absolute;
width: 220px;
height: 220px;
background: inherit;
}
.hexagon8 .face1 { transform: rotate(60deg); }
.hexagon8 .face1:before {
left: 0;
transform-origin: left top;
transform: rotate(-60deg) translate(-110px, 0);
}
.hexagon8 .face2 { transform: rotate(-60deg); }
.hexagon8 .face2:before {
right: 0;
transform-origin: right top;
transform: rotate(60deg) translate(110px, 0);
}
</style></head><body>
<div class=”menu-container”>
<div class=”hex-wrapper”>
<div class=”hex-row shift”>
<div class=”hexagon” id=”nav-home”>
<a href=”index.php/za-mim”>ЗА МИМ</a>
<div class=”face1″></div>
<div class=”face2″></div>
</div>
</div>
<div class=”hex-row”>
<div class=”hexagon2″ id=”nav-about”>
<a href=”index.php?option=com_k2&view=itemlist&layout=category&task=category&id=10&Itemid=90&lang=mk”>НОВОСТИ</a>
<div class=”face1″></div>
<div class=”face2″></div>
</div>
<div class=”hexagon3″ id=”nav-work”>
РЕСУРСИ
<div class=”face1″></div>
<div class=”face2″></div>
</div>
</div>
<div class=”hex-row shift”>
<div class=”hexagon4″ id=”nav-contact”>
МЕДИУМСКА
ПОЛИТИКА
<div class=”face1″></div>
<div class=”face2″></div>
</div>
<div class=”hexagon5″ id=”nav-home”>
ЕДУКАЦИЈА
<div class=”face1″></div>
<div class=”face2″></div>
</div>
</div>
<div class=”hex-row”>
<div class=”hexagon6″ id=”nav-about”>
АКТИВИЗАМ
<div class=”face1″></div>
<div class=”face2″></div>
</div>
<div class=”hexagon7″ id=”nav-work”>
<a href=”index.php?option=com_content&view=article&id=407&Itemid=355&lang=mk”>ВИДЕА</a>
<div class=”face1″></div>
<div class=”face2″></div>
</div>
</div>
<div class=”hex-row shift”>
<div class=”hexagon8″ id=”nav-contact”>
ПУБЛИКАЦИИ
<div class=”face1″></div>
<div class=”face2″></div>
</div>
</div>
</div>
</div>
<script src=’//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js’></script><script src=’http://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.11/jquery.scrollTo.min.js’></script>
<script src=’http://codepen.io/assets/editor/live/css_live_reload_init.js’></script>
{/source}[/column] [column size=”1/4″]
[/column] [/row]
