rideaware/landing
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

(feat): Added the logo!

Browse source
This commit is contained in:
Blake Ridgway 2025-02-11 21:44:30 -06:00
parent b2754db793
commit 90297a004b
2 changed files with 14 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

38
static/css/styles.css
View file

@ -36,42 +36,24 @@ header nav a {
} }
.hero-section-1 { .hero-section-1 {
background-image: linear-gradient(to bottom, #337cf2, #fff);
padding: 100px 0;/
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0;
overflow: hidden; /* Hide any overflow if the image is larger */
} }
.hero-section-1 .inner-container { .hero-content, .hero-text {
padding: 0 20px;
}
.hero-content {
display: flex;
justify-content: space-between;
align-items: center;
/* padding: 0; */
}
.hero-illustration {
width: 650px;
height: 500px;
background-size: cover;
background-position: center;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.hero-illustration img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; margin: 0;
border-radius: 30px; padding: 0;
} }
.hero-text { .hero-text img {
width: 60%; width: 70%; /* The image will take up 50% of its container's width */
padding: 20px; height: auto; /* Maintain aspect ratio */
display: block; /* Remove inline spacing if needed */
margin: 0 auto; /* Center the image within its container if desired */
} }
.hero-text h1 { .hero-text h1 {

9
templates/index.html
View file

@ -17,17 +17,10 @@
<main> <main>
<section class="hero-section-1"> <section class="hero-section-1">
<div class="hero-content"> <div class="hero-content">
<div class="hero-illustration">
<img src="/static/assets/undraw_indoor-bike_9lxj.svg" alt="Cycling Illustration">
</div>
<div class="hero-text"> <div class="hero-text">
<h1>Train with Focus. Ride with Awareness</h1> <img src="/static/assets/RideAwareLogo.svg" alt="RideAware Logo">
<br>
<p>RideAware is a comprehensive cycling training platform designed to help riders stay aware of their performance, progress, and goals.</p>
</div>
</div> </div>
</section> </section>
<section class="hero-section-2"> <section class="hero-section-2">
<h2>Get notified when we’re launching</h2> <h2>Get notified when we’re launching</h2>
<p>Sign up to receive updates and special offers as we prepare to launch.</p> <p>Sign up to receive updates and special offers as we prepare to launch.</p>