I've created a login form using html and css. Everything was okay but then there is a problem arises when I tried to resize the width and height of the window screen by cursor. Contents inside the form are overlapping each other when I'm resizing the window screen from the bottom by cursor. I've styled the display of the body as flex but I don't know why this is happening.
Before resizing the window screen
After resizing the window screen from bottom
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
padding: 10px;
background: linear-gradient(150deg, #311432, #9400D3, #FF0000);
}
.container {
max-width: 1100px;
height: 70%;
width: 80%;
background-color: #05C3DD;
padding: 60px 30px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
}
.container .container {
margin-left: auto;
margin-right: auto;
max-width: 500px;
height: 100%;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.container .container .title {
font-size: 25px;
color: #05C3DD;
font-weight: 500;
position: relative;
margin-left: 15px;
margin-bottom: 28px;
}
.content form .login-details {
margin: 20px 0 12px 0;
}
form .login-details .input-box {
margin-bottom: 30px;
margin-left: 15px;
width: calc(100% / 2 - 20px);
}
form .input-box span .details {
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.login-details .input-box input {
height: 45px;
width: 205%;
outline: none;
font-size: 16px;
padding-left: 15px;
border: 1px solid #ccc;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.login-details .input-box input:focus,
.login-details .input-box input:valid {
border-color: #05C3DD;
}
.button {
text-align: center;
}
form .button input {
height: 40px;
width: 93%;
border: none;
color: #fff;
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(360deg, #05C3DD, #05C3DD);
}
form .button input:hover {
/* transform: scale(0.99); */
background: linear-gradient(-360deg, #71b7e6, #71b7e6);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<link rel="stylesheet" href="style2.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="container">
<div class="title">Login To Your Account</div>
<div class="content">
<form action="#">
<div class="login-details">
<div class="input-box">
<span class="details"></span>
<input type="text" placeholder="Username" required>
</div>
<div class="input-box">
<span class="details"></span>
<input type="text" placeholder="Password" required>
</div>
</div>
<div class="button">
<input type="submit" value="Login">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Your .container and body heights are fixed values which means the content won't have any affect on their layout once you start reducing the height of the window.
Try using min-height instead to allow the content to affect their layout:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body{
display: flex;
min-height: 100vh; /** min-height used here instead */
justify-content: center;
align-items: center;
padding: 10px;
background: linear-gradient(150deg, #311432, #9400D3, #FF0000);
}
.container {
max-width: 1100px;
min-height: 70%; /** min-height used here instead */
width: 80%;
background-color: #05C3DD;
padding: 60px 30px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
}
.container .container {
margin-left: auto;
margin-right: auto;
max-width: 500px;
height: 100%;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.container .container .title {
font-size: 25px;
color: #05C3DD;
font-weight: 500;
position: relative;
margin-left: 15px;
margin-bottom: 28px;
}
.content form .login-details {
margin: 20px 0 12px 0;
}
form .login-details .input-box {
margin-bottom: 30px;
margin-left: 15px;
width: calc(100% / 2 - 20px);
}
form .input-box span .details {
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.login-details .input-box input {
height: 45px;
width: 205%;
outline: none;
font-size: 16px;
padding-left: 15px;
border: 1px solid #ccc;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.login-details .input-box input:focus,
.login-details .input-box input:valid {
border-color: #05C3DD;
}
.button {
text-align: center;
}
form .button input {
height: 40px;
width: 93%;
border: none;
color: #fff;
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(360deg, #05C3DD, #05C3DD);
}
form .button input:hover {
/* transform: scale(0.99); */
background: linear-gradient(-360deg, #71b7e6, #71b7e6);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<link rel="stylesheet" href="style2.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="container">
<div class="title">Login To Your Account</div>
<div class="content">
<form action="#">
<div class="login-details">
<div class="input-box">
<span class="details"></span>
<input type="text" placeholder="Username" required>
</div>
<div class="input-box">
<span class="details"></span>
<input type="text" placeholder="Password" required>
</div>
</div>
<div class="button">
<input type="submit" value="Login">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Related
im having issues with my login page, so im trying to make the page responsive to the mobile version, but there's some problems:
1.When the page turn to the mobile version, the login box shrinks but the left side of it just goes over the the screen, same goes to the top part of it.
2.The footer won't stick to the bottom of the page.
3.Is there a way to create some space around the login box when it shrinks?
I included a picture of when the page turn to the mobile version, and its the exact appearance i got when i open it from my LenovoA2010 which is 480x854 pixels wide :
Picture Here!
Sorry if i wasn't clear enough, this is my first question here and i just started learning Front-End Web Development like about 2 weeks ago, feeling real noob here.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #ebe682;
}
.login-content {
display: block;
justify-content: flex-start;
align-items: center;
text-align: center;
}
form {
width: 380px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: whitesmoke;
text-align: center;
border-radius: 14px;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
}
.avatar {
width: 100px;
height: 100px;
position: absolute;
left: calc(50% - 50px);
top: -50px;
background: whitesmoke;
border-radius: 90%;
}
form>h1 {
color: #18191a;
text-transform: capitalize;
font-weight: 700;
letter-spacing: 3px;
margin-top: 30px;
}
form>h3 {
color: #18191a;
font-weight: normal;
letter-spacing: normal;
margin-top: 8px;
margin-bottom: 30px;
}
form input[type="text"],
form input[type="password"] {
border: 2px solid #18191a;
background: none;
display: block;
margin: 20px auto;
text-align: center;
padding: 14px 10px;
width: 200px;
outline: none;
color: #18191a;
border-radius: 24px;
transition: 0.5s;
}
form input[type="text"]:focus,
form input[type="password"]:focus {
width: 280px;
border-color: #b0b3b8;
}
form input[type="submit"] {
border: none;
background: #18191a;
display: block;
margin: 20px auto;
text-align: center;
padding: 14px 10px;
outline: none;
color: whitesmoke;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
width: 200px;
}
form input[type="submit"]:hover {
background: #3a3b3c;
}
a {
width: 200px;
display: block;
margin: 20px auto;
text-decoration: none;
color: #18191a;
}
a:hover {
color: #3a3b3c;
text-decoration: underline;
}
footer {
background: #E4DD56;
color: #18191a;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
padding: 1em;
box-shadow: 0 0 10px #777;
}
/* Mobile Styles */
#media only screen and (max-width: 400px) {
body {
background-color: #F09A9D;
/* Red */
}
}
/* Tablet Styles */
#media only screen and (min-width: 401px) and (max-width: 960px) {
body {
background-color: #F5CF8E;
/* Yellow */
}
}
/* Desktop Styles */
#media only screen and (min-width: 961px) {
body {
background-color: #ebe682;
/* Blue */
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Login Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-content">
<form action="" method="">
<img class="avatar" src="resources/icons/user-avatar-filled.svg" alt="">
<h1>Sign In</h1>
<h3>to continue to Onyi</h3>
<input type="text" name="" placeholder="Username">
<input type="password" name="" placeholder="Password">
<input type="submit" name="" value="Login">
<hr>
Forgot password?
</form>
</div>
<footer>
© 2021 Company, Inc
</footer>
</body>
</html>
since you gave the white box a fixed 380px width it will not react to screen change what you can do instead is to use max-width with width to get what you want
.your-form{
max-width: 380px;
width: 100%;
}
this way you tell your box to expand as much as it wants but never go beyond 380px. this way you get a nice responsive form
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #ebe682;
}
.login-content {
display: block;
justify-content: flex-start;
align-items: center;
text-align: center;
padding: 20px;
}
form {
max-width: 380px;
width: 100%;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: whitesmoke;
text-align: center;
border-radius: 14px;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
}
.avatar {
width: 100px;
height: 100px;
position: absolute;
left: calc(50% - 50px);
top: -50px;
background: whitesmoke;
border-radius: 90%;
}
form>h1 {
color: #18191a;
text-transform: capitalize;
font-weight: 700;
letter-spacing: 3px;
margin-top: 30px;
}
form>h3 {
color: #18191a;
font-weight: normal;
letter-spacing: normal;
margin-top: 8px;
margin-bottom: 30px;
}
form input[type="text"],
form input[type="password"] {
border: 2px solid #18191a;
background: none;
display: block;
margin: 20px auto;
text-align: center;
padding: 14px 10px;
width: 200px;
outline: none;
color: #18191a;
border-radius: 24px;
transition: 0.5s;
}
form input[type="text"]:focus,
form input[type="password"]:focus {
width: 280px;
border-color: #b0b3b8;
}
form input[type="submit"] {
border: none;
background: #18191a;
display: block;
margin: 20px auto;
text-align: center;
padding: 14px 10px;
outline: none;
color: whitesmoke;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
width: 200px;
}
form input[type="submit"]:hover {
background: #3a3b3c;
}
a {
width: 200px;
display: block;
margin: 20px auto;
text-decoration: none;
color: #18191a;
}
a:hover {
color: #3a3b3c;
text-decoration: underline;
}
footer {
background: #E4DD56;
color: #18191a;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
padding: 1em;
box-shadow: 0 0 10px #777;
}
/* Mobile Styles */
#media only screen and (max-width: 400px) {
body {
background-color: #F09A9D;
/* Red */
}
}
/* Tablet Styles */
#media only screen and (min-width: 401px) and (max-width: 960px) {
body {
background-color: #F5CF8E;
/* Yellow */
}
}
/* Desktop Styles */
#media only screen and (min-width: 961px) {
body {
background-color: #ebe682;
/* Blue */
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Login Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-content">
<form action="" method="">
<img class="avatar" src="resources/icons/user-avatar-filled.svg" alt="">
<h1>Sign In</h1>
<h3>to continue to Onyi</h3>
<input type="text" name="" placeholder="Username">
<input type="password" name="" placeholder="Password">
<input type="submit" name="" value="Login">
<hr>
Forgot password?
</form>
</div>
<footer>
© 2021 Company, Inc
</footer>
</body>
</html>
I am trying to create a simple form using material design component and it doesn't work properly placeholder doesn't removed when i starts entering the details how can i do this and i also tried using the filled also but on that also i am not able to remove the background placeholder here is my tried code and i have added all the material library required for this https://material.io/develop/web/docs/getting-started
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#get-started {
background-color: #9e0b0f;
border: 0;
border-radius: 0;
font-family: "NewsGothicBold", san-serif !important;
text-transform: uppercase;
margin: auto;
display: block;
padding: 10px 22px 5px 25px;
font-size: 18px;
font-weight: normal;
margin-top: 20px;
}
.forms {
font-family: "NewsGothicBold", san-serf;
width: 390px;
margin: 20px auto 0;
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
padding: 0 0 40px;
border-radius: 8px;
color: #555;
background-color: #fff;
}
.username,
.password {
display: flex;
margin: 20px auto;
width: 300px;
}
.mdc-text-field {
width: 350px;
margin-top: 20px;
margin-left: 20px;
}
.mdc-select {
width: 350px;
margin-top: 20px;
margin-left: 20px;
}
#media (max-width: 450px) {
.forms {
font-family: "NewsGothicBold", san-serf;
width: 330px;
margin-top: 20px !important;
margin: 0 auto;
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
padding: 0 0 40px;
border-radius: 8px;
color: #555;
background-color: #fff;
}
.mdc-text-field {
width: 290px;
margin-top: 20px;
margin-left: 20px;
}
.mdc-select {
width: 290px;
margin-top: 20px;
margin-left: 20px;
}
}
</style>
</head>
<body>
<div class="forms">
<form>
<label class="mdc-text-field mdc-text-field--outlined">
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading"></span>
<span class="mdc-notched-outline__notch">
<span class="mdc-floating-label" id="my-label-id">Your Name</span>
</span>
<span class="mdc-notched-outline__trailing"></span>
</span>
<input
type="text"
class="mdc-text-field__input"
aria-labelledby="my-label-id"
/>
</label>
<label class="mdc-text-field mdc-text-field--outlined">
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading"></span>
<span class="mdc-notched-outline__notch">
<span class="mdc-floating-label" id="my-label-id"
>Your EMAIL</span
>
</span>
<span class="mdc-notched-outline__trailing"></span>
</span>
<input
type="text"
class="mdc-text-field__input"
aria-labelledby="my-label-id"
/>
</label>
<button class="mdc-button mdc-button--raised mt-10" id="get-started">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">DOWNLOAD YOUR GUIDE</span>
</button>
</form>
</div>
</body>
</html>
Hello, I tried to use your code and it looks like the input is at the front and the placeholder your saying is at the back. If you still don't understand me. Remove the class on the input like this:
<input
type="text"
//remove the class
aria-labelledby="my-label-id"
/>
so I think you have to use other form design. Or like this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<style>
#get-started {
background-color: #9e0b0f;
border: 0;
border-radius: 0;
font-family: "NewsGothicBold", san-serif !important;
text-transform: uppercase;
margin: auto;
display: block;
padding: 10px 22px 5px 25px;
font-size: 18px;
font-weight: normal;
margin-top: 20px;
}
.forms {
font-family: "NewsGothicBold", san-serf;
width: 390px;
margin: 20px auto 0;
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
padding: 0 0 40px;
border-radius: 8px;
color: #555;
background-color: #fff;
}
input[type="text"] {
width: 100%;
padding: 20px;
box-sizing: border-box;
height: 46px;
border: 1px solid rgb(172, 172, 172);
border-radius: 4px;
}
.mdc-text-field--outlined {
height: 56px;
overflow: visible;
}
.username,
.password {
display: flex;
margin: 20px auto;
width: 300px;
}
.mdc-text-field {
width: 350px;
margin-top: 20px;
margin-left: 20px;
}
.mdc-select {
width: 350px;
margin-top: 20px;
margin-left: 20px;
}
#media (max-width: 450px) {
.forms {
font-family: "NewsGothicBold", san-serf;
width: 330px;
margin-top: 20px !important;
margin: 0 auto;
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
padding: 0 0 40px;
border-radius: 8px;
color: #555;
background-color: #fff;
}
.mdc-text-field {
width: 290px;
margin-top: 20px;
margin-left: 20px;
}
.mdc-select {
width: 290px;
margin-top: 20px;
margin-left: 20px;
}
}
</style>
</head>
<body>
<div class="forms">
<form>
<label class="mdc-text-field mdc-text-field--outlined">
<input
type="text"
placeholder="Your Name"
aria-labelledby="my-label-id"
/>
</label>
<label class="mdc-text-field mdc-text-field--outlined">
<input
type="text"
placeholder="Your Name"
aria-labelledby="my-label-id"
/>
</label>
<button class="mdc-button mdc-button--raised mt-10" id="get-started">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">DOWNLOAD YOUR GUIDE</span>
</button>
</form>
</div>
</body>
</html>
let me know if I helped, Good Luck. Take Care😀😀😀!!!
I am making a responsive login page and i did everything correctly this is my html code
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #c6faff;
font-family: Segoe WP Black;
}
.form-box {
position: absolute;
width: 715px;
height: auto;
min-height: 400px;
background-image: linear-gradient(to right top, #051937, #10325f, #184f8b, #1b6dba, #128deb);
opacity: .8;
left: 50%;
bottom: 50%;
transform: translate(-50%, 50%);
border-radius: 5px;
color: black;
}
.form-left-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
background-color: #fff1ff;
height: 100%;
min-height: 400px;
padding: 7px;
border: 3px solid black;
color: black;
}
.form-right-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
height: 100%;
padding-left: 15px;
min-height: 400px;
background-color: #fff1ff;
padding: 7px;
border: 3px solid black;
border-left: none;
color: black;
padding-left: 10px;
}
.text-field {
margin-top: 20px;
border: none;
outline: none;
opacity: .9;
padding: 7px;
background: none;
border-bottom: 2px solid #2196F3;
transition: .5s;
}
.submit {
background-image: linear-gradient(to right, #ed00af, #f81795, #fc327f, #fb496c, #f65e5e);
color: white;
padding: 7px;
width: 160px;
height: 50px;
font-size: 15px;
border: 2px solid grey;
font-weight: bold;
font-family: Segoe WP Black;
cursor: pointer;
transition: .7s;
outline: none;
border-radius: 20px 0px 20px 0px;
}
.text-field:focus {
padding: 8px;
border-bottom: 3px solid black;
font-size: 16px;
}
.submit:hover {
border-radius: 0px 20px 0px 20px;
box-shadow: 5px 10px 20px rgb(0, 0, 0, .3);
width: 170px;
height: 60px;
transition: .7s;
}
.text-field::placeholder {
color: black;
opacity: 1; /* Firefox */
font-size: 13px;
}
.text-field:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
.text-field::-ms-input-placeholder { /* Microsoft Edge */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
#media screen and (max-width: 730px) {
.form-box {
width: 100%;
height: auto;
min-height: 0;
left: 0;
bottom: 0;
transform: translate(-0, 0);
}
.form-left-side {
position: relative;
width: 97.1%;
float: none;
display: block;
max-width: none;
min-height: 300px;
height: auto;
text-align: center;
}
.form-right-side {
position: relative;
width: 96.7%;
float: none;
display: block;
border-left: 3px solid black;
max-width: none;
}
.text-field {
width: 70%;
}
}
<html>
<head>
<title>Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, intital-scale=1">
</head>
<body>
<div class="form-box">
<div class="form-left-side">
<center><h2 style="font-size:20px;">Register For Best Performance</h2>
<p>When You Register at This Site You Can Use Our Features
And Have The Best Performance Here Thank You For Joining Us!<br>
Never Foget This You Can Do Anything at This Site And
This is For Everyone And We Won't do Building a Website For Just Somebody !
</p>
</center>
</div>
<div class="form-right-side">
<h2>Login</h2>
<form>
<label for="fname">Username: </label><br><center>
<input type="text" name="fname" value="" class="text-field" placeholder="Username" />
<br /><br /><br></center>
<label for="fname">Password: </label>
<br /><center>
<input type="password" name="password" value="" class="text-field" placeholder="Password" />
<br><br><br></center>
<center><input type="submit" name="submit" value="Submit" class="submit">
<br></center>
</form>
</div>
</div>
</body>
</html>
When I resize the screen down to 730 pixel that works correct but my text in form-left-side goes up and there is not something that I can scroll and my text first lines are not visible
notice that i don't wanna take my min-height to lower and i want it to be 300 px if you can help me thank you
and loook also when it is runing on snippet on this site you can not scroll up so that is a problem
and my browser is opera
Your problem happens because you are absolutely positioning from the bottom of the page, changing it to top solves the problem. :)
Also you can add position: relative to your media query, to make sure it won't go out of screen. :)
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #c6faff;
font-family: Segoe WP Black;
}
.form-box {
position: absolute;
width: 715px;
height: auto;
min-height: 400px;
background-image: linear-gradient(to right top, #051937, #10325f, #184f8b, #1b6dba, #128deb);
opacity: .8;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
color: black;
}
.form-left-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
background-color: #fff1ff;
height: 100%;
min-height: 400px;
padding: 7px;
border: 3px solid black;
color: black;
}
.form-right-side {
position: relative;
float: left;
width: 50%;
max-width: 337px;
height: 100%;
padding-left: 15px;
min-height: 400px;
background-color: #fff1ff;
padding: 7px;
border: 3px solid black;
border-left: none;
color: black;
padding-left: 10px;
}
.text-field {
margin-top: 20px;
border: none;
outline: none;
opacity: .9;
padding: 7px;
background: none;
border-bottom: 2px solid #2196F3;
transition: .5s;
}
.submit {
background-image: linear-gradient(to right, #ed00af, #f81795, #fc327f, #fb496c, #f65e5e);
color: white;
padding: 7px;
width: 160px;
height: 50px;
font-size: 15px;
border: 2px solid grey;
font-weight: bold;
font-family: Segoe WP Black;
cursor: pointer;
transition: .7s;
outline: none;
border-radius: 20px 0px 20px 0px;
}
.text-field:focus {
padding: 8px;
border-bottom: 3px solid black;
font-size: 16px;
}
.submit:hover {
border-radius: 0px 20px 0px 20px;
box-shadow: 5px 10px 20px rgb(0, 0, 0, .3);
width: 170px;
height: 60px;
transition: .7s;
}
.text-field::placeholder {
color: black;
opacity: 1; /* Firefox */
font-size: 13px;
}
.text-field:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
.text-field::-ms-input-placeholder { /* Microsoft Edge */
color: red;
opacity: .8; /* Firefox */
font-size: 13px;
}
#media screen and (max-width: 730px) {
.form-box {
width: 100%;
height: auto;
min-height: 0;
left: 0;
top: 0;
transform: translate(0, 0);
position: relative;
}
.form-left-side {
position: relative;
width: 97.1%;
float: none;
display: block;
max-width: none;
min-height: 300px;
height: auto;
text-align: center;
}
.form-right-side {
position: relative;
width: 96.7%;
float: none;
display: block;
border-left: 3px solid black;
max-width: none;
}
.text-field {
width: 70%;
}
}
<html>
<head>
<title>Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, intital-scale=1">
</head>
<body>
<div class="form-box">
<div class="form-left-side">
<center><h2 style="font-size:20px;">Register For Best Performance</h2>
<p>When You Register at This Site You Can Use Our Features
And Have The Best Performance Here Thank You For Joining Us!<br>
Never Foget This You Can Do Anything at This Site And
This is For Everyone And We Won't do Building a Website For Just Somebody !
</p>
</center>
</div>
<div class="form-right-side">
<h2>Login</h2>
<form>
<label for="fname">Username: </label><br><center>
<input type="text" name="fname" value="" class="text-field" placeholder="Username" />
<br /><br /><br></center>
<label for="fname">Password: </label>
<br /><center>
<input type="password" name="password" value="" class="text-field" placeholder="Password" />
<br><br><br></center>
<center><input type="submit" name="submit" value="Submit" class="submit">
<br></center>
</form>
</div>
</div>
</body>
</html>
I have a little question about CSS and image buttons. I searched and tryed many options but none of them worked for me.
I need to link my image button in the CSS style. When you push the image a new webpage opens where you can take a picture of yourself. But my image stays at the same position no matter what I change.
If I use the code that is written on How to link an image and target a new window then my image stays at the bottom.
body {
margin: 0;
padding: 0;
background: url(basf.jpg);
background-size: cover;
font-family: sans-serif;
}
.loginBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 80px 40px;
width: 350px;
height: 500px;
box-sizing: border-box;
background: rgba(0, 0, 0, .5);
}
.user {
width: 130px;
height: 130px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: calc(-150px/2);
left: calc(50% - 65px);
}
button.imgbtn1 {
width: 70px;
height: 70px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: calc(-20px/2);
left: calc(50% - -30px);
cursor: pointer;
}
h2 {
margin: 0;
padding: 0 0 20px;
color: deepskyblue;
text-align: center;
}
.loginBox p {
margin: 0;
padding: 0;
font-weight: bold;
color: #fff;
}
.loginBox input {
width: 100%;
margin-bottom: 20px;
}
.loginBox input[type="text"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
::placeholder {
color: rgba(255, 255, 255, .5);
}
.loginBox input[type="submit"] {
border: none;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
background: deepskyblue;
cursor: pointer;
border-radius: 20px;
}
.loginBox input[type="submit"]:hover {
background: #deepskyblue;
color: #262626;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Registration Form</title>
<link rel="stylesheet" type="text/css" href="style3.css">
</head>
<body>
<div class="loginBox">
<img src="user.png" class="user">
<h2>Meld u aan</h2>
<form>
<p>Naam</p>
<input type="text" name="" placeholder="Naam">
<p>Voornaam</p>
<input type="text" name="" placeholder="Voornaam">
<p>Bedrijf</p>
<input type="text" name="" placeholder="Bedrijf">
<p>Doel
<p>
<input type="text" name="" placeholder="Doel">
<input type="submit" id="btnClick" value="zend" />
<img src="foto.png" />
</form>
</div>
</body>
</html>
After playing around for a while I have found something that works.
html:
<center><div id = "imgPositioning">
<img id = "imgOne" class = "user" src="user.png" />
<img src="foto.png" id = "imgTwo" class="user"/>
</div></center>
css:
#imgPositioning{
display:inline;
}
#imgTwo{
height:100px;
width:200px;
}
#imgOne{
height:50px;
width:100px;
float:center;
}
The answer. (found it with help from a friend). Now I need to do a bit of restyling.
Thanks for the answers! ;)
body {
margin: 0;
padding: 0;
background: url(basf.jpg);
background-size: cover;
font-family: sans-serif;
}
.user-picture {
position: absolute;
top: -25px;
width: 100%;
}
.user-picture-box {
max-width: 150px;
height: 150px;
margin: 0 auto;
position: center;
}
.user-picture-image {
width: 130px;
height: 130px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: calc(-150px/2);
left: calc(50% - 70px);
}
.user-create-picture {
width: 70px;
height: 70px;
border-radius: 50%;
position: absolute;
top: calc(-20px/2);
left: calc(50% - -30px);
cursor: pointer;
}
.user-create-picture ('img') {
width: 70px;
height: 70px;
border-radius: 50%;
position: absolute;
top: calc(-20px/2);
left: calc(50% - -30px);
cursor: pointer;
}
.login-box {
display: block;
position: relative;
background-color: rgba(0, 0, 0, .5);
margin: 100px auto 0px auto;
max-width: 350px;
}
.login-form {
padding: 80px 20px 20px 20px;
}
.login-box h2 {
color: deepskyblue;
text-align: center;
}
.login-box label {
margin: 0;
padding: 0;
font-weight: bold;
color: #fff;
}
.login-box input {
width: 100%;
}
.login-box input[type="text"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
margin-bottom: 20px;
}
::placeholder {
color: rgba(255, 255, 255, .5);
}
.login-box input[type="submit"] {
border: none;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
background: deepskyblue;
cursor: pointer;
border-radius: 20px;
}
.login-box input[type="submit"]:hover {
background: deepskyblue;
color: #262626;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Registration Form</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="login-box">
<div class="user-picture">
<div class="user-picture-box">
<img src="user.png" class="user-picture-image">
<a href="http://localhost/Form/foto.html" class="user-create-picture">
<img src="foto.png" height="70px" width="70px">
</a>
</div>
</div>
<div class="login-form">
<h2>Meld u aan</h2>
<form>
<label for="naam">Naam</label>
<input type="text" id="naam" name="naam" placeholder="Naam">
<label for="voornaam">Voornaam</label>
<input type="text" id="voornaam" name="voornaam" placeholder="Voornaam">
<label for="bedrijf">Bedrijf</label>
<input type="text" id="bedrijf" name="bedrijf" placeholder="Bedrijf">
<label for="doel">Doel</label>
<input type="text" id="doel" name="doel" placeholder="Doel">
<input type="submit" id="btnClick" value="zend" />
</form>
</div>
</div>
</body>
</html>
end result picture
Recently I made a post to see if anyone was able to help me horizontally align my div to the center of my page. After some tweaking I was able to vertically align my LoginBox to where I needed it to be but sadly, I dont seem to be able to move the Username section and Password section to where I would like this to go, I would appreciate any support given and I understand this is probably very simple to achieve but as someone who is pretty new to coding I love to see the help and support if I don't understand something, I've provided the source code below, and I have also provided a jsfiddle incase it is needed. https://jsfiddle.net/BeastFox/36vet66q/
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:100" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</head>
<body>
<div class="LoginBox" style="">
<a class="Login">Login</a>
<input type="text" name="" class="username" placeholder="Username">
<input type="password" name="" class="password" placeholder="Password">
</div>
</body>
</html>
And here is the css.
body,html {
background: repeating-linear-gradient(
to right,
#141517,
#141517 30px,
#1d1f21 30px,
#1d1f21 40px
);
background-size: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
.username {
display: block;
margin: 0 auto;
background: #333;
color: #ccc;
width: 150px;
padding: 6px 15px 6px 5px;
transition: 500ms all ease;
border: 1px solid #333;
margin-bottom: 10px;
text-align: center;
vertical-align: middle;
}
.username:hover {
box-shadow: 0px 0px 4px #000;
}
.password {
padding-top: 30;
text-align: center;
display: block;
margin: 0 auto;
background: #333;
color: #ccc;
width: 150px;
padding: 6px 15px 6px 5px;
transition: 500ms all ease;
border: 1px solid #333;
}
.password:hover {
box-shadow: 0px 0px 4px #000;
}
.LoginBox {
left: 40%;
top: 30%;
position: fixed;
padding-top: 50 auto;
width: 300px;
height: 300px;
margin: 0 auto;
padding: 25px;
background-color: firebrick;
z-index: -3;
box-shadow: 0px 0px 5px #000;
}
.Login {
display: block;
width: 100%;
text-align: center;
font-size: 30px;
font-family: 'Roboto Condensed', sans-serif;
color: #FFF;
}
Thank you for any help that you can provide me with,
Your's most sincerely,
David.
You can align the LoginBox content by...
Wrapping the content in new div.
Adding flexbox properties to LoginBox, which will position the new div.
fiddle
body,
html {
background: repeating-linear-gradient( to right, #141517, #141517 30px, #1d1f21 30px, #1d1f21 40px);
background-size: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
.username {
display: block;
margin: 0 auto;
background: #333;
color: #ccc;
width: 150px;
padding: 6px 15px 6px 5px;
transition: 500ms all ease;
border: 1px solid #333;
margin-bottom: 10px;
text-align: center;
vertical-align: middle;
}
.username:hover {
box-shadow: 0px 0px 4px #000;
}
.password {
padding-top: 30;
text-align: center;
display: block;
margin: 0 auto;
background: #333;
color: #ccc;
width: 150px;
padding: 6px 15px 6px 5px;
transition: 500ms all ease;
border: 1px solid #333;
}
.password:hover {
box-shadow: 0px 0px 4px #000;
}
.LoginBox {
left: 40%;
top: 30%;
position: fixed;
padding-top: 50 auto;
width: 300px;
height: 300px;
margin: 0 auto;
padding: 25px;
background-color: firebrick;
z-index: -3;
box-shadow: 0px 0px 5px #000;
display: flex;
align-items: center;
justify-content: center;
}
.Login {
display: block;
width: 100%;
text-align: center;
font-size: 30px;
font-family: 'Roboto Condensed', sans-serif;
color: #FFF;
margin-bottom: 1em; /* create space between 'Login' and inputs */
}
<div class="LoginBox" style="">
<div class="LoginBox-inner">
<a class="Login">Login</a>
<input type="text" name="" class="username" placeholder="Username">
<input type="password" name="" class="password" placeholder="Password">
</div>
</div>
Changed your css a bit. Added a wrapper element to the fields. Set the parent element(LoginBox) to display:table and element_wrapper to display:table-cell;. Then vertically align the element_wrapper.
<div class="element_wrapper">
<a class="Login">Login</a>
<input type="text" name="" class="username" placeholder="Username">
<input type="password" name="" class="password" placeholder="Password">
</div>
Refer this fiddle https://jsfiddle.net/07753vwx/