Question

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
There are no human answers yet.
Answered by GPT 3.5
<!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>&copy; 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>&copy; 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 */