Skip to content

Commit

Permalink
Completed Success Stories Section
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rushberry
Rushberry committed Aug 14, 2024
1 parent e010296 commit c67585a
Show file tree
Hide file tree
Showing 5 changed files with 163 additions and 17 deletions.
Binary file added assets/teller1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/teller2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/teller3.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
55 changes: 39 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<!-- <header>
<nav>
<div class="nav-logo">
<h1>Fitness</h1>
<a href="#" target="_blank" style="text-decoration: none;"><h1>Fitness</h1></a>
</div>
<div class="nav-options">
<ul>
Expand Down Expand Up @@ -191,46 +191,69 @@ <h3>Theresa Webb</h3>
</div>
</div>
</section>
<!-- <section id="success_stories">
<section id="success_stories">
<div class="success_stories">
<div class="success-heading">
<h1>Success Stories</h1>
<p>Get inspired by the journeys of our community members who have transformed their lives through dedication, hard work, and our tailored fitness programs.</p>
<p>Get inspired by our community members who transformed their lives through dedication and our fitness programs.</p>
</div>
<div class="stories">
<div class="success_tellers">
<div class="success_tellers" id="teller1">
<div>
<h2>"I never imagined I could run a 7K, but with the support and guidance from the Fitness team, I went from being a couch potato to a runner in just three months. The step-by-step program was easy to follow, and the community support kept me motivated throughout my journey "</h2>
<div class="teller">
<h3>John Doe</h3>
<p>From Couch to 7K</p>
</div>
</div>
</div>
<div class="success_tellers" id="teller2">
<div>
<h2>"Before joining Fitness, I was always intimidated by the idea of working out. But the trainers here helped me gain confidence and strength. I've lost 15kg and gained a whole new outlook on life. Now, I can't imagine my routine without my daily workouts "</h2>
<div class="teller">
<h3>Donal Smith</h3>
<p>Strength and Confidence</p>
</div>
</div>
</div>
<div class="success_tellers" id="teller3">
<div>
<h2>"After suffering from health issues for years, I knew I needed to make a change. The customized workout plans and nutritional advice provided by Fitness were life-changing. I've lost 20kg, my blood pressure is down, and I feel better "</h2>
<div class="teller">
<h3>Mark Johnson</h3>
<p>A New Lease on Life</p>
</div>
</div>
</div>
</div>
</div>
</section> -->
</section>
</main>
<footer>
<div class="footer">
<div>
<h1 class="tittle">Fitness</h1>
<a href="#" target="_blank" style="text-decoration: none;"><h1 class="tittle">Fitness</h1></a>
<p>We believe fitness should be accessible to everyone, everywhere, regardless of income or access to a gym. With hundreds of professional workouts.</p>
</div>
<div class="start">
<h2>Get Started</h2>
<ul>
<li>
<a href="">
<a href="#Service">
<p>Service</p>
</a>
</li>
<li>
<a href="">
<a href="https://www.dhalifitnesscenter.com/contact-us/" target="_blank">
<p>Contact Us</p>
</a>
</li>
<li>
<a href="">
<a href="https://backlinko.com/fitness-affiliate-programs" target="_blank">
<p>Affiliate Program</p>
</a>
</li>
<li>
<a href="">
<a href="#About">
<p class="last-p">About Us</p>
</a>
</li>
Expand All @@ -240,22 +263,22 @@ <h2>Get Started</h2>
<h2>Get Started</h2>
<ul>
<li>
<a href="">
<a href="#">
<p>Fitness</p>
</a>
</li>
<li>
<a href="">
<a href="https://www.jrny.com/" target="_blank">
<p>Platform</p>
</a>
</li>
<li>
<a href="">
<a href="https://www.acefitness.org/resources/everyone/exercise-library/" target="_blank">
<p>Workout Library</p>
</a>
</li>
<li>
<a href="">
<a href="https://play.google.com/store/apps/details?id=homeworkout.homeworkouts.noequipment&hl=en" target="_blank">
<p class="last-p">App Design</p>
</a>
</li>
Expand Down
125 changes: 124 additions & 1 deletion style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -343,6 +343,7 @@ option{
color: rgba(255, 255, 255, 0.6);
background-color: black;
margin-top: 10px;
font-size: 16px;
}

select:hover{
Expand Down Expand Up @@ -388,7 +389,7 @@ select:hover{
}

.about {
padding: 88px 190px;
padding: 88px 0px;
display: flex;
justify-content: center;
align-items: center;
Expand Down Expand Up @@ -476,6 +477,110 @@ select:hover{
justify-content: start;
margin-top: 20px;
}
/* Success Stories Starts Here */

#success_stories {
background-color:rgb(0, 0, 0);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

#success_stories{
background-color:rgb(0, 0, 0);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

#success_stories p{
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
font-weight: 400;
}

.success_stories{
margin-bottom: 88px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.success-heading{
text-align: center;
width: 620px;
margin-bottom: 58px;
}

.success-heading>p{
line-height: 24px;
}

.success-heading>h1{
color: white;
margin-bottom: 14px;
font-size: 48px;
font-weight: 900;
}

.stories{
width: 1020px;
background-color: rgb(34, 34, 34);
padding: 20px;
border-radius: 18px;
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
justify-content: center;
}

.success_stories h3{
color: white;
}

.success_stories h2{
color: white;
font-weight: 400;
font-family: miama;
font-size: 22px;
margin-top: 20%;
}

.success_tellers{
width: 326.67px;
height: 370px;
border-radius: 18px;

}

.success_tellers>div{
margin: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 335px;

}

#teller1{
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(assets/teller1.jpg);
background-size: cover;
background-position: center;
}
#teller2{
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(assets/teller2.jpg);
background-size: cover;
background-position: center;
}
#teller3{
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(assets/teller3.jpg);
background-size: cover;
background-position: center;
}

/* Footer Starts Here */

Expand Down Expand Up @@ -666,6 +771,9 @@ footer p {
#age{
width: 150.5px;
}
.bmi-heading>p{
width: 346px;
}

/* Responsive ~ About Section Starts Here */
.about{
Expand Down Expand Up @@ -703,6 +811,21 @@ footer p {
.t1{
display: none;
}
/* Responsive ~ Success Stories Starts Here */

.stories{
width: 326px;
flex-direction: column;
}

.success-heading>h1{
font-size: 32px;
}

.success-heading{
width: 309px;
}

/* Responsive ~ Footer Starts Here */

footer{
Expand Down

0 comments on commit c67585a

Please sign in to comment.