diff --git a/src/styles/_homepage.sass b/src/styles/_homepage.sass index fcd48a0f..80cbba11 100644 --- a/src/styles/_homepage.sass +++ b/src/styles/_homepage.sass @@ -818,10 +818,10 @@ section.pricing transform: scale(1) a.sign-up-now - +button($color-primary, 999em, true) + +button($color-primary, 3px, true) &:hover - +button($color-success, 999em, true) + +button($color-success, 3px, true) &.education .pricing-caption @@ -886,14 +886,14 @@ section.pricing transform: translateX(-50%) font-size: 1.2em - +button($color-primary, 999em) + +button($color-primary, 3px) padding: 5px 25px white-space: nowrap text-align: center &:hover .sign-up-now - +button($color-success, 999em, true) + +button($color-success, 3px, true) section.supported-by @@ -962,10 +962,9 @@ section.team padding: 4px opacity: 1 - width: 112px - height: 112px - margin-left: 15px - margin-right: 15px + width: 120px + height: 120px + margin: 7px 15px z-index: 0 position: relative transition: transform 100ms ease-in-out, background-color 100ms ease-in-out, opacity 100ms ease-in-out @@ -1004,14 +1003,14 @@ section.team margin: 0 padding: 0 position: absolute - top: -340px + top: -370px left: 50% transform: translateX(-50%) transition: opacity 180ms ease-in-out, top 150ms ease-out &.active - top: -330px + top: -370px opacity: 1 visibility: visible @@ -1038,6 +1037,6 @@ section.team .people-bio .bio - top: -200px + top: -250px &.active - top: -220px + top: -240px diff --git a/src/styles/_join.sass b/src/styles/_join.sass index 9a598f9f..bb60a43a 100644 --- a/src/styles/_join.sass +++ b/src/styles/_join.sass @@ -1,4 +1,5 @@ .navbar-backdrop.join + background-color: white +media-xs background-size: initial .join @@ -27,8 +28,9 @@ margin: 30px 0 50px 60px justify-content: flex-start - - li.special - color: $color-danger + color: $color-success font-weight: bold + + .page-section-container .page-card-side + padding: 60px 25px diff --git a/src/styles/_pages.sass b/src/styles/_pages.sass index 56ba0282..3d6f60be 100644 --- a/src/styles/_pages.sass +++ b/src/styles/_pages.sass @@ -81,15 +81,28 @@ background-color: white width: 100% +.page-triplet-container-fluid + &.dark + background-color: $color-background-nav + color: $color-text-light-primary + + section.page-card-header + h2, h2 a + color: white + + p.extra a + color: $color-text-light-primary + + .page-triplet-container +container-behavior padding: 25px 30px - .row, div[class^="col-md"] - +media-md - display: flex - +media-lg - display: flex + p.extra + padding: 25px 0 + text-align: center + a + color: $color-text-dark-primary .triplet-card width: 100% @@ -102,7 +115,6 @@ border-top-left-radius: 3px border-top-right-radius: 3px width: 100% - border-bottom: 3px solid $color-primary +img-responsive .triplet-card-info @@ -132,6 +144,8 @@ line-height: 1.5em color: $color-text-dark-primary flex: 1 + padding-left: 5px + padding-right: 5px .triplet-cta display: block @@ -335,9 +349,9 @@ $page-card-icon-size: 75px max-width: 100% .page-card-title - color: $color-info + color: white text-align: center - padding-bottom: 0 + padding-bottom: 25px &:after border: none @@ -431,16 +445,42 @@ a.page-card-cta background: linear-gradient(rgba(white, .3) 0%, transparent 60%) .join + span.text-background + +text-background(white, darken($color-primary, 30%), 2px, 5px 0) + + p + padding: 0 + margin-left: -10px + + ul + margin: 0 + padding: 0 + + li span.text-background + padding-left: 15px + position: relative + left: -10px + &:before + content: "·" + color: white + position: relative + left: -10px + #page-header + padding: 0 0 0 20px .page-title font: size: 2.8em + .page-title-summary font: style: normal size: 1.4em weight: 400 + .page-header-cta-container + margin: 0 + .page-card &:nth-child(even) background-color: white diff --git a/src/styles/_utils.sass b/src/styles/_utils.sass index b8769f45..50aca6ea 100644 --- a/src/styles/_utils.sass +++ b/src/styles/_utils.sass @@ -535,8 +535,8 @@ @mixin text-background($text-color, $background-color, $roundness, $padding) border-radius: $roundness padding: $padding - background-color: rgba($background-color, .9) - box-shadow: 0.5em 0 0 rgba($background-color, .9),-0.5em 0 0 rgba($background-color, .9) + background-color: $background-color + box-shadow: 0.5em 0 0 $background-color,-0.5em 0 0 $background-color box-decoration-break: clone color: $text-color diff --git a/src/templates/join.jade b/src/templates/join.jade index 09a4a43a..20312af1 100644 --- a/src/templates/join.jade +++ b/src/templates/join.jade @@ -11,7 +11,7 @@ meta(property="og:image", content="{{ url_for('static', filename='assets/img/bac | {% block header_backdrop %} .navbar-backdrop.join( - style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/background_andy_waking.jpg')}})") + style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/background_agent327_04.jpg')}})") | {% endblock %} | {% block page_overlay %} @@ -23,15 +23,21 @@ meta(property="og:image", content="{{ url_for('static', filename='assets/img/bac #page-container.join #page-header .container - .page-title Welcome to the Blender Cloud. + .page-title + span.text-background Welcome to the Blender Cloud. .page-title-summary - p Join us as we make the Agent 327 "Barbershop" scene + p + span.text-background 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 + li + span.text-background Exclusive production insight & walk-throughs + li + span.text-background High-quality assets ready to use + li + span.text-background All the open movies files & tutorials + li + span.text-background 100+ hours of training .page-header-cta-container a.page-header-cta(href="https://store.blender.org/product/membership/") @@ -43,70 +49,131 @@ meta(property="og:image", content="{{ url_for('static', filename='assets/img/bac #page-content + section.page-card-header + h2 + a(href="{{ url_for('main.training') }}") Training & Tutorials + .page-triplet-container.homepage .row .col-md-4 - .triplet-card(data-url="{{ url_for('main.open_projects') }}") + .triplet-card(data-url="https://cloud.blender.org/p/motion-graphics/") .triplet-card-thumbnail img( - alt="Open Projects", - src="{{ url_for('static', filename='assets/img/features/open_movies_02.jpg')}}") + alt="HDRI", + src="{{ url_for('static', filename='assets/img/features/training_motion_graphics.jpg')}}") .triplet-card-info - h3 Open Projects + h3 Motion Graphics p. - The iconic Blender Institute Open Movies, - featuring all the production files, assets, artwork, and never-seen-before content. - a.triplet-cta(href="{{ url_for('main.open_projects') }}") + A comprehensive guide to motion graphics techniques using Blender. + a.triplet-cta(href="https://cloud.blender.org/p/motion-graphics/") | LEARN MORE .col-md-4 - .triplet-card(data-url="{{ url_for('main.training') }}") + .triplet-card(data-url="https://cloud.blender.org/p/toon-character-workflow/") .triplet-card-thumbnail img( - alt="Training and Tutorials", - src="{{ url_for('static', filename='assets/img/features/training_02.jpg')}}") + alt="Textures", + src="{{ url_for('static', filename='assets/img/features/training_toon_character.jpg')}}") .triplet-card-info - h3 Training & Tutorials + h3 Toon Character Workflow p. - Character modeling, 3D printing, VFX, rigging and more. We offer - 12 complete training series with +100 hours of training. - a.triplet-cta(href="{{ url_for('main.training') }}") + Perfect for beginners, learn how to build a cartoon character from concept to finish. + a.triplet-cta(href="https://cloud.blender.org/p/toon-character-workflow/") | LEARN MORE .col-md-4 - .triplet-card(data-url="{{ url_for('main.services') }}") + .triplet-card(data-url="https://cloud.blender.org/p/gallery") .triplet-card-thumbnail img( - alt="Services and Tools", - src="{{ url_for('static', filename='assets/img/features/services_01.jpg')}}") + alt="Characters", + src="{{ url_for('static', filename='assets/img/features/training_bob_forest.jpg')}}") .triplet-card-info - h3 Services & Tools + h3 Art Walk-throughs p. - Create your personal projects, collaborate with other members, store - and sync your Blender settings across multiple workstations. - a.triplet-cta(href="{{ url_for('main.services') }}") + Follow artists through the creative process and techniques behind their work. + a.triplet-cta(href="https://cloud.blender.org/p/gallery") | LEARN MORE + .row + .col-md-8.col-md-offset-2 + p.extra. + Other trainings: + Blender for 3D Printing, + Game Asset Creation, + Character Modeling, + Character Animation, + Introduction + and + Advanced Rigging, + VFX Workflow, + Creature + and + Cartoon Character creation, + Advanced + Digital Painting + and + much more! + + + .page-triplet-container-fluid.dark( + style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/pattern_01.jpg')}})") + section.page-card-header + h2 + a(href="{{ url_for('main.open_projects') }}") Browse all the Open Movies + + .page-triplet-container.homepage + .row + .col-md-4 + .triplet-card(data-url="https://cloud.blender.org/p/cosmos-laundromat/") + .triplet-card-thumbnail + img( + alt="HDRI", + src="{{ url_for('static', filename='assets/img/features/open_movies_cosmos.jpg')}}") + .triplet-card-info + h3 Cosmos Laundromat + a.triplet-cta(href="https://cloud.blender.org/p/cosmos-laundromat/") + | LEARN MORE + + .col-md-4 + .triplet-card(data-url="https://cloud.blender.org/p/agent-327/") + .triplet-card-thumbnail + img( + alt="Textures", + src="{{ url_for('static', filename='assets/img/features/open_movies_agent_barbershop.jpg')}}") + .triplet-card-info + h3 Agent 327 + a.triplet-cta(href="https://cloud.blender.org/p/agent-327/") + | LEARN MORE + + .col-md-4 + .triplet-card(data-url="https://cloud.blender.org/p/caminandes-3/") + .triplet-card-thumbnail + img( + alt="Characters", + src="{{ url_for('static', filename='assets/img/features/open_movies_caminandes_llamigos.jpg')}}") + .triplet-card-info + h3 Caminandes + a.triplet-cta(href="https://cloud.blender.org/p/caminandes-3/") + | LEARN MORE + + .row + .col-md-8.col-md-offset-2 + p.extra. + Other open movies: + Elephants Dream, + Sintel, + Big Buck Bunny, + Tears of Steel, + Glass Half, + and + more. + section.page-card-header h2 Download 1000s of files and assets - .page-triplet-container.homepage .row - .col-md-4 - .triplet-card(data-url="{{ url_for('main.redir_hdri') }}") - .triplet-card-thumbnail - img( - alt="HDRI", - src="{{ url_for('static', filename='assets/img/features/hdri_01.jpg')}}") - .triplet-card-info - h3 HDRI - p. - Up to 16K and 24 EVs (extremely high) HDR images to light your renders. - a.triplet-cta(href="{{ url_for('main.redir_hdri') }}") - | LEARN MORE - .col-md-4 .triplet-card(data-url="{{ url_for('main.redir_textures') }}") .triplet-card-thumbnail @@ -121,6 +188,19 @@ meta(property="og:image", content="{{ url_for('static', filename='assets/img/bac a.triplet-cta(href="{{ url_for('main.redir_textures') }}") | LEARN MORE + .col-md-4 + .triplet-card(data-url="{{ url_for('main.redir_hdri') }}") + .triplet-card-thumbnail + img( + alt="HDRI", + src="{{ url_for('static', filename='assets/img/features/hdri_01.jpg')}}") + .triplet-card-info + h3 HDRI + p. + Up to 16K and 24 EVs (extremely high) HDR images to light your renders. + a.triplet-cta(href="{{ url_for('main.redir_hdri') }}") + | LEARN MORE + .col-md-4 .triplet-card(data-url="{{ url_for('main.redir_characters') }}") .triplet-card-thumbnail @@ -145,15 +225,14 @@ meta(property="og:image", content="{{ url_for('static', filename='assets/img/bac h2.page-card-title Exclusive Production Insights .page-card-summary p. - Watch the original authors of shots breaking it down into a detailed - explanation and share their insight in the production process. Watch - animation reviews, narrated timelapses, shot walk-throughs. + Watch the original authors of shots breaking them down and share their + insight in the production process. Watch animation reviews, + narrated timelapses, shot walk-throughs and more. .page-card-side .page-card-image - img( - alt="Exclusive Production Insights", - src="{{ url_for('static', filename='assets/img/features/animation_review_01.gif')}}") + video(autoplay, loop) + source(src="{{ url_for('static', filename='assets/img/features/animation_review_01.mp4')}}") section.page-card.right.services-projects @@ -334,7 +413,7 @@ meta(property="og:image", content="{{ url_for('static', filename='assets/img/bac 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 1 month free! a.sign-up-now(href="https://store.blender.org/product/membership/") | Subscribe Now @@ -370,24 +449,46 @@ meta(property="og:image", content="{{ url_for('static', filename='assets/img/bac span Amsterdam, The Netherlands .people-faces - .face(data-blenderhead='ton') + a.face( + href="https://twitter.com/tonroosendaal", + data-blenderhead='ton') img(alt="Ton", src="{{ url_for('static', filename='assets/img/people/ton.jpg')}}") - .face(data-blenderhead='francesco') + a.face( + href="https://twitter.com/fsiddi", + data-blenderhead='francesco') img(alt="Francesco", src="{{ url_for('static', filename='assets/img/people/francesco.jpg')}}") - .face(data-blenderhead='colin') - img(alt="Colin", src="{{ url_for('static', filename='assets/img/people/colin.jpg')}}") - .face(data-blenderhead='pablo') - img(alt="Pablo", src="{{ url_for('static', filename='assets/img/people/pablo.jpg')}}") - .face(data-blenderhead='andy') - img(alt="Andy", src="{{ url_for('static', filename='assets/img/people/andy.jpg')}}") - .face(data-blenderhead='hjalti') + a.face( + href="https://twitter.com/hjalti", + data-blenderhead='hjalti') img(alt="Hjalti", src="{{ url_for('static', filename='assets/img/people/hjalti.jpg')}}") - .face(data-blenderhead='sergey') + a.face( + href="https://twitter.com/colinlevy", + data-blenderhead='colin') + img(alt="Colin", src="{{ url_for('static', filename='assets/img/people/colin.jpg')}}") + a.face( + href="https://twitter.com/PabloVazquez_", + data-blenderhead='pablo') + img(alt="Pablo", src="{{ url_for('static', filename='assets/img/people/pablo.jpg')}}") + a.face( + href="https://twitter.com/artificial3d", + data-blenderhead='andy') + img(alt="Andy", src="{{ url_for('static', filename='assets/img/people/andy.jpg')}}") + a.face( + href="https://developer.blender.org/p/sergey/", + data-blenderhead='sergey') img(alt="Sergey", src="{{ url_for('static', filename='assets/img/people/sergey.jpg')}}") - .face(data-blenderhead='sybren') + a.face( + href="https://twitter.com/sastuvel", + data-blenderhead='sybren') img(alt="Sybren", src="{{ url_for('static', filename='assets/img/people/sybren.jpg')}}") - .face(data-blenderhead='beau') - img(alt="beau", src="{{ url_for('static', filename='assets/img/people/beau.jpg')}}") + a.face( + href="https://twitter.com/dfelinto", + data-blenderhead='dalai') + img(alt="dalai", src="{{ url_for('static', filename='assets/img/people/dalai.jpg')}}") + a.face( + href="https://twitter.com/dfelinto", + data-blenderhead='luca') + img(alt="luca", src="{{ url_for('static', filename='assets/img/people/luca.jpg')}}") .people-bio .bio#ton @@ -430,9 +531,14 @@ meta(property="og:image", content="{{ url_for('static', filename='assets/img/bac small Blender Cloud Developer span The Netherlands - .bio#beau - h3 Beau Dreier Gligoor - small Modeling. Shading. + .bio#dalai + h3 Dalai Felinto + small Blender Developer + span Brazil + + .bio#luca + h3 Luca Rood + small Blender Developer span The Netherlands .people-container.online @@ -441,16 +547,26 @@ meta(property="og:image", content="{{ url_for('static', filename='assets/img/bac span Contributing to Blender Cloud from all over the globe. .people-faces - .face(data-blenderhead='gleb') - img(alt="Gleb", src="{{ url_for('static', filename='assets/img/people/gleb.jpg')}}") - .face(data-blenderhead='david') + a.face( + href="https://twitter.com/davidrevoy", + data-blenderhead='david') img(alt="David", src="{{ url_for('static', filename='assets/img/people/david.jpg')}}") - .face(data-blenderhead='sebastian') + a.face( + href="https://twitter.com/s_koenig", + data-blenderhead='sebastian') img(alt="Sebastian", src="{{ url_for('static', filename='assets/img/people/sebastian.jpg')}}") - .face(data-blenderhead='jpbouza') + a.face( + href="https://twitter.com/gleb_alexandrov", + data-blenderhead='gleb') + img(alt="Gleb", src="{{ url_for('static', filename='assets/img/people/gleb.jpg')}}") + a.face( + href="https://twitter.com/the_mantissa", + data-blenderhead='midge') + img(alt="Midge", src="{{ url_for('static', filename='assets/img/people/midge.jpg')}}") + a.face( + href="https://twitter.com/jpbouza", + data-blenderhead='jpbouza') img(alt="Juan Pablo", src="{{ url_for('static', filename='assets/img/people/jpbouza.jpg')}}") - .face(data-blenderhead='bassam') - img(alt="Bassam", src="{{ url_for('static', filename='assets/img/people/bassam.jpg')}}") .people-bio .bio#gleb @@ -463,21 +579,21 @@ meta(property="og:image", content="{{ url_for('static', filename='assets/img/bac small Illustrator & Concept Artist span France - .bio#jpbouza - h3 Juan Pablo Bouza - small Rigging - span Argentina - - .bio#bassam - h3 Bassam Kurdali - small Rigging & Pipeline - span United States + .bio#midge + h3 Midge Sinnaeve + small Motion Graphics + span Belgium .bio#sebastian h3 Sebastian König small VFX span Germany + .bio#jpbouza + h3 Juan Pablo Bouza + small Rigging + span Argentina + section.page-card.oneofus. Join 2021 awesome people, subscribe to Blender Cloud now. @@ -487,14 +603,13 @@ meta(property="og:image", content="{{ url_for('static', filename='assets/img/bac img.logos(alt="Supported by", src="{{ url_for('static', filename='assets/img/support_logos.png') }}") section.page-card.subscribe( - style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/background_services.jpg')}});") + style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/pattern_bw_01.jpg')}})") .page-card-side h2.page-card-title - | Get inspiration, knowledge, and tools in one place. - .page-card-summary - | Join us for only $9.90/month! + | Support Blender, get inspiration, knowledge and tools in one place. a.page-card-cta( href="https://store.blender.org/product/membership/") + i.pi-heart-filled | Subscribe Now diff --git a/src/templates/layout.jade b/src/templates/layout.jade index 2324d889..df92412f 100644 --- a/src/templates/layout.jade +++ b/src/templates/layout.jade @@ -128,7 +128,7 @@ html(lang="en") li(class="dropdown libraries") a.navbar-item.dropdown-toggle( - href="#", + href="", data-toggle="dropdown", title="Libraries") span Libraries @@ -340,14 +340,14 @@ html(lang="en") .col-md-2.col-xs-6 ul.footer-social + li + a(href="facebook.com/blendercloudOfficial/", + title="Follow us on Facebook") + i.pi-social-facebook li a(href="https://twitter.com/Blender_Cloud", title="Follow us on Twitter") i.pi-social-twitter - li - a(href="mailto:cloudsupport@blender.org" - title="Support Email") - i.pi-email .col-md-2.col-xs-6 h4