A boring landing page

html-sampler.markdown

A boring landing page

The original source code comes from Jim and was adapted by me.

License.

index.html

<div class="site">

  <!-- header intro -->
  <header class="site-header flex-col">
    <h1 class="site-title">Hi There!</h1>
    <p class="site-description">Nice to meet you, i hope you enjoy this work.</p>
  </header>

  <!-- contact form -->
  <section class="contact flex-col">
    <h1 class="contact-title">Follow my blog</h1>
    <!-- form from formspree.io easy to setup -->
    <form class="contact-form flex-row" action="http://formspree.io/yourname@email.com" method="POST">
      <input type="text" placeholder="name" name="name" class="submit-name input">
      <input type="email" placeholder="email" name="_replyto" class="submit-email input">
      <input type="submit" value="Send" class="submit-btn input">
    </form>
  </section>

  <!-- social button section -->
  <section class="social flex-col">
    <h1 class="social-title">Connect with me</h1>
    <ul class="social-links flex-row">
      <li class="social-link">
        <a href="#">
            <i class="fa fa-facebook" aria-hidden="true"></i>
          </a>
      </li>
      <li class="social-link">
        <a href="#">
            <i class="fa fa-twitter" aria-hidden="true"></i>
          </a>
      </li>
      <li class="social-link">
        <a href="#" title="Linkedin">
            <i class="fa fa-linkedin" aria-hidden="true"></i>
          </a>
      </li>
      <li class="social-link">
        <a href="#">
            <i class="fa fa-google-plus" aria-hidden="true"></i>
          </a>
      </li>
      <li class="social-link">
        <a href="#">
            <i class="fa fa-instagram" aria-hidden="true"></i>
          </a>
      </li>
    </ul>
  </section>

  <!-- footer copy -->
  <footer class="site-footer flex-col">
    <p>&lbrace; <a href="http://testinggrounds.info/landingpage/HTML-CSS-Sampler.pdf" target="_blank">slides</a> : <a href="http://testinggrounds.info/landingpage/landingpage-source.zip" target="_blank">source</a> &rbrace;</p>
  </footer>

</div>
<!-- closing div of .site -->

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.css

/* this just helps to make calculating widths and heights easier
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing */
* {
  box-sizing: border-box;
}

/* background color set to the body of our html document */
html {
  background: #000;
}

/* Set basic typography for the site */
body,
html {
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  color: white;
}

/* Responsive units of measurement 
  What does rem mean?
  rem is a unit of measurement which is calculated based on the body, html font-size.
  e.g. 1rem = 16px & 1.25rem = 20px
  You can calculate this by dividing your target px size by 16
  e.g. 20 / 16 = 1.25
  so 32px would be 32 / 16 which equals 2rem
*/

/* Basic styling of links and inputs */
a,
a:visited {
  color: white;
  text-decoration: none;
  transition: 0.5s;
}

a:hover {
  color: rgb(46, 150, 219);
}

/* style the .site wrapper and add some positioning with flexbox */
.site {
  position: relative;
  height: 100vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

/*
  A bit of fancy animation for our background image 
  Don't worry if this doesn't make sense, but what we are selecting is a psuedo element
  https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
*/
.site::before {
  animation: fade-slide-down 2s 0.5s cubic-bezier(0, 0.5, 0, 1) forwards;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)),
    url(https://picsum.photos/2000/1000?image=560) no-repeat center;
  background-size: cover;
  position: absolute;
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0;
  right: 0;
  top: 0;
  z-index: -1;
}

.flex-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.site-header {
  width: 100%;
  padding: 3rem 0 1rem 0; /* padding vaules, top, right, bottom, left */
}

.site-title {
  font-size: 2.5rem;
  margin: 0 0 1.25rem 0; /* margin values top, right, bottom, left */
}

.site-description {
  font-size: 1.5rem;
  margin: 0 0 1.25rem 0;
  line-height: 2.5rem;
}

.contact {
  margin-bottom: 1.25rem;
}

.contact-title {
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}

.input {
  text-align: center;
  padding: 0.5rem;
  border: none;
  width: 33.333%;
  flex: 1 1 33.333%;
  opacity: 0.8;
  transition: 0.5s;
}

.input:hover {
  opacity: 0.9;
}

.input:focus {
  opacity: 1;
}

.submit-name {
  border-radius: 10px 0 0 10px;
}

.submit-btn {
  border-radius: 0 10px 10px 0;
  background: rgb(46, 150, 219);
  color: white;
  cursor: pointer;
}

.submit-btn:hover {
  opacity: 0.9;
}

.submit-btn:focus {
  opacity: 1;
}

.social {
  width: 100%;
}

.social-links {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 417px;
}

.social-link {
  font-size: 2rem;
  flex: 1 1 auto;
}

.social-title {
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}

.site-footer {
  width: 100%;
}

/* Animations */
@keyframes fade-slide-down {
  0% {
    opacity: 0;
    transform: translateY(-4rem);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}