<html>

<head>
  <meta charset="utf-8">
  <title>Google Page Project</title>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/b506ec301c.js" crossorigin="anonymous"></script>

</head>
<main>

  <body>
    <div class="navbar">
      <ul>
        <li class="nav-left"><a href="#">About</a></li>
        <li class="nav-left"><a href="#">Store</a></li>
        <div id="sign-in">
          <button class="sign-in-btn" type="button"  name="sign-in"><b>Sign in</b></button>
        </div>
        <span class="menu"><a href="#"><i class="fas fa-th" aria-hidden="true" style="color: rgb(142, 142, 145);font-size: 20px;"></i></a></span>
        <li class="nav-right"><a href="#">Images</a></li>
        <li class="nav-right"><a href="#">Gmail</a></li>
      </ul>
    </div>
    <div class="google-search">
      <img id="google-logo" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google-logo">
      <input type="text" id="search" placeholder="&#xf002;">
      <div id="flexbox">
        <button class="search-btn" type="button" name="search-btn">Google Search</button>
        <button class="random-btn" type="button" name="random-btn">I'm Feeling Lucky</button>
      </div>
    </div>
    <div class="footer">
      <ul>
        <li class="nav-left"><a href="#">Advertising</a></li>
        <li class="nav-left"><a href="#">Business</a></li>
        <li class="nav-left"><a href="#">How Search works</a></li>
        <li class="nav-right"><a href="#">Settings</a></li>
        <li class="nav-right"><a href="#">Terms</a></li>
        <li class="nav-right"><a href="#">Privacy</a></li>
      </ul>
    </div>
  </body>
</main>

</html>
html,
main,
body {
  margin: 0;
  padding: 0;
  font-family: Noto Sans JP, sans-serif;
  font-size: 13px;
}

.navbar {
  position: sticky;
  top: 0;
}

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

.nav-left {
  float: left;
  margin-left: 20px;
  padding-top: 5px;
}

.nav-right {
  float: right;
  margin-right: 20px;
  padding-top: 3px;
}

.google-search {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 235px 100px 70px 770px;
  grid-template-areas:
    ". google-logo ."
    ". search ."
    ". flexbox .";
}

#google-logo {
  grid-area: google-logo;
  justify-self: center;
  align-self: flex-end;
}

#search {
  grid-area: search;
  font-family: fontawesome;
  height: 30px;
}

#flexbox {
  display: flexbox;
  grid-area: flexbox;
  justify-self: center;
  align-self: center;
}

#sign-in {
  float: right;
  margin: 12px;
}

.menu {
  float: right;
  margin-top: 10px;
  padding: 10px;
}

.menu:hover {
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.11);
}

.sign-in-btn {
  color: #fff;
  background-color: #4485f5;
  font-size: 13px;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-top: 3px;
  width: 70px;
}

.sign-in-btn:active {
  background-color: #326fd8;
}

.search-btn,
.random-btn {
  grid-area: random-btn;
  background-color: rgba(192, 192, 192, 0.24);
  font-size: 13px;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  margin: 5px;
  border: none;
  border-radius: 3px;
}

.search-btn:active,
.random-btn:active {
  background-color: rgb(221, 221, 221);
}

.search-btn:hover,
.random-btn:hover {
  border-radius: 3px;
  border: 1px solid rgba(139, 153, 167, 0.63);
  box-shadow: 0 0 1px rgba(139, 153, 167, 0.63);
}

#search:hover {
  box-shadow: 0 0 4px rgba(139, 153, 167, 0.63);
}

.footer {
  position: sticky;
  bottom: 0;
  background-color: rgba(142, 142, 145, 0.24);
}

input[type="text"] {
  margin: 30px;
  padding: 10px;
  border: none;
  background-color: transparent;
  border: 1px solid rgb(226, 226, 226);
  border-radius: 35px;
}

li a {
  display: block;
  padding: 15px 5px;
  color: rgb(65, 65, 65);
  text-decoration: none;
}

li a:hover {
  text-decoration: underline;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.