mirror of
https://github.com/inspec/inspec
synced 2024-12-19 09:33:20 +00:00
bd4a73cfb9
Base SCSS, JS, fonts, images, HTML ported over to old inspec.io tempting engine. —To do: Media queries, Header, footer, docs, tutorials
98 lines
1.9 KiB
SCSS
98 lines
1.9 KiB
SCSS
|
|
//Hero Banner - Home Page
|
|
|
|
header {
|
|
height: 500px;
|
|
}
|
|
#container {
|
|
height: 500px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.h-top {
|
|
position: absolute;
|
|
z-index: 1;
|
|
img {
|
|
&:first-of-type {
|
|
height: 500px;
|
|
position: relative;
|
|
}
|
|
&:nth-child(3) {
|
|
position: absolute;
|
|
height: 250px;
|
|
top: 120px;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
h1 {
|
|
position: absolute;
|
|
z-index: 10;
|
|
top: 75%;
|
|
}
|
|
}
|
|
|
|
// Animation for Home Page
|
|
|
|
//Reflecting Diamond
|
|
|
|
.bright-animate{
|
|
animation: brightness 6s infinite;
|
|
-webkit-animation: brightness 6s infinite;
|
|
-moz-animation: brightness 6s infinite;
|
|
}
|
|
|
|
@-webkit-keyframes brightness {
|
|
0%, 100% {
|
|
-webkit-filter: brightness(none);
|
|
filter: brightness(none);
|
|
}
|
|
50% {
|
|
-webkit-filter: brightness(1.2);
|
|
filter: brightness(1.2);
|
|
}
|
|
}
|
|
|
|
@keyframes brightness {
|
|
0%, 100% {
|
|
-moz-filter: brightness(none);
|
|
filter: brightness(none);
|
|
}
|
|
50% {
|
|
-moz-filter: brightness(1.2);
|
|
filter: brightness(1.2);
|
|
}
|
|
}
|
|
|
|
//Warping Grid Animation//
|
|
|
|
.grid-animate{
|
|
-webkit-animation: g-animate 5s linear infinite both;
|
|
animation: g-animate 5s linear infinite both;
|
|
-moz-animation: g-animate 5s linear infinite both;
|
|
}
|
|
@-webkit-keyframes g-animate {
|
|
25% { -webkit-transform: rotateZ(10deg) scale3d(0.7, 1, 1.2);
|
|
transform: rotateZ(10deg) scale3d(0.7, 1, 1.2);
|
|
}
|
|
|
|
50% {-webkit-transform: scale3d(1.2, 0.7, 1);
|
|
transform: scale3d(1.2, 0.7, 1);
|
|
}
|
|
|
|
75% {-webkit-transform: rotateZ(10deg) scale3d(0.7, 1.2, 0.5);
|
|
transform: rotateZ(10deg) scale3d(0.7, 1.2, 0.5);
|
|
}
|
|
}
|
|
@keyframes g-animate {
|
|
25% { -moz-transform: rotateZ(10deg) scale3d(0.7, 1, 1.2);
|
|
transform: rotateZ(10deg) scale3d(0.7, 1, 1.2);
|
|
}
|
|
|
|
50% {-moz-transform: scale3d(1.2, 0.7, 1);
|
|
transform: scale3d(1.2, 0.7, 1);
|
|
}
|
|
|
|
75% {-moz-transform: rotateZ(10deg) scale3d(0.7, 1.2, 0.5);
|
|
transform: rotateZ(10deg) scale3d(0.7, 1.2, 0.5);
|
|
}
|
|
}
|