Skip to content

Commit

Permalink
Completed Home Section & fixed nav
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rushberry
Rushberry committed Aug 15, 2024
1 parent 672de9b commit 413227b
Show file tree
Hide file tree
Showing 2 changed files with 161 additions and 22 deletions.
37 changes: 28 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,26 @@ <h1>Get body in <span class="shape">shape</span> & stay healthy</h1>
<button class="btn2 btn">
<a href="https://play.google.com/store/apps/details?id=homeworkout.homeworkouts.noequipment&hl=en" target="_blank">Download App</a>
</button>

</div>
</div>
<div class="img_text">
<img src="assets/Images 2.png" alt="A man doing gym">
<div id="box-1">
<div>
<h1>500+</h1>
<p>Free Workout Videos</p>
</div>
</div>
<div id="box-2">
<div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="#ffffff" d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80L0 432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>
</div>
<div>
<h1>350+</h1>
<p>Video tutorial</p>
</div>
</div>
</div>
</div>
</div>
Expand All @@ -47,28 +66,28 @@ <h1>Get body in <span class="shape">shape</span> & stay healthy</h1>
<div class="service">
<div class="service-heading">
<h1>Change Your Habits</h1>
<p>We believe fitness should be accessible to everyone, everywhere, regardless of income or access to a gym.</p>
<p>Start your journey today. Fitness is for everyone, regardless of where you are or what resources you have.</p>
</div>
<div class="service-container">
<div>
<img src="assets/image 3.png" alt="Movement">
<h3>Movement</h3>
<p>We believe fitness should be accessible to everyone</p>
<p>Boost your energy with dynamic movement routines</p>
</div>
<div>
<img src="assets/image 2.png" alt="Time">
<h3>Time</h3>
<p>We believe fitness should be accessible to everyone</p>
<p>Make every minute count with efficient workouts</p>
</div>
<div>
<img src="assets/image 4.png" alt="Practice">
<h3>Practice</h3>
<p>We believe fitness should be accessible to everyone</p>
<p>Strengthen your core with disciplined practice</p>
</div>
<div>
<img src="assets/image 5.png" alt="Weight Loss">
<h3>Weight Loss</h3>
<p>We believe fitness should be accessible to everyone</p>
<p>Shed pounds effectively with expert guidance</p>
</div>
</div>
</div>
Expand All @@ -86,7 +105,7 @@ <h1>Run an Extra
<div class="bmi-text">
<div class="bmi-heading">
<h1>BMI Calculator</h1>
<p>We believe fitness should be accessible to everyone, everywhere, regardless of income or access to a gym.</p>
<p>Your fitness journey begins with understanding your body. Our calculator is here to help everyone, everywhere, regardless of background.</p>
</div>
</div>
<div class="bmi-calculator">
Expand Down Expand Up @@ -121,7 +140,7 @@ <h3>BMI Calculator Chart</h3>
</div>
<div class="calculator">
<h3>Calculate your BMI</h3>
<p>We believe fitness should be accessible to everyone, everywhere, regardless of income or access to a gym.</p>
<p>Easily calculate your body mass index, track changes over time, and keep your overall health in check with our intuitive tool.</p>
<form>
<div>
<input type="text" placeholder="Height/cm">
Expand Down Expand Up @@ -153,7 +172,7 @@ <h3>Calculate your BMI</h3>
<div class="about">
<div class="about-heading">
<h1>Meet Our Team</h1>
<p>We believe fitness should be accessible to everyone, everywhere, regardless of income or access to a gym.</p>
<p>We are dedicated to making fitness accessible to everyone, no matter where they are or their financial situation.</p>
</div>
<div class="team">
<div class="trainer">
Expand Down
146 changes: 133 additions & 13 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
padding: 0;
}

p{
letter-spacing: 0.5px;
}

/* Header Section Starts Here */

header{
Expand All @@ -16,9 +20,10 @@ header{

nav{
display: flex;
justify-content: space-between;
justify-content: center;
align-items: center;
margin: 0px 190px;
margin: 0px 0px;
gap: 463px;
flex-direction: row;
}

Expand Down Expand Up @@ -76,11 +81,6 @@ nav a:hover, li:first-child a{
justify-content: center;
}

.home{
display: flex;
flex-direction: row;
gap: 167px;
}

.btns{
display: flex;
Expand Down Expand Up @@ -110,11 +110,6 @@ nav a:hover, li:first-child a{
border: 1px solid white;
}

.head{
width: 520px;
margin-top: 65px;
margin-bottom: 60px;
}

.head h1 {
font-size: 78px;
Expand All @@ -140,6 +135,130 @@ nav a:hover, li:first-child a{
font-family: 'miama';
font-size: 150px;
}

.img_text{
position: relative;
}

.head{
width: 520px;
margin-top: 65px;
margin-bottom: 60px;
}

.img_text img{
width: 349px;
height: 580px;
margin-bottom: -6px;
}

.home{
display: flex;
flex-direction: row;
gap: 257px;
margin-left: -73px;
justify-content: center;
}

#box-1, #box-2{
position: absolute;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
backdrop-filter: blur(20px);
background: rgba(255, 255, 255, 0.1);
}

.img_text div p{
color: rgba(239, 237, 232, 0.65);
font-weight: 400;
}

#box-1{
width: 193px;
height: 98px;
display: flex;
flex-direction: column;
gap: 5px;
justify-content: left;
align-items: left;
left: 230px;
top: 125px;
}

#box-1 p{
font-size: 13px;
}

#box-1 h1{
font-size: 40px;
font-weight: 900;
letter-spacing: 1px;
color: white;
}

#box-1 > div{
margin-top: 17px;
margin-left: 24px;
margin-bottom: 16px;
}


#box-2{
width: 206px;
height: 96px;
display: flex;
flex-direction: row;
justify-content: left;
align-items: left;
top: 421px;
right: 256px;
}

#box-2> div{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 20px;
margin-left: 23px;
margin-bottom: 20px;
}

#box-2 h1{
color: white;
font-size: 24px;
font-weight: 900;
letter-spacing: 0.3px;
}

#box-2 > div div:first-child{
width: 40px;
height: 40px;
background: rgb(230, 83, 60);
border-radius: 50%;
border: none;
display: flex;
justify-content: center;
align-items: center;
}

#box-2 > div div:last-child{
display: flex;
flex-direction: column;
gap: 8px;
}

#box-2 svg{
width: 15.12px;
height: 15.12px;
}

#box-2 p{
font-size: 16px;
}

/* Service Section Starts Here */

#Service{
Expand Down Expand Up @@ -761,8 +880,9 @@ footer p {
}

nav{
margin: 0px 20px;
gap: 197px;
}

.nav-options{
display: none;
}
Expand Down

0 comments on commit 413227b

Please sign in to comment.