<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 ----------> <!--Pulling Awesome Font --> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container-fluid"> <div class="row"> <section class="color"> <div class="col-md-offset-5 col-md-3"> <h1>Testando 123</h1> <p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p </div> </section> </div> </div> </br> <div class="container"> <div class="row"> <div class="col-md-offset-5 col-md-3"> <div class="form-login"> <h4>Olá.</h4> </br> <input type="text" id="userName" class="form-control input-sm chat-input" placeholder="username" /> </br> <input type="text" id="userPassword" class="form-control input-sm chat-input" placeholder="password" /> </br> <div class="wrapper"> <span class="group-btn"> <a href="#" class="btn btn-primary btn-md">login <i class="fa fa-sign-in"></i></a> </span> </div> </div> </div> </div> </div>

@import url(http://fonts.googleapis.com/css?family=Roboto:400); body { background-color:#fff; -webkit-font-smoothing: antialiased; font: normal 14px helveitca,Roboto,arial,sans-serif; } .container { padding: 25px; position: fixed; } .form-login { background-color: #EDEDED; padding-top: 10px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; border-radius: 15px; border-color:#d2d2d2; border-width: 5px; box-shadow:0 1px 0 #cfcfcf; } h4 { border:0 solid #fff; border-bottom-width:1px; padding-bottom:10px; text-align: center; } .form-control { border-radius: 10px; } .wrapper { text-align: center; } /* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html -------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { background: transparent; border: 0; margin: 0; padding: 0; vertical-align: baseline; } body { line-height: 1; } h1, h2, h3, h4, h5, h6 { clear: both; font-weight: normal; } ol, ul { list-style: none; } blockquote { quotes: none; } blockquote:before, blockquote:after { content: ''; content: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } /* =Scss Variables -------------------------------------------------------------- */ /* =Global -------------------------------------------------------------- */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { background-color: #e3dedc; color: #505050; font-family: "Ubuntu", sans-serif; font-weight: 300; font-size: 16px; line-height: 1.8; } /* Headings */ h1, h2, h3, h4, h5, h6 { line-height: 1; font-weight: 300; } a { text-decoration: none; color: #3cb5f9; } a:hover { color: #0793e2; } /* =Template -------------------------------------------------------------- */ #wrapper { width: 100%; margin: 0 auto; } #main { background-color: #fff; padding-top: 150px; } .container { width: 80%; margin: 0 auto; padding: 0 30px; } section { padding: 60px 0; } section h1 { font-weight: 700; margin-bottom: 10px; } section p { margin-bottom: 30px; } section p:last-child { margin-bottom: 0; } section.color { background-color: #A70222; color: white; } /* =Info Bar -------------------------------------------------------------- */ #info-bar { background-color: #3cb5f9; } #info-bar a { color: white; font-size: 14px; text-transform: uppercase; display: inline-block; margin: 0; padding: 10px; } #info-bar a:hover { background-color: #0793e2; } #info-bar span.all-tutorials, #info-bar span.back-to-tutorial { display: block; width: 50%; } #info-bar span.all-tutorials { float: left; text-align: left; } #info-bar span.back-to-tutorial { float: right; text-align: right; } /* =Header -------------------------------------------------------------- */ header { width: 100%; height: 150px; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 999; background-color: #0683c9; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s; } header h1#logo { display: inline-block; height: 150px; line-height: 150px; float: left; font-family: "Oswald", sans-serif; font-size: 60px; color: white; font-weight: 400; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } header nav { display: inline-block; float: right; } header nav a { line-height: 150px; margin-left: 20px; color: #9fdbfc; font-weight: 700; font-size: 18px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } header nav a:hover { color: white; } header.smaller { height: 75px; } header.smaller h1#logo { width: 150px; height: 75px; line-height: 75px; font-size: 30px; } header.smaller nav a { line-height: 75px; } /* =Footer -------------------------------------------------------------- */ /* =Extras -------------------------------------------------------------- */ .clearfix:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } /* =Media Queries -------------------------------------------------------------- */ @media all and (max-width: 660px) { /* =Header -------------------------------------------------------------- */ header h1#logo { display: block; float: none; margin: 0 auto; height: 100px; line-height: 100px; text-align: center; } header nav { display: block; float: none; height: 50px; text-align: center; margin: 0 auto; } header nav a { line-height: 50px; margin: 0 10px; } header.smaller { height: 75px; } header.smaller h1#logo { height: 40px; line-height: 40px; font-size: 30px; } header.smaller nav { height: 35px; } header.smaller nav a { line-height: 35px; } } @media all and (max-width: 600px) { .container { width: 100%; } #info-bar a { display: block; } #info-bar span.all-tutorials, #info-bar span.back-to-tutorial { width: 100%; } #info-bar span.all-tutorials, #info-bar span.back-to-tutorial { float: none; text-align: center; } #info-bar span.all-tutorials { border-bottom: solid 1px #0793e2; } }