up&up landing concept

index.html

<section class="upup stepscontainer">
  <div class="row column">
    <h2>Complete These Steps to Get Started! <br />
<small>(All must be completed to qualify)</small></h2>
  </div>
  <div class="row steps">
    <div class="medium-6 columns">
      <div class="round-icon">1</div>
      <h3>Complete the admission application</h3>
      <hr />
      <p>Applicants must complete the admission application and be admitted to Marian University. Our convenient online application is free and takes less than 15 minutes to complete.</p>
      <a href="https://marianuniversity.secure.force.com/application" class="button hollow">Admission application</a></div>
    <div class="medium-6 columns">
      <div class="round-icon">2</div>
      <h3>Apply for the Next Generation Hoosier Educators Scholarship by December 31, 2016</h3>
      <hr />
      <p>To be eligible for the full tuition, applicants MUST also apply for the Next Generation Hoosier Educators Scholarship by December 31, 2016. For more information, email the Office of Admission or call (800) 772-7264.</p>
      <a href="http://www.learnmoreindiana.org/cost/financial-aid-and-scholarships/next-generation-teacher-scholarship/" class="button hollow arrowright">Next Generation Hoosier Educators Scholarship</a> </div>
  </div>
</section>

scripts

<script src="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_Themes/lib/js/vendor/jquery.min.js"></script>
<script src="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_Themes/lib/js/foundation.js"></script>
<script src="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_Themes/lib/js/vendor/owl-carousel/owl.carousel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<script src="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_Themes/lib/js/app.js"></script>

style.scss

.upup {
  background: #f7f7f7;
  padding: 2em 0;
  h2 {
    text-transform: uppercase;
    font-size: 50px;
    margin: 0;
  }
  &.stepscontainer {
    background:#ffc107;
    color:#031e51;
    text-align:center;
    h2 {
      color:#031e51;
      small {color:#464646; text-transform:lowercase;}
    }
    .round-icon {
      background-color: #031e51;
      border-radius: 50%;
      display: table;
      height: 100px;
      margin: 0 auto;
      width: 100px;
      font-size: 3rem;
      line-height: 6rem;
      color: white;
    }
    .steps {
      margin-top: 2em;
      color:white;
      h3 {font-size: 20px; color: #031e51; text-transform:uppercase;}
      hr {width:25%; border:1px solid white;}
      p {color:#031e51;}
      a.button.hollow {color:white; border:1px solid white;}
      a.button.hollow:hover {background:rgba(3,30,81,1) !important; border: 1px solid #031e51;}
    }
  }
  .button.hollow {
      border: 1px solid #5d5d5d;
      color: #5d5d5d;
      background-color: transparent !important;
      text-transform:uppercase;
      font-weight:900;
      font-family: 'source sans pro';
      font-size: 18px;
    }
  &.halfwidthadvert {
    color:#5d5d5d;
    >.row {background:white;}
    .content {
      padding: 2em 2em 0 2em;
      h2 {font-size:40px; margin-bottom:.420em; color:#031e51;}
      p {font-size:17px;}
    }
  }
  &.fullwidthadvert {
    .button.hollow {
      border: 1px solid white;
      color: white;
    }
    h2 {
      color: white;
    }
    .contentbg {
      background-size: cover;
      background-position: center top;
      text-align: center;
      padding: 6em 0;
      color: white;
    }
  }
}

styles

<link href="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_Themes/lib/css/foundation.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_themes/lib/js/vendor/owl-carousel/owl.carousel.css" rel="stylesheet" />
<link href="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_themes/lib/js/vendor/owl-carousel/owl.theme.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
<link href="http://www.marian.edu/Sitefinity/WebsiteTemplates/Marian/App_themes/lib/css/app.css" rel="stylesheet" />

up-up-landing-concept.markdown

up&up landing concept

A Pen by ed ventura on CodePen.

License.