"GCB"
Bootstrap 4.1.1 Snippet by ViNoDev

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 ----------> <html> <head> <title>Green Corners Bot</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <link rel="stylesheet" href="css/style.css"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Open+Sans:wght@300&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://kit.fontawesome.com/b0f639a7b5.js" crossorigin="anonymous"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="banner col-xs-12 col-sm-12 col-md-12"> <h1> <span id="Green">Green<span> Corners Bot </h1> </div> </div> <div class="row justify-content-center"> <div class="d-block text-center"> <div id="loginX" class="align-self-center"> <h2 class=" text-center">Login</h2> <form class="formu d-block text-left" method="GET"> <label for="email" class="d-block">E-mail</label> <input type="text" class="" name="email" placeholder="Digite seu e-mail"> <label for="senha" class="d-block" >Senha</label> <input type="password" name="senha" placeholder="Digite sua senha"> <input class="botao d-block" type="submit" value="Login"> <a href="#">Esqueci minha senha</a><br> <a href="#">Não sou cadastrado</a> </form> </div> </div> </div> </div> <div id="rodape" class="text-center"> <h3>Rodapé</h3> <ul class="list-inline"> <li class="list-inline-item"> <a href="#"> <i class="fab fa-facebook-square"></i> </a> </li> <li class="list-inline-item"> <a href="#"> <i class="fab fa-instagram-square"></i> </a> </li> <li class="list-inline-item"> <a href="#"> <i class="fab fa-twitter-square"></i> </a> </li> <li class="list-inline-item"> <a href="#"> <i class="fab fa-whatsapp-square"></i> </a> </li> </ul> </div> </div> </body> </html>
/* #EFEFEF branco #0B0A07 preto #2BA84A verde #227C9D azul */ body { margin: 0; padding: 0; background-image: url(imgs/background4.jpg); background-size: cover; background-repeat: no-repeat; font-family: 'Montserrat', sans-serif; font-size: 20px; text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.363); } .banner { background-color: rgba(43, 168, 74, 0.815); margin: 10px 0; padding: 15px 0; text-align: center; box-shadow: 1px 1px 5px rgb(24, 105, 45); color: #EFEFEF; } #loginX { background-color: rgba(239, 239, 239, 0.931); border-radius: 11px; padding: 40px 20px; margin: 10px; } #loginX input[type="text"], input[type="password"] { border: none; border-bottom: 1px solid black; background: transparent; outline: none; margin: 6px 0; height: 20px; width: 70%; color: black; font-size: 15px; transition: all 0.5s; } } #loginX input[type="text"]:hover, input[type="password"]:hover { width: 200px; height: 40px; } .formu { width: 350px; } .robo { position: relative; height: 130px; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } .botao { } #loginX label { margin: 10px 0; } #loginX a { text-decoration: none; font-weight: bold; font-size: 12px; line-height: 20px; color: #2f2f2f; transition: 0.2s; padding: 10px 0; } #loginX a:hover { transition: 0.2s; color: #008600; } #loginX { box-shadow: 1px 1px 10px black; } #loginX h2 { padding: 20px; } #rodape { background-color: rgba(11, 10, 7, 0.815); padding: 15px; color: #EFEFEF; } .fab { color: #ccc; font-size: 25px; transition: all 0.2s; } .fab:hover { font-size: 30px; color: #EFEFEF; } .list-group .list-group-item { position: relative; text-align: center; border: none; background-color: transparent; }

Related: See More

Paper Dashboard React

Questions / Comments: