Scribd
Upload
4 views6 pages

JP Code

Uploaded by

Dhruvin Patel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views6 pages

JP Code

Uploaded by

Dhruvin Patel
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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