"Projeto"
Bootstrap 4.1.1 Snippet by ghostXL

Post to Facebook Tweet this

<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> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="Bootstrap-4.1.3/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="design.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/jquery.countdown.js"></script> <script type="text/javascript" src="Bootstrap-4.1.3/js/bootstrap.min.js"></script> <script type="text/javascript" src="js/bootbox.min.js"></script> <title>Formandos de Mecatrônica</title> <nav class="nav navbar-expand-lg navbar-dark bg-primary sticky-top"> <a class="navbar-brand" href="#"> <img id="brand-image" alt="Website Logo" /> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#">Buffet</a> <a class="nav-item nav-link" href="#">Local</a> <a class="nav-item nav-link disabled" href="#">Loja</a> </div> </div> </nav> </head> <body> <div class="container-fluid"> <main class="wrapper"> <a href="https://www.google.com/"> <section class="adesao bg1"> <p class="txt_adesao">Faça sua ADESAO ONLINE </p> <p class="txt_vejamais">Veja Mais</p> </section> </a> </main> </div> </br> <div> <img src="https://images7.alphacoders.com/671/671281.jpg" width="100%"> </div> </body> </html>
@charset "utf-8"; #brand-image{ height: 100px; float: center; } .nav { position: fixed; padding-top: 15px; top: 0; z-index: 2; width: 100%; } .navbar-brand { position: absolute; left: 50%; margin-left: -50px !important; /* 50% of your logo width */ display: block; margin-top: -20px; } /***************Corpo**********/ body, html{ margin: 0; padding: 0; } body{ background-image: url(img/fundo.jpg); } .wrapper{ height: 50%; overflow-x: hidden; overflow-y: hidden; perspective: -10px; transform-style: preserve-3d; } .adesao{ position: relative; height: 450px; min-width: 700px; transform-style: inherit; } .adesao::before{ content: " "; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -1; background-size: cover; background-repeat: no-repeat; background-position: center center; transform: translateZ(-1px) scale(1.5); } .txt_adesao{ position: absolute; top: 40%; width: 100%; padding: 20px o; color: white; text-shadow: 0 0 5px #000; font-size: 40px; text-align: center; } .txt_vejamais{ position: absolute; top: 60%; left: 45%; width: 10%; padding: 20px o; color: white; text-shadow: 0 0 5px #000; font-size: 20px; text-align: center; border-style: solid; border-color: white; } .bg1::before{ max-width: 100%; background-image: url(https://i.imgur.com/21wBdiC.jpg); }

Related: See More

Material Kit React

Questions / Comments: