diff --git a/resources/public/dest/css/main.css b/resources/public/dest/css/main.css index b1a53a5..e3b5727 100644 --- a/resources/public/dest/css/main.css +++ b/resources/public/dest/css/main.css @@ -222,9 +222,16 @@ a { margin: 0 auto; margin-top: 40px; border-radius: 10px; - box-shadow: 0 10px 18px 0 rgba(122, 135, 142, 0.33); z-index: 900; - max-width: 1200px; } } + max-width: 1200px; } + + .header-welcome { + margin: 0; + border-radius: 0; + box-shadow: 0; + max-width: inherit; + padding-bottom: 0; } +} .header__inner { display: -ms-flexbox; @@ -239,7 +246,7 @@ a { .header__inner { -ms-flex-direction: row; flex-direction: row; - padding: 30px 0 0 30px; } } + padding: 40px 0 38px 80px; } } .header-section { display: -ms-flexbox; @@ -644,6 +651,134 @@ li.social-link a { line-height: 20px; margin: 0 0 15px 0; } } +.welcome-block { + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; + position: relative; + top: -28px; } + +.welcome-block__top { + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; + width: 550px; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-align: center; + align-items: center; + text-align: center; } + +.welcome-block__image { + width: 126px; + height: 138px; + background-image: url(../img/new-site/welcome@2x.png); + background-size: 126px; + background-position: center; + margin: 0 0 16px 0; } + +.welcome-block__top h2 { + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 25px; + font-weight: 500; + line-height: 1.36; + text-align: center; + color: #42505c; } + +.welcome-block__top p { + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 18px; + line-height: 1.39; + text-align: center; + color: #8d99a4; + margin-top: 24px; + margin-bottom: 10px; } + +.welcome-block .button { + width: 200px; } + +.welcome-home-link { + display: block; + padding-top: 24px; + padding-bottom: 60px; + margin: 0 auto; + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 17px; + line-height: 1.41; + text-align: center; + color: #8d99a4; } + +.welcome-home-link:hover { + opacity: 1; } + +.welcome-actions { + max-width: 723px; + margin: 0 auto; + padding: 24px 32px; + border-radius: 8px; + background-color: #ffffff; + box-shadow: 0 5px 16px 0 rgba(230, 235, 238, 0.68); } + +.welcome-action h2 { + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 18px; + font-weight: 500; + line-height: 1.72; + text-align: left; + color: #42505c; } + +.welcome-action p { + opacity: 0.5; + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 1.5; + text-align: left; + color: #42505c; } + +.welcome-icon { + width: 32px; + height: 32px; + padding: 7px; + border-radius: 100px; + border: solid 1px #ecf0f3; } + +.welcome-button { + display: block; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + margin-top: 16px; + border-radius: 8px; + background-color: rgba(87, 167, 237, 0.2); + border: solid 1px rgba(199, 206, 209, 0.12); + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 13px; + font-weight: 500; + line-height: 1.15; + letter-spacing: 1px; + text-align: center; + color: #57a7ed; + padding: 15px; } + +.welcome-action:first-of-type .welcome-button { + margin-bottom: 40px; } + +@media (max-width: 740px) { + .welcome-block__top { + width: 100%; + padding: 0 32px; } + .welcome-block__top h2 { + font-size: 22px; + line-height: 26px; + padding: 0 24px; } + .welcome-block__top p { + padding: 0 24px; } + .welcome-block__image { + -ms-transform: scale(0.9); + transform: scale(0.9); } } + .cards { position: relative; width: 300px; diff --git a/resources/public/dest/img/new-site/icon-gh-24@2x.png b/resources/public/dest/img/new-site/icon-gh-24@2x.png new file mode 100644 index 0000000..c284126 Binary files /dev/null and b/resources/public/dest/img/new-site/icon-gh-24@2x.png differ diff --git a/resources/public/dest/img/new-site/icon-gh-copy-24@2x.png b/resources/public/dest/img/new-site/icon-gh-copy-24@2x.png new file mode 100644 index 0000000..c284126 Binary files /dev/null and b/resources/public/dest/img/new-site/icon-gh-copy-24@2x.png differ diff --git a/resources/public/dest/img/new-site/welcome@2x.png b/resources/public/dest/img/new-site/welcome@2x.png new file mode 100644 index 0000000..8caa238 Binary files /dev/null and b/resources/public/dest/img/new-site/welcome@2x.png differ diff --git a/static_langing_page/dest/css/main.css b/static_langing_page/dest/css/main.css index b1a53a5..f42f9c2 100644 --- a/static_langing_page/dest/css/main.css +++ b/static_langing_page/dest/css/main.css @@ -222,9 +222,14 @@ a { margin: 0 auto; margin-top: 40px; border-radius: 10px; - box-shadow: 0 10px 18px 0 rgba(122, 135, 142, 0.33); z-index: 900; - max-width: 1200px; } } + max-width: 1200px; } + .header-welcome { + margin: 0; + border-radius: 0; + box-shadow: 0; + max-width: inherit; + padding-bottom: 0; } } .header__inner { display: -ms-flexbox; @@ -239,7 +244,7 @@ a { .header__inner { -ms-flex-direction: row; flex-direction: row; - padding: 30px 0 0 30px; } } + padding: 40px 0 38px 80px; } } .header-section { display: -ms-flexbox; @@ -644,6 +649,134 @@ li.social-link a { line-height: 20px; margin: 0 0 15px 0; } } +.welcome-block { + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; + position: relative; + top: -28px; } + +.welcome-block__top { + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; + width: 550px; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-align: center; + align-items: center; + text-align: center; } + +.welcome-block__image { + width: 126px; + height: 138px; + background-image: url(../img/new-site/welcome@2x.png); + background-size: 126px; + background-position: center; + margin: 0 0 16px 0; } + +.welcome-block__top h2 { + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 25px; + font-weight: 500; + line-height: 1.36; + text-align: center; + color: #42505c; } + +.welcome-block__top p { + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 18px; + line-height: 1.39; + text-align: center; + color: #8d99a4; + margin-top: 24px; + margin-bottom: 10px; } + +.welcome-block .button { + width: 200px; } + +.welcome-home-link { + display: block; + padding-top: 24px; + padding-bottom: 60px; + margin: 0 auto; + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 17px; + line-height: 1.41; + text-align: center; + color: #8d99a4; } + +.welcome-home-link:hover { + opacity: 1; } + +.welcome-actions { + max-width: 723px; + margin: 0 auto; + padding: 24px 32px; + border-radius: 8px; + background-color: #ffffff; + box-shadow: 0 5px 16px 0 rgba(230, 235, 238, 0.68); } + +.welcome-action h2 { + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 18px; + font-weight: 500; + line-height: 1.72; + text-align: left; + color: #42505c; } + +.welcome-action p { + opacity: 0.5; + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 1.5; + text-align: left; + color: #42505c; } + +.welcome-icon { + width: 32px; + height: 32px; + padding: 7px; + border-radius: 100px; + border: solid 1px #ecf0f3; } + +.welcome-button { + display: block; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + margin-top: 16px; + border-radius: 8px; + background-color: rgba(87, 167, 237, 0.2); + border: solid 1px rgba(199, 206, 209, 0.12); + font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + font-size: 13px; + font-weight: 500; + line-height: 1.15; + letter-spacing: 1px; + text-align: center; + color: #57a7ed; + padding: 15px; } + +.welcome-action:first-of-type .welcome-button { + margin-bottom: 40px; } + +@media (max-width: 740px) { + .welcome-block__top { + width: 100%; + padding: 0 32px; } + .welcome-block__top h2 { + font-size: 22px; + line-height: 26px; + padding: 0 24px; } + .welcome-block__top p { + padding: 0 24px; } + .welcome-block__image { + -ms-transform: scale(0.9); + transform: scale(0.9); } } + .cards { position: relative; width: 300px; diff --git a/static_langing_page/dest/img/new-site/icon-gh-24@2x.png b/static_langing_page/dest/img/new-site/icon-gh-24@2x.png new file mode 100644 index 0000000..c284126 Binary files /dev/null and b/static_langing_page/dest/img/new-site/icon-gh-24@2x.png differ diff --git a/static_langing_page/dest/img/new-site/welcome@2x.png b/static_langing_page/dest/img/new-site/welcome@2x.png new file mode 100644 index 0000000..8caa238 Binary files /dev/null and b/static_langing_page/dest/img/new-site/welcome@2x.png differ diff --git a/static_langing_page/src/img/new-site/icon-gh-24@2x.png b/static_langing_page/src/img/new-site/icon-gh-24@2x.png new file mode 100644 index 0000000..ab31252 Binary files /dev/null and b/static_langing_page/src/img/new-site/icon-gh-24@2x.png differ diff --git a/static_langing_page/src/img/new-site/welcome@2x.png b/static_langing_page/src/img/new-site/welcome@2x.png new file mode 100644 index 0000000..dae4ec4 Binary files /dev/null and b/static_langing_page/src/img/new-site/welcome@2x.png differ diff --git a/static_langing_page/src/scss/header.scss b/static_langing_page/src/scss/header.scss index ea2642e..fa6d2ce 100644 --- a/static_langing_page/src/scss/header.scss +++ b/static_langing_page/src/scss/header.scss @@ -15,11 +15,17 @@ margin: 0 auto; margin-top: 40px; border-radius: 10px; - box-shadow: 0 10px 18px 0 rgba(122, 135, 142, 0.33); z-index: 900; max-width: 1200px; } + .header-welcome { + margin: 0; + border-radius: 0; + box-shadow: 0; + max-width: inherit; + padding-bottom: 0; + } } .header__inner { @@ -32,7 +38,7 @@ @media (min-width: 640px) { .header__inner { flex-direction: row; - padding: 30px 0 0 30px; + padding: 40px 0 38px 80px; } } diff --git a/static_langing_page/src/scss/main.scss b/static_langing_page/src/scss/main.scss index 3e081ce..d384d02 100644 --- a/static_langing_page/src/scss/main.scss +++ b/static_langing_page/src/scss/main.scss @@ -3,6 +3,7 @@ @import "page"; +@import "welcome"; @import "cards"; @import "actions"; @import "slides"; diff --git a/static_langing_page/src/scss/welcome.scss b/static_langing_page/src/scss/welcome.scss new file mode 100644 index 0000000..2751e8a --- /dev/null +++ b/static_langing_page/src/scss/welcome.scss @@ -0,0 +1,141 @@ +.welcome-block { + display: flex; + justify-content: center; + position: relative; + top: -28px; + } + + .welcome-block__top { + display: flex; + justify-content: center; + width: 550px; + flex-direction: column; + align-items: center; + text-align: center; + } + + .welcome-block__image { + width: 126px; + height: 138px; + background-image: url(../img/new-site/welcome@2x.png); + background-size: 126px; + background-position: center; + margin: 0 0 16px 0; + } + + .welcome-block__top h2 { + font-family: $PostGroteskMedium; + font-size: 25px; + font-weight: 500; + line-height: 1.36; + text-align: center; + color: #42505c; + } + + .welcome-block__top p { + font-family: $PostGroteskMedium; + font-size: 18px; + line-height: 1.39; + text-align: center; + color: #8d99a4; + margin-top: 24px; + margin-bottom: 10px; + } + + .welcome-block .button { + width: 200px; + } + + .welcome-home-link { + display: block; + padding-top: 24px; + padding-bottom: 60px; + margin: 0 auto; + font-family: $PostGroteskMedium; + font-size: 17px; + line-height: 1.41; + text-align: center; + color: #8d99a4; + } + + .welcome-home-link:hover { + opacity: 1 + } + + .welcome-actions { + max-width: 723px; + margin: 0 auto; + padding: 24px 32px; + border-radius: 8px; + background-color: #ffffff; + box-shadow: 0 5px 16px 0 rgba(230, 235, 238, 0.68); + } + + .welcome-action h2 { + font-family: $PostGroteskMedium; + font-size: 18px; + font-weight: 500; + line-height: 1.72; + text-align: left; + color: #42505c; + } + + .welcome-action p { + opacity: 0.5; + font-family: $PostGroteskMedium; + font-size: 16px; + line-height: 1.5; + text-align: left; + color: #42505c; + } + + .welcome-icon { + width: 32px; + height: 32px; + padding: 7px; + border-radius: 100px; + border: solid 1px #ecf0f3; + } + + .welcome-button { + display: block; + width: fit-content; + margin-top: 16px; + border-radius: 8px; + background-color: rgba(87, 167, 237, 0.2); + border: solid 1px rgba(199, 206, 209, 0.12); + font-family: $PostGroteskMedium; + font-size: 13px; + font-weight: 500; + line-height: 1.15; + letter-spacing: 1px; + text-align: center; + color: #57a7ed; + padding: 15px; + } + + .welcome-action:first-of-type .welcome-button { + margin-bottom: 40px; + } + + @media (max-width: 740px) { + + .welcome-block__top { + width: 100%; + padding: 0 32px; + } + + .welcome-block__top h2 { + font-size: 22px; + line-height: 26px; + padding: 0 24px; + } + + .welcome-block__top p { + padding: 0 24px; + } + + .welcome-block__image { + transform: scale(.9); + } + } \ No newline at end of file diff --git a/static_langing_page/welcome-dev.html b/static_langing_page/welcome-dev.html new file mode 100644 index 0000000..d333a76 --- /dev/null +++ b/static_langing_page/welcome-dev.html @@ -0,0 +1,165 @@ + + + +
+ + + +Thank you for joining our community of committed developers. + Get started now and start getting paid for contributing + to open source projects!
+Stay up to date on the latest news, bounties and special programs that only take place within the Status Open Bounty Riot Room
+ Join Now +Help us raise awareness and attract more talented contributors just like you. Star us on Github and help spread the word.
+ Open Github +