kolynzb/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Playstation Clone</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
      integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav>
      <header>
        <img
          src="data:image/png;base64,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"
          alt="sony-logo"
          class="sony-logo"
        />
      </header>
      <section class="navbar">
        <section class="nav-left">
          <img
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQMAAADCCAMAAAB6zFdcAAAAh1BMVEX///8AAADv7++7u7upqamxsbGsrKy1tbWvr69+fn62tra6urq+vr7GxsbLy8vj4+Pw8PD29vZXV1eQkJDb29vU1NSXl5csLCyHh4elpaU5OTmenp5jY2POzs6WlpZoaGhHR0cvLy8UFBRxcXEgICBBQUFRUVGLi4sLCwsYGBhFRUWAgIBlZWVUPekhAAAEM0lEQVR4nO3c63aiMBQFYKBequIFvCDiqIjVTu37P99AaRGTEMl0xYNxfz9hOutkK7mBWBYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJisnbgedQ3UOrZtv23m1GWQerVz27ZDXQqZnwxSh9OIuhoapQwyfjimruj+mAxS771n6yXbXAaZj2hGXdgdiTNI7adPc1VUZpBadamruw9ZBqmIur57uJGBbbeoK9TvZgZ2YHz3eDsD255SF6lZt0YG9o66Sr0EGRzHjhtfH9pPqOvUSZDB1/FP5qDJIfAZ9PITAfNNoC1TKz6DMD/xwl4htHXqxGfwPSFw2OPmTpf6tTOwjd1kUchgTVupPgoZ2KYuJFUy6NGWqs1AIQObtlRtlDIY0taqi1IGZ9padVHKIKatVRelDAztENgpsTwDM0dHtQzMvC+ploGZA4NaBgPaYjVBBqoZuLTFaoL+AONChs+gk5946vmBLAPaWnVBBooZ+LS16qKUwYa2Vl2UMvhDW6suShnQlqqNSgYJbanauAoZmPowhkIGho4KShkYe6+tfgavtIVqVDuDBW2dumQroMoMrOGxfNTInYPxIsjG++oM0q9Cy88PBSY+e+C1VlnbLFEG19e9M5vPTHyMffD98dbJwEij5NJc6xkzmC2vmmvVyMCbdzc9f3XITsW77TIcPvJmkhMdmOZa8gy84dTnTmf268XoATsJr/PGt8WSZDA/xcL2F+LTY+2wumthM6yqDMZLwb8WWD7KdfEnqWqCVZVBvQQy/gOkMD5JGmD9PoPmP6k12smqz7YH+QzalloG9qHJ3eMgkFS+zX/UqpDBeTB30uY68wVz4p22mRLuvjqAVbEoGNbL4O+0PAiwa8qGPsHqHbl2FE6lfqxOBvGC6fhG7N80smOcVAawvr53fDODVcjtH7W4v2nkujIWBxC32P7rRgb8j129UHCNNXGNwX1ZvywFG8OyDBL+nkpbfInpb5E6tudO+dxOUCsbGysz8F+4/3W4FQbQ0EczIrbKgL2osyV0NrsRZ7APuTF/Vj19buY+24wt8/pD/W5PdQYsJ6qeagSNHBRS7Ld2dflt3mz606nVzaAvGWd/fgLWRNwkeXeOOu1wU14/1cpgVLniyjRyUCxsZKXLMii/9EC64mKnGg3kSD/AGhlMQtl64+O1yUulgheu/j+DgawTOEQPdPNx0q4a06UZVG+7ZERzrYYb98+CvUQ7f6+BOANJAMnjvkhq7C4+L5f3R7Jw82FdLQPfhIe2J44zuerLFDJYcQsuQ9TNYL9p6nTw9+plcH6sWwmK5rcz2DZ+KvRrw0SWwfFJ3pVlueW3n/StIoMgNPk1KJzimYRLBs/z0riC1z2WMugZ+mzyTV5nl/cHz9IJiE0i80cBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADI/QOC7y98tC/L/wAAAABJRU5ErkJggg=="
            alt="ps"
            class="ps-logo"
          />

          <ul class="nav-links">
            <li class="navlink">
              Games <i class="fa-solid fa-chevron-down"></i>
            </li>
            <li class="navlink">
              Hardware <i class="fa-solid fa-chevron-down"></i>
            </li>
            <li class="navlink">
              Services <i class="fa-solid fa-chevron-down"></i>
            </li>
            <li class="navlink">
              News <i class="fa-solid fa-chevron-down"></i>
            </li>
            <li class="navlink">
              Shop <i class="fa-solid fa-chevron-down"></i>
            </li>
            <li class="navlink">
              Support <i class="fa-solid fa-chevron-down"></i>
            </li>
          </ul>
        </section>

        <section class="nav-right">
          <button class="btn">Sign In</button>
          <i class="fa-solid fa-magnifying-glass"></i>
        </section>
      </section>
    </nav>
  </body>
</html>

## style.css
* {
  margin: 0;
  padding: 0;
}
header {
  display: flex;
  justify-content: flex-end;
  background-color: #000;
}
.sony-logo {
  width: 50px;
}

.btn {
  color: #fff;
  background: #000;
  border-radius: 15px;
  font-size: 16px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  margin-right: 10px;
}
.btn:hover {
  color: #000;
  background: #fff;
  transform: scale(1.02);
}

.ps-logo {
  width: 55px;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
  width: 40vw;
  /* border: solid red 2px; */
}

.nav-left {
  display: flex;
  align-items: center;
}
.navbar {
  display: flex;
  height: 10vh;
  align-items: center;
  justify-content: space-between;
  padding: 0px 6px;
}

nav {
  border-bottom: 1px black solid;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Playstation Clone</title>
	<link
	rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
	integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
	crossorigin="anonymous"
	referrerpolicy="no-referrer"
	/>
	<link rel="stylesheet" href="style.css" />
	</head>
	<body>
	<nav>
	<header>
	<img
	src="data:image/png;base64,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"
	alt="sony-logo"
	class="sony-logo"
	/>
	</header>
	<section class="navbar">
	<section class="nav-left">
	<img
	src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQMAAADCCAMAAAB6zFdcAAAAh1BMVEX///8AAADv7++7u7upqamxsbGsrKy1tbWvr69+fn62tra6urq+vr7GxsbLy8vj4+Pw8PD29vZXV1eQkJDb29vU1NSXl5csLCyHh4elpaU5OTmenp5jY2POzs6WlpZoaGhHR0cvLy8UFBRxcXEgICBBQUFRUVGLi4sLCwsYGBhFRUWAgIBlZWVUPekhAAAEM0lEQVR4nO3c63aiMBQFYKBequIFvCDiqIjVTu37P99AaRGTEMl0xYNxfz9hOutkK7mBWBYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJisnbgedQ3UOrZtv23m1GWQerVz27ZDXQqZnwxSh9OIuhoapQwyfjimruj+mAxS771n6yXbXAaZj2hGXdgdiTNI7adPc1VUZpBadamruw9ZBqmIur57uJGBbbeoK9TvZgZ2YHz3eDsD255SF6lZt0YG9o66Sr0EGRzHjhtfH9pPqOvUSZDB1/FP5qDJIfAZ9PITAfNNoC1TKz6DMD/xwl4htHXqxGfwPSFw2OPmTpf6tTOwjd1kUchgTVupPgoZ2KYuJFUy6NGWqs1AIQObtlRtlDIY0taqi1IGZ9padVHKIKatVRelDAztENgpsTwDM0dHtQzMvC+ploGZA4NaBgPaYjVBBqoZuLTFaoL+AONChs+gk5946vmBLAPaWnVBBooZ+LS16qKUwYa2Vl2UMvhDW6suShnQlqqNSgYJbanauAoZmPowhkIGho4KShkYe6+tfgavtIVqVDuDBW2dumQroMoMrOGxfNTInYPxIsjG++oM0q9Cy88PBSY+e+C1VlnbLFEG19e9M5vPTHyMffD98dbJwEij5NJc6xkzmC2vmmvVyMCbdzc9f3XITsW77TIcPvJmkhMdmOZa8gy84dTnTmf268XoATsJr/PGt8WSZDA/xcL2F+LTY+2wumthM6yqDMZLwb8WWD7KdfEnqWqCVZVBvQQy/gOkMD5JGmD9PoPmP6k12smqz7YH+QzalloG9qHJ3eMgkFS+zX/UqpDBeTB30uY68wVz4p22mRLuvjqAVbEoGNbL4O+0PAiwa8qGPsHqHbl2FE6lfqxOBvGC6fhG7N80smOcVAawvr53fDODVcjtH7W4v2nkujIWBxC32P7rRgb8j129UHCNNXGNwX1ZvywFG8OyDBL+nkpbfInpb5E6tudO+dxOUCsbGysz8F+4/3W4FQbQ0EczIrbKgL2osyV0NrsRZ7APuTF/Vj19buY+24wt8/pD/W5PdQYsJ6qeagSNHBRS7Ld2dflt3mz606nVzaAvGWd/fgLWRNwkeXeOOu1wU14/1cpgVLniyjRyUCxsZKXLMii/9EC64mKnGg3kSD/AGhlMQtl64+O1yUulgheu/j+DgawTOEQPdPNx0q4a06UZVG+7ZERzrYYb98+CvUQ7f6+BOANJAMnjvkhq7C4+L5f3R7Jw82FdLQPfhIe2J44zuerLFDJYcQsuQ9TNYL9p6nTw9+plcH6sWwmK5rcz2DZ+KvRrw0SWwfFJ3pVlueW3n/StIoMgNPk1KJzimYRLBs/z0riC1z2WMugZ+mzyTV5nl/cHz9IJiE0i80cBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADI/QOC7y98tC/L/wAAAABJRU5ErkJggg=="
	alt="ps"
	class="ps-logo"
	/>

	<ul class="nav-links">
	<li class="navlink">
	Games <i class="fa-solid fa-chevron-down"></i>
	</li>
	<li class="navlink">
	Hardware <i class="fa-solid fa-chevron-down"></i>
	</li>
	<li class="navlink">
	Services <i class="fa-solid fa-chevron-down"></i>
	</li>
	<li class="navlink">
	News <i class="fa-solid fa-chevron-down"></i>
	</li>
	<li class="navlink">
	Shop <i class="fa-solid fa-chevron-down"></i>
	</li>
	<li class="navlink">
	Support <i class="fa-solid fa-chevron-down"></i>
	</li>
	</ul>
	</section>

	<section class="nav-right">
	<button class="btn">Sign In</button>
	<i class="fa-solid fa-magnifying-glass"></i>
	</section>
	</section>
	</nav>
	</body>
	</html>
	* {
	margin: 0;
	padding: 0;
	}
	header {
	display: flex;
	justify-content: flex-end;
	background-color: #000;
	}
	.sony-logo {
	width: 50px;
	}

	.btn {
	color: #fff;
	background: #000;
	border-radius: 15px;
	font-size: 16px;
	padding: 4px 10px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	margin-right: 10px;
	}
	.btn:hover {
	color: #000;
	background: #fff;
	transform: scale(1.02);
	}

	.ps-logo {
	width: 55px;
	}

	.nav-links {
	display: flex;
	justify-content: space-around;
	list-style-type: none;
	width: 40vw;
	/* border: solid red 2px; */
	}

	.nav-left {
	display: flex;
	align-items: center;
	}
	.navbar {
	display: flex;
	height: 10vh;
	align-items: center;
	justify-content: space-between;
	padding: 0px 6px;
	}

	nav {
	border-bottom: 1px black solid;
	}