HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<!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" />
<meta name="description" content="VFitClub - A sleek fitness website designed with HTML5, CSS3, and Javascript, featuring grid and flexbox layout techniques and stylish animations." />
<title>VFitClub - Elevate Your Fitness Journey</title>
<link rel="icon" type="https://vfitclub.netlify.app/image/png" sizes="32x32" href="https://vfitclub.netlify.app/image/favicon.png" />
<link rel="stylesheet" href="main.css" media="screen" />
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet" />
</head>
<body>
<!-- HEADER -->
<header class="header">
<div class="container">
<nav class="header-nav" aria-label="navigation">
<div class="logo-content">
<img src="https://vfitclub.netlify.app/image/logo.png" alt="Logo" class="nav-icon" width="70" height=60 />
<div class="logo">VFitClub</div>
</div>
<img src="https://vfitclub.netlify.app/image/nav-icon.svg" alt="navigation icon" class="nav-hamburger" width="30" height="30" />
<ul>
<li>
<a href="#aboutus">About</a>
</li>
<li>
<a href="#memberships">Memberships</a>
</li>
<li>
<a href="#ourteam">Our Team</a>
</li>
<li>
<a href="#contact">Join Us</a>
</li>
</ul>
</nav>
</div>
</header>
<main>
<!-- MAIN SECTION -->
<section class="section-hero" id="section-hero">
<div class="container hero-box">
<div class="hero-image-content">
<h1 class="heading">Unlock Your Best Self at VFitClub. Embrace Wellness, Transform Your Life</h1>
<p class="description">Experience the Ultimate Fitness Journey with Functional Training, Plyometric Boxes, Aerobics Classes, TRX, and More</p>
<div class="hero-box-buttons"><button>Discover Classes</button><button>See Our Offerings</button></div>
</div>
</div>
</section>
<section class="section-aboutus" id="aboutus">
<div class="container aboutus">
<div class="section-aboutus-info" data-aos="fade-down">
<h2>About VFitClub</h2>
<p>
At VFitClub, we're not just a fitness center; we're a community dedicated to transforming lives through health and wellness. Founded with a passion for helping individuals
achieve their fitness goals, our mission is to empower, inspire, and support you on your journey to a healthier, happier life.
</p>
<h2>Our Vision</h2>
<p>
Our vision is to be your trusted partner in achieving optimal well-being. We believe that a strong and healthy body is the foundation for a successful, fulfilling life.
Whether you're new to fitness or a seasoned athlete, we're here to guide you on your path to success.
</p>
</div>
<div class="section-aboutus-images">
<figure class="about-box__image">
<img src="https://vfitclub.netlify.app/image/about-image1.jpg" alt="navigation icon" class="nav-hamburger" width=320" height="190" style="--i: 0" data-aos="fade-down-right" />
<img src="https://vfitclub.netlify.app/image/about-image2.jpg" alt="navigation icon" class="nav-hamburger" width="320" height="190" style="--i: 1" data-aos="fade-down" />
<img src="https://vfitclub.netlify.app/image/about-image3.jpg" alt="navigation icon" class="nav-hamburger" width="320" height="190" style="--i: 2" data-aos="fade-down-left" />
</figure>
</div>
</div>
</section>
<section class="section-ourteam" id="ourteam">
<div class="container ourteam" data-aos="fade-down">
<h2 class="title">Our Team</h2>
<div class="team-members">
<div class="team-member">
<img src="https://vfitclub.netlify.app/image/JoeBloggs.jpg" alt="Logo" class="member-logo" />
<div class="team-memmber-info">
<div class="member-name">Joe Bloggs</div>
<div class="member-desg">Weight Lifting Coach</div>
<div class="member-desc">Specializes in sculpting strength and muscle with precision</div>
</div>
</div>
<div class="team-member">
<img src="https://vfitclub.netlify.app/image/CharlieWatson.jpg" alt="Logo" class="nav-icon" />
<div class="team-memmber-info">
<div class="member-name">Charlie Watson</div>
<div class="member-desg">MMA Coach</div>
<div class="member-desc">Hones combat skills and self-defense with expertise</div>
</div>
</div>
<div class="team-member">
<img src="https://vfitclub.netlify.app/image/RachelDanielle.jpg" alt="Logo" class="nav-icon" />
<div class="team-memmber-info">
<div class="member-name">Rachel Danielle</div>
<div class="member-desg">Yoga Instructor</div>
<div class="member-desc">Guides you to inner peace and flexibility through mindful yoga practice</div>
</div>
</div>
<div class="team-member">
<img src="https://vfitclub.netlify.app/image/TaylorMelé.jpg" alt="Logo" class="nav-icon" />
<div class="team-memmber-info">
<div class="member-name">Taylor Melé</div>
<div class="member-desg">Personal Trainer</div>
<div class="member-desc">Your path to achieving fitness goals, one personalized session at a time</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-memberships" id="memberships">
<div class="container memberships">
<h2 class="title">Memberships</h2>
<div class="classes">
<div class="class" data-aos="flip-left">
<h2 class="class-name">3 Months</h2>
<div class="class-price">$100/MON USD</div>
<hr />
<div class="class-name">
<ul>
<li>5 Classes</li>
<li>5 In Personal Training Sessions</li>
<li>Full Gym & Facilities Access</li>
<li>Gym Tour & Training Instruction</li>
</ul>
</div>
<a>Get Started</a>
</div>
<div class="class" data-aos="flip-up">
<h2 class="class-name">6 Months</h2>
<div class="class-price">$75/MON USD</div>
<hr />
<div class="class-name">
<ul>
<li>10 Classes</li>
<li>10 In Personal Training Sessions</li>
<li>Full Gym & Facilities Access</li>
<li>Boxing Ring, Free Events</li>
<li>Gym Tour & Training Instruction</li>
</ul>
</div>
<a>Get Started</a>
</div>
<div class="class" data-aos="flip-right">
<h2 class="class-name">1 Whole Year</h2>
<div class="class-price">$50/MON USD</div>
<hr />
<div class="class-name">
<ul>
<li>10 Classes</li>
<li>15 In Personal Training Sessions</li>
<li>Full Gym & Facilities Access</li>
<li>Boxing Ring, Free Events</li>
<li>Gym Tour & Training Instruction</li>
</ul>
</div>
<a>Get Started</a>
</div>
</div>
</div>
</section>
<section class="section-reviews" id="reviews">
<div class="container reviews">
<h2 class="title">Customer Reviews</h2>
<div class="review">
<div class="review-info">
<div class="review-image" data-aos="image-rotateIn"><img src="https://vfitclub.netlify.app/image/review1.jpeg" alt="Logo" class="review-icon" width="130" height="130" /></div>
<div class="review-details" data-aos="fade-down">
<div>Samantha R</div>
<div>
I can't say enough good things about VFitClub. The trainers are exceptional, and the community is so welcoming. I've made incredible progress in my fitness journey
here
</div>
</div>
</div>
<div class="review-info">
<div class="review-image" data-aos="image-rotateIn"><img src="https://vfitclub.netlify.app/image/review2.jpeg" alt="Logo" class="review-icon" width="130" height="130" /></div>
<div class="review-details" data-aos="fade-down">
<div>Vinay U</div>
<div>Charlie, the MMA coach, is a true expert. He pushes you to your limits while ensuring safety. I've learned so much and gained newfound confidence</div>
</div>
</div>
<div class="review-info">
<div class="review-image" data-aos="image-rotateIn"><img src="https://vfitclub.netlify.app/image/review3.jpeg" alt="Logo" class="review-icon" width="130" height="130" /></div>
<div class="review-details" data-aos="fade-down">
<div>Michael S</div>
<div>
VFitClub is not just a gym; it's a lifestyle. The facility is top-notch, and the trainers are top-level. I've never felt more motivated and supported in my fitness
journey
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-contact" id="contact">
<div class="container contact">
<div class="contactus">
<form>
<h2 class="title">GET IN TOUCH</h2>
<div class="class-input"><input type="text" placeholder="Name" /></div>
<div class="class-input"><input type="email" placeholder="Email" /></div>
<div class="class-input"><input type="number" placeholder="Number" /></div>
<div class="class-input"><textarea placeholder="Message"></textarea></div>
<button>SEND</button>
</form>
</div>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6208.882633670527!2d-77.03822868422614!3d38.914011108427125!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7b7e5bf2241b3%3A0xeee16e72747760aa!2sU%20Street%2FAfrican-Amer%20Civil%20War%20Memorial%2FCardozo!5e0!3m2!1sen!2sin!4v1699174834310!5m2!1sen!2sin" allowfullscreen="" loading="lazy" style="border: 0" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</section>
</main>
<footer class="section-footer" id="footer">
<div class="footer-box container">
<div class="contact-details">
<h2>VFitClub</h2>
<div class="contact-company-address">
123 Wellness Way Activeville,<br />
Fitnessland 56789<br />United States
</div>
<div class="contact-social-links">
<img src="https://vfitclub.netlify.app/image/whatsapp.svg" alt="navigation icon" class="nav-hamburger" width=35" height="35" /> <img src="https://vfitclub.netlify.app/image/facebook.svg" alt="navigation icon" class="nav-hamburger" width=35" height="35" /> <img src="https://vfitclub.netlify.app/image/instagram.svg" alt="navigation icon" class="nav-hamburger" width=35" height="35" /> <img src="https://vfitclub.netlify.app/image/twitter.svg" alt="navigation icon" class="nav-hamburger" width=35" height="35" />
</div>
</div>
<nav class="footer-nav" aria-label="navigation">
<h3>Quick Links</h3>
<ul>
<li>
<a href="#aboutus">About</a>
</li>
<li>
<a href="#memberships">Memberships</a>
</li>
<li>
<a href="#ourteam">Our Team</a>
</li>
<li>
<a href="#contact">Contact </a>
</li>
<li>
<a href="#reviews">Reviews</a>
</li>
</ul>
</nav>
<div class="newsletter">
<h3>News Letter</h3>
<input type="email" placeholder="email@domain.com" /><button>✓</button>
</div>
</div>
<hr />
<div class="container copyrights">
<div>Copyright © by Vinay</div>
<a href="https://github.com/uvinay5/responsive-gym-web/" target="_blank"><img src="https://vfitclub.netlify.app/image/github.svg" alt="navigation icon" class="nav-hamburger" width="50" height="50" /></a>
</div>
</footer>
<div id="offerModal" class="offerModal">
<div class="modal-content">
<h2>Got hiit</h2>
<p>Experience our new high-intensity interval
training facility to boost endurance and agility!</p>
<h1>70%OFF FOR NEW GYM MEMBERS</h1>
<div><button>Unlock 70% Off</button><button class="close-button">Maybe Later</button></div>
</div>
</div>
<script src="./index.js"></script>
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script>
AOS.init({
offset: 120,
delay: 50,
duration: 400,
once: true,
});
</script>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;500;900&family=Poppins&display=swap");
:root {
--color-yellow: #f4ce14;
--color-yellow-dark: hsl(56, 100%, 33%);
--color-yellow-light: hsl(55, 67%, 78%);
--color-black: hsl(0, 0%, 13%);
--color-black-light: hsl(0, 0%, 18%);
--color-black-light-text: hsl(0, 0%, 27%);
--two-col-layout: 2;
--four-col-layout: 4;
--three-col-layout: 3;
--total-stack-size: 10;
}
@media only screen and (max-width: 56.25em) {
:root {
--two-col-layout: 1;
--four-col-layout: 1;
--three-col-layout: 1;
}
}
@media only screen and (max-width: 59em) {
:root {
--two-col-layout: 1;
--four-col-layout: 1;
--three-col-layout: 1;
}
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 62.5%;
scroll-behavior: smooth;
}
h1 {
font-size: 3.5rem;
}
a {
text-decoration: none;
color: inherit;
}
hr {
border: 0;
margin: 0;
width: 100%;
height: 2px;
background: #606060;
margin-bottom: 10px;
}
body {
font-family: "Poppins", sans-serif;
font-weight: 400;
font-size: 1.6rem;
line-height: 1.9;
color: #ffffff;
}
body .container {
max-width: 1440px;
padding: 0 1.4rem;
margin: 0 auto;
}
body button {
padding: 8px 25px;
font-style: italic;
text-transform: uppercase;
background-color: var(--color-yellow);
border: none;
color: #000;
font-weight: 600;
margin-bottom: 5px;
cursor: pointer;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);
clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);
}
body button:hover {
background-color: #000;
color: var(--color-yellow);
-webkit-clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);
clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);
}
body section:nth-child(odd) {
background-color: var(--color-black);
}
body section:nth-child(even) {
background-color: var(--color-black-light);
}
body .header {
position: absolute;
top: 0;
z-index: 10;
width: 100%;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
from(black),
to(rgba(0, 0, 0, 0))
);
background-image: linear-gradient(black, rgba(0, 0, 0, 0));
}
body .header .header-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 10px 0px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
body .header .header-nav .nav-hamburger {
display: none;
}
@media only screen and (max-width: 50em) {
body .header .header-nav .nav-hamburger {
display: block;
}
}
body .header .header-nav .logo-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 5px;
}
body .header .header-nav .logo {
font-size: 3rem;
font-weight: 600;
letter-spacing: 3px;
}
@media only screen and (max-width: 50em) {
body .header .header-nav .logo {
font-size: 2.5rem;
}
}
body .header .header-nav .nav-icon {
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
@media only screen and (max-width: 50em) {
body .header .header-nav .nav-icon {
height: 40px;
width: 40px;
}
}
body .header .header-nav:hover > .nav-icon {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
body .header ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 15px;
list-style: none;
text-transform: uppercase;
}
@media only screen and (max-width: 50em) {
body .header ul {
display: none;
}
}
body .header ul li {
position: relative;
padding: 5px;
overflow: hidden;
font-size: 1.8rem;
font-style: italic;
font-weight: 600;
letter-spacing: 1.2px;
cursor: pointer;
}
body .header ul li:hover {
color: var(--color-yellow);
}
body .header ul li a:after {
background-color: var(--color-yellow);
content: "";
position: absolute;
width: 90%;
left: -100%;
height: 3px;
border-radius: 30px;
bottom: 0px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
body .header ul li a:hover:after {
left: 5%;
}
body .header ul li:last-child {
background-color: var(--color-yellow);
border: 2px solid var(--color-yellow);
border-radius: 5px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
color: #000;
cursor: pointer;
padding: 3px 10px;
}
body .header ul li:last-child:hover {
background-color: inherit;
color: #fff;
}
body .header ul li:last-child a:after {
content: none;
}
body .section-hero {
position: relative;
overflow: hidden;
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background-image: url("https://vfitclub.netlify.app/image/hero-background.webp");
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-size: cover;
}
@media only screen and (max-width: 50em) {
body .section-hero {
background-image: url("https://vfitclub.netlify.app/image/hero-image.png"),
url("https://vfitclub.netlify.app/image/hero-background.webp");
background-position: bottom, center;
background-size: cover;
background-repeat: no-repeat;
}
}
body .section-hero .hero-box {
height: 100%;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
background-image: url("https://vfitclub.netlify.app/image/hero-image.png");
background-repeat: no-repeat;
background-position: bottom;
background-size: contain;
}
@media only screen and (max-width: 50em) {
body .section-hero .hero-box {
background-image: none;
}
}
body .section-hero .hero-box .hero-image-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: start;
gap: 15px;
}
body .section-hero .hero-box h1 {
text-transform: uppercase;
font-size: clamp(2.5rem, 3vw, 3rem);
text-shadow: 2px 5px 5px rgba(0, 0, 0, 0.7), 0px -4px 12px rgba(0, 0, 0, 0.5);
-webkit-animation: moveInLeft 0.5s ease-out;
animation: moveInLeft 0.5s ease-out;
}
@media only screen and (max-width: 50em) {
body .section-hero .hero-box h1 {
text-shadow: none;
}
}
body .section-hero .hero-box p {
font-size: 1.8rem;
text-shadow: 2px 7px 5px rgba(0, 0, 0, 0.4), 0px -4px 10px rgba(0, 0, 0, 0.5);
-webkit-animation: moveInRight 0.5s ease-out;
animation: moveInRight 0.5s ease-out;
}
body .section-hero .hero-box .hero-box-buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 10px;
}
body .section-hero .hero-box .hero-box-buttons button {
font-size: 1.6rem;
}
body .section-hero .hero-section-mouseClick {
position: absolute;
-webkit-animation: onclick 0.1s;
animation: onclick 0.1s;
z-index: -1;
-webkit-box-shadow: rgba(195, 184, 34, 0.15) 0px 0px 30px 30px;
box-shadow: rgba(195, 184, 34, 0.15) 0px 0px 30px 30px;
}
body .section-aboutus {
padding-top: clamp(4rem, 10vw, 10rem);
}
body .section-aboutus .aboutus {
overflow: hidden;
padding: 3rem 3rem;
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(min-content, 1fr)) [var];
grid-template-columns: repeat(
var(--two-col-layout),
minmax(-webkit-min-content, 1fr)
);
grid-template-columns: repeat(
var(--two-col-layout),
minmax(min-content, 1fr)
);
grid-row-gap: 0rem;
grid-column-gap: 5rem;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: justify;
}
body .section-aboutus .aboutus .section-aboutus-images {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-webkit-box-pack: baseline;
-ms-flex-pack: baseline;
justify-content: baseline;
}
body .section-aboutus .aboutus .section-aboutus-images figure {
display: -ms-grid;
display: grid;
-ms-grid-rows: 150px 150px 150px;
grid-template-rows: 150px 150px 150px;
}
@media only screen and (max-width: 50em) {
body .section-aboutus .aboutus .section-aboutus-images figure {
-ms-grid-rows: 190px 190px 190px;
grid-template-rows: 190px 190px 190px;
grid-row-gap: 3rem;
}
}
body .section-aboutus .aboutus .section-aboutus-images figure img {
position: relative;
top: calc(var(--i) * -55px);
left: calc(var(--i) * 90px);
outline: 5px solid #fff;
-webkit-transition: all 0.3s;
transition: all 0.3s;
cursor: pointer;
}
@media only screen and (max-width: 50em) {
body .section-aboutus .aboutus .section-aboutus-images figure img {
top: 0px;
left: 0px;
}
}
body .section-aboutus .aboutus .section-aboutus-images figure img:hover {
z-index: calc(var(--total-stack-size) - var(--i));
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
@media only screen and (max-width: 50em) {
body .section-aboutus .aboutus .section-aboutus-images figure img:hover {
-webkit-transform: none;
transform: none;
}
}
body .section-aboutus .aboutus .section-aboutus-info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
body .section-aboutus .aboutus .section-aboutus-info h2 {
margin-bottom: 1rem;
text-transform: uppercase;
}
body .section-aboutus .aboutus .section-aboutus-info p {
margin-bottom: 2rem;
}
body .section-ourteam {
padding: clamp(4rem, 10vw, 12rem) 0;
}
body .section-ourteam .ourteam {
padding: 2rem 3rem;
}
body .section-ourteam .ourteam .title {
text-align: center;
text-transform: uppercase;
margin-bottom: 40px;
}
body .section-ourteam .ourteam .team-members {
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(min-content, 1fr)) [var];
grid-template-columns: repeat(
var(--four-col-layout),
minmax(-webkit-min-content, 1fr)
);
grid-template-columns: repeat(
var(--four-col-layout),
minmax(min-content, 1fr)
);
grid-column-gap: 5rem;
grid-row-gap: 5rem;
-webkit-box-pack: stretch;
-ms-flex-pack: stretch;
justify-content: stretch;
margin-top: 10px;
}
body .section-ourteam .ourteam .team-members .team-member {
cursor: pointer;
height: 300px;
position: relative;
overflow: hidden;
}
body .section-ourteam .ourteam .team-members .team-member img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
}
body
.section-ourteam
.ourteam
.team-members
.team-member
.team-memmber-info
.member-name {
padding: 1rem 0.8rem;
background-color: var(--color-yellow);
font-size: 1.5rem;
position: absolute;
padding-right: 40px;
bottom: 0px;
left: 0px;
z-index: 4;
-webkit-clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
color: #000;
font-weight: 600;
}
body
.section-ourteam
.ourteam
.team-members
.team-member
.team-memmber-info
.member-desg {
font-style: italic;
position: absolute;
padding: 1rem 0.8rem;
font-size: 1.5rem;
background-color: var(--color-black-light-text);
width: 100%;
bottom: 0px;
text-align: end;
z-index: 3;
right: 0px;
}
body .section-ourteam .ourteam .team-members .team-member:hover .member-desc {
position: absolute;
z-index: 2;
left: 0%;
top: 0px;
}
body .section-ourteam .ourteam .team-members .team-member .member-desc {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
left: 100%;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
background-color: rgba(20, 20, 20, 0.58);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 3rem;
font-size: 1.8rem;
top: 0px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
body .section-memberships {
padding: clamp(4rem, 10vw, 8rem) 0;
}
body .section-memberships .memberships {
padding: 3rem 3rem;
position: relative;
}
body .section-memberships .memberships .title {
text-align: center;
text-transform: uppercase;
margin-bottom: 40px;
}
body .section-memberships .memberships .classes {
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(min-content, 1fr)) [var];
grid-template-columns: repeat(
var(--three-col-layout),
minmax(-webkit-min-content, 1fr)
);
grid-template-columns: repeat(
var(--three-col-layout),
minmax(min-content, 1fr)
);
grid-column-gap: 10rem;
grid-row-gap: 5rem;
-ms-flex-pack: distribute;
justify-content: space-around;
margin-top: 20px;
margin: 20px 70px;
}
@media only screen and (max-width: 50em) {
body .section-memberships .memberships .classes {
margin: 0px;
}
}
body .section-memberships .memberships .classes .class {
cursor: pointer;
background-color: #414141;
z-index: 10;
-webkit-box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
body .section-memberships .memberships .classes .class .class-name {
padding: 1.5rem;
margin-top: 10px;
text-transform: uppercase;
}
body .section-memberships .memberships .classes .class .class-price {
font-size: 1.8rem;
margin-bottom: 20px;
}
body .section-memberships .memberships .classes .class ul {
padding: 2rem;
list-style: none;
}
body .section-memberships .memberships .classes .class ul li {
margin: 15px 0px;
}
body .section-memberships .memberships .classes .class a {
width: 100%;
padding: 15px;
color: #000;
font-weight: 600;
text-align: center;
font-size: 1.8rem;
background-color: var(--color-yellow);
}
body .section-memberships .memberships .classes .class a:hover {
background-color: var(--color-yellow-dark);
}
body .section-memberships .memberships .classes .class:hover {
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-box-shadow: rgba(0, 0, 0, 0.29) 0px 10px 36px 0px,
rgba(0, 0, 0, 0.218) 0px 0px 0px 1px;
box-shadow: rgba(0, 0, 0, 0.29) 0px 10px 36px 0px,
rgba(0, 0, 0, 0.218) 0px 0px 0px 1px;
}
body .section-reviews {
padding: clamp(4rem, 10vw, 8rem) 0;
}
body .section-reviews .reviews {
padding: 2rem 3rem;
position: relative;
}
body .section-reviews .reviews .title {
text-align: center;
text-transform: uppercase;
margin-bottom: 40px;
}
body .section-reviews .reviews .review {
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(min-content, 1fr)) [var];
grid-template-columns: repeat(
var(--three-col-layout),
minmax(-webkit-min-content, 1fr)
);
grid-template-columns: repeat(
var(--three-col-layout),
minmax(min-content, 1fr)
);
grid-column-gap: 10rem;
grid-row-gap: 5rem;
-ms-flex-pack: distribute;
justify-content: space-around;
margin: 20px 0px;
}
body .section-reviews .reviews .review .review-info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
body .section-reviews .reviews .review .review-info .review-image {
width: 145px;
height: 145px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
border-radius: 100%;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
}
body .section-reviews .reviews .review .review-info .review-image img {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
border-radius: 100%;
z-index: 15;
border: 2px solid var(--color-black);
}
body .section-reviews .reviews .review .review-info .review-image:before {
content: "";
width: 100%;
height: 50%;
z-index: 11;
position: absolute;
background-color: #fae500;
-webkit-transition: 0.3s;
transition: 0.3s;
bottom: 0px;
}
body .section-reviews .reviews .review .review-info .review-image:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
border-radius: 100%;
background-image: -webkit-gradient(
linear,
left top,
right top,
from(#212121),
color-stop(rgba(179, 143, 0, 0.174)),
to(#fae500)
);
background-image: linear-gradient(
90deg,
#212121,
rgba(179, 143, 0, 0.174),
#fae500 100%
);
}
body .section-reviews .reviews .review .review-info .review-image:hover:before {
width: 100%;
height: 100%;
}
body .section-reviews .reviews .review .review-info .review-details {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
body
.section-reviews
.reviews
.review
.review-info
.review-details
div:first-child {
font-size: 1.8rem;
padding: 1rem;
}
body
.section-reviews
.reviews
.review
.review-info
.review-details
div:last-child {
text-align: justify;
position: relative;
font-style: italic;
}
body
.section-reviews
.reviews
.review
.review-info
.review-details
div:last-child:before {
top: -20px;
left: -25px;
position: absolute;
content: "\201F";
font-size: 5rem;
}
body .section-contact {
position: relative;
}
body .section-contact .contact {
overflow: hidden;
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(min-content, 1fr)) [var];
grid-template-columns: repeat(
var(--two-col-layout),
minmax(-webkit-min-content, 1fr)
);
grid-template-columns: repeat(
var(--two-col-layout),
minmax(min-content, 1fr)
);
grid-column-gap: 1rem;
grid-row-gap: 1rem;
-ms-flex-pack: distribute;
justify-content: space-around;
}
body .section-contact .contact .contactus {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: stretch;
-ms-flex-pack: stretch;
justify-content: stretch;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 2rem 1rem;
}
body .section-contact .contact .contactus form {
width: 100%;
}
body .section-contact .contact .contactus form input::-webkit-outer-spin-button,
body
.section-contact
.contact
.contactus
form
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
body .section-contact .contact .contactus form input,
body .section-contact .contact .contactus form textarea {
margin: 0;
color: #fff;
font-size: 1.8rem;
padding: 10px 5px;
width: 100%;
background-color: transparent;
border: 0px;
outline: none;
position: relative;
}
body .section-contact .contact .contactus form textarea {
min-height: 50px;
}
body .section-contact .contact .contactus form .class-input {
position: relative;
margin: 20px 0px;
overflow: hidden;
border-bottom: 1px solid #6a6a6a;
cursor: text;
}
body .section-contact .contact .contactus form .class-input:after {
content: "";
position: absolute;
width: 100%;
height: 0%;
border-bottom: 2px solid yellow;
left: 0px;
bottom: 0px;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
body .section-contact .contact .contactus form .class-input:hover:after {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
body .section-contact .contact .contactus form button {
padding: 10px 30px;
font-size: 1.5rem;
}
body .section-contact .contact .contactus form button:hover {
background-color: var(--color-yellow);
color: #464646;
}
body .section-contact .contact .map {
width: 100%;
height: 450px;
}
body .section-contact .contact .map iframe {
width: 100%;
height: 100%;
}
body .section-footer {
padding: clamp(4rem, 10vw, 8rem) 0;
background-color: #161616;
}
body .section-footer .footer-box {
margin: auto;
display: -ms-grid;
display: grid;
-ms-grid-columns: (minmax(min-content, 1fr)) [var];
grid-template-columns: repeat(
var(--three-col-layout),
minmax(-webkit-min-content, 1fr)
);
grid-template-columns: repeat(
var(--three-col-layout),
minmax(min-content, 1fr)
);
grid-column-gap: 10rem;
grid-row-gap: 5rem;
-ms-flex-pack: distribute;
justify-content: space-around;
padding: 30px 30px;
}
body .section-footer .footer-box .contact-details .contact-company-address {
font-size: 1.8rem;
margin: 10px 0px;
}
body .section-footer .footer-box .contact-social-links {
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
gap: 4rem;
}
body .section-footer .footer-box .footer-nav h3 {
margin: 10px 0px;
}
body .section-footer .footer-box .footer-nav li {
font-size: 1.7rem;
list-style: none;
}
body .section-footer .footer-box .newsletter h3 {
margin: 10px 0px;
}
body .section-footer .footer-box .newsletter input {
padding: 8px 10px;
width: 60%;
background-color: #414141;
margin-right: 10px;
border: none;
border-radius: 5px;
color: #fff;
font-size: 1.7rem;
outline: none;
}
body .section-footer .footer-box .newsletter button {
font-weight: 900;
padding: 08px 20px;
}
body .section-footer .copyrights {
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
body .section-footer .copyrights div {
font-size: 1.8rem;
margin: 20px;
}
body .offerModal {
-webkit-animation: movemodel 0.5s forwards;
animation: movemodel 0.5s forwards;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
opacity: block;
position: fixed;
background-color: red;
padding: 35px 35px;
right: -80%;
top: 50%;
width: 420px;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
z-index: 15;
background: rgba(255, 252, 252, 0.14);
border-radius: 16px;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(10px);
}
@media only screen and (max-width: 50em) {
body .offerModal {
display: none;
}
}
body .offerModal .modal-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
align-items: center;
}
body .offerModal .modal-content h2 {
font-size: 35px;
}
body .offerModal .modal-content p {
font-size: 15px;
}
body .offerModal .modal-content h1 {
color: #ff4646;
font-weight: bolder;
}
body .offerModal .modal-content button {
width: 180px;
height: 40px;
-webkit-clip-path: none;
clip-path: none;
}
body .offerModal .modal-content .close-button {
width: 150px;
background-color: #414141;
color: #f4ce14;
}
body .offerModal .modal-content .close-button:hover {
background-color: #000;
}
body .offerModal .modal-content div {
margin-top: 10px;
gap: 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
[data-aos="image-rotateIn"] {
-webkit-transform: rotate(360deg) scale(0.5);
transform: rotate(360deg) scale(0.5);
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
}
[data-aos="image-rotateIn"].aos-animate {
-webkit-transform: rotate(90deg) scale(1);
transform: rotate(90deg) scale(1);
}
@-webkit-keyframes onclick {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes onclick {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes moveInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
}
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
}
}
@keyframes moveInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
}
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
}
}
@-webkit-keyframes moveInRight {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
}
}
@keyframes moveInRight {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
100% {
opacity: 1;
-webkit-transform: translate(0);
transform: translate(0);
}
}
@-webkit-keyframes movemodel {
0% {
right: -80%;
}
100% {
right: 20%;
}
}
@keyframes movemodel {
0% {
right: -80%;
}
100% {
right: 20%;
}
}
/*# sourceMappingURL=main.css.map */
import aos from "https://esm.sh/aos";
var movementStrength = 25;
const hero = document.getElementById("section-hero");
var modal = document.getElementById("offerModal");
var closeButton = document.querySelector(".close-button");
closeButton.onclick = function () {
modal.style.display = "none";
};
hero.addEventListener("mousemove", (e) => {
const div = document.createElement("div");
div.classList.add("hero-section-mouseClick");
div.style.left = e.pageX + "px";
div.style.top = e.pageY + "px";
const box = document.getElementById("section-hero");
box.appendChild(div);
setTimeout(() => {
box.removeChild(div);
div.remove();
}, 200);
});
Also see: Tab Triggers