A Pen by 12E3C3 Obligacion

Thumbnail
This awesome code was written by 12E3C3, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 12E3C3 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  12E3C3  Obligacion</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section class="landing-page">
  <nav class="main-nav">
    <a class="site-nav" href="#" active>SitePage1</a>
    <a class="site-nav" href="#">SitePage2</a>
    <a class="site-nav" href="#">SitePage3</a>
    <a class="site-nav" href="#">SitePage4</a>
    <a class="site-nav" href="#">SitePage5</a>
  </nav>
  <div class="lp-container">
    <div class="lp-art">
      <div class="lp-tri-art">1</div>
      <div class="lp-tri-art">2</div>
      <div class="lp-tri-art">3</div>
      <div class="lp-tri-art">4</div>
      <div class="lp-tri-art">5</div>
      <div class="lp-tri-art">6</div>
      <div class="lp-tri-art">7</div>
    </div>
    <div class="lp-header">
      <div class="lp-h-name"><h1>Reece Obligacion</h1></div>
      <div class="lp-h-message">Oh. You need a little dummy text for your mockup? How quaint.</div>    
    </div>
  </div>
</section>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/12E3C3/a-pen-by-12e3c3-obligacion-LyyvRV */
.landing-page {
  height: 100vh;
  width: 100%;
  margin: auto;
  background-color: #1E1E1E;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.main-nav {
    position: absolute;
/*     background-color: blue; */
    top: 5%;
    right: 25%;
    height: 20px;
    width: 500px;
    display: flex;
    font-size: 80%;
    font-weight: 300;
    flex-direction: row; 
}

.site-nav {
    display: flex;
    flex-direction: row;
    margin: 0 10% 0 10%;
    color: white;
    transition: all 0.1s ease-out;
}

.site-nav:hover {
    border-bottom: 2px solid blue;
}

.lp-container {
  height: 100%;
  width: 100%;
/*   background-color: green; */
  display: flex;
/*   flex-direction: column; */
  justify-content: center;
  align-items: center;
}

.lp-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 999;
  color: white;
}

.lp-h-name {
  font-size: 4rem;
/*   background-color: blue; */
  line-height: 0;
}

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

.lp-tri-art {
  position: absolute;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: translateY(100%) rotate(90deg); 
/*   transform-origin: top left;  */
}

.lp-tri-art:nth-child(odd) {
  animation: come-in-right 2s;
}

.lp-tri-art:nth-child(even) {
  animation: come-in-left 2s;
}

.lp-tri-art:nth-child(1) {
  top: -20%;
  left: 37%;
  opacity: 0.5;
  height: 400px;
  width: 400px;
  background-color: #acbaff;
}

.lp-tri-art:nth-child(2) {
  top: -50%;
  left: 32%;
  opacity: 0.5;
  height: 400px;
  width: 400px;
  background-color: beige;
}

.lp-tri-art:nth-child(3) {
  top: -9%;
  left: 35%;
  opacity: 0.7;
  height: 250px;
  width: 400px;
  background-color: #0abab5;
}

.lp-tri-art:nth-child(4) {
  top: -0%;
  left: 52%;
  opacity: 0.4;
  height: 250px;
  width: 400px;
  background-color: #e70000;
}

.lp-tri-art:nth-child(5) {
  top: 17%;
  left: 45%;
  opacity: 0.8;
  height: 200px;
  width: 350px;
  background-color: #f3e274;
}

.lp-tri-art:nth-child(6) {
  top: 25%;
  left: 20%;
  opacity: 0.9;
  height: 240px;
  width: 300px;
  background-color: #6bc59e;
}

.lp-tri-art:nth-child(7) {
  top: -20%;
  left: 20%;
  opacity: 0.9;
  height: 240px;
  width: 200px;
  background-color: #d4e35a;
}

/* =============Animation Begin ============ */

@keyframes come-in-right {
  0% {
    margin: 100%;
  }
  100% {
    margin-right: 0%;
  }
}

@keyframes come-in-left {
  0% {
    margin: -100%;
  }
  100% {
    margin: 0%;
  }
}

/* =============Animation End ============ */

Comments