HTML/CSS - 🐶 Pet.Friend website 🐕 Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML</title>
  
  <!-- HTML -->
  
  <!-- Custom Styles -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Project -->
  <div class="Home" id="homepage">
    <div class="header">
     <nav>
       <img onclick="open_f()" class="open_nav" src="https://i.postimg.cc/zDFcntz9/130918.png" alt="open"/>
       <h2>Pet.Friend</h2>
       <ul id="navbar">
         <img onclick="close_f()" class="close_nav" src="https://i.postimg.cc/FKB17gqq/1828778.png" alt="close" />
       <li><a href="#">Home</a></li>
       <li><a href="#">Breeds</a></li>
       <li><a href="#">Services</a></li>

css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;700&display=swap');
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body {
    font-size: 1em;
    font-family: 'Poppins', sans-serif;
    
}
.home{
  width:100vw;
  overflow:hidden;
}
.header{
  width:100vw;
  background-color: #FFF6E3;
}
/*    Navbar   */
nav{
  width:100vw;
  display:flex;
  align-items:center;
}
nav h2{
  margin-left:20px;
  font-size:2em;

BROWSER

Console