Skip to content

Instantly share code, notes, and snippets.

@Mercurial
Created February 20, 2020 17:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Mercurial/bd8002a94d7199586149dcf7970a3727 to your computer and use it in GitHub Desktop.
Save Mercurial/bd8002a94d7199586149dcf7970a3727 to your computer and use it in GitHub Desktop.
Sample HTML / CSS
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-color: rgb(43, 39, 39);
color: white;
}
div {
border: 1px solid white;
}
#main-container {
width: calc(800px - 1px * 2);
min-height: calc(200px - 1px * 2);
margin-left: calc(50% - 800px / 2);
}
header {
width: 100%;
border: 1px solid white;
}
#logo {
width: 100px;
height: 100px;
border: 1px solid white;
}
nav {
text-align: center;
width: 100%;
display: flex;
flex-direction: row-reverse;
}
nav div {
flex-shrink: 1;
}
</style>
</head>
<body>
<div id="main-container">
<header>
<div id="logo"></div>
</header>
<nav>
<div>Home</div>
<div>Service</div>
<div>About</div>
<div>Portfolio</div>
<div>Pricing</div>
</nav>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment