Ảnh minh họa. |
HTML
<section id="contact" class="content-section text-center"> <div class="contact-section"> <div class="container"> <h2>Contact Us</h2> <p>Feel free to shout us by feeling the contact form or visiting our social network sites like Fackebook,Whatsapp,Twitter.</p> <div class="row"> <div class="col-md-8 col-md-offset-2"> <form class="form-horizontal"> <div class="form-group"> <label for="exampleInputName2">Name</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> </div> <div class="form-group"> <label for="exampleInputEmail2">Email</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@thuthuatweb.net"> </div> <div class="form-group "> <label for="exampleInputText">Your Message</label> <textarea class="form-control" placeholder="Description"></textarea> </div> <button type="submit" class="btn btn-default">Send Message</button> </form> <hr> <h3>Our Social Sites</h3> <ul class="list-inline banner-social-buttons"> <li><a href="#" class="btn btn-default btn-lg"><i class="fa fa-twitter"> <span class="network-name">Twitter</span></i></a></li> <li><a href="#" class="btn btn-default btn-lg"><i class="fa fa-facebook"> <span class="network-name">Facebook</span></i></a></li> <li><a href="#" class="btn btn-default btn-lg"><i class="fa fa-youtube-play"> <span class="network-name">Youtube</span></i></a></li> </ul> </div> </div> </div> </div> </section>Các bạn thêm CSS này trước HTML bên trên nhé.
<style>Lưu HTML và Css lại nhé!body{ width:100%; height:100%; font-family: 'Roboto Condensed', sans-serif; background:#333333; } h1,h2,h3 { margin:0 0 35px 0; font-family: 'Patua One', cursive; text-transform: uppercase; letter-spacing:1px; } p{ margin:0 0 25px; font-size:18px; line-height:1.6em; } a{ color:#2fbcb3; } a:hover,a:focus{ text-decoration:none; color:#16e0e0; } #contact{ color:#f4f4f4; padding:80px 0; } textarea.form-control{ height:100px; } </style>
Lời kết
Ảnh Demo. |