Scribd
Upload
4 views

JP Code

Uploaded by

Dhruvin Patel
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

JP Code

Uploaded by

Dhruvin Patel
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

<html >

<head>

<style>
.left{
background-color: white;
height: 500px;

padding-left: 25px;
border: 1px;
border-top-left-radius:20px ;

}
body{
margin: 0;
background-color: lightskyblue;
font-family: Arial, Helvetica, sans-serif;
}
.right{
background-color: rgb(78, 75, 221);
height: 500px;
border: 1px;
border: 1px;
border-top-right-radius: 20px;

}
.outer{
display: grid;
grid-template-columns: 400px 400px;
border: 1px;
border-radius: 20px;

}
.head{
color: rgb(57, 87, 219);
font-size: 20px;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
.ps{
margin-top: 20px;
width: 350px;
border: 1px;
border-style: solid;
border-color:gray;
background-color: white;
height: 30px;
display: block;
margin-bottom: 15px;

}
.mn{
margin-right: 10px;
width: 167px;

}
.bv{
width: 167px;
}
.jp{
display: block;
margin-top: 20px;
border-style: solid;
border-color: gray;
background-color: white;
width: 350px;

}
.np{
margin-top: 30px;
width: 350px;
}
.loop{
margin-top: 20px;
margin-right: 10px;
width: 167px;
}
.jpp{
border-style: solid;
border-color: gray;
background-color: white;
width: 167px;
}
.outer{
width: 800px;
margin-left: 250px;
border-color: white;
border-style: solid;
border-radius: 20px;
}
.r-head{
color: white;
margin-top: 20px;
margin-left: 20px;
font-size: 20px;
}
.pss{
margin-top: 20px;
width: 350px;
border: 1px;
border-style: solid;
border-color:rgb(255, 255, 255);
background-color: rgb(78, 75, 221);
height: 30px;
margin-bottom: 15px;
margin-left: 20px;

.pss::placeholder{

color: white;
}
.psss{
margin-top: 20px;
width: 100px;
border: 1px;
border-style: solid;
border-color:rgb(255, 255, 255);
background-color: rgb(78, 75, 221);
height: 30px;
margin-bottom: 15px;
margin-left: 20px;

}
.psss::placeholder{

color: white;
}
.psx{
margin-top: 20px;
width: 225px;
border: 1px;
border-style: solid;
border-color:rgb(255, 255, 255);
background-color: rgb(78, 75, 221);
height: 30px;

margin-bottom: 15px;
margin-left: 20px;
}
.psx::placeholder{

color: white;
}
.cheak-box{

width: 30px;
margin-left: 20px;
}
span{
color: white;
font-size: 15px;
}
button{
background-color: white;
color: gray;
width: 80px;
border-radius: 5px;
border-style: solid;
height: 30px;
border-color: white;
margin-left: 15px;
margin-top: 10px;
transition: box-shadow 0.25s;
}
button:hover{
box-shadow: 15px 8px 20px rgb(0, 0, 0);
}
</style>
</head>
<body>

<div class="outer">
<div class="left">
<div class="head">Genral infomation</div>
<select class="ps">
<option>Title</option>
</select>
<input class="mn"type="text" placeholder="First name">
<input class="bv"type="text" placeholder="Last name">
<select class="jp">
<option>
position
</option>
</select>
<input class="np"type="text" placeholder="position"><br>
<input class="loop" type="text" placeholder="Bussines Area">
<select class="jpp">
<option>
Employee
</option>
</select>
</div>
<div class="right">
<div class="r-head">Content Details</div>
<input type="text" class="pss" placeholder="street + Nr">
<input type="text" class="pss" placeholder="Additional information">
<input type="text" class="psss" placeholder="Zip code">
<input type="text" class="psx" placeholder="place">
<input type="text" class="pss" placeholder="Country">
<input type="text" class="psss" placeholder="code +">
<input type="text" class="psx" placeholder="phone number">
<input type="email" class="pss" placeholder="your email">
<input class="cheak-box" type="checkbox">
<span>I do accept the <u>Terms and condition </u>of your site</span>
<button>Register</button>
</div>
</div>
</body>
</html>

You might also like