Skip to content
Snippets Groups Projects
Commit fc565b91 authored by Münzenmayer Janina's avatar Münzenmayer Janina
Browse files

Login: html bearbeitet, css erstellt. Image-Ordner (Logo) erstellt.

parent a4a28a33
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
views/img/Logo.png 0 → 100644
+ 0
− 0
View file @ fc565b91
views/img/Logo.png

282 KiB

views/logIn.html
+ 77
− 6
View file @ fc565b91
......@@ -3,6 +3,8 @@
<head>
<meta charset="utf-8">
<title>Login</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
......@@ -21,13 +23,82 @@
});
});
</script>
<script language="javascript"> /* überarbeiten */
/* function checkForm(form) {
userName = form.username.value;
password = form.pwd.value;
if( (typeof userName == 'undefined' || typeof pass == 'undefined' ) || (userName == "" || pass =="") || (userName.length == 0 || pass.length == 0) ) {
alert("Benutzername oder Passwort ist falsch!")
}
}
*/
function loginfirst() {
alert("Bitte melde dich zuerst an!")
}
</script>
</head>
<body>
<h1>Login</h1>
<input type="text" size="40" placeholder="Name" id="userName"><br/>
<input type="password" size="40" placeholder="Passwort" id="password"><br/>
<input type="button" value="Anmelden" id="submit">
<a href="register.html">Registrieren</a>
<body class="backpic">
<!-- Header -->
<header>
<!-- Tab content -->
<div class="logoBox">
<img src="img/Logo.png" id="Logo">
</div>
<div>
<nav class="dropdown">
<button class="dropbutton" id="navlink" >&#9776; menu</button>
<div class="dropdown-content">
<a href="logIn.html" class="active" >Login</a>
<a href="register.html">Registrierung</a>
<a href="" onclick="loginfirst()">Feed</a>
</div>
</nav>
</div>
</header>
<!-- main -->
<main>
<!-- LeftSide not used here -->
<!-- Content -->
<form class="loginform" name="login">
<h1 id="loginTitle">Login</h1>
<!-- TODO: Fehlermeldungen einblenden -->
<div class=""></div>
<div class="logincontainer">
<label id="nameDef">Name</label>
<input type="text" size="40" placeholder="Name" name="username" id="userName" class="inputBox" required>
<br>
<label id="passwordDef">Passwort</label>
<input type="password" size="40" placeholder="Passwort" name="pwd" id="password" class="inputBox" required>
<br>
</div>
<div class="buttoncontainer">
<button type="button" onclick="checkForm(form)" id="submit" class="buttonBox">Login</button>
<!-- Registrierungslink-->
<span id="registrationlink"><a href="#">Registrieren?</a></span>
</div>
</form>
<!-- RightSide not used here -->
</main>
<!-- Footer not used -->
<footer>
</footer>
</body>
</html>
views/style.css 0 → 100644
+ 226
− 0
View file @ fc565b91
*{
padding:0; margin:0; border:0;
font-family:verdana;
}
.backpic {
background: url("https://www.smartfanpage.com/smartfanpage/wp-content/uploads/2017/01/Post-its.jpg") no-repeat center fixed;
background-size: cover;
}
.backcolor {
background-color: antiquewhite;
}
/*Reihenfolge*/
header {
display: block;
width: 100%;
height: 80px;
}
main {
display: block;
width: 100%;
}
#leftside {
display: block;
float:left;
width: 20%;
border: none;
}
#content{
float:left;
display:block;
width:70%;
border: none;
}
#rightside{
float: left;
display: block;
width: 10%;
border: none;
}
footer {
/*background-color: beige;*/
}
/* Main - noch korrigieren*/
main {
font-family: sans-serif;
color: darkcyan;
font-size: 20;
}
#leftside #userIcon {
margin-left: 10%;
}
#leftside #userName, #leftside #userData {
margin-left:5%;
color: black
}
#leftside #userName {
font-size: 20;
}
#leftside #userData {
font-size: 15;
}
/* Kopfzeile (Logo und Menü)*/
header {
background-color:#333;
}
#Logo {
display: inline-block;
width: auto;
height: 60px;
margin-top: 5px;
margin-left: 25px;
margin-bottom: 15px;
margin-right: 30px;
float: left;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgb(22, 43, 44);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #00c9ce;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: darkslategrey;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbutton {
background-color: darkslategrey;
}
.dropbutton {
background-color: #333;
color: #00c9ce;
padding: 15px;
font-size: 15px;
border: none;
cursor: pointer;
margin-top: 29px;
margin-left: px;
}
/* Style Buttons and Boxes*/
/* Input Boxes */
.logincontainer .inputBox:focus {
border: 1px solid #56b4ef;
box-shadow: 0px 0px 3px 1px #c8def0;
}
/* Buttons */
.buttonBox {
height:30px;
width: 70px;
font-size: 15px;
border-radius: 5px;
padding: 4px;
margin: 20px;
}
.loginform button:focus { /* TODO */
color: #fff;
background: darkslategray ;
outline: none;
}
/*Login Area*/
.loginform {
width: 480px;
height: 320px;
margin-top: 80px;
margin-left: -250px;
left: 50%;
padding: 10px;
position: absolute;
align-items: center;
background-color: rgba(18, 31, 31, 0.9);
border: 3px solid rgba(18, 31, 31, 0.9);
}
.loginform input[type=text], .loginform input[type=password] {
width: 50%;
height:30px;
font-size: 20px;
padding: 2px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
margin-left: 25%;
margin-top: 5px;
margin-bottom: 15px;
background: white;
color: black;
}
.logincontainer #passwordDef, .logincontainer #nameDef {
margin-left: 25%;
margin-top: 8px;
color: #00c9ce;
font-size: 18px;
}
#loginTitle {
font-size: 25px;
font-weight: bold;
color:azure;
margin-top: 10px;
margin-bottom: 25px;
margin-left: 41%;
width: 85px;
text-align: center;
}
/* Login Buttons */
.loginform .buttoncontainer {
margin-top: 20px;
margin-left: 25%;
}
.loginform button {
margin-left: 4%;
margin-right: 4%;
width: 25%;
height:30px;
position: relative;
margin-top: 10px;
border: none;
cursor: pointer;
background-color: gray;
color: #00c9ce;
font-size: 15px;
}
.loginform button:hover {
background-color: lightgray;
color: black;
}
.loginform #registrationlink {
position: relative;
font-size: 90%;
}
.loginform #registrationlink a{
color: #00c9ce;
text-decoration: none;
}
.loginform #registrationlink a:hover{
color: gray;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment