Back to Footer
4 Column
<!-- This footer supports dark mode via CSS variables -->
<footer id="ui-footer-01">
<div class="ui-footer-01-container ui-container">
<div class="ui-footer-01-cols">
<div class="ui-footer-01-col ui-footer-01-brand">
<svg style="margin-bottom:1.5rem;" width="169" height="40" viewBox="0 0 169 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0148 2.5V40H0V2.5H10.0148Z" fill="#283841"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.0222 2.5H36.3037C43.2175 2.5 48.8222 8.09644 48.8222 15C48.8222 21.9036 43.2175 27.5 36.3037 27.5H25.037V40H15.0222V2.5ZM25.037 17.5H36.3037C37.6865 17.5 38.8074 16.3807 38.8074 15C38.8074 13.6193 37.6865 12.5 36.3037 12.5H25.037V17.5Z" fill="#283841"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M86.3778 2.5V21.875C86.3778 26.3623 90.0208 30 94.5148 30C99.0088 30 102.652 26.3623 102.652 21.875V2.5H112.667V21.875C112.667 31.8852 104.54 40 94.5148 40C84.4898 40 76.363 31.8852 76.363 21.875V2.5H86.3778Z" fill="#283841"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M52.5778 20C52.5778 10.335 60.4244 2.5 70.1037 2.5H72.6074V12.5H70.1037C65.9554 12.5 62.5926 15.8579 62.5926 20V21.25C62.5926 31.6053 54.1855 40 43.8148 40H42.563V30H43.8148C48.6545 30 52.5778 26.0825 52.5778 21.25V20Z" fill="#283841"></path>
<path d="M169 3.75C169 5.82107 167.319 7.5 165.244 7.5C163.17 7.5 161.489 5.82107 161.489 3.75C161.489 1.67893 163.17 0 165.244 0C167.319 0 169 1.67893 169 3.75Z" fill="#283841"></path>
<path d="M123.42 40L128.199 20.0181L131.752 32.0393C133.87 39.2091 144.041 39.2091 146.16 32.0393L149.712 20.0181L154.491 40H164.787L157.273 8.57949C155.486 1.10744 144.941 0.830781 142.763 8.19891L138.956 21.0833L135.148 8.19892C132.971 0.830824 122.425 1.1074 120.638 8.57948L113.124 40H123.42Z" fill="#283841"></path>
</svg>
<div class="ui-footer-01-brand-text">
<div>Superior Service.<br>Uncompromising Quality.</div>
<div class="ui-footer-01-address">
<span class="ui-footer-01-icon">📍</span> 27222 Groesbeck Hwy, Warren, MI 48088
</div>
<div class="ui-footer-01-phone">
<span class="ui-footer-01-icon">📞</span> (586) 335-2990
</div>
</div>
<div class="ui-footer-01-socials">
<a href="#" aria-label="Google"><i class="fa-brands fa-google"></i></a>
<a href="#" aria-label="Facebook"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" aria-label="YouTube"><i class="fa-brands fa-youtube"></i></a>
<a href="#" aria-label="Instagram"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
<div class="ui-footer-01-col">
<h4>Services</h4>
<ul>
<li><a href="#">Roof Installation</a></li>
<li><a href="#">Roof Repair</a></li>
<li><a href="#">Siding Installation</a></li>
<li><a href="#">Vinyl Siding Installation</a></li>
<li><a href="#">Seamless Gutters</a></li>
<li><a href="#">Commercial Roofing</a></li>
</ul>
</div>
<div class="ui-footer-01-col">
<h4>About</h4>
<ul>
<li><a href="#">Our Process</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Community</a></li>
</ul>
</div>
<div class="ui-footer-01-col">
<h4>Company</h4>
<ul>
<li><a href="#">Our Work</a></li>
<li><a href="#">Service Area</a></li>
<li><a href="#">Financing</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Free Estimate</a></li>
</ul>
</div>
</div>
<div class="ui-footer-01-bottom">
<div class="ui-footer-01-copyright">
© 2025 L&S Home Improvements. All rights reserved.
</div>
</div>
</div>
</footer>#ui-footer-01 {
background: var(--ui-color-light, #f3f4f6);
color: var(--ui-color-dark, #111827);
padding: 3rem 0 1.5rem 0;
font-size: 1rem;
}
.ui-footer-01-container {
max-width: var(--ui-max-width, 1200px);
margin: 0 auto;
padding: 0 1.5rem;
}
.ui-footer-01-cols {
display: flex;
gap: 2.5rem;
flex-wrap: wrap;
justify-content: space-between;
}
.ui-footer-01-col {
flex: 1 1 180px;
min-width: 180px;
margin-bottom: 2rem;
}
.ui-footer-01-brand {
flex: 1.5 1 260px;
min-width: 220px;
}
.ui-footer-01-logo {
max-width: 140px;
margin-bottom: 1rem;
}
.ui-footer-01-brand-text {
margin-bottom: 1.2rem;
font-size: 1.05rem;
}
.ui-footer-01-address,
.ui-footer-01-phone {
margin: 0.3rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.ui-footer-01-icon {
font-size: 1.1em;
}
.ui-footer-01-socials {
margin-top: 1.2rem;
display: flex;
gap: 0.7rem;
}
.ui-footer-01-socials a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.2rem;
height: 2.2rem;
background: #fff;
border-radius: 50%;
color: var(--ui-color-dark, #111827);
font-size: 1.2rem;
box-shadow: 0 1px 4px rgba(0,0,0,0.07);
transition: background 0.2s, color 0.2s;
}
.ui-footer-01-socials a:hover {
background: var(--ui-color-primary, #1d4ed8);
color: #fff;
}
.ui-footer-01-col h4 {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--ui-color-dark, #111827);
}
.ui-footer-01-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.ui-footer-01-col ul li {
margin-bottom: 0.6rem;
}
.ui-footer-01-col ul li a {
color: var(--ui-color-dark, #111827);
text-decoration: none;
transition: color 0.2s;
}
.ui-footer-01-col ul li a:hover {
color: var(--ui-color-primary, #1d4ed8);
}
.ui-footer-01-bottom {
border-top: 1px solid #e5e7eb;
margin-top: 1.5rem;
padding-top: 1.2rem;
text-align: center;
font-size: 0.98rem;
color: #666;
}
@media (max-width: 900px) {
.ui-footer-01-cols {
flex-direction: column;
gap: 1.5rem;
}
.ui-footer-01-col, .ui-footer-01-brand {
min-width: 0;
margin-bottom: 1.5rem;
}
}
/* uiplugins-root.css */
/* Updated: 2025-05-26 */
/* ------------- */
/* CSS RESET */
/* ------------- */
/* Box sizing */
*, *::before, *::after {
box-sizing: border-box;
}
/* Remove default margin */
* {
margin: 0;
padding: 0;
}
/* Set up the body */
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
font-family: var(--ui-font-family, system-ui, sans-serif);
background-color: #f9fafb;
color: #111827;
}
/* Remove list styles on ul, ol elements with a class */
ul[class], ol[class] {
list-style: none;
padding: 0;
}
/* Reset anchor */
a {
text-decoration: none;
color: inherit;
}
/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}
/* Improve media defaults */
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
height: auto;
}
/* Remove built-in form typography styles */
input, button, textarea, select {
font: inherit;
}
/* Avoid text overflow */
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/* Create a root stacking context */
#root, #__next {
isolation: isolate;
}
/* ------------- */
/* DESIGN TOKENS */
/* ------------- */
:root {
--ui-font-family: 'Inter', sans-serif;
/* Colors */
--ui-color-primary: #d8621d;
--ui-color-secondary: #9333ea;
--ui-color-dark: #111827;
--ui-color-light: #f3f4f6;
--ui-color-white: #ffffff;
/* Typography */
--ui-font-size-base: 1rem;
--ui-font-size-sm: 0.875rem;
--ui-font-size-md: 1rem;
--ui-font-size-lg: 1.25rem;
--ui-font-size-xl: 1.5rem;
--ui-font-size-2xl: 2rem;
--ui-font-size-3xl: 2.5rem;
--ui-font-size-4xl: 3rem;
--ui-font-size-5xl: 3.5rem;
--ui-font-size-6xl: 4rem;
--ui-font-size-7xl: 4.5rem;
--ui-font-size-8xl: 5rem;
/* Font Weight */
--ui-font-weight-thin: 100;
--ui-font-weight-extralight: 200;
--ui-font-weight-light: 300;
--ui-font-weight-normal: 400;
--ui-font-weight-medium: 500;
--ui-font-weight-semibold: 600;
--ui-font-weight-bold: 700;
--ui-font-weight-extrabold: 800;
--ui-font-weight-black: 900;
/* Spacing */
--ui-spacing-xs: 0.25rem;
--ui-spacing-sm: 0.5rem;
--ui-spacing-md: 1rem;
--ui-spacing-lg: 1.5rem;
--ui-spacing-xl: 2rem;
--ui-spacing-2xl: 3rem;
--ui-spacing-3xl: 4rem;
--ui-spacing-4xl: 5rem;
--ui-spacing-5xl: 6rem;
--ui-spacing-6xl: 7rem;
--ui-spacing-7xl: 8rem;
--ui-spacing-8xl: 9rem;
--ui-spacing-9xl: 10rem;
/* Layout */
--ui-max-width: 1200px;
--ui-max-width-lg: 1400px;
--ui-max-width-xl: 1600px;
--ui-max-width-2xl: 1800px;
--ui-max-width-3xl: 2000px;
--ui-max-width-4xl: 2200px;
--ui-max-width-5xl: 2400px;
--ui-max-width-6xl: 2600px;
--ui-max-width-7xl: 2800px;
--ui-max-width-8xl: 3000px;
--ui-max-width-9xl: 3200px;
/* Radius */
--ui-radius-base: 0.5rem;
--ui-radius-lg: 1rem;
--ui-radius-xl: 2rem;
--ui-radius-2xl: 3rem;
--ui-radius-3xl: 4rem;
--ui-radius-4xl: 5rem;
--ui-radius-5xl: 6rem;
--ui-radius-6xl: 7rem;
/* Line Height and Font Weight */
--ui-line-height-base: 1.5;
--ui-font-weight-normal: 400;
--ui-font-weight-bold: 700;
/* Transitions */
--ui-transition-fast: 150ms ease-in-out;
--ui-transition-medium: 300ms ease-in-out;
--ui-transition-slow: 500ms ease-in-out;
/* Z-index */
--ui-z-dropdown: 1000;
--ui-z-modal: 1050;
--ui-z-tooltip: 1100;
/* Shadows */
--ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--ui-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] {
--ui-color-light: #181f25;
--ui-color-dark: #f3f4f6;
--ui-color-white: #181f25;
--ui-color-primary: #d8621d;
--ui-color-secondary: #9333ea;
--ui-color-bg-dark: #181f25;
--ui-color-bg-darker: #11161a;
--ui-color-text-dark: #f3f4f6;
}
/* ------------- */
/* UTILITIES */
/* ------------- */
.ui-container {
max-width: var(--ui-max-width);
margin-left: auto;
margin-right: auto;
padding-left: var(--ui-spacing-md);
padding-right: var(--ui-spacing-md);
}
/* Spacing utilities */
.ui-mb-1 { margin-bottom: var(--ui-spacing-xs); }
.ui-mb-2 { margin-bottom: var(--ui-spacing-sm); }
.ui-mb-3 { margin-bottom: var(--ui-spacing-md); }
.ui-mb-4 { margin-bottom: var(--ui-spacing-lg); }
.ui-p-1 { padding: var(--ui-spacing-xs); }
.ui-p-2 { padding: var(--ui-spacing-sm); }
.ui-p-3 { padding: var(--ui-spacing-md); }
.ui-p-4 { padding: var(--ui-spacing-lg); }
.ui-rounded { border-radius: var(--ui-radius-base); }
.ui-text-center { text-align: center; }
/* Headings */
.ui-heading-xl {
font-size: var(--ui-font-size-2xl);
font-weight: 700;
}
.ui-heading-lg {
font-size: var(--ui-font-size-xl);
font-weight: 600;
}
.ui-heading-md {
font-size: var(--ui-font-size-lg);
font-weight: 500;
}
/* Layout for test environment */
main {
padding: var(--ui-spacing-xl) 0;
}
section h2 {
font-size: var(--ui-font-size-lg);
font-weight: 600;
margin-bottom: var(--ui-spacing-md);
}
footer.ui-container {
text-align: center;
padding: var(--ui-spacing-xl) 0;
}