diff --git a/src/styles/_homepage.sass b/src/styles/_homepage.sass index d9222bd4..3e48b9e8 100644 --- a/src/styles/_homepage.sass +++ b/src/styles/_homepage.sass @@ -777,17 +777,17 @@ section.pricing text-shadow: 1px 1px 0 white margin: top: 10px - bottom: 70px + bottom: 50px padding: 0 +media-xs font-size: 1.6em .box - padding: 0 20px + margin-top: 40px + padding: 20px 20px 60px 20px border: 1px solid $color-text-dark-hint background-color: white - height: 340px min-height: 340px position: relative text-align: center @@ -814,7 +814,6 @@ section.pricing &.education .pricing-caption padding: 25px - color: $color-text-dark-secondary font-size: 1.1em transition: color 100ms ease-in-out @@ -851,9 +850,12 @@ section.pricing .pricing-caption color: $color-text-dark - // font-size: .9em + text-align: center padding-bottom: 0 + ul + text-align: left + +list-bullets ul diff --git a/src/styles/_join.sass b/src/styles/_join.sass index 30fcf413..ccad96a2 100644 --- a/src/styles/_join.sass +++ b/src/styles/_join.sass @@ -1,176 +1,34 @@ -$slide-height: 600px - +.navbar-backdrop.join + +media-xs + background-size: initial .join position: relative - .slide - position: relative - display: flex - justify-content: center - width: 100% + #page-header + display: block + padding: 30px 0 15px 0 + font-size: .9em + + .container + +media-sm + margin-left: 0 + + .page-title, .page-title-summary + text-align: left + text-shadow: none + + ul + margin-bottom: 25px + + li.special + color: $color-danger + + .page-header-cta-container + margin: 30px 0 50px 60px + justify-content: flex-start - &.icons - margin: 50px auto 100px auto - flex-direction: row - justify-content: space-around - .join__points_item - display: inline-block - width: 20% - padding: 0 20px - text-align: center - - .join__points_item-icon - font-size: 4em - display: block - color: $color-text-dark-secondary - margin: 0 0 15px 0 - - .join__points_item-title - display: block - font-family: $font-headings - font-size: 1.5em - line-height: 1.2em - color: lighten($color-text, 10%) - - .join__points_item-description - margin-top: 25px - display: block - - &.image - flex-direction: column - - height: $slide-height - width: 100% - background: - repeat: no-repeat - size: cover - - color: white - - .lead - z-index: 1 - max-width: 500px - font-size: 1.2em - padding: 0 50px - text-shadow: 0 0 25px rgba(black, .8) - - h1 - font: - family: $font-headings - - a - color: white - - &.right - align-self: flex-end - - &.main - text-align: center - align-items: center - - h1 - z-index: 1 - font: - family: $font-headings - font-size: 3.5em - margin: 0 - padding: 0 0 15px 0 - text-shadow: 0 0 30px rgba(black, .5) - - h2 - z-index: 1 - font: - size: 1.4em - family: $font-headings - margin: 0 - padding: 0 - weight: 400 - - max-width: 500px - text-shadow: 0 0 25px rgba(black, .8) - - - &.subscribe - .box - padding: 15px 65rpx - margin: 25px auto - +container-box - - h2 - text-align: center - padding: 0 0 15px 0 - - ul - max-width: 300px - margin: 0 30px - padding: 0 - list-style-type: none - - li - position: relative - padding: 0 - margin: 0 - - &:after - position: absolute - content: '\f00c' - font-size: 75% - top: 3px - left: -15px - font-family: "FontAwesome" - color: $color-success - - a.subscribe - display: inline-block - width: 100% - text-align: center - - button.subscribe - color: $color-text-dark - border-color: $color-text-dark - margin: 25px auto 25px auto - transition: opacity .1s - - &:hover - opacity: .8 - - i - padding-left: 10px - - - .overlay - z-index: 1 - - .gradient - position: absolute - width: 100% - height: 100% - top: 0 - left: 0 - right: 0 - bottom: 0 - z-index: 0 - background: linear-gradient(to top, rgba(5,6,6,0.6) 0%, transparent 80%) - - &.left - background: linear-gradient(to right, rgba(5,6,6,0.6) 0%, transparent 80%) - &.right - background: linear-gradient(to left, rgba(5,6,6,0.6) 0%, transparent 80%) - - button - color: white - border-color: white - padding: 5px 25px - margin: 45px auto 0 auto - font: - family: $font-headings - size: 1.6em - - &:hover, &:focus - background-color: rgba(white, .2) - - &:active - background-color: rgba(white, .4) - color: white + li.special + color: $color-danger + font-weight: bold diff --git a/src/templates/join.jade b/src/templates/join.jade index 09905bcf..4871f83a 100644 --- a/src/templates/join.jade +++ b/src/templates/join.jade @@ -6,12 +6,12 @@ | {% block og %} meta(property="og:title", content="Join the Blender Cloud") meta(property="og:url", content="https://cloud.blender.org/") -meta(property="og:image", content="{{ url_for('static', filename='assets/img/backgrounds/background_services.jpg')}}") +meta(property="og:image", content="{{ url_for('static', filename='assets/img/backgrounds/background_andy_hdribot_01.jpg')}}") | {% endblock %} | {% block header_backdrop %} .navbar-backdrop.join( - style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/background_andy_hdribot_01.jpg')}})") + style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/background_agent327_02.jpg')}})") | {% endblock %} | {% block page_overlay %} @@ -22,22 +22,24 @@ meta(property="og:image", content="{{ url_for('static', filename='assets/img/bac | {% block body %} #page-container.join #page-header - .page-title-icons - i.pi-blender - i.pi-heart-filled - i.pi-blender-cloud - .page-title - | Your Own Production Platform - //- .page-title-summary - //- | Get inspiration, knowledge, and tools all in one place. + .container + .page-title Peek inside a real production studio. - .page-header-cta-container - a.page-header-cta(href="https://store.blender.org/product/membership/") - | Join Now + .page-title-summary + p Join us as we make the Agent 327 "Barbershop" scene + ul + li Exclusive production insight & walk-throughs + li High-quality assets ready to use + li All the open movies files & tutorials + li 100+ hours of training - a.page-header-cta-extra(href="{{ url_for('main.nodes_search_index') }}") - | Explore - i.pi-angle-right + .page-header-cta-container + a.page-header-cta(href="https://store.blender.org/product/membership/") + | Join Now + + a.page-header-cta-extra(href="https://cloud.blender.org/p/agent-327") + | Learn More + i.pi-angle-right #page-content @@ -306,6 +308,14 @@ meta(property="og:image", content="{{ url_for('static', filename='assets/img/bac .pricing-caption p * with a 3-months minimum period + ul + li 100+ hours of high-quality training + li All the open movies files and tutorials + li Exclusive production insight & walk-throughs + li Sync your Blender settings across devices + li Share images & screenshots from within Blender + li Download 1500+ textures & HDRIs from Blender + a.sign-up-now(href="https://store.blender.org/product/membership/") | Subscribe Now @@ -317,8 +327,15 @@ meta(property="og:image", content="{{ url_for('static', filename='assets/img/bac span.digit-int 109 span.digit-dec .00 / year .pricing-caption - p 1 month free! - p Free copy of the Art of Blender + ul + li 100+ hours of high-quality training + li All the open movies files and tutorials + li Exclusive production insight & walk-throughs + li Sync your Blender settings across devices + li Share images & screenshots from within Blender + li Download 1500+ textures & HDRIs from Blender + li.special 1 month free + li.special Free copy of Art of Blender a.sign-up-now(href="https://store.blender.org/product/membership/") | Subscribe Now