Need help with this project. I am confused what i have to do in this.pdf

Need help with this project. I am confused what i have to do in this project. Here's the instruction
-
As a continuation of Project 3, we are almost through with creating content. This part will focus
on adding image assets to all of your pages of your site. This includes, but is not limited to:
----> The main thing needs to done for this project is A logo or banner has to appears on all
pages near the top, A background image or gradient through out the main and sub page
(remember the usability rules on this!!), Additional images or photos, Other layout image assets,
etc. Content cant be generic
Here are a few things to remember when adding images to your pages, remember the following:
All images on your site must be either .png, .jpg, .jpeg, or .gif. Any other format will NOT work.
If you need to resize a large image to small, do NOT make the height and width smaller using
HTML. Open the file in any image editing software and modify it. Resize it using HTML does
not actually resize it! Do not distort the image by making its new proportions different from the
original. This makes the image appeared skewed and looks extremely unprofessional. Be sure to
set the value for the alt and title attributes in the img tag. All of your images must be located
within a separate folder in the project folder. You may call this whatever you like, but I
recommend img or images. I am not concerned with how many images you have total, just that
you used images throughout your site at a reasonable rate. I am not overly concerned with the
quality of your images. However, you are trying to convey a certain level of professionalism in
this class so be mindful when developing your pages.
Here's the home.html and styles.css to fix it. ---->> So I already have the subpages but how could
i continue the logo and background images in subpages too? Also would you please fix the
styles.css for the subpages too? or Can i use 1 styles.css for the home and other subpages?
Home.html
Website Design
Healthy Living
HomeNutritionFitnessMindfulnessRecipesContactWelcome to Healthy Living
We believe that a healthy lifestyle is the key to happiness and longevity.
Our website provides information on nutrition, physical fitness, and mindfulness practices to
help you live a healthier life.Learn More
Live a healthier life!
Discover the benefits of healthy eating, exercise, and mindfulness.Get Started

Healthy Eating
Learn about the importance of nutrition and how to make healthy choices.Read More
Fitness
Discover the benefits of regular exercise and find a workout routine that works for you.Read
More
Mindfulness
Reduce stress and improve your mental well-being with mindfulness exercises.Read More
Styles.css
body {
background-image: url("image/background.jpg");
background-repeat: no-repeat;
font-family: Arial, sans-serif;
background-size: cover;
font-size: 16px;
height: 100%;
margin: 0;
padding: 0
}
/* Header styles */
header {
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
z-index: 1;
}
.main {
max-width: 1200px;

margin: 0 auto;
padding: 10px;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
width: 1000px;
height: 75px;
margin: auto;
}
.icon{
width: 200px;
float: left;
height: 70px;
}
.logo{
color: rgb(138, 55, 215);
font-size: 20px;
font-family: Arial;
}
.icon img {
vertical-align:middle;
}
h2 {
display: inline-block;
margin: 0 0 0 10px;
}
.menu {
background-color: #f2f2f2;
padding: 10px;
}

nav ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
justify-content: center;
}
nav li {
margin-left: 62px;
margin-top: 27px;
font-size: 14px;
}
nav a {
text-decoration: none;
color: #333;
font-size: Arial;
font-weight: bold;
}
/* Footer styles */
footer {
padding: 20px;
}
/* Section styles */
section {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.intro {
height: auto;
margin: auto;
color: white;
position: relative;
text-align: center;
}
.intro .pra{
padding: 20px;
font-family: Arial;
letter-spacing: 1.2px;
line-height: normal;
}
.intro h2{
font-family: 'Times New Roman';
font-size: 20px;
padding: auto;
margin: auto;
letter-spacing: normal;
}
/* Hero Section */
.hero {
background-image: url("image/background.jpg");
background-size: cover;
height: 90px;
display: flex;
align-items: center;
justify-content: center;
}
.hero-text {
text-align: center;
color: #100116;
font-size: 20px;

}
.hero h2{
font-size: 30px;
margin-bottom: 6px;
}
/* Featured Section */
.featured {
background-color: #687794;
padding: 60px 0;
}
.featured-item {
text-align: center;
}
.featured-item img {
max-width: 100%;
}
.featured-item h3 {
font-size: 36px;
margin-top: 40px;
}
.featured-item p {
font-size: 24px;
line-height: 1.5;
margin-top: 20px;
}
/* Nutrition Page */
.nutrition h2 {

font-size: 48px;
margin-top: 80px;
text-align: center;
}
.nutrition p {
font-size: 24px;
line-height: 1.5;
margin: 40px 0;
max-width: 800px;
text-align: center;
}
.nutrition ul {
font-size: 24px;}
/* Button styles */
.btn {
background-color: #fff;
border: 2px solid #fff;
border-radius: 30px;
color: #333;
display: inline-block;
font-size: 18px;
font-weight: bold;
margin-top: 30px;
padding: 15px 30px;
text-align: center;
text-transform: uppercase;
transition: background-color 0.3s ease;
}
.btn:hover {
}

.cta {
background-color: #ff5722;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
}
.cta:hover {
background-color: #e64a19;}
Thanks in Advance.

Need help with this project. I am confused what i have to do in this.pdf

More Related Content

Similar to Need help with this project. I am confused what i have to do in this.pdf (20)

More from amazonedistributors (20)

Recently uploaded (20)

Need help with this project. I am confused what i have to do in this.pdf