Skip to content

Commit

Permalink
coming soon responsive check
Browse files Browse the repository at this point in the history
  • Loading branch information
@spbavarva
spbavarva committed Jul 17, 2022
1 parent cb33c80 commit 1c73516
Showing 1 changed file with 130 additions and 97 deletions.
227 changes: 130 additions & 97 deletions src/components/Pages/ComingSoon/comingSoon.css
View file
Original file line number Diff line number Diff line change
@@ -1,144 +1,177 @@
#soon {
position: relative;
height: 100vh;
background: #030005;
position: relative;
height: 100vh;
background: #030005;
}

#soon .soon {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.soon {
max-width: 767px;
width: 100%;
line-height: 1.4;
text-align: center;
max-width: 767px;
width: 100%;
line-height: 1.4;
text-align: center;
}

.soon .soon_container {
position: relative;
height: 180px;
margin-bottom: 20px;
z-index: -1;
position: relative;
height: 180px;
margin-bottom: 20px;
z-index: -1;
}

.soon .soon_container h1 {
font-family: 'Montserrat', sans-serif;
position: absolute;
left: 50%;
top: 15%;
-webkit-transform: translate(-50% , -50%);
-ms-transform: translate(-50% , -50%);
transform: translate(-50% , -50%);
font-size: 8rem;
font-weight: 900;
/* margin-top: 0px;
font-family: "Montserrat", sans-serif;
position: absolute;
left: 50%;
top: 15%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 8rem;
font-weight: 900;
/* margin-top: 0px;
margin-bottom: 0px; */
margin-left: -12px;
color: #030005;
text-align: center;
justify-content: center;
text-transform: uppercase;
text-shadow: -1px -1px 0px #8400ff, 1px 1px 0px #ff005a;
letter-spacing: -15px;
margin-left: -12px;
color: #030005;
text-align: center;
justify-content: center;
text-transform: uppercase;
text-shadow: -1px -1px 0px #8400ff, 1px 1px 0px #ff005a;
letter-spacing: -15px;
}

.soon .soon_container h2 {
font-family: "SFmono";
position: absolute;
left: 0;
right: 0;
top: 0%;
justify-content: center;
font-size: 1.50rem;
font-weight: 500;
color: #fff;
text-transform: uppercase;
text-shadow: 0px 2px 0px #8400ff;
margin: 0;
font-family: "SFmono";
position: absolute;
left: 0;
right: 0;
top: 0%;
justify-content: center;
font-size: 1.5rem;
font-weight: 500;
color: #fff;
text-transform: uppercase;
text-shadow: 0px 2px 0px #8400ff;
margin: 0;
}
.soon .soon_container h3 {
font-family: "SFmono";
position: absolute;
left: 0;
right: 0;
top: 30px;
margin-bottom: 5rem;
justify-content: center;
font-size: 1.50rem;
font-weight: 500;
color: #fff;
text-transform: uppercase;
text-shadow: 0px 2px 0px #8400ff;
margin: 0;
font-family: "SFmono";
position: absolute;
left: 0;
right: 0;
top: 30px;
margin-bottom: 5rem;
justify-content: center;
font-size: 1.5rem;
font-weight: 500;
color: #fff;
text-transform: uppercase;
text-shadow: 0px 2px 0px #8400ff;
margin: 0;
}

.soon a {
font-family: 'Montserrat', sans-serif;
display: inline-block;
text-transform: uppercase;
color: #ff005a;
text-decoration: none;
border: 2px solid;
background: transparent;
padding: 10px 40px;
font-size: 14px;
font-weight: 700;
-webkit-transition: 0.2s all;
transition: 0.2s all;
font-family: "Montserrat", sans-serif;
display: inline-block;
text-transform: uppercase;
color: #ff005a;
text-decoration: none;
border: 2px solid;
background: transparent;
padding: 10px 40px;
font-size: 14px;
font-weight: 700;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}

.soon a:hover {
border: 2px solid #8400ff;
color: whitesmoke;
text-shadow: 0px 1px 0px #8400ff;
border: 2px solid #8400ff;
color: whitesmoke;
text-shadow: 0px 1px 0px #8400ff;
}

.soon p {
margin-top: 1rem;
font-size: 24px;
font-weight: 500;
margin-top: 1rem;
font-size: 24px;
font-weight: 500;
}

.soon p small {
text-shadow: -1px -1px 0px #8400ff, 1px 1px 0px #ff005a;
font-size: larger;
text-shadow: -1px -1px 0px #8400ff, 1px 1px 0px #ff005a;
font-size: larger;
}

.soon p sup {
font-size: small;
padding-left: 0.5em;
text-shadow: 0px 2px 0px #8400ff;
font-size: small;
padding-left: 0.5em;
text-shadow: 0px 2px 0px #8400ff;
}

.soon p span {
padding: 1rem 1rem;
animation: blinker 1s linear infinite;
background: -webkit-linear-gradient(90deg, #da4453 0%, #89216b 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
padding: 1rem 1rem;
animation: blinker 1s linear infinite;
background: -webkit-linear-gradient(90deg, #da4453 0%, #89216b 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

@keyframes blinker {
50% {
opacity: 0;
}
50% {
opacity: 0;
}
}

@media only screen and (max-width: 767px) {
.soon .soon_container h2 {
font-size: 0.9rem;
}
}

@media only screen and (max-width: 767px) {
.soon .soon_container h3 {
font-size: 0.8rem;
}
}

@media only screen and (max-width: 767px) {
.soon p {
width: 100vw;
margin-top: 1rem;
font-size: 1.7vh;
font-weight: 500;
}
}

@media only screen and (max-width: 767px) {
.soon .soon_container h2 {
font-size: 24px;
}
.soon small {
margin-top: 1rem;
font-size: 1vh;
font-weight: 500;
}
}

@media only screen and (max-width: 767px) {
.soon p sup {
margin-top: 1rem;
font-size: 1.4vh;
font-weight: 500;
}
}

@media only screen and (max-width: 480px) {
.soon .soon_container h1 {
font-size: 182px;
}
.soon .soon_container h1 {
font-size: 4rem;
line-height: 2;
letter-spacing: 0.01px;
}
}

0 comments on commit 1c73516

Please sign in to comment.