Skip to content

Commit

Permalink
Add contact.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@stm-2018
stm-2018 committed Dec 13, 2023
1 parent d420b52 commit 928acdd
Show file tree
Hide file tree
Showing 3 changed files with 193 additions and 2 deletions.
182 changes: 182 additions & 0 deletions contact.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script defer src="https://sybiltec.com/fontawesome/js/029ff40d7b.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XVK8SSNQSC"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XVK8SSNQSC');
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact | Web Design Erith, Bexley, South East London | Sybiltec</title>
<meta name="Description" content="Providing web design services in Erith, Bexley and South East London. Shopify, WordPress and Wix. Contact me for a free consultation or website review.">
<meta property="og:locale" content="en_GB" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Contact | Web Design Erith, Bexley, South East London | Sybiltec" />
<meta property="og:description" content="Providing web design services in Erith, Bexley and South East London. Shopify, WordPress and Wix. Contact me for a free consultation or website review." />
<meta property="og:url" content="https://sybiltec.com/contact" />
<meta property="og:site_name" content="Sybiltec" />
<meta property="og:image" content="https://sybiltec.com/images/logos/sybiltec-logo-social.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@sybiltec" />
<meta name="twitter:site" content="@sybiltec" />
<meta name="twitter:label1" content="Written by">
<meta name="twitter:data1" content="Sybil Mayard">
<meta name="twitter:label2" content="Estimated reading time">
<meta name="twitter:data2" content="1 minute">
<meta name="google-site-verification" content="4CQdjA8VuHHdJlLAeL33JXUNCcg92x6Yy2MK2H-F5rs" />
<link rel="canonical" href="https://sybiltec.com/contact" />
<link rel="stylesheet" href="https://sybiltec.com/styles.min.css" type="text/css">
<link rel="icon" type="image/png" href="https://sybiltec.com/favicon.png">
</head>
<body>
<div class="header">
<div class="container-1140">
<div class="row">
<div class="col-2">
<div class="logo">
<a href="/"><img src="https://sybiltec.com/images/logos/sybiltec-logo-small.png" alt="Sybiltec"></a>
</div>
</div>
<div class="col-10">
<div class="nav">
<div class="topnav" id="myTopnav">
<a href="/">Home</a>
<div class="dropdown">
<button onclick="toggleDropdown()" class="dropbtn">Services
<i class="fa-solid fa-angle-down"></i>
</button>
<div id="myDropdown" class="dropdown-content">
<a href="https://sybiltec.com/website-review">Website Review</a>
<a href="https://sybiltec.com/website-design">Website Design</a>
<a href="https://sybiltec.com/website-development">Website Development</a>
<a href="https://sybiltec.com/website-maintenance">Website Maintenance</a>
<a href="https://sybiltec.com/training">Training</a>
<a href="https://sybiltec.com/leaflet-design">Leaflet Design</a>
</div>
</div>
<a href="https://sybiltec.com/clients">Clients</a>
<!-- <a href="https://sybiltec.com/events">Events</a> -->
<a href="https://sybiltec.com/about">About Me</a>
<a href="https://sybiltec.com/projects">Projects</a>
<a href="https://sybiltec.com/faqs">FAQs</a>
<a href="https://sybiltec.com/blog">Blog</a>
<a href="https://sybiltec.com/contact" target="_blank">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fas fa-bars"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hero center">
<div class="container-1140">
<h1>Contact Sybiltec</h1>
</div>
</div>
<div class="main section center">
<div class="container-1140">
<h2>Let's work together</h2>
<hr>
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<iframe src="https://us5.list-manage.com/contact-form?u=0faa041c3b4e79909716dd256&form_id=e1c8f76dbb1507fc5caa25324e7047dd"></iframe>
</body>
</html>
</div>
</div>
<div class="contact section">
<div class="container-1140">
<div class="row">
<div class="col-8">
<h3>Would You Like To Start A Project With Me?</h3>
<p>Click the contact button to get in touch with your requirements</p>
</div>
<div class="col-4">
<a class="btn-primary" href="https://sybiltec.com/contact" target="_blank">Contact Me</a>
</div>
</div>
</div>
</div>
<div class="footer section">
<div class="container-1140">
<div class="row">
<div class="col-3">
<h4>Links</h4>
<p><a href="/">Home</a></p>
<p><a href="https://sybiltec.com/about">About</a></p>
<p><a href="https://sybiltec.com/contact" target="_blank">Contact</a></p>
<p><a href="https://sybiltec.com/terms-and-conditions">Terms and Conditions</a></p>
<p><a href="https://sybiltec.com/uploads/privacy-policy-v3.pdf" target="_blank">Privacy Policy</a></p>
</div>
<div class="col-5">
<div class="ml-form-embed"
data-account="2216689:x9i7o3w7n4"
data-form="5270027:e5c2j0">
</div>
</div>
<div class="col-4">
<h4>Get in Touch</h4>
<p>
<a href="https://sybiltec.com/contact" target="_blank"><i class="far fa-envelope"></i></a>
<a href="https://linkedin.com/in/sybil-m" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-linkedin"></i></a>
<a href="https://instagram.com/sybiltec" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-instagram"></i></a>
<a href="https://youtube.com/@sybiltec" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-youtube"></i></a>
</p>
</div>
</div>
<div class="logo"><img src="https://sybiltec.com/images/logos/sybiltec-logo-transparent.png" alt="Sybiltec logo">
</div>
</div>
</div>
<div class="copyright section center"><p>Copyright &copy;
<span id="year"></span> Sybiltec | Website designed and developed by <a href="/">Sybiltec</a></p>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function toggleDropdown() {
document.getElementById("myDropdown").classList.toggle("show");
console.log("click");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
document.getElementById("year").innerHTML = new Date().getFullYear();
</script>
</body>
</html>
11 changes: 10 additions & 1 deletion styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,15 @@
* {
box-sizing: border-box;
}
/* iframe styling */
body {
margin: 0;
}
iframe {
border-width: 0px;
width: 100%;
height: 1200px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
Expand Down Expand Up @@ -306,7 +315,7 @@ hr {
background-image: linear-gradient(90deg, #791E89, rgb(204, 0, 0, 0.8));
background-size: cover;
background-repeat: no-repeat;
padding: 100px 20px;
padding: 50px 20px;
}
@media screen and (max-width: 767px) {
.hero {
Expand Down
Loading

0 comments on commit 928acdd

Please sign in to comment.