Problem creating a joining form


im trying to cerate joining form like this by html css but its not working .help me please

here my HTML code are

<!DOCTIPE HTML>

<html>

<head>
<title> Htaml tamplate  </title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
   

</head>


<body>
   <header>
      <div class="header-top">
	    <div class="contact-top">
		<p> Call Us: <span>0000-000-000</span> </p>
		
	 	</div>
		<div class="navigation-top"> 
	
		       <a href=""> prospective student </a>
		      <a href=""> current student </a>
		      <a href=""> faculty </a>
		      <a href=""> Alumi </a>
		   
        </div>
      </div>
	    
         
     <nav>
 
     <div class="logo"> 
	 
	 </div>
	
	 <div class="main-navigation">
	    <ul>
		 
		  <li> <a href="" class="active">home <i class="fa fa-angle-down" aria-hidden="true"></i> </a></li>
		  <li> <a href="">course <i class="fa fa-angle-down" aria-hidden="true"></i></a></li>
		  <li> <a href="">Evantes<i class="fa fa-angle-down" aria-hidden="true"></i> </a></li>
		  <li> <a href=""> aboout us</a></li>
		  <li> <a href="">blog <i class="fa fa-angle-down" aria-hidden="true"></i></a></li>
		  <li> <a href="">countact<i class="fa fa-angle-down" aria-hidden="true"></i> </a></li>
		 
		</ul>
	   </div>
	   
 
     </nav>
	 
  </header>
  <main>
          <div class="logo-bottom">
		  
		  </div>
          <div class="logo-bottom1">
		 
		 </div>
           <section id="slider-form">
		      <div class="slider">
		         <img src="img/slide-1.jpg" alt="">
		       </div>
		      <div class="joining-form">
		        <div class="form">
		         <h1> Join the comunity of modern thinking students </h1>
		           <form action="">
		              <div class="name-input" >
                       <input type="text" placeholder="name" >
                        <select name="" id=""> 
		  	            <option value="">study level</option>
			            <option value="">Beginer</option>
			           <option value="">Advance</option>
			
			           </select>
                     
		             </div>
					 
			               
		           <div class="email-input"  > 
		           
		           <input type="text">
		           <select name="" id=""> 
			        <option value="">study level</option>
			        <option value="">Beginer</option>
			         <option value="">Advance</option>
			
			
		             </select>
		   
		         </div>
		   

		   </form>
		   </div>
		   
		   </div>
		   
		    </section>
  
  

   </main>
     



</section >

</body>


</html>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/********************************
	Design Starts from Here
	********************************/
body{
	width: 100%;
	height: 1000px;
	font-family: 'Montserrat', 'Arial', sans-serif
}

header{
	width: 100%;
	background-image:url(../img/bg.png);
	color: #fff;
	background-color: #012951;
}
.header-top{
	width: 95%;
	margin: 0 auto;
	height: 40px;
	font-size: 12px;
	background-color: rgba(0,0,0,0.1);
	
}
.contact-top{
	width: 40%;
	float:left;
	height: 100%;
}
.contact-top p{
	padding-top: 12px;
}
.contact-top span{
	opacity:0.4;
}
.navigation-top{
	width: 60%;
	float:left;
	height: 100%;
	color: #fff;
	
}
.navigation-top a{
	text-decoration: none;
	display: block;
	float:left;
	padding-top: 12px;
	padding-left: 20px;
	color: #fff;
}
.navigation-top a:hover{
	color:#ea6645;
	transition:all 0.5s;
}
nav{
	
	width: 100%;
	height: 80px;
	background-color: rgba(255,255,255, 0.01);
	background-image:url(../img/bg.png);
	
	
}


.logo{
	width: 25.25%;
	height: 100%;
	float: left;
	background-color: #fff;
	background-image:url('../img/logo.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 70%;
}


.main-navigation{
	width: 74.75%;
	height: 100%;
	float:left;	
	
}
.main-navigation ul{
	width: 75%;
	margin-left: 25%;
}
.main-navigation ul li{
	float:left;
}
.main-navigation ul li a{
	text-decoration: none;
	color: #fff;
	font-size: 13px;
	font-weight: 300;
	display:block;
	padding:30px 15px;
}
.main-navigation ul li a:hover{
	color: #ea6645;
	transition: 0.5s;
}
.main-navigation ul li a.active{
	color: #ea6645;
}
.main-navigation ul li a .fa{
	color: #fff;
}


.logo-bottom{
	position:relative;
	width:25.5%;
	height:215px;
   background-color:#ea6645;	
   background-image:url('../img/bg.png');
}


.logo-bottom1{
    position:relative;
	width:25.5%;
	height:215px;
	background-color:#fff;
}


#slider-form{
	
	width:98%;
	margin:0 auto;
	margin-top: -430px;
	height:270px;
	background-color:#011c38

}
.slider{
	width:45%;
	float:left;
	height:300px;
	background-color:green;
	transform: translate(28px, 28px);
	overflow:hidden;
}
.slider img{
	height:115%;
	
	
	
}
.joining-form{
	
	width:55%;
	height:300px;
	float:left;
	background-color:#011c38;
	
}
.form{
	width:98%;
	margin:0 1% 0 4%;
	height:100%;
	
	
}
.form h1{
	font-size:30;
	color:#fff;
	padding: 40px 5px 5px 15px;
	
}
.form form {
	clear:both;
	width:90%;
	height:50%;
	background-color:green;
	
}
.name-input{
	
	width:50%;
	float:left;
	text-align:center;
	
	
}

}
.email-input{
	
     width:50%;
	float:left;
	text-align:center;
	
}
.select{
	display:block;
}

By “not working”, do you mean you’re having problems with the layout, or is there some other issue you need help with?

(As a first step to debugging, you should always run your code through the validator: https://validator.w3.org You have some errors in there, including a typo in <!DOCTIPE HTML>)

If its a layout issue then as a start try something like this for the positioning of the inputs and selects.

.name-input,
.email-input {
	width:50%;
	float:left;
	text-align:center;
}

.name-input input,.name-input select,
.email-input input,.email-input select{
	width:90%;
	display:block;
	margin:10px auto;
	box-sizing:border-box;
	padding:5px 10px;
}

Then remove your styles for the same elements.


.name-input {
	width:50%;
	float:left;
	text-align:center;
}
}
.email-input {
	width:50%;
	float:left;
	text-align:center;
}
.select {
	display:block;
}

Note that you have a stray bracket in the above rule that would stop the next rule working.

}
}

thank you for replying :slight_smile: im facing layout problem.

thanks, man its works properly :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.