11-09-2017, Saat: 23:25
Merhaba arkadaslar sitemi kodlarken aldigim hata asagidadir. Acaba bunu nasil duzeltebilirim? Birtek mobilde xs de boyle oluyor devaminda istedigim sonucu aliyorum.
![[Resim: Untitled.png]](https://image.ibb.co/hXQKYa/Untitled.png)
Html kodu
![[Resim: mXcBeF]](https://ibb.co/mXcBeF)
Css codu
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>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 */