OpenCasting Onboard Tips

index.html

<div class="gradients">
  <div class="gradient-7">
    <div class="content">
      <div class="title">
        <h1>Congrats on getting the audition!</h1></div>
     <div class="image"> <img src="https://cdn2.iconfinder.com/data/icons/circle-icons-1/64/clapboard-256.png"/><br/></div>
            <div class="bottom"><p>
              We've put together a few tips to help you get that role using our app!
              </p></div>
    </div>
  </div>
  <div class="gradient-6">
  <div class="content">
    <div class="title"><h1>1</h1></div>
     <div class="image"> <img src="https://cdn0.iconfinder.com/data/icons/kameleon-free-pack-rounded/110/Television-Shelf-256.png"/></div>
            <div class="bottom"><p>
              Take your audition in a distraction free
              environment that best suits the role you are
              applying for.
              </p></div>
    </div>
  </div>
  <div class="gradient-5">
    <div class="content">
       <div class="title"><h1>2</h1></div>
    <div class="image">  <img src="https://cdn0.iconfinder.com/data/icons/kameleon-free-pack-rounded/110/Batman-256.png"/></div>
       <div class="bottom">     <p>
              Remember you can practice as many times
              as you need to feel comfortable.
         </p></div>
    </div>
  </div>
  <div class="gradient-4">
    <div class="content">
       <div class="title"><h1>3</h1></div>
   <div class="image">   <img src="https://cdn0.iconfinder.com/data/icons/kameleon-free-pack-rounded/110/Video-Camera-2-256.png"/>
      </div>  <div class="bottom">  <p>
              To prevent blurry or shaky recording, you
              may want to prop up your device on a
              steady surface.
      </p></div>
    </div>
  </div>
  <div class="gradient-3">
    <div class="content">
        <div class="title"><h1>4</h1></div>
      <div class="image"><img src="https://cdn0.iconfinder.com/data/icons/kameleon-free-pack-rounded/110/Ninja-256.png"/>
      </div><div class="bottom"><p>
              Keep your head and shoulders centered in
              the camera’s view.
      </p></div>
    </div>
  </div>
  <div class="gradient-2">
    <div class="content">
        <div class="title"><h1>5</h1></div>
      <div class="image"><img src="https://cdn0.iconfinder.com/data/icons/kameleon-free-pack-rounded/110/Boss-3-256.png"/></div>
            <div class="bottom"><p>
              Dress appropriately for this audition and
              make eye contact with your camera
              whenever possible.
              </p></div>
    </div>
  </div>
  <div class="gradient-1">
    <div class="content">
        <div class="title"><h1>6</h1></div>
      <div class="image"><img src="https://cdn0.iconfinder.com/data/icons/kameleon-free-pack-rounded/110/Heart-Watch-256.png"/></div>
           <div class="bottom"> <p>
              You will have 2 minutes per recording, so
              be sure to use only the time you need.
             </p></div>
    </div>
  </div>
</div>
<div class="bar">
  <center><h1>Audition Tips</h1></center>
</div>

opencasting-onboard-tips.markdown

OpenCasting Onboard Tips

Experiments with my portfolio background

A Pen by Raj K Singh on CodePen.

License.

script.js

$(document).ready(function(){
  $(".gradients").slick({
    fade: true,
    autoplay: false,
  });
});

scripts

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>

style.less

////////////////////////////////////////
// Presentational styling
////////////////////////////////////////

.gradients {
  position: relative;
  font-family: 'Lato', sans-serif;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Lato', sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
}

.title {
  position: absolute;
  top: 4.25rem;
}

.title h1 {
  font-weight: 300;
  font-size: 1.65rem;
  color: #ff3366;
  margin-top: 0;
}

.content h1 {
  font-weight: 300;
  font-size: 1.65rem;
  color: #ff3366;
  margin-top: 0;
}

.content h2{
  font-weight: 400;
  font-size: 1.5rem;
  color: #292929;
  line-height: 2rem;
  margin: 0;
  text-transform: uppercase;
}

.content p{
  font-weight: 300;
  font-size: 1.15rem;
  color: #292929;
  line-height: 1.5rem;
  margin: 0;
  margin-left: 10%;
  margin-right: 10%;
  
}



.underline {
  background: #000;
  height: .15rem;
  width: 2rem;
  margin-top: -20px;
}

.image {
  position: absolute;
  top: 30%;
}

.bottom {
  position: absolute;
  bottom: 5%;
}

.content img {
  margin-bottom: 1rem;
}

.slick-arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 0;
  height: 0;
  padding: 0;
  font-size: 0;
  background-color: transparent;
  border-style: solid;
  outline: none;
  transition: border-color .25s;
}

.slick-prev {
  left: 20px;
  border-width: 25px 25px 25px 0;
  border-color: transparent #ff3366 transparent transparent;
  
  &:hover {
    border-color: transparent #ff3366 transparent transparent;
  }
}

.slick-next {
  right: 20px;
  border-width: 25px 0 25px 25px;
  border-color: transparent transparent transparent #ff3366;
  
  &:hover {
    border-color: transparent transparent transparent #ff3366;
  }
}


////////////////////////////////////////
// Gradients
////////////////////////////////////////

[class^="gradient"] {
  height: 100vh;
}

.gradient-6 {
  background-color: #fff;
}

.gradient-5 {
  background-color: transparent;
}

.gradient-4 {
  background-color: transparent;
}
.gradient-3 {
  background-color: transparent;
}
.gradient-2 {
  background-color: transparent;
}
.gradient-1 {
  background-color: transparent;
}


.bar {
  position: absolute;
  top: 0;
  width: 100%;
  background: #292929;
}

.bar center h1{
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  color: white;
}

styles

<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" rel="stylesheet" />