IMG-LOGO
Trang Chủ Chủ Đề TEST - Yêu cầu thiết kế website - landing page html/css/js - bootstrap/jquery
× 1. TEST - Yêu cầu thiết kế website - landing page html/css/js - bootstrap/jquery

TEST - Yêu cầu thiết kế website - landing page html/css/js - bootstrap/jquery

by TRẦN VĂN ĐIỆP - 14:11 06/11/2020 1,880 Lượt Xem

http://onushorit.com/Biz4/index-2.html

Theo dõi cập nhật nội dung học trên Youtube


Bình luận



Chia sẻ từ lớp học

Do Trung Duc [T2008A]

Ngày viết: 09:52 13/11/2020

hainguyen [T2008A]

Ngày viết: 16:51 09/11/2020



https://nguyenbahai.herokuapp.com/Test/Test.html


nguyễn Sử [T2008A]

Ngày viết: 00:43 08/11/2020


#testbootrap.html


<!DOCTYPE html>
<html>
<head>
	<title>Biz4</title>
	<meta charset="utf-8">
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

	<!-- jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

	<!-- Popper JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

	<!-- Latest compiled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
	<!-- https://fontawesome.com/icons?from=io -->
</head>
<body>
	<div class="row" style="background-color: #ab41e0; color: white;padding-top: 1%;">
		<div class="col-md-5" style="padding-left: 10%; font-size: 37px; color: white">Biz4 

		</div>	
		<div class="col-md-7">
			<nav  class="navbar navbar-expand-sm">
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link" href="#" style="color: white"> SERVICES </a>					
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#" style="color: white"> ABOUT </a>					
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#" style="color: white"> TEAM </a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#" style="color: white"> FAQ </a>					
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#" style="color: white"> BLOG </a>					
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#" style="color: white"> CONTACT </a>					
					</li>
				</ul>
			</nav>
		</div>
	</div>
	<div class="row">
		<img src="https://pbs.twimg.com/media/Ej4rPukU8AAiL6E.jpg" style="width: 1400px;">
	</div>
	<div style="color: #b341e0; text-align: center;font-size: 40px; padding-top: 5%;">
		<p><strong>OUR SERVICES</strong></p>
	</div>
	<p style="text-align: center; color: grey">Donec vestibulum risus id augue interdum, et viverra lorem pretium. Nullam auctor eros et est imperdiet pharetra.</p>
	<div style="background-color: white; padding-top: 3%">
		<div class="row" style="padding-left: 5%">
			<div class="col-md-4">
				<i style="padding-left: 43%;color: #ae82f5; font-size: 30px" class="fas fa-suitcase"></i>
				<p style="text-align: center;"><strong>BUSINESS ANALYSIS</strong></p>
				<p style="text-align: center;">Morbi efficitur orci at ex malesuada, vitae luctus ante pulvinar. Cras consectetur eu magna quis faucibus.</p>
				<p style="text-align: center;color: blue"><a href="#">Learn More</a></p>
			</div>
			<div class="col-md-4">
				<i style="padding-left: 43%;color: #ae82f5; font-size: 30px" class="fas fa-suitcase"></i>
				<p style="text-align: center;"><strong>BRAND IDENTITY</strong></p>
				<p style="text-align: center;">Morbi efficitur orci at ex malesuada, vitae luctus ante pulvinar. Cras consectetur eu magna quis faucibus.</p>
				<p style="text-align: center;color: blue"><a href="#">Learn More</a></p>
			</div>
			<div class="col-md-4">
				<i style="padding-left: 43%;color: #ae82f5; font-size: 30px" class="fas fa-globe"></i>
				<p style="text-align: center;"><strong>IT OUTSOURCING</strong></p>
				<p style="text-align: center;">Morbi efficitur orci at ex malesuada, vitae luctus ante pulvinar. Cras consectetur eu magna quis faucibus.</p>
				<p style="text-align: center;color: blue"><a href="#">Learn More</a></p>
			</div>

			<div class="col-md-4">
				<i style="padding-left: 43%;color: #ae82f5; font-size: 30px" class="fas fa-globe"></i>
				<p style="text-align: center;"><strong>SOLUTION DESIGN</strong></p>
				<p style="text-align: center;">Morbi efficitur orci at ex malesuada, vitae luctus ante pulvinar. Cras consectetur eu magna quis faucibus.</p>
				<p style="text-align: center;color: blue"><a href="#">Learn More</a></p>
			</div>
			<div class="col-md-4">
				<i style="padding-left: 43%;color: #ae82f5; font-size: 30px" class="fas fa-globe"></i>
				<p style="text-align: center;"><strong>SEO OPTIMIZE</strong></p>
				<p style="text-align: center;">Morbi efficitur orci at ex malesuada, vitae luctus ante pulvinar. Cras consectetur eu magna quis faucibus.</p>
				<p style="text-align: center;color: blue"><a href="#">Learn More</a></p>
			</div>
			<div class="col-md-4">
				<i style="padding-left: 43%;color: #ae82f5; font-size: 30px" class="fas fa-globe"></i>
				<p style="text-align: center;"><strong>WEB DEVELOPMENT</strong></p>
				<p style="text-align: center;">Morbi efficitur orci at ex malesuada, vitae luctus ante pulvinar. Cras consectetur eu magna quis faucibus.</p>
				<p style="text-align: center;color: blue"><a href="#">Learn More</a></p>
			</div>
		</div>
		<div style="color: #b341e0; text-align: center;font-size: 40px; padding-top: 5%;">
			<p><strong>ABOUT US</strong></p>
		</div>
		<p style="text-align: center; color: grey">Fusce gravida cursus ante nec fringilla. Curabitur hendrerit pretium auctor. Mauris sit amet aliquet nulla.</p>
		<div class="row">
			<div class="col-md-4">
				<img src="https://bssc.vn/wp-content/uploads/2019/07/0201-Unica-Biz-4.jpg" style="width:400px; padding-top: 6%;">
			</div>
			<div class="col-md-8" style="padding-top: 1%">
				<p style="color: blue; font-size: 22px">We are leading web development company</p>
				<p style="font-size: 40px;"><strong>Biz4 is the best HTML Business Templete</strong></p>
				<p>Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schrif tindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo Text "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
				<button type="button" class="btn" style="color: #6b18f0; border: solid 2px;">WHY US</button>
				<button type="button" class="btn" style="color: #6b18f0; border: solid 2px;">SKILLS</button>
			</div>		
		</div>
		<div class="row">
			<div class="col-md-6" style="padding-top: 5%;">
				<div style="background-color: #e3e3e3">
					<p style="font-size: 30px; color: #8448bd; padding-left: 3%"><strong> Why Biz4</strong></p>
					<p style="padding-left: 3%">Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schrif tindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo Text.</p>
					<div>
						<i style="padding-left: 3%;color: #ae82f5; font-size: 30px" class="fas fa-cannabis"></i>
						<p style="font-size: 26px; padding-left: 2%">Unique design</p>
						<p style="padding-left: 2%;">Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt.</p>
					</div>
					<div>
						<i style="padding-left: 3%;color: #ae82f5; font-size: 30px" class="fas fa-cannabis"></i>
						<p style="font-size: 26px; padding-left: 2%">Different Layout</p>
						<p style="padding-left: 2%;">Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt.</p>
					</div>
					<div>
						<i style="padding-left: 3%;color: #ae82f5; font-size: 30px" class="fas fa-cannabis"></i>
						<p style="font-size: 26px; padding-left: 2%">Fully Responsive</p>
						<p style="padding-left: 2%;">Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt.</p>
					</div>
					<div>
						<i style="padding-left: 3%;color: #ae82f5; font-size: 30px" class="fas fa-cannabis"></i>
						<p style="font-size: 26px; padding-left: 2%">Quick Support</p>
						<p style="padding-left: 2%;">Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt.</p>
					</div>
				</div>
			</div>
			<div class="col-md-6" style="padding-top: 5%; padding-left: 0% ">
				<img src="https://seeding.vn/wp-content/uploads/2019/11/T%C3%ACm-ng%C6%B0%E1%BB%9Di-h%E1%BB%A3p-t%C3%A1c-kinh-doanh-1.jpg" style="width: 645px; height: 613px">
			</div>
			
		</div>
		<div style="padding-top: 5%; padding-left: 20%;">
			<div class="row">
				<ul class="nav justify-content-center" style="text-align: center;">
					<li class="nav-item">
						<div style="padding: 5px;">
							<div style="border: solid #4f34b3 4px; border-radius: 100%; padding: 50px 40px; color:#4f34b3; font-weight: bold; font-size: 50px;">92%</div>
							<p style="color:#ae82f5; font-size: 20px; padding-left: 13%; ">WEB DESIGN</p>
						</div>
					</li>
					<li class="nav-item">
						<div style="padding: 5px 5px;">
							<div style="border: solid #4f34b3 4px; border-radius: 100%; padding: 50px 40px; color:#4f34b3; font-weight: bold; font-size: 50px;">90%</div>
							<p style="color:#ae82f5; font-size: 20px; padding-left: 2%; ">WEB DEVELOPMENT</p>
						</div>
					</li>
					<li class="nav-item">
						<div style="padding: 5px 5px;">
							<div style="border: solid #4f34b3 4px; border-radius: 100%; padding: 50px 40px; color:#4f34b3; font-weight: bold; font-size: 50px;">85%</div>
							<p style="color:#ae82f5; font-size: 20px; padding-left: 7%; ">GRAPHICS DESIGN</p>
						</div>
					</li>
					<li class="nav-item">
						<div style="padding: 5px 5px;">
							<div style="border: solid #4f34b3 4px; border-radius: 100%; padding: 50px 40px; color:#4f34b3; font-weight: bold; font-size: 50px;">80%</div>
							<p style="color:#ae82f5; font-size: 20px ; padding-left: 10%">MARKETING</p>
						</div>
					</li>
				</ul>

			</div>
		</div>

		<div style=" padding-top: 5%; background-color:#e3e3e3">
			<div style="color: #b341e0; text-align: center;font-size: 40px; padding-top: 5%;">
				<p><strong>OUR TEAM</strong></p>
			</div>
			<p style="text-align: center; color: grey; ">Etiam cursus rhoncus mi, vitae dictum leo pretium non. Donec eu arcu maximus, egestas elit eget, pellentesque ipsum.</p>
			<div class="col-md-12" style="padding-top: 3%; padding-left: 6%; padding-bottom: 3%; ">
				<div class="row">
					<div class="col-md-3">
						<img src="https://upload.wikimedia.org/wikipedia/en/thumb/b/bd/Doraemon_character.png/220px-Doraemon_character.png" style="width: 200px">
					</div>
					<div class="col-md-3">
						<img src="https://yorukivn.files.wordpress.com/2009/09/96121412903110.jpg" style="width: 200px; height: 245px;">
					</div>
					<div class="col-md-3">
						<img src="https://anhdepfree.com/wp-content/uploads/2020/06/hinh-anh-ve-chaien-dep-nhat.jpg" style="width: 200px; height: 240px">
					</div>
					<div class="col-md-3">
						<img src="https://diendanlequydon.com/downloads/image_prv/101/100803.jpg" style="width: 200px; height: 245px">
					</div>
					
				</div>
				
			</div>			
		</div>
		<div style="padding-top: 5%">
			<div style="color: #b341e0; text-align: center;font-size: 40px; padding-top: 5%;">
				<p><strong>CLIENTS WORDS</strong></p>
			</div>
			<p style="text-align: center; color: grey;">Nunc dictum congue est vel pellentesque. Vestibulum euismod eget augue quis consequat.</p>
			<div style="text-align: center; border: solid 2px;width: 1260px;">
				<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTC_KdI_8fvsBnOWrBfb4QRKfcmGZK3djhJOg&usqp=CAU">
				<p><strong>DORAEMON</strong></p>
				<P style="color: grey">CEO, XYZ Corporation</P>
				<p> Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem.</p>
			</div>
			<div style="text-align: center;">
				<button type="button" class="btn" style="color: #6b18f0; border: solid 3px;"><<</button>
				<button type="button" class="btn" style="color: #6b18f0; border: solid 3px;">>></button>
			</div>
		</div>
		<div style="padding-top: 7%; background-color: #9b5fe3; padding-bottom: 10%;">
			<div class="col-md-12">
				<div class="row">
					<div class="col-md-3">
						<i style="padding-left: 40%; color: white; font-size: 37px; padding-top: 5%;" class="fas fa-smile"></i>
						<p style="color: white; text-align: center; font-size: 30px"> 200+ </p>
						<p style="color: white; text-align: center; font-size: 20px">HAPPY CLIENTS</p>
					</div>
					<div class="col-md-3">
						<i style="padding-left: 44%; color: white; font-size: 37px; padding-top: 5%;" class="fas fa-copy"></i>
						<p style="color: white; text-align: center; font-size: 30px"> 300+</p>
						<p style="color: white; text-align: center; font-size: 20px">PROJECTS</p>					</div>
						<div class="col-md-3">
							<i style="padding-left: 42%; color: white; font-size: 37px; padding-top: 5%;" class="fas fa-crown"></i>
							<p style="color: white; text-align: center; font-size: 30px"> 150+</p>
							<p style="color: white; text-align: center; font-size: 20px">REPEAT CLIENTS</p>
						</div>
						<div class="col-md-3">
							<i style="padding-left: 43%; color: white; font-size: 37px; padding-top: 5%;" class="fas fa-crown"></i>
							<p style="color: white; text-align: center; font-size: 30px"> 10</p>
							<p style="color: white; text-align: center; font-size: 20px">AWARDS</p>
						</div>	
					</div>
				</div>
			</div>
			<div style="padding-top: 5%;">
				<div style="color: #b341e0; text-align: center;font-size: 40px; padding-top: 5%;">
					<p><strong>FAQ</strong></p>
				</div>
				<p style="text-align: center; color: grey;">Etiam non augue eget odio varius auctor. Maecenas lacinia est et nunc suscipit gravida sed.</p>
			</div>
			<div style="padding-top: 3%; padding-left: 10%">
				<p style="color: #8f47e6"><strong>WHAT IS LOREM IPSUM ?</strong></p>
				<p style="color: grey"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
				<p style="color: grey; padding-top: 1%;">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
				<li style="color: grey; padding-top: 1%; padding-left: 2%;">Lorem ipsum dolor sit amet</li>
				<li style="color: grey; padding-left: 2%;">Sed ut perspiciatis unde omnis</li>
				<li style="color: grey; padding-left: 2%;">Nemo enim ipsam voluptatem quia</li>
				<li style="color: grey; padding-left: 2%;">Ut enim ad minima veniam</li>

				<div class="col-md-12">
					<div class="row" style="background-color: white; text-align: center; padding-top: 3%;">
						<ul class=" list-group list-group-flush">
							<li class="list-group-item"><strong> WHY DO WE USE IT ?</strong></li>
							<li class="list-group-item"><strong>WHERE DOES IT COME FROM ?</strong></li>
							<li class="list-group-item"><strong>WHERE CAN I GET SOME ?</strong></li>
							<li class="list-group-item"><strong>QUIS AUTEM VEL EUM IURE QUI IN ?</strong></li>
						</ul>
					</div>
				</div>
			</div>

			<div style="text-align: center;">
				<button type="button" class="btn" style="color: #6b18f0; border: solid 2px;">ASK QUESTION</button>
			</div>
			<div style="background-color: #9b5fe3; height: 200px">
				<div class="col-md-12">
					<div class="row">
						<i style="padding-left:48%; color: white; font-size: 37px;" class="fas fa-gift"></i>
					</div>
					<p style=" color: white; padding-top: 2%; text-align: center;">SUBSCRIBE FOR OUR LATEST UPDATES</p>
					<div class="input-group mb-3" style="width: 550px; float: left; margin-bottom: 0px !important; background-color: white; margin-left: 350px">
						<input type="text" class="form-control" placeholder="Enter Your Email ID" id="demo" name="Enter Your Email ID" style="width: 570px;">
					</div>
				</div>
				<div style="color: #b341e0; text-align: center;font-size: 40px; padding-top: 17%;">
					<p><strong>OUR BLOG</strong></p>
				</div>
				<p style="text-align: center; color: grey;">Curabitur nec blandit lectus, non scelerisque lacus. Quisque ullamcorper dolor non libero cursus.</p>
				<div style="background-color:#f6f2fa; padding-bottom: 5%;">
					<div class="col-md-12">
						<div class="row">
							<div class="col-md-4">
								<img src="https://www.kynang.edu.vn/wp-content/uploads/nhom-1.jpg" style="width: 400px; height: 300px">
								<p style="color:black; font-size: 23px;">Eaque ipsa quae ab illo inventore veritatis et quasi.</p>
								<p style="color: grey; padding-top: 1%">Lorem ipsum dolor sitamet secteture adipiscing eilit mauris diem lorem ipsum anibus atdsim eipit.</p>
								<p style="padding-top: 1%; color: grey">Learn More ...</p>
								<p style="color: grey; padding-top: 2%; "> 14 FEB 2017  467 VIEWS</p>
							</div>
							<div class="col-md-4">
								<img src="https://blog.topcv.vn/wp-content/uploads/2018/01/lam-viec-nhom1.jpg" style="width: 400px; height: 300px">
								<p style="color:black; font-size: 23px;">Eaque ipsa quae ab illo inventore veritatis et quasi.</p>
								<p style="color: grey; padding-top: 1%">Lorem ipsum dolor sitamet secteture adipiscing eilit mauris diem lorem ipsum anibus atdsim eipit.</p>
								<p style="padding-top: 1%; color: grey">Learn More ...</p>
								<p style="color: grey; padding-top: 2%; "> 14 FEB 2017  467 VIEWS</p>
							</div>
							<div class="col-md-4">
								<img src="https://blog.topcv.vn/wp-content/uploads/2018/01/lang-nghe.jpg" style="width: 400px; height: 300px">
								<p style="color:black; font-size: 23px;">Eaque ipsa quae ab illo inventore veritatis et quasi.</p>
								<p style="color: grey; padding-top: 1%">Lorem ipsum dolor sitamet secteture adipiscing eilit mauris diem lorem ipsum anibus atdsim eipit.</p>
								<p style="padding-top: 1%; color: grey">Learn More ...</p>
								<p style="color: grey; padding-top: 2%; "> 14 FEB 2017  467 VIEWS</p>
							</div>

						</div>

					</div>
				</div>
				<div style="padding-top: 4%;">
					<div style="color: #b341e0; text-align: center;font-size: 40px; padding-top: 5%;">
						<p><strong>OUR CLIENTS</strong></p>
					</div>
					<p style="text-align: center; color: grey;">Our most valuable clients. Fusce hendrerit tellus sem, sit amet consequat nunc dignissim non.</p>
				</div>
				<div style="padding-top: 2%; padding-bottom: 6%;">
					<div class="col-md-12">
						<div class="row">
							<div class="col-md-3">
								<img src="http://onushorit.com/Biz4/img/client-logo/1.png" style="width: 300px; border: solid 1px;">
							</div>
							<div class="col-md-3">
								<img src="http://onushorit.com/Biz4/img/client-logo/2.png" style="width: 300px; border: solid 1px;">
							</div>
							<div class="col-md-3">
								<img src="http://onushorit.com/Biz4/img/client-logo/3.png" style="width: 300px; border: solid 1px;">
							</div>
							<div class="col-md-3">
								<img src="http://onushorit.com/Biz4/img/client-logo/4.png" style="width: 300px; border: solid 1px;">
							</div>
							<div class="col-md-3">
								<img src="http://onushorit.com/Biz4/img/client-logo/5.png" style="width: 300px; border: solid 1px;">
							</div>
							<div class="col-md-3">
								<img src="http://onushorit.com/Biz4/img/client-logo/4.png" style="width: 300px; border: solid 1px;">
							</div>
							<div class="col-md-3">
								<img src="http://onushorit.com/Biz4/img/client-logo/1.png" style="width: 300px; border: solid 1px;">
							</div>
							<div class="col-md-3">
								<img src="http://onushorit.com/Biz4/img/client-logo/2.png" style="width: 300px; border: solid 1px;">
							</div>	
						</div>
					</div>
				</div>
				<div style="background-color:#e3e3e3; padding-top: 5%; ">
					<div style="color: #b341e0; text-align: center;font-size: 40px; padding-top: 5%;">
						<p><strong>FREE CONSULTATION!</strong></p>
					</div>
					<p style="text-align: center; color: grey;">For any information or help about us you can contact with us. We would love to hear from you!</p>
					<div class="col-md-12">
						<div class="row">
							<div class="col-md-4">
								<div style="background-color: white; border: solid 1px; padding-top: 4%">
									<i style="padding-left:47%; color: #7b46f0; font-size: 37px; text-align: center;" class="fas fa-mobile-alt"></i>
									<p style="text-align: center;"><strong> CALL US</strong></p>
									<p style="text-align: center; color: grey;">786-123-456</p>
								</div>
							</div>
							<div class="col-md-4">
								<div style="background-color: white; border: solid 1px; padding-top: 4%">
									<i style="padding-left:45%; color: #7b46f0; font-size: 37px; text-align: center;" class="fas fa-envelope"></i>
									<p style="text-align: center;"><strong> MAIL US</strong></p>
									<p style="text-align: center; color: grey;">[email protected]</p>
								</div>
							</div>
							<div class="col-md-4">
								<div style="background-color: white; border: solid 1px; padding-top: 4%">
									<i style="padding-left:45%; color: #7b46f0; font-size: 37px; text-align: center;" class="fas fa-map-marker-alt"></i>
									<p style="text-align: center;"><strong>OUR ADDRESS</strong></p>
									<p style="text-align: center; color: grey;">NYC, NY-12345, USA</p>
								</div>
							</div>
						</div>
					</div>
					<div style="padding-top: 3%; text-align: center;">
						<p><strong>OR</strong></p>
					</div>
					<div class="col-md-12">
						<div class="row">
							<div class="col-md-6">
								<ul class=" list-group list-group-flush">
									<li class="list-group-item"><p style="color: grey;">ENTER NAME</p></li>
									<li class="list-group-item"><p style="color: grey;">ENTER PHONE NUMBER</p></li>
									<li class="list-group-item"><p style="color: grey;">TYPE MESSAGE TEXT </p></li>
								</ul>
							</div>
							<div class="col-md-6">
								<ul class=" list-group list-group-flush">
									<li class="list-group-item"><p style="color: grey;">ENTER EMAIL</p></li>
									<li class="list-group-item"><p style="color: grey;">TYPE SUBJECT</p></li>
								</ul>
							</div>
						</div>
					</div>
					<div style="padding-top: 3%; text-align: center;">
					<button type="button" class="btn" style="color: #6b18f0; border: solid 2px; width: 200px; font-size: 17px;">SUBMIT</button>
					</div>
				</div>
				<div style="background-color: #9b5fe3;padding-top: 3%;">
					<div  class="col-md-12">
					<div class="row">
						<i style="color: white; margin-left: 140px; font-size: 37px;" class="fas fa-heart"></i>
						<i style=" color: white; margin-left: 170px; font-size: 37px;" class="fas fa-heart"></i>
						<i style="color: white; margin-left: 200px; font-size: 37px;" class="fas fa-heart"></i>
						<i style="color: white; margin-left: 230px; font-size: 37px;" class="fas fa-heart"></i>
						<i style="color: white;  margin-left: 260px; font-size: 37px;" class="fas fa-heart"></i>
					</div>
					<p style="text-align: center; padding-top: 3%; color: white; padding-bottom: 5%;">Copyright 2017 - Biz4 LLC.</p>
				</div>
					
				</div>



			</body>
			</html> 


vuong huu phu [T2008A]

Ngày viết: 21:49 07/11/2020



https://dddeee22.herokuapp.com/jquery/test2jq.html


Quick Quizzz!!!

User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User ImageUser ImageUser Image
User Image
User ImageUser ImageUser Image
>> Hiển Thị Quizzz
Đã sao chép!!!