Hey so i wanna make my website look my cooler and less plain but i dont know how can you tae a look at my website that i have so far: this is the home page by the way so only implement stuff fo the homepage: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Fitness</title> <style> h2 { color: blue; } p { font-size: 18px; } header { background-color: #f9f9f9; padding: 20px; text-align: center; } h1 { color: #333; font-size: 24px; margin: 0; } nav { background-color: #333; color: #fff; padding: 10px; } ul { list-style-type: none; padding: 0; margin: 0; } li { display: inline; margin-right: 10px; } li a { color: #fff; text-decoration: none; } li a:hover { text-decoration: underline; } .hidden { display: none; } </style> <script> function showSection(sectionId) { var sections = document.getElementsByClassName('section'); for (var i = 0; i < sections.length; i++) { sections[i].classList.add('hidden'); } document.getElementById(sectionId).classList.remove('hidden'); } </script> </head> <body> <header> <h1>Welcome to Fitness</h1> </header> <nav> <ul> <li><a href="#" onclick="showSection('about')">Home</a></li> <li><a href="#" onclick="showSection('workouts')">Workouts</a></li> <li><a href="#" onclick="showSection('nutrition')">Nutrition</a></li> <li><a href="#" onclick="showSection('motivation')">Motivation</a></li> </ul> </nav> <main> <section id="about" class="section"> <h2>About Our Website:</h2> <p>This is a fitness website dedicated to helping you achieve your health and wellness goals. We provide a wide range of resources, including workout routines, nutrition tips, health updates, and motivational content to keep you inspired on your fitness journey.</p> </section> <section id="workouts" class="section hidden"> <h2>Workouts</h2> <p>Find a variety of workout routines tailored to your fitness level and goals. Whether you are looking to build strength, improve cardiovascular health, or lose weight, we have the right workouts for you.</p> </section> <section id="nutrition" class="section hidden"> <h2>Nutrition</h2> <p>Discover healthy eating habits and nutrition tips to support your fitness goals. Learn about balanced diets, meal planning, and the importance of nutrients in maintaining a healthy lifestyle.</p> </section> <section id="motivation" class="section hidden"> <h2>Motivation</h2> <p>Stay motivated and inspired with our collection of motivational content. Read success stories, find tips to overcome challenges, and join our community to share your achievements and support others in their fitness journeys.</p> </section> </main> </body> </html>
Hey so i wanna make my website look my cooler and less plain but i dont know how can you tae a look at my website that i have so far: this is the home page by the way so only implement stuff fo the homepage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fitness</title>
<style>
h2 {
color: blue;
}
p {
font-size: 18px;
}
header {
background-color: #f9f9f9;
padding: 20px;
text-align: center;
}
h1 {
color: #333;
font-size: 24px;
margin: 0;
}
nav {
background-color: #333;
color: #fff;
padding: 10px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
display: inline;
margin-right: 10px;
}
li a {
color: #fff;
text-decoration: none;
}
li a:hover {
text-decoration: underline;
}
.hidden {
display: none;
}
</style>
<script>
function showSection(sectionId) {
var sections = document.getElementsByClassName('section');
for (var i = 0; i < sections.length; i++) {
sections[i].classList.add('hidden');
}
document.getElementById(sectionId).classList.remove('hidden');
}
</script>
</head>
<body>
<header>
<h1>Welcome to Fitness</h1>
</header>
<nav>
<ul>
<li><a href="#" onclick="showSection('about')">Home</a></li>
<li><a href="#" onclick="showSection('workouts')">Workouts</a></li>
<li><a href="#" onclick="showSection('nutrition')">Nutrition</a></li>
<li><a href="#" onclick="showSection('motivation')">Motivation</a></li>
</ul>
</nav>
<main>
<section id="about" class="section">
<h2>About Our Website:</h2>
<p>This is a fitness website dedicated to helping you achieve your health and wellness goals. We provide a wide range of resources, including workout routines, nutrition tips, health updates, and motivational content to keep you inspired on your fitness journey.</p>
</section>
<section id="workouts" class="section hidden">
<h2>Workouts</h2>
<p>Find a variety of workout routines tailored to your fitness level and goals. Whether you are looking to build strength, improve cardiovascular health, or lose weight, we have the right workouts for you.</p>
</section>
<section id="nutrition" class="section hidden">
<h2>Nutrition</h2>
<p>Discover healthy eating habits and nutrition tips to support your fitness goals. Learn about balanced diets, meal planning, and the importance of nutrients in maintaining a healthy lifestyle.</p>
</section>
<section id="motivation" class="section hidden">
<h2>Motivation</h2>
<p>Stay motivated and inspired with our collection of motivational content. Read success stories, find tips to overcome challenges, and join our community to share your achievements and support others in their fitness journeys.</p>
</section>
</main>
</body>
</html>
Step by step
Solved in 2 steps
