Tram - HTML & CSS Optimized

In this example below you will see how to do a Tram - HTML & CSS Optimized with some HTML / CSS and Javascript

Read Full Blog Post Here:https://www.outsystems.com/blog/posts/from-design-to-code_creating-and-animating-images-with-css

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

<head>
  <meta charset="UTF-8">
  <title>Tram - HTML & CSS Optimized</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="stage">
  <div class="tram-top p-absolute">
    <div class="tram-top-one bg-one p-absolute center-horizontal"></div>
    <div class="tram-top-two bg-one p-absolute center-horizontal"></div>
    <div class="tram-top-three bg-two p-absolute center-horizontal">
      <div class="tram-top-three-left bg-two p-absolute"></div>
      <div class="tram-top-three-right bg-two p-absolute"></div>
    </div>
    <div class="tram-top-four bg-one p-absolute center-horizontal"></div>
    <div class="tram-top-five bg-one p-absolute"></div>
    <div class="tram-top-six bg-three p-absolute"></div>   
  </div>
  <div class="tram-front p-absolute center-horizontal">
    <div class="tram-front-one bg-three p-absolute"></div>
    <div class="tram-front-two bg-three p-absolute">
      <div class="tram-front-two-left bg-seven p-absolute"></div>
      <div class="tram-front-two-middle bg-seven p-absolute center-horizontal"></div>
      <div class="tram-front-two-right bg-seven p-absolute"></div>
    </div>
    <div class="tram-front-three bg-four p-absolute">
      <div class="tram-front-three-middle p-absolute"></div>
    </div>
    <div class="tram-front-four bg-five p-absolute">
      <div class="tram-front-four-left p-absolute"></div>
      <div class="tram-front-four-right p-absolute"></div>
    </div>
    <div class="tram-front-five bg-six p-absolute"></div>
  </div>
  <div class="tram-left p-absolute">
    <div class="tram-left-one bg-four p-absolute"></div>
    <div class="tram-left-two bg-three p-absolute"></div>
    <div class="tram-left-three bg-four p-absolute"></div>
  </div>
  <div class="tram-right p-absolute">
    <div class="tram-right-one bg-four p-absolute"></div>
    <div class="tram-right-two bg-three p-absolute"></div>
    <div class="tram-right-three bg-four p-absolute"></div>
  </div>
  <div class="tram-bottom p-absolute center-horizontal">
    <div class="tram-bottom-one bg-eight p-absolute center-horizontal"></div>
    <div class="tram-bottom-two bg-eight p-absolute center-horizontal"></div>
    <div class="tram-bottom-three bg-eight p-absolute center-horizontal"></div>   
    <div class="tram-bottom-four bg-eight p-absolute center-horizontal"></div> 
  </div>
  <div class="tram-rail p-absolute center-horizontal">
    <div class="tram-rail-left bg-nine p-absolute border"></div>
    <div class="tram-rail-right bg-nine p-absolute border"></div>
  </div>
</div>

<div class="link-article">
  <a href="https://codeburst.io/from-design-to-code-creating-and-animating-images-with-css-b10c2464f37a" target="_blank">Read Full Blog Post Here</a>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/JoseRosario/tram-html-andamp-css-optimized-wmKbzo */
/* IMPORTS */
@import url('https://fonts.googleapis.com/css?family=Raleway');

/* USEFULL CLASSES */
.bg-one { background-color: #ddca7e; }
.bg-two { background-color: #ff8a65; }
.bg-three { background-color: #47cf73; }
.bg-four { background-color: #ff3c41; }
.bg-five { background-color: #E6EE9C; }
.bg-six { background-color: #00BCD4; }
.bg-seven { background-color: #76daff; }
.bg-eight { background-color: #FFC107; }
.bg-nine { background-color: #B2DFDB; }

.p-absolute { position: absolute; }

.center-horizontal {
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

/*  GENERAL SETTINGS */
* {
  box-sizing: border-box;
}

.link-article {
  position: absolute;
  bottom: 20px;
  right: 30px;
  animation: pulse 5000ms ease-out infinite alternate;
}

@keyframes pulse {
  0% {
    transform: translateY(0);
  }
   
  5% {
    transform: translateY(-10px);
  }

  10% {
    transform: translateY(0);
  }

  15% {
    transform: translateY(-10px);
  }

  20% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(0);
  }
}

a,
a:link,
a:visited {
  color: #fff;
  text-decoration: none;
  display: block;
  transition: transform 170ms ease-out;
  background-color: rgba(0, 0, 0, 0.20);
  height: 40px;
  padding: 0 15px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

a:hover {
  transform: scale(1.1);
}

html, 
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'Raleway', sans-serif;
}

body {
  background-color: #27AAE2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.stage {
  width: 230px;
  height: 400px;
  background-color: rgba(0, 0, 0, 0.20);
  position: relative;
}

/* Main Area - Top */
.tram-top {
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  border: 4px solid rgba(0, 0, 0, 0.20);
}

.tram-top-one {
  top: 0;
  left: 50%;
  height: 4px;
  width: 110px;
}

.tram-top-two {
  top: 4px;
  left: 50%;
  height: 6px;
  width: 116px;
}

.tram-top-three {
  top: 10px;
  height: 30px;
  width: 148px;
  z-index: 2;
}

.tram-top-three-left {
  bottom: -16px;
  left: 0;
  width: 8px;
  height: 16px;
}

.tram-top-three-right {
  bottom: -16px;
  right: 0;
  width: 8px;
  height: 16px;
}

.tram-top-four {
  top: 30px;
  left: 50%;
  height: 26px;
  width: 184px;
}

.tram-top-five {
  bottom: 28px;
  height: 26px;
  width: 100%;
}

.tram-top-six {
  bottom: 0px;
  height: 28px;
  width: 100%;
}

/* Main Area - Front */
.tram-front {
  top: 80px;
  width: 186px;
  height: 200px;
  border: 4px solid rgba(0, 0, 0, 0.20);
}

.tram-front-one {
  width: 100%;
  height: 10px;
  top: 0;
  left: 0;
}

.tram-front-two {
  width: 100%;
  height: 98px;
  top: 10px;
  left: 0;
}

.tram-front-two-left {
  width: 40px;
  top: 8px;
  left: 8px;
  bottom: 8px;
}

.tram-front-two-middle {
  width: 60px;
  top: 8px;
  bottom: 8px;
}

.tram-front-two-right {
  width: 40px;
  top: 8px;
  right: 8px;
  bottom: 8px;
}

.tram-front-three {
  top: 108px;
  width: 100%;
  left: 0;
  height: 72px;
}

.tram-front-four {
  width: 100%;
  bottom: 14px;
  left: 0;
  height: 22px;
}

.tram-front-five {
  width: 100%;
  bottom: 0;
  left: 0;
  height: 14px;
}

/* Main Area - Left */
.tram-left {
  top: 100px;
  left: 0px;
  width: 22px;
  height: 180px;
  border: 4px solid rgba(0, 0, 0, 0.20);
  border-top: 0;
  border-right: 0;
}

.tram-left-one {
  height: 100%;
  top: 0;
  right: 0;
  width: 6px;
}

.tram-left-two {
  height: 122px;
  top: 0;
  right: 6px;
  width: 8px;
}

.tram-left-three {
  height: 68px;
  bottom: 16px;
  right: 6px;
  width: 8px;
}

/* Main Area - Right */
.tram-right {
  top: 100px;
  right: 0px;
  width: 22px;
  height: 180px;
  border: 4px solid rgba(0, 0, 0, 0.20);
  border-top: 0;
  border-left: 0;
}

.tram-right-one {
  height: 100%;
  top: 0;
  left: 0;
  width: 6px;
}

.tram-right-two {
  height: 122px;
  top: 0;
  left: 6px;
  width: 8px;
}

.tram-right-three {
  height: 68px;
  bottom: 16px;
  left: 6px;
  width: 8px;
}

/* Main Area - Bottom */
.tram-bottom {
  bottom: 0;
  border: 4px solid rgba(0, 0, 0, 0.20);
  border-top: 0;
  width: 186px;
  height: 124px;
}

.tram-bottom-one {
  top: 0;
  height: 8px;
  width: 154px;
}

.tram-bottom-two {
  top: 12px;
  height: 8px;
  width: 144px;
}

.tram-bottom-three {
  top: 24px;
  height: 8px;
  width: 134px;
}

.tram-bottom-four {
  top: 0px;
  height: 40px;
  width: 118px;
}

.tram-rail {
  height: 170px;
  bottom: 0;
  width: 186px;
  z-index: -1;
}

.tram-rail-left {
  height: 100%;
  width: 12px;
  top: 0;
  left: 46px;
  -webkit-transform: skew(-15deg);
  transform: skew(-15deg);
}

.tram-rail-right {
  height: 100%;
  width: 12px;
  top: 0;
  right: 46px;
  -webkit-transform: skew(15deg);
  transform: skew(15deg);
}

Comments