Toggle navigation
Bootsnipp
Bulma
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
0.7.1
0.4.1
Register
Login
"Bulma-Contact Page by Arshad"
Bulma 0.7.1 Snippet by
arshadarshu028
0.7.1
Preview
HTML
CSS
View Full Screen
Fork
Fork this
3.1K
 
1 Fav
Post to Facebook
Tweet this
<link href="//cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" id="bootstrap-css"> <script src=""></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Contact us</title> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <section class="section"> <div class="container"> <div class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"> <div class="column is-5"> <h1 class="title has-text-centered">Contact Us</h1> <form method=""> <div class="column"> <input class="input is-radiusless is-medium" type="text" placeholder="Name" name="Name" /> </div> <div class="column"> <input class="input is-radiusless is-medium" type="text" placeholder="Email" name="Name" /> </div> <div class="column"> <textarea class="textarea is-radiusless is-medium" rows="5" placeholder="Message" name="Message"></textarea> </div> <div class="column"> <button id="btn-1" class="button submit-button is-warning is-hovered is-radiusless is-fullwidth has-text-weight-bold" >Submit </button> </div> </form> </div> <div class="column is-5"> <div class="column" style="margin-top: 35px;"> <h1 class="title has-text-weight-bold is-size-2 ">Have queries.<br>Contact Us.</h1> <p class="is-size-5 has-text-warning ">Feel free to get in touch with us</p><br> <div class="container-small"> <span class="icon is-medium"> <i class="fa fa-envelope" aria-hidden="true"></i> </span> <span class="">arshadarshu028@gmail.com</span> </div> <div class="container-small"> <span class="icon is-medium"> <i class="fa fa-phone" aria-hidden="true"></i> </span> <span class="">+91 9448348128</span> </div> <button id="btn-1" class="button submit-button is-warning is-hovered is-small has-text-weight-bold" >xyz xyz xyz</button> </div> </div> </div> </div> </section> <script type="text/javascript" src="lib/main.js"></script> </body> </html>
#btn-1:hover { background-color: yellow; }
Related:
See More
Template
Vue Light Bootstrap Dashboard PRO
13.0K
0
Bulma Skills
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76