Just a design experiment

index.html

<div class="container">
  <header>
    <h1>ANDREW <br><span class="header-second-line">M<span class="header-insert">i</span>LLAR</span></h1>
    <h2>"Only half of programming is coding. The other 90% is debugging."</h2>
    <nav class="hidden">
      <div class="hamburger">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <ul class="navigation">
        <li><a href="#"><img src="">home</a></li>
        <li><a href="#"><img src="">portfolio</a></li>
        <li><a href="#"><img src="">contact</a></li>
  <!-- <div>Icons made by <a href="https://www.flaticon.com/authors/iconnice" title="Iconnice">Iconnice</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div> -->
      </ul>
    </nav>

  </header>
  <main>
    <div>
      <div class="leader">
        <p>Leader into the main text content, with some interesting information which compelles you to read on.</p>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros arcu, condimentum eget rutrum at, convallis in leo. Sed iaculis massa id felis cursus posuere. Donec ligula ante, posuere ac lacinia nec, varius vel lectus. Aliquam id porttitor ante. Praesent feugiat cursus velit, vel suscipit felis ullamcorper ac. Cras et quam elementum, suscipit dui nec, efficitur sem. Vestibulum ut tortor eu ex aliquet rhoncus. Maecenas eu tristique odio. Cras ut porttitor lorem.</p>
      <p>Sed nec imperdiet purus. Nunc ultrices, risus et tristique sollicitudin, ligula tellus gravida elit, quis gravida nisi mauris volutpat velit. Mauris nisi metus, tincidunt in lectus vel, semper euismod elit. Praesent sollicitudin maximus lorem non aliquam. Pellentesque venenatis mi id nisi fringilla tempus. Quisque vel maximus augue, vel dignissim libero. Aenean varius tellus a felis pretium aliquam. Aliquam sit amet risus non erat aliquam condimentum quis suscipit tellus. Phasellus ullamcorper consequat elementum. Nullam vitae eros commodo, facilisis urna in, venenatis nisi. Nullam quis ante imperdiet, euismod erat dignissim, venenatis enim. Maecenas in velit id leo sodales tincidunt vitae et purus. Duis at purus dui.</p>
    </div>
    <a href="#" class="button">NEXT</a>
  </main>
</div>

just-a-design-experiment.markdown

Just a design experiment

For a new design of my website I am experimenting with

A Pen by Andrew Millar on CodePen.

License.

script.js

const hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", (e) => {
  document.getElementByTagname("html").classList.add("active");
})

style.css

html{
  font-size: 16px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  max-width: 100%;
  margin: 0;
}

a {
  text-decoration: none;
  color: initial;
}

a:link {}
a:active {}
a:focus {}
a:visited {}
a:hover {}
a:bofore, a:after {}

.navigation a {
  color: white;
}

.hidden {
  display: none;
}

.container {
  height: auto;
  display: grid;
  height: 100vh;
  grid-template-rows: auto 1fr auto;  
  font-size: 16px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 0;
  margin: 0;
}

header {
/*   width: 91%; */
  margin: 1em 1em 0;
  background-color: #376886;
  padding: 2em 2em 0;
}

.navigation {
  position: relative;
  top: 0;
  left: 0;
  color: white;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 2em 0 0;
  padding: 0;
  text-align: center;
}

.hamburger {}

.active .hamburger {}

.active .navication {}

.navigation li {
  font-sixe: 1.2em;
  display: inline-block;
  margin: 0.2em 0.2em;
  padding: 0.5em;
}


h1 {
  color: #fbeec1;
  font-size: 5em;
  line-height: 1em;
}

.header-second-line{
  color: #8d8741;
}
.header-insert {
  color: white;
  text-shadow: 0 0 5px white;
}

h2 {
  color: #DEAE8C;
}

main{
  max-width: 900px;
  margin: 2em auto;
  padding: 0 3em;
  font-family: serif;
}

main p {
  padding: 0 3.5em 0 2em;
  font-size: 1.3em;
  line-height: 1.4em;
}

.leader p {
  padding: 0;
  font-size: 1.7em;
  font-style: italic;
}

main .button {
  font-family: sans-serif;
  font-size: 0.8em;
  float: right;
  border: 1px solid grey;
  background: transparent;
  padding: .5em 1em;
  border-radius: 2  px;
  color: black;
  text-decoration: none;
}