"Natália-Agência de Carros"
Bootstrap 4.1.1 Snippet by psd06t

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE HTML> <!-- Snapshot by TEMPLATED templated.co @templatedco Released for free under the Creative Commons Attribution 3.0 license (templated.co/license) --> <html> <head> <title>Agência de Carros</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="assets/css/main.css" /> </head> <body> <div class="page-wrap"> <!-- Nav --> <!-- Nav Modificado --> <nav id="nav"> <ul> <li><a href="https://imgbb.com/"><img src="https://i.ibb.co/W3zRmLL/icons8-homebrew-64.png" alt="icons8-homebrew-64"><span class="active"><span class="icon fa-home"></span></a></li> <li><a href="https://imgbb.com/"><img src="https://i.ibb.co/Wv7rhSH/icons8-pesquisa-64.png" alt="icons8-pesquisa-64"><span class="icon fa-camera-retro"></span></a></li> <li><a href="https://imgbb.com/"><img src="https://i.ibb.co/xmZX1PD/icons8-pesquisa-propriedade-64.png"><span class="icon fa-file-text-o"></span></a></li> </ul> </nav> <!-- Nav Modificado --> <!-- Nav Original <nav id="nav"> <ul> <li><a href="index.html" class="active"><span class="icon fa-home"></span></a></li> <li><a href="gallery.html"><span class="icon fa-camera-retro"></span></a></li> <li><a href="generic.html"><span class="icon fa-file-text-o"></span></a></li> </ul> </nav> nav Original--> <!-- Main --> <section id="main"> <!-- Banner --> <section id="banner"> <div class="inner"> <h1>Inova Carros</h1> <p>Carros de alta performance e super econômicos a baixo custo!!! <br><a href="https://imgbb.com/"><img src="https://i.ibb.co/qm5tQgQ/b45d32d78342c0ae82f1d67a892a8de9.jpg" alt="b45d32d78342c0ae82f1d67a892a8de9" border="0"></a>EVOLUÇÃO!!</a></p> <ul class="actions"> <li><a href="#galleries" class="button alt scrolly big">Continue</a></li> </ul> </div> </section> <!-- Gallery --> <section id="galleries"> <!-- Photo Galleries --> <div class="gallery"> <header class="special"> <h2>Escolha o seu e apaixone-se!</h2> </header> <div class="content"> <div class="media"> <a href="https://imgbb.com/"><img src="https://i.ibb.co/f48W7jJ/images-3.jpg" alt="images-3" border="0" alt="" title="This right here is a caption." /></a></a> </div> <div class="media"> <a href="https://imgbb.com/"><img src="https://i.ibb.co/CwhrCSb/download.jpg" alt="download" border="0" alt="" title="This right here is a caption." /></a> </div> <div class="media"> <a href="https://imgbb.com/"><img src="https://i.ibb.co/XYjnDZZ/download-1.jpg" alt="download-1" border="0" alt="" title="This right here is a caption." /></a> </div> <div class="media"> <a href="https://imgbb.com/"><img src="https://i.ibb.co/RHVP4dy/download-2.jpg" alt="download-2" border="0" alt="" title="This right here is a caption." /></a> </div> <div class="media"> <a href="https://imgbb.com/"><img src="https://i.ibb.co/YNsgknj/images-2.jpg" alt="images-2" border="0"></a> </div> <div class="media"> <a href="https://imgbb.com/"><img src="https://i.ibb.co/17xDzLT/download-3.jpg" alt="download-3" border="0" alt="" title="This right here is a caption." /></a> </div> <div class="media"> <a href="https://imgbb.com/"><img src="https://i.ibb.co/X2RLCTx/mercedes-ecod.jpg" alt="mercedes-ecod" border="0"></a> </div> <div class="media"> <a href="https://imgbb.com/"><img src="https://i.ibb.co/sPBvGHm/images.jpg" alt="images" border="0"></a> </div> </div> <footer> <a href="gallery.html" class="button big">Galeria Completa</a> </footer> </div> </section> <!-- Contact --> <section id="contact"> <!-- Social --> <div class="social column"> <h3>Sobre Nós</h3> <p>Mus sed interdum nunc dictum rutrum scelerisque erat a parturient condimentum potenti dapibus vestibulum condimentum per tristique porta. Torquent a ut consectetur a vel ullamcorper a commodo a mattis ipsum class quam sed eros vestibulum quisque a eu nulla scelerisque a elementum vestibulum.</p> <p>Aliquet dolor ultricies sem rhoncus dolor ullamcorper pharetra dis condimentum ullamcorper rutrum vehicula id nisi vel aptent orci litora hendrerit penatibus erat ad sit. In a semper velit eleifend a viverra adipiscing a phasellus urna praesent parturient integer ultrices montes parturient suscipit posuere quis aenean. Parturient euismod ultricies commodo arcu elementum suspendisse id dictumst at ut vestibulum conubia quisque a himenaeos dictum proin dis purus integer mollis parturient eros scelerisque dis libero parturient magnis.</p> <h3>Siga-nos</h3> <ul class="icons"> <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li> <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li> <li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li> </ul> </div> <!-- Form --> <div class="column"> <h3>Entre em Contato</h3> <form action="#" method="post"> <div class="field half first"> <label for="name">Nome</label> <input name="name" id="name" type="text" placeholder="Nome"> </div> <div class="field half"> <label for="email">Email</label> <input name="email" id="email" type="email" placeholder="Email"> </div> <div class="field"> <label for="message">Mensagem</label> <textarea name="message" id="message" rows="6" placeholder="Mensagem"></textarea> </div> <ul class="actions"> <li><input value="Envie" class="button" type="submit"></li> </ul> </form> </div> </section> <!-- Footer --> <footer id="footer"> <div class="copyright"> © Untitled Design: <a href="https://templated.co/">TEMPLATED</a>. Images: <a href="https://unsplash.com/">Unsplash</a>. </div> </footer> </section> </div> <!-- Scripts --> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/jquery.poptrox.min.js"></script> <script src="assets/js/jquery.scrolly.min.js"></script> <script src="assets/js/skel.min.js"></script> <script src="assets/js/util.js"></script> <script src="assets/js/main.js"></script> </body> </html>
@import url(font-awesome.min.css); @import url("https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600"); /* Snapshot by TEMPLATED templated.co @templatedco Released for free under the Creative Commons Attribution 3.0 license (templated.co/license) */ /* Reset */ 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } body { -webkit-text-size-adjust: none; } /* Box Model */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Basic */ @-ms-viewport { width: device-width; } body { -ms-overflow-style: scrollbar; } @media screen and (max-width: 480px) { html, body { min-width: 320px; } } body { background: #fff; } body.is-loading *, body.is-loading *:before, body.is-loading *:after { -moz-animation: none !important; -webkit-animation: none !important; -ms-animation: none !important; animation: none !important; -moz-transition: none !important; -webkit-transition: none !important; -ms-transition: none !important; transition: none !important; } /* Type */ body { background-color: #fff; color: #22313F; } body, input, select, textarea { font-family: "Nunito Sans", Arial, Helvetica, sans-serif; font-size: 13pt; font-weight: 300; line-height: 1.65; } @media screen and (max-width: 1680px) { body, input, select, textarea { font-size: 11pt; } } @media screen and (max-width: 1280px) { body, input, select, textarea { font-size: 11pt; } } @media screen and (max-width: 980px) { body, input, select, textarea { font-size: 11pt; } } @media screen and (max-width: 736px) { body, input, select, textarea { font-size: 12pt; } } @media screen and (max-width: 480px) { body, input, select, textarea { font-size: 12pt; } } a { text-decoration: underline; color: #19B5FE; } a:hover { text-decoration: none; color: #019be3; } strong, b { font-weight: 700; } em, i { font-style: italic; } p { margin: 0 0 2em 0; } h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.5; margin: 0 0 1em 0; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; } h1 { font-size: 2em; } @media screen and (max-width: 480px) { h1 { font-size: 1.5em; } } h2 { font-size: 1.75em; } @media screen and (max-width: 480px) { h2 { font-size: 1.4em; } } h3 { font-size: 1.35em; } h4 { font-size: 1.1em; } h5 { font-size: 0.9em; } h6 { font-size: 0.7em; } sub { font-size: 0.8em; position: relative; top: 0.5em; } sup { font-size: 0.8em; position: relative; top: -0.5em; } blockquote { border-left: solid 4px; font-style: italic; margin: 0 0 2em 0; padding: 0.5em 0 0.5em 2em; } code { border-radius: 4px; border: solid 1px; font-family: "Courier New", monospace; font-size: 0.9em; margin: 0 0.25em; padding: 0.25em 0.65em; } pre { -webkit-overflow-scrolling: touch; font-family: "Courier New", monospace; font-size: 0.9em; margin: 0 0 2em 0; } pre code { display: block; line-height: 1.75; padding: 1em 1.5em; overflow-x: auto; } hr { border: 0; border-bottom: solid 1px; margin: 2em 0; } hr.major { margin: 3em 0; } .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } /* Box */ .box { border-radius: 4px; border: solid 1px rgba(144, 144, 144, 0.25); margin-bottom: 2em; padding: 1.5em; } .box > :last-child, .box > :last-child > :last-child, .box > :last-child > :last-child > :last-child { margin-bottom: 0; } .box.alt { border: 0; border-radius: 0; padding: 0; } /* Button */ input[type="submit"], input[type="reset"], input[type="button"], button, .button { -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; background: #19B5FE; color: #FFF; border-radius: 4px; border: 0; cursor: pointer; display: inline-block; font-weight: 700; height: 2.85em; line-height: 2.95em; padding: 0 1.5em; text-align: center; text-decoration: none; white-space: nowrap; } input[type="submit"].active, input[type="reset"].active, input[type="button"].active, button.active, .button.active { color: #FFF; background: #22313F; } input[type="submit"].active:hover, input[type="reset"].active:hover, input[type="button"].active:hover, button.active:hover, .button.active:hover { color: #FFF; background: #22313F; } input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, button:hover, .button:hover { color: #FFF; background: #019be3; } input[type="submit"].alt, input[type="reset"].alt, input[type="button"].alt, button.alt, .button.alt { background: none; box-shadow: 0 0 0 2px rgba(144, 144, 144, 0.25); } input[type="submit"].alt:hover, input[type="reset"].alt:hover, input[type="button"].alt:hover, button.alt:hover, .button.alt:hover { background: rgba(144, 144, 144, 0.075); box-shadow: 0 0 0 2px rgba(144, 144, 144, 0.25); } input[type="submit"].icon, input[type="reset"].icon, input[type="button"].icon, button.icon, .button.icon { padding-left: 1.35em; } input[type="submit"].icon:before, input[type="reset"].icon:before, input[type="button"].icon:before, button.icon:before, .button.icon:before { margin-right: 0.5em; } input[type="submit"].fit, input[type="reset"].fit, input[type="button"].fit, button.fit, .button.fit { display: block; margin: 0 0 1em 0; width: 100%; } input[type="submit"].small, input[type="reset"].small, input[type="button"].small, button.small, .button.small { font-size: 0.8em; } input[type="submit"].big, input[type="reset"].big, input[type="button"].big, button.big, .button.big { font-size: 1.35em; padding: 0 2em; } input[type="submit"].disabled, input[type="submit"]:disabled, input[type="reset"].disabled, input[type="reset"]:disabled, input[type="button"].disabled, input[type="button"]:disabled, button.disabled, button:disabled, .button.disabled, .button:disabled { -moz-pointer-events: none; -webkit-pointer-events: none; -ms-pointer-events: none; pointer-events: none; opacity: 0.25; } @media screen and (max-width: 480px) { input[type="submit"], input[type="reset"], input[type="button"], button, .button { padding: 0; } } /* Contact */ #contact { display: -ms-flexbox; -ms-flex-pack: justify; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -moz-justify-content: space-between; -webkit-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; background: #ececec; } #contact form { margin: 0; } #contact .icons { margin-bottom: 1em; } #contact .column { padding: 3.5em 0 1.5em 0; padding-left: 3.5em; padding-right: 3.5em; width: 50%; } #contact .column.social { background: #e6e6e6; } @media screen and (max-width: 980px) { #contact .column { padding: 2em 0 0.1em 0; padding-left: 2em; padding-right: 2em; } } @media screen and (max-width: 736px) { #contact .column { width: 100%; } } @media screen and (max-width: 480px) { #contact .column { padding: 1em 0 0.1em 0; padding-left: 1em; padding-right: 1em; } } /* Form */ form { margin: 0 0 2em 0; } form .field { margin-bottom: 1.5em; } form .field.half { display: inline-block; width: 48%; } form .field.half.first { margin-right: 2.5%; } @media screen and (max-width: 980px) { form .field.half { display: block; width: 100%; } form .field.half.first { margin-right: 0; } } label { display: block; font-size: 0.9em; font-weight: 700; margin: 0 0 1em 0; } input[type="text"], input[type="password"], input[type="email"], select, textarea { -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; border-radius: 4px; border: solid 1px rgba(25, 181, 254, 0.25); color: inherit; display: block; outline: 0; padding: 0 1em; text-decoration: none; width: 100%; } input[type="text"]:invalid, input[type="password"]:invalid, input[type="email"]:invalid, select:invalid, textarea:invalid { box-shadow: none; } input[type="text"]:active, input[type="text"]:focus, input[type="password"]:active, input[type="password"]:focus, input[type="email"]:active, input[type="email"]:focus, select:active, select:focus, textarea:active, textarea:focus { border: solid 1px #19B5FE; } .select-wrapper { text-decoration: none; display: block; position: relative; } .select-wrapper:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none !important; } .select-wrapper:before { content: '\f078'; display: block; height: 2.75em; line-height: 2.75em; pointer-events: none; position: absolute; right: 0; text-align: center; top: 0; width: 2.75em; } .select-wrapper select::-ms-expand { display: none; } input[type="text"], input[type="password"], input[type="email"], select { height: 2.75em; } textarea { padding: 0.75em 1em; } input[type="checkbox"], input[type="radio"] { -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; display: block; float: left; margin-right: -2em; opacity: 0; width: 1em; z-index: -1; } input[type="checkbox"] + label, input[type="radio"] + label { text-decoration: none; cursor: pointer; display: inline-block; font-size: 1em; font-weight: 300; padding-left: 2.4em; padding-right: 0.75em; position: relative; } input[type="checkbox"] + label:before, input[type="radio"] + label:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none !important; } input[type="checkbox"] + label:before, input[type="radio"] + label:before { border-radius: 4px; border: solid 1px; content: ''; display: inline-block; height: 1.65em; left: 0; line-height: 1.58125em; position: absolute; text-align: center; top: 0; width: 1.65em; } input[type="checkbox"]:checked + label:before, input[type="radio"]:checked + label:before { content: '\f00c'; } input[type="checkbox"] + label:before { border-radius: 4px; } input[type="radio"] + label:before { border-radius: 100%; } ::-webkit-input-placeholder { opacity: 1.0; color: rgba(34, 49, 63, 0.25); } :-moz-placeholder { opacity: 1.0; color: rgba(34, 49, 63, 0.25); } ::-moz-placeholder { opacity: 1.0; color: rgba(34, 49, 63, 0.25); } :-ms-input-placeholder { opacity: 1.0; color: rgba(34, 49, 63, 0.25); } .formerize-placeholder { opacity: 1.0; color: rgba(34, 49, 63, 0.25); } /* Gallery */ @-moz-keyframes gallery { 100% { opacity: 1; } } @-webkit-keyframes gallery { 100% { opacity: 1; } } @-ms-keyframes gallery { 100% { opacity: 1; } } @keyframes gallery { 100% { opacity: 1; } } .gallery { padding: 3.5em; position: relative; overflow: hidden; min-height: 37em; } @media screen and (max-width: 980px) { .gallery { padding: 2em; min-height: 20em; } .gallery header h2 { margin-bottom: 1em; } } @media screen and (max-width: 480px) { .gallery { padding: 1em; } } .gallery header { display: -ms-flexbox; -ms-flex-pack: justify; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -moz-justify-content: space-between; -webkit-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; } .gallery header.special { -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; } @media screen and (max-width: 736px) { .gallery header { display: block; } } @media screen and (max-width: 480px) { .gallery header h2 { margin-bottom: .5em; } } .gallery footer { text-align: center; margin-top: 4em; } .gallery .content { display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -moz-justify-content: -moz-flex-start; -webkit-justify-content: -webkit-flex-start; -ms-justify-content: -ms-flex-start; justify-content: flex-start; } .gallery .content .media { -moz-animation: gallery 0.75s ease-out 0.4s forwards; -webkit-animation: gallery 0.75s ease-out 0.4s forwards; -ms-animation: gallery 0.75s ease-out 0.4s forwards; animation: gallery 0.75s ease-out 0.4s forwards; margin-bottom: 0; overflow: hidden; opacity: 0; position: relative; width: 25%; } .gallery .content .media a { display: block; } .gallery .content .media img { -moz-transition: -moz-transform 0.2s ease-in-out; -webkit-transition: -webkit-transform 0.2s ease-in-out; -ms-transition: -ms-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; max-width: 100%; height: auto; vertical-align: middle; } .gallery .content .media:hover img { -moz-transform: scale(1.075); -webkit-transform: scale(1.075); -ms-transform: scale(1.075); transform: scale(1.075); } @media screen and (max-width: 736px) { .gallery .content .media { width: 50%; } } @media screen and (max-width: 480px) { .gallery .content .media { width: 100%; } } /* Icon */ .icon { text-decoration: none; border-bottom: none; position: relative; } .icon:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none !important; } .icon > .label { display: none; } /* Image */ .image { border: 0; display: inline-block; position: relative; } .image img { display: block; } .image.left, .image.right { max-width: 40%; } .image.left img, .image.right img { width: 100%; } @media screen and (max-width: 480px) { .image.left, .image.right { max-width: 100%; width: 100%; } } .image.left { float: left; margin: 0 1.5em 1em 0; top: 0.25em; } @media screen and (max-width: 480px) { .image.left { float: none; margin: 0 0 1em 0; } } .image.right { float: right; margin: 0 0 1em 1.5em; top: 0.25em; } @media screen and (max-width: 480px) { .image.right { float: none; margin: 0 0 1em 0; } } .image.fit { display: block; margin: 0 0 2em 0; width: 100%; } .image.fit img { width: 100%; } .image.special { border: solid 1px rgba(144, 144, 144, 0.25); padding: 1em; } .image.main { display: block; margin: 0 0 3em 0; width: 100%; } .image.main img { width: 100%; } /* List */ ol { list-style: decimal; margin: 0 0 2em 0; padding-left: 1.25em; } ol li { padding-left: 0.25em; } ul { list-style: disc; margin: 0 0 2em 0; padding-left: 1em; } ul li { padding-left: 0.5em; } ul.alt { list-style: none; padding-left: 0; } ul.alt li { border-top: solid 1px; padding: 0.5em 0; } ul.alt li:first-child { border-top: 0; padding-top: 0; } ul.tabs { list-style: none; padding-left: 0; } ul.tabs li { display: inline-block; } ul.tabs li:first-child { padding: 0; } @media screen and (max-width: 736px) { ul.tabs li { display: block; margin: 0 0 .25em 0; padding: 0; } ul.tabs li .button { width: 100%; } } @media screen and (max-width: 480px) { ul.tabs { margin-bottom: 1em; } } ul.icons { cursor: default; list-style: none; padding-left: 0; } ul.icons li { display: inline-block; padding: 0 1em 0 0; } ul.icons li:last-child { padding-right: 0; } ul.icons li .icon:before { font-size: 2em; } ul.actions { cursor: default; list-style: none; padding-left: 0; } ul.actions li { display: inline-block; padding: 0 1em 0 0; vertical-align: middle; } ul.actions li:last-child { padding-right: 0; } ul.actions.small li { padding: 0 0.5em 0 0; } ul.actions.vertical li { display: block; padding: 1em 0 0 0; } ul.actions.vertical li:first-child { padding-top: 0; } ul.actions.vertical li > * { margin-bottom: 0; } ul.actions.vertical.small li { padding: 0.5em 0 0 0; } ul.actions.vertical.small li:first-child { padding-top: 0; } ul.actions.fit { display: table; margin-left: -1em; padding: 0; table-layout: fixed; width: calc(100% + 1em); } ul.actions.fit li { display: table-cell; padding: 0 0 0 1em; } ul.actions.fit li > * { margin-bottom: 0; } ul.actions.fit.small { margin-left: -0.5em; width: calc(100% + 0.5em); } ul.actions.fit.small li { padding: 0 0 0 0.5em; } @media screen and (max-width: 480px) { ul.actions { margin: 0 0 2em 0; } ul.actions li { padding: 1em 0 0 0; display: block; text-align: center; width: 100%; } ul.actions li:first-child { padding-top: 0; } ul.actions li > * { width: 100%; margin: 0 !important; } ul.actions li > *.icon:before { margin-left: -2em; } ul.actions.small li { padding: 0.5em 0 0 0; } ul.actions.small li:first-child { padding-top: 0; } } dl { margin: 0 0 2em 0; } dl dt { display: block; font-weight: 700; margin: 0 0 1em 0; } dl dd { margin-left: 2em; } /* Section/Article */ section.special, article.special { text-align: center; } section .inner, article .inner { padding: 3.5em 0 1.5em 0; padding-left: 3.5em; padding-right: 3.5em; } @media screen and (max-width: 980px) { section .inner, article .inner { padding: 2em 0 0.1em 0; padding-right: 2em; padding-left: 2em; } } @media screen and (max-width: 480px) { section .inner, article .inner { padding: 1em 0 0.1em 0; padding-right: 1em; padding-left: 1em; } } section .columns, article .columns { display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -moz-justify-content: space-between; -webkit-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; } section .columns.double .column, article .columns.double .column { width: 48%; } @media screen and (max-width: 980px) { section .columns.double .column, article .columns.double .column { width: 100%; } } header p { position: relative; margin: 0 0 1.5em 0; } header h2 + p { font-size: 1.25em; margin-top: -1em; } header h3 + p { font-size: 1.1em; margin-top: -0.8em; } header h4 + p, header h5 + p, header h6 + p { font-size: 0.9em; margin-top: -0.6em; } /* Table */ /* TIREI ESSA PARTE DO CÓDIGO E NÃO FEZ DIFERENÇA NA PÁGINA HOME*/ .table-wrapper { -webkit-overflow-scrolling: touch; overflow-x: auto; } table { margin: 0 0 2em 0; width: 100%; } table tbody tr { border: solid 1px; border-left: 0; border-right: 0; } table td { padding: 0.75em 0.75em; } table th { font-size: 0.9em; font-weight: 700; padding: 0 0.75em 0.75em 0.75em; text-align: left; } table thead { border-bottom: solid 2px; } table tfoot { border-top: solid 2px; } table.alt { border-collapse: separate; } table.alt tbody tr td { border: solid 1px; border-left-width: 0; border-top-width: 0; } table.alt tbody tr td:first-child { border-left-width: 1px; } table.alt tbody tr:first-child td { border-top-width: 1px; } table.alt thead { border-bottom: 0; } table.alt tfoot { border-top: 0; } /*/ /* Wrapper */ .page-wrap { display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-flex-wrap: nowrap; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -moz-justify-content: -moz-flex-start; -webkit-justify-content: -webkit-flex-start; -ms-justify-content: -ms-flex-start; justify-content: flex-start; } .wrapper { position: relative; } .wrapper > .inner { margin: 0 auto; width: 60em; } @media screen and (max-width: 1280px) { .wrapper > .inner { width: 65em; } } @media screen and (max-width: 980px) { .wrapper > .inner { width: 100%; } } /* Header */ #header { font-weight: 700; } /* Menu */ #nav { background: #0d1217; z-index: 10002; position: relative; width: 4em; } #nav ul { list-style: none; margin: 0; padding: 0; position: fixed; top: 1em; left: 0; } #nav ul li { padding: 0; width: 3.75em; text-align: Center; margin-bottom: 1em; } #nav ul li a { color: rgba(255, 255, 255, 0.5); text-decoration: none; font-size: 1.5em; } #nav ul li a:hover { color: white; } #nav ul li a.active { color: #19B5FE; } @media screen and (max-width: 736px) { #nav ul li { width: 3.4em; } } /* Banner */ body.is-loading #banner > .inner { opacity: 0; -moz-transform: translateY(1em); -webkit-transform: translateY(1em); -ms-transform: translateY(1em); transform: translateY(1em); } #banner { display: -ms-flexbox; -ms-flex-pack: center; -ms-flex-align: center; padding: 30em 30em 0; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; justify-content: center; min-height: 100vh; height: vh; position: relative; background: #000; background-image: url(https://imgbb.com/); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; background-position: center; text-align: center; color: #FFF; } #banner:before { -moz-transition: opacity 3s ease; -webkit-transition: opacity 3s ease; -ms-transition: opacity 3s ease; transition: opacity 3s ease; -moz-transition-delay: 0.25s; -webkit-transition-delay: 0.25s; -ms-transition-delay: 0.25s; transition-delay: 0.25s; content: ''; display: block; background-color: #000; height: 0; left: 0; opacity: 0.65; position: relative; top: 0; width: 100%; z-index: 0; } #banner .inner { -moz-transform: none; -webkit-transform: none; -ms-transform: none; transform: none; -moz-transition: opacity 1s ease, transform 1s ease; -webkit-transition: opacity 1s ease, transform 1s ease; -ms-transition: opacity 1s ease, transform 1s ease; transition: opacity 1s ease, transform 1s ease; position: relative; opacity: 1; z-index: 3; padding: 0 2em; } #banner h1 { font-size: 4em; line-height: 1em; margin: 0 0 0.5em 0; padding: 0; color: #FFF; } #banner p { font-size: 1.5em; margin-bottom: 1.75em; } #banner a { color: #FFF; text-decoration: none; } @media screen and (max-width: 1280px) { #banner h1 { font-size: 3.5em; } } @media screen and (max-width: 736px) { #banner { background-attachment: scroll; } #banner h1 { font-size: 2.25em; } #banner p { font-size: 1.25em; } } /* Main */ #main { background: #f1f1f1; width: 100%; } #main #header { background: #e6e6e6; padding: 1.15em 3.5em; text-align: right; } #main #header h1 { margin: 0; font-size: 1em; } @media screen and (max-width: 980px) { #main #header { padding: 1.15em 2em; } } @media screen and (max-width: 736px) { #main #header { text-align: center; } } /* Footer */ #footer { padding: 4em 0 2em 0; background: #f2f2f2; } #footer .copyright { color: #bfbfbf; font-size: 0.9em; margin: 0 0 2em 0; padding: 0 1em; text-align: center; } @media screen and (max-width: 736px) { #footer { padding: 3em 0 1em 0; } }
/* Snapshot by TEMPLATED templated.co @templatedco Released for free under the Creative Commons Attribution 3.0 license (templated.co/license) */ (function($) { skel.breakpoints({ xlarge: '(max-width: 1680px)', large: '(max-width: 1280px)', medium: '(max-width: 980px)', small: '(max-width: 736px)', xsmall: '(max-width: 480px)' }); $(function() { var $window = $(window), $body = $('body'); // Disable animations/transitions until the page has loaded. $body.addClass('is-loading'); $window.on('load', function() { window.setTimeout(function() { $body.removeClass('is-loading'); }, 100); }); // Fix: Placeholder polyfill. $('form').placeholder(); // Prioritize "important" elements on medium. skel.on('+medium -medium', function() { $.prioritize( '.important\\28 medium\\29', skel.breakpoint('medium').active ); }); // Scrolly. $('.scrolly').scrolly(); // Gallery. $('.gallery').each(function() { var $gallery = $(this), $content = $gallery.find('.content'); // Poptrox. $content.poptrox({ usePopupCaption: true }); // Tabs. $gallery.each( function() { var $this = $(this), $tabs = $this.find('.tabs a'), $media = $this.find('.media'); $tabs.on('click', function(e) { var $this = $(this), tag = $this.data('tag'); // Prevent default. e.preventDefault(); // Remove active class from all tabs. $tabs.removeClass('active'); // Reapply active class to current tab. $this.addClass('active'); // Hide media that do not have the same class as the clicked tab. $media .fadeOut('fast') .each(function() { var $this = $(this); if ($this.hasClass(tag)) $this .fadeOut('fast') .delay(200) .queue(function(next) { $this.fadeIn(); next(); }); }); }); }); }); }); })(jQuery); (function($) { /** * Generate an indented list of links from a nav. Meant for use with panel(). * @return {jQuery} jQuery object. */ $.fn.navList = function() { var $this = $(this); $a = $this.find('a'), b = []; $a.each(function() { var $this = $(this), indent = Math.max(0, $this.parents('li').length - 1), href = $this.attr('href'), target = $this.attr('target'); b.push( '<a ' + 'class="link depth-' + indent + '"' + ( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') + ( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') + '>' + '<span class="indent-' + indent + '"></span>' + $this.text() + '</a>' ); }); return b.join(''); }; /** * Panel-ify an element. * @param {object} userConfig User config. * @return {jQuery} jQuery object. */ $.fn.panel = function(userConfig) { // No elements? if (this.length == 0) return $this; // Multiple elements? if (this.length > 1) { for (var i=0; i < this.length; i++) $(this[i]).panel(userConfig); return $this; } // Vars. var $this = $(this), $body = $('body'), $window = $(window), id = $this.attr('id'), config; // Config. config = $.extend({ // Delay. delay: 0, // Hide panel on link click. hideOnClick: false, // Hide panel on escape keypress. hideOnEscape: false, // Hide panel on swipe. hideOnSwipe: false, // Reset scroll position on hide. resetScroll: false, // Reset forms on hide. resetForms: false, // Side of viewport the panel will appear. side: null, // Target element for "class". target: $this, // Class to toggle. visibleClass: 'visible' }, userConfig); // Expand "target" if it's not a jQuery object already. if (typeof config.target != 'jQuery') config.target = $(config.target); // Panel. // Methods. $this._hide = function(event) { // Already hidden? Bail. if (!config.target.hasClass(config.visibleClass)) return; // If an event was provided, cancel it. if (event) { event.preventDefault(); event.stopPropagation(); } // Hide. config.target.removeClass(config.visibleClass); // Post-hide stuff. window.setTimeout(function() { // Reset scroll position. if (config.resetScroll) $this.scrollTop(0); // Reset forms. if (config.resetForms) $this.find('form').each(function() { this.reset(); }); }, config.delay); }; // Vendor fixes. $this .css('-ms-overflow-style', '-ms-autohiding-scrollbar') .css('-webkit-overflow-scrolling', 'touch'); // Hide on click. if (config.hideOnClick) { $this.find('a') .css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)'); $this .on('click', 'a', function(event) { var $a = $(this), href = $a.attr('href'), target = $a.attr('target'); if (!href || href == '#' || href == '' || href == '#' + id) return; // Cancel original event. event.preventDefault(); event.stopPropagation(); // Hide panel. $this._hide(); // Redirect to href. window.setTimeout(function() { if (target == '_blank') window.open(href); else window.location.href = href; }, config.delay + 10); }); } // Event: Touch stuff. $this.on('touchstart', function(event) { $this.touchPosX = event.originalEvent.touches[0].pageX; $this.touchPosY = event.originalEvent.touches[0].pageY; }) $this.on('touchmove', function(event) { if ($this.touchPosX === null || $this.touchPosY === null) return; var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX, diffY = $this.touchPosY - event.originalEvent.touches[0].pageY, th = $this.outerHeight(), ts = ($this.get(0).scrollHeight - $this.scrollTop()); // Hide on swipe? if (config.hideOnSwipe) { var result = false, boundary = 20, delta = 50; switch (config.side) { case 'left': result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta); break; case 'right': result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta)); break; case 'top': result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta); break; case 'bottom': result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta)); break; default: break; } if (result) { $this.touchPosX = null; $this.touchPosY = null; $this._hide(); return false; } } // Prevent vertical scrolling past the top or bottom. if (($this.scrollTop() < 0 && diffY < 0) || (ts > (th - 2) && ts < (th + 2) && diffY > 0)) { event.preventDefault(); event.stopPropagation(); } }); // Event: Prevent certain events inside the panel from bubbling. $this.on('click touchend touchstart touchmove', function(event) { event.stopPropagation(); }); // Event: Hide panel if a child anchor tag pointing to its ID is clicked. $this.on('click', 'a[href="#' + id + '"]', function(event) { event.preventDefault(); event.stopPropagation(); config.target.removeClass(config.visibleClass); }); // Body. // Event: Hide panel on body click/tap. $body.on('click touchend', function(event) { $this._hide(event); }); // Event: Toggle. $body.on('click', 'a[href="#' + id + '"]', function(event) { event.preventDefault(); event.stopPropagation(); config.target.toggleClass(config.visibleClass); }); // Window. // Event: Hide on ESC. if (config.hideOnEscape) $window.on('keydown', function(event) { if (event.keyCode == 27) $this._hide(event); }); return $this; }; /** * Apply "placeholder" attribute polyfill to one or more forms. * @return {jQuery} jQuery object. */ $.fn.placeholder = function() { // Browser natively supports placeholders? Bail. if (typeof (document.createElement('input')).placeholder != 'undefined') return $(this); // No elements? if (this.length == 0) return $this; // Multiple elements? if (this.length > 1) { for (var i=0; i < this.length; i++) $(this[i]).placeholder(); return $this; } // Vars. var $this = $(this); // Text, TextArea. $this.find('input[type=text],textarea') .each(function() { var i = $(this); if (i.val() == '' || i.val() == i.attr('placeholder')) i .addClass('polyfill-placeholder') .val(i.attr('placeholder')); }) .on('blur', function() { var i = $(this); if (i.attr('name').match(/-polyfill-field$/)) return; if (i.val() == '') i .addClass('polyfill-placeholder') .val(i.attr('placeholder')); }) .on('focus', function() { var i = $(this); if (i.attr('name').match(/-polyfill-field$/)) return; if (i.val() == i.attr('placeholder')) i .removeClass('polyfill-placeholder') .val(''); }); // Password. $this.find('input[type=password]') .each(function() { var i = $(this); var x = $( $('<div>') .append(i.clone()) .remove() .html() .replace(/type="password"/i, 'type="text"') .replace(/type=password/i, 'type=text') ); if (i.attr('id') != '') x.attr('id', i.attr('id') + '-polyfill-field'); if (i.attr('name') != '') x.attr('name', i.attr('name') + '-polyfill-field'); x.addClass('polyfill-placeholder') .val(x.attr('placeholder')).insertAfter(i); if (i.val() == '') i.hide(); else x.hide(); i .on('blur', function(event) { event.preventDefault(); var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]'); if (i.val() == '') { i.hide(); x.show(); } }); x .on('focus', function(event) { event.preventDefault(); var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']'); x.hide(); i .show() .focus(); }) .on('keypress', function(event) { event.preventDefault(); x.val(''); }); }); // Events. $this .on('submit', function() { $this.find('input[type=text],input[type=password],textarea') .each(function(event) { var i = $(this); if (i.attr('name').match(/-polyfill-field$/)) i.attr('name', ''); if (i.val() == i.attr('placeholder')) { i.removeClass('polyfill-placeholder'); i.val(''); } }); }) .on('reset', function(event) { event.preventDefault(); $this.find('select') .val($('option:first').val()); $this.find('input,textarea') .each(function() { var i = $(this), x; i.removeClass('polyfill-placeholder'); switch (this.type) { case 'submit': case 'reset': break; case 'password': i.val(i.attr('defaultValue')); x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]'); if (i.val() == '') { i.hide(); x.show(); } else { i.show(); x.hide(); } break; case 'checkbox': case 'radio': i.attr('checked', i.attr('defaultValue')); break; case 'text': case 'textarea': i.val(i.attr('defaultValue')); if (i.val() == '') { i.addClass('polyfill-placeholder'); i.val(i.attr('placeholder')); } break; default: i.val(i.attr('defaultValue')); break; } }); }); return $this; }; /** * Moves elements to/from the first positions of their respective parents. * @param {jQuery} $elements Elements (or selector) to move. * @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations. */ $.prioritize = function($elements, condition) { var key = '__prioritize'; // Expand $elements if it's not already a jQuery object. if (typeof $elements != 'jQuery') $elements = $($elements); // Step through elements. $elements.each(function() { var $e = $(this), $p, $parent = $e.parent(); // No parent? Bail. if ($parent.length == 0) return; // Not moved? Move it. if (!$e.data(key)) { // Condition is false? Bail. if (!condition) return; // Get placeholder (which will serve as our point of reference for when this element needs to move back). $p = $e.prev(); // Couldn't find anything? Means this element's already at the top, so bail. if ($p.length == 0) return; // Move element to top of parent. $e.prependTo($parent); // Mark element as moved. $e.data(key, $p); } // Moved already? else { // Condition is true? Bail. if (condition) return; $p = $e.data(key); // Move element back to its original location (using our placeholder). $e.insertAfter($p); // Unmark element as moved. $e.removeData(key); } }); }; })(jQuery);

Related: See More


Questions / Comments: