munazhe.media

index.html

<nav>
  <ul>
    <li><a href="">About</a></li>
    <li><a href="">Portfolio</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>

<div>

  <h1 class="title"> <span class="sexy"><span class="s">S</span> <span class="e">e</span> <span class="x">x</span> <span class="y">y </span></span> <span class="front-end"> Front-end's</span></h1>

  <div class="shapes">
    <div class="shape_1"></div>
    <div class="shape_2"></div>
  </div>

</div>

<div class="card">
  <div>

    <div class="details">
      <div class="bio">
        <h3>MЦПΛZΉΣ</h3>
        <h6> Full-stack developer & Designer</h6>
      </div>

      <div class="social">
        <ul>
          <a class="icon ion-social-codepen"></a>
          <a class="icon ion-social-github"></a>
          <a class="icon ion-social-twitter"></a>
        </ul>
      </div>
    </div>

    <img src="https://images.unsplash.com/profile-1597515216810-46a170020138image?dpr=1&auto=format&fit=crop&w=150&h=150&q=60&crop=faces&bg=fff" alt="">
  </div>
</div>


<div class="timeline">

  <ul class="trunk">
    <li class="branch">
      <div class="leaf l_odd">
        <div class="details">
          <h4>Mofiy</h4>
          <h6>17/01/20</h6>
          <p>An algorithmic Spotify music search engine built with Node.js </p>
          <button>more</button>
        </div>

      </div>
    </li>
    <li class="branch">
      <div class="leaf l_even">
        <div class="details">
          <h4>Gauge</h4>
          <h6>20/03/17</h6>
          <p>Very simple speed guage app for bikers. Built this while I was learning Angular.js</p>
          <button>more</button>
        </div>
      </div>
    </li>
    <li class="branch">
      <div class="leaf l_odd">
        <div class="details">
          <h4>Flexi</h4>
          <h6>12/03/18</h6>
          <p>My first CSS framework. I wanted something that could make building &  websites fast and easy.</p>
          <button>more</button>
        </div>
      </div>
    </li>
    <li class="branch">
      <div class="leaf l_even">
        <div class="details">
          <h4>TOK</h4>
          <h6>1/11/18</h6>
          <p>An experimental web chat built with socket.io, mongoDB and Node.js </p>
          <button>more</button>
        </div>
      </div>
    </li>
    <li class="branch">
      <div class="leaf l_odd">
        <div class="details">
          <h4>Plotar</h4>
          <h6>2/12/18</h6>
          <p>Simple IPFS video sharing app and concept UI (experimental).</p>
          <button>more</button>
        </div>
      </div>
    </li>
  </ul>

</div>

munazhe-media.markdown

munazhe.media

A Pen by munazhe on CodePen.

License.

style.scss

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200&display=swap");

* {
  transition: all 0.7s;
}

$body: #f5f5f5;

// h1,
// h2,
// h3 {
//   font-family: "Noto Serif", serif;
// }
// h4,
// h5,
// h6 {
//   font-family: "Cairo", sans-serif;
// }
body {
  background: $body;
}

a {
  transition: all 0.7s;
  color: darken($body, 33%);
  text-decoration: none;
  cursor: pointer;
  font-weight: 300;
  &:hover {
    color: darken(#5fffff, 3%);
    text-shadow: 2px 2px 15px darken(#5fffff, 3%);
  }
}

nav {
  width: 400px;
  height: 40px;
  margin: auto;
  padding: 1.3px 0px;
  margin-top: 18px;
  transform: translate(0px, 37px);
  border-radius: 13.777px;
  background: darken(#f5f5f5, 0.333%);
  box-shadow: 7.777px 7.777px 12px darken($body, 3.9707%),
    -7.777px -7.777px 12px lighten($body, 3.0707%);

  &:hover {
    background: $body;

    transition: all 0.7s;
    box-shadow: 4px 4px 12px darken($body, 3.9707%),
      -4px -4px 12px lighten($body, 3.0707%);
  }

  ul {
    position: absolute;
    bottom: 0;
    top: -9px;
    li {
      font-family: "Cairo", sans-serif;
      text-transform: uppercase;
      list-style: none;
      display: inline;
      margin: 0px 17px 0px 17px;
    }
  }
}

::-moz-selection {
  background: #5af;
  color: #fff;
  text-shadow: none;
}
::selection {
  background: #5af;
  color: #fff;
  text-shadow: none;
}

.title {
  text-align: center;
  margin-top: 30.777vh;
  font-size: 5rem;

  .front-end {
    color: darken($body, 13%);
    font-family: Trebuchet MS;
    font-size: 1.4rem;
  }

  .sexy {
    letter-spacing: -44px;
    text-transform: uppercase;
    font-size: 9.7rem;
    color: lighten(grey, 34%);

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Ubuntu, "Helvetica Neue", sans-serif;

    .s {
      color: #f118d4;
      opacity: 0.8;
      padding-left: 30px;
      text-shadow: -1.6px 4px 7px darken(#ea54bd, 13%);
    }
    .e {
      color: #5fffff;
      opacity: 0.8;
    }
    .x {
      color: #ffe81c;
      opacity: 0.8;
    }
    .y {
      color: darken(#ff1f22, 0%);
      text-shadow: 2px 2px 15px darken(#ff1f22, 0%);
      opacity: 0.8;
      padding-right: 37px;
    }
  }
}

.card {
  transition: all 0.7s;
  color: darken(#eef0f4, 53%);
  width: 350px;
  height: 150px;
  border-radius: 13px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Ubuntu, "Helvetica Neue", sans-serif;
  background: darken($body, 0.333%);

  box-shadow: 7.777px 7.777px 12px darken($body, 3.9707%),
    -7.777px -7.777px 12px lighten($body, 3.0707%);

  margin: 31vh auto;
  left: 0;
  right: 0;
  position: absolute;

  &:hover {
    transition: all 0.7s;
    box-shadow: none;
    background: darken($body, 0.9977%);
    img {
      transition: all 0.7s;
      filter: grayscale(30%) contrast(89.3%);
      -webkit-filter: grayscale(30%) contrast(89.3%);
    }
  }

  img {
    transition: all 0.7s;

    float: left;
    margin-left: 7px;
    top: 5px;
    width: 140px;
    position: absolute;

    filter: grayscale(30%) contrast(91.3%);
    -webkit-filter: grayscale(30%) contrast(91.3%);
  }
  .details {
    float: right;
    margin-right: 33px;
    .bio {
      text-align: center;
      margin-top: 33px;
      padding: 0;
      h3 {
        color: darken(#eef0f4, 55%);
        text-align: left;
        text-transform: capitalize;
      }
      h6 {
        color: darken(#7ff8c4, 5%);
        text-align: left;
        position: absolute;
        top: 37px;
      }
    }
    .social {
      position: absolute;
      top: 70px;
      height: 40px;
      ul {
        padding-left: 00px;
        list-style-type: none;

        a {
          display: inline;
          margin: 5px;
          font-size: 1.43rem;
        }
      }
    }
    .bio,
    .social {
      display: block;
      width: 160px;
    }
  }
}

.timeline {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Ubuntu, "Helvetica Neue", sans-serif;
  margin-top: 600px;
  .trunk {
    margin: auto;
    margin-top: 130px;
    background: darken(#f5f5f5, 0.333%);
    background: -webkit-radial-gradient(
      center,
      darken($body, 3.777%),
      lighten($body, 0.29737%)
    );
    background: -moz-radial-gradient(
      center,
      darken($body, 3.777%),
      lighten($body, 0.29737%)
    );
    background: radial-gradient(
      ellipse at center,
      darken($body, 3.777%),
      #f5f5f5
    );

    width: 3.7px;
    height: 1450px;
    margin-top: 70px;
    margin-bottom: 130px;
    padding: 0;
    padding-top: 90px;
    padding-bottom: 90px;
    list-style: none;

    .branch {
      width: 230px;
      height: 1.7px;

      &:nth-child(even) {
        background: darken($body, 13%);
        margin: 127px 0px;
        padding-right: 43px;
        float: right;
      }

      &:nth-child(odd) {
        background: darken($body, 13%);
        padding-left: 43px;
        float: left;
        margin: 127px 0px;
      }
      &:first-child {
        background: darken($body, 1.933%);
      }
      &:nth-last-child(-n + 4) {
        background: darken($body, 3.013%);
      }
      &:nth-last-child(-n + 3) {
        background: darken($body, 4.733%);
      }

      &:nth-last-child(-n + 2) {
        background: darken($body, 3.013%);
      }

      &:last-child {
        background: darken($body, 2.937%);
      }

      .l_odd {
        float: right;
        margin: auto;
        button {
          float: right;
        }
      }
      .l_even {
        float: left;
        margin: auto;
        button {
          float: right;
        }
      }
      .leaf {
        max-width: 277px;
        min-width: 30px;
        max-height: 320px;
        min-height: 30px;
        margin-top: -56.777px;
        border-radius: 23px;
        background: #f5f5f5;
        box-shadow: 7.777px 7.777px 12px darken($body, 3.9707%),
          -7.777px -7.777px 12px lighten($body, 3.0707%);

        &:hover {
          transition: all 0.7s;
          box-shadow: 3.777px 3.777px 12px darken($body, 3.9707%),
            -3.777px -3.777px 12px lighten($body, 3.0707%);
        }

        .details {
          p,
          h4,
          h6 {
            padding: 3px 23px;
            color: darken($body, 27%);
          }

          button {
            margin: 20px;

            transition: all 0.7s;
            text-decoration: none;
            cursor: pointer;
            font-weight: 300;
            border: none;
            border-radius: 7px;
            padding: 5px 12px;
            font-size: 0.87rem;
            // color: rgb(95, 255, 255);

            color: darken($body, 23%);

            &:hover {
              box-shadow: 2px 2px 15px darken(#5fffff, 3%);
              background: darken(#5fffff, 3%);
              color: white;
            }
          }

          h4 {
            text-transform: capitalize;
          }
          h6 {
            color: darken($body, 12.77%);
          }

          p {
            line-height: 23px;
            font-size: 0.97rem;
            padding: 5px inherit;
          }
        }
      }
    }
  }
}

styles

<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />