As you can see, there are 6 input boxes. I want to know how to divide them into two groups: 3 to the left and 3 to the right.
body {
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
body ::-webkit-input-placeholder {
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
body :-moz-placeholder {
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
body ::-moz-placeholder {
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
body :-ms-input-placeholder {
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
.wrapper {
background: dimgrey;
position: absolute;
top: 25%;
left: 0;
width: 100%;
height: 1000px;
margin-top: -200px;
}
.wrapper.form-success .container h1 {
-webkit-transform: translateY(85px);
transform: translateY(85px);
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 80px 0;
height: 400px;
text-align: center;
}
.container h1 {
font-size: 40px;
font-weight: 200;
}
form {
padding: 20px 0;
position: relative;
z-index: 2;
}
form input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
width: 250px;
border-radius: 3px;
padding: 10px 15px;
margin: 0 auto 10px auto;
display: block;
font-size: 18px;
color: white;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
}
form input:hover {
background-color: rgba(255, 255, 255, 0.4);
}
form input:focus {
background-color: white;
width: 300px;
color: #807e80;
}
form button {
outline: 0;
background-color: white;
border: 0;
padding: 10px 15px;
color: #3a3c3d;
border-radius: 4px;
width: 250px;
cursor: pointer;
font-size: 22px;
}
form button:hover {
background-color: #f5f7f9;
}
#-webkit-keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
#keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
<div class="wrapper">
<div class="container">
<h1>Welcome</h1>
<form class="form">
<input type="text" placeholder="name">
<input type="contact" placeholder="contact number">
<input type="add" placeholder="Country">
<input type="Bday" placeholder="Birthday">
<input type="Age" placeholder="Age">
<input type="pin" placeholder="Pin number">
<button type="submit" id="sign">Sign-up</button>
</form>
</div>
</div>
How about something like this? Just a simple solution.
<form class="form" method='post'>
<div style="width:50%;float:left;">
<input type="text" name='name' placeholder="name">
<input type="tel" name='contact' placeholder="contact number">
<input type="text" name='country' placeholder="Country">
</div>
<div style="width:50%;float:left;">
<input type="date" name='bday' placeholder="Birthday">
<input type="number" name='age' placeholder="Age">
<input type="number" name='pin' placeholder="Pin number">
</div>
<button type="submit" id="sign">Sign-up</button>
</form>
I've changed the input types to valid types. You gave pin, bday etc which are not valid. You can go through this link for more information about this.
Update your HTML to use Tables:
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="body register.css"/>
</head>
<body>
<div class="wrapper">
<div class="container">
<h1>Welcome</h1>
<form class="form">
<table>
<tr><td><input type="text" placeholder="name"></td>
<td><input type="contact" placeholder="contact number"></td>
</tr>
<tr><td><input type="add" placeholder="Country"></td>
<td><input type="Bday" placeholder="Birthday"></td>
</tr>
<tr>
<td><input type="Age" placeholder="Age"></td>
<td>
<input type="pin" placeholder="Pin number"></td>
</tr>
</table>
<button type="submit" id="sign">Sign-up</button>
</form>
</div>
</div>
See this CodePen
This would be my solution using flexbox, as in the future you may have to add more inputs as well as serve it over a range of devices.
You can change the submit button as required.
.form{
display:flex;
border:1px solid black;
flex-wrap:wrap;
justify-content:space-between;
}
.form > *{
flex:1;
flex-basis:33.33%;
}
input{
display:block;
}
<div class="wrapper">
<div class="container">
<h1>Welcome</h1>
<form class="form">
<input type="text" placeholder="name">
<input type="contact" placeholder="contact number">
<input type="text" placeholder="Country">
<input type="text" placeholder="Birthday">
<input type="text" placeholder="Age">
<input type="text" placeholder="Pin number">
<button type="submit" id="sign">Sign-up</button>
</form>
</div>
</div>
Related
I'm trying to make this tribute page and since the box (where the form fields are located) I was making keeps on overlapping the title above, I tried to make the box responsive. However, the background-color disappeared after I've done it, and I don't know how to go from there. This is the HTML code by the way.
<body>
<div id="maintitle-div"><h1 id="maintitle" class="maintitle">atrovska</h1></div>
<div class="box">
<div class="content">
<h1 id="title">💬 Tell us how we're doing! 💬</h1>
<p id="description"> Your feedback matters to us and rest assured we will use this to improve our services even further. </p>
<form id="survey-form">
<label id="name-label">
Name <br> <input type="text" id="name" placeholder="Enter your Name" required> </label><br>
<label id="email-label">
Email <br> <input type="email" id="email" placeholder="Enter your Email" required></label>
<label id="number-label">
<input type="number" id="number" placeholder="Enter your phone number" required max="1" min="5">Number</label>
<p>What services did you avail?</p>
<select name="services" id="dropdown">
<option value="Internet">Internet </option>
<option value="Data">Data</option>
<option value="Post-paid">Post-Paid</option> </select><br>
<p> Please select your service provider.</p>
<input type="radio" name="provider" value="globe">Globe
<input type="radio" name="provider" value="globe">Globe
<input type="radio" name="provider" value="globe">Globe
<p> Please select your service provider.</p>
<input type="checkbox" name="provider" value="globe">Globe
<input type="checkbox" name="provider" value="globe">Globe
<input type="checkbox" name="provider" value="globe">Globe
<textarea></textarea>
<button type="submit" id="submit">Submit</button>
</form>
</div>
</div></body>
And this is the CSS.
#import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#600&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
:root {
--color-darkBlue: rgb(66, 7, 188);
}
body {
background-image: url(https://i.pinimg.com/originals/6d/25/f2/6d25f2bc9f8c59dc9d5fbab6809126f8.jpg);
background-size: cover;
background-attachment: fixed;
margin: 0;
}
#maintitle {
font-family: 'Press Start 2P', cursive;
color: rgb(255, 201, 14);
margin-top: 5px;
font-size: 48px;
margin: 30px 0 30px auto;
text-align: center;
}
.header {
padding: 0 0.625rem;
margin-bottom: 1.875rem;
}
.box {
border-radius: 15px;
position: relative;
width: 50%;
margin: 0 auto;
background-color: white;
}
.box::after {
content: "";
display: block;
padding-bottom; 100%;
width: 100%;
height: 100%;
background-color: white;
}
.content {
position: absolute;
width: 100%;
height: 100%;
background-color: white;
}
#title {
font-family: 'Fredoka One', cursive;
color: var(--color-darkBlue);
margin-top: 5px;
font-size: 24px;
margin-bottom: 2px;
text-align: center;
}
p {
font-family: 'Open Sans', sans-serif;
color: rgb(66, 7, 188);
font-size: 8px;
}
#description {
font-weight: 900;
font-size: 14px;
margin-top: 10px;
}
#survey-form {
margin: 5px 0 5px auto;
}
input {
margin: 6px 0 5px auto;
}
#survey-form {
font-family: 'Open Sans', sans-serif;
color: black;
font-size: 11px;
}
You have a CSS syntax mistake in your code.
.box::after {
content: "";
display: block;
padding-bottom; 100%;
width: 100%;
height: 100%;
background-color: white;
}
Should be:
.box::after {
content: "";
display: block;
padding-bottom: 100%;
width: 100%;
height: 100%;
background-color: white;
}
End then giving .content class to background-color works:
.content {
position: absolute;
width: 100%;
height: 100%;
background-color: red;
}
Will paint content background to red.
body {
font: 100%/1.414 "Open Sans", "Roboto", arial, sans-serif;
background: #e9e9e9;
}
a,
[type=submit] {
transition: all 0.25s ease-in;
}
.signup__container {
position: absolute;
top: 50%;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
transform: translateY(-50%);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 50rem;
height: 30rem;
border-radius: 0.1875rem;
box-shadow: 0px 0.1875rem 0.4375rem rgba(0, 0, 0, 0.25);
}
.signup__overlay {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fafafa;
}
.container__child {
width: 100%;
height: 100%;
color: #fff;
}
.signup__thumbnail {
position:relative;
padding: 1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.thumbnail__logo,
.thumbnail__content,
.thumbnail__links {
position: relative;
z-index: 2;
}
.thumbnail__logo {
align-self: flex-start;
}
.logo__shape {
fill: #fff;
}
.logo__text {
display: inline-block;
font-size: 0.8rem;
font-weight: 700;
vertical-align: bottom;
}
.thumbnail__content {
align-self:flex-end;
}
h1,
h2 {
font-weight: 300;
color: black;
}
.heading--primary {
font-size: 1rem;
}
.heading--secondary {
font-size: 1rem;
}
.thumbnail__links {
align-self: flex-end;
width: 100%;
}
.thumbnail__links a {
font-size: 1rem;
color: #fff;
}
.thumbnail__links a:focus, .thumbnail__links a:hover {
color: rgba(255, 255, 255, 0.5);
}
.signup__form {
padding: 2.5rem;
background: #fafafa;
}
label {
font-size: 0.85rem;
text-transform: uppercase;
color: #ccc;
}
.form-control {
background-color: transparent;
border-top: 111;
border-right:111;
border-left: 111;
border-radius: 2;
left: 222%;
}
.form-control:focus {
border-color: #111;
}
[type=text] {
color: #111;
}
[type=password] {
color: #111;
}
.btn--form {
padding: 0.5rem 2.5rem;
font-size: 0.95rem;
font-weight: 600;
text-transform: uppercase;
color: #fff;
background: #111;
border-radius: 2.1875rem;
}
.btn--form:focus, .btn--form:hover {
background: #323232;
}
.vr {
width: 2px;
height: 90%;
background-color:#000;
border: .0625rem solid #ccc;
position:absolute;
top:0;
bottom:0;
left:300px;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Sunrise-Spa</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,700,300'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="signup__container">
<div class="container__child signup__thumbnail">
<div class="thumbnail__logo">
<h1 class="logo__text">Enterprise Registration</h1>
</div>
<div class="thumbnail__content text-center">
<h1 class="heading--primary">Need Help.</h1>
<h2 class="heading--secondary">callfor 22222222 for assistance</h2>
</div>
<div class="signup__overlay"></div>
</div>
<div class="vr"> </div>
<div class="container__child signup__form">
<form action="#">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" name="username" id="username" placeholder="" required />
</div>
<div class="form-group">
<label for="email">Email</label>
<input class="form-control" type="text" name="email" id="email" placeholder="" required />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" name="password" id="password" placeholder="********" required />
</div>
<div class="form-group">
<label for="passwordRepeat">Repeat Password</label>
<input class="form-control" type="password" name="passwordRepeat" id="passwordRepeat" placeholder="********" required />
</div>
<div class="m-t-lg">
<ul class="list-inline">
<li>
<input class="btn btn--form" type="submit" value="PROCEED" />
</li>
</ul>
</div>
</form>
</div>
</div>
<!-- partial -->
</body>
</html>
I have divided the Signup form into two parts, left part is for displaying some content and right side is for displaying Signup form elements like Username, email, password and repeat password.
Now i want to move the signup form elements to little bit left. and at the same time need to display the horizontal line in between two sides.
Tried Creating all but having issue with(CSS PART) moving the signup form elements to little bit left. and at the same time need to display the horizontal line in between two sides.
you can use these code
body {
font: 100%/1.414 "Open Sans", "Roboto", arial, sans-serif;
background: #e9e9e9;
}
a,
[type=submit] {
transition: all 0.25s ease-in;
}
.signup__container {
position: absolute;
top: 50%;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
transform: translateY(-50%);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 50rem;
height: 30rem;
border-radius: 0.1875rem;
box-shadow: 0px 0.1875rem 0.4375rem rgba(0, 0, 0, 0.25);
}
.signup__overlay {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fafafa;
}
.container__child {
width: 100%;
height: 100%;
color: #fff;
}
.signup__thumbnail {
position:relative;
padding: 1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.thumbnail__logo,
.thumbnail__content,
.thumbnail__links {
position: relative;
z-index: 2;
}
.thumbnail__logo {
align-self: flex-start;
}
.logo__shape {
fill: #fff;
}
.logo__text {
display: inline-block;
font-size: 0.8rem;
font-weight: 700;
vertical-align: bottom;
}
.thumbnail__content {
align-self:flex-end;
}
h1,
h2 {
font-weight: 300;
color: black;
}
.heading--primary {
font-size: 1rem;
}
.heading--secondary {
font-size: 1rem;
}
.thumbnail__links {
align-self: flex-end;
width: 100%;
}
.thumbnail__links a {
font-size: 1rem;
color: #fff;
}
.thumbnail__links a:focus, .thumbnail__links a:hover {
color: rgba(255, 255, 255, 0.5);
}
.signup__form {
padding: 2.5rem 2rem 2.5rem 3rem;
background: #fafafa;
}
label {
font-size: 0.85rem;
text-transform: uppercase;
color: #ccc;
}
.form-control {
background-color: transparent;
border-top: 111;
border-right:111;
border-left: 111;
border-radius: 2;
left: 222%;
}
.form-control:focus {
border-color: #111;
}
[type=text] {
color: #111;
}
[type=password] {
color: #111;
}
.btn--form {
padding: 0.5rem 2.5rem;
font-size: 0.95rem;
font-weight: 600;
text-transform: uppercase;
color: #fff;
background: #111;
border-radius: 2.1875rem;
}
.btn--form:focus, .btn--form:hover {
background: #323232;
}
.vr {
width: 2px;
height: 100%;
background-color: #000;
border: .0625rem solid #ccc;
position: absolute;
top: 0;
bottom: 0;
left: calc(50% - 2px);
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Sunrise-Spa</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,700,300'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="signup__container">
<div class="container__child signup__thumbnail">
<div class="thumbnail__logo">
<h1 class="logo__text">Enterprise Registration</h1>
</div>
<div class="thumbnail__content text-center">
<h1 class="heading--primary">Need Help.</h1>
<h2 class="heading--secondary">callfor 22222222 for assistance</h2>
</div>
<div class="signup__overlay"></div>
</div>
<div class="vr"> </div>
<div class="container__child signup__form">
<form action="#">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" name="username" id="username" placeholder="" required />
</div>
<div class="form-group">
<label for="email">Email</label>
<input class="form-control" type="text" name="email" id="email" placeholder="" required />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" name="password" id="password" placeholder="********" required />
</div>
<div class="form-group">
<label for="passwordRepeat">Repeat Password</label>
<input class="form-control" type="password" name="passwordRepeat" id="passwordRepeat" placeholder="********" required />
</div>
<div class="m-t-lg">
<ul class="list-inline">
<li>
<input class="btn btn--form" type="submit" value="PROCEED" />
</li>
</ul>
</div>
</form>
</div>
</div>
<!-- partial -->
</body>
</html>
I am doing a vue project,but I want to create a form to log in and put an image behind the form.
I tried, but when I put the image behind the form, it did not appear on the page.
What should I do to add a picture behind the form?
Html:Here in this section I wrote HTML code.
<template>
<div>
<div class="signup-form">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<title>Bootstrap Simple Login Form with Blue Background</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form action="/examples/actions/confirmation.php" method="post">
<h2>Sign Up</h2>
<p>Please fill in this form to create an account!</p>
<hr>
<div class="form-group">
<div class="row">
<div class="col-xs-6"><input type="text" class="form-control" name="first_name"
placeholder="First Name" required="required"></div>
<div class="col-xs-6"><input type="text" class="form-control" name="last_name"
placeholder="Last Name" required="required"></div>
</div>
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" placeholder="Email"
required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password" `
required="required">`
</div>
<div class="form-group">
<input type="password" class="form-control" name="confirm_password" placeholder="Confirm
Password" required="required">
</div>
<div class="form-group">
<label class="checkbox-inline"><input type="checkbox" required="required"> I accept the
Terms of Use & Privacy Policy</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg">Sign Up</button>
</div>
</form>
<div class="hint-text">Already have an account? Login here</div>
</div> </div>
</template>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
export default {
data: {
counter: 0
}
};
</script>
Css:Here in this section i wrote Css Code.
<style scoped>
body {
color: #fff;
background: #3598dc;
font-family: 'Roboto', sans-serif;
}
.form-control{
height: 41px;
background: #f2f2f2;
box-shadow: none !important;
border: none;
}
.form-control:focus{
background: #e2e2e2;
}
.form-control, .btn{
border-radius: 3px;
}
.signup-form{
width: 390px;
margin: 30px auto;
}
.signup-form form{
color: #999;
border-radius: 3px;
margin-bottom: 15px;
background: #fff;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form h2 {
color: #333;
font-weight: bold;
margin-top: 0;
}
.signup-form hr {
margin: 0 -30px 20px;
}
.signup-form .form-group{
margin-bottom: 20px;
}
.signup-form input[type="checkbox"]{
margin-top: 3px;
}
.signup-form .row div:first-child{
padding-right: 10px;
}
.signup-form .row div:last-child{
padding-left: 10px;
}
.signup-form .btn{
font-size: 16px;
font-weight: bold;
background: #3598dc;
border: none;
min-width: 140px;
}
.signup-form .btn:hover, .signup-form .btn:focus{
background: #2389cd !important;
outline: none;
}
.signup-form a{
color: #fff;
text-decoration: underline;
}
.signup-form a:hover{
text-decoration: none;
}
.signup-form form a{
color: #3598dc;
text-decoration: none;
}
.signup-form form a:hover{
text-decoration: underline;
}
.signup-form .hint-text {
padding-bottom: 15px;
text-align: center;
}</style>
You can use CSS' position property to stack an element on top of another. Here is an example.
/** GENERAL STYLES **/
* {
box-sizing: border-box;
}
form {
width: 300px;
margin: 1em auto;
border: 1px solid #eee;
}
form .form-group label,
form .form-group input {
width: 100%;
}
form h2 {
margin: 0 0 1em;
}
/** THE FIXES **/
.relative {
position: relative;
}
form .form-content {
padding: 1em;
position: relative;
}
form .behind-form {
position: absolute;
bottom: 0;
width: 100%;
}
form .behind-form img {
width: 100%;
display: block;
}
<form class="relative">
<div class="behind-form">
<img src="https://pixabay.com/get/52e8d3454e56a914f1dc8460da29317e173edce7545972_640.jpg" />
</div>
<div class="form-content">
<h2>Sign Up</h2>
<p>Please fill in this form to create an account!</p>
<div class="form-group">
<label>Name</label>
<input type="text" />
</div>
<div class="form-group">
<label>Email</label>
<input type="text" />
</div>
</div>
</form>
<?php
// Start the session
session_start();
?>
<html>
<head>
<title>Student Registeration</title>
<link rel="stylesheet" src="text/css" >
<style>
.login-box
{
width:280px;
position:relative;
top:30%;
left:50%;
transform: translate(-50%,-50%);
color:black;
}
h1
{
margin: 0;
float:left;
font-size:38px;
border-bottom: 6px solid gold;
margin-bottom: 40px;
padding:0 0 20px;
text-align:center;
}
.login-box p
{
margin: 0;
padding: 0;
font-size: 18px;
}
.login-box input
{
width: 100%;
overflow: hidden;
margin-bottom: 20px;
margin: 8px 0;
padding:9px 0;
}
.login-box input\[type="text"\], input\[type="password"\], input\[type="email"\]
{
border: none;
outline: none;
border-bottom: 1px solid gold;
background: none;
color:gold;
font-size: 16px;
width:100%;
float:left;
}
.button
{
font-family: century gothic;
border: none;
color: white;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px 2px;
cursor: pointer;
border-radius: 19px;
background-image: linear-gradient(to right, gold , black);
}
</style>
</head>
<body>
<?php
include'header.php';
?>
<div class="login-box">
<form method="post" action="authen.php" <?php echo $_SERVER\['PHP_SELF'\]; ?>>
<h1>Create Account</h1>
<p><b>Full Name : </b></p>
<input type="text" class="textarea" id="fname" name=" fname" placeholder="Full Name" style="width:100%;" name="fname" pattern="\[A-Za-z \]+" required >
<p><b>Email :</b></p>
<input type="email" class="textarea" id="email" placeholder="Email" style="width:100%;" name="email" pattern="\[a-z0-9._%+-\]+#\[a-z0-9.-\]+\.\[a-z\]{2,}$" required>
<p><b>Username :</b></p>
<input type="text" id="user" class="textarea" placeholder="Username" style="width:100%;" name="user" pattern="\[A-Za-z0-9\]{5,}" required>
<p><b>Phone :</b></p>
<input type="text" id="phno" class="textarea" placeholder="Phone Number" style="width:100%;" name="phno" pattern="\[0-9\]{10}" required>
<p><b>Password :</b></p>
<input type="password" id="pass" placeholder="Password" class="textarea" style="width:100%;" name="pass" pattern="\[A-Za-z0-9\]{6,}" required>
<p><b>Confirm Password :</b></p>
<input type="password" id="cpass" class="textarea" placeholder="Confirm Password" style="width:100%;" name="cpass" pattern="\[A-Za-z0-9\]{6,}" required>
<p><b>Choose the following:</b></p>
<input type="radio" class="textarea" id="pfaculty" name="Faculty" value="Permanent faculty" required >Permanent Faculty
<input type="radio" class="textarea" id="vfaculty" name="Faculty" value="Visiting faculty" required >Visiting Faculty
<input type="submit" name="submit" class="Button"id="btn" value="Submit">
</form>
</div>
</body>
</html>
header.css
/*Index CSS*/
body{
color:#008080;
font-family:Century Gothic;
position: relative;
}
/*Naavigation Bar*/
div{
height:70px;
}
a{
color: #f2f2f2;
text-align: center;
text-decoration: none;
}
#Name{
float: left;
color: #f2f2f2;
text-align: center;
padding: 2px 5px;
font-size: 30px;
margin-top:12px;
}
.header {
overflow: hidden;
background-color: black;
position: fixed;
width: 100%;
top: 0;
}
.links{
float: right;
display: block;
color: #f2f2f2;
text-align: center;
margin-top:10px;
text-decoration: none;
padding: 14px 16px;
font-size: 20px;
}
.links:hover {
background-color: white;
color: #008080;
border-radius: 10px;
transition: 0.2s;
}
.header .icon {
display: none;
}
#media screen and (max-width: 600px) {
.links.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.header.responsive {
position: relative;
}
.header.responsive a {
float: none;
display: block;
text-align: left;
}
}
]1]1
Here in this code I have problem that my form overlaps my header
When I scroll down in the page it scrolls the form and overlap the header.
As I have given a picture you can see my form overlaps my header which should not happen. It should not crossover the header thats the problem.
And my radion button text is also not coming in proper format I have tried a lot things but it is not happening. So please anyone can resolve this error.
Give z-index (any value you want but greater than your form) to your header and if there is no position property in your header, add position: relative.
The Quiz is perfectly showing in firefox and Chrome, just Safari seems to have some issues. It instantly shows the last test instead of the first like chrome and firefox are doing. What am I doing wrong. (I am using Safari Version 8.0.2 (10600.2.5)).
body {
font-size: 100%;
background: white;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
font-weight: 300; }
input[type=radio],
input[type=checkbox] {
font-size: 0.8em;
position: relative;
display: inline-block;
vertical-align: middle;
border: 0.1em solid #bbbbbb;
background: none;
padding: 0.2em;
margin: 0 0.2em;
font-family: Consolas, "Courier New", monospace;
width: 1em;
height: 1em;
box-sizing: border-box;
-webkit-appearance: none; }
input[type=radio]:focus,
input[type=checkbox]:focus {
outline: 0;
border-color: #335599; }
input[type=radio] {
border-radius: 100%;
background-clip: content-box; }
input[type=radio]:checked {
background-color: #44aacc; }
h1 {
font-size: 2em;
margin: 1em auto;
text-align: center; }
.test {
position: absolute;
top: 25%;
bottom: 25%;
right: 25%;
left: 25%;
background: white; }
.test a {
display: block;
text-align: center;
padding: 0.5em 1em;
border-radius: 3px;
text-decoration: none;
background: #666666;
color: white; }
.test a:hover {
background: #4d4d4d; }
.test .question {
font-size: 1.3em;
margin: 0.5em 0;
border-bottom: 2px dashed #666666; }
.test .answer {
display: inline-block;
padding: 0.5em 1em;
cursor: pointer;
border-bottom: 4px solid white; }
.test .answer:hover {
border-color: #bbbbbb; }
.test .test {
transform: translate3d(150%, 0, 0);
transition: transform 100ms;
top: 0;
bottom: 0;
right: 0;
left: 0; }
.test .false:checked + .answer {
border-color: #dd4411; }
.test .true:checked ~ .test {
transform: translate3d(0, 0, 0); }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="quiz_test.css" type="text/css">
<meta>
<title>test</title>
</head>
<body>
<h1>A simple Quiz in pure CSS</h1>
<div class="test">
<h3 class="question">1 + 2 = ?</h3>
<input type="radio" name="1" id="1-1" class="false"> <label for="1-1" class="answer">12</label><br>
<input type="radio" name="1" id="1-2" class="true"> <label for="1-2" class="answer">3</label>
<div class="test">
<h3 class="question">red - green, orange - blue, yellow - ?</h3>
<input type="radio" name="2" id="2-1" class="false"> <label for="2-1" class="answer">magenta</label><br>
<input type="radio" name="2" id="2-2" class="true"> <label for="2-2" class="answer">purple</label><br>
<input type="radio" name="2" id="2-3" class="false"> <label for="2-3" class="answer">cyan</label>
<div class="test">
<h3 class="question">name the fish!</h3>
<input type="radio" name="3" id="3-1" class="true"> <label for="3-1" class="answer">shark</label><br>
<input type="radio" name="3" id="3-2" class="false"> <label for="3-2" class="answer">dolphin</label><br>
<input type="radio" name="3" id="3-3" class="false"> <label for="3-3" class="answer">whale</label><br>
<input type="radio" name="3" id="3-4" class="false"> <label for="3-4" class="answer">all of the above</label>
<div class="test">
<h1>YOU WIN!!!</h1>
play again
</div>
</div>
</div>
</div>
</body>
</html>
The Problem is that webkit doesnt understand the transition and transform attributes without vendor prefixes. Copy every line of transition and transform and replace the duplicate with -webkit-transision and -webkit- transform.
body {
font-size: 100%;
background: white;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
font-weight: 300; }
input[type=radio],
input[type=checkbox] {
font-size: 0.8em;
position: relative;
display: inline-block;
vertical-align: middle;
border: 0.1em solid #bbbbbb;
background: none;
padding: 0.2em;
margin: 0 0.2em;
font-family: Consolas, "Courier New", monospace;
width: 1em;
height: 1em;
box-sizing: border-box;
-webkit-appearance: none; }
input[type=radio]:focus,
input[type=checkbox]:focus {
outline: 0;
border-color: #335599; }
input[type=radio] {
border-radius: 100%;
background-clip: content-box; }
input[type=radio]:checked {
background-color: #44aacc; }
h1 {
font-size: 2em;
margin: 1em auto;
text-align: center; }
.test {
position: absolute;
top: 25%;
bottom: 25%;
right: 25%;
left: 25%;
background: white; }
.test a {
display: block;
text-align: center;
padding: 0.5em 1em;
border-radius: 3px;
text-decoration: none;
background: #666666;
color: white; }
.test a:hover {
background: #4d4d4d; }
.test .question {
font-size: 1.3em;
margin: 0.5em 0;
border-bottom: 2px dashed #666666; }
.test .answer {
display: inline-block;
padding: 0.5em 1em;
cursor: pointer;
border-bottom: 4px solid white; }
.test .answer:hover {
border-color: #bbbbbb; }
.test .test {
transform: translate3d(150%, 0, 0);
transition: transform 100ms;
-webkit-transform: translate3d(150%, 0, 0);
-webkit-transition: transform 100ms;
top: 0;
bottom: 0;
right: 0;
left: 0; }
.test .false:checked + .answer {
border-color: #dd4411; }
.test .true:checked ~ .test {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="quiz_test.css" type="text/css">
<meta>
<title>test</title>
</head>
<body>
<h1>A simple Quiz in pure CSS</h1>
<div class="test">
<h3 class="question">1 + 2 = ?</h3>
<input type="radio" name="1" id="1-1" class="false"> <label for="1-1" class="answer">12</label><br>
<input type="radio" name="1" id="1-2" class="true"> <label for="1-2" class="answer">3</label>
<div class="test">
<h3 class="question">red - green, orange - blue, yellow - ?</h3>
<input type="radio" name="2" id="2-1" class="false"> <label for="2-1" class="answer">magenta</label><br>
<input type="radio" name="2" id="2-2" class="true"> <label for="2-2" class="answer">purple</label><br>
<input type="radio" name="2" id="2-3" class="false"> <label for="2-3" class="answer">cyan</label>
<div class="test">
<h3 class="question">name the fish!</h3>
<input type="radio" name="3" id="3-1" class="true"> <label for="3-1" class="answer">shark</label><br>
<input type="radio" name="3" id="3-2" class="false"> <label for="3-2" class="answer">dolphin</label><br>
<input type="radio" name="3" id="3-3" class="false"> <label for="3-3" class="answer">whale</label><br>
<input type="radio" name="3" id="3-4" class="false"> <label for="3-4" class="answer">all of the above</label>
<div class="test">
<h1>YOU WIN!!!</h1>
play again
</div>
</div>
</div>
</div>
</body>
</html>
P.S. The snippet above doesn't run correctly in the preview box because some of stackoverflows css is interfering. It does however run correctly in the full page preview.