Skip to content

Commit

Permalink
Add circular image to reasons section
Browse files Browse the repository at this point in the history
  • Loading branch information
@stef-von-d
stef-von-d committed Mar 7, 2024
1 parent e77e8e9 commit 1e8266a
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 27 deletions.
21 changes: 20 additions & 1 deletion assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ cover-text>h3 {
margin-bottom: 20px;
}

#benefits p{
#benefits p {
padding: 0 20px;
}

Expand All @@ -144,6 +144,25 @@ cover-text>h3 {
margin: 5px 0;
}

#circle-cover-bg {
background: url('../images/runner.webp') no-repeat top center/ cover;
height: 90vw;
width: 90vw;

/* Makes the square image into a circle */
margin-bottom: 20px;
border-radius: 50%;
max-width: 300px;
max-height: 300px;
}

#benefits-image {
display: flex;
align-items: center;
justify-content: center;
}


/* Footer */
#social-networks {
text-align: center;
Expand Down
Binary file added assets/images/runner.webp
View file
Binary file not shown.
57 changes: 31 additions & 26 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,41 +48,46 @@ <h1 id="logo">Love Running</h1>
<h2>Love Running</h2>
<h3>Dublin Docklands Phoenix Park</h3>
</div>
<section id="reasons">
<h2>Why love running with us?</h2>
<div id="benefits">
<div id="benefits-physical">
</section>

<section id="reasons">
<h2>Why love running with us?</h2>
<div id="benefits">
<div id="benefits-physical">
<div>
<h3>Feel healthy <i class="fa-solid fa-heart-pulse"></i></h3>
<hr>
<p>Since it improves aerobic fitness, running is a great way to help improve your
cardiovascular health. Plus, it burns calories and can build strenght</p>
</div>
<div>
<h3>Feel strong <i class="fa-solid fa-dumbbell"></i> </h3>
<hr>
<p>Running strengthens your heart by pumping blood more effectively through your body</p>
</div>
<div id="benefits-mental">
<div>
<h3>Feel healthy <i class="fa-solid fa-heart-pulse"></i></h3>
<h3>Feel free <i class="fa-brands fa-fly"></i> </h3>
<hr>
<p>Since it improves aerobic fitness, running is a great way to help improve your
cardiovascular health. Plus, it burns calories and can build strenght</p>
<p>Physical exercise, running included, is known to release endorphins in the brain.
Endorphins make you more energetic, more awake and, yes, happier</p>
</div>
<div>
<h3>Feel strong <i class="fa-solid fa-dumbbell"></i> </h3>
<h3>Get social <i class="fa-solid fa-globe"></i></h3>
<hr>
<p>Running strengthens your heart by pumping blood more effectively through your body</p>
<p>When we run with others, we can run further and faster more easily. Social running
can pull you out of a running funk or low mood, and inspire you to try new events.
</p>
</div>
<div id="benefits-mental">
<div>
<h3>Feel free <i class="fa-brands fa-fly"></i> </h3>
<hr>
<p>Physical exercise, running included, is known to release endorphins in the brain.
Endorphins make you more energetic, more awake and, yes, happier</p>
</div>
<div>
<h3>Get social <i class="fa-solid fa-globe"></i></h3>
<hr>
<p>When we run with others, we can run further and faster more easily. Social running
can pull you out of a running funk or low mood, and inspire you to try new events.
</p>
</div>
</div>

</div>
<div id="benefits-image"></div>
<div id="circle-cover-bg"></div>


</div>
</section>
</div>

</section>
</main>

<!--Footer-->
Expand Down

0 comments on commit 1e8266a

Please sign in to comment.