Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
MCR FRED in CSS
<body>
<div class="bg"></div>
<div class="content">
<div class="container border-container">
<div class="hexagon hexagon-border"></div>
</div>
<div class="container">
<div class="hexagon"><span>&lt;FRED&gt;</span></div>
</div>
</div>
<div class="tagline">A Global Wide Community of Front-end Developer Meet up Groups</div>
</body>
</html>
body {
background-color: #3B42A3;
width: 100%;
}
.bg {
height: 100%;
width: 100%;
position: fixed;
background: linear-gradient(30deg, #0E0277 11%, #3B42A3 13%, transparent 13%), linear-gradient(-30deg, #0E0277 11%, #3B42A3 13%, transparent 13%), linear-gradient(150deg, #0E0277 11%, #3B42A3 13%, transparent 13%), linear-gradient(-150deg, #0E0277 11%, #3B42A3 13%, transparent 13%), linear-gradient(30deg, #0E0277 11%, #3B42A3 13%, transparent 13%), linear-gradient(-30deg, #0E0277 11%, #3B42A3 13%, transparent 13%), linear-gradient(150deg, #0E0277 11%, #3B42A3 13%, transparent 13%), linear-gradient(-150deg, #0E0277 11%, #3B42A3 13%, transparent 13%), linear-gradient(90deg, transparent 48%, #3B42A3 50%, transparent 52%, #0E0277 0), linear-gradient(90deg, transparent 48%, #3B42A3 50%, transparent 52%, #0E0277 0);
background-position: 0 0, 0 0, 0 0, 0 0, 40px 70px, 40px 70px, 40px 70px, 40px 70px, 0 0, 40px 70px;
background-size: 80px 140px;
animation-name: bgFadeIn;
animation-duration: 4s;
animation-fill-mode: both;
}
.content {
margin: 80px calc(50% + 80px);
width: 626px;
height: 100%;
position: fixed;
animation-name: fadeInDown;
animation-duration: 5s;
animation-delay: 1s;
animation-fill-mode: both;
}
.container {
text-align: center;
margin: 20px 20px 20px -162px;
position: absolute;
display: inline-block;
height: 200px;
width: 200px;
transform: rotate(30deg);
transition: all 1s ease;
}
.container:hover {
opacity: 0.85;
}
.border-container {
transform: scale(1.05) rotate(30deg);
}
.hexagon {
height: 100%;
width: calc(100% * 0.5735);
display: inline-block;
background-color: #3B3AA3;
}
.hexagon-border {
height: 100%;
width: calc(100% * 0.5735);
display: inline-block;
background-color: #7271FF;
}
.hexagon:before {
position: absolute;
top: 0;
right: calc((100% / 2) - ((100% * 0.57735) / 2));
background-color: inherit;
height: inherit;
width: inherit;
content: '';
transform: rotateZ(-60deg);
}
.hexagon:after {
position: absolute;
top: 0;
right: calc((100% / 2) - ((100% * 0.57735) / 2));
background-color: inherit;
height: inherit;
width: inherit;
content: '';
transform: rotateZ(60deg);
}
.hexagon span {
display: block;
position: absolute;
width: 100%;
left: 5px;
z-index: 2;
text-align: center;
letter-spacing: 0.2em;
font-size: 42px;
line-height: 200px;
font-weight: 300;
font-family: 'Alegreya Sans SC', 'Arial Narrow', sans-serif;
color: #FEFFFE;
transform: rotate(-30deg);
}
.tagline {
width: 100%;
top: 350px;
text-align: center;
font-size: 22px;
letter-spacing: -0.04em;
font-family: sans-serif;
color: #FEFFFE;
position: fixed;
animation-name: fadeInUp;
animation-duration: 3s;
animation-delay: 4.5s;
animation-fill-mode: both;
margin: 0 5px;
}
@keyframes bgFadeIn {
from {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
transform: none;
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
50% {
opacity: 1;
transform: none;
}
61% {
opacity: 0.8;
transform: scale3d(1.003, 1.003, 1.003);
}
80% {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment