120 lines
6.0 KiB
HTML
120 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<title>Sample web page with buttons and icons</title>
|
|
<meta name="description" content="A sample web page with a range of buttons styles and Font Awesome icons.">
|
|
|
|
<!-- Stylesheet -->
|
|
<link rel="stylesheet" href="assets/css/forms.css">
|
|
|
|
<!-- Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Fira+Sans:ital,wght@0,500;1,500&display=swap" rel="stylesheet">
|
|
|
|
<!-- Link to icons for Font Awesome 5 -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<main>
|
|
<article>
|
|
|
|
<header class="header-narrow text-center bg-header">
|
|
<h1>About Us</h1>
|
|
<img src="assets/img/three-staff.png" alt="staff members">
|
|
<h2>We are an award-winning web, mobile and digital design agency. We can bring your ideas to life online, and transform visionary products and services into successful ones.</h2>
|
|
</header>
|
|
|
|
<section class="section-narrow bg-blue-dark">
|
|
<h1>Section Heading One</h1>
|
|
<p><b>Lorem ipsum dolor</b> sit amet consectetur adipisicing elit. Ea assumenda qui totam nam corrupti dolorum. Dolores minus doloribus obcaecati cupiditate odit voluptatem recusandae maxime consectetur, delectus labore asperiores enim nobis.</p>
|
|
|
|
<p>In pellentesque, odio suscipit ornare vulputate, est nunc consequat neque, nec faucibus nulla arcu id ligula. Proin laoreet cursus vulputate. Curabitur accumsan leo ipsum, et pellentesque velit pretium at. Etiam aliquam, ipsum eu tincidunt.</p>
|
|
</section>
|
|
|
|
<section class="section-narrow bg-blue-light">
|
|
<h1>Section Heading Two</h1>
|
|
<p><b>Lorem ipsum dolor</b> sit amet consectetur adipisicing elit. Ea assumenda qui totam nam corrupti dolorum. Dolores minus doloribus obcaecati cupiditate odit voluptatem recusandae maxime consectetur, delectus labore asperiores enim nobis.</p>
|
|
|
|
<div class="container-btn">
|
|
<a href="#" class="btn btn-solid btn-rounded"><i class="fas fa-shopping-cart"></i> Order Now</a>
|
|
<a href="#" class="btn btn-ghost btn-rounded"><i class="fas fa-arrow-right"></i> Learn more</a>
|
|
</div>
|
|
|
|
<p>In pellentesque, odio suscipit ornare vulputate, est nunc consequat neque, nec faucibus nulla arcu id ligula. Proin laoreet cursus vulputate. Curabitur accumsan leo ipsum, et pellentesque velit pretium at. Etiam aliquam, ipsum eu tincidunt.</p>
|
|
|
|
</section>
|
|
|
|
<section class="section-narrow bg-blue-dark">
|
|
<h1>Section Heading Three</h1>
|
|
<p><b>Lorem ipsum dolor</b> sit amet consectetur adipisicing elit. Ea assumenda qui totam nam corrupti dolorum. Dolores minus doloribus obcaecati cupiditate odit voluptatem recusandae maxime consectetur, delectus labore asperiores enim nobis.</p>
|
|
|
|
<p>In pellentesque, odio suscipit ornare vulputate, est nunc consequat neque, nec faucibus nulla arcu id ligula. Proin laoreet cursus vulputate. Curabitur accumsan leo ipsum, et pellentesque velit pretium at. Etiam aliquam, ipsum eu tincidunt.</p>
|
|
</section>
|
|
|
|
<section class="section-narrow bg-blue-light">
|
|
<h1>Section Heading Four</h1>
|
|
<p><b>Lorem ipsum dolor</b> sit amet consectetur adipisicing elit. Ea assumenda qui totam nam corrupti dolorum. Dolores minus doloribus obcaecati cupiditate odit voluptatem recusandae maxime consectetur, delectus labore asperiores enim nobis.</p>
|
|
|
|
<div class="container-form">
|
|
<form action="https://formspree.io/f/mrgoaavw" method="POST" id="email-form">
|
|
<label for=""></label>
|
|
<input type="email" id="email" name="email" placeholder="email address" required>
|
|
<button id="my-form-button" type="submit" class="btn btn-solid btn-rounded"><i class="fas fa-arrow-right"></i> Subscribe</button>
|
|
<div id="form-status"></div>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
<p>In pellentesque, odio suscipit ornare vulputate, est nunc consequat neque, nec faucibus nulla arcu id ligula. Proin laoreet cursus vulputate. Curabitur accumsan leo ipsum, et pellentesque velit pretium at. Etiam aliquam, ipsum eu tincidunt.</p>
|
|
</section>
|
|
|
|
</article>
|
|
</main>
|
|
|
|
<script>
|
|
var form = document.getElementById("email-form");
|
|
|
|
async function handleSubmit(event) {
|
|
event.preventDefault();
|
|
const status = document.getElementById("form-status");
|
|
const data = new FormData(event.target);
|
|
fetch(event.target.action, {
|
|
method: form.method,
|
|
body: data,
|
|
headers: {
|
|
'Accept': 'application/json'
|
|
}
|
|
}).then(response => {
|
|
document.getElementById("form-status").style.display="block";
|
|
status.innerHTML = "Thanks for your submission!";
|
|
form.reset();
|
|
setTimeout(function() {
|
|
const msg = document.getElementById("form-status");
|
|
msg.style.transition = '.5s';
|
|
msg.style.opacity = '0';
|
|
msg.style.visibility = 'hidden';
|
|
msg.style.display = 'none';
|
|
}, 1250);
|
|
|
|
}).catch(error => {
|
|
document.getElementById("form-status").style.display="block";
|
|
status.innerHTML = "Oops! There was a problem submitting your form."
|
|
setTimeout(function() {
|
|
const msg = document.getElementById("form-status");
|
|
msg.style.transition = '.5s';
|
|
msg.style.opacity = '0';
|
|
msg.style.visibility = 'hidden';
|
|
msg.style.display = 'none';
|
|
}, 1250);
|
|
});
|
|
}
|
|
form.addEventListener("submit", handleSubmit)
|
|
|
|
</script>
|
|
</body>
|
|
</html> |