Commuter Line Tokyu 8500
How do I make an commuter line tokyu 8500?
Commuter line in Jakarta (Indonesian) operate daily and very busy, pure css3 HAML + SASS i made @for statment to make bullet. What is a commuter line tokyu 8500? How do you make a commuter line tokyu 8500? This script and codes were developed by Haeman on 29 August 2022, Monday.
Commuter Line Tokyu 8500 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Commuter Line Tokyu 8500</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #f0f0f0;
}
.train { width: 200px; height: 300px; position: relative; margin: 0px auto; margin-top: 50px;
}
.train .body { background: #f7f6f5; position: absolute; left: 0; right: 0; top: 0; height: 250px; box-shadow: -15px 0px 40px -24px rgba(0, 0, 0, 0.5) inset, 15px 0px 40px -24px rgba(0, 0, 0, 0.5) inset; border-top-left-radius: 105px 25px; border-top-right-radius: 105px 25px;
}
.train .body .flush { background: #071119; position: absolute; left: 72px; height: 25px; right: 72px; top: 30px; border-radius: 5px; box-shadow: 0px 0px 10px #000 inset;
}
.train .body .flush:before { content: ''; display: block; position: absolute; background: #071119; height: 12px; top: 13px; left: -60px; width: 50px; border-radius: 15px; box-shadow: 0px 0px 10px #000 inset;
}
.train .body .flush:after { content: ''; display: block; position: absolute; background: #071119; height: 12px; top: 13px; right: -60px; width: 50px; border-radius: 15px; box-shadow: 0px 0px 10px #000 inset;
}
.train .body p { background: #031978; position: absolute; left: 0; right: 0; height: 60px; bottom: 40px;
}
.train .body p:nth-of-type(1):before { content: ''; display: block; position: absolute; left: 10px; right: 10px; height: 23px; background: #E5900F; top: 10px; border-radius: 0px 0px 20px 20px; border: 1px solid white;
}
.train .body p:nth-of-type(1):after { content: ''; display: block; position: absolute; left: 45px; right: 45px; height: 10px; background: #031978; top: 10px; border-radius: 0px 0px 20px 20px; border-bottom: 1px solid white; border-right: 1px solid white; border-left: 1px solid white;
}
.train .body p:nth-of-type(2) { background: #E5900F; top: 185px; left: 40px; right: 40px; height: 20px; -webkit-transform: perspective(100) rotateX(-54deg); border: 1px solid white;
}
.train .body p:nth-of-type(2):after { content: ''; display: block; background: #031978; left: 10px; right: 10px; height: 3px; top: 11px; position: absolute; box-shadow: 0px -7px 0px #031978, 0px -7px 0px 1px white; border: 1px solid white;
}
.train .body i { width: 12px; height: 8px; display: block; position: absolute; background: #313131; bottom: 42px; left: 22px; border: 2px ridge white; border-radius: 3px; box-shadow: 0px 0px 10px black inset;
}
.train .body i:nth-of-type(2) { left: auto; right: 22px;
}
.train .body .door { position: absolute; left: 69px; right: 69px; top: 60px; height: 165px; border: 5px solid transparent; border-image: -webkit-linear-gradient(-45deg, white 0%, #afafaf 24%, #afafaf 44%, #e0e0e0 71%, #9d9c9c 93%) 30 11 stretch; box-shadow: 0px 1px 3px #3D3D3D inset, 0px 1px 3px #303030;
}
.train .body .window { left: 10px; width: 45px; height: 50px; top: 75px; position: absolute; border: 4px solid transparent; border-image: -webkit-linear-gradient(-45deg, white 0%, #cecece 24%, #dddddd 44%, #fcfcfc 71%, #d6d6d6 93%) 25 5 stretch; box-shadow: 0px 1px 10px black inset, 0px 1px 3px #5C5C5C; background: -webkit-linear-gradient(35deg, #1E3445 0%, #1E3445 65%, #304454 65%, #304454 100%); border-radius: 5px;
}
.train .body .window:before { content: ''; display: block; width: 45px; left: 123px; height: 50px; top: -4px; position: absolute; border: 4px solid transparent; border-image: -webkit-linear-gradient(-45deg, white 0%, #cecece 24%, #dddddd 44%, #fcfcfc 71%, #d6d6d6 93%) 25 5 stretch; box-shadow: 0px 1px 10px black inset, 0px 1px 3px #5C5C5C; background: -webkit-linear-gradient(35deg, #1E3445 0%, #1E3445 65%, #304454 65%, #304454 100%); border-radius: 5px;
}
.train .body .window:after { content: ''; display: block; width: 32px; left: 66px; height: 60px; top: -9px; position: absolute; border: 4px solid transparent; border-image: -webkit-linear-gradient(-45deg, white 0%, #cecece 24%, #dddddd 44%, #fcfcfc 71%, #d6d6d6 93%) 25 5 stretch; box-shadow: 0px 1px 10px black inset, 0px 1px 3px #5C5C5C; background: -webkit-linear-gradient(35deg, #1E3445 0%, #1E3445 65%, #304454 65%, #304454 100%); border-radius: 5px;
}
.train .body b { position: absolute; left: 25px; bottom: 70px; width: 15px; height: 15px; background: #8B6B53; border-radius: 100px; box-shadow: 0px 0px 0px 3px #E6E6E6 inset, 0px 0px 5px 2px white inset, 0px 1px 3px rgba(0, 0, 0, 0.8);
}
.train .body b:after { position: absolute; width: 5px; height: 5px; background: rgba(255, 255, 255, 0); display: block; content: ''; box-shadow: 4px 3px 2px #ECECEC, 6px 7px 2px rgba(255, 255, 255, 0.5), 8px 3px 1px rgba(255, 255, 255, 0.4);
}
.train .body b:nth-of-type(2) { left: auto; right: 25px;
}
.train .propper { position: absolute; left: 0; right: 0; background: #d72618; bottom: 20px; height: 40px; box-shadow: 0px 33px 0px -15px #D72618, 0px 40px 0px -15px #D72618;
}
.train .propper:after { content: ''; display: block; position: absolute; left: 0; right: 0; top: 40px; height: 20px; background: #D72618; -webkit-transform: perspective(100) rotateX(-60deg); -webkit-transform-origin: top; box-shadow: 0px 33px 0px -15px #D72618;
}
.train .propper:before { content: ''; display: block; position: absolute; left: 15px; right: 15px; top: 65px; height: 15px; background: #D72618; -webkit-transform: perspective(100) rotateX(-55deg); -webkit-transform-origin: top; box-shadow: 0px 33px 0px -15px #D72618;
}
.train .propper i { background: #81170E; width: 45px; height: 20px; display: block; border-radius: 5px; position: absolute; top: 25px; left: 20px; z-index: 999; border-bottom: 1px solid #E67070; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3) inset;
}
.train .propper i:nth-of-type(2) { width: 75px; left: 70px; height: 25px; top: 20px; box-shadow: 0px -15px 0px -10px #81170E, 0px 0px 10px rgba(0, 0, 0, 0.5) inset;
}
.train .propper i:nth-of-type(3) { width: 13px; left: 170px; height: 13px; top: 20px; border-radius: 3px;
}
.train .propper i:nth-of-type(4) { left: 0px; right: 0px; position: absolute; top: 18px; width: auto; background: transparent; height: 2px; box-shadow: 0px 1px 0px #A02828; z-index: 998; border-bottom: 1px solid #EC4B4B;
}
.train .propper b { border-radius: 100px; width: 5px; height: 5px; background: #EC4031; position: absolute; bottom: -23px; left: 25px; box-shadow: 1px 1px 0px #A51A0F, 18px 0px 0px #EC4031, 19px 1px 0px #A51A0F, 36px 0px 0px #EC4031, 37px 1px 0px #A51A0F, 54px 0px 0px #EC4031, 55px 1px 0px #A51A0F, 72px 0px 0px #EC4031, 73px 1px 0px #A51A0F, 90px 0px 0px #EC4031, 91px 1px 0px #A51A0F, 108px 0px 0px #EC4031, 109px 1px 0px #A51A0F, 126px 0px 0px #EC4031, 127px 1px 0px #A51A0F, 144px 0px 0px #EC4031, 145px 1px 0px #A51A0F;
}
.train .propper p { position: absolute; left: 85px; right: 70px; top: 21px; height: 27px; background: -webkit-linear-gradient(left, black 0%, #494949 24%, black 44%, #353535 59%, #1A1010 74%, #383434 81%, #353535 91%, black 100%); z-index: 999; border-radius: 3px; box-shadow: 0px 1px 10px #000;
}
.train .wheel { width: 5px; height: 20px; background: #332717; position: absolute; bottom: -25px; left: 30px; box-shadow: 3px -5px 0px 1px #332717; z-index: -1;
}
.train .wheel:after { content: ''; display: block; width: 5px; height: 20px; background: #332717; position: absolute; bottom: 0px; left: 135px; box-shadow: -3px -5px 0px 1px #332717; z-index: -1;
}
.train:after { content: ''; display: block; position: absolute; background: transparent; left: 25px; right: 25px; height: 25px; bottom: 60px; -webkit-transform: perspective(300) rotateX(45deg); z-index: -1; box-shadow: 0px 100px 45px rgba(24, 24, 24, 0.7), 0px 90px 80px 34px rgba(0, 0, 0, 0.41);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='train'> <div class='body'> <div class='flush'></div> <p></p> <p></p> <i></i> <i></i> <b></b> <b></b> <div class='door'></div> <div class='window'></div> </div> <div class='propper'> <i></i> <i></i> <i></i> <i></i> <b></b> <p></p> </div> <div class='wheel'></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Commuter Line Tokyu 8500 - Script Codes CSS Codes
body { background: #f0f0f0;
}
.train { width: 200px; height: 300px; position: relative; margin: 0px auto; margin-top: 50px;
}
.train .body { background: #f7f6f5; position: absolute; left: 0; right: 0; top: 0; height: 250px; box-shadow: -15px 0px 40px -24px rgba(0, 0, 0, 0.5) inset, 15px 0px 40px -24px rgba(0, 0, 0, 0.5) inset; border-top-left-radius: 105px 25px; border-top-right-radius: 105px 25px;
}
.train .body .flush { background: #071119; position: absolute; left: 72px; height: 25px; right: 72px; top: 30px; border-radius: 5px; box-shadow: 0px 0px 10px #000 inset;
}
.train .body .flush:before { content: ''; display: block; position: absolute; background: #071119; height: 12px; top: 13px; left: -60px; width: 50px; border-radius: 15px; box-shadow: 0px 0px 10px #000 inset;
}
.train .body .flush:after { content: ''; display: block; position: absolute; background: #071119; height: 12px; top: 13px; right: -60px; width: 50px; border-radius: 15px; box-shadow: 0px 0px 10px #000 inset;
}
.train .body p { background: #031978; position: absolute; left: 0; right: 0; height: 60px; bottom: 40px;
}
.train .body p:nth-of-type(1):before { content: ''; display: block; position: absolute; left: 10px; right: 10px; height: 23px; background: #E5900F; top: 10px; border-radius: 0px 0px 20px 20px; border: 1px solid white;
}
.train .body p:nth-of-type(1):after { content: ''; display: block; position: absolute; left: 45px; right: 45px; height: 10px; background: #031978; top: 10px; border-radius: 0px 0px 20px 20px; border-bottom: 1px solid white; border-right: 1px solid white; border-left: 1px solid white;
}
.train .body p:nth-of-type(2) { background: #E5900F; top: 185px; left: 40px; right: 40px; height: 20px; -webkit-transform: perspective(100) rotateX(-54deg); border: 1px solid white;
}
.train .body p:nth-of-type(2):after { content: ''; display: block; background: #031978; left: 10px; right: 10px; height: 3px; top: 11px; position: absolute; box-shadow: 0px -7px 0px #031978, 0px -7px 0px 1px white; border: 1px solid white;
}
.train .body i { width: 12px; height: 8px; display: block; position: absolute; background: #313131; bottom: 42px; left: 22px; border: 2px ridge white; border-radius: 3px; box-shadow: 0px 0px 10px black inset;
}
.train .body i:nth-of-type(2) { left: auto; right: 22px;
}
.train .body .door { position: absolute; left: 69px; right: 69px; top: 60px; height: 165px; border: 5px solid transparent; border-image: -webkit-linear-gradient(-45deg, white 0%, #afafaf 24%, #afafaf 44%, #e0e0e0 71%, #9d9c9c 93%) 30 11 stretch; box-shadow: 0px 1px 3px #3D3D3D inset, 0px 1px 3px #303030;
}
.train .body .window { left: 10px; width: 45px; height: 50px; top: 75px; position: absolute; border: 4px solid transparent; border-image: -webkit-linear-gradient(-45deg, white 0%, #cecece 24%, #dddddd 44%, #fcfcfc 71%, #d6d6d6 93%) 25 5 stretch; box-shadow: 0px 1px 10px black inset, 0px 1px 3px #5C5C5C; background: -webkit-linear-gradient(35deg, #1E3445 0%, #1E3445 65%, #304454 65%, #304454 100%); border-radius: 5px;
}
.train .body .window:before { content: ''; display: block; width: 45px; left: 123px; height: 50px; top: -4px; position: absolute; border: 4px solid transparent; border-image: -webkit-linear-gradient(-45deg, white 0%, #cecece 24%, #dddddd 44%, #fcfcfc 71%, #d6d6d6 93%) 25 5 stretch; box-shadow: 0px 1px 10px black inset, 0px 1px 3px #5C5C5C; background: -webkit-linear-gradient(35deg, #1E3445 0%, #1E3445 65%, #304454 65%, #304454 100%); border-radius: 5px;
}
.train .body .window:after { content: ''; display: block; width: 32px; left: 66px; height: 60px; top: -9px; position: absolute; border: 4px solid transparent; border-image: -webkit-linear-gradient(-45deg, white 0%, #cecece 24%, #dddddd 44%, #fcfcfc 71%, #d6d6d6 93%) 25 5 stretch; box-shadow: 0px 1px 10px black inset, 0px 1px 3px #5C5C5C; background: -webkit-linear-gradient(35deg, #1E3445 0%, #1E3445 65%, #304454 65%, #304454 100%); border-radius: 5px;
}
.train .body b { position: absolute; left: 25px; bottom: 70px; width: 15px; height: 15px; background: #8B6B53; border-radius: 100px; box-shadow: 0px 0px 0px 3px #E6E6E6 inset, 0px 0px 5px 2px white inset, 0px 1px 3px rgba(0, 0, 0, 0.8);
}
.train .body b:after { position: absolute; width: 5px; height: 5px; background: rgba(255, 255, 255, 0); display: block; content: ''; box-shadow: 4px 3px 2px #ECECEC, 6px 7px 2px rgba(255, 255, 255, 0.5), 8px 3px 1px rgba(255, 255, 255, 0.4);
}
.train .body b:nth-of-type(2) { left: auto; right: 25px;
}
.train .propper { position: absolute; left: 0; right: 0; background: #d72618; bottom: 20px; height: 40px; box-shadow: 0px 33px 0px -15px #D72618, 0px 40px 0px -15px #D72618;
}
.train .propper:after { content: ''; display: block; position: absolute; left: 0; right: 0; top: 40px; height: 20px; background: #D72618; -webkit-transform: perspective(100) rotateX(-60deg); -webkit-transform-origin: top; box-shadow: 0px 33px 0px -15px #D72618;
}
.train .propper:before { content: ''; display: block; position: absolute; left: 15px; right: 15px; top: 65px; height: 15px; background: #D72618; -webkit-transform: perspective(100) rotateX(-55deg); -webkit-transform-origin: top; box-shadow: 0px 33px 0px -15px #D72618;
}
.train .propper i { background: #81170E; width: 45px; height: 20px; display: block; border-radius: 5px; position: absolute; top: 25px; left: 20px; z-index: 999; border-bottom: 1px solid #E67070; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3) inset;
}
.train .propper i:nth-of-type(2) { width: 75px; left: 70px; height: 25px; top: 20px; box-shadow: 0px -15px 0px -10px #81170E, 0px 0px 10px rgba(0, 0, 0, 0.5) inset;
}
.train .propper i:nth-of-type(3) { width: 13px; left: 170px; height: 13px; top: 20px; border-radius: 3px;
}
.train .propper i:nth-of-type(4) { left: 0px; right: 0px; position: absolute; top: 18px; width: auto; background: transparent; height: 2px; box-shadow: 0px 1px 0px #A02828; z-index: 998; border-bottom: 1px solid #EC4B4B;
}
.train .propper b { border-radius: 100px; width: 5px; height: 5px; background: #EC4031; position: absolute; bottom: -23px; left: 25px; box-shadow: 1px 1px 0px #A51A0F, 18px 0px 0px #EC4031, 19px 1px 0px #A51A0F, 36px 0px 0px #EC4031, 37px 1px 0px #A51A0F, 54px 0px 0px #EC4031, 55px 1px 0px #A51A0F, 72px 0px 0px #EC4031, 73px 1px 0px #A51A0F, 90px 0px 0px #EC4031, 91px 1px 0px #A51A0F, 108px 0px 0px #EC4031, 109px 1px 0px #A51A0F, 126px 0px 0px #EC4031, 127px 1px 0px #A51A0F, 144px 0px 0px #EC4031, 145px 1px 0px #A51A0F;
}
.train .propper p { position: absolute; left: 85px; right: 70px; top: 21px; height: 27px; background: -webkit-linear-gradient(left, black 0%, #494949 24%, black 44%, #353535 59%, #1A1010 74%, #383434 81%, #353535 91%, black 100%); z-index: 999; border-radius: 3px; box-shadow: 0px 1px 10px #000;
}
.train .wheel { width: 5px; height: 20px; background: #332717; position: absolute; bottom: -25px; left: 30px; box-shadow: 3px -5px 0px 1px #332717; z-index: -1;
}
.train .wheel:after { content: ''; display: block; width: 5px; height: 20px; background: #332717; position: absolute; bottom: 0px; left: 135px; box-shadow: -3px -5px 0px 1px #332717; z-index: -1;
}
.train:after { content: ''; display: block; position: absolute; background: transparent; left: 25px; right: 25px; height: 25px; bottom: 60px; -webkit-transform: perspective(300) rotateX(45deg); z-index: -1; box-shadow: 0px 100px 45px rgba(24, 24, 24, 0.7), 0px 90px 80px 34px rgba(0, 0, 0, 0.41);
}
Commuter Line Tokyu 8500 - Script Codes JS Codes
//Commuter Line Tokyu 8500 Series by martabak original image is http://tumblr.n2val.com/image/34626884511
Developer | Haeman |
Username | pedox |
Uploaded | August 29, 2022 |
Rating | 3.5 |
Size | 7,031 Kb |
Views | 32,384 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Ticketbox | 2,786 Kb |
WhatsApp Logo Pure CSS3 | 3,098 Kb |
Pure CSS3 Button | 2,378 Kb |
Terminal | 3,250 Kb |
Mac | 2,892 Kb |
Google Metro Flatten | 3,676 Kb |
Thomas Bangalter Daft Punk helmet | 5,729 Kb |
The Yosemite | 3,964 Kb |
Keroppi | 3,522 Kb |
Switch Button Single element | 2,741 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Basic HTML5 Structure | YuvarajTana | 1,289 Kb |
A Bouncy Menu Toggle | Billyysea | 4,563 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
Personal Logo Animation | Lloydwheeler | 3,795 Kb |
Weird glowy CSS3 game | Toneworm | 3,684 Kb |
Ripples in water | Nobitagit | 2,704 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
Wave Lines | Mikehobizal | 4,023 Kb |
CSS3 Selectables with information rollover | Jasonmayes | 9,565 Kb |
CMP5-Opdracht15 | SannevanGastel | 2,733 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!