Skip to content

Commit

Permalink
Our Package section completed and relevant texts are added.
Browse files Browse the repository at this point in the history
  • Loading branch information
Abdulla Al Muhit committed Aug 3, 2024
1 parent fbcf999 commit dfe6f05
Show file tree
Hide file tree
Showing 3 changed files with 186 additions and 24 deletions.
74 changes: 52 additions & 22 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@
<h1 class="nav-heading">Fitness</h1>
<div class="nav-listing-container">
<ul class="nav-listing">
<li><button id="nav-listing-home"><a href="">Home</a></button></li>
<li><a href="">Service</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
<li><button id="nav-listing-home"><a href="index.html">Home</a></button></li>
<li><a href="index.html#our-package">Service</a></li>
<li><a href="contacts.html">Contact</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
<div class="hamburger-menu">
Expand All @@ -41,7 +41,9 @@ <h1 class="banner-heading">Get body in <span class="miama-heading">shape</span>
</div>
</div>
<div class="banner-image-container">
<img src="assets/banner_image.png" alt="">
<div class="banner-image">
<img src="assets/banner_image.png" alt="">
</div>
<div class="banner-image-tutorial-box display-flex">
<div class="tutorial-round-ball"></div>
<div>
Expand All @@ -66,36 +68,36 @@ <h2 class="workout-box-number">500+</h2>
<div class="change-habit-container display-flex">
<div class="change-habit-headings display-flex">
<h1 class="section-heading text-align-center">Change Your Habits</h1>
<p class="section-description text-align-center">We believe fitness should be accessible to everyone, everywhere, regardless of income or access to a gym.</p>
<p class="section-description text-align-center">Transform your life by developing healthier habits with expert guidance and support at our Gym.</p>
</div>
<div class="habit-cards-container">
<div class="habit-cards display-flex">
<div class="habit-image-container">
<img src="assets/habit1.png" alt="Movement">
</div>
<h3 class="habit-title">Movement</h3>
<p class="habit-description">We believe fitness should be accessible to everyone</p>
<p class="habit-description">Enhance your fitness through effective movement routines.</p>
</div>
<div class="habit-cards display-flex">
<div class="habit-image-container">
<img src="assets/habit2.png" alt="Time">
</div>
<h3 class="habit-title">Time</h3>
<p class="habit-description">We believe fitness should be accessible to everyone</p>
<p class="habit-description">Maximize your workout time with efficient and focused routines.</p>
</div>
<div class="habit-cards display-flex">
<div class="habit-image-container">
<img src="assets/habit3.png" alt="Practice">
</div>
<h3 class="habit-title">Practice</h3>
<p class="habit-description">We believe fitness should be accessible to everyone</p>
<p class="habit-description">Consistently practice to perfect your form and achieve your goals.</p>
</div>
<div class="habit-cards display-flex">
<div class="habit-image-container">
<img src="assets/habit4.png" alt="Weight Loss">
</div>
<h3 class="habit-title">Weight Loss</h3>
<p class="habit-description">We believe fitness should be accessible to everyone</p>
<p class="habit-description">Achieve weight loss with tailored workouts and nutrition guidance.</p>
</div>
</div>
</div>
Expand All @@ -117,11 +119,39 @@ <h1 class="extra-mile-heading">Run an Extra Mile Easily</h1>
</section>
<!-- extra mile section ends -->

<!-- our package section starts -->
<section id="our-package" class="section-container bg-main">
<div class="our-package-section display-flex">
<h1 class="section-heading text-align-center">Our Packages</h1>
<div class="package-container">
<div class="package-box display-flex">
<h3 class="package-name">Basic</h3>
<h1 class="package-price">$20</h1>
<p class="package-duration">/month</p>
<button>Learn More</button>
</div>
<div id="premium-yearly-box" class="display-flex">
<h3 class="package-name">Premium</h3>
<h1 class="package-price">$360</h1>
<p class="package-duration">/year</p>
<button>Learn More</button>
</div>
<div class="package-box display-flex">
<h3 class="package-name">Premium</h3>
<h1 class="package-price">$35</h1>
<p class="package-duration">/month</p>
<button>Learn More</button>
</div>
</div>
</div>
</section>
<!-- our package section ends -->

<!-- calculate bmi section starts -->
<section class="section-container bg-main">
<div class="bmi-section-headings display-flex">
<h1 class="section-heading text-align-left">BMI Calculator</h1>
<p class="section-description text-align-left">We believe fitness should be accessible to everyone, everywhere, regardless of income or access to a gym.</p>
<p class="section-description text-align-left">Use our BMI Calculator and chart to track your body mass index and monitor your fitness progress effectively.</p>
</div>
<div class="calculate-bmi-section">
<div class="calculate-bmi-container display-flex">
Expand Down Expand Up @@ -156,7 +186,7 @@ <h2 class="calculate-bmi-heading text-align-left">BMI Calculator Chart</h2>
</div>
<div class="calculate-bmi-form">
<h2 class="calculate-bmi-heading text-align-left">Calculate your BMI</h2>
<p class="calculate-bmi-description text-align-left">We believe fitness should be accessible to everyone, everywhere, regardless of income or access to a gym. </p>
<p class="calculate-bmi-description text-align-left">Calculate your BMI quickly with our tool to assess your weight status and track your fitness journey.</p>
<div class="calculate-bmi-form-options display-flex">
<input type="number" name="" id="Height" placeholder="Height/cm">
<input type="number" name="" id="Weight" placeholder="Weight/kg">
Expand Down Expand Up @@ -190,7 +220,7 @@ <h2 class="calculate-bmi-heading text-align-left">Calculate your BMI</h2>
<div class="team-section-container display-flex">
<div class="team-section-headings display-flex">
<h1 class="section-heading text-align-center">Meet Our Team</h1>
<p class="section-description text-align-center">We believe fitness should be accessible to everyone, everywhere, regardless of income or access to a gym.</p>
<p class="section-description text-align-center">Get to know our dedicated team of fitness experts committed to helping you achieve your health and wellness goals.</p>
</div>
<div class="team-members-grid">
<div class="team-members">
Expand Down Expand Up @@ -252,22 +282,22 @@ <h3 class="team-members-name">Theresa Webb</h3>
<div class="footer-container display-flex">
<div class="footer-headings display-flex">
<h1 class="footer-title">Fitness</h1>
<p class="footer-description">We believe fitness should be accessible to everyone, everywhere, regardless of income or access to a gym. With hundreds of professional workouts.</p>
<p class="footer-description">Our Address: 456 Wellness Drive, Suite 789, Fitness Park, Active Town, CA 98765, United States, Building 4, Floor 2</p>
</div>
<div class="get-started-container display-flex">
<div class="get-started-section display-flex">
<h2 class="get-started-title">Get Started</h2>
<a href="">Service</a>
<a href="">Contact Us</a>
<a href="">Affiliate Program</a>
<a href="">About Us</a>
<a href="index.html#our-package">Service</a>
<a href="contacts.html">Contact Us</a>
<a href="programs.html">Affiliate Program</a>
<a href="about.html">About Us</a>
</div>
<div class="get-started-section display-flex">
<h2 class="get-started-title">Get Started</h2>
<a href="">Fitness</a>
<a href="">Platform</a>
<a href="">Workout Libary</a>
<a href="">App Design</a>
<a href="index.html">Fitness</a>
<a href="platform.html">Platform</a>
<a href="library.html">Workout Libary</a>
<a href="app.html">App Design</a>
</div>
</div>
</div>
Expand Down
20 changes: 19 additions & 1 deletion styles/responsive.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
width: 100%;
}

.banner-image-container img{
.banner-image img{
width: 100%;
}

Expand Down Expand Up @@ -184,6 +184,24 @@
}
/* extra mile section responsive ends */

/* our package section responsive starts */
.our-package-section{
max-width: 90vw;
margin: 35px auto 0;
gap: 35px;
margin-bottom: 20px;
}

.package-container{
grid-template-columns: repeat(1, 1fr);
gap: 30px;
}

.package-box{
width: 90%;
margin: 0 auto;
}

/* calculate bmi section responsive starts */
.bmi-section-headings{
max-width: 90vw;
Expand Down
116 changes: 115 additions & 1 deletion styles/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,10 +199,14 @@
}

.banner-image-container{
width: 35%;
position: relative;
}

.banner-image{
width: 100%;
height: 100%;
}

.banner-image img{
height: 100%;
}
Expand Down Expand Up @@ -380,6 +384,116 @@
}
/* extra mile section styling ends */

/* our package section styling starts */
.our-package-section{
max-width: 73.61vw;
margin: 0 auto;
flex-direction: column;
align-items: center;
gap: 78px;
}

.package-container{
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
gap: 12px;
}

.package-box{
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 300px;
background-color: rgba(255, 255, 255, 0.9);
}

.package-name{
color: rgba(255, 255, 255, 0.9);
font-size: 1rem;
font-weight: 600;
text-align: center;
padding: 5px;
background-color: black;
}

.package-price{
color: black;
font-size: 2.5rem;
font-weight: 800;
text-align: center;
margin-bottom: 0;
}

.package-duration{
color: black;
font-size: 1rem;
font-weight: 400;
text-align: center;
margin-bottom: 20px;
}

.package-box button{
background-color: transparent;
width: 120px;
padding: 16px 0;
color: black;
font-size: 1.125rem;
font-weight: 600;
text-align: center;
border: 1px solid black;
border-radius: 42px;
}

#premium-yearly-box{
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 350px;
background-color: rgb(230, 83, 60);
}

#premium-yearly-box .package-name{
color: black;
font-size: 1.25rem;
font-weight: 600;
text-align: center;
padding: 5px;
background-color: rgba(255, 255, 255, 0.9);
}

#premium-yearly-box .package-price{
color: rgba(255, 255, 255, 0.9);
font-size: 3rem;
font-weight: 800;
text-align: center;
margin-bottom: 0;
}

#premium-yearly-box .package-duration{
color: rgba(255, 255, 255, 0.9);
font-size: 1.25rem;
font-weight: 400;
text-align: center;
margin-bottom: 25px;
}

#premium-yearly-box button{
background-color: transparent;
width: 140px;
padding: 16px 0;
color: rgba(255, 255, 255, 0.9);
font-size: 1.125rem;
font-weight: 600;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 42px;
}
/* our package section styling ends */

/* calculate bmi section styling starts */
.bmi-section-headings{
max-width: 45.5vw;
Expand Down

0 comments on commit dfe6f05

Please sign in to comment.