add page LandingTracker
This commit is contained in:
784
src/pages/LandingTracker/LandingTracker.scss
Normal file
784
src/pages/LandingTracker/LandingTracker.scss
Normal file
@ -0,0 +1,784 @@
|
||||
.tracker {
|
||||
font-family: "GT Eesti Pro Display";
|
||||
|
||||
&__container {
|
||||
margin: 0 auto;
|
||||
// padding: 85px 0 90px;
|
||||
max-width: 1080px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
&__intro {
|
||||
background-color: #a7ca60;
|
||||
position: relative;
|
||||
|
||||
.intro {
|
||||
&__question-mark {
|
||||
position: absolute;
|
||||
right: 15%;
|
||||
}
|
||||
&__code {
|
||||
position: absolute;
|
||||
mix-blend-mode: plus-lighter;
|
||||
bottom: 96px;
|
||||
left: 16%;
|
||||
}
|
||||
&__code--top {
|
||||
position: absolute;
|
||||
mix-blend-mode: plus-lighter;
|
||||
top: 20px;
|
||||
left: 38%;
|
||||
}
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
column-gap: 165px;
|
||||
height: 475px;
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
}
|
||||
}
|
||||
|
||||
&-logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
h3 {
|
||||
color: #ffffff;
|
||||
font-family: "Geraspoheko";
|
||||
font-size: 343px;
|
||||
font-weight: 400;
|
||||
line-height: 325.92px;
|
||||
}
|
||||
|
||||
&__cup {
|
||||
position: absolute;
|
||||
bottom: -85px;
|
||||
right: -150px;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #607536;
|
||||
max-width: 455px;
|
||||
|
||||
&__sublogo {
|
||||
margin-top: 37px;
|
||||
|
||||
h5 {
|
||||
font-size: 29px;
|
||||
font-weight: 900;
|
||||
line-height: 33.64px;
|
||||
letter-spacing: 0.11em;
|
||||
position: relative;
|
||||
display: inline;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: #ffffff;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 100px;
|
||||
left: 49%;
|
||||
top: -30%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 33px;
|
||||
font-weight: 300;
|
||||
line-height: 37.29px;
|
||||
letter-spacing: 0.01em;
|
||||
margin: 101px 0 34px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 33px;
|
||||
font-weight: 500;
|
||||
line-height: 37.29px;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__presentation {
|
||||
background-color: #eeeeee;
|
||||
position: relative;
|
||||
|
||||
.presentation {
|
||||
&__code {
|
||||
position: absolute;
|
||||
mix-blend-mode: plus-lighter;
|
||||
bottom: 225px;
|
||||
right: 18%;
|
||||
}
|
||||
&__code--top {
|
||||
position: absolute;
|
||||
mix-blend-mode: plus-lighter;
|
||||
top: 60px;
|
||||
left: 25%;
|
||||
}
|
||||
&__ellipse {
|
||||
position: absolute;
|
||||
width: 563px;
|
||||
height: 563px;
|
||||
top: -90px;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 749px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
}
|
||||
|
||||
h5 {
|
||||
color: #4a4a4a;
|
||||
font-size: 33px;
|
||||
font-weight: 700;
|
||||
line-height: 38.28px;
|
||||
margin-top: 95px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
text-transform: uppercase;
|
||||
color: #a7ca60;
|
||||
font-size: 103px;
|
||||
font-weight: 900;
|
||||
line-height: 119.48px;
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #4a4a4a;
|
||||
font-size: 19px;
|
||||
font-weight: 300;
|
||||
line-height: 22.04px;
|
||||
letter-spacing: 0.01em;
|
||||
max-width: 609px;
|
||||
margin-bottom: 52px;
|
||||
|
||||
span {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-auth__buttons {
|
||||
display: flex;
|
||||
column-gap: 29px;
|
||||
|
||||
button {
|
||||
width: 185px;
|
||||
height: 45px;
|
||||
border-radius: 44px;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
line-height: 19.72px;
|
||||
}
|
||||
|
||||
.signIn {
|
||||
a {
|
||||
color: #607536;
|
||||
}
|
||||
background-color: #a7ca60;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.signUp {
|
||||
a {
|
||||
color: #a7ca60;
|
||||
}
|
||||
border: 1px solid #a7ca60;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__tracker-preview {
|
||||
margin-top: 61px;
|
||||
position: relative;
|
||||
|
||||
.tracker-preview {
|
||||
&__buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: 155px;
|
||||
right: -75px;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button {
|
||||
background: none;
|
||||
width: 70px;
|
||||
height: 64px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ffffff;
|
||||
}
|
||||
|
||||
button:first-child {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__addition {
|
||||
background-color: #a7ca60;
|
||||
width: 247px;
|
||||
height: 188px;
|
||||
border-radius: 24px 0px 83px 0px;
|
||||
color: #ffffff;
|
||||
position: absolute;
|
||||
padding: 40px 43px 40px 50px;
|
||||
bottom: -34px;
|
||||
left: 21%;
|
||||
z-index: 2;
|
||||
|
||||
span {
|
||||
font-size: 26px;
|
||||
font-weight: 900;
|
||||
line-height: 28.34px;
|
||||
letter-spacing: 0.03em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
line-height: 19.65px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__goals {
|
||||
background-color: #1e1e1e;
|
||||
position: relative;
|
||||
|
||||
.goals {
|
||||
&__code {
|
||||
position: absolute;
|
||||
mix-blend-mode: plus-lighter;
|
||||
bottom: -96px;
|
||||
left: 7%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 720px;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-head {
|
||||
margin-top: 24px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
&__logo {
|
||||
font-family: "Bebas Neue";
|
||||
font-size: 244px;
|
||||
font-weight: 700;
|
||||
line-height: 244px;
|
||||
letter-spacing: -0.03em;
|
||||
background: linear-gradient(0deg, #171717 -59.84%, #2a2a2a 136.14%);
|
||||
filter: drop-shadow(7px 0px 10px rgba(0, 0, 0, 0.1294117647));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
&__info {
|
||||
position: absolute;
|
||||
bottom: 55px;
|
||||
max-width: 552px;
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
line-height: 17.4px;
|
||||
letter-spacing: 0.02em;
|
||||
color: #eeeeee;
|
||||
|
||||
span {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__items {
|
||||
margin-top: 31px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
column-gap: 48px;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
flex-direction: column;
|
||||
row-gap: 86px;
|
||||
margin-top: 65px;
|
||||
}
|
||||
|
||||
.item {
|
||||
&__wrapper {
|
||||
position: relative;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-right: 41px;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
margin-left: 41px;
|
||||
}
|
||||
}
|
||||
|
||||
&__head {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
color: #a7ca60;
|
||||
top: -45px;
|
||||
left: 20px;
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0;
|
||||
font-weight: 700;
|
||||
font-size: 100px;
|
||||
text-transform: uppercase;
|
||||
line-height: 0.8;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 13.92px;
|
||||
letter-spacing: 0.01em;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
font-size: 14px;
|
||||
max-width: 124px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 205px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backdrop-filter: blur(3px);
|
||||
box-shadow: 10px 9px 14px 0 rgba(0, 0, 0, 0.06);
|
||||
background: linear-gradient(
|
||||
137deg,
|
||||
rgba(87, 87, 87, 0.34) 0%,
|
||||
rgba(104, 104, 104, 0.34) 100%
|
||||
);
|
||||
border: 0.5px solid #717171;
|
||||
border-radius: 8px;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
width: 324px;
|
||||
height: 153px;
|
||||
}
|
||||
|
||||
.item {
|
||||
&__info {
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
line-height: 19.65px;
|
||||
color: #dddddd;
|
||||
max-width: 148px;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__invite {
|
||||
background-color: #a7ca60;
|
||||
position: relative;
|
||||
|
||||
.invite {
|
||||
&__code {
|
||||
position: absolute;
|
||||
mix-blend-mode: plus-lighter;
|
||||
bottom: 10px;
|
||||
right: 12%;
|
||||
}
|
||||
|
||||
&__container {
|
||||
padding-top: 84px;
|
||||
height: 582px;
|
||||
overflow: hidden;
|
||||
column-gap: 133px;
|
||||
}
|
||||
|
||||
&__info {
|
||||
max-width: 541px;
|
||||
h5 {
|
||||
color: #607536;
|
||||
font-size: 44px;
|
||||
font-weight: 700;
|
||||
line-height: 51.04px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #607536;
|
||||
margin: 39px 0 64px 0;
|
||||
font-size: 17px;
|
||||
font-weight: 300;
|
||||
line-height: 19.72px;
|
||||
|
||||
span {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-auth__buttons {
|
||||
display: flex;
|
||||
column-gap: 29px;
|
||||
|
||||
button {
|
||||
width: 185px;
|
||||
height: 45px;
|
||||
border-radius: 50px;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
line-height: 19.72px;
|
||||
}
|
||||
|
||||
.signIn {
|
||||
a {
|
||||
color: #607536;
|
||||
}
|
||||
background-color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.signUp {
|
||||
a {
|
||||
color: #ffffff;
|
||||
}
|
||||
border: 1px solid #ffffff;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
|
||||
h3 {
|
||||
color: #ffffff;
|
||||
font-family: "Geraspoheko";
|
||||
font-size: 343px;
|
||||
font-weight: 400;
|
||||
line-height: 325.92px;
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__sign {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: -180px;
|
||||
top: 70px;
|
||||
}
|
||||
|
||||
&__ellipse {
|
||||
position: absolute;
|
||||
width: 463px;
|
||||
height: 563px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__nav {
|
||||
background-color: #eeeeee;
|
||||
position: relative;
|
||||
|
||||
.nav {
|
||||
&__code {
|
||||
position: absolute;
|
||||
mix-blend-mode: plus-lighter;
|
||||
bottom: 10px;
|
||||
right: 12%;
|
||||
}
|
||||
|
||||
&__container {
|
||||
padding-top: 49px;
|
||||
height: 638px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__project {
|
||||
padding: 0 55px;
|
||||
display: flex;
|
||||
column-gap: 80px;
|
||||
height: 142px;
|
||||
align-items: center;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #f8f8f8;
|
||||
|
||||
.project__img {
|
||||
border-radius: 8px;
|
||||
width: 99px;
|
||||
height: 81px;
|
||||
background: #a7ca60;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.flag {
|
||||
bottom: 21px;
|
||||
right: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: #717171;
|
||||
font-size: 17px;
|
||||
font-weight: 300;
|
||||
line-height: 21.59px;
|
||||
letter-spacing: 0.02em;
|
||||
|
||||
span {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: #4a4a4a;
|
||||
font-size: 46px;
|
||||
font-weight: 900;
|
||||
line-height: 53.36px;
|
||||
letter-spacing: 0.03em;
|
||||
text-align: center;
|
||||
margin: 42px 0 77px 0;
|
||||
}
|
||||
|
||||
&__opportunities {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
|
||||
|
||||
@media (max-width: 431px) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
column-gap: 20px;
|
||||
row-gap: 19px;
|
||||
width: 100%;
|
||||
margin: 0 0 86px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__opportunity {
|
||||
width: 320px;
|
||||
height: 91px;
|
||||
padding-left: 55px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
padding: 0;
|
||||
width: 40%;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: linear-gradient(
|
||||
95.54deg,
|
||||
#ffffff 5.13%,
|
||||
#f1f1f1 97.48%
|
||||
);
|
||||
border: 0.5px solid #ffffff;
|
||||
border-radius: 18px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 21.4px;
|
||||
color: #838383;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 14.12px;
|
||||
text-align: center;
|
||||
min-height: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: -130px;
|
||||
bottom: -15px;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
display: block;
|
||||
position: relative;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
@media (max-width: 431px) {
|
||||
&:hover {
|
||||
p {
|
||||
font-weight: 700;
|
||||
color: rgba(74, 74, 74, 1);
|
||||
max-width: 165px;
|
||||
|
||||
span {
|
||||
color: rgba(167, 202, 96, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 432px) {
|
||||
&:hover {
|
||||
border-right: 1px solid rgba(245, 245, 245, 1);
|
||||
border-bottom: 1px solid rgba(245, 245, 245, 1);
|
||||
background: linear-gradient(
|
||||
95.54deg,
|
||||
#ffffff 5.13%,
|
||||
#eeeeee 97.48%
|
||||
);
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 700;
|
||||
color: rgba(74, 74, 74, 1);
|
||||
min-width: 167px;
|
||||
|
||||
span {
|
||||
color: rgba(167, 202, 96, 1);
|
||||
}
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__opportunity:nth-child(-n + 3) {
|
||||
border-bottom: 1px solid rgba(245, 245, 245, 1);
|
||||
}
|
||||
|
||||
&__opportunity:nth-child(-n + 2) {
|
||||
border-right: 1px solid rgba(245, 245, 245, 1);
|
||||
}
|
||||
|
||||
&__opportunity:nth-child(4) {
|
||||
border-right: 1px solid rgba(245, 245, 245, 1);
|
||||
}
|
||||
|
||||
&__opportunity:nth-child(5) {
|
||||
border-right: 1px solid rgba(245, 245, 245, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.outstaffing__offers {
|
||||
padding: 10px 0 25px 10px;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
padding: 0;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border-radius: 5px;
|
||||
height: 91px;
|
||||
padding: 24px 35px 24px 42px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
border-radius: 18px;
|
||||
border: 0.5px solid #ffffff;
|
||||
}
|
||||
|
||||
p {
|
||||
color: rgba(167, 202, 96, 1);
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 21.4px;
|
||||
max-width: 215px;
|
||||
|
||||
@media (max-width: 431px) {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 17.12px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 27px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user