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

(refactor): verified viewport, added more responsive css

Browse source
This commit is contained in:
Blake Ridgway 2025-02-11 20:41:49 -06:00
parent 102da893a7
commit a9c7bfe21c
2 changed files with 203 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

119
static/css/styles.css
View file

@ -1,3 +1,12 @@
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
margin: 0; margin: 0;
@ -28,18 +37,24 @@ header nav a {
.hero-section-1 { .hero-section-1 {
background-image: linear-gradient(to bottom, #337cf2, #fff); background-image: linear-gradient(to bottom, #337cf2, #fff);
padding: 100px 20px; padding: 100px 0;/
width: 100%; width: 100%;
margin: 0;
}
.hero-section-1 .inner-container {
padding: 0 20px;
} }
.hero-content { .hero-content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
/* padding: 0; */
} }
.hero-illustration { .hero-illustration {
width: 40%; width: 650px;
height: 500px; height: 500px;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@ -74,14 +89,27 @@ header nav a {
.hero-section-2 { .hero-section-2 {
background-color: #337cf2; background-color: #337cf2;
padding: 100px; padding: 100px 0;
text-align: center; text-align: center;
width: 100%; width: 100%;
margin: 0;
} }
.hero-section-2 .inner-container {
padding: 0 20px;
}
.hero-sec2-header {
padding-top: 2.5%;
font-size: 40px;
}
.hero-section-2 form { .hero-section-2 form {
padding: 10px; padding: 10px;
font-size: 1rem; font-size: 1rem;
width: calc(100% - 110px); width: calc(100% - 50px);
max-width: 600px;
margin: 0 auto;
} }
.hero-section-2 input { .hero-section-2 input {
@ -126,6 +154,8 @@ header nav a {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
word-wrap: break-word;
overflow-wrap: break-word;
} }
.feature-card h3 { .feature-card h3 {
@ -157,18 +187,87 @@ header nav a {
} }
main { main {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
width: 100%; width: 100%;
margin: 0 auto; margin: 0;
padding: 0;
display: block;
} }
main .inner-container {
padding: 10px 20px;
}
footer { footer {
background-color: #333; background-color: #337cf2;
color: #fff; color: #fff;
padding: 10px; padding: 10px;
text-align: center; text-align: center;
clear: both; clear: both;
} }
img {
max-width: 100%;
height: auto;
}
@media (max-width: 768px) {
.hero-content {
flex-direction: column;
padding: 0;
}
.hero-text {
width: 100%;
padding: 10px;
}
.hero-illustration {
width: 100%;
height: auto;
}
.hero-section-2 input {
width: 80%;
}
.feature-card {
width: 90%;
}
.hero-text h1 {
font-size: 2.5em;
}
.hero-section-2 {
padding: 50px 0;
}
.hero-sec2-header {
font-size: 32px;
}
.hero-section-2 form {
width: calc(100% - 40px);
padding: 10px;
}
}
@media (max-width: 480px) {
.hero-text h1 {
font-size: 2em;
}
.hero-section-2 input {
width: 90%;
}
.feature-card {
width: 100%;
margin: 10px 0;
}
.hero-section-1 {
padding: 50px 0;
}
}

4
templates/index.html
View file

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RideAware</title> <title>RideAware</title>
<link rel="stylesheet" href="/static/css/styles.css"> <link rel="stylesheet" href="/static/css/styles.css">
</head> </head>
@ -40,7 +40,7 @@
</section> </section>
<section class="hero-section-3"> <section class="hero-section-3">
<h2>Features</h2> <h2 class="hero-sec2-header">Features</h2>
<div class="feature-cards"> <div class="feature-cards">
<div class="feature-card"> <div class="feature-card">
<h3>Workout Planning</h3> <h3>Workout Planning</h3>