<!-- O'Healy Marketing — Web Design -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width"/>
<title>O'Healy Marketing</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<nav class="nav">
<a href="#hero" class="nav__logo">
<img src="./logo.jpg" alt="O'Healy"/>
</a>
<ul class="nav__links">
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#mission">Mission</a></li>
</ul>
<a href="#apply" class="nav__cta">Apply</a>
</nav>
<section class="hero" id="hero">
<div class="hero__bg"></div>
<h1 class="hero__company-name">
O'Healy<br>Marketing
</h1>
</section>
<section class="about" id="about">
<h2>About Us</h2>
<p>UF students building modern tech</p>
<p>for Gainesville local businesses.</p>
</section>
<section class="services" id="services">
<div class="card">AI Automation</div>
<div class="card">Website Creation</div>
<div class="card">Website Redesign</div>
</section>
</body>
</html>
<!-- form section -->
<section id="apply">
<form id="applicationForm">
<input name="full_name" required/>
<input name="email" type="email"/>
<input name="phone" type="tel"/>
<select name="services">
<option>AI Automation</option>
<option>Website Creation</option>
<option>Website Redesign</option>
</select>
<textarea name="message"></textarea>
<button type="submit">Apply Now</button>
</form>
</section>
// n8n — Application Form Handler
{
"name": "Application Form Handler",
"active": true,
"nodes": [
{
"type": "n8n-nodes-base.webhook",
"name": "Application Webhook",
"parameters": {
"httpMethod": "POST",
"path": "apply",
"responseMode": "responseNode"
}
},
{
"type": "n8n-nodes-base.code",
"name": "Rate Limit Check",
"parameters": {
"jsCode": "const MAX = 5;"
}
},
{
"type": "n8n-nodes-base.if",
"name": "Is Rate Limited?",
"conditions": {
"combinator": "and",
"conditions": [{
"leftValue": "={{ $json.blocked }}",
"operator": {
"type": "boolean",
"operation": "equal"
}
}]
}
},
{
"type": "n8n-nodes-base.if",
"name": "Validate Required Fields",
"conditions": {
"combinator": "and",
"conditions": [
{ "field": "full_name", "op": "notEmpty" },
{ "field": "email", "op": "notEmpty" }
]
}
},
{
"type": "n8n-nodes-base.gmail",
"name": "Notify O'Healy (Gmail)",
"credentials": {
"gmailOAuth2": "Gmail account 2"
}
},
{
"type": "n8n-nodes-base.respondToWebhook",
"name": "Success Response",
"parameters": {
"responseCode": 200,
"responseBody": "{ success: true }"
}
}
],
"connections": {
"Application Webhook": {
"main": [[{
"node": "Rate Limit Check"
}]]
},
"Rate Limit Check": {
"main": [[{
"node": "Is Rate Limited?"
}]]
},
"Validate Required Fields": {
"main": [[{
"node": "Notify O'Healy (Gmail)"
}]]
}
}
}
/* styles.css — O'Healy Marketing */
:root {
--color-primary: #1A0076;
--color-secondary: #4361EE;
--color-accent: #C0C0C0;
--color-dark: #0D0040;
--font-heading: 'Airstrike', sans-serif;
--font-body: 'Utendo', sans-serif;
--dur-short: 300ms;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: var(--color-dark);
font-family: var(--font-body);
color: #FFFFFF;
}
.hero {
min-height: 100dvh;
display: flex;
align-items: flex-end;
position: relative;
overflow: hidden;
}
.nav {
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 5%;
z-index: 100;
}
.card {
background: var(--color-primary);
border-radius: 12px;
padding: 32px;
transition: box-shadow 350ms ease-out;
}
.card:hover {
box-shadow: 0 0 28px
rgba(67, 97, 238, 0.35);
}
.submit-btn {
background: var(--color-secondary);
color: #FFFFFF;
font-family: 'Utendo', sans-serif;
border: none;
border-radius: 8px;
padding: 16px 24px;
cursor: pointer;
}
@media (max-width: 768px) {
.nav__links {
display: none;
}
.hero__company-name {
font-size: clamp(60px, 12vw, 96px);
}
}
