<body> <header> <div id="logo">LOGO</div> <nav> <a href="#sec1">Section1</a> <a href="#sec2">Section2</a> <a href="#sec3">Section3</a> <a href="#sec4">Section4</a> </nav> </header> <section id="sec1">Section1</section> <section id="sec2">Section2</section> <section id="sec3">Section3</section> <section id="sec4">Section4</section> </body>
<style> * { margin: 0; box-sizing: border-box; } body { font-family: sans-serif; font-weight: bold; } header { background-color: rgba(0, 0, 0, 0.7); position: fixed; left: 0; right: 0; top: 0; padding: 15px 50px; display: flex; justify-content: space-between; align-items: center; } #logo { color: #f00; font-size: 40px; } nav a { color: #fff; text-decoration: none; font-size: 20px; padding: 10px; } nav a:hover { color: #f00; } section { min-height: 100vh; background-color: lightgray; font-size: 50px; display: flex; justify-content: center; align-items: center; } #sec2, #sec4 { background-color: gray; } </style>