<style>
body,
ol,
ul,
h1,
h2,
h3,
h4,
h5,
h6,
p,
th,
td,
dl,
dd,
form,
fieldset,
legend,
input,
textarea,
i,
select {
margin: 0;
padding: 0;
}
h1 {
font-family: sans-serif;
color: rgb(35,93,166);
/* margin-bottom: 30px */
}
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
/* background-color: #2C3138; */
/* -webkit-perspective: 90rem;
perspective: 90rem;
-webkit-perspective-origin: 34% 61%;
perspective-origin: 34% 61%; */
}
img {
width: 160px;
}
button {
cursor: pointer;
outline: 0;
width: 180px;
height: 48px;
border-radius: 8px;
background-color: rgba(255,255,255,.75);
margin-top: 40px;
overflow: hidden;
-webkit-transform: scale(.7);
transform: scale(.7);
}
button.prod {
cursor: pointer;
outline: 0;
width: 180px;
height: 48px;
border-radius: 8px;
background-color: rgba(255,255,255,.75);
margin-top: 0px;
overflow: hidden;
-webkit-transform: scale(.7);
transform: scale(.7);
}
button::after {
content: "";
position: relative;
top: -40px;
display: block;
width: 48px;
height: 107%;
background-color: #000;
margin-top: -1px;
margin-left: -7px;
border-radius: 6px 0 0 6px;
background-repeat: no-repeat;
background-position: center;
}
button::before {
content: "";
display: block;
width: 48px;
height: 46px;
margin-left: -7px;
margin-top: -1px;
-webkit-transition: all 100ms cubic-bezier(0.25, 0.75, 0.5, 1.25);
transition: all 100ms cubic-bezier(0.25, 0.75, 0.5, 1.25);
}
/* .box-1:hover button::before {
width: 120%;
opacity: .8;
background-color: #00BF9C;
}
.box-2:hover button::before {
width: 120%;
opacity: .8;
background-color: #653EE6;
}
.box-3:hover button::before {
width: 120%;
opacity: .8;
background-color: #008BFF;
}
*/
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
align-items: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: flex-start;
-ms-flex-pack: distribute;
justify-content: space-around;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 80vw;
height: 100vh;
margin-left: 6vw;
/* transform:rotateX(7deg) rotateZ(-4deg) rotateY(13deg) scale3d(1, 1, -0.9); */
/* -webkit-transform: rotateX(23deg) rotateZ(-9deg) rotateY(15deg) scale3d(1, 1, -0.9);
transform: rotateX(23deg) rotateZ(-9deg) rotateY(15deg) scale3d(1, 1, -0.9); */
}
.box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
will-change: transform;
}
.box:hover .cover {
-webkit-transform: translateY(-14px) scale(1.04);
transform: translateY(-14px) scale(1.04);
}
.box-1 button {
border: 1px solid rgb(35,93,166);
color: #fff;
font-size: 22px;
padding-right: 20px;
line-height: 40px;
}
.box-2 button {
border: 1px solid rgb(35,93,166);
color: #fff;
font-size: 22px;
text-align: center;
line-height: 40px;
}
.box-3 button {
border: 1px solid rgb(35,93,166);
color: #fff;
font-size: 22px;
text-align: center;
/* padding-right: 20px; */
line-height: 40px;
}
.cover {
-webkit-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
will-change: transform;
}
.cover img {
-webkit-transition: all 260ms ease-in-out;
transition: all 260ms ease-in-out;
}
.box .cover::after {
content: "";
z-index: -99;
position: absolute;
top: 20px;
left: -20px;
display: block;
width: 160px;
height: 214px;
opacity: 0;
background-position: center;
background-repeat: no-repeat;
background-size: 160px 214px;
-webkit-filter: blur(24px);
filter: blur(24px);
-webkit-transition: all 260ms ease-in-out;
transition: all 260ms ease-in-out;
will-change: transform;
-webkit-transform: scale(.6);
transform: scale(.6);
}
.box:hover .cover::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
/* .box-1 .cover::after {
box-shadow: 0 19px 38px rgba(234,170,73,1), 0 15px 12px rgba(234,170,73,1)
} */
/* .box-2 .cover::after {
box-shadow: 0 19px 38px rgb(110, 174, 220), 0 19px 38px rgb(110, 174, 220)
} */
/* .box-3 .cover::after {
box-shadow: 0 19px 38px rgb(110, 174, 220), 0 19px 38px rgb(110, 174, 220)
} */
.box-1 button div::before {
content: 'Phoenix';
position: relative;
top: -44px;
left: 10px;
color: rgb(35,93,166);
font-size: 21px;
font-weight: 300;
}
.box-1 button .grif::before {
content: 'Griffin';
}
box-1 button .ari::before {
content: 'Aries';
}
button:hover {
background-color: rgba(35,93,166,.1);
border: 2px solid rgb(35,93,166);
}
.box-2 button div::before {
content: 'Knowledge Base';
position: relative;
top: -44px;
left: 0px;
color: rgb(35,93,166);
font-size: 21px;
font-weight: 300;
}
.box-3 button div::before {
content: 'Phoenix';
position: relative;
top: -44px;
left: 3px;
color: rgb(35,93,166);
font-size: 21px;
font-weight: 300;
}
.box-3 button .grif::before {
content: 'Griffin';
}
box-1 button .ari::before {
content: 'Aries';
}
</style>
<div class="container">
<div class="box box-1">
<div class="cover"><img src="https://confluence.atlassian.com/download/attachments/775520306/Tutorials_Icon_scaled.png" alt=""></div><h1>Documentation</h1>
<button><div></div></button>
<button class="prod"><div class='grif'></div></button>
<button class="prod"><div class='ari'></div></button>
</div>
<div class="box box-2">
<div class="cover"><img src="https://confluence.atlassian.com/download/attachments/775520306/Atlassian_Content_Icon_scaled.png" alt=""></div><h1>Knowledge Base</h1>
<button><div></div></button>
</div>
<div class="box box-3">
<div class="cover"><img src="https://confluence.atlassian.com/download/attachments/775520306/Install_Icon_scaled.png" alt=""></div><h1>Downloads</h1>
<button><div></div></button>
<button class="prod"><div class='grif'></div></button>
<button class="prod"><div class='ari'></div></button>
</div>
</div> |
