By GokiSoft.com|
14:11 06/11/2020|
Học Bootstrap
TEST - Yêu cầu thiết kế website - landing page html/css/js - bootstrap/jquery
Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
![Do Trung Duc [T2008A]](https://www.gravatar.com/avatar/2973ac07124f066b4605c535e8d39a99.jpg?s=80&d=mm&r=g){kind=avatar}
![hainguyen [T2008A]](https://www.gravatar.com/avatar/32855ce6db55d60134d830aee06b41e5.jpg?s=80&d=mm&r=g){kind=avatar}
hainguyen
2020-11-09 09:51:48
https://nguyenbahai.herokuapp.com/Test/Test.html![nguyễn Sử [T2008A]](https://www.gravatar.com/avatar/47487be2776ac2ec915b0936ef7ab5ae.jpg?s=80&d=mm&r=g){kind=avatar}
nguyễn Sử
2020-11-07 17:43:23
#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;">info@domain.com</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]](https://www.gravatar.com/avatar/307a5cf29780afab49706dc8b15b86c6.jpg?s=80&d=mm&r=g){kind=avatar}
vuong huu phu
2020-11-07 14:49:13
https://dddeee22.herokuapp.com/jquery/test2jq.html