@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');
body {
font-family: Arial, sans-serif;
margin: 0;
background-color: #EB7769;
}
.heading-bar {
background-color: red;
color: black;
text-align: center;
padding: 10px;
}
.navigation-bar {
background-color: white;
padding: 10px;
text-align: center;
display: inline;
flex-direction: row;
}
.navigation-bar ul {
list-style-type: none;
margin: 0;
padding: 10px;
display: flex;
flex-direction: row;
}
.navigation-bar li {
display: inline;
margin-right: 10px;
}
.navigation-bar a {
text-decoration: none;
color: black;
font-weight: bold;
}
.image-section img {
width: 25%;
height: auto;
display: block;
margin: 0 auto;
padding: 20px 20px;
}
.goals-section {
margin: 20px;
}
.testimonies-section {
display: flex;
justify-content: space-around;
margin: 20px;
}
.testimonial {
width: 30%;
border: 1px solid #ddd;
padding: 10px;
margin: 5px;
}
/* ... (About Us Page CSS ... */
.about-us-section {
background-color: #f9f9f9;
padding: 20px;
}
.about-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.about-narrative {
width: 60%;
}
.about-photo img {
width: 100%;
height: auto;
align-items: right;
}
/* ... (motivation page) ... */
.motivation-section {
background-color: #f9f9f9;
padding: 20px;
}
.motivation-content-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.motivation-box {
width: 48%;
background-color: #ddd;
padding: 10px;
margin-bottom: 20px;
}
.motivation-summary {
width: 100%;
background-color: #eee;
padding: 20px;
margin-top: 20px;
padding-bottom: 20px;
}
.motivation-small-box {
width: 48%;
background-color: #ddd;
padding: 20px;
margin-bottom: 20px;
align-content: center;
}
.motivation-image-box {
width: 48%;
margin-left: 4%;
padding-top:20px;
}
.motivation-image-box img {
width: 100%;
height: auto;
}
/* ... (Workout Page CSS) ... */
.workouts-section {
background-color: #f9f9f9;
padding: 20px;
}
.workout-box-container {
display: flex;
justify-content: space-around;
}
.workout-box {
width: 30%;
background-color: #ddd;
padding: 20px;
margin-bottom: 20px;
}
/* ... (Meal Plans Page) ... */
.meal-plans-section {
background-color: #f9f9f9;
padding: 20px;
}
.meal-plan-box-container {
display: flex;
flex-direction: column;
}
.meal-plan-box {
background-color: #ddd;
padding: 20px;
margin-bottom: 20px;
}
/* ... (Sign Up Page CSS) ... */
.sign-up-section {
background-color: #f9f9f9;
padding: 20px;
}
.sign-up-narrative {
margin-bottom: 20px;
}
.disclaimer-box {
background-color: #ddd;
padding: 10px;
margin-bottom: 20px;
}
.sign-up-form {
display: flex;
flex-direction: column;
}
.sign-up-form label {
margin-bottom: 5px;
}
.opt-in-checkbox {
margin-bottom: 10px;
}
.welcome-section {
text-align: center;
padding: 100px 20px;
}
.welcome-content {
max-width: 600px;
margin: 0 auto;
}
.welcome-content h1 {
font-size: 3em;
margin-bottom: 20px;
}
.welcome-content p {
font-size: 1.2em;
margin-bottom: 20px;
}
.welcome-content a {
display: inline-block;
padding: 10px 20px;
background-color: #ff3f3f;
color: #fff;
text-decoration: none;
font-size: 1.2em;
border-radius: 5px;
transition: background-color 0.3s ease-in-out;
}
.welcome-content a:hover {
background-color: #e60000;
}
/* ... (footer) ... */
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 10px;
position: fixed;
bottom: 0;
width: 100%;
}