Skip to content

Instantly share code, notes, and snippets.

@snowfluke
Created August 23, 2023 08:48
Show Gist options
  • Save snowfluke/6f62770d06b4783055ff5962fbf75da8 to your computer and use it in GitHub Desktop.
Save snowfluke/6f62770d06b4783055ff5962fbf75da8 to your computer and use it in GitHub Desktop.
nasgor
<html>
<head>
<title>Lorem</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #e1e1e1;
}
header {
background-color: aquamarine;
width: 100%;
border-bottom: 1px solid grey;
}
header .header-container {
margin: 0 auto;
position: relative;
width: 95%;
overflow: hidden;
display: flex;
background-color: red;
align-items: center;
}
header .logo {
position: absolute;
left: 0;
z-index: 99;
background-color: yellow;
}
header nav {
display: flex;
width: 100%;
background-color: blue;
justify-content: center;
align-items: center;
}
header nav ul {
display: flex;
flex-direction: row;
gap: 10px;
list-style: none;
background-color: red;
padding: 0;
}
main .container {
width: 80%;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#post {
background-color: white;
height: 500px;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<header>
<div class="header-container">
<div class="logo">Animeku</div>
<nav>
<ul>
<li>Home</li>
<li>Manga</li>
<li>Hentai</li>
<li>Ecchi</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="container">
<section id="post">
<h1>Halo Nasi Goreng Rumahan</h1>
</section>
</div>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment