HTML code

<div style=”font-family: Arial, Helvetica, sans-serif; scroll-behavior:smooth;”>
<h2>CSS Layout Flexbox</h2>
<header style=”background: #666; color: white; padding: 20px; text-align: center;”>
<h2>Cities</h2>
</header>
<div style=”display: flex; flex-wrap: wrap;”><nav style=”flex: 1; min-width: 200px; background: #ccc; padding: 15px;”>
<ul style=”list-style: none; padding: 0; margin: 0;”>
<li><a href=”#london”>London</a></li>
<li><a href=”#paris”>Paris</a></li>
<li><a href=”#japan”>Tokyo</a></li>
</ul>
</nav><article style=”flex: 3; min-width: 250px; background: #f1f1f1; padding: 15px;”>
<a id=”london” style=”display:block;position:relative;top:-25px;visibility:hidden;”></a>
<h1>London</h1>
London is the capital city of England.
<a id=”paris” style=”display:block;position:relative;top:-30px;visibility:hidden;”></a>
<h1>Paris</h1>
Paris is the capital city of France.
<a id=”japan” style=”display:block;position:relative;top:-30px;visibility:hidden;”></a>
<h1>Tokyo</h1>
Tokyo is the capital city of Japan.

</article></div>
<footer style=”background: #777; color: white; text-align: center; padding: 10px;”>Footer</footer></div>