Services page: move to bootstrap 4

This commit is contained in:
2018-08-31 13:52:40 +02:00
parent 68d09dc886
commit fcf715b5b1

View File

@@ -20,204 +20,198 @@ meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/ba
| {% endblock %} | {% endblock %}
| {% block body %} | {% block body %}
#page-container .jumbotron.jumbotron-overlay.text-white.mb-1(style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/services_projects.jpg')}})")
#page-header(style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/services_projects.jpg')}})") .container
.container .row
.page-title .col-md-8
| Blender Cloud Services .display-4.text-uppercase.font-weight-bold
.page-title-summary | Services
span.text-background .lead.
p. On Blender Cloud you can create and share personal projects, access our texture and HDRI
Blender Cloud is the creative hub for your projects, powered by Free and Open Source software. library (or create your own), keep track of your production, manage your renders and much more!
p. - var addon_text = 'Available through the <a href="{{ url_for(\'cloud.services\') }}#blender-cloud-add-on">Blender Cloud add-on</a>'
On Blender Cloud you can create and share personal projects, access our texture and HDRI section#blender-cloud-add-on.page-card
library (or create your own), keep track of your production, manage your renders and much more! .page-card-side
h2.page-card-title
| Blender Cloud add-on
.page-card-summary
p.
The Blender Cloud add-on provides access to most of our services directly within Blender.
p.
Use the add-on to share images online, submit renders to Flamenco or browse textures and HDRI libraries!
.navbar-backdrop-overlay hr
- var addon_text = 'Available through the <a href="{{ url_for(\'cloud.services\') }}#blender-cloud-add-on">Blender Cloud add-on</a>' small Blender Cloud add-on requires Blender 2.78 or newer
#page-content a.btn-success(
href="https://cloud.blender.org/r/downloads/blender_cloud-latest-addon.zip")
i.pi-download
| Download add-on &nbsp;<small>v</small> {{ config.BLENDER_CLOUD_ADDON_VERSION }}
section#blender-cloud-add-on.page-card .page-card-side
.page-card-side img(
h2.page-card-title src="{{ url_for('static', filename='assets/img/features/blender_cloud_addon_thumbnail.png')}}")
| Blender Cloud add-on
.page-card-summary
p.
The Blender Cloud add-on provides access to most of our services directly within Blender.
p.
Use the add-on to share images online, submit renders to Flamenco or browse textures and HDRI libraries!
hr section#blender-sync.page-card.right
.page-card-side
h2.page-card-title Blender Sync
.page-card-summary
| Save your settings once. Use them anywhere.
| Carry your Blender configuration with you,
| use our add-on to sync your keymaps and preferences.
hr
small Blender Sync is <strong>free</strong> for everyone! No subscription required.
small This add-on requires Blender 2.78 or newer.
small Blender Cloud add-on requires Blender 2.78 or newer .tip !{addon_text}
a.page-card-cta.download(
href="https://cloud.blender.org/r/downloads/blender_cloud-latest-addon.zip")
i.pi-download
| Download add-on &nbsp;<small>v</small> {{ config.BLENDER_CLOUD_ADDON_VERSION }}
.page-card-side
img(
src="{{ url_for('static', filename='assets/img/features/blender_cloud_addon_thumbnail.png')}}")
section#blender-sync.page-card.right
.page-card-side
h2.page-card-title Blender Sync
.page-card-summary
| Save your settings once. Use them anywhere.
| Carry your Blender configuration with you,
| use our add-on to sync your keymaps and preferences.
hr
small Blender Sync is <strong>free</strong> for everyone! No subscription required.
small This add-on requires Blender 2.78 or newer.
.tip !{addon_text}
a.page-card-cta( a.page-card-cta(
href="https://cloud.blender.org/blog/introducing-blender-sync") href="https://cloud.blender.org/blog/introducing-blender-sync")
| Learn More | Learn More
.page-card-side .page-card-side
img( img(
src="{{ url_for('static', filename='assets/img/features/sync_thumbnail.jpg')}}") src="{{ url_for('static', filename='assets/img/features/sync_thumbnail.jpg')}}")
section#texture-browser.page-card.right section#texture-browser.page-card.right
.page-card-side .page-card-side
h2.page-card-title Texture & HDRI Browser h2.page-card-title Texture & HDRI Browser
.page-card-summary .page-card-summary
p. p.
Access the <a href="https://cloud.blender.org/p/textures/">Blender Cloud Textures</a> Access the <a href="https://cloud.blender.org/p/textures/">Blender Cloud Textures</a>
library from within Blender using our exclusive add-on. library from within Blender using our exclusive add-on.
Create, manage and share <em>your own</em> texture libraries! Create, manage and share <em>your own</em> texture libraries!
.tip !{addon_text} .tip !{addon_text}
a.page-card-cta.js-watch-video.download( a.btn-success.js-watch-video(
href="https://www.youtube.com/watch?v=-srXYv2Osjw", href="https://www.youtube.com/watch?v=-srXYv2Osjw",
data-youtube-id="-srXYv2Osjw") data-youtube-id="-srXYv2Osjw")
i.pi-play i.pi-play
| Watch Video | Watch Video
.page-card-side .page-card-side
img( img(
src="{{ url_for('static', filename='assets/img/features/tex_library_thumbnail.jpg')}}") src="{{ url_for('static', filename='assets/img/features/tex_library_thumbnail.jpg')}}")
section#image-sharing.page-card.right section#image-sharing.page-card.right
.page-card-side .page-card-side
h2.page-card-title Image Sharing h2.page-card-title Image Sharing
.page-card-summary .page-card-summary
| Got a nice render, a Blender oddity, a cool screenshot? | Got a nice render, a Blender oddity, a cool screenshot?
| Share it instantly from within Blender to the Cloud, to the world! | Share it instantly from within Blender to the Cloud, to the world!
.tip !{addon_text} .tip !{addon_text}
a.page-card-cta.download.js-watch-video( a.btn-success.js-watch-video(
href="https://www.youtube.com/watch?v=yvtqeMBOAyk", href="https://www.youtube.com/watch?v=yvtqeMBOAyk",
data-youtube-id="yvtqeMBOAyk") data-youtube-id="yvtqeMBOAyk")
i.pi-play i.pi-play
| Watch Video | Watch Video
a.page-card-cta.outline( a.page-card-cta.outline(
href="https://cloud.blender.org/blog/introducing-image-sharing") href="https://cloud.blender.org/blog/introducing-image-sharing")
| Learn More | Learn More
.page-card-side .page-card-side
img( img(
src="{{ url_for('static', filename='assets/img/features/image_sharing_thumbnail.jpg')}}") src="{{ url_for('static', filename='assets/img/features/image_sharing_thumbnail.jpg')}}")
section#projects.page-card.right section#projects.page-card.right
.page-card-side .page-card-side
h2.page-card-title Private Projects h2.page-card-title Private Projects
.page-card-summary. .page-card-summary.
Create and manage your own personal projects. Create and manage your own personal projects.
Upload assets and collaborate with other Blender Cloud members. Upload assets and collaborate with other Blender Cloud members.
a.page-card-cta( a.page-card-cta(
href="https://cloud.blender.org/blog/introducing-private-projects") href="https://cloud.blender.org/blog/introducing-private-projects")
| Learn More | Learn More
.page-card-side .page-card-side
img( img(
src="{{ url_for('static', filename='assets/img/features/projects_thumbnail.jpg')}}") src="{{ url_for('static', filename='assets/img/features/projects_thumbnail.jpg')}}")
section#attract.page-card.right section#attract.page-card.right
.page-card-side .page-card-side
h2.page-card-title h2.page-card-title
| Attract | Attract
.page-card-summary. .page-card-summary.
Production-management software for your film, game, or commercial projects. Production-management software for your film, game, or commercial projects.
a.page-card-cta.download.js-watch-video( a.btn-success.js-watch-video(
href="https://www.youtube.com/watch?v=b9x1rlyyt_o", href="https://www.youtube.com/watch?v=b9x1rlyyt_o",
data-youtube-id="b9x1rlyyt_o") data-youtube-id="b9x1rlyyt_o")
i.pi-play i.pi-play
| Watch Video | Watch Video
a.page-card-cta( a.page-card-cta(
href="https://cloud.blender.org/blog/attract-and-flamenco-public-beta", href="https://cloud.blender.org/blog/attract-and-flamenco-public-beta",
title="Learn more about Attract") title="Learn more about Attract")
| Learn More | Learn More
.page-card-side .page-card-side
img( img(
src="{{ url_for('static', filename='assets/img/features/attract_thumbnail.jpg')}}") src="{{ url_for('static', filename='assets/img/features/attract_thumbnail.jpg')}}")
section#flamenco.page-card.right section#flamenco.page-card.right
.page-card-side .page-card-side
h2.page-card-title h2.page-card-title
| Flamenco | Flamenco
.page-card-summary. .page-card-summary.
Take control of your computing infrastructure and get things done. Take control of your computing infrastructure and get things done.
a.page-card-cta.download.js-watch-video( a.btn-success.js-watch-video(
href="https://www.youtube.com/watch?v=7cnFKhsM67Q", href="https://www.youtube.com/watch?v=7cnFKhsM67Q",
data-youtube-id="7cnFKhsM67Q") data-youtube-id="7cnFKhsM67Q")
i.pi-play i.pi-play
| Watch Video | Watch Video
a.page-card-cta( a.page-card-cta(
href="https://flamenco.io", href="https://flamenco.io",
title="Learn more about Flamenco") title="Learn more about Flamenco")
| Learn More | Learn More
.page-card-side .page-card-side
img( img(
src="{{ url_for('static', filename='assets/img/features/flamenco_thumbnail.jpg')}}") src="{{ url_for('static', filename='assets/img/features/flamenco_thumbnail.jpg')}}")
| {% if not current_user.has_role('subscriber') %} | {% if not current_user.has_role('subscriber') %}
section.page-card.subscribe( section.page-card(
style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/pattern_01.jpg')}})") style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/pattern_01.jpg')}})")
.page-card-side .page-card-side
h2.page-card-title
| All of this, plus hours of training and production assets. h2.page-card-title
.page-card-summary | All of this, plus hours of training and production assets.
| Join us for only $9.90/month!
a.page-card-cta( .page-card-summary.text-white
href="https://store.blender.org/product/membership/") | Join us for only $9.90/month!
| Subscribe Now
| {% endif %} a.page-card-cta(href="https://store.blender.org/product/membership/")
| Subscribe Now
| {% endif %}
| {% endblock %} | {% endblock %}
| {% block footer_scripts %} | {% block footer_scripts %}
script. script.
// Click anywhere in the page to hide the overlay // Hide the video overlay.
function hideOverlay() { function hideOverlay() {
$('#page-overlay.video').removeClass('active'); $('#page-overlay.video').removeClass('active');
$('#page-overlay.video .video-embed').html(''); $('#page-overlay.video .video-embed').html('');
} }
// Click anywhere in the page or hit Esc to hide the overlay.
$(document).click(function() { $(document).click(function() {
hideOverlay(); hideOverlay();
}); });
@@ -229,12 +223,12 @@ script.
}); });
$('a.js-watch-video').click(function(e){ $('a.js-watch-video').click(function(e){
var videoId = $(this).attr('data-youtube-id');
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
$('#page-overlay.video').addClass('active'); $('#page-overlay.video').addClass('active');
var videoId = $(this).attr('data-youtube-id');
$('#page-overlay .video-embed').html('<iframe src="https://www.youtube.com/embed/' + videoId +'?rel=0&amp;showinfo=0;autoplay=1" frameborder="0" allowfullscreen></iframe>') $('#page-overlay .video-embed').html('<iframe src="https://www.youtube.com/embed/' + videoId +'?rel=0&amp;showinfo=0;autoplay=1" frameborder="0" allowfullscreen></iframe>')
}); });