Untitled


html{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

body{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	font-family: 'Roboto',sans-serif;
	background-color: #C0C0C0;
}


.big-box{
	border-color: #808080;
	width: 28%;
	height: 70%;
	top: 50%;
	left: 50%;
	position: absolute;
	background-color: white;
	transform: translate(-50%,-50%);
	box-sizing:border-box;

}
h1{
	border-left-color: red;
	border-left-style: solid;
	height: 10%;
	color: red;
	font-size: 225%;
	padding-top: 2.5%;
	padding-bottom: 2.5%;
	padding-left:10%;
	box-sizing:border-box;
	margin-top: 15%;


}
.image1{
	width: 30%;
	height: 25%;
	border-radius: 50%;
	position: absolute;
	top: 5%;
	left: calc(50% + 35%);
	overflow: hidden;

}
p{
	margin-bottom: 0%;
	margin-top: 12%;
	margin-left: 10%;
	width: 80%;
	height: 5%;
	color: red;
	padding-bottom: 3.5%;

}


input:focus{
	visibility: visible;
}

input{
	background:transparent;
	padding-top: 3.75%;
	padding-bottom: 3.75%;
	margin-left:10%;
	border-bottom-style: solid;
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
	border-color: #C0C0C0;
	width: 80%;
	height: 15%;
}
input:focus::-webkit-input-placeholder{
	color: white;
}
input:focus{
	color: red;
	border-color: red;
	outline: none;


}
input::placeholder-shown{
	color: white;
}
.box{
	margin-top: 8%;
	color:#C0C0C0;
	background-color: white;
	border-color: #C0C0C0;
	border-style: solid;
	height: 22.5%;
	width:60%;
	margin-left: 20%;
	margin-right: 20%;
	margin-bottom:7%;


}
.box:hover{
	color:red;
	border-color: red;
}
#forgot1{
	margin: auto;
	box-sizing:border-box;
	width: 100%;
	text-align: center;
}
#forgot{
	height: 15%;
	width: 100%;
	margin: auto;
	text-decoration:none;
	padding: 5%;
	color: #C0C0C0;
	font-size: 1rem;


}
#forgot:hover{
	color: red;
}

p:focus{
	visibility:visible;
}
@media only screen and (max-width:500px) {
  /


}
@media screen and (min-device-width: 0px) and (max-device-width: 799px) {
	@media (orientation: portrait){
  .big-box {
    width: 80%;
	height: 67%;
  }
  #forgot{
	  padding: 2%;
	  margin-bottom: 2%;
  }
}
@media (orientation: landscape){
	.big-box {
	margin-top: 2%;
	margin-bottom: 1%;
	width: 45%;
	height: 115%;

  }
}}


@media screen and (min-width: 750px) {
	@media (orientation: portrait){
  .big-box {
	width: 78%;
	height: 72%;
  }
}
@media (orientation: landscape){
	.big-box {
	margin-top: 2%;
	margin-bottom: 2%;
	width: 45%;
	height: 80%;

  }
}}

	<?php
	session_start();
	// inicjowanie sesji
	$host = "localhost";
	$db_user = "root";
	$db_password="";
	$db_name = "osadnicy";
	$con = @new mysqli($host,$db_user,$db_password, $db_name);
	//polaczenie z baza
	if(!$con)
	//sprawdzenie polaczenia z baza nie spelni sie jezeli true
	{
		echo "Error";
	}
	else
	{
	$uname=$_POST['username'];
	$pass=$_POST['password'];
		//przypisujemy do zmiennej dane z formularza
	echo"you are logged in";
	$zap="select * from uzytkownicy where user='$uname' AND pass='$pass'";
		//zapytanie do bazy o pobranie i zweryfikowanie loginu i hasla
	$wynik = @mysqli_query($con, $zap);
		//wykonanie zapytania na polaczeniu con
	if($wynik){
		$ile_wynikow=mysql_num_rows($wynik);
			//sprawdzenie czy uzytkownik jest w bazie
		if($ile_wynikow == 1){
		//udalo sie zalogowac
			$dane=mysql_fetch_assoc($wynik);
			//utworzenie tablicy i przypisanie im wartosci assoc bo odczytywane po indexach
			$_SESSION['user']=$dane['user'];
			//przypisanie danych przez sesje
			@mysql_free_result($wynik);
			//pozbywanie sie niepotrzebnych danych
			header('Location: mojekonto.php');
		}
		else{
		//nie udalo sie zalogowac
			$_SESSION['ERROR'] ='<span style="color:red"&gt;Wrong Username or Password</span&gt';


		}
	}
	mysqli_free_result($wynik);
		//wyczyszczenie ramu serwera z aktualnych wynikow
	mysqli_close($con);
		//zamkniecie polaczenia
	}
?>
<!DOCTYPE html>
<html lang="pl_PL">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="Stylesheet" type="text/css" href="style.css" />
</head>
<body>


<div id="bigbox" class="big-box">
	<a href="">
		<img src="image1.png" class="image1">
	</a>
	<h1>Login</h1>
	<form action="login.php" method="post">
		<p id="f1">Username</p>
		<input type="text" name="username" id="username" class="input" placeholder="Username">
		<p id="f2">Password</p>
		<input type="password" name="password" class="input" id="password" placeholder="Password">
		<input type="submit" class="box" value="GO"><br>

	</form>
	<?php
	if(isset($_SESSION['ERROR']))
	echo $_SESSION['ERROR'];
	//error logowania
	?>
	<div id="forgot1">
		<a id="forgot" href="">Forgot your password?</a>
	</div>


</div>


</body>
</html>