frontend
This commit is contained in:
52
templates/about/about_page.html
Normal file
52
templates/about/about_page.html
Normal file
@@ -0,0 +1,52 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% load wagtailcore_tags %}
|
||||
|
||||
{% block body_class %}template-aboutpage{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<section class="relative bg-white">
|
||||
<div class="container mx-auto p-4">
|
||||
<div class="flex flex-col lg:flex-row">
|
||||
<div class="lg:w-3/5 mb-4 lg:mb-0 lg:pr-8">
|
||||
<div class="text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl">
|
||||
{{ page.section_one_title|richtext }}
|
||||
</div>
|
||||
<div class="mb-10 text-base md:text-lg lg:text-lg text-left leading-smaller sm:leading-mid md:leading-normal lg:leading-loose">
|
||||
{{ page.section_one_text|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-2/5 flex items-center justify-center">
|
||||
<div class="md:max-h-sm md:max-w-35 mx-auto">
|
||||
{{ page.section_one_img|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="relative rounded-xl main-color">
|
||||
<div class="container mx-auto p-4">
|
||||
<div class="text-left mb-8">
|
||||
</div>
|
||||
<div class="flex flex-col lg:flex-row">
|
||||
<div class="lg:w-3/5 mb-4 lg:mb-0 lg:pr-8">
|
||||
<div class="mb-10 text-base md:text-lg lg:text-lg text-left leading-smaller sm:leading-mid md:leading-normal lg:leading-loose">
|
||||
{{ page.section_two_title|richtext }}
|
||||
</div>
|
||||
<div class="text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl">
|
||||
{{ page.section_two_text|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-2/5 flex items-center justify-center">
|
||||
<div class="md:max-h-sm md:max-w-35 mx-auto">
|
||||
{{ page.section_two_img|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<br />
|
||||
|
||||
{% endblock %}
|
||||
73
templates/base.html
Normal file
73
templates/base.html
Normal file
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>{% block title %}Saburly - {{ self.title }}{% endblock %}</title>
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
|
||||
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
|
||||
{% load static %}
|
||||
<link rel="stylesheet" href="{% static './css/style.css' %}">
|
||||
<link rel="shortcut icon" type="image/png" href="{% static './images/favicon32.png' %}">
|
||||
{% block extra_head %}{% endblock %}
|
||||
</head>
|
||||
|
||||
<body class="font-sans mx-auto">
|
||||
<main class="side-panel panel">
|
||||
{% include 'header.html' %}
|
||||
<div class="content">
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% include 'footer.html' %}
|
||||
</main>
|
||||
|
||||
<script>
|
||||
//side menu
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const sideToggle = document.querySelector('.side-toggle');
|
||||
const sideMenu = document.querySelector('.side-menu');
|
||||
const sideCloseButtons = document.querySelectorAll('.side-close');
|
||||
|
||||
sideToggle.addEventListener('click', function() {
|
||||
sideMenu.classList.toggle('active');
|
||||
this.classList.toggle('menu-opened');
|
||||
});
|
||||
|
||||
sideCloseButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
sideMenu.classList.remove('active');
|
||||
sideToggle.classList.remove('menu-opened');
|
||||
});
|
||||
});
|
||||
})
|
||||
//header
|
||||
var prevScrollPos = window.pageYOffset;
|
||||
|
||||
window.onscroll = function() {
|
||||
var currentScrollPos = window.pageYOffset;
|
||||
|
||||
if (prevScrollPos < currentScrollPos) {
|
||||
document.getElementById("header").classList.add("header-hidden");
|
||||
document.getElementById("header").classList.remove("header-visible");
|
||||
}
|
||||
else {
|
||||
document.getElementById("header").classList.add("header-visible");
|
||||
document.getElementById("header").classList.remove("header-hidden");
|
||||
}
|
||||
|
||||
prevScrollPos = currentScrollPos;
|
||||
};
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
73
templates/contact/contact_page.html
Normal file
73
templates/contact/contact_page.html
Normal file
@@ -0,0 +1,73 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% load wagtailcore_tags %}
|
||||
|
||||
{% block body_class %}template-contactpage{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<section class="relative bg-white">
|
||||
<div class="container mx-auto p-4">
|
||||
<div class="text-center mb-8"></div>
|
||||
<div class="flex flex-col lg:flex-row">
|
||||
<div class="lg:w-3/5 mb-4 lg:mb-0 lg:pr-8">
|
||||
<div class="text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl">
|
||||
{{ page.section_one_title|richtext }}
|
||||
</div>
|
||||
<div class="mb-10 text-base md:text-lg lg:text-lg text-left leading-smaller sm:leading-mid md:leading-normal lg:leading-loose">
|
||||
{{ page.section_one_text|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-2/5 flex items-center justify-center">
|
||||
<div class="md:max-h-sm md:max-w-35 mx-auto">
|
||||
{{ page.section_one_img|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% load widget_tweaks %}
|
||||
|
||||
<section class="relative bg-white">
|
||||
<div class="container mx-auto p-4">
|
||||
<div class="text-center mb-8"></div>
|
||||
<div class="flex flex-col lg:flex-row">
|
||||
<div class="lg:w-2/5 mb-4 lg:mb-0 lg:pr-8">
|
||||
<div class="text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl">
|
||||
{{ page.section_two_title|richtext }}
|
||||
</div>
|
||||
<div class="mb-10 text-base md:text-lg lg:text-lg text-left leading-smaller sm:leading-mid md:leading-normal lg:leading-loose">
|
||||
<form action="{% pageurl page %}" method="POST" class="space-y-0 max-w-md mx-auto">
|
||||
{% csrf_token %}
|
||||
{{ form.non_field_errors }}
|
||||
<div class="relative">
|
||||
{% render_field form.name class="w-full border-b border-gray-300 text-gray-700 py-1 px-0 focus:outline-none focus:border-cyan-400 transition duration-300 placeholder-gray-500 text-sm" placeholder=form.name.label %}
|
||||
{{ form.name.errors }}
|
||||
</div>
|
||||
<div class="relative mt-2">
|
||||
{% render_field form.email class="w-full border-b border-gray-300 text-gray-700 py-1 px-0 focus:outline-none focus:border-cyan-400 transition duration-300 placeholder-gray-500 text-sm" placeholder=form.email.label %}
|
||||
{{ form.name.errors }}
|
||||
</div>
|
||||
<div class="relative mt-2">
|
||||
{% render_field form.message class="w-full border-b border-gray-300 text-gray-700 py-1 px-0 focus:outline-none focus:border-cyan-400 transition duration-300 placeholder-gray-500 text-sm" placeholder=form.message.label %}
|
||||
{{ form.message.errors }}
|
||||
</div>
|
||||
<button type="submit" class="w-full text-white text-lg py-2 border rounded-lg focus:outline-none transition duration-300 btn rqbtn mt-4">
|
||||
SEND
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-3/5 flex items-center justify-center">
|
||||
<div class="md:max-h-sm md:max-w-35 mx-auto">
|
||||
{{ page.section_two_img|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{% endblock %}
|
||||
56
templates/contact/contact_page_landing.html
Normal file
56
templates/contact/contact_page_landing.html
Normal file
@@ -0,0 +1,56 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% load wagtailcore_tags %}
|
||||
|
||||
{% block body_class %}template-contactpage{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<section class="relative bg-white">
|
||||
<div class="container mx-auto p-4">
|
||||
<div class="text-center mb-8"></div>
|
||||
<div class="flex flex-col lg:flex-row">
|
||||
<div class="lg:w-3/5 mb-4 lg:mb-0 lg:pr-8">
|
||||
<div class="text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl">
|
||||
{{ page.section_one_title|richtext }}
|
||||
</div>
|
||||
<div class="mb-10 text-base md:text-lg lg:text-lg text-left leading-smaller sm:leading-mid md:leading-normal lg:leading-loose">
|
||||
{{ page.section_one_text|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-2/5 flex items-center justify-center">
|
||||
<div class="md:max-h-sm md:max-w-35 mx-auto">
|
||||
{{ page.section_one_img|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% load widget_tweaks %}
|
||||
|
||||
<section class="relative bg-white">
|
||||
<div class="container mx-auto p-4">
|
||||
<div class="text-center mb-8"></div>
|
||||
<div class="flex flex-col lg:flex-row">
|
||||
<div class="lg:w-2/5 mb-4 lg:mb-0 lg:pr-8">
|
||||
<div class="text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl">
|
||||
{{ page.section_two_text|richtext }}
|
||||
</div>
|
||||
<div class="mb-10 text-base md:text-lg lg:text-lg text-left leading-smaller sm:leading-mid md:leading-normal lg:leading-loose">
|
||||
<div class="text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-3/5 flex items-center justify-center">
|
||||
<div class="md:max-h-sm md:max-w-35 mx-auto">
|
||||
{{ page.section_two_img|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
{% endblock %}
|
||||
79
templates/footer.html
Normal file
79
templates/footer.html
Normal file
@@ -0,0 +1,79 @@
|
||||
{%load static%}
|
||||
<footer class="saburly-main-bg">
|
||||
|
||||
<div class="text-center py-4 lg:px-4 connect">
|
||||
<a class="no-underline text-white" href="/contact">
|
||||
<div class="p-2 items-center text-white leading-none flex lg:inline-flex" role="alert">
|
||||
<span class="flex btn saburly-transition uppercase px-3 py-2 text-xs mr-3">
|
||||
Let's Connect
|
||||
</span>
|
||||
<span class="mr-2 hover:opacity-80 saburly-transition text-left flex-auto">
|
||||
Tell us about your project and get a free proposal
|
||||
</span>
|
||||
<svg class="fill-current opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" />
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="saburly-footer">
|
||||
<div class="container mx-auto my-4 lg:flex">
|
||||
<div class="lg:w-1/4 p-4">
|
||||
<img src="{% static './images/saburly-logo-w.svg' %}" alt="Saburly Logo" class="w-full opacity-80" />
|
||||
<div class="flex justify-between social-icons py-2 gap-2">
|
||||
<div>
|
||||
<a href="https://facebook.com/saburly" rel="noreferrer" target="_blank">
|
||||
<img src="{% static './images/facebook.svg' %}" alt="Facebook Social Media" class="max-w-2.5 saburly-transition opacity-80 hover:opacity-100 w-full" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://instagram.com/saburly" rel="noreferrer" target="_blank">
|
||||
<img src="{% static './images/instagram.svg' %}" alt="Instagram Social Media" class="max-w-2.5 saburly-transition opacity-80 hover:opacity-100 w-full" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://twitter.com/saburly" rel="noreferrer" target="_blank">
|
||||
<img src="{% static './images/twitter.svg' %}" alt="Twitter Social Media" class="max-w-2.5 saburly-transition opacity-80 hover:opacity-100 w-full" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://www.linkedin.com/company/saburly/" rel="noreferrer" target="_blank">
|
||||
<img src="{% static './images/linkedin.svg' %}" alt="LinkedIn Social Media" class="max-w-2.5 saburly-transition opacity-80 hover:opacity-100 w-full" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lg:w-3/4">
|
||||
<div class="p-4 text-center lg:text-left sm:flex justify-around">
|
||||
<nav>
|
||||
<p class="font-thin text-white opacity-80">Sitemap</p>
|
||||
<ul class="list-reset text-sm inline-block">
|
||||
<a class="block my-2 text-white hover:opacity-70" href="/">
|
||||
<li class="menu-class">HOME</li>
|
||||
</a>
|
||||
<a class="block my-2 text-white hover:opacity-70" href="/services">
|
||||
<li class="menu-class">SERVICES</li>
|
||||
</a>
|
||||
<a class="block my-2 text-white hover:opacity-70" href="/about">
|
||||
<li class="menu-class">ABOUT US</li>
|
||||
</a>
|
||||
<a class="block my-2 text-white hover:opacity-70" href="/contact">
|
||||
<li class="menu-class">CONTACT</li>
|
||||
</a>
|
||||
</ul>
|
||||
</nav>
|
||||
<div>
|
||||
<p class="text-white my-2 leading-normal">
|
||||
1819 S Pearl St <br />
|
||||
Denver, CO 80210 <br />
|
||||
Phone: 720-643-2025 <br />
|
||||
info@saburly.com
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
83
templates/header.html
Normal file
83
templates/header.html
Normal file
@@ -0,0 +1,83 @@
|
||||
<header id="header" class="header-visible">
|
||||
<div class="saburly-menu">
|
||||
<nav class="container mx-auto flex items-center justify-between lg:p-6 p-4">
|
||||
<a href="/">
|
||||
<div class="max-w-xs mr-8">
|
||||
{% load static %}
|
||||
<img
|
||||
src="{% static './images/saburly-logo-w.svg' %}"
|
||||
class="saburly-logo saburly-transition"
|
||||
alt="Saburly Logo"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="side-toggle saburly-transition">
|
||||
<div class="menu_icon visible lg:invisible">
|
||||
<span class="menu_bar-top"></span>
|
||||
<span class="menu_bar-mid"></span>
|
||||
<span class="menu_bar-bot"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden lg:visible w-full block flex-grow lg:flex lg:items-right lg:w-auto justify-end lg:flex-grow">
|
||||
<ul class="list-reset text-sm">
|
||||
<li class="no-underline mt-4 lg:inline-block text-white lg:mt-0 hover:opacity-80 uppercase mr-4">
|
||||
<a href="/services">Services</a>
|
||||
</li>
|
||||
<li class="no-underline mt-4 lg:inline-block text-white lg:mt-0 hover:opacity-80 uppercase mr-4">
|
||||
<a href="/about">About Us</a>
|
||||
</li>
|
||||
<li class="no-underline py-2 px-6 lg:inline-block text-white lg:mt-0 hover:opacity-80 uppercase mr-4 ml-4 rqbtn border">
|
||||
<a href="/contact" class="text-white no-underline">
|
||||
Request a quote
|
||||
</a>
|
||||
</li>
|
||||
<li class="no-underline mt-4 lg:inline-block text-white lg:mt-0 uppercase mr-4 ml-4 text-xl">
|
||||
<a href="tel:720-643-2025">
|
||||
<i class="fas fa-phone mr-2 fa-flip-horizontal"></i>
|
||||
720-643-2025
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="side-menu hidden">
|
||||
<ul class="m-0 p-0 mt-4 side-navigation list-reset">
|
||||
<button class="text-white text-2xl m-2 opacity-50 hover:opacity-100 px-2 side-close">
|
||||
</button>
|
||||
<a href="/" class="side-close menu-home no-underline">
|
||||
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
|
||||
Home
|
||||
</li>
|
||||
</a>
|
||||
<a href="/services" class="side-close menu-services no-underline">
|
||||
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
|
||||
Services
|
||||
</li>
|
||||
</a>
|
||||
<a href="/about" class="side-close menu-about no-underline">
|
||||
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
|
||||
About Us
|
||||
</li>
|
||||
</a>
|
||||
<a href="/contact" class="side-close menu-contact no-underline">
|
||||
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
|
||||
Request a quote
|
||||
</li>
|
||||
</a>
|
||||
<a href="tel:7206432025" class="side-close menu-contact no-underline">
|
||||
<li class="hover:bg-white hover:text-black text-right no-underline text-2xl uppercase p-4 text-white">
|
||||
<i class="fas fa-phone mr-2 fa-flip-horizontal"></i>
|
||||
720-643-2025
|
||||
</li>
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
</br>
|
||||
</br>
|
||||
</br>
|
||||
</br>
|
||||
97
templates/home/home_page.html
Normal file
97
templates/home/home_page.html
Normal file
@@ -0,0 +1,97 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% load wagtailcore_tags %}
|
||||
|
||||
{% block body_class %}template-homepage{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<section class="relative bg-white">
|
||||
<div class="container mx-auto items-center flex xl:flex-row justify-between flex-col p-4">
|
||||
<div class="lg:w-3/5 text-center lg:text-left">
|
||||
<h2 class="text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl">
|
||||
{{ page.section_one_title|richtext }}
|
||||
</h2>
|
||||
<div class="mb-10 text-base md:text-lg lg:text-lg text-left leading-smaller sm:leading-mid md:leading-normal lg:leading-loose">
|
||||
{{ page.section_one_text|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-2/5">
|
||||
<div class="md:max-h-sm md:max-w-35 mx-auto">
|
||||
{{ page.section_one_img|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="relative bg-gray-100">
|
||||
<div class="container mx-auto items-center flex xl:flex-row justify-between flex-col p-4">
|
||||
<div class="lg:w-2/5">
|
||||
<div class="md:max-h-sm md:max-w-35 mx-auto">
|
||||
{{ page.section_two_img|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-3/5 text-center lg:text-left">
|
||||
<h2 class="text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl">
|
||||
{{ page.section_two_title|richtext }}
|
||||
</h2>
|
||||
<div class="mb-10 text-base md:text-lg lg:text-lg text-left leading-smaller sm:leading-mid md:leading-normal lg:leading-loose">
|
||||
{{ page.section_two_text|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="relative bg-white">
|
||||
<div class="container mx-auto items-center flex xl:flex-row justify-between flex-col p-4">
|
||||
<div class="lg:w-3/5 text-center lg:text-left">
|
||||
<h2 class="text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl">
|
||||
{{ page.section_three_title|richtext }}
|
||||
</h2>
|
||||
<div class="mb-10 text-base md:text-lg lg:text-lg text-left leading-smaller sm:leading-mid md:leading-normal lg:leading-loose">
|
||||
{{ page.section_three_text|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-2/5">
|
||||
<div class="md:max-h-sm md:max-w-35 mx-auto">
|
||||
{{ page.section_three_img|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="relative bg-gray-100">
|
||||
<div class="container mx-auto items-center flex xl:flex-row justify-between flex-col p-4">
|
||||
<div class="lg:w-2/5">
|
||||
<div class="md:max-h-sm md:max-w-35 mx-auto">
|
||||
{{ page.section_four_img|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-3/5 text-center lg:text-left">
|
||||
<h2 class="text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl">
|
||||
{{ page.section_four_title|richtext }}
|
||||
</h2>
|
||||
<div class="mb-10 text-base md:text-lg lg:text-lg text-left leading-smaller sm:leading-mid md:leading-normal lg:leading-loose">
|
||||
{{ page.section_four_text|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="relative bg-white">
|
||||
<div class="container mx-auto grid grid-cols-1 gap-6 p-4">
|
||||
<div class="text-center lg:text-center">
|
||||
<h2 class="text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl">
|
||||
{{ page.section_five_title|richtext }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="text-base md:text-lg lg:text-lg text-left leading-smaller sm:leading-mid md:leading-normal lg:leading-loose">
|
||||
{{ page.section_five_text|richtext }}
|
||||
</div>
|
||||
<div class="md:max-h-sm md:max-w-35 mx-auto">
|
||||
{{ page.section_five_img|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% endblock %}
|
||||
167
templates/services/services_page.html
Normal file
167
templates/services/services_page.html
Normal file
@@ -0,0 +1,167 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% load wagtailcore_tags %}
|
||||
|
||||
{% block body_class %}template-services{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<section class="relative bg-white">
|
||||
<div class="container mx-auto p-4">
|
||||
<div class="text-center mb-8"></div>
|
||||
<div class="flex flex-col lg:flex-row">
|
||||
<div class="lg:w-3/5 mb-4 lg:mb-0 lg:pr-8">
|
||||
<div class="text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl">
|
||||
{{ page.section_one_title|richtext }}
|
||||
</div>
|
||||
<div class="mb-10 text-base md:text-lg lg:text-lg text-left leading-smaller sm:leading-mid md:leading-normal lg:leading-loose">
|
||||
{{ page.section_one_text|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-2/5 flex items-center justify-center">
|
||||
<div class="md:max-h-sm md:max-w-35 mx-auto">
|
||||
{{ page.section_one_img|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="relative bg-gray-100">
|
||||
<div class="container mx-auto p-4">
|
||||
<div class="text-center mb-8"></div>
|
||||
<div class="flex flex-col lg:flex-row-reverse">
|
||||
<div class="lg:w-3/5 mb-4 lg:mb-0 lg:pl-8">
|
||||
<div class="text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl">
|
||||
{{ page.section_two_title|richtext }}
|
||||
</div>
|
||||
<div class="mb-10 text-base md:text-lg lg:text-lg text-left leading-smaller sm:leading-mid md:leading-normal lg:leading-loose">
|
||||
{{ page.section_two_text|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-2/5 flex items-center justify-center">
|
||||
<div class="md:max-h-sm md:max-w-35 mx-auto">
|
||||
{{ page.section_two_img|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="relative bg-white">
|
||||
<div class="container mx-auto p-4">
|
||||
<div class="text-center mb-8"></div>
|
||||
<div class="flex flex-col lg:flex-row">
|
||||
<div class="lg:w-3/5 mb-4 lg:mb-0 lg:pr-8">
|
||||
<div class="text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl">
|
||||
{{ page.section_three_title|richtext }}
|
||||
</div>
|
||||
<div class="mb-10 text-base md:text-lg lg:text-lg text-left leading-smaller sm:leading-mid md:leading-normal lg:leading-loose">
|
||||
{{ page.section_three_text|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-2/5 flex items-center justify-center">
|
||||
<div class="md:max-h-sm md:max-w-35 mx-auto">
|
||||
{{ page.section_three_img|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="relative bg-gray-100">
|
||||
<div class="container mx-auto p-4">
|
||||
<div class="text-center mb-8">
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-1 gap-8">
|
||||
<div class="text-center text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl">
|
||||
{{ page.section_four_title|richtext }}
|
||||
</div>
|
||||
<div class="mb-10 text-base md:text-lg lg:text-lg text-left leading-sm sm:leading-mid md:leading-normal lg:leading-loose">
|
||||
{{ page.section_four_text|richtext }}
|
||||
</div>
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="md:max-h-sm md:max-w-35 mx-auto">
|
||||
{{ page.section_four_img|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="relative bg-white">
|
||||
<div class="container mx-auto p-4">
|
||||
<div class="text-center mb-8"></div>
|
||||
<div class="flex flex-col lg:flex-row">
|
||||
<div class="lg:w-3/5 mb-4 lg:mb-0 lg:pr-8">
|
||||
<div class="text-3xl xsm:text-4xl md:text-5xl py-2 my-2 lg:text-5xl">
|
||||
{{ page.section_five_title|richtext }}
|
||||
</div>
|
||||
<div class="mb-10 text-base md:text-lg lg:text-lg text-left leading-smaller sm:leading-mid md:leading-normal lg:leading-loose">
|
||||
{{ page.section_five_text|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:w-2/5 flex items-center justify-center">
|
||||
<div class="md:max-h-sm md:max-w-35 mx-auto">
|
||||
{{ page.section_five_img|richtext }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<div class="container mx-auto shadow-xl border border-gray-300">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2">
|
||||
|
||||
<div class="border border-gray-300 p-6">
|
||||
<div class="grid grid-cols-1 gap-4 text-center">
|
||||
<div class="flex justify-center">{{ page.sub_section_one_img|richtext }}</div>
|
||||
<div>{{ page.sub_section_one|richtext }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-300 p-6">
|
||||
<div class="grid grid-cols-1 gap-4 text-center">
|
||||
<div class="flex justify-center">{{ page.sub_section_two_img|richtext }}</div>
|
||||
<div>{{ page.sub_section_two|richtext }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-300 p-6">
|
||||
<div class="grid grid-cols-1 gap-4 text-center">
|
||||
<div class="flex justify-center">{{ page.sub_section_three_img|richtext }}</div>
|
||||
<div>{{ page.sub_section_three|richtext }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-300 p-6">
|
||||
<div class="grid grid-cols-1 gap-4 text-center">
|
||||
<div class="flex justify-center">{{ page.sub_section_four_img|richtext }}</div>
|
||||
<div>{{ page.sub_section_four|richtext }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-300 p-6">
|
||||
<div class="grid grid-cols-1 gap-4 text-center">
|
||||
<div class="flex justify-center">{{ page.sub_section_five_img|richtext }}</div>
|
||||
<div>{{ page.sub_section_five|richtext }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border border-gray-300 p-6">
|
||||
<div class="grid grid-cols-1 gap-4 text-center">
|
||||
<div class="flex justify-center">{{ page.sub_section_six_img|richtext }}</div>
|
||||
<div>{{ page.sub_section_six|richtext }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
<br />
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user