"Página Inicial"
Bootstrap 3.0.0 Snippet by GuilhermeCipriano

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Grayscale - Start Bootstrap Theme</title> <!-- Bootstrap Core CSS --> <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom Fonts --> <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"> <!-- Theme CSS --> <link href="css/grayscale.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> <header class="intro container-fluid"> <div class="intro-body"> <div class="container-fluid"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <h1 class="brand-heading">Gamificação</h1> <p class="intro-text">Plataforma de gamificação para apoio ao processo de ensino-aprendizagem</p> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Sou Aluno</button> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Sou Professor</button> </div> </div> </div> </div> </header> <!-- Button trigger modal --> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Login</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="lgoin">Login</label> <div class="col-md-4"> <input id="lgoin" name="lgoin" type="text" placeholder="Login" class="form-control input-md" required=""> </div> </div> <!-- Password input--> <div class="form-group"> <label class="col-md-4 control-label" for="senha">Senha</label> <div class="col-md-4"> <input id="senha" name="senha" type="password" placeholder="Senha" class="form-control input-md" required=""> </div> </div> </fieldset> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button> <button type="button" class="btn btn-primary">Login</button> </div> </div> </div> </div> </body> </html>
/*! * Start Bootstrap - Grayscale v3.3.7+1 (http://startbootstrap.com/template-overviews/grayscale) * Copyright 2013-2016 Start Bootstrap * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE) */ body { width: 100%; height: 100%; font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif; color: black; background-color: black; } html { width: 100%; height: 100%; } h1, h2, h3, h4, h5, h6 { margin: 0 0 35px; text-transform: uppercase; font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: 1px; } p { margin: 0 0 25px; font-size: 18px; line-height: 1.5; } .intro { display: table; width: 100%; height: auto; text-align: center; color: white; background: url() no-repeat bottom center scroll; background-color: black; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } .intro .intro-body { display: table-cell; vertical-align: middle; } .intro .intro-body .brand-heading { font-size: 40px; } .intro .intro-body .intro-text { font-size: 18px; } @media (min-width: 768px) { .intro { height: 100%; padding: 0; } .intro .intro-body .brand-heading { font-size: 100px; } .intro .intro-body .intro-text { font-size: 26px; } } .intro{ background-image: url(http://static4.businessinsider.com/image/564e32c5ecad041068dfb0f1/how-to-win-a-game-of-chess-in-two-moves.jpg); background-repeat: no-repeat; background-size: 100%; } @media (max-width: 640px){ .intro{ background-image: url(); background-repeat: no-repeat; background-size: 100%; } } .modal { text-align: center; } @media screen and (min-width: 768px) { .modal:before { display: inline-block; vertical-align: middle; content: " "; height: 100%; } } .modal-dialog { display: inline-block; text-align: left; vertical-align: middle; }

Related: See More

Material Kit React

Questions / Comments: