title: How to make header for my web page [HTML5 , CSS3]
body: <p>I am trying to make a header for my website and I want it to look like this.
  <a href="https://i.stack.imgur.com/0IxmO.png" rel="nofollow noreferrer">The header I want to create </a></p>
  <p>but I'm not sure what is the best way to make the logo look like that.</p>
  <p>I've tried this,</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.logo {
    height: 130px;
    width: 130px;
    cursor: pointer;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -18px;
  }
  
  #circle {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    background-color: white;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -1px;
    -webkit-box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49);
    -moz-box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49);
    box-shadow: 0px 3px 15px rgba(100, 100, 100, 0.49);
  }
  
  #rect {
    width: 120px;
    height: 65px;
    background-color: white;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -1px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
  
    &lt;div id="circle"&gt;&lt;/div&gt;
    &lt;div id="rect"&gt;&lt;/div&gt;
    &lt;img src="img/MU-logo.png" alt="Madridismo" class="logo"&gt;
  
    &lt;nav&gt;
      &lt;ul class="nav_links"&gt;
        &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="index.html"&gt;Games&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  
    &lt;div id="clock"&gt;&lt;/div&gt;
  
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>But I am still looking for the right way to do it. and thanks</p>