<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="step-1 section--white sec-top-0"> <div class="container"> <div class="row vcentered-inline-container"> <div class="col-xs-12 col-md-7 valign step-1__templates"> <img src="http://freeblogs.ru/zummer/img/konrur.jpg" alt="Template" class="prezi-template prezi-template__marketing prezi-template--1"> </div> <div class="col-xs-12 col-sm-10 col-md-4 col-md-offset-1 valign"> <!-- Mobile tab nav --> <div class="mobile-tab-nav visible-xs visible-sm"> <a class="text-a-gold template-link template-link__marketing active" href="" data-group="marketing">Marketing</a> <a class="text-a-gold template-link template-link__sales" href="" data-group="sales">Sales</a><a class="text-a-gold template-link template-link__business" href="" data-group="business">Business</a> <a class="text-a-gold template-link template-link__education" href="" data-group="education">Education</a> </div> <h1 class="floating-number floating-number__step-1 text-gold hidden-xs hidden-sm">1</h1> <p class="capgold btm-6">Create</p> <h2 class="btm-18">Get started fast with templates</h2><p class="btm-30">We have a full library of beautiful presentations you can customize to make your own.</p> <!-- Desktop tab nav --><div class="hidden-xs hidden-sm"> <a class="text-a-gold template-link template-link__marketing active" href="" data-group="marketing">Marketing</a> <a class="text-a-gold template-link template-link__sales" href="" data-group="sales">Sales</a> <a class="text-a-gold template-link template-link__business" href="" data-group="business">Business</a> <a class="text-a-gold template-link template-link__education" href="" data-group="education">Education</a></div></div> </div> </div> </section> <section class="step-2 section--white sec-top-0"> <div class="container visible-md visible-lg"> <div class="row vcentered-inline-container"> <div class="col-xs-12 col-sm-10 col-md-4 col-md-offset-1 valign"> <h1 class="floating-number floating-number__step-2 text-orange hidden-xs hidden-sm">2</h1> <p class="caps text-orange btm-6">Present</p><h2 class="btm-18">Adapt on the fly</h2> <p class="btm-24">Instantly tailor your presentation for each audience—without flipping through slides.</p> <a href="/business/conversational-presenting/?click_source=step_2|learn_more|button||" class="btn-sm orange learn-more-cta">Learn more</a> </div> <section class="step-2 section--white sec-top-0"> <div class="container visible-md visible-lg"> <div class="row vcentered-inline-container"> <div class="col-xs-12 col-sm-10 col-md-4 col-md-offset-1 valign"> <h1 class="floating-number floating-number__step-2 text-orange hidden-xs hidden-sm">2</h1> <p class="caps text-orange btm-6">Present</p><h2 class="btm-18">Adapt on the fly</h2> <p class="btm-24">Instantly tailor your presentation for each audience—without flipping through slides.</p> <a href="/business/conversational-presenting/?click_source=step_2|learn_more|button||" class="btn-sm orange learn-more-cta">Learn more</a> </div> <div class="col-xs-12 col-md-7 valign text-center"> <!-- графика --> <div class="step-2__graphics"> <img class="img-responsive hidden-md hidden-lg" src="http://freeblogs.ru/zummer/img/konrur.jpg"/> </div> </div> </div> </div> </section>

.step-1, .step-2, .step-3 { text-align: left; } .step-1__templates { min-height: 575px; } .vcentered-inline-container:before{ content: ""; display: inline-block; vertical-align: middle; height: 100%; } .sec-top-0 { padding-top: 0; } .prezi-template__marketing, .prezi-template--1 { height: 450px; top: 96px; left: 18px; }