I am unable to make this login form responsive. it looks awesome in desktop
I've made this using html and CSS.it looks like the problem is with width or height on opening this on small devices
I've tried using overflow:hidden;
#media width
but it did not worked
I want this to be reponsive as the view of desktop
here's the code
html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Login Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="center">
<h1>Login</h1>
<form method="post">
<div class="txt_field">
<input type="text" required>
<span></span>
<label>Username</label>
</div>
<div class="txt_field">
<input type="password" required>
<span></span>
<label>Password</label>
</div>
<div class="pass">Forgot Password ? </div>
<input type="submit" value="Login">
<div class="signup_link"><span id="extext">
</span>Not a member? Signup
</div>
</form>
</div>
</body>
</html>
CSS code
*{
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
/* font-weight: bold; */
}
body{
margin: 0;
padding: 0;
background: linear-gradient(120deg,#4e718a, #3e9778);
height: 100vh;
overflow: hidden;
}
.center{
position: relative;
top: 50%;
left: 50%;
right: 50%;
transform: translate(-50%, -50%);
height: 459px;
width: 359px;
background: linear-gradient(120deg,#9b3438ce, #8f21a7e8);;
border-radius: 10px;
box-shadow: 10px 10px 15px rgb(56 45 45 / 84%);
}
#media (max-width: 920px) {
.center{
display:block;
position:relative;
height: 76vh;
width: 70vw;
}
}
.center h1{
text-align: center;
padding: 20px 0;
border-bottom: 3px solid #93c398;
}
.center form{
padding: 0 40px;
box-sizing: border-box;
}
form .txt_field{
position: relative;
border-bottom: 2px solid #adadad;
margin: 30px 0;
}
.txt_field input{
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}
.txt_field label{
position: absolute;
top: 50%;
left: 5px;
color: #a4a2a2;
transform: translateY(-40%);
font-size: 16px;
transition: .7s;
}
.txt_field span::before{
content: '';
position: absolute;
top: 40px;
left: 0;
width: 0%;
height: 2px;
background: #0a8eb6;
transition: .7s;
}
.txt_field input:focus ~ label,
.txt_field input:valid ~ label{
top: -5px;
color: 0a8eb6;
}
.txt_field input:focus ~ span::before,
.txt_field input:valid ~ span::before{
width: 100%;
}
.pass a{
text-decoration: none!important;
color: #d1dcdc;
}
.pass a:hover{
text-decoration: none!important;
font-size: 17.8px;
font-weight: 80px;
}
.pass{
text-align:right;
font-size:17px;
margin: -5px 0 15px;
}
input[type="submit"]{
width: 100%;
height: 50px;
border: 1px solid;
background: #2691d9;
border-radius: 25px;
font-size: 18px;
color: #e9f4fb;
font-weight: 700;
cursor: pointer;
outline: none;
}
input[type="submit"]:hover{
border-color: #2691d9;
transition: .5s;
}
.signup_link{
margin: 30px 0;
text-align: center;
font-size: 16px;
color: #666666;
}
.signup_link a{
color: #a6a4a4;
text-decoration: none;
}
.signup_link a:hover{
text-decoration: underline;
color: #b2afaf;
font-size:17.8px;
}
.txlog{
font-size:17px;
}
.txlog:hover{
color: rgb(118, 145, 136);
font-size: 16.7px;
font-weight: 80px;
}
Related
I've created this simple Login form for a uni project and for some reason the box around the text field is still showing, I want it to be invisible.
How the form works is; when a user clicks on either field, the placeholder lifts up and they type below it (refer to screenshot)
For some reason, however, the text box is still there.
Any help would be greatly appreciated.
.center {
position:fixed;
top: 40%;
left: 70%;
transform: translate(-50%, -50%);
width: 720px;
height: 350px;
background: linear-gradient(180deg, white, silver );
size: 100%;
border-style: solid;
border-color: black;
border-width: 1px;
}
.center h1{
text-align: center;
padding: 0 0 20px 0;
border-bottom: 1px solid silver;
}
.center form {
padding: 0 40px;
}
form .txt_field {
position: relative;
border-bottom: 2px solid #adadad;
margin: 30px 0;
}
.txt-field input {
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}
.no-outlin:focus{
outline: none;
}
.txt_field label{
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .7s;
border: none;
}
.txt_field span::before{
content: '';
position: absolute;
top: 40px;
left: 0;
width: 0%;
height: 2px;
background: #2691d9;
transition: .7s;
}
.txt_field input:focus ~ label,
.txt_field input:valid ~ label {
top: -5px;
color: #2691d9;
}
.txt_field input:focus ~ span::before,
.txt_field input:valid ~ span::before {
width: 100%;
}
.pass {
margin: -5px 0 20px 5px;
color: #a6a6a6;
cursor: pointer;
}
.pass:hover {
text-decoration: underline;
}
input[type="submit"]{
width: 100%;
height: 50px;
border: 1px solid;
background: #2691d9;
border-radius: 25px;
font-size: 18px;
color: #e9f4fb;
font-weight: 700;
cursor: pointer;
outline: none;
}
input[type="submit"]:hover{
border-color: #2691d9;
transition: .5s;
}
.signup_link {
margin: 30px;
text-align: center;
font-size: 16px;
color: #666666;
}
.signup_link a{
color: #2691d9;
text-decoration: none;
}
.signup_link a:hover{
color: #2691d9;
text-decoration: underline;
}
<head>
</head>
<body class="Body">
<div class="center">
<h1> Login </h1>
<form method="post" class="Box">
<div class="txt_field">
<input type="text" required>
<span></span>
<label>Username</label>
</div>
<div class="txt_field">
<input type="password" required>
<span></span>
<label>Password</label>
</div>
<div class="pass"> Forgotten Password? </div>
<input type="submit" value="Login">
<div class="signup_link">
Not a Member? <a class="nav-item-nav-link" routerLink="/register">Create an Account!</a>
</div>
</form>
</div>
Click here for sceenshot
There's a typo in your CSS
Change the txt-field in your CSS to txt_field
This is your code:
.center {
position: fixed;
top: 40%;
left: 70%;
transform: translate(-50%, -50%);
width: 720px;
height: 350px;
background: linear-gradient(180deg, white, silver);
size: 100%;
border-style: solid;
border-color: black;
border-width: 1px;
}
.center h1 {
text-align: center;
padding: 0 0 20px 0;
border-bottom: 1px solid silver;
}
.center form {
padding: 0 40px;
}
form .txt_field {
position: relative;
border-bottom: 2px solid #adadad;
margin: 30px 0;
}
.txt_field input {
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}
.no-outlin:focus {
outline: none;
}
.txt_field label {
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .7s;
border: none;
}
.txt_field span::before {
content: '';
position: absolute;
top: 40px;
left: 0;
width: 0%;
height: 2px;
background: #2691d9;
transition: .7s;
}
.txt_field input:focus~label,
.txt_field input:valid~label {
top: -5px;
color: #2691d9;
}
.txt_field input:focus~span::before,
.txt_field input:valid~span::before {
width: 100%;
}
.pass {
margin: -5px 0 20px 5px;
color: #a6a6a6;
cursor: pointer;
}
.pass:hover {
text-decoration: underline;
}
input[type="submit"] {
width: 100%;
height: 50px;
border: 1px solid;
background: #2691d9;
border-radius: 25px;
font-size: 18px;
color: #e9f4fb;
font-weight: 700;
cursor: pointer;
outline: none;
}
input[type="submit"]:hover {
border-color: #2691d9;
transition: .5s;
}
.signup_link {
margin: 30px;
text-align: center;
font-size: 16px;
color: #666666;
}
.signup_link a {
color: #2691d9;
text-decoration: none;
}
.signup_link a:hover {
color: #2691d9;
text-decoration: underline;
}
<head>
</head>
<body class="Body">
<div class="center">
<h1> Login </h1>
<form method="post" class="Box">
<div class="txt_field">
<input type="text" required>
<span></span>
<label>Username</label>
</div>
<div class="txt_field">
<input type="password" required>
<span></span>
<label>Password</label>
</div>
<div class="pass"> Forgotten Password? </div>
<input type="submit" value="Login">
<div class="signup_link">
Not a Member? <a class="nav-item-nav-link" routerLink="/register">Create an Account!</a>
</div>
</form>
</div>
target the input not thee div
.center {
position: fixed;
top: 40%;
left: 70%;
transform: translate(-50%, -50%);
width: 720px;
height: 350px;
background: linear-gradient(180deg, white, silver);
size: 100%;
border-style: solid;
border-color: black;
border-width: 1px;
}
.center h1 {
text-align: center;
padding: 0 0 20px 0;
border-bottom: 1px solid silver;
}
.center form {
padding: 0 40px;
}
form .txt_field {
position: relative;
border-bottom: 2px solid #adadad;
margin: 30px 0;
}
.txt_field input:focus {
outline: none;
}
.no-outlin:focus {
outline: none;
}
.txt_field label {
position: absolute;
top: 50%;
left: 5px;
color: #adadad;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .7s;
border: none;
}
.txt_field span::before {
content: '';
position: absolute;
top: 40px;
left: 0;
width: 0%;
height: 2px;
background: #2691d9;
transition: .7s;
}
.txt_field input:focus~label,
.txt_field input:valid~label {
top: -5px;
color: #2691d9;
}
.txt_field input:focus~span::before,
.txt_field input:valid~span::before {
width: 100%;
}
.pass {
margin: -5px 0 20px 5px;
color: #a6a6a6;
cursor: pointer;
}
.pass:hover {
text-decoration: underline;
}
input[type="submit"] {
width: 100%;
height: 50px;
border: 1px solid;
background: #2691d9;
border-radius: 25px;
font-size: 18px;
color: #e9f4fb;
font-weight: 700;
cursor: pointer;
outline: none;
}
input[type="submit"]:hover {
border-color: #2691d9;
transition: .5s;
}
.signup_link {
margin: 30px;
text-align: center;
font-size: 16px;
color: #666666;
}
.signup_link a {
color: #2691d9;
text-decoration: none;
}
.signup_link a:hover {
color: #2691d9;
text-decoration: underline;
}
<head>
</head>
<body class="Body">
<div class="center">
<h1> Login </h1>
<form method="post" class="Box">
<div class="txt_field">
<input type="text" required>
<span></span>
<label>Username</label>
</div>
<div class="txt_field">
<input type="password" required>
<span></span>
<label>Password</label>
</div>
<div class="pass"> Forgotten Password? </div>
<input type="submit" value="Login">
<div class="signup_link">
Not a Member? <a class="nav-item-nav-link" routerLink="/register">Create an Account!</a>
</div>
</form>
</div>
I'm trying to add and modify some animated CSS that I found to a 'subscription form' that I originally created. The problem is that the animation I found does not fit within the confines of my form (i.e., it's too big). I've tried to change the font size of the animation, but that seems to make things worse. I'm not even certain that my html is 100% correct. At best, I am a beginner. You'll find my code below:
<!DOCTYPE html>
<html>
<head>
<style>
/*Original CSS for animated text I found*/
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #343F4F;
}
.wrapper{
display: flex;
}
.wrapper .static-txt{
color: #000;
font-size: 60px;
font-weight: 400;
}
.wrapper .dynamic-txts{
margin-left: 15px;
height: 90px;
line-height: 90px;
overflow: hidden;
}
.dynamic-txts li{
list-style: none;
color: #FC6D6D;
font-size: 60px;
font-weight: 500;
position: relative;
top: 0;
animation: slide 12s steps(4) infinite;
}
#keyframes slide {
100%{
top: -360px;
}
}
.dynamic-txts li span{
position: relative;
margin: 5px 0;
line-height: 90px;
}
.dynamic-txts li span::after{
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
background: #343F4F;
border-left: 2px solid #FC6D6D;
animation: typing 3s steps(10) infinite;
}
#keyframes typing {
40%, 60%{
left: calc(100% + 30px);
}
100%{
left: 0;
}
}
/*Original CSS for my form*/
form {
border: 5px solid #000;
padding: 3px;
text-align: center;
border-left-width: 10px;
border-right-width: 10px;
width: 500px;
background-color: #efefef;
height: 200px;
}
input[type=submit] {
display: inline;
padding: 10px 30px;
font-weight: 300;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
font-size: 15px;
}
input[type=submit] {
background-color: #ff0000;
color: #fff;
border: 1px solid #000;
font-weight: bold;
}
input[type=submit]:hover,
input[type=submit]:active {
background-color: #ff5e5e;
}
.directions {
font-weight: bold;
}
input[type=text] {
width: 200px;
}
</style>
</head>
<body>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" `onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=blogspot/BKkas', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">`
<div class="wrapper">
<div class="static-txt">Subscribe</div>
<ul class="dynamic-txts">
<li><span>Enter Your Email</span></li>
<li><span>To get the most recent news</span></li>
<li><span>delivered right to your inbox.</span></li>
<li><span>SIGN-UP NOW!</span></li>
</ul>
</div>
<p><input type="text" name="email"/></p><br/>
<input type="hidden" value="blogspot/BKkas" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" />
</form>
</body>
</html>
Here is the text fit into the box.
<!DOCTYPE html>
<html>
<head>
<style>
/*Original CSS for animated text I found*/
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 80vh;
background: #343F4F;
}
.wrapper{
display: flex;
}
.wrapper .static-txt{
color: #000;
font-size: 20px;
margin-left:40px;
line-height: 90px;
font-weight: 400;
}
.wrapper .dynamic-txts{
margin-left: 15px;
height: 90px;
line-height: 90px;
overflow: hidden;
}
.dynamic-txts li{
list-style: none;
color: #FC6D6D;
font-size: 20px;
font-weight: 500;
position: relative;
top: 0;
animation: slide 12s steps(4) infinite;
}
#keyframes slide {
100%{
top: -360px;
}
}
.dynamic-txts li span{
position: relative;
margin: 5px 0;
line-height: 90px;
}
.dynamic-txts li span::after{
content: "";
position: absolute;
left: 0;
top: 0px;
height: 100%;
width: 100%;
background: #343F4F;
border-left: 2px solid #FC6D6D;
animation: typing 3s steps(10) infinite;
}
#keyframes typing {
40%, 60%{
left: calc(100% + 30px);
}
100%{
left: 0;
}
}
/*Original CSS for my form*/
form {
border: 5px solid #000;
padding: 3px;
text-align: center;
border-left-width: 10px;
border-right-width: 10px;
width: 500px;
background-color: #efefef;
height: 200px;
}
input[type=submit] {
display: inline;
padding: 10px 30px;
font-weight: 300;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
font-size: 15px;
}
input[type=submit] {
background-color: #ff0000;
color: #fff;
border: 1px solid #000;
font-weight: bold;
}
input[type=submit]:hover,
input[type=submit]:active {
background-color: #ff5e5e;
}
.directions {
font-weight: bold;
}
input[type=text] {
width: 200px;
}
</style>
</head>
<body>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" `onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=blogspot/BKkas', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<div class="wrapper">
<div class="static-txt">Subscribe</div>
<ul class="dynamic-txts">
<li><span>Enter Your Email</span></li>
<li><span>To get the most recent news</span></li>
<li><span>delivered right to your inbox.</span></li>
<li><span>SIGN-UP NOW!</span></li>
</ul>
</div>
<p><input type="text" name="email"/></p><br/>
<input type="hidden" value="blogspot/BKkas" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" />
</form>
</body>
</html>
I need to make the button and submit input type in 1 line and dont know how to do it.
I tried by changing display to inline but it doesnt work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animated Login</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<form class ="box" action = "index.html" method="post">
<h1>Login</h1>
<input type="username" name="" placeholder="Username">
<input type="password" name="" placeholder="Passeword">
<input type="submit" name="" value="Login">
<input type="button" name="" value="Register">
</form>
</body>
</html>
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box{
width: 300px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1{
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type = "username"],.box input[type = "password"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type = "username"]:focus,.box input[type = "password"]:focus{
width: 280px;
border-color: #2ecc71;
}
.box input[type = "submit"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type = "submit"]:hover{
background: #2ecc71;
}
.box input[type = "button"]{
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type = "button"]:hover{
background: #2ecc71;
}
At first try to make your question readable. Follow the rules here https://stackoverflow.com/help/how-to-ask.
I am assuming you need col-md-6 from bootstrap. Try this-
<div class='col-md-6'>
<input type="submit" name="" value="Login">
</div>
<div class='col-md-6'>
<input type="button" name="" value="Register">
</div>
You just need to remove display: block property from both of your button style and give width to the form of width:450px will make button side by side to each other, it is necassary to have form width of 450px other wise width lesser than 450px will make button one after another and will not make side by side.
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 450px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
.box input[type="username"],
.box input[type="password"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="username"]:focus,
.box input[type="password"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
.box input[type="button"] {
border: 0;
background: none;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="button"]:hover {
background: #2ecc71;
}
<form class="box" action="index.html" method="post">
<h1>Login</h1>
<input type="username" name="" placeholder="Username">
<input type="password" name="" placeholder="Passeword">
<input type="submit" name="" value="Login">
<input type="button" name="" value="Register">
</form>
i made a slidermenu, but i failed some stuff. I dont know how to make it sticky. but the biggest problem is that it looks wheird when i add it to my main file. it works fine when i run the slidebar on a clear page but when i implemnt it into this file it looks crazy. the sysmbols r not infront of the text anymore.
can anyone tell me how i can add the slidermenu to this file right
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<script src="../js/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="../css/stylesearch.css">
<link rel="icon" href="../images/logo.ico">
<link rel="stylesheet" href="../css/slidebar.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Search</title>
</head>
<body>
<div id="background-box" onclick="tag()"></div>
<div class="container" id="tag-box">
<div><a class="close-box" onclick="tag(), getValue()">×</a></div>
<br>Selectable Tags:</br>
</div>
<nav>
<script src="../js/slidebar.js"></script>
<img class="image-size" src="../images/logo.png">
<div class="bars"><i class="fa fa-bars fa-4x" id="scale" onclick="slidebar()"></i></div>
<a><img class="image-size" src="../images/menu.png" onclick=""></a>
<button id="btnabout" onclick="tag()">Tags</button>
<div class="search_box"><input type="text" name="box" id="search_text" placeholder="Search by name" class="form-control" /></div>
<div id="background-boxtitle" onclick="tag()"></div>
</nav>
<section class="sec1">
<div class="slidebar" id="slidebar"><?php include '../db/slidebar.php'; echo $slidebarbutton;?></div>
</section>
<section class="sec2">
<script src="../js/search.js"></script>
<div id="result"></div>
<div style="clear:both"></div>
</section>
<section class="sec3">
</section>
</body>
</html>
:root {
--slidermenu-color: #303030;
}
#slidebar{
position:absolute;
left:-15%;
width: 15%;
height: 100%;
transition: .5s;
background: var(--slidermenu-color);
overflow: scroll;
overflow-x: hidden;
}
#slidebar.active{
left: 0%;
}
#slidebarlock{
position: absolute;
left: -100%;
width: 85%;
height: 100%;
background: transparent;
transition: .5s;
}
#slidebarlock.active{
left: 15%;
}
.slidebarbutton {
background-color: #303030;
border: none;
color: white;
text-align: left;
text-decoration: none;
display: inline-block;
font-size: 30px;
cursor: pointer;
padding: 20px 0px;
width: 100%;
}
.slidebarbutton:hover{
background-color: #494949;
}
.bars:hover{
cursor: pointer;
}
.slidebarbutton div i{
padding-left:20px;
padding-right: 40px;
}
#slidebar::-webkit-scrollbar {
width: 5px;
}
#slidebar::-webkit-scrollbar-track {
background: var(--slidermenu-color);
}
#slidebar::-webkit-scrollbar-thumb {
background: transparent;
}
#slidebar:hover::-webkit-scrollbar-thumb{
background: black;
opacity: .8;
border-radius: 30px;
}
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #222;;
}
header{
padding: 10px 100px;
box-sizing: border-box;
}
section{
width: 100%;
height: 100vh;
}
section.sec1{
width: 100%;
height: 50px;
}
div.gallery:hover {
border: 2px solid #404040;
background: #404040;
}
div.gallery {
margin: 5px;
border: 2px solid #222;
float: left;
width: 215px;
height: 400px;
color: #fff;
}
div.gallery img {
width: 100%;
height: 80%;
}
div.desc {
padding: 15px;
text-align: center;
}
section.sec3{
padding: 100px;
box-sizing: border-box;
height: auto;
}
section.sec3 h2{
font-size: 3em;
margin:0;
padding: 0;
color: #fff;
}
nav{
width: 100%;
height: 120px;
background: url(../images/bg1.jpg);
position: sticky;
top: 0px;
}
nav ul{
display: flex;
}
.image-size{
position: absolute;
top: 10%;
right: 1%;
height: 40px;
}
.search_box{
position: absolute;
top: 20%;
left: 50%;
transform: translate(-150%, -50%);
height: 20px;
}
.search_box input[type="text"]{
width: 300%;
padding: 20px;
padding-right: 60px;
box-sizing: border-box;
background: rgba(0,0,0,0.3);
border: 2px solid #fff;
border-radius: 10px;
font-size: 18px;
color: #fff;
outline: none;
}
.fa-search{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 25px;
color: #fff;
font-size: 25px;
}
::-webkit-input-placeholder {
color: #fff;
}
::-moz-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
#media screen and (max-width: 425px){
.search_box{
width: 95%;
}
}
#tag-box{
position: absolute;
top: -120%;
left: 20%;
width: 60%;
height: 500px;
background: #000;
transition: .5s;
opacity: 0.9;
border-radius: 30px;
}
#tag-box.active{
top: 25%;
}
.container{
max-width: 60%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.container div{
margin: 5px;
}
.container div a{
font-size: 2em;
margin:0;
padding: 0;
color: #fff;
cursor: pointer;
}
.container div a:hover{
color: #f00;
}
.container div label{
cursor: pointer;
}
.container div label input[type="checkbox"]{
display: none;
}
.container div label span{
position: relative;
display: inline-block;
background: #424242;
color: #fff;
padding: 5px 10px;
color: 555;
text-shadow: 0 1px 4px rgba(0,0,0,.5);
border-radius: 15px;
font-size: 12px;
transition: 0.5s;
user-select: none;
overflow: hidden;
border: 2px solid #FFA500;
}
.container div label span:before{
content: '';
position: absolute;
top: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%
}
.container div label input[type="checkbox"]:checked ~ span{
background: #FFA500;
color: #fff;
border: 2px solid #FFA500;
box-shadow: 0 2px 15px #FFA500;
}
#background-box {
position: absolute;
top: -120%;
left: 0%;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
}
#background-box.active{
top: 0%;
}
#background-boxtitle {
position: absolute;
top: -120%;
left: 0%;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
}
#background-boxtitle.active{
top: 0%;
}
#scale{
transition: .5s;
color:white;
transform: translate(22px, 16px);
}
#scale.active{
transition: .5s;
transform: translate(22px, 16px) rotate(90deg);
}
I know I have created a similar post before this, but I did not get an answer so I thought I'd give it another shot and see if anyone can help me out here. Basically, my CSS elements are overlapping (specifically the login box, vertical line and side text classes). I tried using percentages to avoid this problem but it did not really workout.
And if I use media queries the resizing would not be accurate on a computer web browser application, right? If I were to use media queries, how would I know what to set the minimum width to if the user is resizing the window browser?
Here is my code that I have so far...
*:focus {
outline: none;
}
body {
background: #ced4da;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.login-box {
width: 300px;
height: 170px;
background: rgba(0, 0, 0, 0);
color: white;
top: 50%;
left: 33%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding-top: 12.5px;
}
.email-input-field {
position: relative;
}
.password-input-field {
position: relative;
}
.email-input-field i {
position: absolute;
left: 0px;
top: 4px;
padding: 9px 8px;
color: darkgrey;
transition: 0.3s;
}
.password-input-field i {
position: absolute;
left: 0px;
top: 4px;
padding: 9px 12px;
color: darkgrey;
transition: 0.3s;
}
.email-input-field input:focus+i,
.password-input-field input:focus+i {
color: dodgerblue;
}
.login-box .email-input-field,
.password-input-field {
margin-bottom: 10px;
}
.login-box input[type="email"],
input[type="password"] {
border: none;
background: white;
height: 40px;
font-size: 12px;
width: 83%;
padding-left: 50px;
}
.login-box input[type="submit"] {
border: none;
background-color: #3DBB96;
color: white;
outline: none;
height: 40px;
width: 100%;
font-size: 15px;
font-weight: lighter;
}
.login-box input[type="submit"]:hover {
background-color: #07A973;
}
::placeholder {
color: grey;
}
.vertical-line {
border-left: 1px solid darkgrey;
width: 1px;
height: 170px;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
}
.side-text {
width: 200px;
height: 80px;
top: 50%;
left: 63%;
position: absolute;
transform: translate(-50%, -50%);
line-height: 100%;
}
.side-text p {
font-weight: lighter;
}
.side-text h1 {
font-weight: normal;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="login-box">
<form action="Login.php" method="POST">
<div class="email-input-field">
<input type="email" name="emailPost" placeholder="Email" autocomplete="off">
<i class="fa fa-envelope fa-lg" aria-hidden="true"></i>
</div>
<div class="password-input-field">
<input type="password" name="passwordPost" placeholder="Password" autocomplete="off">
<i class="fa fa-lock fa-lg" aria-hidden="true"></i>
</div>
<input type="submit" name="submit" value="Login">
</form>
</div>
<div class="vertical-line"></div>
<div class="side-text">
<h1> COLD OPS </h1>
<p> ADMINISTRATION PANEL </p>
</div>
Thank you so much!
The quick solution:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<title> Admin Login </title>
<link rel="stylesheet" type="text/css" href="CSS/Login.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
*:focus {
outline: none;
}
body {
background: #ced4da;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.login-box {
width: 300px;
height: 170px;
background: rgba(0,0,0,0);
color: white;
box-sizing: border-box;
padding-top: 12.5px;
}
.email-input-field {
position: relative;
}
.password-input-field {
position: relative;
}
.email-input-field i {
position: absolute;
left: 0px;
top: 4px;
padding: 9px 8px;
color:darkgrey;
transition: 0.3s;
}
.password-input-field i {
position: absolute;
left: 0px;
top: 4px;
padding: 9px 12px;
color:darkgrey;
transition: 0.3s;
}
.email-input-field input:focus + i, .password-input-field input:focus + i {
color:dodgerblue;
}
.login-box .email-input-field, .password-input-field {
margin-bottom: 10px;
}
.login-box input[type="email"], input[type="password"] {
border: none;
background: white;
height: 40px;
font-size: 12px;
width: 83%;
padding-left: 50px;
}
.login-box input[type="submit"] {
border: none;
background-color: #3DBB96;
color: white;
outline: none;
height: 40px;
width: 100%;
font-size: 15px;
font-weight: lighter;
}
.login-box input[type="submit"]:hover {
background-color: #07A973;
}
::placeholder {
color: grey;
}
.splitter {
border-left: 1px solid darkgrey;
width:1px;
height: 170px;
box-sizing: border-box;
margin: 0 20px;
}
.side-text {
width: 200px;
height: 80px;
line-height: 100%;
}
.side-text p {
font-weight: lighter;
}
.side-text h1 {
font-weight: normal;
}
.wrapper {
display: flex;
align-items: center;
height: 100vh;
justify-content: center;
}
#media (max-width: 640px) {
.wrapper {
flex-direction: column;
}
.splitter {
border-top: 1px solid darkgrey;
height:1px;
width: 170px;
margin: 20px 0;
}
.side-text {
text-align: center;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class = "login-box">
<form action = "Login.php" method = "POST">
<div class = "email-input-field">
<input type = "email" name = "emailPost" placeholder = "Email" autocomplete = "off">
<i class = "fa fa-envelope fa-lg" aria-hidden = "true"></i>
</div>
<div class = "password-input-field">
<input type = "password" name = "passwordPost" placeholder = "Password" autocomplete = "off">
<i class = "fa fa-lock fa-lg" aria-hidden = "true"></i>
</div>
<input type = "submit" name = "submit" value = "Login">
</form>
</div>
<div class = "splitter"></div>
<div class = "side-text">
<h1> COLD OPS </h1>
<p> ADMINISTRATION PANEL </p>
</div>
</div>
</body>
</html>