<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Go4 Hydrovac | Business Profile</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="profile-page">
<!-- Animated Background -->
<div class="water-bg">
<div class="wave wave-one"></div>
<div class="wave wave-two"></div>
<div class="wave wave-three"></div>
</div>
<!-- Main Profile -->
<main class="profile-card">
<!-- LEFT SIDE -->
<section class="profile-left">
<div class="brand-top">
<span class="brand-line"></span>
HYDRO EXCAVATION
</div>
<div class="logo-box">
<img
src="https://i0.wp.com/go4hydrovac.com/wp-content/uploads/2024/04/go4-logo.webp?w=446&ssl=1"
alt="Go4 Hydrovac Logo"
>
</div>
<h1>
Go4
<strong>Hydrovac</strong>
</h1>
<p class="business-type">
Plumbing Service
</p>
<div class="location">
<span>●</span>
Pittsburgh, Pennsylvania
</div>
<div class="profile-actions">
<a href="tel:+17247441464" class="primary-btn">
<span>☎</span>
Call Now
</a>
<a
href="https://go4hydrovac.com/"
target="_blank"
class="secondary-btn"
>
Visit Website
</a>
</div>
<div class="social-row">
<a href="mailto:roger@go4hydrovac.com">
✉ Email
</a>
<a
href="https://www.facebook.com/Go4Hydrovac"
target="_blank"
>
f Facebook
</a>
</div>
</section>
<!-- RIGHT SIDE -->
<section class="profile-right">
<div class="top-status">
<span class="status-dot"></span>
<span id="businessStatus">
Checking availability...
</span>
<span class="status-time">
MON - FRI
</span>
</div>
<!-- INTRO -->
<div class="intro">
<span class="section-number">
01
</span>
<div>
<span class="mini-title">
WHO WE ARE
</span>
<h2>
Excavation Without
<span>the Guesswork.</span>
</h2>
<p>
Go4 Hydrovac is a locally owned and operated
hydro excavation company serving Pittsburgh
and surrounding Pennsylvania counties.
</p>
</div>
</div>
<!-- STATS -->
<div class="stats">
<div class="stat">
<strong>24/7</strong>
<span>
Emergency<br>
Response
</span>
</div>
<div class="stat">
<strong>4</strong>
<span>
PA Counties<br>
Served
</span>
</div>
<div class="stat">
<strong>2</strong>
<span>
Residential &<br>
Commercial
</span>
</div>
</div>
<!-- SERVICES -->
<div class="service-area">
<div class="service-heading">
<div>
<span class="mini-title">
CAPABILITIES
</span>
<h2>
What We Do
</h2>
</div>
<button id="showServices">
VIEW ALL
</button>
</div>
<div class="service-list">
<div class="service-item">
<span class="service-icon">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--orange: #f4a500;
--dark: #071014;
--dark2: #0b181e;
--light: #f4f7f8;
--muted: #84949b;
--border: rgba(255,255,255,.09);
}
body {
font-family:
Arial,
Helvetica,
sans-serif;
background: #05090b;
color: var(--light);
min-height: 100vh;
overflow-x: hidden;
}
/* =====================================
PAGE
===================================== */
.profile-page {
min-height: 100vh;
padding: 50px 25px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(
135deg,
rgba(2,7,9,.98),
rgba(4,13,18,.92)
);
overflow: hidden;
}
/* =====================================
WATER BACKGROUND
===================================== */
.water-bg {
position: absolute;
inset: 0;
overflow: hidden;
opacity: .45;
}
.wave {
position: absolute;
width: 160%;
height: 500px;
left: -30%;
border-radius: 45%;
background:
linear-gradient(
90deg,
transparent,
rgba(0,125,170,.18),
transparent
);
filter: blur(10px);
}
.wave-one {
bottom: -350px;
animation:
waveMove 12s linear infinite;
}
.wave-two {
bottom: -400px;
opacity: .5;
animation:
waveMove 18s linear infinite reverse;
}
.wave-three {
bottom: -450px;
opacity: .35;
animation:
waveMove 25s linear infinite;
}
@keyframes waveMove {
0% {
transform:
translateX(-5%)
rotate(0deg);
}
50% {
transform:
translateX(5%)
rotate(3deg);
}
100% {
transform:
translateX(-5%)
rotate(0deg);
}
}
/* =====================================
PROFILE CARD
===================================== */
.profile-card {
position: relative;
z-index: 2;
width: min(1180px, 100%);
min-height: 700px;
display: grid;
grid-template-columns: 38% 62%;
background: rgba(7,15,19,.96);
border:
1px solid
rgba(255,255,255,.1);
border-radius: 25px;
overflow: hidden;
box-shadow:
0 50px 120px rgba(0,0,0,.7);
}
/* =====================================
LEFT PROFILE
===================================== */
.profile-left {
padding: 50px;
position: relative;
background:
linear-gradient(
160deg,
rgba(244,165,0,.13),
transparent 40%
),
linear-gradient(
180deg,
#111c21,
#071014
);
border-right:
1px solid
var(--border);
display: flex;
flex-direction: column;
justify-content: center;
}
/* =====================================
BRAND
===================================== */
.brand-top {
display: flex;
align-items: center;
gap: 9px;
font-size: 10px;
letter-spacing: 2px;
color: var(--orange);
font-weight: bold;
margin-bottom: 25px;
}
.brand-line {
width: 30px;
height: 2px;
background: var(--orange);
}
/* =====================================
LOGO
===================================== */
.logo-box {
width: 175px;
height: 125px;
background: white;
border-radius: 14px;
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 28px;
box-shadow:
0 20px 45px rgba(0,0,0,.35);
}
.logo-box img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* =====================================
TITLE
===================================== */
.profile-left h1 {
font-size: 58px;
line-height: .9;
letter-spacing: -3px;
text-transform: uppercase;
}
.profile-left h1 strong {
display: block;
color: var(--orange);
}
.business-type {
margin-top: 15px;
color: #b8c2c6;
font-size: 15px;
}
.location {
margin-top: 15px;
color: #89989e;
font-size: 12px;
}
.location span {
color: var(--orange);
margin-right: 5px;
}
/* =====================================
BUTTONS
===================================== */
.profile-actions {
display: flex;
gap: 9px;
margin-top: 28px;
}
.profile-actions a {
text-decoration: none;
padding: 13px 17px;
border-radius: 5px;
font-size: 12px;
font-weight: bold;
transition: .3s;
}
.primary-btn {
background: var(--orange);
color: #111;
}
.secondary-btn {
background: #172329;
color: white;
border: 1px solid #2a393f;
}
.profile-actions a:hover {
transform: translateY(-3px);
}
/* =====================================
SOCIAL
===================================== */
.social-row {
display: flex;
gap: 18px;
margin-top: 22px;
}
.social-row a {
color: #87969c;
text-decoration: none;
font-size: 11px;
transition: .3s;
}
.social-row a:hover {
color: var(--orange);
}
/* =====================================
RIGHT SIDE
===================================== */
.profile-right {
padding: 42px;
background:
radial-gradient(
circle at 90% 10%,
rgba(244,165,0,.09),
transparent 30%
);
}
/* =====================================
STATUS
===================================== */
.top-status {
display: flex;
align-items: center;
gap: 9px;
color: #7f9198;
font-size: 11px;
padding-bottom: 25px;
border-bottom: 1px solid var(--border);
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #42d267;
box-shadow:
0 0 12px #42d267;
}
.status-time {
margin-left: auto;
color: var(--orange);
letter-spacing: 1px;
}
/* =====================================
INTRO
===================================== */
.intro {
display: grid;
grid-template-columns: 45px 1fr;
gap: 15px;
padding: 38px 0;
}
.section-number {
color: var(--orange);
font-size: 11px;
font-weight: bold;
}
.mini-title {
display: block;
color: var(--orange);
font-size: 9px;
letter-spacing: 2px;
font-weight: bold;
margin-bottom: 8px;
}
.intro h2 {
font-size: 38px;
max-width: 600px;
line-height: 1.05;
letter-spacing: -1px;
}
.intro h2 span {
color: var(--orange);
}
.intro p {
margin-top: 15px;
color: var(--muted);
max-width: 650px;
font-size: 13px;
line-height: 1.7;
}
/* =====================================
STATS
===================================== */
.stats {
display: grid;
grid-template-columns:
repeat(3,1fr);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.stat {
padding: 22px;
border-right: 1px solid var(--border);
}
.stat:last-child {
border-right: none;
}
.stat strong {
display: block;
color: var(--orange);
font-size: 28px;
}
.stat span {
display: block;
margin-top: 6px;
color: #75858c;
font-size: 10px;
line-height: 1.5;
}
/* =====================================
SERVICES
===================================== */
.service-area {
padding-top: 32px;
}
.service-heading {
display: flex;
justify-content: space-between;
align-items: end;
margin-bottom: 17px;
}
.service-heading h2 {
font-size: 25px;
}
.service-heading button {
background: transparent;
border: none;
color: var(--orange);
font-size: 10px;
font-weight: bold;
cursor: pointer;
letter-spacing: 1px;
}
.service-list {
display: grid;
grid-template-columns:
repeat(2,1fr);
gap: 9px;
}
.service-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
background: #101c21;
border: 1px solid #1d2a30;
border-radius: 7px;
transition: .3s;
}
.service-item:hover {
border-color: var(--orange);
transform: translateY(-3px);
}
.service-icon {
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
background: #19272d;
border-radius: 6px;
font-size: 16px;
}
.service-item strong {
display: block;
font-size: 11px;
}
.service-item small {
display: block;
color: #6f7f85;
margin-top: 4px;
font-size: 9px;
}
/* =====================================
COVERAGE
===================================== */
.coverage {
margin-top: 28px;
padding: 20px;
background: #0e191e;
border-radius: 9px;
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.coverage h2 {
font-size: 18px;
}
.county-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
max-width: 450px;
}
.county-list span {
padding: 7px 9px;
border-radius: 3px;
background: #18262c;
color: #a5b1b6;
font-size: 9px;
}
/* =====================================
HOURS
===================================== */
.hours-section {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.hours-section h3 {
font-size: 13px;
}
.hours-section > strong {
color: var(--orange);
font-size: 14px;
}
/* =====================================
MODAL
===================================== */
.services-modal {
position: fixed;
inset: 0;
z-index: 100;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(0,0,0,.8);
backdrop-filter: blur(8px);
}
.services-modal.active {
display: flex;
}
.modal-box {
width: min(700px,100%);
max-height: 85vh;
overflow-y: auto;
padding: 40px;
background: #0c171c;
border: 1px solid #28373d;
border-radius: 15px;
position: relative;
}
.modal-box h2 {
font-size: 32px;
margin-bottom: 25px;
}
.close-modal {
position: absolute;
top: 20px;
right: 20px;
width: 35px;
height: 35px;
border: none;
background: #19272d;
color: white;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
}
.modal-services {
display: grid;
grid-template-columns:
repeat(2,1fr);
gap: 8px;
}
.modal-services span {
padding: 13px;
background: #142126;
border-left: 2px solid var(--orange);
color: #aab6bb;
font-size: 11px;
}
/* =====================================
RESPONSIVE
===================================== */
@media(max-width:900px) {
.profile-card {
grid-template-columns: 1fr;
}
.profile-left {
border-right: none;
border-bottom: 1px solid var(--border);
text-align: center;
align-items: center;
}
.profile-right {
padding: 30px;
}
.coverage {
flex-direction: column;
align-items: flex-start;
}
.county-list {
justify-content: flex-start;
}
}
@media(max-width:600px) {
.profile-page {
padding: 10px;
}
.profile-left {
padding: 35px 25px;
}
.profile-left h1 {
font-size: 48px;
}
.profile-right {
padding: 22px;
}
.intro {
grid-template-columns: 1fr;
}
.intro h2 {
font-size: 30px;
}
.stats {
grid-template-columns: 1fr;
}
.stat {
border-right: none;
border-bottom: 1px solid var(--border);
}
.service-list {
grid-template-columns: 1fr;
}
.coverage {
align-items: flex-start;
}
.county-list {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
}
.hours-section {
align-items: flex-start;
gap: 15px;
flex-direction: column;
}
.profile-actions {
flex-direction: column;
width: 100%;
}
.profile-actions a {
width: 100%;
text-align: center;
}
.modal-services {
grid-template-columns: 1fr;
}
.modal-box {
padding: 25px;
}
}
/* ==========================================
GO4 HYDROVAC PROFILE JAVASCRIPT
========================================== */
/* ==========================================
BUSINESS HOURS STATUS
========================================== */
function updateBusinessStatus() {
const status =
document.getElementById("businessStatus");
const now = new Date();
const day = now.getDay();
const hours = now.getHours();
const minutes = now.getMinutes();
const currentMinutes =
hours * 60 + minutes;
const opening =
8 * 60;
const closing =
17 * 60;
/*
Monday = 1
Friday = 5
*/
const weekday =
day >= 1 && day <= 5;
if (
weekday &&
currentMinutes >= opening &&
currentMinutes < closing
) {
status.textContent =
"Open Now";
status.style.color =
"#55d96a";
} else {
status.textContent =
"Currently Closed";
status.style.color =
"#88979d";
}
}
updateBusinessStatus();
setInterval(
updateBusinessStatus,
60000
);
/* ==========================================
SERVICES MODAL
========================================== */
const openButton =
document.getElementById("showServices");
const closeButton =
document.getElementById("closeServices");
const modal =
document.getElementById("servicesModal");
openButton.addEventListener(
"click",
function() {
modal.classList.add("active");
document.body.style.overflow =
"hidden";
}
);
closeButton.addEventListener(
"click",
function() {
modal.classList.remove("active");
document.body.style.overflow =
"";
}
);
/* Click outside modal */
modal.addEventListener(
"click",
function(event) {
if (
event.target === modal
) {
modal.classList.remove(
"active"
);
document.body.style.overflow =
"";
}
}
);
/* ESC key */
document.addEventListener(
"keydown",
function(event) {
if (
event.key === "Escape"
) {
modal.classList.remove(
"active"
);
document.body.style.overflow =
"";
}
}
);
/* ==========================================
MOUSE LIGHT EFFECT
========================================== */
const profile =
document.querySelector(".profile-card");
document.addEventListener(
"mousemove",
function(event) {
const x =
(event.clientX /
window.innerWidth) * 100;
const y =
(event.clientY /
window.innerHeight) * 100;
profile.style.background =
`
radial-gradient(
circle at ${x}% ${y}%,
rgba(244,165,0,.055),
rgba(7,15,19,.97) 35%
)
`;
}
);
/* ==========================================
SERVICE CARD HOVER MOTION
========================================== */
const serviceItems =
document.querySelectorAll(
".service-item"
);
serviceItems.forEach(
function(item) {
item.addEventListener(
"mousemove",
function(event) {
const rect =
item.getBoundingClientRect();
const x =
event.clientX -
rect.left;
const y =
event.clientY -
rect.top;
const rotateX =
((y /
rect.height) -
0.5) * -4;
const rotateY =
((x /
rect.width) -
0.5) * 4;
item.style.transform =
`
perspective(500px)
rotateX(${rotateX}deg)
rotateY(${rotateY}deg)
translateY(-3px)
`;
}
);
item.addEventListener(
"mouseleave",
function() {
item.style.transform =
"";
}
);
}
);
/* ==========================================
RANDOM WATER PARTICLES
========================================== */
const water =
document.querySelector(".water-bg");
for (
let i = 0;
i < 25;
i++
) {
const particle =
document.createElement("span");
particle.style.position =
"absolute";
particle.style.width =
Math.random() * 3 + 1 + "px";
particle.style.height =
particle.style.width;
particle.style.borderRadius =
"50%";
particle.style.background =
"rgba(130,210,240,.35)";
particle.style.left =
Math.random() * 100 + "%";
particle.style.top =
Math.random() * 100 + "%";
particle.style.animation =
`particleMove
${4 + Math.random() * 6}s
ease-in-out
infinite`;
particle.style.animationDelay =
Math.random() * 4 + "s";
water.appendChild(
particle
);
}
/* ==========================================
DYNAMIC PARTICLE ANIMATION
========================================== */
const particleStyle =
document.createElement("style");
particleStyle.innerHTML = `
@keyframes particleMove {
0%,100% {
transform:
translateY(0)
translateX(0);
opacity: .1;
}
50% {
transform:
translateY(-70px)
translateX(25px);
opacity: .8;
}
}
`;
document.head.appendChild(
particleStyle
);
