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>
Related
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;
}
I am making a website where people can watch videos and I want my videos to fit the screens on telephones but it wont fit. The widht does not want to change.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hamza</title>
<link rel="icon" href="profile.jpg">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/e838428f0c.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<ul>
<a class="hamxa" href="index.html">
<center>
<img class="profile-pic-1" src="profile.jpg">
</center>
<h1 class="hamza">Hamza</h1>
</a>
<div class="items">
<a href="videos.html">
<button><i class="fa-solid fa-circle-play"></i>VIDEOS</button>
</a>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSc4uB40mPR_idarZm--J8_0iM3je3ipRw4wY_L9Ka_pqYMQPg/viewform">
<button><i class="fa-solid fa-briefcase"> WORK</i></button>
</a>
</div>
</ul>
</nav>
<p></p>
<div class="container">
<div class="video-container">
<div>
<div class="video"><video poster="welcome.jpg" src="Video1.mp4"></video></div>
<p>Welcome To The Cult.</p>
</div>
</div>
<h2>New Videos</h2>
<div class="video-container">
<div>
<div class="video"><video poster="Video1.jpg" src="Video1.mp4"></video></div>
<p>BECOME THE STRONG MAN THEY NEED / TESTOSTERONE IS AT ALL TIME LOW</p>
</div>
<div>
<div class="video"><video poster="Video2.jpg" src="Video1.mp4"></video></div>
<p>7 Reasons People Dislike You Immediately</p>
</div>
<div>
<div class="video"><video poster="Video3.jpg" src="Video1.mp4"></video></div>
<p>PSYCHOLOGICAL SECRETS OF ATTRACTION</p>
</div>
</div>
<div class="popup-video">
<span>×</span>
<video src="Video1.mp4" autoplay controls></video>
</div>
</div>
<script>
document.querySelectorAll('.video-container video').forEach(vid =>{
vid.onclick = () =>{
document.querySelector('.popup-video').style.display = 'block';
document.querySelector('.popup-video video').src = vid.getAttribute('src')
}
});
document.querySelector('.popup-video span').onclick = () =>{
document.querySelector('.popup-video').style.display = 'none';
document.querySelector('.popup-video video').src = 'none';
}
</script>
</body>
</html>
Here is my CSS:
#import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Josefin Sans', sans-serif;
text-align: center;
}
h1 {
color: white;
}
h2 {
margin: 30px;
text-decoration: underline;
}
a {
color: black;
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 20px;
margin-bottom: 12px;
margin-left: 12px;
text-align: left;
text-decoration: none;
max-width: 100%;
}
p {
width: 437px;
font-size: 18px;
margin-top: 20px;
}
nav {
background: #222222;
border: 1px solid #222222;
border-right: none;
border-left: none;
}
ul {
padding: 0;
margin: 0;
}
button {
padding: 0;
border: none;
background: #222222;
color: white;
width: 100px;
height: 50px;
}
button:hover {
padding: 0;
background: white;
border: none;
color: black;
width: 100px;
height: 50px;
border-radius: 5px;
transition: 0.25s;
}
center {
margin-bottom: 30px;
}
textarea {
height: 20px;
width: 100%;
border: none;
border-bottom: 2px solid #aaa;
background-color: transparent;
margin-bottom: 10px;
resize: none;
outline: none;
transition: .5s;
}
i {
padding-right: 5px;
}
.items {
margin-bottom: 30px;
}
.profile-pic-1 {
width: 100px;
border-radius: 100px;
}
.profile-pic-1:hover {
opacity: 0.75;
transition: 0.25s;
}
.hamza {
margin-bottom: 30px;
margin-top: 0;
text-align: center;
}
.hamza:hover {
opacity: 0.75;
transition: 0.25s;
}
.container {
position: relative;
min-height: 100vh;
}
.container .video-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
padding: 10px;
}
.container .video-container .video {
height: 250px;
width: 437px;
border: 5px solid white;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0, 0, 0, .7);
cursor: pointer;
overflow: hidden;
}
.container .video-container .video video {
height: 100%;
width: 100%;
object-fit: cover;
transition: .2s linear;
}
.container .video-container .video:hover video {
transform: scale(1.1);
}
.container .popup-video {
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.8);
height: 100%;
width: 100%;
display: none;
}
.container .popup-video video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 750px;
border-radius: 5px;
border: 3px solid white;
object-fit: cover;
}
.container .popup-video span {
position: absolute;
top: 5px;
right: 20px;
font-size: 50px;
color: white;
font-weight: bold;
z-index: 100;
cursor: pointer;
}
#media (max-width: 768px){
.container .popup-video video {
width: 95%;
}
}
I have tried to change the width of the videos but it does not work. And i have no idea what to do. I am new to programing.
I'm trying fix the Log-In & registration form. When you click on "Register" on my menu, you can see that the labels are perfectly formatted in the form but the input box are offset. I tried to fix it with float:left but it didn't work out too well. If somebody could help me with that, that would be awesome.
var popup = document.getElementById('id01');
var popupreg = document.getElementById('id02');
window.onclick = function(event) {
if (event.target == popup) {
popup.style.display = "none";
}
if (event.target == popupreg) {
popupreg.style.display = "none";
}
}
body {
margin: 0 auto;
background: #fff;
}
div.container {
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding: 5px;
background-color: #000;
}
a.nounderline span {
color: #00B200;
}
.main-menu {
width: 200px;
margin: 0 auto;
right: 26px;
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
height: 35%;
}
.floating-sidebar li {
text-decoration: none;
outline: none;
line-height: 2em;
display: block;
border-radius: auto;
position: relative;
top: 10px;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
.floating-sidebar li a {
background-color: #fff;
color: #444950;
display: block;
padding: 7px;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 18;
font-weight: bold;
border-radius: 9px;
}
.floating-sidebar li a:hover {
background-color: #eee;
color: #00B200;
}
.floating-sidebar li a.active {
background-color: #eee;
color: #00B200;
}
.floating-sidebar:hover li a.register-link {
color: #b5e7a0;
background: #fff;
}
.floating-sidebar li a.active:hover {
background-color: #00B200;
color: #fff;
}
.topnav input[type=text] {
float: left;
padding: 4.5px;
padding-left: 28px;
width: 305px;
border: 2px solid #00B200;
border-radius: 18px;
outline: inherit;
margin-top: 80px;
margin-left: 115px;
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 18px;
direction: inherit;
}
input::placeholder {
color: #BEBEBE;
}
span.topnav {
right: 50px;
}
.sortby-box {
padding-top: 124px;
padding-left: 44;
margin: 0 auto;
position: fixed;
}
.select-opt {
padding: 4px;
width: 120px;
border-radius: 8px;
outline: none;
border: 1px solid #00B200;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.select-opt option {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.popup,
.popupreg {
display: none;
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.8);
/* Black w/ opacity */
padding-top: 60px;
}
.popup-content,
.popupreg-content {
float: left;
position: fixed;
background-color: rgb(245, 245, 245);
width: 600px;
height: 400px;
border-radius: 39px;
left: 666px;
top: 210px;
border: 2px solid rgb(109, 196, 109);
}
.popup,
.popupreg label {
font-family: Arial, Helvetica, sans-serif;
}
.popup [type=text],
[type=password] {
padding: 6px 8px;
width: 250px;
border-radius: 12px;
border: 1px solid gray;
outline: none;
margin: 10px 0;
margin-left: 15px;
box-sizing: border-box;
}
.popupreg [type=text],
[type=password] {
padding: 6px 8px;
width: 250px;
border-radius: 12px;
border: 1px solid gray;
outline: none;
margin: 10px 0;
margin-left: 15px;
box-sizing: border-box;
}
.popup input[type=submit] {
padding: 8px;
border-radius: 12px;
border: 1px solid gray;
outline: none;
}
.popupreg input[type=submit] {
padding: 8px;
border-radius: 12px;
border: 1px solid gray;
outline: none;
}
.popup [type=submit] {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background-color: #fff;
color: #00B200;
font-size: 22px;
padding: 180px;
margin-left: 88px;
margin-top: 5px;
width: 250px;
height: 60px;
}
.popupreg [type=submit] {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background-color: #fff;
color: #00B200;
font-size: 22px;
padding: 180px;
margin-left: 88px;
margin-top: 5px;
width: 250px;
height: 60px;
}
.popup .submit-log:hover {
color: #fff;
background-color: #00B200;
cursor: pointer;
}
.popupreg .submit-log:hover {
color: #fff;
background-color: #00B200;
cursor: pointer;
}
.cancel {
text-align: right;
position: relative;
cursor: pointer;
}
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
.username-section,
.reg-section {
padding: 32px;
margin-left: 75px;
margin-top: 20px;
}
span.psswrd {
float: right;
padding-top: 16px;
}
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
<header>
<div class="container">
Hello
</div>
</header>
<main>
<aside>
</aside>
</main>
<sidebar>
<div class="main-menu">
<ul class="floating-sidebar">
<li>Log In</li>
<li>Register</li>
<li>About</li>
<li>Language</li>
</ul>
</div>
</sidebar>
<div class="sortby-box">
<select class="select-opt">
<option>Newest</option>
<option>Popularity</option>
<option>Recommended</option>
</select>
</div>
<div class="topnav">
<input style="position:relative;" type="text" name: "searchText" placeholder="Search here.." maxlength="18">
<span style="position:absolute; left: 126px; top: 119px;" class="fa fa-search icon"></span>
</div>
<div id="id01" class="popup">
<form class="popup-content" action="/action_page.php" method="get">
<div class="cancel">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="username-section">
<label for="usrname">Username</label>
<input type="text" id="usrname" name="usrname" minlength="6" maxlength="20"><br><br>
<label for="psswrd">Password</label>
<input type="password" id="passwrd" name="psswrd" minlength="6" maxlength="20"><br><br>
<input type="submit" class="submit-log" value="Log In">
</div>
</form>
</div>
<div id="id02" class="popupreg">
<form class="popupreg-content" action="/action_page.php" method="get">
<div class="cancel">
<span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="reg-section">
<label for="usrname">Username</label>
<input type="text" id="usrname" name="usrname" minlength="6" maxlength="20"><br><br>
<label for="usrname">Mail</label>
<input type="text" id="mail" name="mail" minlength="6" maxlength="20"><br><br>
<label for="psswrd">Password</label>
<input type="password" id="passwrd" name="psswrd" minlength="6" maxlength="20"><br><br>
<input type="submit" class="submit-log" value="Register">
</div>
</form>
</div>
<script src="index.js"></script>
<footer>
</footer>
A simple fix would be to give the label elements a display: inline-block; and give them a defined width such as width: 100px;.
I quickly created a JSFiddle to illustrate.
Hope this helped.
Hello I have a search arrow on my website and right it transitions on both left and right.
Because the arrow is on the right side of my website I want it to only transition left only.
In other words I want the search icon to stay in place and not move and input to transition to the left only so you can type in the input. I hope this makes sense.
body {
background: darkgrey;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: white;
}
.search-btn {
/* position: absolute; */
color: lightblue;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: 0.4s;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
<head>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to Search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
You only need to change few properties as below:
.search-box {
position: absolute;
top:50%;
right:50%;
transform: translate(0, -50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
Please, find the complete code below. Hope it helps.
body {
background: darkgrey;
}
.search-box {
position: absolute;
top:50%;
right:50%;
transform: translate(0, -50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: white;
}
.search-btn {
/* position: absolute; */
color: lightblue;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: 0.4s;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
<head>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to Search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
Just add some focus and valid check in your css. and if you only want the input to slide left from where it is, just let me know, I will change the code
body {
background: darkgrey;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover>.search-txt , .search-txt:focus, .search-txt:valid {
width: 240px;
padding: 0 6px 0 50px;
}
.search-box:hover>.search-btn {
background: white;
}
.search-btn {
position: absolute;
color: lightblue;
left: 10px;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: 0.4s;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 40px;
}
<head>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>
<div class="search-box">
<input class="search-txt" type="text" name="" placeholder="Type to Search" required>
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
</div>
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);
}