m-p-01

by Nic Fontaine

HTML

<header>

  <div class="logo">
    <div class="grad"></div>
  </div>
  
  <nav class="shadow-hump">
  
    <a href="">LINK</a>
    <a href="">LINK</a>
    <a href="">LINK</a>
    <a href="">LINK</a>
  
  </nav>
  
</header>

<main>

  <article class="grey-dark">
    <section>
    <h2>Heading</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas finibus mauris eu gravida. Nunc convallis eget tellus a <a href="#">auctor &#8599;</a></p>
    </section>
  </article>
    
  <section class="card">
    <h2 style="margin-bottom: 0;">Heading</h2>
    <h5>Subheading</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas finibus mauris eu gravida. Nunc convallis eget tellus a auctor. Nam ultricies ex ut nunc ultricies, eget porttitor est malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse nibh nunc, maximus eu sapien ac, convallis ultricies quam.</p>

    <p><strong>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer cursus porttitor eros facilisis pretium.</strong>
    </p>
    <p>Curabitur tempor mi ac congue <a href="#">auctor &#8599;</a></p>
    <button>Button</button>
    <button>Button</button>
    <button class="btn special-01">Button</button>
  </section>

  <section class="card">
    <h3>Heading</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas finibus mauris eu gravida. Nunc convallis eget tellus a auctor.</p>
    <blockquote>
      <p>Etiam interdum vulputate facilisis. Pellentesque vel lobortis magna, eu dictum magna.</p>
    </blockquote>
    <button class="btn special-02">Button</button>
    <button class="btn disabled">Button</button>
  </section>
 
  
</main>

CSS

/*** General QOL ***/
*, *::after, *::before {
  box-sizing: border-box;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: auto; }

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 17px;
  line-height: 1.6; }

body {
  margin: 0;
  color: #5e5e5e;  
  background: #EDE1DF; /* tan/pink */
  background: #8e9fad; /* grey/blue */
}

/* Reset focus outline */
:focus { outline: none; }
::-moz-focus-inner { border: 0; }
* { -webkit-tap-highlight-color: transparent; }

header {
  z-index: 10;
  position: fixed;
  height: 70px;
  right: 0; left: 0;
}

nav {
  font-weight: bold;
  color: #444;
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  background: #fff;
  border-bottom: 3px solid #FFBFC9;
  /* border-bottom: 2px solid #FF615C; */
}

nav a {
  flex: 1;
  flex-grow: 0;
  padding: 1rem 2rem;
  text-align: center;
  text-decoration: none;
  color: #4A6173;
}

nav a:hover {
  background: rgba(0,0,0,0.05);
  /* color: #fff; */
}

.btn-br {
  display: none;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 70px;
  height: 70px;
  color: #fff;
  background: #ffaa56;
  border-radius: 50%;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0,0,0,0.35);
  z-index: 20;
}

.btn-br span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0; left: 0;
}

.logo {
  height: 35px;
  width: 35px;
  position: absolute;
  top: 13px;
  left: 15px;
  z-index: 2;
  border-radius: 50%;
  overflow: hidden;
}

.logo .grad {
  background: linear-gradient(90deg, #6318c6 0%, #6318c6 50%, #fc6373 50%);
  height: 100%;
  width: 100%;
  margin-right: 0.9rem;
}

main {
  padding-top: 60px;
  position: relative;
}

a {
  font-weight: bold;
  color: #FF615C;
  text-decoration: none;
}

a:hover {
  /* background: #eee; */
  text-decoration: underline;
}

h1, h2, h3, h4,...