frontend_v2/src/app/components/not-found/not-found.component.scss
@import './variables.scss';
@import './mixins.scss';
.not-found-container {
background: $red-light;
color: white;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
left: 0;
height: 100%;
font-weight: $fw-light;
.link {
position: absolute;
bottom: 0;
text-align: center;
left: 0;
margin: 20px;
width: 100%;
a {
color: $gray-light;
font-weight: $fw-regular;
&:hover {
color: $red-dark;
}
}
}
.c {
text-align: center;
display: block;
position: relative;
width: 80%;
margin: 100px auto;
}
._404 {
font-size: 220px;
position: relative;
display: inline-block;
z-index: 2;
height: 250px;
letter-spacing: 15px;
}
._1 {
text-align: center;
display: block;
position: relative;
letter-spacing: 12px;
font-size: 4em;
line-height: 80%;
margin: 20px;
}
._2 {
text-align: center;
display: block;
position: relative;
font-size: 20px;
margin: 20px;
}
.text {
font-size: 70px;
text-align: center;
position: relative;
display: inline-block;
margin: 19px 0px 0px 0px;
/* top: 256.301px; */
z-index: 3;
width: 100%;
line-height: 1.2em;
display: inline-block;
}
.right {
float: right;
width: 60%;
}
hr {
padding: 0;
border: none;
border-top: 5px solid white;
color: white;
text-align: center;
margin: 0px auto;
width: 420px;
height: 10px;
z-index: -10;
}
.cloud {
width: 350px;
height: 120px;
background: white;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
position: absolute;
margin: 120px auto 20px;
z-index: 1;
transition: ease 1s;
}
.cloud:after,
.cloud:before {
content: '';
position: absolute;
background: #fff;
z-index: -1;
}
.cloud:after {
width: 100px;
height: 100px;
top: -50px;
left: 50px;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
}
.cloud:before {
width: 180px;
height: 180px;
top: -90px;
right: 50px;
border-radius: 200px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
}
.x1 {
top: -50px;
left: 100px;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
opacity: 0.9;
-webkit-animation: moveclouds 15s linear infinite;
-moz-animation: moveclouds 15s linear infinite;
-o-animation: moveclouds 15s linear infinite;
}
.x1_5 {
top: -80px;
left: 250px;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
transform: scale(0.3);
-webkit-animation: moveclouds 17s linear infinite;
-moz-animation: moveclouds 17s linear infinite;
-o-animation: moveclouds 17s linear infinite;
}
.x2 {
left: 250px;
top: 30px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}
.x3 {
left: 250px;
bottom: -70px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.8;
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}
.x4 {
left: 470px;
botttom: 20px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
-webkit-animation: moveclouds 18s linear infinite;
-moz-animation: moveclouds 18s linear infinite;
-o-animation: moveclouds 18s linear infinite;
}
.x5 {
left: 200px;
top: 300px;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.8;
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
@include keyframes(moveclouds) {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
}
@include screen-small {
.not-found-container {
._404 {
font-size: 150px;
}
}
}
/* Error-404 styles */
.fof-wrapper {
position: absolute;
text-align: center;
width: 100% ;
height: 100%;
left: 0;
background: #202028;
color: #9A958A;
padding-top: 100px;
}
.fof-error-container {
width: 100% ;
height: 100%;
font-family: "Roboto";
font-style: normal;
}
.fof-error {
postion: absolute;
left: 0;
color: #BDB9A8;
font-size: 80px;
text-align: left;
font-weight: bold;
padding-top: 130px;
width: 100%;
height: 50px;
}
.fof-message {
postion: absolute;
left: 0;
text-align: left;
font-size: 18px;
padding-top: 90px;
width: 100%;
}
.fof-home {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin-bottom: 15px;
font-size: 15px;
font-family: "Roboto";
color: #BDB9A8;
}
.home-link{
color: #FFFFFF;
}
.owl-pic{
position: absolute;
right: 10%;
width: 200px;
height: 200px;
top: 20%;
background: url('../../../assets/images/owl.png');
}
.fof-stars{
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: #ffffff;
margin-top: 100px;
}
.fof-grad {
margin: 0 auto;
position: relative;
overflow: hidden;
height: 450px;
width: 450px;
border: none;
border-radius: 50%;
background: #202028;
background: -webkit-radial-gradient(circle, #9A958A 22%,#5E5D5A 45%,#212129 60%,#202028 100%,#202028 100%); /* For Safari 5.1 to 6.0 */
background: -o-radial-gradient(circle, #9A958A 22%,#5E5D5A 45%, #212129 60%,#202028 100%,#202028 100%); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(circle, #9A958A 22%,#5E5D5A 45%, #212129 60%,#202028 100%,#202028 100%); /* For Fx 3.6 to 15 */
background: radial-gradient(circle, #9A958A 22%,#5E5D5A 45%, #212129 60%,#202028 100%,#202028 100%);
}
/* div Stars */
#star-1{
right: 30%;
}
#star-2{
left: 20%;
top: 5%;
}
#star-3{
right: 20%;
bottom: 40%;
}
#star-4{
right: 60%;
bottom: 25%;
}
#star-5{
right: 50%;
bottom: 45%;
}
#star-6{
left: 40%;
top: 10%;
}
#star-7{
left: 30%;
bottom: 50%;
}
#star-8{
left: 25%;
bottom: 15%;
}
#star-9{
left: 60%;
bottom: 25%;
}
#star-10{
right: 40%;
top: 6%;
}
#star-11{
left: 30%;
top: 3%;
}
#star-12{
left: 20%;
bottom: 30%;
}
/* Media Queries */
@media only screen and(min-width: 768px) and(max-width: $med-screen){
.fof-wrapper{
padding-top: 200px;
}
}
@media only screen and(min-width: 569px) and(max-width: 767px){
.fof-wrapper{
padding-top: 150px;
}
.fof-grad{
margin: 0 auto;
position: relative;
overflow: hidden;
height: 360px;
width: 360px;
}
.fof-home{
font-size: 12px;
}
.fof-message{
font-size: 14px;
padding-top: 70px;
padding-left: 5px;
}
.fof-error{
font-size: 60px;
padding-top: 130px;
}
}
@media only screen and(min-width:320px) and(max-width:568px){
.fof-wrapper{
padding-top: 150px;
}
.fof-grad{
margin: 0 auto;
position: relative;
overflow: hidden;
height: 320px;
width: 320px;
}
.fof-home{
font-size: 12px;
}
.fof-message{
font-size: 12px;
padding-top: 60px;
}
.fof-error{
font-size: 50px;
padding-top: 110px;
}
}