:root {
--primary-color: #ff4e50;
--secondary-color: #1a1a1a;
--light-color: #f4f4f4;
--dark-color: #333;
--transition: all 0.3s ease;
}
body {
line-height: 1.6;
color: var(--dark-color);
background-color: var(--light-color);
overflow-x: hidden;
}
/* Scroll behavior */
html {
scroll-behavior: smooth;
}
It looks like your CSS and HTML got cut off after the “Scroll behavior” section. Let me continue from where you left off and build out the rest of a solid one-page landing template for “IronForge Gym – Forge Your Fitness”.
You can drop the following snippet right after the existing <style> tag to finish the page (or feel free to copy-paste it into your stylesheet). I’ve kept everything CSS-only so you don’t need to add JS (unless you want extras later).
/* Utility classes */
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 2rem;
overflow: hidden;
}
.text-center { text-align: center; }
.btn {
display: inline-block;
background: var(--primary-color);
color: #fff;
padding: 0.75rem 1.5rem;
border: none;
cursor: pointer;
font-size: 1rem;
text-transform: uppercase;
transition: var(--transition);
}
.btn:hover {
background: #e03e40;
transform: translateY(-2px);
}
/* Navbar */
#navbar {
position: fixed;
top: 0;
width: 100%;
background: rgba(26, 26, 26, 0.9);
color: #fff;
padding: 1rem 0;
z-index: 10;
transition: var(--transition);
}
#navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
#navbar .logo {
font-size: 1.8rem;
font-weight: 700;
color: var(--primary-color);
}
#navbar ul {
display: flex;
list-style: none;
}
#navbar ul li {
margin-left: 2rem;
}
#navbar ul li a {
color: #fff;
text-decoration: none;
font-size: 1.1rem;
transition: var(--transition);
}
#navbar ul li a:hover {
color: var(--primary-color);
}
/* Hero */
#hero {
background: url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?auto=format&fit=crop&w=1350&q=80') center/cover no-repeat;
height: 100vh;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 2rem;
position: relative;
}
#hero::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.6);
}
#hero > * {
z-index: 1;
}
#hero h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
animation: fadeInDown 1s ease;
}
#hero p {
font-size: 1.5rem;
margin-bottom: 2rem;
animation: fadeInUp 1s ease;
}
/* Animations */
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-40px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
/* About */
#about {
padding: 5rem 2rem;
background: #fff;
}
#about .grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
#about .box {
background: var(--light-color);
padding: 2rem;
border-radius: 5px;
text-align: center;
transition: var(--transition);
}
#about .box:hover {
transform: translateY(-8px);
box-shadow: 0 8px 10px rgba(0,0,0,0.1);
}
#about .box i {
font-size: 3rem;
color: var(--primary-color);
margin-bottom: 1rem;
}
/* Pricing */
#pricing {
padding: 5rem 2rem;
background: var(--light-color);
}
#pricing .grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
#pricing .plan {
background: #fff;
padding: 2rem;
border-radius: 5px;
text-align: center;
transition: var(--transition);
}
#pricing .plan:hover {
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
#pricing .plan h3 {
font-size: 1.75rem;
margin-bottom: 1rem;
color: var(--primary-color);
}
#pricing .plan .price {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
/* Footer */
#footer {
background: var(--secondary-color);
color: #fff;
padding: 2rem 0;
text-align: center;
}
#footer .social a {
color: #fff;
margin: 0 0.5rem;
font-size: 1.5rem;
transition: var(--transition);
}
#footer .social a:hover {
color: var(--primary-color);
}
/* Responsive nav toggle */
#navbar .toggle {
display: none;
font-size: 1.5rem;
cursor: pointer;
}
@media (max-width: 700px) {
#navbar ul {
display: none;
flex-direction: column;
background: var(--secondary-color);
width: 100%;
position: absolute;
top: 60px;
left: 0;
}
#navbar ul.show {
display: flex;
}
#navbar ul li {
margin: 1rem 0;
text-align: center;
}
#navbar .toggle {
display: block;
}
#hero h1 { font-size: 2.5rem; }
#hero p { font-size: 1.2rem; }
}
</style>
</head>
<body>
<!-- Navbar -->
<nav id="navbar">
<div class="container">
<div class="logo">IronForge Gym</div>
<ul id="nav-links">
<li><a href="#hero">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#footer">Contact</a></li>
</ul>
<div class="toggle" id="nav-toggle"><i class="fas fa-bars"></i></div>
</div>
</nav>
<!-- Hero -->
<header id="hero">
<h1>Forging Champions, One Rep at a Time</h1>
<p>Join the strongest community in town and level-up your fitness.</p>
<a href="#pricing" class="btn">Get Started</a>
</header>
<!-- About -->
<section id="about">
<div class="container text-center">
<h2>Why Choose IronForge?</h2>
<p>We combine world-class equipment, programming, and coaching to turn effort into results.</p>
<div class="grid">
<div class="box">
<i class="fas fa-dumbbell"></i>
<h3>Elite Equipment</h3>
<p>From calibrated plates to competition benches—everything you need to lift heavy.</p>
</div>
<div class="box">
<i class="fas fa-users"></i>
<h3>Expert Coaches</h3>
<p>Certified trainers craft personalized plans to accelerate your gains.</p>
</div>
<div class="box">
<i class="fas fa-heart"></i>
<h3>Supportive Community</h3>
<p>Train alongside athletes who push you to be your strongest self.</p>
</div>
</div>
</div>
</section>
<!-- Pricing -->
<section id="pricing">
<div class="container text-center">
<h2>Choose Your Forge</h2>
<div class="grid">
<div class="plan">
<h3>Basic Forge</h3>
<div class="price">$29<span>/mo</span></div>
<p>24/7 Gym Access</p>
<p>Locker Room & Showers</p>
<a href="#" class="btn">Select</a>
</div>
<div class="plan">
<h3>Iron Forge</h3>
<div class="price">$49<span>/mo</span></div>
<p>Everything in Basic</p>
<p>Group Classes Included</p>
<p>Monthly Progress Check-Ins</p>
<a href="#" class="btn">Select</a>
</div>
<div class="plan">
<h3>Elite Forge</h3>
<div class="price">$79<span>/mo</span></div>
<p>Everything in Iron</p>
<p>1-on-1 Coaching</p>
<p>Nutrition Planning</p>
<a href="#" class="btn">Select</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<div class="container">
<p>© 2024 IronForge Gym. All rights reserved.</p>
<div class="social">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
</footer>
<!-- Simple mobile-nav toggle script -->
<script>
const toggle = document.getElementById('nav-toggle');
const navLinks = document.getElementById('nav-links');
toggle.addEventListener('click', () => navLinks.classList.toggle('show'));
</script>
</body>
</html>
That’s it—drop the file in your browser and you’ll have a fully responsive landing page where new members can instantly understand your gym’s value and pick a plan. Tweak colors, images and copy as you see fit!