<div class="site-wrapper">
  <header class="site-header">
    <div class="container">
      <a href=""><img width="178" height="38" src="https://assets.codepen.io/162656/forecastr-logo-white.svg" alt="forecastr logo"></a>
    </div>
  </header>
  <main class="site-main">
    <div class="container">
      <h1>Sticky footer with Flexbox</h1>
      <button class="add-content" type="button">Add Content</button>
    </div>
  </main>
  <footer class="site-footer">
    <div class="container">
      <div class="logo-wrapper">
        <img width="178" height="38" src="https://assets.codepen.io/162656/forecastr-logo-white.svg" alt="forecastr logo">
        <div>...for creating memories!</div>
      </div>
      <div class="widgets-wrapper">
        <div class="widget">
          <h5>Eshop</h5>
          <ul>
            <li><a href="">Shipping</a></li>
            <li><a href="">Payment</a></li>
          </ul>
        </div>

        <div class="widget">
          <h5>Company</h5>
          <ul>
            <li><a href="">About</a></li>
            <li><a href="">History</a></li>
          </ul>
        </div>

        <div class="widget">
          <h5>Resources</h5>
          <ul>
            <li><a href="">Blog</a></li>
            <li><a href="">Help Center</a></li>
          </ul>
        </div>

        <div class="widget">
          <h5>Socials</h5>
          <ul class="socials">
            <li>
              <a target="_blank" href="" aria-label="Find us on Facebook">
                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z" />
                </svg>
              </a>
            </li>
            <li>
              <a target="_blank" href="" aria-label="Find us on Instagram">
                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M14.829 6.302c-.738-.034-.96-.04-2.829-.04s-2.09.007-2.828.04c-1.899.087-2.783.986-2.87 2.87-.033.738-.041.959-.041 2.828s.008 2.09.041 2.829c.087 1.879.967 2.783 2.87 2.87.737.033.959.041 2.828.041 1.87 0 2.091-.007 2.829-.041 1.899-.086 2.782-.988 2.87-2.87.033-.738.04-.96.04-2.829s-.007-2.09-.04-2.828c-.088-1.883-.973-2.783-2.87-2.87zm-2.829 9.293c-1.985 0-3.595-1.609-3.595-3.595 0-1.985 1.61-3.594 3.595-3.594s3.595 1.609 3.595 3.594c0 1.985-1.61 3.595-3.595 3.595zm3.737-6.491c-.464 0-.84-.376-.84-.84 0-.464.376-.84.84-.84.464 0 .84.376.84.84 0 .463-.376.84-.84.84zm-1.404 2.896c0 1.289-1.045 2.333-2.333 2.333s-2.333-1.044-2.333-2.333c0-1.289 1.045-2.333 2.333-2.333s2.333 1.044 2.333 2.333zm-2.333-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.958 14.886c-.115 2.545-1.532 3.955-4.071 4.072-.747.034-.986.042-2.887.042s-2.139-.008-2.886-.042c-2.544-.117-3.955-1.529-4.072-4.072-.034-.746-.042-.985-.042-2.886 0-1.901.008-2.139.042-2.886.117-2.544 1.529-3.955 4.072-4.071.747-.035.985-.043 2.886-.043s2.14.008 2.887.043c2.545.117 3.957 1.532 4.071 4.071.034.747.042.985.042 2.886 0 1.901-.008 2.14-.042 2.886z" />
                </svg>
              </a>
            </li>
            <li>
              <a target="_blank" href="" aria-label="Find us on LinkedIn">
                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z" />
                </svg>
              </a>
            </li>
            <li>
              <a target="_blank" target="_blank" href="" aria-label="Find us on YouTube">
                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.441 16.892c-2.102.144-6.784.144-8.883 0-2.276-.156-2.541-1.27-2.558-4.892.017-3.629.285-4.736 2.558-4.892 2.099-.144 6.782-.144 8.883 0 2.277.156 2.541 1.27 2.559 4.892-.018 3.629-.285 4.736-2.559 4.892zm-6.441-7.234l4.917 2.338-4.917 2.346v-4.684z" />
                </svg>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
</div>
<div class="creator">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</div>

/* RESET & BASIC STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --white: #fff;
  --header-bg: #d47952;
  --footer-bg: #420000;
}

* {
  box-sizing: border-box;
}

a {
  color: inherit;
}

body {
  font: 18px/1.5 sans-serif;
  margin: 0;
}

button {
  cursor: pointer;
  font-size: 100%;
}

.container {
  max-width: 1400px;
  padding: 0 20px;
  margin: 0 auto;
}

/* MAIN STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-header {
  padding: 3vh 0;
  text-align: center;
  background: var(--header-bg);
}

.site-header > div {
  display: flex;
  justify-content: center;
}

.site-header a {
  line-height: 1;
}

.site-main {
  display: flex;
  align-items: center;
  flex-grow: 1;
  text-align: center;
  margin: 30px 0;
}

.site-main h1 {
  line-height: 1.2;
  margin: 0 0 20px;
}

.site-footer {
  padding: 30px 0;
  color: var(--white);
  background: var(--footer-bg);
}

.site-footer .logo-wrapper div {
  font-style: italic;
  font-size: 15px;
  line-height: 1;
}

.site-footer .widgets-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 40px;
  border-top: 1px solid rgba(255,255,255,0.2);
  margin-top: 20px;
}

.site-footer h5 {
  font-size: 20px;
  margin: 20px 0;
}

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

.site-footer ul:not(.socials) li + li {
  margin-top: 10px;
}

.site-footer a {
  text-decoration: none;
}

.site-footer .socials {
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: flex-start;
  grid-gap: 15px;
}

.site-footer .socials svg {
  fill: var(--white);
}

@media (max-width: 650px) {
  .site-footer .widgets-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* CREATOR STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.creator {
  position: fixed;
  right: 0;
  bottom: 50px;
  display: flex;
  align-items: center;
  padding: 5px;
  font-size: 0.75em;
  background: var(--white);
}

.creator a {
  display: flex;
  margin-left: 4px;
}

const siteMainContainer = document.querySelector(".site-main > div");
const addContentBtn = document.querySelector(".add-content");

addContentBtn.addEventListener("click", function () {
  const p = document.createElement("p");
  p.textContent =
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
  siteMainContainer.appendChild(p);
});