Asked by b

create a khan academy html for the travel webpage You must have:

3 locations

3 pictures

3 colors

3 bolded

3 italicized

3 paragraphs(<p>)

3 headers

3 things tagged

an unordered list with at least 3 things

an ordered list with at least 3 things

All Answers 1

Answered by GPT-5 mini AI
Here's an HTML file you can paste into Khan Academy's HTML editor (or any HTML file). It includes:

- 3 locations
- 3 pictures
- 3 colors (visible palette + CSS)
- 3 bolded items
- 3 italicized items
- 3 paragraphs (<p>)
- 3 headers (h1, h2, h3)
- 3 things tagged (span.tag)
- an unordered list (≥3 items)
- an ordered list (≥3 items)

Copy and paste the code below:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>World Explorer — Travel Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
:root{
--primary: #2A9D8F; /* teal */
--accent: #E76F51; /* coral */
--bg: #F4F1DE; /* cream */
--text: #264653; /* dark blue */
}
body{
font-family: Arial, Helvetica, sans-serif;
background: var(--bg);
color: var(--text);
margin: 20px;
line-height: 1.5;
}
header{
text-align: center;
margin-bottom: 18px;
}
h1{ color: var(--primary); margin: 6px 0;}
h2{ color: var(--accent); margin: 6px 0;}
h3{ color: var(--text); margin: 12px 0 6px;}
.locations{
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 18px;
}
.location{
background: white;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
width: 300px;
padding: 12px;
}
.location img{
width: 100%;
height: 160px;
object-fit: cover;
border-radius: 6px;
}
.palette{
display: flex;
gap: 8px;
justify-content: center;
margin: 10px 0 20px;
}
.swatch{
width: 70px;
height: 40px;
border-radius: 6px;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.swatch.primary { background: var(--primary); }
.swatch.accent { background: var(--accent); }
.swatch.bgcolor { background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
.tags { text-align: center; margin: 12px 0; }
.tag{
display: inline-block;
background: rgba(38,70,83,0.08);
color: var(--text);
padding: 6px 10px;
margin: 4px;
border-radius: 16px;
font-size: 0.95em;
}
.lists{
max-width: 740px;
margin: 0 auto;
display: flex;
gap: 24px;
justify-content: center;
flex-wrap: wrap;
}
ul, ol {
background: white;
padding: 12px 16px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
width: 320px;
}
</style>
</head>
<body>

<header>
<h1>World Explorer</h1> <!-- header 1 -->
<h2>Discover your next trip</h2> <!-- header 2 -->
<h3>Top picks and quick planning</h3> <!-- header 3 -->
</header>

<!-- three color swatches -->
<div class="palette" aria-hidden="true">
<div class="swatch primary">Teal</div>
<div class="swatch accent">Coral</div>
<div class="swatch bgcolor">Cream</div>
</div>

<!-- three locations (no extra headers to keep total headers = 3) -->
<div class="locations">

<div class="location" data-loc="Kyoto, Japan">
<img src="https://picsum.photos/seed/kyoto/400/250" alt="Scenic Kyoto" />
<p>
<strong>Kyoto, Japan</strong> is where tradition meets tranquility.
Explore the temples and enjoy the <em>serene gardens</em> that change with the seasons.
</p>
</div>

<div class="location" data-loc="Amalfi Coast, Italy">
<img src="https://picsum.photos/seed/amalfi/400/250" alt="Amalfi Coast" />
<p>
<strong>Amalfi Coast, Italy</strong> offers dramatic sea views and cliffside towns.
Savor fresh seafood and take <em>coastal drives</em> along winding roads.
</p>
</div>

<div class="location" data-loc="Machu Picchu, Peru">
<img src="https://picsum.photos/seed/machu/400/250" alt="Machu Picchu" />
<p>
<strong>Machu Picchu, Peru</strong> is a breathtaking archaeological site.
Hike ancient trails and experience <em>mountain-top history</em> and culture.
</p>
</div>

</div>

<!-- three tags -->
<div class="tags">
<span class="tag">#beach</span>
<span class="tag">#mountain</span>
<span class="tag">#culture</span>
</div>

<!-- unordered and ordered lists -->
<div class="lists">
<ul>
<li><strong>Packing tip:</strong> Pack layers for changing weather.</li>
<li><em>Local tip:</em> Try small local eateries for authentic food.</li>
<li><strong>Booking tip:</strong> Reserve popular sites in advance.</li>
</ul>

<ol>
<li>Choose a destination that matches your interests.</li>
<li>Book flights and accommodations early for better prices.</li>
<li>Create a flexible itinerary and leave room for discovery.</li>
</ol>
</div>

</body>
</html>
```

If you want this adapted (different locations, different images, or to include additional Khan Academy-friendly features like interactive JS or CSS-only animations), tell me which changes and I’ll update it.