Created
April 27, 2024 18:18
-
-
Save techsin/b78ac84cf4f1a78022dad4702d743ce8 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
margin: 0; | |
padding: 0; | |
text-rendering: optimizeLegibility; | |
-webkit-font-smoothing: antialiased; | |
} | |
@font-face { | |
font-family: SegoeUI; | |
src: | |
local("Segoe UI Light"), | |
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2) format("woff2"), | |
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff) format("woff"), | |
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf) format("truetype"); | |
font-weight: 100; | |
} | |
@font-face { | |
font-family: SegoeUI; | |
src: | |
local("Segoe UI Semilight"), | |
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2) format("woff2"), | |
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff) format("woff"), | |
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf) format("truetype"); | |
font-weight: 200; | |
} | |
@font-face { | |
font-family: SegoeUI; | |
src: | |
local("Segoe UI"), | |
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2) format("woff2"), | |
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff) format("woff"), | |
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf) format("truetype"); | |
font-weight: 400; | |
} | |
@font-face { | |
font-family: SegoeUI; | |
src: | |
local("Segoe UI Bold"), | |
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2) format("woff2"), | |
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff) format("woff"), | |
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf) format("truetype"); | |
font-weight: 600; | |
} | |
@font-face { | |
font-family: SegoeUI; | |
src: | |
local("Segoe UI Semibold"), | |
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2) format("woff2"), | |
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff) format("woff"), | |
url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf) format("truetype"); | |
font-weight: 700; | |
} | |
body { | |
background: linear-gradient(to right, #fcfcfe,#ecf1fe); | |
color: #343434; | |
font-family: 'Segoe UI', 'Open Sans', Helvetica, sans-serif;; | |
} | |
.hero-line { | |
background-color: #ECEFFF; | |
height: 13px; | |
width: 188px; | |
border-radius: 1000px; | |
position: relative; | |
margin-top: 15px; | |
left: -11px; | |
} | |
.hero { | |
z-index: -1; | |
position: relative; | |
} | |
.hero .left { | |
display: flex; | |
flex-direction: column; | |
} | |
.hero .left h1 { | |
margin-left: 13px; | |
text-transform: uppercase; | |
font-size: 39px; | |
margin-top: -2px; | |
color: #000000; | |
} | |
.hero .left p.description { | |
margin-left: 13px; | |
font-size: 12px; | |
line-height: 18px; | |
margin-bottom: 22px; | |
margin-top: 5px; | |
max-width: 200px; | |
color: #5E6B91; | |
} | |
.hero .left a.button-cont { | |
border: 6px solid rgba(0, 0, 0, 0.05); | |
background-clip: content-box; | |
border-radius: 1000px; | |
background-color: white; | |
display: inline-flex; | |
text-decoration: none; | |
align-self: flex-end; | |
position: relative; | |
right: -23px; | |
display: flex; | |
height: 49px; | |
align-items: center; | |
} | |
.hero .left a.button-cont .users { | |
color: #0D4AFF; | |
font-size: 11px; | |
text-transform: uppercase; | |
padding: 0 8px 0 20px; | |
font-weight: 700; | |
} | |
.hero .left a.button-cont .button { | |
background-color: #0D4AFF; | |
color: white; | |
text-transform: uppercase; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
font-size: 11px; | |
padding: 0px 21px; | |
border-radius: 1000px; | |
align-self: normal; | |
font-weight: 700; | |
} | |
.hero .arrow-right { | |
background-image: url(/images/right_arrow.svg); | |
background-position: center; | |
background-repeat: no-repeat; | |
background-size: contain; | |
height: 26px; | |
margin-left: 10px; | |
margin-right: 6px; | |
width: 19px; | |
} | |
.hero .right .graphics { | |
background-image: url(/images/homepage_graphics.png); | |
background-position: center; | |
background-repeat: no-repeat; | |
background-size: contain; | |
height: 100%; | |
top: 0; | |
left: -25px; | |
width: 549px; | |
position: absolute; | |
} | |
.hero .right .graphics-cont { | |
margin: auto; | |
height: 811px; | |
width: 333px; | |
position: relative; | |
} | |
.hero .left .bg-blob { | |
background-image: url(/images/blob.svg); | |
background-position: center; | |
background-repeat: no-repeat; | |
background-size: contain; | |
width: 564px; | |
height: 529px; | |
position: absolute; | |
z-index: -1; | |
right: -180px; | |
top: -30px; | |
} | |
.hero .right { | |
margin-bottom: -258px; | |
overflow: hidden; | |
} | |
.container { | |
position: relative; | |
overflow-x: hidden; | |
} | |
.hero .msg-cont .features { | |
border-radius: 8px; | |
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.09); | |
border: 1px solid #F8F8F8; | |
padding: 10px 14px; | |
position: absolute; | |
top: 270px; | |
background-color: #fff; | |
padding-left: 31px; | |
left: -26px; | |
padding-bottom: 2px; | |
font-weight: 500; | |
} | |
.hero .msg-cont .features ul { | |
list-style: none; | |
font-size: 11px; | |
color: #858fac; | |
} | |
.hero .msg-cont .features ul li { | |
margin: 7px 0; | |
} | |
.hero .msg-cont .features .line { | |
background-color: #F8F8F8; | |
border-radius: 1000px; | |
height: 5px; | |
width: 140px; | |
} | |
.how-it-works h2 { | |
color: #0D48F9; | |
font-size: 14px; | |
padding: 11px 13px 11px 35px;; | |
border-radius: 1000px; | |
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.09); | |
background: white; | |
display: inline-block; | |
font-weight: 700; | |
position: relative; | |
left: -20px; | |
margin-bottom: 8px; | |
} | |
.how-it-works li { | |
list-style-type: none; | |
color: #373E4D; | |
font-size: 11px; | |
padding: 9px 19px; | |
border-radius: 3px; | |
border: 1px solid #F0F4FE; | |
background: linear-gradient(90deg,#fff 60%,#f2f3ff); | |
margin: 6px 21px; | |
padding: 8px 19px; | |
font-weight: 500; | |
position: relative; | |
} | |
.how-it-works li::before { | |
content: ''; | |
width: 18px; | |
height: 19px; | |
left: -7px; | |
top: 50%; | |
transform: translateY(-50%); | |
background-image: url(/images/hp_feature_triangle.svg); | |
background-position: center; | |
background-repeat: no-repeat; | |
background-size: contain; | |
display: block; | |
position: absolute; | |
} | |
.button-join { | |
text-align: center; | |
background-color: #343434; | |
border-radius: 1000px; | |
color: #fff; | |
display: block; | |
font-size: 12px; | |
margin-left: auto; | |
margin-right: auto; | |
margin-top: 54px; | |
padding: 16px; | |
text-decoration: none; | |
text-transform: uppercase; | |
box-sizing: border-box; | |
width: 269px; | |
font-weight: 700; | |
} | |
.button-join .right-arrow { | |
background-image: url(/images/right_arrow.svg); | |
background-position: center; | |
background-repeat: no-repeat; | |
background-size: contain; | |
display: inline-block; | |
height: 23px; | |
margin-left: 14px; | |
vertical-align: middle; | |
width: 23px; | |
position: relative; | |
top: -1px; | |
} | |
.footer { | |
background: linear-gradient(180deg,rgba(180, 189, 209, 0), rgba(189, 197, 216, 0.4)); | |
overflow: auto; | |
} | |
.chest-nuts { | |
background-image: url(/images/chestnuts.svg); | |
background-position: center; | |
background-repeat: no-repeat; | |
background-size: contain; | |
margin: auto; | |
height: 63px; | |
width: 73px; | |
margin-top: 27px; | |
margin-bottom: 18px; | |
filter: grayscale(1); | |
} | |
.footer .links { | |
margin-bottom: 23px; | |
text-align: center; | |
} | |
.footer .links li { | |
display: inline-block; | |
color: #909DB9; | |
font-size: 7px; | |
} | |
.footer .links a:visited, | |
.footer .links a { | |
color: #909DB9; | |
text-decoration: none; | |
margin: 0 5px; | |
} | |
/*# sourceMappingURL=homepage.hash.css.map */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment