Contact component - 4
COPY
<section class="contact container-fluid p-0">
<div class="bg-primary text-white position-relative py-5">
<!-- shapes-->
<svg class="position-absolute end-0 mt-n2" width="242" height="331" viewbox="0 0 242 331" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M172.014 250.127C137.236 227.74 112.349 192.144 144.586
153.591C157.686 137.932 176.759 127.973 196.524 122.046C234.647
110.639 277.027 113.361 313.349 129.576C338.19 140.666 361.129
159.183 369.934 184.502C383.476 223.496 359.75 260.161 321.569
273.118C288.832 284.223 247.685 279.513 214.885 269.837C201.003
265.743 185.745 258.966 172.014 250.127Z" fill="#121519" fill-opacity=".07"></path>
<path d="M20.3265 69.264C19.7064 43.0736 29.8071 17.1878 62.3851
19.8622C75.6229 20.9505 87.9525 27.2066 98.3563 35.3132C118.426
50.9253 132.424 73.896 136.952 98.6413C140.044 115.562 138.424
134.218 127.978 148C111.901 169.236 83.4531 170.283 62.5246
155.209C44.5807 142.281 32.0983 119.217 25.3391 98.6799C22.4836
89.9885 20.5616 79.6021 20.3265 69.264Z" fill="#121519" fill-opacity=".07"></path>
</svg>
<svg class="position-absolute start-0 bottom-0 ms-3" width="169" height="217" viewbox="0 0 169 217" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M34.2574 90.0177C29.666 97.6253 26.6254 106.591 24.9502
114.96C19.9522 140.043 26.4112 168.792 49.6162 181.885C66.0705
191.17 91.0017 189.904 108.062 183.692C125.725 177.266 135.045
168.04 142.29 150.389C151.409 128.174 150.912 99.6904 125.93
91.6429C115.423 88.254 104.723 86.5065 94.2249 82.5889C84.6622
79.0248 74.8545 72.1766 64.4411 71.6149C50.8011 70.8777 40.9122
79.0146 34.2574 90.0177Z" fill="#121519" fill-opacity="0.07"></path>
<path d="M147.005 75.6331C152.135 70.7783 156.106 64.2374 159.153
57.9073C166.014 43.6372 174.127 22.1368 160.207 9.68505C152.924
3.17188 139.243 3.86644 130.324 5.29774C118.428 7.20428 107.295
8.85077 96.5031 14.783C85.8056 20.6599 79.0155 33.6997 77.0014
45.6686C75.4978 54.5776 79.63 63.6672 84.7391 70.7453C91.8208
80.5571 103.503 84.2003 114.817 84.3975C121.101 84.5081 127.716
84.0527 133.89 82.8121C138.932 81.7962 143.273 79.1597 147.005
75.6331Z" fill="#121519" fill-opacity="0.07"></path>
</svg>
<div class="card-body position-relative zindex-2 p-3">
<form class="mx-auto" style="max-width: 800px;">
<h2 class="display-4 fw-medium text-center pb-0 text-white">Contact to us</h2>
<p class="text-center text-white-50 mb-5">WE ARE OPEN WITHIN 24 HOURS</p>
<div class="row g-4">
<div class="col-sm-6">
<label class="form-label fs-base text-white" for="name">Name</label>
<input class="form-control form-control-lg fs-6 rounded-1" type="text" placeholder="Your name" required="" id="name">
</div>
<div class="col-sm-6">
<label class="form-label fs-base text-white" for="company">Company</label>
<input class="form-control form-control-lg fs-6 rounded-1" type="text" placeholder="Your company name" id="company">
</div>
<div class="col-sm-6">
<label class="form-label fs-base text-white" for="email">Email</label>
<input class="form-control form-control-lg fs-6 rounded-1" type="email" placeholder="Email address" required="" id="email">
</div>
<div class="col-sm-6">
<label class="form-label fs-base text-white" for="phone">Phone</label>
<input class="form-control form-control-lg fs-6 rounded-1" type="number" placeholder="Phone number" id="phone">
</div>
<div class="col-sm-12">
<label class="form-label fs-base text-white" for="message">How can we help?</label>
<textarea class="form-control form-control-lg fs-6 rounded-1" rows="6" placeholder="Enter your message here..." required="" id="message"></textarea>
</div>
<div class="col-sm-12 text-center pt-4">
<button class="btn btn-lg btn-dark shadow text-white" type="submit">Send Message</button>
</div>
</div>
</form>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #0054c9;
--bs-black: #000000;
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-black);
--bs-text-primary: var(--bs-blue);
--bs-text-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .9rem;
}
.contact .fs-xs {
font-size: 0.75rem !important;
}
.contact .btn-group-lg>.btn,
.contact .btn-lg {
padding: 1.25rem 3.65rem;
font-size: .95rem;
line-height: 1.5;
border-radius: 3px;
}
.contact .text-primary {
color: var(--bs-text-primary) !important;
}
.contact .bg-primary {
background-color: var(--bs-primary) !important;
}
.form-label {
font-size: 1.1rem;
--bs-text-opacity: .8;
}
Contact component - 3
COPY
<section class="section py-5 contact">
<div class="section-content container">
<div class="row">
<div class="col-12 col-lg-8 mb-14 mb-lg-0"><small class="fs-7 font-family-secondary text-uppercase fw-bold letter-spacing-caption text-muted">We
are open within 24 hours</small>
<h1 class="text-uppercase">Contact us</h1>
<form action="#" class="row mt-5">
<div class="col-12 col-sm-6">
<div class="form-group"><label for="first_name" class="form-label">Full name</label> <input type="text" class="form-control text-control" id="first_name"></div>
</div>
<div class="col-12 col-sm-6">
<div class="form-group"><label for="company_name" class="form-label">Company name</label>
<input type="text" class="form-control text-control" id="company_name">
</div>
</div>
<div class="col-12 col-sm-6">
<div class="form-group"><label for="phone" class="form-label">Phone</label> <input type="text" class="form-control text-control" id="phone"></div>
</div>
<div class="col-12 col-sm-6">
<div class="form-group"><label for="email" class="form-label">Email</label> <input type="text" class="form-control text-control" id="email"></div>
</div>
<div class="col-12">
<div class="form-group"><label for="message" class="form-label">Message</label> <textarea id="message" class="form-control" rows="5"></textarea></div>
<div class="form-group mb-0"><button class="btn btn-primary btn-lg">Send message</button>
</div>
</div>
</form>
</div>
<div class="col-12 col-lg-4">
<div class="card border-0 bg-light mb-4 ml-lg-9">
<div class="card-body py-17 px-10 text-center">
<div class="card-icon mb-6">
<i class="bi bi-geo-alt fs-3"></i>
</div>
<div class="fs-7 my-2 font-family-secondary text-uppercase font-weight-bold letter-spacing-caption text-muted">
Our address</div>
<p class="mb-0 text-body">Brooklyn, NY 15004. 1359<br>Hollow Lane. NY 12706.</p>
</div>
</div>
<div class="card border-0 bg-light mb-4 ml-lg-9">
<div class="card-body py-17 px-10 text-center">
<div class="card-icon mb-6">
<i class="bi bi-phone fs-3"></i>
</div>
<div class="fs-7 my-2 font-family-secondary text-uppercase font-weight-bold letter-spacing-caption text-muted">
Mobile Phone</div>
<p class="mb-0 text-body">(000) 00 - 0000</p>
</div>
</div>
<div class="card border-0 bg-light ml-lg-9">
<div class="card-body py-17 px-10 text-center">
<div class="card-icon mb-6">
<i class="bi bi-clock fs-3"></i>
</div>
<div class="fs-7 my-2 font-family-secondary text-uppercase font-weight-bold letter-spacing-caption text-muted">
Working Hours</div>
<p class="mb-0 text-body">9:00 AM - 6:00 PM</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
:root {
--bs-black: #202020;
--bs-black-rgb: 0, 0, 0;
--bs-blue: #2f24c9;
--bs-blue-dark: #19109c;
--bs-primary: var(--bs-blue);
--bs-primary-dark: var(--bs-blue-dark);
--bs-secondary: var(--bs-black);
--bs-red: #be0000;
--bs-red-rgb: 190, 0, 0;
--bs-accent: var(--bs-red);
}
.bg-light {
background-color: #f9f9f9 !important;
}
.form-control {
display: block;
width: 100%;
padding: 0.5rem 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #d3d3d3;
border-radius: 2px;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #222222;
outline: 0;
box-shadow: none;
}
.text-control {
height: 45px;
}
.letter-spacing-caption {
letter-spacing: .105rem;
}
.fs-7 {
font-size: .75rem !important;
}
.contact .form-label {
font-family: Arimo, sans-serif;
text-transform: uppercase;
font-size: .75rem;
color: #9b9b9b;
margin-bottom: 0.25rem;
line-height: 1.5;
vertical-align: middle;
font-weight: 600;
}
.contact .form-group {
margin-bottom: 1.25rem;
}
.contact .btn {
letter-spacing: .125rem;
text-transform: uppercase;
}
.contact .btn-group-lg>.btn,
.contact .btn-lg {
padding: 1.25rem 2.65rem;
font-size: .95rem;
line-height: 1.5;
border-radius: 3px;
}
.contact .btn-primary {
color: #fff;
background-color: var(--bs-primary);
border-color: var(--bs-primary-dark);
}
.contact .btn-primary:hover {
color: #fff;
background-color: var(--bs-primary-dark);
border-color: var(--bs-primary-dark);
}
Contact component - 2
COPY
<section class="contact">
<div class="py-5 text-primary">
<div class="container justify-content-center py-5">
<div class="text-center mb-5 text-white">
<h2 class="display-4 fw-medium">Contact Us</h2>
<p>Ut possimus qui ut temporibus culpa velit eveniet modi omnis est adipisci expedita at voluptas atque vitae
autem.</p>
</div>
<div class="row">
<div class="col-lg-6">
<div class="text-center bg-white shadow-sm py-5 rounded-1">
<i class="bx bx-map"></i>
<h3>Our Address</h3>
<p>A108 Adam Street, New York, NY 535022</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="text-center bg-white shadow-sm py-5 rounded-1">
<i class="bx bx-envelope"></i>
<h3>Email Us</h3>
<p>contact@example.com</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="text-center bg-white shadow-sm py-5 rounded-1">
<i class="bx bx-phone-call"></i>
<h3>Call Us</h3>
<p>+1 5589 55488 55</p>
</div>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-blue: #4f00aa;
--bs-black: #000000;
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-black);
--bs-text-primary: var(--bs-blue);
--bs-text-secondary: var(--bs-black);
}
.contact .text-primary {
color: var(--bs-text-primary) !important;
}
.contact .bg-primary {
background-color: var(--bs-primary) !important;
}
.contact .btn-group-lg>.btn,
.contact .btn-lg {
padding: 1.25rem 3.65rem;
font-size: .95rem;
line-height: 1.5;
border-radius: 3px;
}
.contact {
background: url(/component/images/bg/background-features.jpg);
background-size: 100%;
}
Contact component - 1
COPY
<section class="contact">
<div class="container content-section pt-3 pb-4 pb-md-5">
<div class="card border-0 bg-primary">
<div class="card-body p-md-5 p-4" style="background-image: url(/component/images/bg/bg-pattern.png); background-size: 100%; background-size: cover !important; background-position: top center;">
<div class="py-md-5 py-4 text-center">
<h3 class="h4 fw-normal text-light opacity-75">Do you like to talk with us?</h3>
<a href="mailto:email@example.com" class="display-6 text-light text-decoration-none fw-normal">emailaddress@yourdomain.com</a>
<div class="pt-md-5 pt-4 pb-md-2">
<a href="#" class="btn btn-lg btn-light shadow-lg text-uppercase">Contact Us</a>
</div>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
:root {
--bs-green: #059700;
--bs-black: #000000;
--bs-primary: var(--bs-green);
--bs-secondary: var(--bs-black);
--bs-text-primary: var(--bs-green);
--bs-text-secondary: var(--bs-black);
}
.contact .text-primary {
color: var(--bs-text-primary) !important;
}
.contact .bg-primary {
background-color: var(--bs-primary) !important;
}
.contact .btn-group-lg>.btn,
.contact .btn-lg {
padding: 1.25rem 3.65rem;
font-size: .95rem;
line-height: 1.5;
border-radius: 3px;
}
More coming soon