openstackweb/themes/openstack/templates/AutomotiveLandingPage.ss
2014-10-31 16:21:41 -03:00

811 lines
40 KiB
Scheme
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>OpenStack | Enterprise Solutions | Top 10 Auto Manufacturer</title>
<!-- Bootstrap Core CSS -->
<link href="/themes/openstack/css/landing-pages/auto/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="/themes/openstack/css/landing-pages/auto/styles.css" rel="stylesheet">
<!-- Fonts -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<% include Analytics %>
</head>
<body>
<!-- Header -->
<div class="intro-header">
<!-- Header Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="//openstack.org"></a>
<span class="enterprise-title">Enterprise Solutions</span>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="//openstack.org" class="main-site-link">Main Site <i class="fa fa-caret-right"></i></a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="col-lg-8 col-sm-8">
<div class="intro-message">
<h1>Top 10 Automaker Turning Customer Insights Into Action with OpenStack</h1>
<h3>At 1/10th the Cost of Legacy Solution</h3>
</div>
</div>
<div class="col-lg-4 col-sm-4">
<div class="download-container">
<div class="download-text">Download the white paper</div>
<a href="#" class="download-btn" data-toggle="modal" data-target="#downloadModal"><i class="fa fa-arrow-circle-down"></i> Download</a>
</div>
</div>
</div>
</div>
<!-- /.container -->
<div class="hero-bottom">
<div class="container">
<div class="row">
<div class="col-lg-5">
<ul class="list-inline filters">
<li>
<i class="fa fa-car fa-2x"></i><span>Automotive</span>
</li>
<li>
<i class="fa fa-map-marker fa-2x"></i><span>Worldwide</span>
</li>
<li>
<i class="fa fa-user fa-2x"></i><span>20,000+</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /.intro-header -->
<!-- Page Content -->
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-12">
<p class="story-text">
The auto industry is projected to be the second largest generator of data by next year. One innovative manufacturer saw the opportunity to leverage massive amounts of data telematics produced by cars and drivers to plan new features and gain competitive advantage.
</p>
</div>
</div>
<div class="row story-steps">
<div class="col-lg-4 col-sm-4">
<div class="row">
<div class="col-lg-12 story-img">
<img class="img-responsive" src="/themes/openstack/images/landing-pages/auto/story-car-2x.png" alt="A Huge Need">
</div>
<div class="col-lg-10">
<h2>A Huge Need</h2>
<p>
Collect, store &amp; analyze petabytes of data globally from millions of vehicle sensors, customers, dealers and social media.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-4 ">
<div class="row">
<div class="col-lg-12 story-img">
<img class="img-responsive" src="/themes/openstack/images/landing-pages/auto/story-appliance-2x.png" alt="A First Attempt">
</div>
<div class="col-lg-10">
<h2>A First Attempt</h2>
<p>
Commercial legacy appliance costing in excess of $1.2 Million could not handle the workload.
</p>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-4 ">
<div class="row">
<div class="col-lg-12 story-img">
<img class="img-responsive" src="/themes/openstack/images/landing-pages/auto/story-solution-2x.png" alt="The Solution">
</div>
<div class="col-lg-10">
<h2>The Solution</h2>
<p>
$125K OpenStack cluster set to scale from POC to 10-rack system in 6 months, easily handling complex data analysis.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<div class="content-section-b marketplace-row">
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-3">
<h3>
Getting Expert Help
</h3>
</div>
<div class="col-lg-5 col-sm-5">
<p>
The company teamed with <a href="//www.openstack.org/marketplace/consulting/Solinea/solinea-consulting" class="vendor-link">Solinea</a>, a leading OpenStack software and services company, to build their OpenStack Cloud. Find the right partner for your project in the OpenStack Marketplace.
</p>
</div>
<div class="col-lg-3 col-sm-3">
<a href="//www.openstack.org/marketplace/" class="marketplace-btn">OpenStack Marketplace</a>
</div>
</div>
</div>
</div>
<!-- /.content-section-b -->
<div class="content-section-a steps-section">
<div class="container">
<div class="row section-title-center">
<h4 class="above">Implementing OpenStack</h4>
<h1>Building An Enterprise Data Cloud In Under 6 Months</h1>
</div>
<div class="row">
<div class="col-lg-7 col-sm-7">
<h2 class="section-heading"><span class="count">1</span>The P.O.C</h2>
<p class="lead">Proving The System</p>
<p>
They began with a small proof of concept (POC) that would validate the car cloud on OpenStack comparing use cases against the companys legacy appliance. The POC started by defining metrics and KPIs to set quantifiable objectives that would help make the case to senior executives.
</p>
<p>
In three short weeks the team built the cloud and tested it with several practical use cases, including in-car mapping applications and back-end big data analytics with telematics data loaded into Hadoop.
</p>
</div>
<div class="col-lg-5 col-sm-5">
<img class="img-responsive cost-savings-img" src="/themes/openstack/images/landing-pages/auto/cost-savings.svg" onerror="this.onerror=null; this.src=img/cost-savings.png" alt="OpenStack Cost Savings">
</div>
</div>
<!-- End POC Section -->
<hr>
<div class="row">
<div class="col-lg-7 col-sm-7 bake-off-text">
<h2 class="section-heading"><span class="count">2</span>The Bake Off</h2>
<p class="lead">Quantifiable Results</p>
<p>
During the test, the team loaded and updated mapping information in real time from vehicles to the cloud infrastructure. They also completed comparison tests to demonstrate the ability to scale and meet fluctuating workloads in a distributed environment. The automotive company preloaded vehicle telematics data into Hadoop, then transformed the data via map reduce jobs, and ran several analytics use cases to validate the accuracy and performance.
</p>
<p>
The comparison between the OpenStack car cloud and the companys legacy appliance was dramatic. In the use case with telematics data and Hadoop, the performance on the OpenStack car cloud clocked in at 40 minutes (before optimization), while the same job on the legacy appliance was unable to compute the function.
</p>
</div>
<div class="col-lg-5 col-sm-5 bake-off-img-wrapper">
<img class="img-responsive bake-off-img" src="/themes/openstack/images/landing-pages/auto/bake-off.svg" onerror="this.onerror=null; this.src=img/bake-off.png" alt="OpenStack vs Legacy Appliance">
</div>
</div>
<!-- End Bake Off Section -->
<hr>
<div class="row">
<div class="col-lg-7 col-sm-7">
<h2 class="section-heading"><span class="count">3</span>Final Deployment</h2>
<p class="lead">Planned Out Over Three Phases</p>
<h5>Phase 1</h5>
<p>
Building out a production infrastructure with big data analytics for existing applications on a single rack consisting of 10 compute nodes, 48 TBs of block storage and 72 TBs of object storage.
</p>
<h5>Phase 2</h5>
<p>
Expand solution to focus on big data analytics for production vehicle telematics and in-car services in limited regions, upgrading the architecture and expanding the car cloud with seven racks consisting of 64 compute nodes, 181 TBs of block storage and 859 TBs of object storage.
</p>
<h5>Phase 3</h5>
<p>
Expanding the car cloud globally with a focus on in-car services with 26 racks consisting of 192 compute nodes, 1 PB of block storage and 5 PBs of object storage.
</p>
</div>
<div class="col-lg-5 col-sm-5">
<img class="img-responsive phases-img" src="/themes/openstack/images/landing-pages/auto/three-phases.svg" onerror="this.onerror=null; this.src=img/three-phases.png" alt="OpenStack Deployment">
</div>
</div>
<!-- End Final Deployment Section -->
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
<!-- End Steps Section -->
<!-- Resulting Platform -->
<div class="content-section-c platform-wrapper">
<div class="container">
<div class="row">
<div class="row platform-title-center">
<h4 class="above">The Resulting Platform</h4>
<h1>Car Cloud Turns Big Data Into Smart Insights</h1>
<p>
<img class="platform img-responsive" src="/themes/openstack/images/landing-pages/auto/platform.svg" onerror="this.onerror=null; this.src=img/platform.png" alt="OpenStack Car Cloud Platform">
<img class="platform-vertical img-responsive" src="/themes/openstack/images/landing-pages/auto/platform-vertical.svg" onerror="this.onerror=null; this.src=img/platform-vertical.png" alt="OpenStack Car Cloud Platform">
</p>
</div>
</div>
</div>
</div>
<!-- End Resulting Platform -->
<!-- Components Section -->
<div class="content-section-a components-wrapper">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>OpenStack Components Used</h2>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-sm-6">
<div class="row">
<div class="col-lg-3 col-sm-3">
<a href="//www.openstack.org/software/openstack-compute/" class="component-icon">
<img src="/themes/openstack/images/landing-pages/auto/compute-icon.svg" onerror="this.onerror=null; this.src=img/compute-icon.png" alt="OpenStack Compute"/>
</a>
</div>
<div class="col-lg-9 col-sm-9">
<h4><a href="//www.openstack.org/software/openstack-compute/">Compute (Codenamed Nova)</a></h4>
<p>
The OpenStack cloud operating system enables enterprises and service providers to offer on-demand computing resources, by provisioning and managing large networks of virtual machines.
</p>
<p>
<a href="//www.openstack.org/software/openstack-compute/">Learn More ></a>
</p>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-6">
<div class="row">
<div class="col-lg-3 col-sm-3">
<a href="//www.openstack.org/software/openstack-storage/" class="component-icon">
<img src="/themes/openstack/images/landing-pages/auto/object-storage-icon.svg" onerror="this.onerror=null; this.src=img/object-storage-icon.png" alt="OpenStack Object Storage">
</a>
</div>
<div class="col-lg-9 col-sm-9">
<h4><a href="//www.openstack.org/software/openstack-storage/">Object Storage (Swift)</a></h4>
<p>
OpenStack provides redundant, scalable object storage using clusters of standardized servers capable of storing petabytes of data
</p>
<p>
<a href="//www.openstack.org/software/openstack-storage/">Learn More ></a>
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-sm-6">
<div class="row">
<div class="col-lg-3 col-sm-3">
<a href="//www.openstack.org/software/openstack-shared-services/" class="component-icon">
<img src="/themes/openstack/images/landing-pages/auto/shared-services-icon.svg" onerror="this.onerror=null; this.src=img/shared-services-icon.png" alt="OpenStack Shared Services">
</a>
</div>
<div class="col-lg-9 col-sm-9">
<h4><a href="//www.openstack.org/software/openstack-shared-services/">Shared Services</a></h4>
<p>
OpenStack has shared services such as Identity, Image management, Orchestration and a Dashboard that provide a unified user experience as they interact with different cloud resources.
</p>
<p>
<a href="//www.openstack.org/software/openstack-shared-services/">Learn More ></a>
</p>
</div>
</div>
</div>
<div class="col-lg-6 col-sm-6">
<div class="row">
<div class="col-lg-3 col-sm-3">
<a href="//www.openstack.org/software/openstack-storage/" class="component-icon">
<img src="/themes/openstack/images/landing-pages/auto/block-storage-icon.svg" onerror="this.onerror=null; this.src=img/block-storage-icon.png" alt="OpenStack Block Storage">
</a>
</div>
<div class="col-lg-9 col-sm-9">
<h4><a href="//www.openstack.org/software/openstack-storage/">Block Storage (Cinder)</a></h4>
<p>
OpenStack provides persistent block level storage devices for use with OpenStack compute instances.
</p>
<p>
<a href="//www.openstack.org/software/openstack-storage/">Learn More ></a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Components Section -->
<!-- Download and Newsletter -->
<div class="content-section-a action-wrapper">
<div class="container">
<div class="row">
<div class="col-lg-6 col-sm-6">
<div class="download-wrapper">
<h3>Download the white paper.</h3>
<p>
Read the complete white paper that details the success this enterprise company saw when implementing OpenStack with Hadoop, including their phased rollout and insights to achieving adoption.
</p>
<p class="file-info">
<a href="#" data-toggle="modal" data-target="#downloadModal">Top10AutoWhitePaper.PDF | 1.4MB</a>
</p>
<a href="#" class="btn" data-toggle="modal" data-target="#downloadModal"><i class="fa fa-arrow-circle-down"></i> Download</a>
</div>
</div>
<div class="col-lg-6 col-sm-6">
<div class="newsletter-wrapper">
<form action="//openstack.us1.list-manage.com/subscribe/post?u=d7c523fd1a0dd18c4ccfcc508&amp;id=092d3d4637" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="mc-field-group form-group">
<h3>Join our mailing list.</h3>
<p>
Get up to date info about OpenStack and future user stories.
</p>
<input type="email" value="" name="EMAIL" class="required email newsletter-input" id="mce-EMAIL" placeholder="your@email.com">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_d7c523fd1a0dd18c4ccfcc508_092d3d4637" tabindex="-1" value=""></div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button btn subscribe-btn">
</div>
</form>
<!-- <h3>Join our mailing list.</h3>
<p>
Get up to date info about OpenStack and future user stories.
</p>
<form role="form">
<div class="form-group">
<input type="email" class="newsletter-input" id="NewsletterSignUp" placeholder="your@email.com">
</div>
<a href="#" class="btn">Subscribe <i class="fa fa-arrow-circle-right"></i></a>
</form> -->
</div>
</div>
</div>
</div>
</div>
<!-- End Download and Newsletter -->
<!-- Featured Content -->
<div class="content-section-c featured-wrapper">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>Featured Enterprise Content</h2>
<p>
Disney, Wells Fargo, Bloomberg and so many other enterprise companies are already using OpenStack. Here are a few of them explaining why they chose OpenStack and how its benefiting them.
</p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-4">
<a href="#" data-toggle="modal" data-target="#VideoModalDisney">
<div class="video-wrapper">
<div class="play-button">
<img src="/themes/openstack/images/landing-pages/auto/play-button.png">
</div>
<div class="video-overlay">
<div class="small-play-button">
<img src="/themes/openstack/images/landing-pages/auto/play-button.png">
</div>
<p>
Chris Launey of Walt Disney speaks with Jonathan about how he is using OpenStack to help empower technology in the workplace.
</p>
</div>
<img class="video-image" src="/themes/openstack/images/landing-pages/auto/video-disney.jpg" alt="Disney Talking About OpenStack">
</div>
</a>
</div>
<div class="col-lg-4 col-sm-4">
<a href="#" data-toggle="modal" data-target="#VideoModalWellsFargo">
<div class="video-wrapper">
<div class="play-button">
<img src="/themes/openstack/images/landing-pages/auto/play-button.png">
</div>
<div class="video-overlay">
<div class="small-play-button">
<img src="/themes/openstack/images/landing-pages/auto/play-button.png">
</div>
<p>
Glenn Ferguson of Wells Fargo joins Jonathan to discuss their relationship with OpenStack.
</p>
</div>
<img class="video-image" src="/themes/openstack/images/landing-pages/auto/video-wellsfargo.jpg" alt="Wells Fargo Talking About OpenStack">
</div>
</a>
</div>
<div class="col-lg-4 col-sm-4">
<a href="#" data-toggle="modal" data-target="#VideoModalBloomberg">
<div class="video-wrapper">
<div class="play-button">
<img src="/themes/openstack/images/landing-pages/auto/play-button.png">
</div>
<div class="video-overlay">
<div class="small-play-button">
<img src="/themes/openstack/images/landing-pages/auto/play-button.png">
</div>
<p>
We review how Bloomberg designed our stack to be fully active-active highly available and share some of our experiences operating our clouds.
</p>
</div>
<img class="video-image" src="/themes/openstack/images/landing-pages/auto/video-bloomberg.jpg" alt="Bloomberg Talking About OpenStack">
</div>
</a>
</div>
</div>
</div>
</div>
<!-- End Featured Content -->
<!-- Marketplace and Events -->
<div class="banner">
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-6">
<div class="marketplace-column">
<h2>Need an Enterprise Solution?</h2>
<p>
The OpenStack Marketplace will help you make an informed decision, whether you're building a cloud, looking to use one by the hour, or pursuing a hybrid model.
</p>
<ul>
<li class="training">Training</li>
<li class="distros">Distros</li>
<li class="consulting">Consulting</li>
<li class="public-cloud">Public Cloud</li>
<li class="drivers">Drivers</li>
<li class="hosted-cloud">Hosted Private Cloud</li>
</ul>
<a href="//www.openstack.org/marketplace/" class="marketplace-btn blue">OpenStack Marketplace</a>
</div>
</div>
<div class="col-lg-8 col-sm-6">
<div class="events-wrapper">
<div class="row">
<div class="col-lg-12 col-sm-12">
<h2>You Can Also Find Us At Our Upcoming Enterprise Events</h2>
</div>
</div>
<div class="row events">
<div class="col-lg-6">
<a href="http://www.interop.com/newyork/scheduler/session/introduction-to-openstack-enterprise-boot-camp">
<img class="event-logo" src="/themes/openstack/images/landing-pages/auto/cloud-connect-logo.png" alt="OpenStack at Cloud Connect">
<span>OpenStack: Enterprise Boot Camp</span>
<span>September 30, 2014 in New York</span>
</a>
</div>
<div class="vert-line"></div>
<div class="col-lg-6">
<a href="/summit/">
<img class="event-logo paris" src="/themes/openstack/images/landing-pages/auto/paris-logo.png" alt="OpenStack Summit in Paris">
<span>OpenStack Summit</span>
<span>November 3 - 7, 2014 in Paris</span>
</a>
</div>
</div>
<div class="row more-events">
<hr>
<div class="col-lg-3">
<h4>More Events:</h4>
</div>
<div class="col-lg-9">
<ul>
<li><a href="http://www.gartner.com/technology/symposium/orlando/">Gartner Symposium/ITExpo</a>, October 5-9 in Orlando, FL</li>
<li><a href="http://en.futurecom.com.br/index.php">Futurecom</a>, October 13-16 in Sao Paolo, Brasil</li>
<li><a href="http://www.gartner.com/technology/summits/na/data-center/">Gartner Data Center Conference</a>, December 2-5, 2014 in Las Vegas, NV</li>
</ul>
</div>
</row>
</div>
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.banner -->
<!-- End Marketplace and Events -->
<!-- Footer -->
<footer>
<div class="container">
<div class="row footer-links">
<div class="col-lg-12 col-sm-12 footer-logo-wrapper-small">
<img class="footer-logo" src="/themes/openstack/images/landing-pages/auto/footer-logo.png" alt="OpenStack">
</div>
</div>
<div class="row footer-links">
<div class="col-lg-5 col-sm-12">
<ul class="list-inline right">
<li>
<a href="#home">Main Site</a>
</li>
<li>
<a href="http://www.openstack.org/software/">Software</a>
</li>
<li>
<a href="http://www.openstack.org/community/">Community</a>
</li>
<li>
<a href="http://www.openstack.org/foundation/">Foundation</a>
</li>
</ul>
</div>
<div class="col-lg-2 col-sm-2 footer-logo-wrapper">
<img class="footer-logo" src="/themes/openstack/images/landing-pages/auto/footer-logo.png" alt="OpenStack">
</div>
<div class="col-lg-5 col-sm-12">
<ul class="list-inline left">
<li>
<a href="http://www.openstack.org/blog/">Blog</a>
</li>
<li>
<a href="https://wiki.openstack.org/wiki/Main_Page">Wiki</a>
</li>
<li>
<a href="http://docs.openstack.org">Documentation</a>
</li>
<li>
<a href="https://www.openstack.org/profile/">Profile</a>
</li>
</ul>
</div>
<div class="col-lg-12 col-sm-12">
<p class="copyright text-muted small">
The OpenStack project is provided under the Apache 2.0 license. Openstack.org is powered by <a href="http://rackspace.com">Rackspace Cloud Computing</a>.
</p>
</div>
</div>
</div>
</footer>
<!-- Download Modal -->
<div class="modal fade" id="downloadModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Download</h4>
</div>
<div class="modal-body">
<p class="download-text">
<i class="fa fa-file-pdf-o fa-4x"></i>
Read the complete white paper that details the success this enterprise company saw when implementing OpenStack with Hadoop, including their phased rollout and insights to achieving adoption.
</p>
<a href="//openstack.org/assets/pdf-downloads/openstack-automotive-case-study.pdf" class="download-btn"><i class="fa fa-arrow-circle-down fa-2x"></i> Download This White Paper</a>
<hr>
<p>
<!-- Begin MailChimp Signup Form -->
<!-- <link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css"> -->
<div id="mc_embed_signup">
<form action="//openstack.us1.list-manage.com/subscribe/post?u=d7c523fd1a0dd18c4ccfcc508&amp;id=092d3d4637" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="mc-field-group form-group">
<h3>Join our mailing list.</h3>
<p>
Get up to date info about OpenStack and future user stories.
</p>
<input type="email" value="" name="EMAIL" class="required email newsletter-input" id="mce-EMAIL" placeholder="your@email.com">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_d7c523fd1a0dd18c4ccfcc508_092d3d4637" tabindex="-1" value=""></div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button btn subscribe-btn">
</div>
</form>
</div>
<!-- <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script> -->
<!--End mc_embed_signup-->
<!-- <form role="form">
<div class="form-group">
<h3>Join our mailing list.</h3>
<p>
Get up to date info about OpenStack and future user stories.
</p>
<input type="email" class="newsletter-input" id="NewsletterSignUp" placeholder="your@email.com">
<a href="#" class="btn subscribe-btn">Subscribe <i class="fa fa-arrow-circle-right"></i></a>
</div>
</form> -->
</p>
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- End Download Modal -->
<!-- Video 1 Modal -->
<div class="modal fade" id="VideoModalDisney">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Featured Video</h4>
</div>
<div class="modal-body">
<p class="download-text">
Day 1 OpenStack Keynote - Disney
</p>
<div id="DisneyVideo"></div>
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- End Video 1 Modal -->
<!-- Video 2 Modal -->
<div class="modal fade" id="VideoModalWellsFargo">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Featured Video</h4>
</div>
<div class="modal-body">
<p class="download-text">
OpenStack User Case Study: Wells Fargo
</p>
<div id="WellsFargoVideo"></div>
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- End Video 2 Modal -->
<!-- Video 3 Modal -->
<div class="modal fade" id="VideoModalBloomberg">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Featured Video</h4>
</div>
<div class="modal-body">
<p class="download-text">
Building Robust Clouds at Bloomberg
</p>
<div id="BloombergVideo"></div>
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- End Video 3 Modal -->
<!-- jQuery Version 1.11.0 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="/themes/openstack/javascript/landing-pages/bootstrap.min.js"></script>
<script type = 'text/javascript'>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var DisneyPlayer;
var WellsFargoPlayer;
var BloombergPlayer;
function onYouTubeIframeAPIReady() {
DisneyPlayer = new YT.Player('DisneyVideo', {
height: '315',
width: '560',
videoId: 'SREEnNQ6zqg'
});
WellsFargoPlayer = new YT.Player('WellsFargoVideo', {
height: '315',
width: '560',
videoId: 'SKsZGHZio9M'
});
BloombergPlayer = new YT.Player('BloombergVideo', {
height: '315',
width: '560',
videoId: 'OItLD8F1H9A'
});
$('.modal').on('hidden.bs.modal', function (e) {
BloombergPlayer.stopVideo();
WellsFargoPlayer.stopVideo();
DisneyPlayer.stopVideo();
});
}
$(function() {
$('#downloadModal').on('shown.bs.modal', function (e) {
$('.mc-field-group input').focus();
});
});
</script>
</body>
</html>