<body class="align text--center">

  <div class="grid">

    <h1>Welcome</h1>

    <nav class="navigation navigation--inline navigation--main">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  </div>

</body>
@use postcss-preset-env;

/* settings */

:root {
  --baseColor: #fff;
}

/* helpers/align.css */

.align {
  display: grid;
  place-items: center;
}

/* helpers/grid.css */

:root {
  --gridMaxWidth: 30rem;
  --gridWidth: 90%;
}

.grid {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--gridMaxWidth);
  width: var(--gridWidth);
}

/* layout/base.css */

:root {
  --htmlFontSize: 100%;

  --bodyBackgroundColor: #333d4b;
  --bodyColor: #fff;
  --bodyFontFamily: 'Helvetica Neue';
  --bodyFontFamilyFallback: sans-serif;
  --bodyFontSize: 1rem;
  --bodyFontWeight: 400;
  --bodyLineHeight: 1.5;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: var(--htmlFontSize);
}

body {
  background-color: var(--bodyBackgroundColor);
  color: var(--bodyColor);
  font-family: var(--bodyFontFamily), var(--bodyFontFamilyFallback);
  font-size: var(--bodyFontSize);
  font-weight: var(--bodyFontWeight);
  line-height: var(--bodyLineHeight);
  margin: 0;
  min-height: 100vh;
}

/* modules/anchor.css */

a {
  outline: 0;
  text-decoration: none;
  transition: color .3s, background-color .3s;
}

/* modules/headline.css */

:root {
  --h1FontSize: 42px;
  --h1FontFamily: 'Norican';
  --h1FontFamilyFallback: cursive;
  --h1FontWeight: 400;
  --h1MarginBottom: 24px;
  --h1TextTransform: lowercase;
}

h1 {
  font-family: var(--h1FontFamily), var(--h1FontFamilyFallback);
  font-size: var(--h1FontSize);
  font-weight: var(--h1FontWeight);
  margin-bottom: var(--h1MarginBottom);
  margin-top: 0;
  text-transform: var(--h1TextTransform);
}

/* modules/navigation.css */

:root {
  --navigationMainBackgroundColor: #fff;
  --navigationMainBorderRadius: .25rem;
  --navigationMainFontSize: .75rem;
  --navigationMainFontWeight: bold;
  --navigationMainPaddingHorizontal: 1.25rem;
  --navigationMainPaddingVertical: .75rem;
  --navigationMainTextTransform: uppercase;

  --navigationMainItemMargin: 1.5%;

  --navigationMainLinkBorderRadius: .125rem;
  --navigationMainLinkColor: #aeaeae;
  --navigationMainLinkPaddingHorizontal: .75rem;
  --navigationMainLinkPaddingVertical: .5rem;

  --navigationMainLinkHoverBackgroundColor: #f43958;
  --navigationMainLinkHoverColor: #fff;
}

.navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation a {
  display: block;
}

.navigation--inline ul {
  display: flex;
  flex-wrap: wrap;
}

.navigation--inline li {
  flex-grow: 1;
}

.navigation--main {
  background-color: var(--navigationMainBackgroundColor);
  box-shadow: 0 0 .125rem rgba(0, 0, 0, .75);
  border-radius: var(--navigationMainBorderRadius);
  font-weight: var(--navigationMainFontWeight);
  font-size: var(--navigationMainFontSize);
  padding: var(--navigationMainPaddingVertical) var(--navigationMainPaddingHorizontal);
  position: relative;
  text-transform: var(--navigationMainTextTransform);
}

.navigation--main::before {
  border-bottom: .25rem solid var(--navigationMainBackgroundColor);
  border-left: .25rem solid transparent;
  border-right: .25rem solid transparent;
  bottom: 100%;
  content: '';
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

.navigation--main ul {
  margin: calc(var(--navigationMainItemMargin) * -1);
}

.navigation--main li {
  margin: var(--navigationMainItemMargin);
}

.navigation--main a {
  border-radius: var(--navigationMainLinkBorderRadius);
  color: var(--navigationMainLinkColor);
  padding: var(--navigationMainLinkPaddingVertical) var(--navigationMainLinkPaddingHorizontal);
}

.navigation--main a:focus,
.navigation--main a:hover {
  background-color: var(--navigationMainLinkHoverBackgroundColor);
  color: var(--navigationMainLinkHoverColor);
}

/* modules/text.css */

.text--center {
  text-align: center;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.