Hi,
ich bin leider absolut scheiße mit HTML und CSS versuche aber gerade was kleines umzusetzen, krieg es aber einfach nicht hin.
Ich möchte dass die beiden div's (left und right) passend zu ihrem Klassennamen, links oder rechts vom Login Fenster stehen, dies funktioniert auch, aber leider sind diese zu hoch oder zu tief, und ich kriege es einfach nicht hin dass der Text auf einer Ebene ist.
<html>
<head>
<link href="login.css" rel="stylesheet">
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery.js"></script>
</head>
<body style="background-color: transparent;">
<div class="blurry"></div>
<div class="box">
<div class="left">
<h1><strong>News</strong></h1>
<p class="lead boxtext">Version 1.0 out now!</p>
<p class="lead boxtext">- Server is now running!</p>
<p class="lead boxtext">- Server is now running!</p>
<p class="lead boxtext">- Server is now running!</p>
<p class="lead boxtext">- Server is now running!</p>
<p class="lead boxtext">- Server is now running!</p>
</div>
<div>
<h1><strong>Login</strong></h1>
<p class="lead boxtext">Please login using your credentials.</p>
<input id="username" name="username" type="TEXT" value="" placeholder="Name">
<input id="password" name="password" type="PASSWORD" value="" placeholder="Password">
<input id="loginbtn" type="submit" name="" value="Login"><br>
<input id="forgotbtn" type="submit" name="" value="Forgot Password">
<p id="error" class="lead errortxt"></p>
</div>
<div class="right">
<h1><strong>Online Players</strong></h1>
<p class="lead boxtext">Currently online:</p>
<p class="lead boxtext">- Test</p>
<p class="lead boxtext">- Test</p>
<p class="lead boxtext">- Test</p>
<p class="lead boxtext">- Test</p>
<p class="lead boxtext">- Test</p>
</div>
</div>
</body>
</html>
Alles anzeigen
Und meine momentane CSS dazu:
.left
{
position: relative;
right: 35%;
bottom: 50%;
}
.right
{
position: relative;
left: 35%;
bottom: 50%;
}
.box{
width: 1200px;
padding: 40px;
position: absolute;
z-index: 100;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #191914;
text-align: center;
}
.box h1{
color: white;
text-transform: uppercase;
font-weight: 500;
}
.boxtext{
color: white;
}
.box input[type = "text"],.box input[type = "password"]{
border:0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 280px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type = "text"]:focus,.box input[type = "password"]:focus{
width: 300px;
border-color: #2ecc71;
}
.box input[type = "submit"]{
width:15%;
border:0;
background: none;
display: inline-block;
margin: 10px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type = "submit"]:hover{
background: #2ecc71;
}
#forgotbtn
{
border: 2px solid #b1b1b1;
width: 20%;
margin-top: 0px;
}
#forgotbtn:hover
{
background: #b1b1b1;
}
Alles anzeigen
Und momentan sieht es leider so aus:
