<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> <div class="wrapper contato"> <header class="col-md-2 navbar-fixed-top"> <div class="sidebar-nav row"> <div class="brand-centered"> <a class="navbar-brand" href="http://bootsnipp-env.elasticbeanstalk.com/iframe/qgj99"> <h1>Logo</h1> </a> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <span class="visible-xs navbar-brand">Sidebar menu</span> </div> <div class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/qgj99">Home</a></li> <li><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/1KXgV">Sobre</a></li> <li><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/mvlmN">Serviços</a></li> <li class="active"><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/rvOz6">Contato</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> </header> <section class="col-md-offset-2 col-md-10 contact-div"> <h1>Contato</h1> <div class="wrapper"> <div class="flip"> <div id="form-card"> <div class="inner front"> <fieldset> <div class="col-md-6"> <div class="form-group textarea"> <div class="form-group message"> <textarea class="wpcf7-form-control wpcf7-textarea form-control message form-control" id="message" name="message" rows="4" maxlength="3000" aria-invalid="false">Mensagem</textarea> </div> </div> </div> <div class="col-md-6"> <div class="form-subject"> <div class="form-group"> <input type="text" class="form-control" id="name" placeholder="Nome"> </div> <div class="form-group"> <input type="email" class="form-control" id="email" placeholder="E-mail"> </div> <div class="form-group"> <button type="submit" class="btn btn-default" value="Enviar">Submit</button> </div> </div> </div> </fieldset> </div> <div class="inner back jumbotron"> <div class="content"> blz</div> </div> </div> </div> </div> </section> <footer></footer> </div>

header, section.grids{ max-height:100vh; overflow-y:hidden; } .grids, .grids .row { height: 100vh; background:#000; } .brand-centered { display: block; position: relative; /* width: 100%; */ height: 40vh; line-height: 1em; margin: 0; font-size: 12px; float: none; } a.navbar-brand { position: absolute; top: 0; left: 0; /* bottom: 0; */ /* right: 0; */ /* background: #fff; */ width: 100%; padding: 30px; line-height: 1em; text-align: center; vertical-align: center; height: 100%; text-transform: uppercase; color: #fff; /*background: url('http://bcsilva.com/images/logo-bcsilva.png') no-repeat center center;*/ background: url('http://placehold.it/350x150') no-repeat center center; background-size: contain; } .brand-centered {} .navbar.navbar-default { height: 60vh; } .navbar-collapse.collapse.sidebar-navbar-collapse, ul.nav.navbar-nav { height: 100% !important; } .sidebar-nav .navbar li{ height:25%; } .sidebar-nav .navbar li a, .sidebar-nav .navbar li span{ width: 100%; height: 100%; font-size: 3rem; padding-left: 1.5em; /* display: block; */ /* line-height: 100%; */ display: flex; align-items: center; text-align: left; } a.navbar-brand h1{ visibility: hidden; } section.col-md-offset-2.col-md-10.contact-div { height: 100vh; background-image:url('http://67.media.tumblr.com/305c8110258b2469fb056c28c0ac1638/tumblr_ng9atadNu91tf8vylo1_500.png'); background-repeat:no-repeat; background-position:center center; background-size:cover; position:relative; } section.col-md-offset-2.col-md-10.contact-div>h1{ position:absolute; left:20px; top:20px; color:#fff; text-transform: uppercase; } section.col-md-offset-2.col-md-10.contact-div .wrapper { position:absolute; top:50%; left:50%; width: 50%; height: 45%; margin:-15% 0 0 -25%; } section.col-md-offset-2.col-md-10.contact-div .wrapper .flip{ width:100%; height:100%; } section.col-md-offset-2.col-md-10.contact-div .wrapper #form-card{ background-size:cover; width:100%; height:100%; } section.col-md-offset-2.col-md-10.contact-div .wrapper #form-card .inner.front{ background: url('http://www.publicdomainpictures.net/pictures/60000/velka/stripes-orange-blue-background.jpg') no-repeat center center; width: 100%; height:100%; padding:22px; } section.col-md-offset-2.col-md-10.contact-div .wrapper #form-card .inner.back{ background: #666; width: 100%; height:100% } section.col-md-offset-2.col-md-10.contact-div .wrapper #form-card .inner fieldset{ width:100%; background: #fff; height:100%; margin:0; } section.col-md-offset-2.col-md-10.contact-div .wrapper #form-card .inner fieldset, section.col-md-offset-2.col-md-10.contact-div .wrapper #form-card .inner .col-md-6, section.col-md-offset-2.col-md-10.contact-div .wrapper #form-card .inner .form-group.textarea section.col-md-offset-2.col-md-10.contact-div .wrapper #form-card .inner .form-group.message { height:100%; margin:0; } section.col-md-offset-2.col-md-10.contact-div .wrapper #form-card .inner .col-md-6{ display:table; vertical-align:middle; } section.col-md-offset-2.col-md-10.contact-div .wrapper #form-card .inner .form-group.textarea textarea#message { height: 100%; } textarea#message { display: block; height: 100% !important; resize: none; border-radius: 0; } .form-group.textarea, .form-group.message { height: 100%; } .form-group.message{ padding-top:15px; padding-bottom:15px } section.col-md-offset-2.col-md-10.contact-div .wrapper #form-card .inner .col-md-6:nth-of-type(2) .form-subject{ display: table-cell; vertical-align:middle; width:100%; } /* entire container, keeps perspective https://davidwalsh.name/css-flip*/ .flip { perspective: 1000px; } /* flip the pane when hovered */ .flip:hover div#form-card, .flip.hover div#form-card { transform: rotateY(180deg); } .flip, .front, .back { width: 320px; height: 480px; } /* flip speed goes here */ div#form-card { transition: 0.6s; transform-style: preserve-3d; position: relative; } /* hide back of pane during swap */ .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } /* front pane, placed above back */ .front { z-index: 2; /* for firefox 31 */ transform: rotateY(0deg); } /* back, initially hidden pane */ .back { transform: rotateY(180deg); } /* make sidebar nav vertical */ @media (min-width: 768px) { .sidebar-nav .navbar .navbar-collapse { padding: 0; max-height: none; } .sidebar-nav .navbar ul { float: none; } .sidebar-nav .navbar ul:not { display: block; } .sidebar-nav .navbar li { float: none; display: block; } .sidebar-nav .navbar li a { padding-top: 12px; padding-bottom: 12px; } }