я гадаю, що то мона зробити багатьма способами, але це не головне.

Ви б швидше самі пошукали і зробили б, ніж просто сидіти і чекати на відповідь.

А так не бачу ніякої проблеми:
1. Ставите фон тегу body(+ можете виставити background-size тощо)
2. Робите обгортку div-ом і виставляєте їй ширину, а краще max-width, щоб хоча б трохи було адаптивно(адаптивність наше все! ) і центруєте за допомогою

margin: 0 auto;

3. У шапці додаєте заголовок через h1 і пару посилань, можна через той же список ul, десь так:

<ul>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
</ul>

Виставляєте стилі цим посиланням(колір, розмір, ефекти при наведенні тощо). Також не забуваємо обнулити відступи, маркери елементів списку:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

Плюс ставимо лівий border до li та відміняємо його першому посиланню. Можна через ще один стиль, можна через

ul li:first-child

.

4. Тому прозорому блоку просто ставите потрібну висоту(якщо контенту не буде) і виставляєте фон:

background-color: rgba(0, 0, 0, 0.5); /* останнє значення підбираєте у діапазоні 0.0-1.0 */

І все. Можна спокійно погуглити. Якщо вже не знайшли, то хоча б киньте ваш код.