Signup-Component Code
Component Code
import React from 'react'
import '../CSS/signup.css'
function Signup() {
return (
<div className="container-main">
<img src="./images/user2.gif"></img>
<label for="First Name">First Name</label>
<input type="text" placeholder='Enter the First Name'/>
<label for="E-Mail">E-Mail</label>
<input type="text" placeholder='Enter the First Name'/>
<label for="DOB">DOB</label>
<input type="text" placeholder='Enter the First Name'/>
<label for="City">DOB</label>
<select>
<option value='Kumbakonam'>Kumbakonam</option>
<option value='Chennai'>Chennai</option>
<option value='Trichy'>Thanjavur</option>
</select>
<label for="UserName">UserName</label>
<input type="text" placeholder="Enter the Name"/>
<label for="Password">Password</label>
<input type="password" placeholder="Enter the Password"/>
<input type="submit" value="Submit"></input>
<input type="reset" value="Reset"/>
</div>
)
}
export default Signup
Styles.css
.container-main
{
display: flex;
flex-direction: column;
align-items: center;
background-image: url('log1.jpg');
color:white;
width:400px;
height: auto;
transform: translate(-50%,-50%);
position: absolute;
left:50%;
top:50%;
}
img{
box-shadow: 0px 0px 15px 5px white;
border-radius: 50%;
width:100px;
display: flex;
align-items: center;
height: auto;
}
Signin -Login component
import React from 'react'
import '../CSS/regstyle.css';
function Register() {
return (
<div className="container">
<img src="./images/user.png"/>
<label for="UserName">UserName</label>
<input type="text" placeholder="Enter the Name"/>
<label for="Password">Password</label>
<input type="password" placeholder="Enter the Password"/>
<input type="submit" value="Submit"></input>
<input type="reset" value="Reset"/>
</div>
)
}
export default Register
CSS/styles.css
.container{
width:250px;
height:auto;
transform: translate(-50%,-50%);
position: absolute;
border-radius: 10px;
border: 2px solid #556366;
top:50%;
left:50%;
background-image: url('reg.jpg');
padding: 20px;
display: flex; /* make it a flex container */
flex-direction: column; /* stack items vertically */
align-items: center;
}
input[type=text]{
border: 1px solid rgb(57, 135, 180);
height:30px;
width: auto;
gap:50px;
margin-top: 10px;
}
input[type=password]{
border: 1px solid rgb(57, 135, 180);
height:30px;
width: auto;
gap:50px;
margin-top: 10px;
}
input[type=submit]{
border: 1px solid red;
height:30px;
width: auto;
background-color: green;
color:white;
gap:50px;
margin-top: 10px;
}
input[type=reset]{
border: 1px solid red;
height:30px;
width: auto;
background-color: #801700;
color:white;
gap:50px;
margin-top: 10px;
}
img{
box-shadow: 0px 0px 15px 5px white;
border-radius: 50%;
width:100px;
display: flex;
align-items: center;
height: auto;
}
2. Flex view
Component Code
import Register from './Components/Register';
import React from 'react';
function App() {
return (
<div style={{
display: 'flex',
justifyContent: 'center', // center horizontally
gap: '20px', // space between items
padding: '20px'
}}>
<Register />
<Register />
<Register />
</div>
);
}
export default App;
Change style-Use Same Code
.container{
width:250px;
height:auto;
transform: translate(-50%,-50%);
position: absolute; */
top:50%;
left:50%;
display: flex;
flex-direction: column;
border-radius: 10px;
border: 2px solid #556366;
background-image: url('reg.jpg');
padding: 20px;
align-items: center;
}
input[type=text]{
border: 1px solid rgb(57, 135, 180);
height:30px;
width: auto;
gap:50px;
margin-top: 10px;
}
input[type=password]{
border: 1px solid rgb(57, 135, 180);
height:30px;
width: auto;
gap:50px;
margin-top: 10px;
}
input[type=submit]{
border: 1px solid red;
height:30px;
width: auto;
background-color: green;
color:white;
gap:50px;
margin-top: 10px;
}
input[type=reset]{
border: 1px solid red;
height:30px;
width: auto;
background-color: #801700;
color:white;
gap:50px;
margin-top: 10px;
}
img{
box-shadow: 0px 0px 15px 5px white;
border-radius: 50%;
width:100px;
display: flex;
align-items: center;
height: auto;
}
