Dark Portfolio Links Final

In this example below you will see how to do a Dark Portfolio Links Final with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by MattttHenderson, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright MattttHenderson ©
  • HTML
  • CSS
  • JavaScript
    <body class="loading">

  <!--FULL SCREEN PRELOADER-->
  <div class="preloader"></div>

  <!--Menu-->
  <a href="#" class="link one" style="color:#fff">works</a>
  <a href="#" class="link two" style="color:#999">about</a>

  <div id="fullpage">

    <!--Close Info Section-->
    <div class="close">
      <span></span>
      <span></span>
    </div>

    <!--Work One-->
    <div class="section" class="section1">

      <!--Work General Info Container-->
      <div class="wrapper">
        <div class="container">

          <!--Black Panel Transition Between Works-->
          <div class="overflow">
            <div class="black">
            </div>
          </div>

          <!--White Panel Closing transition-->
          <div class="overflow_white">
            <div class="white">
            </div>
          </div>

          <!--Image Slider-->
          <div class="image" style="background-image: url(http://www.spab-rice.com/themeforest/avoc/demo/files/uploads/thumbnail-chair.jpg)">
          </div>

          <!--Work Titles-->
          <div class="work_headers">
            <h1>First Project</h1>
          </div>

        </div>
      </div>

      <div class="test">
        <div class="test-wrapper">
          <div class="test-content">

            <div class="info">

              <h1 class="info_header info_intro">First Project</h1>
              <h2 class="info_header info_intro">website</h2>

              <div class="info_text_container">

                <div class="work_overview info_intro">

                  <div class="overview_text">
                    <span class="work_header">Date</span>
                    <br>
                    <p>May 2016</p>
                  </div>

                  <div class="overview_text">
                    <span class="work_header">Role</span>
                    <br>
                    <p>Designer</p>
                    <p>Developer</p>
                  </div>

                  <div class="overview_text">
                    <span class="work_header">Visit</span>
                    <br><a href="http://bedfordjuniorinvestors.com/" target="_blank">Website</a>
                  </div>

                </div>

                <div class="work_desc info_intro">
                  <span class="work_header">About the Project</span>
                  <br>
                  <p> Bedford Junior Investors is young organization committed to educating high school students on the basics of investing. Students learn hands-on by investing community pledges, all to be donated to a local veterans’ charity.<br>
                    <br>BJI needed a website to direct potential sponsors to for further information. I sought to make this website professional, inviting and intuitive to please visitors, increase user retention, and increase the likelihood of a donation.<br>
                    <br>BJI needed a website to direct potential sponsors to for further information. I sought to make this website professional, inviting and intuitive to please visitors, increase user retention, and increase the likelihood of a donation.<br>
                    <br>BJI needed a website to direct potential sponsors to for further information. I sought to make this website professional, inviting and intuitive to please visitors, increase user retention, and increase the likelihood of a donation.
                  </p>
                </div>

              </div>

            </div>

            <div class="info_image info_intro" style="background-image: url(http://www.spab-rice.com/themeforest/avoc/demo/files/uploads/thumbnail-chair.jpg)">
            </div>

            <div class="info_image info_intro" style="background-image: url(http://www.spab-rice.com/themeforest/avoc/demo/files/uploads/thumbnail-chair.jpg)">
            </div>

          </div>
        </div>
      </div>

    </div>


    <!--Work Two-->
    <div class="section" class="section2">

      <!--Work General Info Container-->
      <div class="wrapper">
        <div class="container">

          <!--Black Panel Transition Between Works-->
          <div class="overflow">
            <div class="black">
            </div>
          </div>

          <!--White Panel Closing transition-->
          <div class="overflow_white">
            <div class="white">
            </div>
          </div>

          <!--Image Slider-->
          <div class="image" style="background-image: url(http://www.spab-rice.com/themeforest/avoc/demo/files/uploads/thumbnail-sixteenfrans.jpg)">
          </div>

          <!--Work Titles-->
          <div class="work_headers">
            <h1>Second Project</h1>
          </div>

        </div>
      </div>

      <div class="test">
        <div class="test-wrapper">
          <div class="test-content">

            <div class="info">

              <h1 class="info_header info_intro">Second Project</h1>
              <h2 class="info_header info_intro">website</h2>

              <div class="info_text_container">
                <div class="work_overview info_intro">

                  <div class="overview_text">
                    <span class="work_header">Date</span>
                    <br>
                    <p>May 2016</p>
                  </div>

                  <div class="overview_text">
                    <span class="work_header">Role</span>
                    <br>
                    <p>Designer</p>
                    <p>Developer</p>
                  </div>

                  <div class="overview_text">
                    <span class="work_header">Visit</span>
                    <br><a href="http://bedfordjuniorinvestors.tk/" target="_blank">Website</a>
                  </div>

                </div>

                <div class="work_desc info_intro">
                  <span class="work_header">About the Project</span>
                  <br>
                  <p> Bedford Junior Investors is young organization committed to educating high school students on the basics of investing. Students learn hands-on by investing community pledges, all to be donated to a local veterans’ charity.<br>
                    <br>BJI needed a website to direct potential sponsors to for further information. I sought to make this website professional, inviting and intuitive to please visitors, increase user retention, and increase the likelihood of a donation.<br>
                    <br>BJI needed a website to direct potential sponsors to for further information. I sought to make this website professional, inviting and intuitive to please visitors, increase user retention, and increase the likelihood of a donation.<br>
                    <br>BJI needed a website to direct potential sponsors to for further information. I sought to make this website professional, inviting and intuitive to please visitors, increase user retention, and increase the likelihood of a donation.
                  </p>
                </div>

              </div>

            </div>
            <div class="info_image info_intro" style="background-image: url(http://www.spab-rice.com/themeforest/avoc/demo/files/uploads/thumbnail-sixteenfrans.jpg)">
            </div>

            <div class="info_image info_intro" style="background-image: url(http://www.spab-rice.com/themeforest/avoc/demo/files/uploads/thumbnail-sixteenfrans.jpg)">
            </div>

          </div>
        </div>
      </div>

    </div>

</body>

/*Downloaded from https://www.codeseek.co/MattttHenderson/dark-portfolio-links-final-zNVPQO */
    .link {
  font-size: 22px;
  font-family: "Montserrat";
  text-decoration: underline;
  position: absolute;
  top: 50%;
  z-index: 1000;
}

.one {
  left: 5px;
  -webkit-transform: translate(0, -50%) rotate(90deg);
  -moz-transform: translate(0, -50%) rotate(90deg);
  -ms-transform: translate(0, -50%) rotate(90deg);
  -o-transform: translate(0, -50%) rotate(90deg);
  transform: translate(0, -50%) rotate(90deg);
}

.two {
  right: 5px;
  -webkit-transform: translate(0, -50%) rotate(-90deg);
  -moz-transform: translate(0, -50%) rotate(-90deg);
  -ms-transform: translate(0, -50%) rotate(-90deg);
  -o-transform: translate(0, -50%) rotate(-90deg);
  transform: translate(0, -50%) rotate(-90deg);
}


/* General Styles for FUllpage Elements
–––––––––––––––––––––––––––––––––––––––––––––––––– */

html.fp-enabled,
.fp-enabled body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  /*Avoid flicker on slides transitions for mobile phones #336 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

f #superContainer {
  height: 100%;
  position: relative;
  /* Touch detection for Windows 8 */
  -ms-touch-action: none;
  /* IE 11 on Windows Phone 8.1*/
  touch-action: none;
}

.fp-section {
  position: relative;
  -webkit-box-sizing: border-box;
  /* Safari<=5 Android<=3 */
  -moz-box-sizing: border-box;
  /* <=28 */
  box-sizing: border-box;
}

.fp-section.fp-table,
.fp-slide.fp-table {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.fp-tableCell {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}

.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell {
  height: auto !important;
}

.fp-responsive .fp-auto-height-responsive.fp-section,
.fp-responsive .fp-auto-height-responsive .fp-slide,
.fp-responsive .fp-auto-height-responsive .fp-tableCell {
  height: auto !important;
}

.fp-notransition {
  -webkit-transition: none !important;
  transition: none !important;
}

.fullpage-wrapper {
  width: 100%!important;
  transform: none!important;
}

.fp-section {
  width: 100%!important;
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 0;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.fp-section.active {
  visibility: visible;
  opacity: 1;
  z-index: 1;
}


/* Helper Classes
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}


/* Reset-General Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  color: black;
  background: black;
}

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

ul,
li {
  list-style-type: none;
}


/* Horizontal Slider Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.fp-slide {
  float: left;
}

.fp-slide,
.fp-slidesContainer {
  height: 100%;
  display: block;
}

.fp-slides {
  z-index: 1;
  height: 100%;
  position: relative;
  -webkit-transition: all 0.3s ease-out;
  /* Safari<=6 Android<=4.3 */
  transition: all 0.3s ease-out;
}

.fp-slidesContainer {
  float: left;
  position: relative;
  width: 100%!important;
  transform: none!important;
}

.fp-slide {
  width: 100%!important;
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 0;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-atransition: all .5s ease;
  transition: all .5s ease;
}

.fp-slide.active {
  visibility: visible;
  opacity: 1;
}

#section3 * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* Vertical Slider Anchor Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#fp-nav {
  display: none;
  position: fixed;
  z-index: 98;
  margin-top: -32px;
  top: 50%;
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
}

#fp-nav ul li,
.fp-slidesNav ul li {
  display: block;
  width: 14px;
  height: 20px;
  margin: 4px;
  position: relative;
}


/*Set anchors to Left or Right*/

#fp-nav.right {
  right: 1%;
}

#fp-nav.left {
  left: 17px;
}


/*Anchor Dot Styles*/

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  width: 3px;
  height: 3px;
  margin: -5px 0px 0px -5px;
  border: 0;
  border: 2px solid #222;
  left: 50%;
  top: 50%;
}

#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
  background: #222;
}


/* WORK.CSS STYLES
 * ------------------------------------------------------------- */


/* Custom Fulpags JS Styles for Work.html
  * --------------------------------------- */

.fp-section {
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  -o-atransition: all 0s;
  transition: all 0s;
  -webkit-transition-delay: .85s;
  -moz-transition-delay: .85s;
  -o-atransition-delay: .85s;
  transition-delay: .85s;
}

.fp-controlArrow {
  -webkit-user-select: none;
  /* webkit (safari, chrome) browsers */
  -moz-user-select: none;
  /* mozilla browsers */
  -khtml-user-select: none;
  /* webkit (konqueror) browsers */
  -ms-user-select: none;
  /* IE10+ */
  position: absolute;
  z-index: 1;
  top: 0;
  width: 100%;
  height: 95%;
  cursor: e-resize;
}

@media screen and (max-width: 450px) {
  .fp-controlArrow {
    display: none;
  }
}

.fp-controlArrow.fp-prev {
  display: none;
}


/* Custon Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

html,
body * {
  font-smoothing: antialiased !important;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
}


/*Closer*/

.close {
  position: fixed;
  width: 30px;
  height: 30px;
  left: 50%;
  margin-left: -15px;
  top: 15px;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  cursor: pointer;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.close.opened {
  opacity: 1;
  visibility: visible;
  display: block;
}

.close span {
  position: absolute;
  height: 1px;
  width: 30px;
  background: white;
  top: 14px;
}

.close span:nth-of-type(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.close span:nth-of-type(2) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


/*Intro Page Styles*/

.intro_wrapper {
  opacity: 0;
  -webkit-transition: opacity .5s;
  -moz-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
}

.wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -400px;
  margin-top: -225px;
  padding: 0;
  width: 800px;
  height: 450px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  opacity: 1;
}

.wrapper.opened {
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  -o-transition: all 0s;
  transition: all 0s;
  -webkit-transition-delay: .8s;
  -moz-transition-delay: .8s;
  -o-transition-delay: .8s;
  transition-delay: .8s;
  padding-top: 80px;
  opacity: 0;
}

.container {
  width: 100%;
  height: 100%;
}

.overflow {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

.black {
  z-index: 9;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222;
  -webkit-transform: translate3d(-100%, -100%, 0);
  -moz-transform: translate3d(-100%, -100%, 0);
  -ms-transform: translate3d(-100%, -100%, 0);
  -o-transform: translate3d(-100%, -100%, 0);
  transform: translate3d(-100%, -100%, 0);
}

.section.active .black {
  -webkit-animation: cover 1.3s;
  -moz-animation: cover 1.3s;
  -o-animation: cover 1.3s;
  animation: cover 1.3s;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
}

.overflow_white {
  position: absolute;
  width: 115%;
  height: 105%;
  margin-top: -1.5%;
  margin-left: -15%;
  overflow: hidden;
}

.white {
  z-index: 10;
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.section.active .white {
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  -o-transition: all 0s;
  transition: all 0s;
  -webkit-transform: translate3d(-100%, 0, 0);
  -moz-transform: translate3d(-100%, 0, 0);
  -ms-transform: translate3d(-100%, 0, 0);
  -o-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.white.opened {
  -webkit-animation: opened .5s forwards;
  -moz-animation: opened .5s forwards;
  -o-animation: opened .5s forwards;
  animation: opened .5s forwards;
}

.image {
  width: 99%;
  height: 99%;
  overflow: hidden;
  visibility: hidden;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-transition-delay: .5s;
  -moz-transition-delay: .5s;
  -o-transition-delay: .5s;
  transition-delay: .5s;
}

.section.active .image {
  visibility: visible;
  -webkit-transition-delay: 1.65s;
  -moz-transition-delay: 1.65s;
  -o-transition-delay: 1.65s;
  transition-delay: 1.65s;
}

@-webkit-keyframes cover {
  0% {
    -webkit-transform: translate(-98%, -100%);
  }
  20% {
    -webkit-transform: translate(-98%, 0);
  }
  50% {
    -webkit-transform: translate(0, 0);
  }
  65% {
    -webkit-transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(100%, 0);
  }
}

@-moz-keyframes cover {
  0% {
    -moz-transform: translate(-98% -100%);
  }
  20% {
    -moz-transform: translate(-98%, 0);
  }
  50% {
    -moz-transform: translate(0, 0);
  }
  65% {
    -moz-transform: translate(0, 0);
  }
  100% {
    -moz-transform: translate(100%, 0);
  }
}

@-o-keyframes cover {
  0% {
    -o-transform: translate(-98%, -100%);
  }
  20% {
    -o-transform: translate(-98%, 0);
  }
  50% {
    -o-transform: translate(0, 0);
  }
  65% {
    -o-transform: translate(0, 0);
  }
  100% {
    -o-transform: translate(100%, 0);
  }
}

@keyframes cover {
  0% {
    transform: translate(-98%, -100%);
  }
  20% {
    transform: translate(-98%, 0);
  }
  50% {
    transform: translate(0, 0);
  }
  65% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(100%, 0);
  }
}

@-webkit-keyframes opened {
  0% {
    -webkit-transform: translate(0, 100%);
  }
  100% {
    -webkit-transform: translate(0, 0);
  }
}

@-moz-keyframes opened {
  0% {
    -moz-transform: translate(0, 100%);
  }
  100% {
    -moz-transform: translate(0, 0);
  }
}

@-o-keyframes opened {
  0% {
    -o-transform: translate(0, 100%);
  }
  100% {
    -o-transform: translate(0, 0);
  }
}

@keyframes opened {
  0% {
    transform: translate(0, 100%);
  }
  100% {
    transform: translate(0, 0);
  }
}


/*Work Titles*/

.work_headers {
  position: absolute;
  top: 50%;
  width: 300px;
  height: 100px;
  overflow: hidden;
  left: -100px;
  margin-top: -50px;
  -webkit-transition: opacity .5s;
  -moz-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
}

.work_headers h1 {
  display: block;
  vertical-align: middle;
  text-transform: uppercase;
  font-family: 'Montserrat';
  font-size: 50px;
  font-weight: 700;
  color: white;
  overflow: hidden;
  visibility: hidden;
  line-height: 8;
  white-space: normal;
  -webkit-transition: all 0.85s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 0.85s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: all 0.85s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.85s cubic-bezier(0.77, 0, 0.175, 1);
  margin: 0;
  padding: 0;
}


/*Set Delay When Scrolled Out of View*/

.work_headers h1 {
  -webkit-transition-delay: .2s;
  -moz-transition-delay: .2s;
  -o-transition-delay: .2s;
  transition-delay: .2s;
}

.work_headers.active {
  opacity: 0;
}


/*Pop in When Scrolled in*/

.section.active .work_headers h1 {
  line-height: 1;
  visibility: visible;
  -webkit-transition-delay: 2s;
  -moz-transition-delay: 2s;
  -o-transition-delay: 2s;
  transition-delay: 2s;
}

.test {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  z-index: 7001;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.test.opened {
  visibility: visible;
  opacity: 1;
}

.test-wrapper {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  color: white;
  -webkit-transition: -webkit-transform 0ms;
  -webkit-transform-origin: 0px 0px;
  -webkit-transform: translate3d(0px, 0px, 0px);
}

.test-content {
  width: 800px;
  margin: auto;
  padding-bottom: 50px;
  margin-top: 200px;
}


.info_intro {
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  opacity: 0;
  -webkit-transform: translate3d(0, 20px, 0);
  -moz-transform: translate3d(0, 20px, 0);
  -ms-transform: translate3d(0, 20px, 0);
  -o-transform: translate3d(0, 20px, 0);
  transform: translate3d(0, 20px, 0);
}

.info_intro.opened {
  -webkit-transition-delay: .7s;
  -moz-transition-delay: .7s;
  -o-transition-delay: .7s;
  transition-delay: .7s;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.info_intro.opened:nth-of-type(2) {
  -webkit-transition-delay: 1s;
  -moz-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
}

.info_intro.leave {
  -webkit-animation: leave .5s;
  -moz-animation: leave .5s;
  -o-animation: leave .5s;
  animation: leave .5s;
}

.info_image {
  width: 100%;
  height: 200px;
  background-size: cover;
  margin-bottom: 15px;
  background-position: center center;
}

@-webkit-keyframes leave {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, -40px);
  }
}

@-moz-keyframes leave {
  0% {
    opacity: 1;
    -moz-transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -moz-transform: translate(0, -40px);
  }
}

@-o-keyframes leave {
  0% {
    opacity: 1;
    -o-transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -o-transform: translate(0, -40px);
  }
}

@keyframes leave {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(0, -40px);
  }
}

.info_header {
  font-family: "Montserrat";
  font-size: 45px;
  margin-left: 80px;
}

.info h2 {
  font-size: 20px;
}

.info_text_container {
  width: 450px;
  margin: auto;
  margin-top: 75px;
  padding-bottom: 50px;
}

.work_overview {
  width: 100%;
  margin-top: 10px;
  font-size: 0;
}

.overview_text {
  display: inline-block;
  width: 33.3%;
  vertical-align: top;
  font-family: 'Montserrat';
  font-size: 13px;
  color: #fff;
}

.work_header {
  font-size: 13px;
  color: #777;
}

.overview_text a {
  color: #fff;
  text-decoration: underline;
}

.work_desc {
  margin-top: 40px;
  width: 100%;
  font-family: 'Montserrat';
  font-size: 13px;
}


/* Screen Size/Mobile Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media screen and (max-width: 1100px) {
  .work_headers {
    left: -20px;
  }
}

@media screen and (max-width: 950px) {
  .wrapper {
    width: 600px;
    height: 338px;
    margin-left: -300px;
    margin-top: -169px;
  }
  .work_headers {
    left: -50px;
    margin-top: -30px;
    height: 80px;
    width: 200px;
  }
  .work_headers h1 {
    font-size: 30px;
    height: 60px;
  }
  .test-content {
    width: 700px;
  }
  .info_text_container {
    margin-top: 50px;
  }
  .info_header {
    font-size: 40px;
    margin-left: 60px;
  }
  .info h2 {
    font-size: 18px;
  }
  .overview_text {
    font-size: 12px;
  }
  .work_header {
    font-size: 11px;
  }
  .work_desc {
    font-size: 12px;
    margin-top: 35px;
  }
}

@media screen and (max-width: 790px) {
  .work_headers {
    left: -10px;
  }
}

@media screen and (max-width: 700px) {
  body * {
    -webkit-overflow-scrolling: touch;
  }
  .link {
    top: 5%;
    margin-top: -8px;
    transform: none !important;
    font-size: 18px;
  }
  .one {
    left: 20px;
  }
  .two {
    right: 20px;
  }
  .wrapper {
    width: 65%;
    height: 75%;
    margin: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  .wrapper.opened {
    padding-top: 30px;
  }
  .work_headers {
    left: -15px;
    margin-top: -40px;
    width: 260px;
    height: 80px;
  }
  .work_headers h1 {
    font-size: 40px;
    height: 125px;
    line-height: 8;
    white-space: normal;
  }
  .test-content {
    margin-top: 150px;
    width: 84%;
  }
  .info_header {
    font-size: 40px;
    margin: 0;
  }
  .info h2 {
    font-size: 15px;
  }
  .info_text_container {
    margin-top: 40px;
    width: 100%;
    overflow: hidden;
  }
  .work_overview {
    width: 110%;
  }
  .overview_text {
    font-size: 12px;
  }
  .work_header {
    font-size: 11px;
  }
  .work_desc {
    font-size: 12px;
    margin-top: 25px;
  }
}

@media screen and (max-width: 340px) {
  .info_header {
    font-size: 35px;
  }
  .info h2 {
    font-size: 15px;
  }
  .info_text_container {
    margin-top: 30px;
  }
  .work_desc {
    font-size: 11px;
    margin-top: 15px;
  }
}


/*Downloaded from https://www.codeseek.co/MattttHenderson/dark-portfolio-links-final-zNVPQO */
    //Fullpage Js General Setting//
$(document).ready(function() {
  $('#fullpage').fullpage({
    navigation: false,
    continuousVertical: true,
    controlArrows: true,
    slidesNavigation: false,
    sectionsColor: ['none', 'none', 'none', 'none'],
    anchors: ['section0', 'section1', 'section2'],
    css3: true,
    verticalCentered: false
  });
  
    var slimScroll = (function() {
    var widowHeight = $(window).height();

    if ($(window).width() > 960) {
      $('.test-wrapper').slimScroll({
        height: widowHeight,
        size: '5px',
        position: 'right',
        color: '#555',
        wheelStep: 10,
      });
    } else {
      $("#test-wrapper").slimScroll({
        destroy: true
      });
    }
  });
  
  


  $(document).ready(slimScroll);
  $(window).resize(slimScroll);

  //Open and Close Info Tabs//
  $('.work_headers h1').click(function() {
    $('.wrapper').addClass('opened');
    $('.info_intro').addClass('opened');
    $('.white').addClass('opened');
    $('.close').addClass('opened');
    $('.test').addClass('opened');
    $.fn.fullpage.setMouseWheelScrolling(false);
    $.fn.fullpage.setAllowScrolling(false);
  });
     var scrollTo_int = $('.test-wrapper').prop('scrollHeight') + 'px';
  $('.close').click(function() {
    setTimeout(function() {
      $('.wrapper').removeClass('opened');
    }, 500);
    $('.info_intro').addClass('leave');
    setTimeout(function() {
      $('.info_intro').removeClass('leave');
    }, 500);
    setTimeout(function() {
      $('.info_intro').removeClass('opened');
    }, 500);
    $('.white').removeClass('opened');
    $('.close').removeClass('opened');
    $('.test').removeClass('opened');
    setTimeout(function() {
 
$('.test-wrapper').slimScroll({scrollTo : scrollTo_int });
    }, 500);
    $.fn.fullpage.setMouseWheelScrolling(true);
    $.fn.fullpage.setAllowScrolling(true);
  });


  //Change Elements on Animation//
  var black = $('.black'),
    white = $('.white');

  //Stop Scrolling When Black Animation Begins//
  black.on('webkitAnimationStart oanimationstart msAnimationStart animationstart',
    function(e) {
      $.fn.fullpage.setMouseWheelScrolling(false);
      $.fn.fullpage.setAllowScrolling(false);
    });

  //Allow Scrolling When Black Animations Executes//
  black.on('webkitAnimationEnd oanimationend msAnimationEnd animationend',
    function(e) {
      $.fn.fullpage.setMouseWheelScrolling(true);
      $.fn.fullpage.setAllowScrolling(true);
    });

  //On Page Transition Automatically Close Menu If Open//
  white.on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
    function(e) {
      $('.button_text').removeClass('active');
      $('.info').removeClass('open');
      $('.work_headers').removeClass('active');
    });

});

Comments