<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
<link rel="stylesheet" type="text/css" href="style.css"> <!-- External CSS -->
<script src="script.js"></script> <!-- JavaScript File -->
</head>
<body>
<header>
<h1>My Blog</h1>
<nav>
<ul>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
<li><a href="page5.html">Page 5</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Welcome to My Blog!</h2>
<p>This is a blog where you can find various recipes for different dishes. Each time you refresh this page, you will see a random recipe with an image and description below:</p>
<div id="recipeContainer">
<img id="recipeImage" src="" alt="">
<p id="recipeDescription"></p>
</div>
</section>
</main>
<footer>
<p>© 2021 My Blog</p>
</footer>
<script>
var recipes = [
{ image: "recipe1.jpg", description: "Delicious Chocolate Cake" },
{ image: "recipe2.jpg", description: "Spicy Chicken Curry" },
{ image: "recipe3.jpg", description: "Refreshing Fruit Salad" },
{ image: "recipe4.jpg", description: "Creamy Pasta Alfredo" },
{ image: "recipe5.jpg", description: "Healthy Green Smoothie" }
];
function getRandomRecipe() {
var randomIndex = Math.floor(Math.random() * recipes.length);
var randomRecipe = recipes[randomIndex];
document.getElementById("recipeImage").src = randomRecipe.image;
document.getElementById("recipeDescription").textContent = randomRecipe.description;
}
// Call getRandomRecipe() when the page loads and on each refresh
window.onload = getRandomRecipe;
window.onbeforeunload = getRandomRecipe;
</script>
</body>
</html>
<!-- page1.html -->
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<link rel="stylesheet" type="text/css" href="style.css"> <!-- Include the same external CSS file -->
</head>
<body>
<header>
<h1>Page 1</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
<li><a href="page4.html">Page 4</a></li>
<li><a href="page5.html">Page 5</a></li>
</ul>
</nav>
</header>
<main>
<section>
<!-- Add your content for Page 1 here -->
</section>
</main>
<footer>
<p>© 2021 My Blog</p>
</footer>
</body>
</html>
<!-- page2.html, page3.html, page4.html, page5.html -->
<!-- Follow the same structure as page1.html, but change the title and content accordingly -->
/* style.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
header h1 {
margin: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
#recipeImage {
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
#recipeDescription {
margin-top: 10px;
}
/* Create separate CSS files for page2.html, page3.html, page4.html, and page5.html if needed */
Create a code for a 5 page blog with these features
Inter-linked pages ( all pages to be working)
A java script drive page that refreshes and displays different recipe (image and description) anytime you refresh a page
All pages to be managed by a single external css that defines body, paragraphs, headers and footers
Include fieldsets, iframes or bootstraps
Enable google maps to show location
Include banners, tables and images with Hotspot link
1 answer
3 answers