Jump to content
ricardonews

colocando css em um login

Recommended Posts

Olá pessoal eu tenho essa imagem de um login  que vou mostrar aqui, consegui  o css dela , porem não consegui colocar no meu login,  eu vou deixar o login em html,  em css eu estou  dificuldade. Desde já agradeço a todos

 

para o imaster css.png

 então eu o css dela é esse aqui

*{margin:0; padding:0;}
html{
	height:100%;
	background: linear-gradient(rgba(38, 128, 101, 0.9), rgba(52, 177, 140, 0.9));
}
.erros, .ok
{
	width:390px;
	padding:5px;
	background:rgba(238, 249, 113, 0.9);
	margin: 20px auto 0 auto;
	border: 1px solid rgba(222,239,10,0.9);
	border-radius: 4px;
	color: #333;

}
.ok{background: rgba(155,222,143,0.9);border-color: rgba(68, 171, 50, 0.9);color:white;}
body{
	font-family: "Trebuchet MS", tahoma, arial;
}

#formulario{
	width:500px;
	margin:40px auto;
	text-align:center;
	position:relative;
}
#formulario fieldset{
	background:white;
	border:0 none;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;

	box-shadow:0 0 15px 1px rgba(0,0,0, 0.4);
	padding:20px 30px;

	box-sizing: border-box;
	width:80%;
	margin:0 10%;
	position:absolute;
}
#formulario input, #formulario textarea{
	padding:10px;
	border:1px solid rgba(38, 128, 101, 0.9);
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	outline:none;
	box-sizing: border-box;
	width:100%;
	font:14px "Trebuchet MS", tahoma, arial;
	color:#090;
	margin-bottom:10px;
}
#formulario .acao{
	width:100px;
	background:rgba(38, 128, 101, 0.9);
	color:white;
	text-transform:uppercase;
	font-weight:bold;
	padding:12px 0;
	float:left;
	margin-right:5%;
}
#formulario .acao:hover{background:rgba(52, 177, 140, 0.9); cursor:pointer;}

Aqui abaixo é o html que eu não consegui deixar no css do jeito que está na imagem.

<!doctype html>
<html>
<?php
    require_once"config.php";
?>
    <head>
        <title>APRENDIZ DE JS</title>
        <link href="style.css" rel="stylesheet" type="text/css">

        <script src="jquery-3.2.1.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(document).ready(function(){

                $("#but_submit").click(function(){
                    var username = $("#meu_nome").val().trim();
                    var password = $("#minha_senha").val().trim();

                    if( username != "" && password != "" ){
                        $.ajax({
                            url:'pesquisar.php',
                            type:'post',
                            data:{username:username,password:password},
                            success:function(response){
                                var msg = "";
                                if(response == 1){
                                    window.location = "home.php";
                                }else{
                                    msg = "Invalid username and password!";
                                }
                                $("#message").html(msg);
                            }
                        });
                    }
                });

            });
        </script>
    </head>
    <body>
        <div class="container">

            <div id="div_login">
                <h1>Login</h1>
                <div id="message"></div>
                <div>
                    <input type="text" class="textbox" id="meu_nome" name="meu_nome" placeholder="Username" />
                </div>
                <div>
                    <input type="password" class="textbox" id="minha_senha" name="minha_senha" placeholder="Password"/>
                </div>
                <div>
                    <input type="button" value="logar" name="but_submit" id="but_submit" />
                </div>
            </div>

        </div>
    </body>
</html>

 

 

Share this post


Link to post
Share on other sites

Segue solução:

 

CÓDIGO

<!doctype html>
<html>
    <head>
        <title>APRENDIZ DE JS</title>

        <style type="text/css">
        html{
            height:100%;
            background: linear-gradient(rgba(38, 128, 101, 0.9), rgba(52, 177, 140, 0.9));
        }
        #div_login{
            width:500px;
            margin:40px auto;
            position:relative;
            background-color: #ffffff;
            padding: 20px;
            border-radius: 5px;
        }
        #div_login h1 {
            text-align: center;
        }
        #div_login input, #div_login textarea{
            padding:10px;
            border:1px solid rgba(38, 128, 101, 0.9);
            border-radius:4px;
            -moz-border-radius:4px;
            -webkit-border-radius:4px;
            outline:none;
            box-sizing: border-box;
            width:100%;
            font:14px "Trebuchet MS", tahoma, arial;
            color:#090;
            margin-bottom:10px;
        }
        #div_login #but_submit {
            background-color: #27ae60;
            font-weight: bold;
            text-transform: uppercase;
            color: #ffffff;
            width: auto;
            margin: 0;
            padding: 10px 20px;
        }
        </style>
    </head>
    <body>
        <div class="container">
            <div id="div_login">
                <h1>Login</h1>
                <div id="message"></div>
                <div>
                    <input type="text" class="textbox" id="meu_nome" name="meu_nome" placeholder="Username" />
                </div>
                <div>
                    <input type="password" class="textbox" id="minha_senha" name="minha_senha" placeholder="Password"/>
                </div>
                <div>
                    <input type="button" value="logar" name="but_submit" id="but_submit" />
                </div>
            </div>
        </div>
    </body>
</html>

 

Share this post


Link to post
Share on other sites

Disponível ;)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Ewfc2005
      Eu sou um programador amador, e ainda estou aprendendo programação, comecei um site, mas esqueci de faze-lo para ser responsivo, agora preciso de ajuda
      pois nao consigo deixa-lo responsivo
       

      Codigo HTML
       
      Codigo CSS

       
       
      Ele está mal feito, ainda tenho que arrumar muita coisa, se alguem conseguir me ajudar e dizer como ele pode ficar responsivo
      eu Agradeço.
    • By Baby01
      Prezados, bom dia.
       
      Gostaria de uma ajudar, sobre um script que estou criando. 
       
      Não estou conseguindo fazer a comparação entre data e horário, tipo assim : eu quero que quando o usuário faça um agendamento ex: data 15/07/2019 horário: 10h00 ás 12h00, não pode ter outro agendamento nessa data 15/07/2019 e nem entre esse horário 10h00 às 12h00.  Mais pode ter outro agendamento nessa data 15/07/2019, mais não no mesmo horário.
      Abaixo está meu script : 
       
       
       
      <!DOCTYPE html>
      <html>
      <head>
          <title>GESTÃO DE CASOS</title>
          <meta lang="pt-br" charset="utf-8">
          <link rel="icon" type="imagem/png" href="../gestao/img/logo.png" />
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <script type="text/javascript" src="../bootstrap/sweetalert/dist/sweetalert.js"></script>
      </head>
      <body>
      <?php
      if(!isset($_SESSION)) 
          { 
              session_start(); 
          } 
              date_default_timezone_set('America/Sao_Paulo');
              header('Content-type: text/html; charset=utf-8');
              
              if (isset($_POST["submit"])) {
              $hr_agendamento = ('H:i:s');
              $now = date('Y-m-d H:i:s');
              $planoID = $_POST["planoID"];        
              $pacienteID = $_POST["pacienteID"];
              $unidadeID = $_POST["unidadeID"];
              $dt_programada = $_POST["dt_programada"];
              $hr_inicial = $_POST["hr_inicial"];
              $hr_final = $_POST["hr_final"];
              $atendimentoID = $_POST["atendimentoID"];
              }
              
              $unidade = $_SESSION['unidade_referencia'];
              
              include ("../administracao/conn.php");
              
              $agenda = "SELECT a.hr_inicial, a.hr_final, DATE_FORMAT(  `dt_programada` ,  '%d/%m/%Y' ) AS  `data_formatada` , b.unidadeID, b.unidade_referencia
                          FROM tb_agenda a
                          INNER JOIN tb_unidade b ON a.unidadeID = b.unidadeID
                          WHERE b.unidade_referencia =  $unidade";
                  
                 /* nessa parte que não estou conseguindo fazer a comparação , consigo pegar a variável que o usuário digita, porém não estou conseguindo trazer do banco de dados*/        
              IF ( (["dt_programada"] == $_POST["dt_programada"]) && (["hr_inicial"] == $_POST["hr_inicial"]) && (["hr_final"] == $_POST["hr_final"])) {
                  echo "<script>    swal('ATENÇÃO','DATA E HORÁRIO JÁ CADASTRADO', 'warning').then(function() {window.location = '../plano/escolha_paciente_plano.php';});</script>";    
                  
              }
                  ELSE
                  {
                  
              $sql = "INSERT INTO tb_agenda (planoID, pacienteID, unidadeID, dt_programada, hr_inicial, hr_final, atendimentoID) values ('$planoID','$pacienteID', '$unidadeID', '$dt_programada', '$hr_inicial', '$hr_final', '$atendimentoID')";
              
              if (mysqli_query($connect, $sql)) 
              {
                  echo "<script>swal('BOM TRABALHO!', 'AGENDA CADASTRADA COM SUCESSO!', 'success').then(function() {window.location = '../plano/escolha_paciente_plano.php';});</script>";
                  $x = 'Agenda criada com sucesso';
                  include "../administracao/agenda_log.php";
              } 
              else 
              {
                  echo "<script>swal('INFELIZMENTE', 'NÃO FOI POSSÍVEL CADASTRAR A AGENDA', 'warning').then(function() {window.location = '../plano/escolha_paciente_plano.php';});</script>" . $sql . "<br>" . mysqli_error($connect);
                  $x = 'Não foi possível criar a agenda';
                  include "../administracao/agenda_log.php";
                  
                  }
              }
              
      ?>
      </body>
      </html>
    • By Ewfc2005
      Queria saber como faço para fazer um texto aparecer ao rolar a pagina
      igual ao desse site: https://ciesalon.com/services
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.