anycoder-76311593 / index.html
sagar007's picture
Upload folder using huggingface_hub
93417b3 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raunak Fitness - Best Gym in Olavar, Gobindapur</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<!-- Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* --- CSS VARIABLES & RESET --- */
:root {
--primary-red: #D90429;
--secondary-red: #8D0801;
--bg-black: #111111;
--bg-dark-gray: #1a1a1a;
--text-white: #ffffff;
--text-gray: #cccccc;
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Poppins', sans-serif;
background-color: var(--bg-black);
color: var(--text-white);
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-weight: 800;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
img {
max-width: 100%;
display: block;
}
/* --- UTILITIES --- */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.section-title {
text-align: center;
margin-bottom: 60px;
position: relative;
}
.section-title h2 {
font-size: 3rem;
color: var(--primary-red);
letter-spacing: 2px;
display: inline-block;
border-bottom: 3px solid var(--primary-red);
padding-bottom: 10px;
}
.btn {
display: inline-block;
padding: 12px 30px;
background-color: var(--primary-red);
color: white;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
border: 2px solid var(--primary-red);
transition: var(--transition);
cursor: pointer;
clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%, 0% 20%);
}
.btn:hover {
background-color: transparent;
color: var(--primary-red);
transform: translateY(-3px);
}
.btn-outline {
background-color: transparent;
border: 2px solid white;
clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%, 0% 20%);
}
.btn-outline:hover {
background-color: white;
color: black;
}
/* --- HEADER & NAV --- */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
padding: 15px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-weight: 900;
color: white;
letter-spacing: -1px;
}
.logo span {
color: var(--primary-red);
}
.nav-links {
display: flex;
gap: 30px;
}
.nav-links a {
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
transition: var(--transition);
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
left: 0;
background-color: var(--primary-red);
transition: var(--transition);
}
.nav-links a:hover::after {
width: 100%;
}
.mobile-toggle {
display: none;
font-size: 1.5rem;
cursor: pointer;
}
/* --- HERO SECTION --- */
#hero {
height: 100vh;
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?ixlib=rb-4.0.3&auto=format&fit=crop&w=1470&q=80');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
}
.hero-content {
z-index: 2;
padding: 20px;
animation: fadeIn Up 1s ease;
}
.hero-content h1 {
font-size: 4rem;
line-height: 1.1;
margin-bottom: 20px;
color: white;
text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}
.hero-content h1 span {
color: var(--primary-red);
}
.hero-content p {
font-size: 1.2rem;
color: var(--text-gray);
margin-bottom: 30px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.hero-buttons {
display: flex;
gap: 20px;
justify-content: center;
}
/* --- ABOUT SECTION --- */
#about {
padding: 100px 0;
background-color: var(--bg-black);
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
}
.about-img {
position: relative;
}
.about-img img {
width: 100%;
border-radius: 5px;
box-shadow: -10px 10px 0px var(--primary-red);
filter: grayscale(100%);
transition: var(--transition);
}
.about-img:hover img {
filter: grayscale(0%);
}
.about-text h3 {
font-size: 2rem;
margin-bottom: 20px;
color: white;
}
.about-text p {
color: var(--text-gray);
margin-bottom: 20px;
}
.features-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 30px;
}
.feature-item {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
}
.feature-item i {
color: var(--primary-red);
}
/* --- MEMBERSHIP PLANS --- */
#plans {
padding: 100px 0;
background-color: var(--bg-dark-gray);
background-image: radial-gradient(circle at center, #222 0%, #111 100%);
}
.plans-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.plan-card {
background: var(--bg-black);
padding: 40px 30px;
border: 1px solid #333;
text-align: center;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.plan-card:hover {
border-color: var(--primary-red);
transform: translateY(-10px);
}
.plan-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: var(--primary-red);
}
.plan-name {
font-size: 1.5rem;
margin-bottom: 15px;
color: white;
}
.plan-price {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary-red);
margin-bottom: 20px;
font-family: 'Montserrat', sans-serif;
}
.plan-price span {
font-size: 1rem;
color: var(--text-gray);
}
.plan-features {
margin-bottom: 30px;
text-align: left;
}
.plan-features li {
padding: 10px 0;
border-bottom: 1px solid #222;
color: var(--text-gray);
}
.plan-features li i {
color: var(--primary-red);
margin-right: 10px;
}
/* --- GALLERY --- */
#gallery {
padding: 100px 0;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 15px;
}
.gallery-item {
height: 300px;
overflow: hidden;
position: relative;
cursor: pointer;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.gallery-item:hover img {
transform: scale(1.1);
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(217, 4, 41, 0.7);
opacity: 0;
transition: var(--transition);
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: 700;
text-transform: uppercase;
}
.gallery-item:hover .overlay {
opacity: 1;
}
/* --- REVIEWS --- */
#reviews {
padding: 100px 0;
background-color: #000;
border-top: 1px solid #222;
}
.reviews-slider {
display: flex;
gap: 30px;
overflow-x: auto;
padding: 20px 0;
scrollbar-width: thin;
scrollbar-color: var(--primary-red) var(--bg-black);
}
.review-card {
min-width: 300px;
background: #1a1a1a;
padding: 30px;
border-left: 4px solid var(--primary-red);
}
.review-stars {
color: gold;
margin-bottom: 15px;
}
.review-text {
font-style: italic;
color: var(--text-gray);
margin-bottom: 20px;
}
.review-author {
font-weight: 700;
color: white;
text-transform: uppercase;
font-size: 0.9rem;
}
/* --- CONTACT --- */
#contact {
padding: 100px 0;
background: var(--bg-dark-gray);
}
.contact-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
}
.contact-info h3 {
margin-bottom: 20px;
font-size: 1.5rem;
}
.info-item {
margin-bottom: 20px;
display: flex;
gap: 15px;
align-items: center;
}
.info-item i {
font-size: 1.2rem;
color: var(--primary-red);
background: #222;
padding: 10px;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 15px;
margin-bottom: 15px;
background: #111;
border: 1px solid #333;
color: white;
font-family: 'Poppins', sans-serif;
}
.contact-form input:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--primary-red);
}
.map-container {
height: 400px;
width: 100%;
background: #222;
overflow: hidden;
}
.map-container iframe {
width: 100%;
height: 100%;
border: 0;
}
/* --- FOOTER --- */
footer {
background: black;
padding: 40px 0;
text-align: center;
border-top: 5px solid var(--primary-red);
}
.social-links {
margin-bottom: 20px;
}
.social-links a {
font-size: 1.2rem;
margin: 0 10px;
color: white;
transition: var(--transition);
}
.social-links a:hover {
color: var(--primary-red);
}
.footer-text {
color: #666;
font-size: 0.8rem;
}
/* --- RESPONSIVE --- */
@media (max-width: 768px) {
.hero-content h1 {
font-size: 2.5rem;
}
.nav-links {
display: none; /* Hide for simplicity in this single file demo, usually would add toggle logic */
}
.mobile-toggle {
display: block;
}
.about-grid,
.contact-wrapper {
grid-template-columns: 1fr;
}
.hero-buttons {
flex-direction: column;
}
.section-title h2 {
font-size: 2rem;
}
}
/* Animation Keyframes */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="container nav-wrapper">
<div class="logo">RAUNAK <span>FITNESS</span></div>
<nav>
<ul class="nav-links">
<li><a href="#about">About</a></li>
<li><a href="#plans">Plans</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#reviews">Reviews</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="mobile-toggle">
<i class="fas fa-bars"></i>
</div>
<!-- Critical Requirement Link -->
<a href="https://huggingface.co/spaces/akhaliq/anycoder" style="position: absolute; top: -40px; right: 20px; font-size: 12px; color: #fff; background: #333; padding: 5px 10px; border-radius: 5px; opacity: 0.8;">Built with anycoder</a>
</div>
</header>
<!-- Hero Section -->
<section id="hero">
<div class="hero-content">
<h1>RAUNAK FITNESS<br><span>BEST GYM IN OLAVAR</span></h1>
<p>Transform your body and mind with the best equipment and expert trainers in Gobindapur. Join the elite today.</p>
<div class="hero-buttons">
<a href="#plans" class="btn">Join Now</a>
<a href="#about" class="btn btn-outline">Learn More</a>
</div>
</div>
</section>
<!-- About Section -->
<section id="about">
<div class="container">
<div class="section-title">
<h2>ABOUT THE GYM</h2>
</div>
<div class="about-grid">
<div class="about-text">
<h3>WE BUILD CHAMPIONS</h3>
<p>Raunak Fitness isn't just a place to lift weights; it's a community dedicated to strength, discipline, and health. Located in Olavar, Gobindapur, we provide a state-of-the-art facility designed to push your limits.</p>
<p>Whether you are a beginner looking to start your journey or a professional athlete aiming for peak performance, our equipment and coaching staff are ready to support you.</p>
<div class="features-list">
<div class="feature-item"><i class="fas fa-check-circle"></i> Modern Equipment</div>
<div class="feature-item"><i class="fas fa-check-circle"></i> Expert Trainers</div>
<div class="feature-item"><i class="fas fa-check-circle"></i> 24/7 Access</div>
<div class="feature-item"><i class="fas fa-check-circle"></i> Diet Plans</div>
</div>
</div>
<div class="about-img">
<img src="https://images.unsplash.com/photo-1571019614254-848c09137353?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Gym Interior">
</div>
</div>
</div>
</section>
<!-- Membership Plans -->
<section id="plans">
<div class="container">
<div class="section-title">
<h2>MEMBERSHIP PLANS</h2>
</div>
<div class="plans-grid">
<!-- Plan 1 -->
<div class="plan-card">
<h3 class="plan-name">BASIC</h3>
<div class="plan-price">₹1500 <span>/month</span></div>
<ul class="plan-features">
<li><i class="fas fa-check"></i> Gym Access (6 AM - 10 PM)</li>
<li><i class="fas fa-check"></i> Locker Facility</li>
<li><i class="fas fa-check"></i> Basic Trainer Support</li>
<li><i class="fas fa-times" style="color:#555"></i> Diet Plan</li>
</ul>
<a href="#contact" class="btn">Select Plan</a>
</div>
<!-- Plan 2 (Highlighted) -->
<div class="plan-card" style="border-color: var(--primary-red);">
<div style="background: var(--primary-red); color: white; padding: 5px; margin: -40px -30px 20px -30px; font-size: 0.8rem; font-weight: bold;">BEST VALUE</div>
<h3 class="plan-name">PRO</h3>
<div class="plan-price">₹2500 <span>/month</span></div>
<ul class="plan-features">
<li><i class="fas fa-check"></i> 24/7 Gym Access</li>
<li><i class="fas fa-check"></i> Personal Locker</li>
<li><i class="fas fa-check"></i> Personal Trainer</li>
<li><i class="fas fa-check"></i> Basic Diet Plan</li>
</ul>
<a href="#contact" class="btn">Select Plan</a>
</div>
<!-- Plan 3 -->
<div class="plan-card">
<h3 class="plan-name">ELITE</h3>
<div class="plan-price">₹4000 <span>/month</span></div>
<ul class="plan-features">
<li><i class="fas fa-check"></i> 24/7 Gym Access</li>
<li><i class="fas fa-check"></i> VIP Locker</li>
<li><i class="fas fa-check"></i> Head Trainer</li>
<li><i class="fas fa-check"></i> Customized Diet & Massage</li>
</ul>
<a href="#contact" class="btn">Select Plan</a>
</div>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery">
<div class="container">
<div class="section-title">
<h2>GYM GALLERY</h2>
</div>
<div class="gallery-grid">
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1590487988256-9829f726da22?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Weights">
<div class="overlay">Weights Zone</div>
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1581009146145-b3ef0d51db18?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Training">
<div class="overlay">Training Area</div>
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1534438327276-14e5300c3a48?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Squat">
<div class="overlay">Heavy Lifting</div>
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1599058945529-4b0c922e328f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Cardio">
<div class="overlay">Cardio Zone</div>
</div>
</div>
</div>
</section>
<!-- Reviews -->
<section id="reviews">
<div class="container">
<div class="section-title">
<h2>CLIENT REVIEWS</h2>
</div>
<div class="reviews-slider">
<div class="review-card">
<div class="review-stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<p class="review-text">"Raunak Fitness is the best gym in Olavar. The equipment is top-notch and the trainers really know what they are doing."</p>
<div class="review-author">- Rajesh Kumar</div>
</div>
<div class="review-card">
<div class="review-stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<p class="review-text">"Great atmosphere. I've seen amazing results in just 3 months. The Pro plan is definitely worth the money."</p>
<div class="review-author">- Amit Singh</div>
</div>
<div class="review-card">
<div class="review-stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<p class="review-text">"Clean, professional, and motivating. This gym in Gobindapur sets the standard for fitness."</p>
<div class="review-author">- Vikram Yadav</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact">
<div class="container">
<div class="section-title">
<h2>CONTACT US</h2>
</div>
<div class="contact-wrapper">
<div class="contact-info">
<h3>GET IN TOUCH</h3>
<p style="margin-bottom: 30px;">Ready to start your fitness journey? Visit us today or contact us for more details.</p>
<div class="info-item">
<i class="fas fa-map-marker-alt"></i>
<span>Main Road, Olavar, Gobindapur, Punjab</span>
</div>
<div class="info-item">
<i class="fas fa-phone-alt"></i>
<span>+91 98765 43210</span>
</div>
<div class="info-item">
<i class="fas fa-envelope"></i>
<span>contact@raunakfitness.com</span>
</div>
<form class="contact-form">
<input type="text" placeholder="Your Name">
<input type="email" placeholder="Your Email">
<textarea rows="4" placeholder="Message"></textarea>
<button type="submit" class="btn">Send Message</button>
</form>
</div>
<div class="map-container">
<!-- Placeholder Google Map iframe for Gobindapur area -->
<iframe src="https://www.google.com/maps/embed?pb=!1M18!1M12!1M3!1m2!1s0x391032636b151d75:0x1c794e747e757e7d!2m3!1v1!3m2!1i102!2i102!1h1!2h2!3h3!4h4!5h5!6h6!7h7!8h8!9h9!10h10!11h11!12h12!13h13!14h14!15h15!16h16!17h17!18h18!19h19!20h20!21h21!22h22!23h23!24h24!25h25!26h26!27h27!28h28!29h29!30h30!31h31!32h32!33h33!34h34!35h35!36h36!37h37!38h38!39h39!40h40!41h41!42h42!43h43!44h44!45h45!46h46!47h47!48h48!49h49!50h50!51h51!52h52!53h53!54h54!55h55!56h56!57h57!58h58!59h59!60h60!61h61!62h62!63h63!64h64!65h65!66h66!67h67!68h68!69h69!70h70!71h71!72h72!73h73!74h74!75h75!76h76!77h77!78h78!79h79!80h80!81h81!82h82!83h83!84h84!85h85!86h86!87h87!88h88!89h89!90h90!91h91!92h92!93h93!94h94!95h95!96h96!97h97!98h98!99h99!100h100!101h101!102h102!103h103!104h104!105h105!106h106!107h107!108h108!109h109!110h110!111h111!112h112!113h113!114h114!115h115!116h116!117h117!118h118!119h119!120h120!121h121!122h122!123h123!124h124!125h125!126h126!127h127!128h128!129h129!130h130!131h131!132h132!133h133!134h134!135h135!136h136!137h137!138h138!139h139!140h140!141h141!142h142!143h143!144h144!145h145!146h146!147h147!148h148!149h149!150h150!151h151!152h152!153h153!154h154!155h155!156h156!157h157!158h158!159h159!160h160!161h161!162h162!163h163!164h164!165h165!166h166!167h167!168h168!169h169!170h170!171h171!172h172!173h173!174h174!175h175!176h176!177h177!178h178!179h179!180h180!181h181!182h182!183h183!184h184!185h185!186h186!187h187!188h188!189h189!190h190!191h191!192h192!193h193!194h194!195h195!196h196!197h197!198h198!199h199!200h200!201h201!202h202!203h203!204h204!205h205!206h206!207h207!208h208!209h209!210h210!211h211!212h212!213h213!214h214!215h215!216h216!217h217!218h218!219h219!220h220!221h221!222h222!223h223!224h224!225h225!226h226!227h227!228h228!229h229!230h230!231h231!232h232!233h233!234h234!235h235!236h236!237h237!238h238!239h239!240h240!241h241!242h242!243h243!244h244!245h245!246h246!247h247!248h248!249h249!250h250!251h251!252h252!253h253!254h254!255h255!256h256!257h257!258h258!259h259!260h260!261h261!262h262!263h263!264h264!265h265!266h266!267h267!268h268!269h269!270h270!271h271!272h272!273h273!274h274!275h275!276h276!277h277!278h278!279h279!280h280!281h281!282h282!283h283!284h284!285h285!286h286!287h287!288h288!289h289!290h290!291h291!292h292!293h293!294h294!295h295!296h296!297