shiraliali/modern-html-css-navbar.html

## modern-html-css-navbar.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Beautiful Header Navbar by ALY</title>
</head>
<body>


<div class="container">
  <div class="left">Left Content</div>
  <div class="center">
    <a>Guideline</a>
    <a>FAQ</a>
    <a href="mailto:inboxalishirali@gmail.com">Contact Me</a>
    <a href="https://daramet.com">Daramet</a>
    <a href="https://x.com/alyshirali">X</a>
  </div>
  <div class="right">Right Content</div>
</div>

</body>


<style>

* {
  margin: 0 0;
}

.container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  background: linear-gradient(to bottom, black 50%, white 50%);
}

.container > * {
  padding: 16px 32px;
}

.container > div > a {
    color:white;
    text-decoration: none;
}

.left, .right {
   position: relative;
   z-index: 1;
}

.left::after, .right::after {
  content: '';
  z-index: -1;
  position: absolute;
  inset: 0;
  background: white;
  border-radius: 10px;
  transform: skewX(40deg);
}

.right::after {
  transform: skewX(-40deg);
}

.center {
  position: relative;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 3rem;
  z-index: 1;
}

.center::after, .center::before {
  content: '';
  position: absolute;
  inset: 0;
  right: 50%;
  background: black;
  border-radius: 10px;
  z-index: -1;
  transform: skewX(40deg);
}

.center::before {
  transform: skewX(-40deg);
  right: 0;
  left: 50%;
}


</style>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Beautiful Header Navbar by ALY</title>
	</head>
	<body>


	<div class="container">
	<div class="left">Left Content</div>
	<div class="center">
	<a>Guideline</a>
	<a>FAQ</a>
	<a href="mailto:inboxalishirali@gmail.com">Contact Me</a>
	<a href="https://daramet.com">Daramet</a>
	<a href="https://x.com/alyshirali">X</a>
	</div>
	<div class="right">Right Content</div>
	</div>

	</body>


	<style>

	* {
	margin: 0 0;
	}

	.container {
	display: grid;
	grid-template-columns: auto 1fr auto;
	background: linear-gradient(to bottom, black 50%, white 50%);
	}

	.container > * {
	padding: 16px 32px;
	}

	.container > div > a {
	color:white;
	text-decoration: none;
	}

	.left, .right {
	position: relative;
	z-index: 1;
	}

	.left::after, .right::after {
	content: '';
	z-index: -1;
	position: absolute;
	inset: 0;
	background: white;
	border-radius: 10px;
	transform: skewX(40deg);
	}

	.right::after {
	transform: skewX(-40deg);
	}

	.center {
	position: relative;
	color: white;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 3rem;
	z-index: 1;
	}

	.center::after, .center::before {
	content: '';
	position: absolute;
	inset: 0;
	right: 50%;
	background: black;
	border-radius: 10px;
	z-index: -1;
	transform: skewX(40deg);
	}

	.center::before {
	transform: skewX(-40deg);
	right: 0;
	left: 50%;
	}


	</style>
	</html>