<!-- A fully fleshed-out <head>, dynamically changing based on client.json and the page front matter -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Standard meta tags -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Meta description for the page">
<meta name="keywords" content="">
<link rel="canonical" href="https://www.designgandalf.com/web-design-page-transitions">
<!--Social Media Display-->
<meta property="og:title" content="Web Design Page Transitions"/>
<meta property="og:description" content="Meta description for the page"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://www.designgandalf.com/web-design-page-transitions"/>
<meta property="og:image" content="/assets/images/logo-small.png"/>
<meta property="og:image:secure_url" content="/assets/images/logo-small.png"/>
<!--Favicons-->
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png?v1">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
<link rel="manifest" href="/assets/favicons/site.webmanifest">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<!-- Preloads -->
<link rel="preload" as="image" href="/assets/svgs/logo-white.svg">
<link rel="preload" as="font" type="font/woff2" href="/assets/fonts/poppins-v21-latin-regular.woff2" crossorigin>
<link rel="preload" as="font" type="font/woff2" href="/assets/fonts/poppins-v21-latin-900.woff2" crossorigin>
<!-- Preload an image - tag not rendered if preloadImg is blank to stop console errors -->
<link rel="preload" as="image" href="/assets/images/cabinets2.jpg"/>
<!-- Sitewide Stylesheets and Scripts -->
<link rel="stylesheet" href="/assets/css/root.css">
<link rel="stylesheet" href="/assets/aos/aos.css" />
<title>Web Design Page Transitions</title>
</head>
<body>
<!--Screen reader skip main nav-->
<a class="skip" aria-label="skip to main content" href="#main">Click To Skip To Main Content</a>
<!-- ============================================ -->
<!-- Navigation -->
<!-- ============================================ -->
<style>
/*-- -------------------------- -->
<--- Mobile Navigation -->
<--- -------------------------- -*/
/* Mobile - 1023px */
button {background-color: transparent; border: 0px;}
@media only screen and (max-width: 63.9375rem) {
body {
position: relative;
z-index: 1;
}
body:before {
content: '';
width: 100%;
height: 0%;
background: #fff;
opacity: 1;
position: absolute;
display: block;
top: 0;
left: 0;
transition: height .3ms;
}
body.scroll #cs-navigation {
width: 100%;
max-width: 100%;
height: 5rem;
top: 0;
}
body.scroll #cs-navigation .cs-logo img {
height: 30px;
transition: height ease .3ms;
}
body.scroll #cs-navigation:before {
border-radius: 0;
transition: border-radius ease .2ms;
}
body.scroll #cs-navigation .cs-ul-wrapper {
top: 100%;
}
body.cs-open {
overflow: hidden;
}
body.cs-open:before {
height: 100%;
}
#cs-navigation {
width: 94%;
max-width: 80rem;
/* 12px - 24px */
padding: clamp(0.75rem, 2vw, 1.5rem);
/* prevents padding from affecting height and width */
box-sizing: border-box;
border-radius: 999px;
/* 12px - 24px */
position: fixed;
top: 1rem;
left: 50%;
z-index: 10000;
transform: translateX(-50%);
transition: top 0.3s, border-radius 0.3s, width 0.3s, max-width 0.3s;
}
#cs-navigation:before {
/* background color */
content: '';
width: 100%;
height: 100%;
background: #fff;
border-radius: 999px;
/* 12px - 24px */
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
opacity: 1;
position: absolute;
display: block;
top: 0;
left: 50%;
transform: translateX(-50%);
transition: transform 0.2s, border-radius 0.3s ease-in-out;
}
#cs-navigation.cs-active:before {
transform: translateX(-50%) scale(1.03);
}
#cs-navigation.cs-active .cs-ul-wrapper {
opacity: 1;
transform: scaleY(1);
}
#cs-navigation.cs-active .cs-toggle {
transform: rotate(180deg);
}
#cs-navigation.cs-active .cs-li {
transform: translateY(0);
opacity: 1;
}
#cs-navigation .cs-container {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 1.5rem;
}
#cs-navigation .cs-logo {
width: auto;
height: 100%;
margin: 0 auto 0 10px;
padding: 0;
/* prevents padding from affecting height and width */
box-sizing: border-box;
display: flex;
justify-content: flex-start;
align-items: center;
z-index: 10;
}
#cs-navigation .cs-logo img {
width: 100%;
height: 100%;
/* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
object-fit: contain;
transition: all ease .3s;
}
#cs-navigation .cs-toggle {
width: 3.5rem;
height: 3.5rem;
margin: 0 0 0 auto;
border-radius:999px;
background-color: #1A1A1A;
border: none;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1
;
transition: transform .6s;
}
#cs-navigation .cs-nav {
/* sends it to the right in the 3rd position */
order: 3;
}
#cs-navigation .cs-contact-group {
display: none;
position: relative;
z-index: 1;
}
#cs-navigation .cs-phone {
font-size: 1rem;
line-height: 1.5em;
text-decoration: none;
margin: 0;
color: var(--headerColor);
display: flex;
justify-content: flex-start;
align-items: center;
gap: 0.5rem;
transition: opacity 0.3s,
color 0.3s;
}
#cs-navigation .cs-phone-icon {
width: 1.5rem;
height: auto;
display: block;
}
#cs-navigation .cs-social {
display: none;
}
#cs-navigation .cs-active .cs-line1 {
top: 50%;
transform: translate(-50%, -50%) rotate(225deg);
}
#cs-navigation .cs-active .cs-line2 {
top: 50%;
transform-origin: center;
transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
}
#cs-navigation .cs-active .cs-line3 {
bottom: 100%;
opacity: 0;
}
#cs-navigation .cs-box {
/* 24px - 28px */
width: clamp(1.5rem, 2vw, 1.75rem);
height: 1rem;
position: relative;
}
#cs-navigation .cs-line {
width: 100%;
height: 2px;
border-radius: 2px;
background-color: #FAFBFC;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#cs-navigation .cs-line1 {
top: 0;
transform-origin: center;
transition: transform .5s, top .3S, left .3S;
animation-duration: .7s;
animation-timing-function: ease;
animation-fill-mode: forwards;
animation-direction: normal;
}
#cs-navigation .cs-line2 {
top: 50%;
transform: translateX(-50%) translateY(-50%);
transition: top .3s, left .3s, transform .5s;
animation-duration: .7s;
animation-timing-function: ease;
animation-fill-mode: forwards;
animation-direction: normal;
}
#cs-navigation .cs-line3 {
bottom: 0;
transition: bottom .3s, opacity .3s;
}
#cs-navigation .cs-ul-wrapper {
height: 100vh;
padding-bottom: 3rem;
opacity: 0;
overflow: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: -1;
transform: scaleY(0);
transform-origin: top;
transition: transform .4s, opacity .3s;
}
#cs-navigation .cs-ul {
margin: 0;
padding: 3rem 3rem 0;
width: 100%;
height: auto;
max-height: 65vh;
overflow: scroll;
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
gap: 1.25rem;
}
#cs-navigation .cs-li {
list-style: none;
margin-right: 0;
/* transition from these values */
transform: translateY(-4.375rem);
opacity: 0;
transition: transform .6s, opacity .9s;
}
#cs-navigation .cs-li:nth-of-type(1) {
transition-delay: .05s;
}
#cs-navigation .cs-li:nth-of-type(2) {
transition-delay: .1s;
}
#cs-navigation .cs-li:nth-of-type(3) {
transition-delay: .15s;
}
#cs-navigation .cs-li:nth-of-type(4) {
transition-delay: .2s;
}
#cs-navigation .cs-li:nth-of-type(5) {
transition-delay: .25s;
}
#cs-navigation .cs-li:nth-of-type(6) {
transition-delay: .3s;
}
#cs-navigation .cs-li:nth-of-type(7) {
transition-delay: .35s;
}
#cs-navigation .cs-li:nth-of-type(8) {
transition-delay: .4s;
}
#cs-navigation .cs-li:nth-of-type(9) {
transition-delay: .45s;
}
#cs-navigation .cs-li-link {
font-size: 1.5rem;
line-height: 1.2em;
text-decoration: none;
margin: 0;
color: white;
display: inline-block;
position: relative;
}
#cs-navigation .cs-li-link:before {
/* active state underline */
content: '';
width: 100%;
height: 1px;
background: currentColor;
opacity: 1;
position: absolute;
display: none;
bottom: -0.125rem;
left: 0;
}
#cs-navigation .cs-li-link.cs-active:before {
display: block;
}
#cs-navigation .cs-button-solid {
display: none;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 64rem) {
#cs-navigation .cs-contact-group {
display: block;
}
}
/*-- -------------------------- -->
<--- Navigation Dropdown -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
#cs-navigation .cs-li {
text-align: left;
width: 100%;
display: block;
}
#cs-navigation .cs-dropdown {
position: relative;
color: var(--bodyTextColorWhite);
}
#cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
height: auto;
opacity: 1;
visibility: visible;
margin: 0.75rem 0 0 0;
padding: 0.75rem 0;
}
#cs-navigation .cs-dropdown.cs-active .cs-drop-link {
opacity: 1;
}
#cs-navigation .cs-dropdown .cs-li-link {
position: relative;
transition: opacity .3s;
}
#cs-navigation .cs-drop-icon {
width: 0.9375rem;
height: auto;
position: absolute;
top: 50%;
right: -1.25rem;
transform: translateY(-50%);
}
#cs-navigation .cs-drop-ul {
width: 100%;
height: 0;
margin: 0;
padding: 0;
background-color: var(--primary);
border-radius: 1rem;
overflow: hidden;
opacity: 0;
visibility: hidden;
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
gap: 0.75rem;
transition: padding .3s, margin .3s, height .3s, opacity .3s, visibility .3s;
}
#cs-navigation .cs-drop-li {
list-style: none;
}
#cs-navigation .cs-li-link.cs-drop-link {
/* 14px - 16px */
font-size: clamp(0.875rem, 2vw, 1.25rem);
color: #fff;
}
}
/* Desktop - 1024px */
@media only screen and (min-width: 68rem) {
#cs-navigation .cs-dropdown {
position: relative;
}
#cs-navigation .cs-dropdown:hover {
cursor: pointer;
}
#cs-navigation .cs-dropdown:hover .cs-drop-ul {
transform: scaleY(1);
opacity: 1;
visibility: visible;
}
#cs-navigation .cs-dropdown:hover .cs-drop-li {
opacity: 1;
transform: translateY(0);
}
#cs-navigation .cs-drop-icon {
width: 0.9375rem;
height: auto;
display: inline-block;
}
#cs-navigation .cs-drop-ul {
min-width: 12.5rem;
margin: 0;
padding: 0;
background-color: #fff;
border-radius: 0 0 1.5rem 1.5rem;
overflow: hidden;
opacity: 0;
visibility: hidden;
box-shadow: inset rgba(149, 157, 165, 0.1) 0px 8px 10px;
border-bottom: 5px solid var(--primary);
/* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns. Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the cs-drop-li so they don't have weird scattered animations */
position: absolute;
top: 100%;
z-index: -100;
transform: scaleY(0);
transform-origin: top;
transition: transform .3s, visibility .3s, opacity .3s;
}
#cs-navigation .cs-drop-li {
list-style: none;
font-size: 1rem;
text-decoration: none;
opacity: 0;
width: 100%;
height: auto;
display: block;
transform: translateY(-0.625rem);
transition: opacity .6s, transform .6s;
}
#cs-navigation .cs-drop-li:nth-of-type(1) {
transition-delay: .05s;
}
#cs-navigation .cs-drop-li:nth-of-type(2) {
transition-delay: .1s;
}
#cs-navigation .cs-drop-li:nth-of-type(3) {
transition-delay: .15s;
}
#cs-navigation .cs-drop-li:nth-of-type(4) {
transition-delay: .2s;
}
#cs-navigation .cs-drop-li:nth-of-type(5) {
transition-delay: .25s;
}
#cs-navigation .cs-drop-li:nth-of-type(6) {
transition-delay: .3s;
}
#cs-navigation .cs-drop-li:nth-of-type(7) {
transition-delay: .35s;
}
#cs-navigation .cs-drop-li:nth-of-type(8) {
transition-delay: .4s;
}
#cs-navigation .cs-drop-li:nth-of-type(9) {
transition-delay: .45s;
}
#cs-navigation .cs-li-link.cs-drop-link {
text-transform: capitalize;
white-space: nowrap;
width: 100%;
font-size: 1rem;
line-height: 1.5em;
text-decoration: none;
padding: 0.75rem;
/* prevents padding from affecting height and width */
box-sizing: border-box;
color: var(--headerColor);
display: block;
transition: color 0.3s, background-color 0.3s;
}
#cs-navigation .cs-li-link.cs-drop-link:hover {
background-color: var(--primary);
color: var(--bodyTextColorWhite);
}
#cs-navigation .cs-li-link.cs-drop-link:before {
display: none;
}
}
/*-- -------------------------- -->
<--- Desktop Navigation -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
body.scroll #cs-navigation {
width: 100%;
max-width: 100%;
border-radius: 0;
top: 0;
height: 4rem;
padding: 0px;
}
body.scroll #cs-navigation .cs-logo img {
height: 35px;
transition: all ease .3s;
}
#cs-navigation {
width: 94%;
max-width: 90rem;
height: 6rem;
/* 12px - 24px */
padding: clamp(0.75rem, 2vw, 1.5rem) 0;
/* prevents padding from affecting height and width */
box-sizing: border-box;
background-color: #fff;
border-radius: 9999px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
/* 12px - 24px */
display: flex;
align-items: center;
position: fixed;
top: 2rem;
left: 50%;
z-index: 10000;
transform: translateX(-50%);
transition: top 0.3s, border-radius 0.3s, width 0.3s, max-width 0.3s;
}
#cs-navigation .cs-container {
width: 100%;
max-width: 90rem;
margin: auto;
padding: 0 1.5rem;
/* prevents padding from affecting height and width */
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
}
#cs-navigation .cs-toggle {
display: none;
}
#cs-navigation .cs-logo {
width: 18.4%;
max-width: 21.875rem;
height: 3rem;
/* margin-right auto pushes everything away from it to the right */
margin: 0 0 0 10px;
padding: 0;
display: flex;
justify-content: flex-start;
align-items: center;
z-index: 100;
}
#cs-navigation .cs-logo img {
width: auto;
height: 100%;
/* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
object-fit: contain;
}
#cs-navigation .cs-contact-group {
display: flex;
justify-content: center;
align-items: center;
gap: 1.5rem;
}
#cs-navigation .cs-phone {
font-size: 1rem;
line-height: 1.5em;
text-decoration: none;
margin: 0;
color: var(--headerColor);
display: none;
justify-content: flex-start;
align-items: center;
gap: 0.5rem;
transition: opacity 0.3s,
color 0.3s;
}
#cs-navigation .cs-phone-icon {
width: 1.5rem;
height: auto;
display: block;
}
#cs-navigation .cs-social {
height: 2rem;
visibility: visible;
opacity: 1;
display: none;
justify-content: center;
align-items: center;
gap: 0.5rem;
transition: opacity 0.3s,
visibility 0.3s,
height 0.3s;
}
#cs-navigation .cs-social-link {
text-decoration: none;
width: 2rem;
height: 2rem;
background-color: #f7f7f7;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s;
}
#cs-navigation .cs-social-link:hover {
background-color: var(--primary);
}
#cs-navigation .cs-social-link:hover .cs-social-icon {
filter: grayscale(1) brightness(10000%);
opacity: 1;
}
#cs-navigation .cs-social-icon {
width: 0.75rem;
height: auto;
opacity: 0.6;
display: block;
transition: opacity .3s;
}
#cs-navigation .cs-ul-wrapper {
height: 100%;
display: flex;
align-items: center;
/* absolutely positioned to be dead center */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#cs-navigation .cs-ul {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: flex-start;
align-items: center;
/* 20px - 36px */
gap: clamp(1.25rem, 2.6vw, 2.25rem);
}
#cs-navigation .cs-li {
list-style: none;
height: 100%;
padding: 0;
display: flex;
align-items: center;
/* prevent flexbox from squishing it */
flex: none;
}
#cs-navigation .cs-li-link {
font-size: 1.2rem;
line-height: 1.5em;
text-decoration: none;
margin: 0;
color: var(--headerColor);
display: block;
position: relative;
transition: color .3s;
}
#cs-navigation .cs-li-link:hover {
color: var(--primary);
}
#cs-navigation .cs-li-link.cs-active {
color: var(--primaryActive);
}
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
#cs-navigation .cs-phone {
display: flex;
}
}
</style>
<header id="cs-navigation">
<div class="cs-container">
<!--Nav Logo-->
<!--Logo is turned white in the css with a filter on dark mode-->
<a href="/" class="cs-logo" aria-label="back to home">
<img src="/assets/svgs/logo.svg" alt="logo" width="210" height="29" aria-hidden="true" decoding="async">
</a>
<!--Navigation List-->
<nav class="cs-nav" role="navigation">
<!--Mobile Nav Toggle-->
<button class="cs-toggle" aria-label="mobile menu toggle">
<div class="cs-box" aria-hidden="true">
<span class="cs-line cs-line1" aria-hidden="true"></span>
<span class="cs-line cs-line2" aria-hidden="true"></span>
<span class="cs-line cs-line3" aria-hidden="true"></span>
</div>
</button>
<div class="cs-ul-wrapper">
<ul id="cs-expanded" class="cs-ul">
<li class="cs-li ">
<a href="/" class="cs-li-link " >
Home
</a>
</li>
<li class="cs-li ">
<a href="/about/" class="cs-li-link " >
About
</a>
</li>
<li class="cs-li ">
<a href="/process/" class="cs-li-link " >
Process
</a>
</li>
<li class="cs-li ">
<a href="/detroit-website-design/" class="cs-li-link " >
Our Work
</a>
</li>
<li class="cs-li ">
<a href="/pricing/" class="cs-li-link " >
Pricing
</a>
</li>
<li class="cs-li cs-hide-on-desktop">
<a href="/contact/" class="cs-li-link " >
Contact
</a>
</li>
</ul>
</div>
</nav>
<div class="cs-contact-group">
<a href="tel:313.801.7388" class="cs-phone">
<img class="cs-phone-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/phone-1a.svg" alt="logo" width="24" height="24" aria-hidden="true" decoding="async">
(313) 801-7388
</a>
<a href="/#pricing" class="cs-button-solid">Get Started</a>
<!--<div class="cs-social">
<a href="" class="cs-social-link">
<img class="cs-social-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/facebook-1a.svg" alt="logo" width="12" height="12" aria-hidden="true" decoding="async">
</a>
<a href="" class="cs-social-link">
<img class="cs-social-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/twitter-1a.svg" alt="logo" width="12" height="12" aria-hidden="true" decoding="async">
</a>
<a href="" class="cs-social-link">
<img class="cs-social-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/instagram1a.svg" alt="logo" width="12" height="12" aria-hidden="true" decoding="async">
</a>
<a href="" class="cs-social-link">
<img class="cs-social-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/youtube1a.svg" alt="logo" width="12" height="12" aria-hidden="true" decoding="async">
</a>
</div>-->
</div>
<!--Dark Mode toggle, uncomment button code if you want to enable a dark mode toggle-->
<!-- <button id="dark-mode-toggle" aria-label="dark mode toggle">
<svg class="cs-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480" style="enable-background:new 0 0 480 480" xml:space="preserve"><path d="M459.782 347.328c-4.288-5.28-11.488-7.232-17.824-4.96-17.76 6.368-37.024 9.632-57.312 9.632-97.056 0-176-78.976-176-176 0-58.4 28.832-112.768 77.12-145.472 5.472-3.712 8.096-10.4 6.624-16.832S285.638 2.4 279.078 1.44C271.59.352 264.134 0 256.646 0c-132.352 0-240 107.648-240 240s107.648 240 240 240c84 0 160.416-42.688 204.352-114.176 3.552-5.792 3.04-13.184-1.216-18.496z"/></svg>
<img class="cs-sun" aria-hidden="true" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons%2Fsun.svg" decoding="async" alt="moon" width="15" height="15">
</button> -->
</div>
</header>
<script>
// add classes for mobile navigation toggling
var CSbody = document.querySelector("body");
const CSnavbarMenu = document.querySelector("#cs-navigation");
const CShamburgerMenu = document.querySelector("#cs-navigation .cs-toggle");
CShamburgerMenu.addEventListener('click', function() {
CShamburgerMenu.classList.toggle("cs-active");
CSnavbarMenu.classList.toggle("cs-active");
CSbody.classList.toggle("cs-open");
// run the function to check the aria-expanded value
ariaExpanded();
});
// checks the value of aria expanded on the cs-ul and changes it accordingly whether it is expanded or not
function ariaExpanded() {
const csUL = document.querySelector('#cs-expanded');
const csExpanded = csUL.getAttribute('aria-expanded');
if (csExpanded === 'false') {
csUL.setAttribute('aria-expanded', 'true');
} else {
csUL.setAttribute('aria-expanded', 'false');
}
}
// This script adds a class to the body after scrolling 100px
// and we used these body.scroll styles to create some on scroll
// animations with the navbar
document.addEventListener('scroll', (e) => {
const scroll = document.documentElement.scrollTop;
if(scroll >= 30){
document.querySelector('body').classList.add('scroll')
} else {
document.querySelector('body').classList.remove('scroll')
}
});
// mobile nav toggle code
const dropDowns = Array.from(document.querySelectorAll('#cs-navigation .cs-dropdown'));
for (const item of dropDowns) {
const onClick = () => {
item.classList.toggle('cs-active')
}
item.addEventListener('click', onClick)
}
</script>
<main id="main">
<BR><BR><BR>
<DIV style="background-color: brown; height: 500px; position: relative;">
<svg fill="none" height="179" viewBox="0 0 1920 179" width="1920" xmlns="http://www.w3.org/2000/svg" style="position: absolute; bottom:0px;"><path d="M1920 179V91.3463C1835.33 91.3463 1715.47 76.615 1549.2 32.9521C1299.48 -32.3214 1132.77 12.1006 947.32 61.5167C810.762 97.9044 664.042 137 466.533 137C331.607 137 256.468 123.447 188.082 111.113C130.974 100.812 78.5746 91.3609 0 91.3609V179H1920Z" fill="white" clip-rule="evenodd" fill-rule="evenodd"></path></svg>
</DIV>
<DIV style="background-color: brown; height: 500px; position: relative;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100"><path d="M0 0v47.6l5-2c1 0 11 3 12 0 2 3 6-3 6 0 0-4 12 3 12 0 0 3 15-1 17 0 2-2 5-1 6 0 0-2 6 2 6 0s2 4 4 0c5 2 12-3 16 0 2-2 4-3 4 0 0 2 6-1 6 0 1 4 15-2 17 0h7c0 1 3-3 6 0h17c2 2 3 1 6 0h6c1-2 21-1 24 0 2 1 4 2 6 0 0-1 22 4 24 0 0 0 5-3 5 0 2-2 10 2 12 0 2 2 6 1 6 0 2 3 4-2 6 0 1 0 25-2 25 1l10-1c3 1 6 6 7 0 1 5 4-2 6 0 2-2 4 3 5 0h12c6 1 36 2 36 0 0 2 3 0 6 0h6c5-2 7 4 11 0 2 0 15 2 17 0h13c3-4 5 1 7 0h29c0-3 6 0 6 0h5c0 2 16-1 18 0 1 4 9-1 12 0s6-2 6 0c8-2 3 4 13 0h10c3 4 19 1 19 0 2 0 21 1 23-1 1 4 3-1 6 1 1 2 11-1 12-1 3 3 9 0 12 1 3-4 6 1 6 0h6c0-3 5 1 6-1 0 3 2 1 4 1 3 4 10-1 13 0 3-2 6-1 6 0 2 2 2 0 6 0 1-2 6 2 6 0 2 0 4 5 6 0h18c2 3 4 1 6 0l6-1c3 2 12 3 17 1 14 3 18 1 24 0 2-1 3 3 5 0 6 2 10-1 16 0 1 3 6 0 9 0 0-2 3 2 5 0 6-6 8 7 13 0 0-2 5 2 5 0 3 3 10 0 10 0 1 2 5-2 8 0 3-1 8 3 12 0h6c2 1 10 4 12 0h6c1-1 5 2 6 0 1 2 4-1 6 0 0-2 5 3 6-1 2 1 6 5 5 1 1 1 3-2 6 0 2-1 5 3 6 0 0 1 6 2 6 0 2 3 4-4 6 0 0-2 3 2 6 0 3 0 6 3 6 0 5 3 8-1 13 0 3-4 6 1 6 0h5c0-1 9 2 12 0 1-1 9 3 11 0h6c2 2 4 4 7 0 3 2 5-4 5-1 10 4 15-2 18 2 0-1 6 2 6-2 0 0 6-2 6 1 1 6 12 2 12 0 1 3 4-3 7 2 2-2 5 2 5 0 1 5 4-5 6 0 2-1 4 2 6 0 1 3 1 0 5 0V0H0Z" fill="#fff"></path></svg>
<svg style="position: absolute; bottom:0px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100"><path d="M0 0v47.6l5-2c1 0 11 3 12 0 2 3 6-3 6 0 0-4 12 3 12 0 0 3 15-1 17 0 2-2 5-1 6 0 0-2 6 2 6 0s2 4 4 0c5 2 12-3 16 0 2-2 4-3 4 0 0 2 6-1 6 0 1 4 15-2 17 0h7c0 1 3-3 6 0h17c2 2 3 1 6 0h6c1-2 21-1 24 0 2 1 4 2 6 0 0-1 22 4 24 0 0 0 5-3 5 0 2-2 10 2 12 0 2 2 6 1 6 0 2 3 4-2 6 0 1 0 25-2 25 1l10-1c3 1 6 6 7 0 1 5 4-2 6 0 2-2 4 3 5 0h12c6 1 36 2 36 0 0 2 3 0 6 0h6c5-2 7 4 11 0 2 0 15 2 17 0h13c3-4 5 1 7 0h29c0-3 6 0 6 0h5c0 2 16-1 18 0 1 4 9-1 12 0s6-2 6 0c8-2 3 4 13 0h10c3 4 19 1 19 0 2 0 21 1 23-1 1 4 3-1 6 1 1 2 11-1 12-1 3 3 9 0 12 1 3-4 6 1 6 0h6c0-3 5 1 6-1 0 3 2 1 4 1 3 4 10-1 13 0 3-2 6-1 6 0 2 2 2 0 6 0 1-2 6 2 6 0 2 0 4 5 6 0h18c2 3 4 1 6 0l6-1c3 2 12 3 17 1 14 3 18 1 24 0 2-1 3 3 5 0 6 2 10-1 16 0 1 3 6 0 9 0 0-2 3 2 5 0 6-6 8 7 13 0 0-2 5 2 5 0 3 3 10 0 10 0 1 2 5-2 8 0 3-1 8 3 12 0h6c2 1 10 4 12 0h6c1-1 5 2 6 0 1 2 4-1 6 0 0-2 5 3 6-1 2 1 6 5 5 1 1 1 3-2 6 0 2-1 5 3 6 0 0 1 6 2 6 0 2 3 4-4 6 0 0-2 3 2 6 0 3 0 6 3 6 0 5 3 8-1 13 0 3-4 6 1 6 0h5c0-1 9 2 12 0 1-1 9 3 11 0h6c2 2 4 4 7 0 3 2 5-4 5-1 10 4 15-2 18 2 0-1 6 2 6-2 0 0 6-2 6 1 1 6 12 2 12 0 1 3 4-3 7 2 2-2 5 2 5 0 1 5 4-5 6 0 2-1 4 2 6 0 1 3 1 0 5 0V0H0Z" fill="brown"></path></svg>
</DIV>
<BR><BR><BR>
</main>
<!-- ============================================ -->
<!-- Footer -->
<!-- ============================================ -->
<STYLE>
.gandalfpill {transition: all ease .2s;margin-left:5px;vertical-align:middle; display: inline-block; background-color: white; padding:0 8px; border-radius: 999px;}
.gandalfpill:hover img {filter: grayscale(1) brightness(1000%);transition: all ease .8s;}
.gandalfpill:hover {border:1px solid white; background-color: black; transform: translateY(-5px); transition: all ease .2s;}
.back2top {font-size:2px}
</STYLE>
<footer id="footer">
<div class="container">
<div class="left-section">
<a class="logo" href="/"><img style="filter: grayscale(1) brightness(1000%);" loading="lazy" decoding="async" src="/assets/svgs/logo.svg" alt="logo" width="264" height="78"></a>
<h2 class="cs-title" style="color: white; font-weight: 100; padding-left: 20px;">
Ready to grow online?
</h2>
<DIV style="padding-left: 20px; margin-top: 30px;">
<a href="/pricing" class="cs-button-solid" >Start My Website</a>
</DIV>
</div>
<div class="right-section">
<div class="lists">
<ul id="cs-expanded" class="cs-ul" style="margin-bottom: 100px;">
<li class="cs-li ">
<a href="/" class="cs-li-link " >
Home
</a>
</li>
<li class="cs-li ">
<a href="/about/" class="cs-li-link " >
About
</a>
</li>
<li class="cs-li ">
<a href="/process/" class="cs-li-link " >
Process
</a>
</li>
<li class="cs-li ">
<a href="/detroit-website-design/" class="cs-li-link " >
Our Work
</a>
</li>
<li class="cs-li ">
<a href="/pricing/" class="cs-li-link " >
Pricing
</a>
</li>
<li class="cs-li cs-hide-on-desktop">
<a href="/contact/" class="cs-li-link " >
Contact
</a>
</li>
</ul>
<ul>
<li>
<h2>Services</h2>
</li>
<li>Website Design</li>
<li>Website Hosting</li>
<li>Domain Name Setup</li>
<li>Google Business Profile</li>
<li>Google Business Reviews</li>
<li>Google Analytics</li>
<li>SEO</li>
</ul>
<ul>
<li>
<h2>Get in touch</h2>
</li>
<li>
</li>
<li>
Call or Text
<BR>
<a href="tel:313.801.7388">
(313) 801-7388
</a>
</li>
<li>
Email
<BR>
<a href="mailto:info@designgandalf.com">info@designgandalf.com</a>
</li>
</ul>
</div>
</div>
</div>
<div class="credit">
<div class="container">
<span class="copyright">
© 2025 Gandalf</span>
<a class="back2top" href="#top">Back to top</a>
</div>
<span>Designed & Hand Coded by</span>
<a class="gandalfpill" href="/"><img style="vertical-align:middle; " loading="lazy" decoding="async" src="/assets/svgs/logo.svg" alt="logo" height="12"></a>
</div>
</footer>
<script src="/assets/aos/aos.js"></script>
<script>
AOS.init({
easing: 'ease-in-out-sine',
});
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Design Gandalf - Detroit Web Design",
"url": "https://designgandalf.com/",
"address": {
"@type": "PostalAddress",
"addressLocality": "Detroit",
"addressRegion": "MI",
"addressCountry": "US"
}
}
</script>
</body>
</html>