Scribd
Upload
2 views

Styles.css

The document is a CSS stylesheet that defines styles for a web page, including font imports, color variables, layout structures, and component styles such as buttons, headers, and sections. It utilizes CSS variables for colors and transitions, ensuring a consistent design across various elements. The stylesheet also includes responsive design features for different sections like hero, about, programs, testimonials, and pricing.

Uploaded by

lamloumibacem
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

Styles.css

The document is a CSS stylesheet that defines styles for a web page, including font imports, color variables, layout structures, and component styles such as buttons, headers, and sections. It utilizes CSS variables for colors and transitions, ensuring a consistent design across various elements. The stylesheet also includes responsive design features for different sections like hero, about, programs, testimonials, and pricing.

Uploaded by

lamloumibacem
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 21

/* Google Fonts Import */

@import url('https://fonts.googleapis.com/css2?
family=Montserrat:wght@300;400;500;600;700;800&family=Oswald:wght@400;500;600;700&d
isplay=swap');

/* Reset & Base Styles */


:root {
/* Colors from the logo */
--primary: #c45a28; /* Orange/rust color from logo */
--primary-dark: #a34a20;
--primary-light: #e67a48;
--secondary: #000000; /* Black as requested */
--accent-blue: #1e5bbc; /* Blue from logo text */
--accent-red: #e63946; /* Red from logo text */
--gray: #6c757d;
--light-gray: #f8f9fa;
--dark-gray: #343a40;
--white: #ffffff;

/* Font families */
--heading-font: 'Oswald', sans-serif;
--body-font: 'Montserrat', sans-serif;

/* Other variables */
--transition: all 0.3s ease;
--border-radius: 5px;
--box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
font-family: var(--body-font);
line-height: 1.6;
color: var(--dark-gray);
overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {


font-family: var(--heading-font);
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
color: var(--secondary);
}

a {
text-decoration: none;
color: var(--primary);
transition: var(--transition);
}
a:hover {
color: var(--primary-dark);
}

ul {
list-style: none;
}

img {
max-width: 100%;
height: auto;
}

.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

.section-header {
text-align: center;
margin-bottom: 50px;
}

.section-header h2 {
font-size: 2.5rem;
text-transform: uppercase;
position: relative;
display: inline-block;
}

.highlight {
color: var(--primary);
}

.underline {
height: 4px;
width: 70px;
background: var(--primary);
margin: 0 auto;
margin-top: 10px;
}

.btn {
display: inline-block;
padding: 12px 30px;
border-radius: var(--border-radius);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: var(--transition);
cursor: pointer;
border: none;
font-size: 0.9rem;
}

.primary-btn {
background-color: var(--primary);
color: var(--white);
}

.primary-btn:hover {
background-color: var(--primary-dark);
color: var(--white);
}

.secondary-btn {
background-color: transparent;
color: var(--primary);
border: 2px solid var(--primary);
}

.secondary-btn:hover {
background-color: var(--primary);
color: var(--white);
}

/* Header & Navigation */


header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background-color: var(--secondary);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: var(--transition);
}

nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
max-width: 1200px;
margin: 0 auto;
}

.logo-container {
display: flex;
align-items: center;
}

.logo {
height: 60px;
width: auto;
}

.nav-menu {
display: flex;
align-items: center;
}

.nav-menu li {
margin-left: 25px;
}
.nav-menu a {
color: var(--white);
font-weight: 500;
font-size: 1rem;
position: relative;
padding: 5px 0;
}

.nav-menu a:hover, .nav-menu a.active {


color: var(--primary);
}

.nav-menu a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--primary);
transition: var(--transition);
}

.nav-menu a:hover::after, .nav-menu a.active::after {


width: 100%;
}

.cta-button {
background-color: var(--primary);
color: var(--white) !important;
padding: 10px 20px !important;
border-radius: var(--border-radius);
}

.cta-button:hover {
background-color: var(--primary-dark);
}

.menu-toggle {
display: none;
cursor: pointer;
}

.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
background-color: var(--white);
transition: var(--transition);
}

/* Hero Section */
.hero {
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('hero-
bg.jpg');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--white);
padding: 0 20px;
}

.hero-content {
max-width: 800px;
}

.hero h1 {
font-size: 3.5rem;
margin-bottom: 20px;
color: var(--white);
text-transform: uppercase;
letter-spacing: 2px;
}

.hero h2 {
font-size: 2rem;
margin-bottom: 20px;
color: var(--white);
}

.hero p {
font-size: 1.2rem;
margin-bottom: 30px;
color: var(--light-gray);
}

.hero-buttons {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;
}

/* About Section */
.about {
padding: 100px 0;
background-color: var(--white);
}

.about-content {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 50px;
}

.about-image {
flex: 1;
min-width: 300px;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--box-shadow);
}

.about-text {
flex: 1;
min-width: 300px;
}

.about-text h3 {
color: var(--primary);
margin-bottom: 15px;
}

.about-text p {
margin-bottom: 20px;
}

.stats-container {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-top: 40px;
}

.stat-box {
flex: 1;
min-width: 120px;
text-align: center;
padding: 20px;
border-radius: var(--border-radius);
background-color: var(--light-gray);
box-shadow: var(--box-shadow);
}

.stat-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 5px;
}

.stat-label {
font-size: 0.9rem;
color: var(--gray);
text-transform: uppercase;
letter-spacing: 1px;
}

/* Programs Section */
.programs {
padding: 100px 0;
background-color: var(--light-gray);
}

.programs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
}
.program-card {
background-color: var(--white);
border-radius: var(--border-radius);
padding: 30px;
text-align: center;
box-shadow: var(--box-shadow);
transition: var(--transition);
}

.program-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.program-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background-color: var(--primary);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}

.program-card h3 {
margin-bottom: 15px;
}

.program-card p {
margin-bottom: 20px;
color: var(--gray);
}

.program-link {
color: var(--primary);
font-weight: 600;
display: inline-block;
position: relative;
}

.program-link::after {
content: '→';
margin-left: 5px;
transition: var(--transition);
}

.program-link:hover::after {
margin-left: 10px;
}

/* CTA Section */
.cta-section {
padding: 80px 0;
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('cta-
bg.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
text-align: center;
color: var(--white);
}

.cta-section h2 {
color: var(--white);
font-size: 2.5rem;
margin-bottom: 20px;
}

.cta-section p {
font-size: 1.2rem;
margin-bottom: 30px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}

/* Schedule Section */
.schedule {
padding: 100px 0;
background-color: var(--white);
}

.schedule-container {
background-color: var(--light-gray);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--box-shadow);
}

.schedule-tabs {
display: flex;
background-color: var(--secondary);
overflow-x: auto;
}

.schedule-tab {
padding: 15px 25px;
background: none;
border: none;
color: var(--white);
font-weight: 600;
cursor: pointer;
transition: var(--transition);
text-transform: uppercase;
letter-spacing: 1px;
font-family: var(--heading-font);
}

.schedule-tab.active, .schedule-tab:hover {
background-color: var(--primary);
}

.schedule-content {
padding: 30px;
}

.schedule-day {
display: none;
}

.schedule-day.active {
display: block;
}

.schedule-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
margin-bottom: 10px;
background-color: var(--white);
border-radius: var(--border-radius);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.schedule-item:last-child {
margin-bottom: 0;
}

.time {
font-weight: 600;
color: var(--primary);
width: 150px;
}

.class {
flex: 1;
font-weight: 500;
}

.trainer {
width: 120px;
color: var(--gray);
}

/* Trainers Section */
.trainers {
padding: 100px 0;
background-color: var(--light-gray);
}

.trainers-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 30px;
}

.trainer-card {
background-color: var(--white);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--box-shadow);
text-align: center;
transition: var(--transition);
}

.trainer-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.trainer-image {
height: 250px;
overflow: hidden;
}

.trainer-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}

.trainer-card:hover .trainer-image img {


transform: scale(1.1);
}

.trainer-card h3 {
margin: 20px 0 5px;
}

.trainer-role {
color: var(--primary);
font-weight: 600;
margin-bottom: 10px;
}

.trainer-bio {
padding: 0 20px;
margin-bottom: 20px;
color: var(--gray);
}

.trainer-social {
display: flex;
justify-content: center;
gap: 15px;
padding: 15px 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.trainer-social a {
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--light-gray);
color: var(--dark-gray);
border-radius: 50%;
transition: var(--transition);
}
.trainer-social a:hover {
background-color: var(--primary);
color: var(--white);
}

/* Testimonials Section */
.testimonials {
padding: 100px 0;
background-color: var(--white);
}

.testimonial-slider {
position: relative;
max-width: 800px;
margin: 0 auto;
}

.testimonial-slide {
display: none;
}

.testimonial-slide.active {
display: block;
}

.testimonial-content {
background-color: var(--light-gray);
padding: 40px;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
position: relative;
}

.quote-icon {
color: var(--primary);
font-size: 2rem;
margin-bottom: 20px;
}

.testimonial-content p {
font-style: italic;
margin-bottom: 30px;
}

.testimonial-author {
display: flex;
align-items: center;
}

.testimonial-author img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
margin-right: 15px;
}

.testimonial-author h4 {
margin-bottom: 5px;
}

.testimonial-author p {
margin: 0;
color: var(--gray);
font-style: normal;
font-size: 0.9rem;
}

.testimonial-controls {
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}

.testimonial-prev, .testimonial-next {
background: none;
border: none;
font-size: 1.5rem;
color: var(--gray);
cursor: pointer;
transition: var(--transition);
}

.testimonial-prev:hover, .testimonial-next:hover {
color: var(--primary);
}

.testimonial-dots {
display: flex;
gap: 10px;
margin: 0 20px;
}

.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--light-gray);
border: 2px solid var(--gray);
cursor: pointer;
transition: var(--transition);
}

.dot.active, .dot:hover {
background-color: var(--primary);
border-color: var(--primary);
}

/* Pricing Section */
.pricing {
padding: 100px 0;
background-color: var(--light-gray);
}

.pricing-toggle {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 50px;
gap: 15px;
}

.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--gray);
transition: var(--transition);
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: var(--white);
transition: var(--transition);
}

input:checked + .slider {
background-color: var(--primary);
}

input:checked + .slider:before {
transform: translateX(26px);
}

.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}

.discount {
background-color: var(--primary);
color: var(--white);
padding: 3px 8px;
border-radius: 20px;
font-size: 0.8rem;
margin-left: 5px;
}

.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}

.pricing-card {
background-color: var(--white);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--box-shadow);
transition: var(--transition);
position: relative;
}

.pricing-card.featured {
transform: scale(1.05);
z-index: 1;
border: 2px solid var(--primary);
}

.popular-badge {
position: absolute;
top: 0;
right: 0;
background-color: var(--primary);
color: var(--white);
padding: 8px 15px;
font-size: 0.8rem;
font-weight: 600;
border-bottom-left-radius: var(--border-radius);
}

.pricing-header {
background-color: var(--secondary);
color: var(--white);
padding: 30px;
text-align: center;
}

.pricing-header h3 {
color: var(--white);
font-size: 1.8rem;
margin-bottom: 20px;
}

.price {
font-size: 2.5rem;
font-weight: 700;
position: relative;
display: inline-block;
}
.currency {
font-size: 1.5rem;
position: absolute;
top: 0;
left: -15px;
}

.amount.annual {
display: none;
}

.period {
font-size: 1rem;
font-weight: 400;
color: var(--light-gray);
}

.pricing-features {
padding: 30px;
}

.pricing-features ul li {
margin-bottom: 15px;
display: flex;
align-items: center;
}

.pricing-features ul li i {
margin-right: 10px;
font-size: 1rem;
}

.pricing-features ul li i.fa-check {
color: var(--primary);
}

.pricing-features ul li i.fa-times {
color: var(--gray);
}

.pricing-footer {
padding: 0 30px 30px;
text-align: center;
}

/* Contact Section */
.contact {
padding: 100px 0;
background-color: var(--white);
}

.contact-content {
display: flex;
flex-wrap: wrap;
gap: 50px;
}

.contact-info, .contact-form {
flex: 1;
min-width: 300px;
}

.contact-item {
display: flex;
margin-bottom: 30px;
}

.contact-icon {
width: 50px;
height: 50px;
background-color: var(--primary);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
margin-right: 20px;
}

.contact-text h3 {
font-size: 1.2rem;
margin-bottom: 5px;
}

.social-links {
display: flex;
gap: 15px;
margin-top: 30px;
}

.social-links a {
width: 40px;
height: 40px;
background-color: var(--light-gray);
color: var(--dark-gray);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}

.social-links a:hover {
background-color: var(--primary);
color: var(--white);
}

.form-group {
margin-bottom: 20px;
}

.form-group input, .form-group select, .form-group textarea {


width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: var(--border-radius);
font-family: var(--body-font);
font-size: 1rem;
transition: var(--transition);
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {


border-color: var(--primary);
outline: none;
}

.form-group textarea {
height: 150px;
resize: vertical;
}

/* Map */
.map-container {
height: 450px;
width: 100%;
}

/* Footer */
footer {
background-color: var(--secondary);
color: var(--light-gray);
padding: 80px 0 20px;
}

.footer-content {
display: flex;
flex-wrap: wrap;
gap: 40px;
margin-bottom: 50px;
}

.footer-logo, .footer-links, .footer-programs, .footer-newsletter {


flex: 1;
min-width: 200px;
}

.footer-logo img {
height: 60px;
margin-bottom: 20px;
}

.footer-logo p {
color: var(--gray);
}

.footer-links h3, .footer-programs h3, .footer-newsletter h3 {


color: var(--white);
font-size: 1.2rem;
margin-bottom: 20px;
position: relative;
}

.footer-links h3::after, .footer-programs h3::after, .footer-newsletter h3::after {


content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 50px;
height: 2px;
background-color: var(--primary);
}

.footer-links ul li, .footer-programs ul li {


margin-bottom: 10px;
}

.footer-links ul li a, .footer-programs ul li a {
color: var(--gray);
transition: var(--transition);
}

.footer-links ul li a:hover, .footer-programs ul li a:hover {


color: var(--primary);
padding-left: 5px;
}

.footer-newsletter p {
color: var(--gray);
margin-bottom: 20px;
}

.footer-newsletter form {
display: flex;
}

.footer-newsletter input {
flex: 1;
padding: 12px 15px;
border: none;
border-radius: var(--border-radius) 0 0 var(--border-radius);
font-family: var(--body-font);
font-size: 1rem;
}

.footer-newsletter button {
background-color: var(--primary);
color: var(--white);
border: none;
padding: 0 20px;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
cursor: pointer;
transition: var(--transition);
}

.footer-newsletter button:hover {
background-color: var(--primary-dark);
}

.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
flex-wrap: wrap;
gap: 20px;
}

.footer-bottom p {
color: var(--gray);
}

.footer-bottom-links a {
color: var(--gray);
margin-left: 20px;
transition: var(--transition);
}

.footer-bottom-links a:hover {
color: var(--primary);
}

/* Back to Top Button */


.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background-color: var(--primary);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
z-index: 99;
opacity: 0;
visibility: hidden;
transition: var(--transition);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.back-to-top.active {
opacity: 1;
visibility: visible;
}

.back-to-top:hover {
background-color: var(--primary-dark);
color: var(--white);
}

/* Responsive Styles */
@media (max-width: 992px) {
.hero h1 {
font-size: 3rem;
}

.hero h2 {
font-size: 1.8rem;
}
.section-header h2 {
font-size: 2.2rem;
}

.about-content, .contact-content {
flex-direction: column;
}

.pricing-card.featured {
transform: scale(1);
}
}

@media (max-width: 768px) {


.menu-toggle {
display: block;
}

.nav-menu {
position: fixed;
left: -100%;
top: 90px;
flex-direction: column;
background-color: var(--secondary);
width: 100%;
text-align: center;
transition: var(--transition);
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
padding: 20px 0;
}

.nav-menu.active {
left: 0;
}

.nav-menu li {
margin: 15px 0;
}

.hero h1 {
font-size: 2.5rem;
}

.hero h2 {
font-size: 1.5rem;
}

.hero-buttons {
flex-direction: column;
gap: 15px;
}

.section-header h2 {
font-size: 2rem;
}

.schedule-tabs {
flex-wrap: wrap;
}
.schedule-tab {
flex: 1;
min-width: 120px;
text-align: center;
}

.schedule-item {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}

.time, .class, .trainer {


width: 100%;
}

.footer-bottom {
flex-direction: column;
text-align: center;
}

.footer-bottom-links {
margin-top: 10px;
}

.footer-bottom-links a {
margin: 0 10px;
}
}

@media (max-width: 576px) {


.hero h1 {
font-size: 2rem;
}

.hero p {
font-size: 1rem;
}

.section-header h2 {
font-size: 1.8rem;
}

.stats-container {
flex-direction: column;
}

.testimonial-content {
padding: 30px 20px;
}
}

You might also like