Egypt English

test project

HTML

<html>

  <head>
  </head>

  <body>
    <nav>
      <ul class="div-top">
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">Contact</a></li>
        <li style="float:right"><a href="#">About</a></li>
      </ul>
    </nav>
    <header class="div-center">
      <img src="https://cdn.countryflags.com/thumbs/egypt/flag-button-round-250.png">
      <span class="string">Egypt English</span>
    </header>

    <footer>
      <ul class="div-bottom">
        <li><a href="#">Home page</a></li>
        <li><a href="#">Lessons</a></li>
        <li><a href="#">Grammar</a></li>
        <li><a href="#">Login</a></li>
        <li><a href="#">Signup</a></li>
      </ul>
    </footer>
  </body>

</html>

CSS

* {
      margin: 0;
      padding: 0;
    }

    ul {
      background: #ff7f50;
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    ul li {
      float: left;
    }

    ul li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    li a:hover:not(.active) {
      background-color: #da6d45;
    }

    .active {
      background-color: #da6d45;
    }

    .div-center {
      height: 60;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ff7f50;
      font-size: 180%;
      padding: 15;
      margin: 20px 0;
    }

    .div-center>img {
      width: 60;
      padding-right: 30px;
    }

    .string {
      font-size: 50px;
    }