Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
2 contributors

Users who have contributed to this file

@stefanneculai @dianaprajescu
654 lines (597 sloc) 25.5 KB
<!DOCTYPE html>
<html>
<head>
<title>Froala Design Blocks - Contacts</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<link type="text/css" rel="stylesheet" href="css/froala_blocks.css">
<style>
.fdb-block {
border-bottom: 1px solid var(--light);
}
</style>
</head>
<body><style>
#navigator {
position: sticky;
top: 0;
z-index: 1000;
}
#navigator .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
@media (max-width: 720px) {
#navigator {
border-bottom: 1px solid #ccc;
}
}
#navigator a {
font-size: 14px;
}
#navigator+section {
padding: 250px 0;
}
</style>
<section class="fdb-block p-2" id="navigator">
<div class="container-fluid">
<nav class="navbar navbar-expand-md">
<button class="navbar-toggler mr-auto ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav0" aria-controls="navbarNav0" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse mt-2 mt-md-0" id="navbarNav0">
<p class="m-auto">
<a class="btn btn-outline-primary m-1" href="call-to-action.html">Call to action</a>
<a class="btn btn-outline-primary m-1" href="contacts.html">Contacts</a>
<a class="btn btn-outline-primary m-1" href="contents.html">Contents</a>
<a class="btn btn-outline-primary m-1" href="features.html">Features</a>
<a class="btn btn-outline-primary m-1" href="footers.html">Footers</a>
<a class="btn btn-outline-primary m-1" href="forms.html">Forms</a>
<a class="btn btn-outline-primary m-1" href="headers.html">Headers</a>
<a class="btn btn-outline-primary m-1" href="pricings.html">Pricings</a>
<a class="btn btn-outline-primary m-1" href="teams.html">Teams</a>
<a class="btn btn-outline-primary m-1" href="testimonials.html">Testimonials</a>
</p>
</div>
</nav>
</div>
</section>
<script>
var page = window.location.pathname.split('/')
page = page[page.length - 1]
var nav = document.querySelector('a[href="' + page + '"]')
if (nav) {
nav.classList.add('active')
}
</script>
<!-- Contacts 1 -->
<section class="fdb-block pt-0">
<div class="container-fluid p-0 pb-md-5">
<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2848.8444388087937!2d26.101253041406952!3d44.43635311654287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b1ff4770adb5b7%3A0x58147f39579fe6fa!2zR3J1cHVsIFN0YXR1YXIgIkPEg3J1yJthIEN1IFBhaWHIm2Ui!5e0!3m2!1sen!2sro!4v1507381157656"
width="100%" height="300" frameborder="0" style="border:0" allowfullscreen=""></iframe>
</div>
<div class="container">
<div class="row mt-5">
<div class="col-12 col-md-6 col-lg-5">
<h2>Contact Us</h2>
<p class="lead">
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.
</p>
<p class="lead">
It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
</p>
<p class="h3 mt-5">
<strong>Email:</strong> <a href="https://www.froala.com">hello@website.com</a>
</p>
<p class="lead">
<strong>Phone:</strong> <a href="https://www.froala.com">+44 123 123 1232</a>
</p>
</div>
<div class="col-12 col-md-6 ml-auto pt-5 pt-md-0">
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
<div class="row mt-4">
<div class="col">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</div>
<div class="row mt-4">
<div class="col">
<input type="email" class="form-control" placeholder="Subject">
</div>
</div>
<div class="row mt-4">
<div class="col">
<textarea class="form-control" name="message" rows="3" placeholder="How can we help?"></textarea>
</div>
</div>
<div class="row mt-4">
<div class="col">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Contacts 2 -->
<section class="fdb-block bg-dark" style="background-image: url(imgs/hero/blue.svg);">
<div class="container">
<div class="row text-center justify-content-center">
<div class="col-12 col-md-8 col-lg-7">
<h1>Contact Us</h1>
<h2>We love to hear from you!</h2>
</div>
</div>
<div class="row pt-4">
<div class="col-12">
<form>
<div class="row">
<div class="col-12 col-md">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="col-12 col-md mt-4 mt-md-0">
<input type="text" class="form-control" placeholder="Email">
</div>
<div class="col-12 col-md mt-4 mt-md-0">
<input type="text" class="form-control" placeholder="Phone (optional)">
</div>
</div>
<div class="row mt-4">
<div class="col">
<input type="email" class="form-control" placeholder="Subject">
</div>
</div>
<div class="row mt-4">
<div class="col">
<textarea class="form-control" name="message" rows="3" placeholder="How can we help?"></textarea>
</div>
</div>
<div class="row mt-4">
<div class="col text-center">
<button type="submit" class="btn btn-dark">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Contacts 3 -->
<section class="fdb-block">
<div class="container">
<div class="row text-center justify-content-center">
<div class="col-12 col-md-8 col-lg-7">
<h1>Contact Us</h1>
<p class="lead">One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
<div class="row pt-4">
<div class="col-12 col-md-6">
<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2848.8444388087937!2d26.101253041406952!3d44.43635311654287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b1ff4770adb5b7%3A0x58147f39579fe6fa!2zR3J1cHVsIFN0YXR1YXIgIkPEg3J1yJthIEN1IFBhaWHIm2Ui!5e0!3m2!1sen!2sro!4v1507381157656"
width="100%" height="300" frameborder="0" style="border:0" allowfullscreen=""></iframe>
</div>
<div class="col-12 col-md-6 pt-5 pt-md-0">
<form>
<div class="row">
<div class="col">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</div>
<div class="row mt-4">
<div class="col">
<input type="email" class="form-control" placeholder="Subject">
</div>
</div>
<div class="row mt-4">
<div class="col">
<textarea class="form-control" name="message" rows="3" placeholder="How can we help?"></textarea>
</div>
</div>
<div class="row mt-4">
<div class="col">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Contacts 4 -->
<section class="fdb-block py-0">
<div class="container py-5 my-5" style="background-image: url(imgs/shapes/9.svg);">
<div class="row py-5">
<div class="col py-5">
<div class="fdb-box fdb-touch">
<div class="row text-center justify-content-center">
<div class="col-12 col-md-9 col-lg-7">
<h1>Contact Us</h1>
<p class="lead">Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.</p>
</div>
</div>
<div class="row justify-content-center pt-4">
<div class="col-12 col-md-8">
<form>
<div class="row">
<div class="col-12 col-md">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="col-12 col-md mt-4 mt-md-0">
<input type="text" class="form-control" placeholder="Email">
</div>
</div>
<div class="row mt-4">
<div class="col">
<input type="email" class="form-control" placeholder="Subject">
</div>
</div>
<div class="row mt-4">
<div class="col">
<textarea class="form-control" name="message" rows="3" placeholder="How can we help?"></textarea>
</div>
</div>
<div class="row mt-4">
<div class="col text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contacts 5 -->
<section class="fdb-block pt-0">
<div class="container-fluid p-0 pb-3">
<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2848.8444388087937!2d26.101253041406952!3d44.43635311654287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b1ff4770adb5b7%3A0x58147f39579fe6fa!2zR3J1cHVsIFN0YXR1YXIgIkPEg3J1yJthIEN1IFBhaWHIm2Ui!5e0!3m2!1sen!2sro!4v1507381157656"
width="100%" height="300" frameborder="0" style="border:0" allowfullscreen=""></iframe>
</div>
<div class="container">
<div class="row text-center justify-content-center pt-5">
<div class="col-12 col-md-7">
<h1>Contact Us</h1>
</div>
</div>
<div class="row justify-content-center pt-4">
<div class="col-12 col-md-7">
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Email">
</div>
</div>
<div class="row mt-4">
<div class="col">
<input type="email" class="form-control" placeholder="Subject">
</div>
</div>
<div class="row mt-4">
<div class="col">
<textarea class="form-control" name="message" rows="3" placeholder="How can we help?"></textarea>
</div>
</div>
<div class="row mt-4">
<div class="col text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
<div class="row-100"></div>
</div>
<div class="bg-dark">
<div class="container">
<div class="row-50"></div>
<div class="row justify-content-center text-center">
<div class="col-12 col-md mr-auto ml-auto">
<img alt="image" height="40" class="mb-2" src="./imgs/icons/phone.svg">
<p class="lead">+44 (112) 123 752</p>
</div>
<div class="col-12 col-md pt-4 pt-md-0 mr-auto ml-auto">
<img alt="image" height="40" class="mb-2" src="./imgs/icons/navigation.svg">
<p class="lead">123 6th St.<br>Melbourne, FL 32904</p>
</div>
<div class="col-12 col-md pt-4 pt-md-0 mr-auto ml-auto">
<img alt="image" height="40" class="mb-2" src="./imgs/icons/mail.svg">
<p class="lead">support@website.com</p>
</div>
</div>
<div class="row-50"></div>
</div>
</div>
<div class="container">
<div class="row-70"></div>
<div class="row text-center">
<div class="col">
<p class="h2">
<a href="https://www.froala.com" class="mx-2"><i class="fab fa-facebook"></i></a>
<a href="https://www.froala.com" class="mx-2"><i class="fab fa-twitter"></i></a>
<a href="https://www.froala.com" class="mx-2"><i class="fab fa-instagram"></i></a>
<a href="https://www.froala.com" class="mx-2"><i class="fab fa-google"></i></a>
<a href="https://www.froala.com" class="mx-2"><i class="fab fa-pinterest"></i></a>
</p>
</div>
</div>
</div>
</section>
<!-- Contacts 6 -->
<section class="fdb-block pt-0">
<div class="container-fluid p-0 pb-5">
<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2848.8444388087937!2d26.101253041406952!3d44.43635311654287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b1ff4770adb5b7%3A0x58147f39579fe6fa!2zR3J1cHVsIFN0YXR1YXIgIkPEg3J1yJthIEN1IFBhaWHIm2Ui!5e0!3m2!1sen!2sro!4v1507381157656"
width="100%" height="300" frameborder="0" style="border:0" allowfullscreen=""></iframe>
</div>
<div class="container">
<div class="row pt-5">
<div class="col-12">
<form>
<div class="row">
<div class="col-12 col-md">
<label>First Name</label>
<input type="text" class="form-control">
</div>
<div class="col-12 col-md mt-4 mt-md-0">
<label>Last Name</label>
<input type="text" class="form-control">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label>Your Email</label>
<input type="email" class="form-control">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label>Subject (optional but helpful)</label>
<input type="email" class="form-control">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label>How can we help?</label>
<textarea class="form-control" name="message" rows="3"></textarea>
</div>
</div>
<div class="row mt-4 text-center">
<div class="col">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Contacts 7 -->
<section class="fdb-block py-0">
<div class="container py-5" style="background-image: url(imgs/shapes/6.svg);">
<div class="row text-center justify-content-center">
<div class="col-12 col-md-8 col-lg-7">
<h1>Contact Us</h1>
<p class="lead">If you’re already an active user, please <a href="https://www.froala.com">sign in</a> before contacting us.</p>
</div>
</div>
<div class="row-50">
</div>
<div class="row justify-content-center">
<div class="col-12 col-md-8 col-lg-7">
<form>
<div class="row">
<div class="col">
<label>Your Email Address</label>
<input type="text" class="form-control">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label>Subject (optional but helpful)</label>
<input type="email" class="form-control">
</div>
</div>
<div class="row mt-4">
<div class="col">
<label>How can we help?</label>
<textarea class="form-control" name="message" rows="3"></textarea>
</div>
</div>
<div class="row mt-4">
<div class="col text-right">
<button type="submit" class="btn btn-dark">Submit</button>
</div>
</div>
</form>
</div>
</div>
<div class="row-100"></div>
</div>
<div class="container-fluid p-0">
<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2848.8444388087937!2d26.101253041406952!3d44.43635311654287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b1ff4770adb5b7%3A0x58147f39579fe6fa!2zR3J1cHVsIFN0YXR1YXIgIkPEg3J1yJthIEN1IFBhaWHIm2Ui!5e0!3m2!1sen!2sro!4v1507381157656"
width="100%" height="300" frameborder="0" style="border:0" allowfullscreen=""></iframe>
</div>
</section>
<!-- Contacts 8 -->
<section class="fdb-block pt-0" style="background-image: url(./imgs/shapes/8.svg)">
<div class="bg-gray">
<div class="container">
<div class="row-100"></div>
<div class="row text-left">
<div class="col-8">
<h1>Contact Us</h1>
<p class="lead">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
</div>
</div>
<div class="row-100"></div>
</div>
</div>
<div class="container bg-r">
<div class="row-100"></div>
<div class="row">
<div class="col-12 col-md-6 col-lg-5">
<h2>Call or email</h2>
<p class="text-large">Support, Sales, and Account Management services are currently available in English</p>
<p class="h3 mt-4 mt-lg-5">
<strong>Support</strong>
</p>
<p>
+800 3005 4300
</p>
<p>
<a href="https://www.froala.com">Contact Support</a>
</p>
<p>
Our technical support is available by phone or email from 11am to 11pm BST, Monday through Friday.
</p>
<p class="h3 mt-4 mt-lg-5">
<strong>Sales</strong>
</p>
<p>
+800 3005 4300
</p>
<p>
<a href="https://www.froala.com">Contact Sales</a>
</p>
<p>
Our technical support is available by phone or email from 11am to 11pm BST, Monday through Friday.
</p>
<p class="h3 mt-4 mt-lg-5">
<strong>General inquiries</strong>
</p>
<p>
<a href="https://www.froala.com">hello@website.com</a>
</p>
</div>
<div class="col-12 col-md-6 ml-auto">
<h2>Drop us a line</h2>
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
<div class="row mt-4">
<div class="col">
<input type="text" class="form-control" placeholder="Company Name">
</div>
</div>
<div class="row mt-4">
<div class="col">
<input type="email" class="form-control" placeholder="Email">
</div>
</div>
<div class="row mt-4">
<div class="col">
<input type="text" class="form-control" placeholder="Phone">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Country">
</div>
</div>
<div class="row mt-4">
<div class="col">
<select class="form-control" required="">
<option value="">Select Department</option>
<option value="1">Support</option>
<option value="2">Sales</option>
<option value="3">Accounting</option>
</select>
</div>
</div>
<div class="row mt-4">
<div class="col">
<textarea class="form-control" name="message" rows="5" placeholder="How can we help?"></textarea>
</div>
</div>
<div class="row mt-4">
<div class="col">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Contacts 9 -->
<section class="fdb-block bg-gray">
<div class="container">
<div class="row text-center justify-content-center">
<div class="col-12 col-md-8 col-lg-7">
<p class="h2">support@website.com</p>
<p class="lead">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p><br></p>
<p class="h2">
<a href="https://www.froala.com" class="mx-2"><i class="fab fa-facebook"></i></a>
<a href="https://www.froala.com" class="mx-2"><i class="fab fa-twitter"></i></a>
<a href="https://www.froala.com" class="mx-2"><i class="fab fa-instagram"></i></a>
<a href="https://www.froala.com" class="mx-2"><i class="fab fa-google"></i></a>
<a href="https://www.froala.com" class="mx-2"><i class="fab fa-pinterest"></i></a>
</p>
</div>
</div>
</div>
</section>
<!-- Contacts 10 -->
<section class="fdb-block">
<div class="container">
<div class="row text-center justify-content-center">
<div class="col-12 col-md-8 col-lg-7">
<h1>Contact Us</h1>
<p class="lead">Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
</div>
</div>
<div class="row-70"></div>
<div class="row">
<div class="col-12 col-md-8 col-lg m-auto">
<form>
<div class="row">
<div class="col">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</div>
<div class="row mt-4">
<div class="col">
<input type="email" class="form-control" placeholder="Subject">
</div>
</div>
<div class="row mt-4">
<div class="col">
<textarea class="form-control" name="message" rows="3" placeholder="How can we help?"></textarea>
</div>
</div>
<div class="row mt-4">
<div class="col">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
<div class="col-12 col-md-8 col-lg pt-5 m-auto pt-lg-0">
<iframe class="mb-4" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2848.8444388087937!2d26.101253041406952!3d44.43635311654287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40b1ff4770adb5b7%3A0x58147f39579fe6fa!2zR3J1cHVsIFN0YXR1YXIgIkPEg3J1yJthIEN1IFBhaWHIm2Ui!5e0!3m2!1sen!2sro!4v1507381157656"
width="100%" height="200" frameborder="0" style="border:0" allowfullscreen=""></iframe>
<p><strong>Showroom</strong></p>
<p>
71 Pilgrim Avenue<br>Chevy Chase, MD 20815
</p>
</div>
</div>
</div>
</section>
</body>
</html>
You can’t perform that action at this time.