<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Butter Cake v4.0.0</title>
<!-- FONT AWESOME 4.7.0 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- BUTTER CAKE CSS 4.0.0 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/buttercake@3.0.0/dist/css/butterCake.min.css">
</head>
<body>
<!-- HERO CENTER -->
<div class="jumbotron fluid py-5">
<div class="container text-center">
<h1 class="mb-0 display-4 hero-title">Contact Us</h1>
<ul class="breadcrumb">
<li><a href="">Home</a></li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- CONTACT -->
<section class="contact-us">
<div class="container py-5">
<div class="col-md-6 mx-auto p-0">
<p class="text-center mb-4 text-gray">This is a beautiful contact form created using Butter Cake css Framework.</p>
<!-- FORM -->
<form action="">
<!-- ROW -->
<div class="row">
<div class="col-md-6 mb-2">
<input type="text" class="input" placeholder="Your Name">
</div>
<div class="col-md-6 mb-2">
<input type="email" class="input" placeholder="Your Email">
</div>
<div class="col-md-12 mb-2">
<input type="url" class="input" placeholder="Website Url">
</div>
<div class="col-md-12 mb-2">
<select class="input">
<option value="Choose an option" selected disabled>Choose an option</option>
<option value="Personal">Personal</option>
<option value="Report">Report Bug</option>
<option value="Job" disabled>Job Request</option>
</select>
</div>
<div class="col-md-12 mb-2">
<textarea name="" id="" class="input" placeholder="Message"></textarea>
</div>
<div class="col-md-12 mb-2">
<div class="group">
<div class="custom-checkbox">
<input id="checkbox" type="checkbox">
<label for="checkbox">Send me a copy</label>
</div>
</div>
</div>
<div class="col-md-12">
<button class="btn primary btn-lg block">Send</button>
</div>
</div>
</form>
</div>
</div>
</section>
<!-- STYLE -->
<style>
@media (max-width: 580px) {
.jumbotron .hero-title {
font-size: 40px !important;
}
}
</style>
<!-- JQUERY 3.3.1 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- BUTTER CAKE JS 4.0.0 -->
<script src="https://cdn.jsdelivr.net/npm/buttercake@3.0.0/dist/js/butterCake.min.js"></script>
</body>
</html>