Computer scienceFrontendCSSFlexbox

Axis alignment

Chess

Report a typo

A company holding chess tournaments all over the world decided to update its web site. You have an idea of how to make it even better. That's why instead of making a usual navigation bar you decided to make it look like a part of a chess board.

Your task here is to make the navigation bar look like in the picture below:

Two rows of elements arranged in staggered order

Write HTML and CSS code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Flex-wrap</title>
</head>
<body>
<div class="menu">
<div class="menu-item item1">
Home
</div>
<div class="menu-item item2">
Tournaments
</div>
<div class="menu-item item3">
Contacts
</div>
<div class="menu-item item4">
Leaderboard
</div>

</div>
</body>
</html>
Completed 0 of 1
Navbar looks like a chess desk
___

Create a free account to access the full topic