Files
preview_sites/proposals/mobile-galaxy-gaming/mockup/pages/Service/Services.html
T

355 lines
15 KiB
HTML
Executable File

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title -->
<title>Services | Mobile Galaxy Gaming — Winfield, IL</title>
<!-- SEO -->
<meta name="description" content="Birthday parties, school events, corporate outings, console gaming, and VR — see everything Mobile Galaxy Gaming's game truck brings to your event.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://mobile-galaxy-gaming-preview.aimloperations.com/pages/Service/Services.html">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="../../assets/images/favicon.ico">
<!-- Font-Awesome (CSS) -->
<link rel="stylesheet" href="../../assets/vendors/font-awesome/css/all.min.css">
<!-- Custom Stylesheets -->
<link rel="stylesheet" href="../../assets/css/main.css">
<link rel="stylesheet" href="../../assets/css/responsive.css">
<!-- Preview overrides -->
<style>
.preview-concept-banner { position: fixed; inset: 0 0 auto 0; z-index: 10000; padding: .7rem 1rem; background: #071426; color: #fff; text-align: center; font: 600 14px/1.4 Arial, sans-serif; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.preview-concept-banner a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.preview-concept-banner strong { color: #35e0ff; }
body { padding-top: 45px; }
:root {
--main-color: #1f8fff;
--secondary-color: #060c18;
--accent-color: #35e0ff;
}
.logo-content .logo-name { display: block; font-size: 2rem; font-weight: 700; line-height: 1.2; color: inherit; }
.heading .sub span { color: var(--accent-color); }
.page-title .title h1 { color: var(--white); font-size: 5rem; font-weight: 500; text-transform: uppercase; margin: 0; }
.header .icon-container button.icon { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
</style>
</head>
<body>
<!-- ==================== Preview Concept Banner (Start) ==================== -->
<div class="preview-concept-banner" role="note"><strong>UX Concept Preview</strong> — Mobile Galaxy Gaming. <a href="../../ux-gallery.html">View proposed screens</a> · <a href="../../pricing.html">View feature pricing</a></div>
<!-- ==================== Preview Concept Banner (End) ==================== -->
<!-- ==================== Scroll-Top Area (Start) ==================== -->
<a href="#" class="scroll-top">
<i class="fa-solid fa-arrow-up-long"></i>
</a>
<!-- ==================== Scroll-Top Area (End) ==================== -->
<!-- ==================== Header Area (Start) ==================== -->
<header class="header">
<!-- ===== Header-1 Area (Start) ===== -->
<div class="header-1">
<!-- == Contacts == -->
<ul class="header-contacts">
<li><i class="fa-solid fa-location-dot"></i><span>1N160 Cypress Ln, Winfield, IL 60190</span></li>
<li><i class="fa-solid fa-phone"></i><span><a href="tel:+17738174239" style="color:inherit;text-decoration:none">(773) 817-4239</a></span></li>
</ul>
<!-- == Social == -->
<ul class="social-contacts">
<li><a href="https://www.yelp.com/biz/mobile-galaxy-gaming-chicago-2" class="fa-brands fa-yelp" aria-label="Mobile Galaxy Gaming reviews on Yelp" rel="noopener noreferrer" target="_blank"></a></li>
</ul>
</div>
<!-- ===== Header-1 Area (End) ===== -->
<!-- ===== Header-2 Area (Start) ===== -->
<div class="header-2">
<!-- == Logo == -->
<a class="logo" href="../../index.html">
<img src="../../assets/images/Logo/Logo.png" alt="Mobile Galaxy Gaming logo">
<div class="logo-content">
<span class="logo-name">Mobile Galaxy Gaming</span>
<p>Mobile Game Truck Rentals</p>
</div>
</a>
<div class="container">
<!-- == Navbar == -->
<nav class="navbar">
<a class="nav-btn" href="../../index.html">home</a>
<a class="nav-btn" href="../../pages/About/About.html">about</a>
<a class="nav-btn" href="../../pages/Service/Services.html">services</a>
<a class="nav-btn" href="../../pages/Contact/Contact.html">contact</a>
</nav>
<!-- == Icon Container == -->
<div class="icon-container">
<button type="button" id="search-btn" class="icon fa-solid fa-magnifying-glass" aria-label="Open search"></button>
<button type="button" id="menu-btn" class="icon fa-solid fa-bars-staggered" aria-label="Open menu"></button>
<a href="../../pages/Pages/Get-Quote.html" class="btn">book now</a>
</div>
<!-- == Search Container == -->
<form class="search-container">
<input type="search" id="search-bar" placeholder="search here" required> <!-- Search Input -->
<button type="submit"><i class="fas fa-search"></i></button> <!-- Submit Button -->
</form>
</div>
</div>
<!-- ===== Header-2 Area (End) ===== -->
<!-- ===== Mobile Menu Area (Start) ===== -->
<div class="mobile-menu">
<nav class="mobile-navbar">
<div class="nav-link">
<div class="main-nav-link"> <a class="nav-btn" href="../../index.html">home</a> </div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <a class="nav-btn" href="../../pages/About/About.html">about</a> </div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <a class="nav-btn" href="../../pages/Service/Services.html">services</a> </div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <a class="nav-btn" href="../../pages/Contact/Contact.html">contact</a> </div>
</div>
<div class="nav-link">
<div class="main-nav-link"> <a class="nav-btn" href="../../pages/Pages/Get-Quote.html">book now</a> </div>
</div>
</nav>
</div>
<!-- ===== Mobile Menu Area (End) ===== -->
</header>
<!-- ==================== Header Area (End) ==================== -->
<!-- ==================== Page-Title (Start) ==================== -->
<div class="page-title">
<div class="title">
<h1>Services</h1>
</div>
<div class="link">
<a href="../../index.html">Home</a>
<i class="fa-solid fa-angles-right"></i>
<span class="page">Services</span>
</div>
</div>
<!-- ==================== Page-Title (End) ==================== -->
<!-- ==================== Services Area (Start) ==================== -->
<section class="services">
<!-- Section Heading -->
<div class="heading">
<div class="sub"><i class="fa-solid fa-gamepad"></i><span>What We Offer</span><i class="fa-solid fa-gamepad"></i></div>
<h2>Our Services</h2>
</div>
<!-- Services Container -->
<div class="box-container">
<!-- Service 1: Birthday Party Gaming -->
<div class="swiper-slide service-item">
<img src="../../assets/images/Service/Services/Service-1.jpg" alt="Birthday Party Gaming">
<div class="content">
<div class="icon"><i class="fa-solid fa-cake-candles"></i></div>
<a href="../../pages/Service/Service-Single.html"><h3>Birthday Party Gaming</h3></a>
<p>The game truck rolls up to your driveway for an unforgettable birthday celebration.</p>
<a href="../../pages/Service/Service-Single.html" class="btn">Read More</a>
</div>
</div>
<!-- Service 2: School & Youth Events -->
<div class="swiper-slide service-item">
<img src="../../assets/images/Service/Services/Service-2.jpg" alt="School and Youth Events">
<div class="content">
<div class="icon"><i class="fa-solid fa-school"></i></div>
<a href="../../pages/Service/Service-Single.html"><h3>School & Youth Events</h3></a>
<p>A low-hassle reward for students, youth groups, and community programs.</p>
<a href="../../pages/Service/Service-Single.html" class="btn">Read More</a>
</div>
</div>
<!-- Service 3: Corporate & Community Events -->
<div class="swiper-slide service-item">
<img src="../../assets/images/Service/Services/Service-3.jpg" alt="Corporate and Community Events">
<div class="content">
<div class="icon"><i class="fa-solid fa-people-group"></i></div>
<a href="../../pages/Service/Service-Single.html"><h3>Corporate & Community Events</h3></a>
<p>Team outings and neighborhood gatherings that get people playing together.</p>
<a href="../../pages/Service/Service-Single.html" class="btn">Read More</a>
</div>
</div>
<!-- Service 4: Console Gaming -->
<div class="swiper-slide service-item">
<img src="../../assets/images/Service/Services/Service-4.jpg" alt="Console Gaming">
<div class="content">
<div class="icon"><i class="fa-solid fa-gamepad"></i></div>
<a href="../../pages/Service/Service-Single.html"><h3>Console Gaming</h3></a>
<p>PS5, Xbox Series X, and Nintendo Switch with a rotating library of games.</p>
<a href="../../pages/Service/Service-Single.html" class="btn">Read More</a>
</div>
</div>
<!-- Service 5: VR Experience -->
<div class="swiper-slide service-item">
<img src="../../assets/images/Service/Services/Service-5.jpg" alt="VR Experience">
<div class="content">
<div class="icon"><i class="fa-solid fa-vr-cardboard"></i></div>
<a href="../../pages/Service/Service-Single.html"><h3>VR Experience</h3></a>
<p>Add virtual-reality stations for an experience guests won't stop talking about.</p>
<a href="../../pages/Service/Service-Single.html" class="btn">Read More</a>
</div>
</div>
<!-- Service 6: Multi-Screen Tournaments -->
<div class="swiper-slide service-item">
<img src="../../assets/images/Service/Services/Service-6.jpg" alt="Multi-Screen Tournaments">
<div class="content">
<div class="icon"><i class="fa-solid fa-trophy"></i></div>
<a href="../../pages/Service/Service-Single.html"><h3>Multi-Screen Tournaments</h3></a>
<p>Run bracket-style tournaments across multiple HD TVs for bigger groups.</p>
<a href="../../pages/Service/Service-Single.html" class="btn">Read More</a>
</div>
</div>
</div>
</section>
<!-- ==================== Services Area (End) ==================== -->
<!-- ==================== Footer Area (Start) ==================== -->
<footer class="footer">
<div class="box-container">
<!-- Company Information & Social Media Links -->
<div class="footer-item">
<!-- Company Logo -->
<a class="logo" href="../../index.html">
<img src="../../assets/images/Logo/Logo.png" alt="Mobile Galaxy Gaming logo">
<div class="logo-content">
<span class="logo-name">Mobile Galaxy Gaming</span>
<p>Mobile Game Truck Rentals</p>
</div>
</a>
<!-- Description -->
<p>Bringing PS5, Xbox, Switch, and VR gaming to birthdays, school events, and corporate parties across Winfield and the Chicago suburbs.</p>
<!-- Contact Information -->
<div class="info connect">
<p><i class="fas fa-phone"></i><span><a href="tel:+17738174239" style="color:inherit;text-decoration:none">(773) 817-4239</a></span></p>
<p><i class="fas fa-map-marker-alt"></i><span>1N160 Cypress Ln, Winfield, IL 60190</span></p>
</div>
<!-- Social Media Links -->
<div class="social">
<a href="https://www.yelp.com/biz/mobile-galaxy-gaming-chicago-2" rel="noopener noreferrer" target="_blank" aria-label="Mobile Galaxy Gaming on Yelp"><i class="fa-brands fa-yelp"></i></a>
</div>
</div>
<!-- Services Offered -->
<div class="footer-item">
<h2>Our Services</h2>
<div class="info links">
<p><i class="fa-solid fa-gamepad"></i><a href="../../pages/Service/Service-Single.html">Birthday Party Gaming</a></p>
<p><i class="fa-solid fa-gamepad"></i><a href="../../pages/Service/Service-Single.html">School & Youth Events</a></p>
<p><i class="fa-solid fa-gamepad"></i><a href="../../pages/Service/Service-Single.html">Corporate & Community Events</a></p>
<p><i class="fa-solid fa-gamepad"></i><a href="../../pages/Service/Service-Single.html">Console Gaming</a></p>
<p><i class="fa-solid fa-gamepad"></i><a href="../../pages/Service/Service-Single.html">VR Experience</a></p>
<p><i class="fa-solid fa-gamepad"></i><a href="../../pages/Service/Service-Single.html">Multi-Screen Tournaments</a></p>
</div>
</div>
<!-- Quick Links -->
<div class="footer-item">
<h2>Quick Links</h2>
<div class="info links">
<p><i class="fa-solid fa-gamepad"></i><a href="../../pages/About/About.html">About Us</a></p>
<p><i class="fa-solid fa-gamepad"></i><a href="../../pages/Service/Services.html">Services</a></p>
<p><i class="fa-solid fa-gamepad"></i><a href="../../pages/Contact/Contact.html">Contact Us</a></p>
<p><i class="fa-solid fa-gamepad"></i><a href="../../pages/Pages/Get-Quote.html">Book Now</a></p>
</div>
</div>
<!-- Newsletter Subscription -->
<div class="footer-item">
<h2>Newsletter</h2>
<p>Stay informed about booking openings, party tips, and special offers.</p>
<form class="dark-form" method="post" id="newsletter-form-2">
<div class="input-field">
<label for="news-email-2" class="fas fa-envelope"></label>
<input type="email" id="news-email-2" name="email" class="box" placeholder="Your email address" required>
</div>
<button type="submit" class="btn" name="submit" id="submit-2">Subscribe</button>
<span class="alert" id="msg-2"></span>
</form>
</div>
</div>
<!-- Copyright -->
<div class="content">
<p class="aiml-site-credit">Made by <a href="https://aimloperations.com" rel="noopener noreferrer" target="_blank">AI ML Operations, LLC</a></p>
</div>
</footer>
<!-- ==================== Footer Area (End) ==================== -->
<!-- Jquery -->
<script src="../../assets/vendors/jquery/jquery.min.js"></script>
<!-- Custom Script Files -->
<script src="../../assets/js/script.js"></script> <!-- Custom JavaScript file with additional website functionality. -->
<script src="../../assets/js/nav-link-toggler.js"></script> <!-- Manages navigation link toggling (e.g., hamburger menu) for mobile devices -->
<script src="../../assets/js/newsletter.js"></script>
</body>
</html>