Issue
I'm creating a homepage for my website and want a logo (avatar) to appear on the left hand side of the page and a login form to appear on the right hand side. My current code displays a centered login box and avatar. The avatar is directly above the login box (and slightly offscreen).
Ideally I'm looking to replicate facebooks homepage theme (facebook.com)
Any ideas?
html
{% load static %}
{#<link rel="stylesheet" type="text/css" href="{% static 'homepage/style.css' %}">#}
<html lang="">
<head>
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="{% static "homepage/style.css" %}">
<body>
<div class="rows">
<div class="logo">
<img src="{% static "homepage/images/my_logo.png" %}"
class="avatar"
alt=""
width=""
height="">
</div>
<div class="login-box">
<h1>Login</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="" value="Login">
<a href="#">Forgot password?</a><br>
<a href="#">Sign-up</a><br>
</form>
</div>
</div>
</body>
</html>
css
body {
margin: 0;
padding: 0;
background-size: cover;
background: black center;
font-family: sans-serif;
}
.avatar {
float: left;
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
top: -75px;
left: calc(50% - 100px);
}
.login-box{
float: right;
width: 320px;
height: 420px;
background: #000;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
h1 {
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.login-box p {
margin: 0;
padding: 0;
font-weight: bold;
}
.login-box input {
width: 100%;
margin-bottom: 20px;
}
.login-box input[type="text"], input[type="password"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.login-box input[type="submit"] {
border: none;
outline: none;
height: 40px;
background: #ffc107;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.login-box input[type="submit"]:hover {
cursor: pointer;
background: lightgray;
color: #000;
}
.login-box a {
text-decoration: none;
font-size: 12px;
line-height: 20px;
color: darkgrey;
}
.login-box a:hover {
color: #ffc107;
}
Solution
Here is a basic example of placing two items side by side across the screen. The first uses display grid, and outlines 2 columns, the second is using flex.
img{
height: 50vh;
}
.grid-container{
display: grid;
height: 50vh;
grid-template-columns: auto 1fr;
}
.flex-container{
display: flex;
height: 50vh;
}
.login {
display: flex;
flex-direction: column;
}
<div class="grid-container">
<img src="https://picsum.photos/seed/picsum/200/200" alt="">
<div class="login">
<h1>Login</h1>
<form>
<div>
<label for="email">Email</label>
<input type="text" name="email">
</div>
<div>
<label for="paswd">Password</label>
<input type="password" name="passwd">
</div>
</form>
</div>
</div>
<div class="flex-container">
<img src="https://picsum.photos/seed/picsum/200/200" alt="">
<div class="login">
<h1>Login</h1>
<form>
<div>
<label for="email">Email</label>
<input type="text" name="email">
</div>
<div>
<label for="paswd">Password</label>
<input type="password" name="passwd">
</div>
</form>
</div>
</div>
Answered By - alechristopher
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.