<div class="container">
      <div class="form_wrapper">

         <div class="form_caption">
               <div class="web_image">
                 <figure>
                     <img src="https://i.postimg.cc/Y9JzsDD3/img.png" alt="web png" width="220px">
                 </figure>
               </div>
               <div class="caption">
                 <h2>welcome</h2>
                 <p>Dummy text is also used to demonstrate the appearance of different typefaces and layouts</p>
                 <a href="#">check form</a>
               </div>
         </div>

<!-- form_start -->

<div class="main_form">
        <div class="title">
          <h2>welcome to my website</h2>
        </div>
          <form class="" action="#" method="post" onsubmit="return myfun()">
            <div class="form_group">
              <input type="text" name="" value="" placeholder="enter your first name" class="form_control fname" required>
                

             </div>

            <div class="form_group">
               <input type="number" name="" value="" placeholder="enter your phone number" class="form_control" required>
                
             </div>

            <div class="form_group">
              <input type="text" name="" value="" placeholder="enter your last name" class="form_control" required>
                
             </div>

            <div class="form_group">
              <input type="text" name="" value="" placeholder="enter password" class="form_control" required>
               

            </div>

             <div class="form_group">
              <input type="email" name="" value="" placeholder="enter your email id" class="form_control" required>
                

            </div>

            <div class="form_group">
              <input type="text" name="" value="" placeholder="enter conform password" class="form_control" required>
                

            </div>
             <div class="btn">
              <input type="submit" value="register">
            </div>
          </form>
         </div>
           </div>
       </div>
*{
margin: 0px;
padding: 0px;
}
.container{
/*   width: 100%;
  height: 100vh; */
  /* box-sizing: border-box; */
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}
.form_wrapper{
  width: 1200px;
  background: linear-gradient(to right,#3639b3,#00a3f9);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 34px;
  border: 20px solid white;
}
.main_form {
    width: 800px;
    background: white;
    padding: 20px;
    border-top-left-radius: 77px;
    border-bottom-left-radius: 107px;
    position: relative;
    z-index:  2;
    margin-left: 169px;
}

.title h2 {
    text-align: center;
    text-transform: capitalize;
    font-size: 23px;
    font-family: arial;
    padding-bottom: 28px;
    padding-top: 34px;
}

 .form_group {
    width: 308px;
    /* background: red; */
    float: left;
    overflow: hidden;
    margin-top: 19px;
    border: 1.8px solid rgb(119 119 119);
    margin-left: 27px;
    border-radius: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

input.form_control {
    width: 83%;
    padding: 15px 0px 15px 15px;
    outline: none;
    border: none;
    color: black;
    text-transform: capitalize;
    font-size: 15px;
    font-weight: 500;
    font-family: arial;
}
input.form_control::placeholder{
	color: black;
	text-transform: capitalize;
	 font-size: 15px;
    font-weight: 500;
    font-family: arial;
}

.btn {
    display: block;
    float: right;
    width: 200px;
    /*background: red;*/
    margin-top: 53px;
}

.btn input {
    display: block;
    padding: 10px 30px;
    float: right;
    text-transform: capitalize;
    font-size: 18px;
    font-family: arial;
    letter-spacing: -1px;
    border-radius: 50px;
    border: none;
    background: linear-gradient(to right,#3639b3,#00a3f9);
    color: white;
    margin-right: 13px;
    outline: none;
    transition: .3s;
    margin-bottom: 30px;
}
.main_form:after {content: '';position: absolute;
width: 4%;height: 23%;background: #ffffff;top: 0;left: -99px;
z-index: -1;border-radius: 59%;/* border: 1px solid; */
padding: 178px;}

.form_caption {
    /*background: red;*/
    width: 295px;
    z-index: 3;
    float: left;
}


.caption {
    /* background: orange; */
    text-align: center;
    color: white;
}

.caption h2 {
    font-size: 40px;
    text-transform: capitalize;
    margin: 4px 0px;
}

.caption p {
    width: 277px;
    margin: auto;
    text-transform: capitalize;
    font-size: 16px;
    font-family: arial;
    padding: 10px;
    line-height: 25px
}

.caption a {
    display: block;
    background: white;
    text-decoration: none;
    color: black;
    font-size: 23px;
    text-transform: capitalize;
    font-family: arial;
    font-weight: 600;
    width: 148px;
    letter-spacing: -1px;
    padding: 10px;
    text-align: center;
    border-radius: 24px;
    margin: 20px auto;
}
.web_image {width: 216px;/* background: red; */margin: auto;}
.btn input:hover{
	    background: linear-gradient(to right,#00a3f9,#3639b3);
}
 


 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.