HTML / header & nav tag

Hello everyone. Here was given the task to write a website. who was interested

In HTML, I am a fish, a cucumber and a self-taught SoloLearn (not advertising)

I wanted to do something like this poke

But, I'm a fish, and it turns out something like this ~(-.-~ enter a description of the image here

I would like to know how you can do this and if there are errors, make a comment :)

Source code: 

<!DOCTYPE HTML>
<html>
    <head>
        <title> Trip to Chernobyl </title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body class="page">
        <header class="header__inner">
            <img src="img/logo.png" height="5%" width="5%" align="left" alt="Error ~(-.-~">
        </header>

        <nav align="right" class="nav_inner">
        <a href="about.html" class="my" style="color:white"> About </a>
        <a href="price.html" style="color:white"> Price </a>
        <a href="contact.html" style="color:white"> Contact </a>
        <a href="faq.html" style="color:white"> FAQ </a>

        </nav>

        <hr />
    </body>
</html>

In CSS, only the background on body #151515

Sorry in advance for my stupism ~(- . - ~

Author: DRatergs, 2020-01-27
Source

2 answers

Everything is done very simply. I propose to make this header with the help of flexos. Making a container main and it has 2 blocks main-logo and main-items. To the parent, that is, main we prescribe display: flex; justify-content: space-between; align-items: center; and our menu is ready. We style the strip using border-botom, which we assign to our main

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  color: #fff;
}

body{
  background: #000;
}

.menu{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 4px solid #fff;
  padding-bottom: 5px;
}

.menu-logo{
  margin-left: 10px;
}

.menu-items{
  margin-right: 10px;
}

.menu-item{
  margin-left: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <menu class="menu">
    <div class="menu-logo">
      <h1>Logo</h1>
    </div>
    <div class="menu-items">
      <a class="menu-item" href="#">About</a>
      <a class="menu-item" href="#">Price</a>
      <a class="menu-item" href="#">Contact</a>
      <a class="menu-item" href="#">Faq</a>
    </div>
  </menu>
</body>
</html>
 1
Author: Denis, 2020-01-27 18:47:00

Well, change the size of the elements to css

.header__inner{
  width: 200px;
}
.nav_inner>a{
  font-size: 35px;
  text-decoration: none;
}
hr{
  width: 10px;
  margin-top: 210px;
}

Something like that.

 1
Author: , 2020-01-27 18:32:00