• Derecelendirme: 0/5 - 0 oy
  • 5
  • 4
  • 3
  • 2
  • 1
Gösterim Stili

Bootstrap giris formunda hata
#1

Merhaba arkadaslar sitemi kodlarken aldigim hata asagidadir. Acaba bunu nasil duzeltebilirim? Birtek mobilde xs de boyle oluyor devaminda istedigim sonucu aliyorum.

Untitled.png

Html kodu


Kod:
<html lang="tr">
<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title> E.M Akıllı Ev Sistemleri </title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/time.js"></script>

  <link href="css/bootstrap.min.css" rel="stylesheet" />
  <link href="css/font-awesome.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/loginstyle.css">
 
</head>

<body>
 
  <!-- Desktop Login Form -->

  <div class="main hidden-xs">
      <div class="container">
          <center>
      <div class="middle">
          <div id="login">
              <form action="javascript:void(0);" method="get">
              <fieldset class="clearfix">
              <p ><span class="fa fa-user" style="color: #A4A6A6"></span><input type="text"  Placeholder="Kullanıcı İsmi" required="" oninvalid="this.setCustomValidity('Lütfen bu alanı doldurunuz.')" oninput="setCustomValidity('')"></p>
              <p><span class="fa fa-lock" style="color: #A4A6A6"></span><input type="password"  Placeholder="Şifre" required="" oninvalid="this.setCustomValidity('Lütfen bu alanı doldurunuz.')" oninput="setCustomValidity('')"></p>
                  <div>
                  <span style="width:48%; text-align:left;  display: inline-block;"><a class="small-text" href="#"> Şifrenizi mi unuttunuz?</a></span>
                  <span style="width:50%; text-align:right;  display: inline-block;"><input type="submit" value="Giriş"></span>
                  </div>
              </fieldset>
                  <div class="clearfix"></div>
              </form>
                  <div class="clearfix"></div>
          </div> <!-- end login -->
              <div class="logo">LOGO
                  <div class="clearfix"></div>
              </div>
      </div>
          </center>
      </div>
  </div>

  <!-- End Of DesktopLogin Form -->

  <!-- Mobile Login Form -->

<div class="inner-wrapper hidden-sm hidden-md hidden-lg hidden-xl">
    <div class="container">
        <div class="row">
            <div class="col-sm-4 col-sm-offset-4">
            <div class="logo-mobile">
                  <img src="images/avatar_2x.png">
              </div>
              <div class="clearfix"></div>
            <form role="form">
                <div class="form-group">
                <span class="fa fa-user" style="color: #A4A6A6"></span>
                <input type="text"  Placeholder="Kullanıcı İsmi" required="" oninvalid="this.setCustomValidity('Lütfen bu alanı doldurunuz.')" oninput="setCustomValidity('')">
                </div>
                    <div class="form-group">
                    <span class="fa fa-lock" style="color: #A4A6A6"></span><input type="password"  Placeholder="Şifre" required="" oninvalid="this.setCustomValidity('Lütfen bu alanı doldurunuz.')" oninput="setCustomValidity('')">
                    </div>
                    <button type="submit" class="btn btn-default login"> Giriş </button> <br>
              </form>
            </div>
        </div>
    </div>
</div>

  <!-- End Of Mobile Login Form -->

</body>

</html>

mXcBeF
Css codu 

Kod:
/* Global */

body {
    font-family: 'Josefin Sans', sans-serif;
}

/* Desktop Login Form */

div.main{
   background-color: #00EBC1;
   height:calc(100vh);
   width:100%;
}

/* ---------- GENERAL ---------- */

* {
 box-sizing: border-box;
 margin:0px auto;

 &:before,
 &:after {
   box-sizing: border-box;
 }

}

body {
 
   color: #606468;
   font: 87.5%/1.5em 'Open Sans', sans-serif;
   margin: 0;
}

a {
   color: #474E4D;
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
   color: #333333;
}

input {
   border: none;
   font-size: 14px;
   line-height: 1.5em;
   padding: 0;
   -webkit-appearance: none;
}

p {
   line-height: 1.5em;
}

.clearfix {
 *zoom: 1;

 &:before,
 &:after {
   content: ' ';
   display: table;
 }

 &:after {
   clear: both;
 }

}

.container {
 left: 50%;
 position: fixed;
 top: 50%;
 transform: translate(-50%, -50%);
}

/* ---------- LOGIN ---------- */

#login form{
   width: 250px;
}
#login, .logo{
   display:inline-block;
   width:40%;
   cursor: default;
}
#login{
 border-right:1px solid #fff;
 padding: 0px 22px;
 width: 59%;
}
.logo{
 color:#fff;
 font-size:50px;
 line-height: 125px;
}

#login form span.fa {
   background-color: #474E4D;
   border-radius: 3px 0px 0px 3px;
   color: #000;
   display: block;
   float: left;
   height: 50px;
   font-size:24px;
   line-height: 50px;
   text-align: center;
   width: 50px;
}

#login form input {
   height: 50px;
}
fieldset{
   padding:0;
   border:0;
   margin: 0;

}
#login form input[type="text"], input[type="password"] {
   background-color: #fff;
   border-radius: 0px 3px 3px 0px;
   color: #474E4D;
   margin-bottom: 1em;
   padding: 0 16px;
   width: 200px;
}

#login form input[type="submit"] {
 border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 background-color: #474E4D;
 color: #eee;
 font-weight: bold;
 text-transform: uppercase;
 padding: 5px 10px;
 height: 30px;
}

#login form input[type="submit"]:hover {
   background-color: #333333;
}

#login > p {
   text-align: center;
}

#login > p span {
   padding-left: 5px;
}
.middle {
 display: flex;
 width: 600px;
}

/* End Of Desktop Login Form */

/* Mobile Login Form */

html, body {
 height:100%;
 background-color: #00EBC1;
}

.inner-wrapper {
 display:table-cell;
 vertical-align:middle;
 padding:15px;
}

.logo-mobile {
 margin-bottom: 50px;
 text-align: center;
}

.form-group span.fa{
   background-color: #474E4D;
   border-radius: 3px 0px 0px 3px;
   color: #000;
   display: block;
   float: left;
   height: 50px;
   font-size:24px;
   line-height: 50px;
   text-align: center;
   width: 50px;
}

.form-group input {
 background-color: #fff;
 border-radius: 0px 3px 3px 0px;
 color: #474E4D;
 margin-bottom: 1em;
 padding: 0 16px;
 width: 200px;
 height: 50px;
}

.login {
 border-color: #474E4D;
 border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 background-color: #474E4D;
 color: #eee;
 font-weight: bold;
 text-transform: uppercase;
 padding: 5px 10px;
 height: 30px;
 margin-left: 100px;
}

.login:hover {
 background-color: #333333;
 color: #fff;
 border-color: #333333;
}

/* End Of Mobile Login Form */






Konuyu Okuyanlar: 1 Ziyaretçi

Şok Aktüel