Register Form 03 - DevForum



DevForum chia sẻ các bạn mẫu Đăng ký thông tin Register Form 03 được thiết kế với HTML, CSS và Javascript

1. HTML

	<div class="wrap">
		<!-- tab style-1 -->
		<div class="row">
			<!---320x50--->
			<div class="grid_12 columns">
				<div class="tab style-1">
					<dl>
						<dd class="users"><a class="user active" href="#tab1"> </a></dd>
						<dd class="messages"><a class="msg" href="#tab2"> </a></dd>
						<dd class="settings"><a class="setting" href="#tab3"> </a></dd>
						<dd class="likes"><a class="like" href="#tab4"> </a></dd>
					</dl>
					<ul>
						<li class="active">
							<div class="form">		
								<input type="text" class="active textbox" value="First Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'First Name';}">
								<input type="text" class="textbox" value="Last Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Last Name';}">
								<input type="text" class="textbox" value="Email Address" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email Address';}">

								<input type="submit" value="Register">
							</div>
						</li>
						<li><div class="top-grids">
							<div class="top-grid1">
								<img src="images\f1.jpg" title="" alt="">
							</div>
							<div class="top-grid2">
								<a href="#single.html"><h4>Saketh<h4></h4></h4></a>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
							</div>
							<div class="top-grid1">
								<img src="images\f2.jpg" title="" alt="">
							</div>
							<div class="top-grid2">
								<a href="#single.html"><h4>Amar<h4></h4></h4></a>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
							</div>
							<div class="top-grid1">
								<img src="images\f3.jpg" title="" alt="">
							</div>
							<div class="top-grid2">
								<a href="#single.html"><h4>Akil<h4></h4></h4></a>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
							</div>
							<div class="top-grid1">
								<img src="images\f4.jpg" title="" alt="">
							</div>
							<div class="top-grid2">
								<a href="#single.html"><h4>Naveen<h4></h4></h4></a>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
							</div>
						</div>   		
						<div class="clear"> </div>
					</li>
					<li>
						<div class="settings">
							<a href="#single.html"><h5><img src="https://devforum.info/DEMO/Register_Form_03/images/arrow1.png" title="" alt="">Profile</h5></a>
							<a href="#single.html"><h5><img src="https://devforum.info/DEMO/Register_Form_03/images/arrow1.png" title="" alt="">Edit</h5></a>
							<a href="#single.html"><h5><img src="https://devforum.info/DEMO/Register_Form_03/images/arrow1.png" title="" alt="">Create Account</h5></a>
							<a href="#single.html"><h5><img src="https://devforum.info/DEMO/Register_Form_03/images/arrow1.png" title="" alt="">Login</h5></a>
							<a href="#single.html"><h5><img src="https://devforum.info/DEMO/Register_Form_03/images/arrow1.png" title="" alt="">Signup</h5></a>
						</div>
					</li>
					<li>
						<div class="top-grids">
							<div class="top-grid1">
								<img src="https://devforum.info/DEMO/Register_Form_03/images/f1.jpg" title="" alt="">
							</div>
							<div class="top-grid2">
								<a href="#single.html"><h4>Saketh<h4></h4></h4></a>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
							</div>
							<div class="top-grid1">
								<img src="https://devforum.info/DEMO/Register_Form_03/images/f2.jpg" title="" alt="">
							</div>
							<div class="top-grid2">
								<a href="#single.html"><h4>Amar<h4></h4></h4></a>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
							</div>
							<div class="top-grid1">
								<img src="https://devforum.info/DEMO/Register_Form_03/images/f3.jpg" title="" alt="">
							</div>
							<div class="top-grid2">
								<a href="#single.html"><h4>Akil<h4></h4></h4></a>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
							</div>
							<div class="top-grid1">
								<img src="https://devforum.info/DEMO/Register_Form_03/images/f4.jpg" title="" alt="">
							</div>
							<div class="top-grid2">
								<a href="#single.html"><h4>Naveen<h4></h4></h4></a>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
							</div>
						</div>    		
						<div class="clear"> </div>
					</li>
				</ul>
			</div>
		</div>   
		<!---320x50--->         
	</div>			
</div>
<div class="wrap">
	<!--footer-->
	<div class="footer">
		<p>© 2020 DevForum. All rights reserved | Template by <a href="https://devforum.info/" target="_blank">DevForum.Info</a></p>
	</div>
	<div class="clear"> </div>
</div>

2. CSS

//Chèn các file CSS vào
https://fonts.googleapis.com/css?family=Open+Sans
https://devforum.info/DEMO/Register_Form_03/css/style.css

3. JAVASCRIPT

//Chèn các file Js vào
https://devforum.info/DEMO/Register_Form_03/js/JFCore.js
https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
https://m.servedby-buysellads.com/monetization.js
https://codefund.io/properties/441/funder.js




Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.