Commuter Line Tokyu 8500

Developer
Haeman
Size
7,031 Kb
Views
32,368

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 Previews
IQ Test

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
Commuter Line Tokyu 8500 - Script Codes
Commuter Line Tokyu 8500 - Script Codes
Home Page Home
Developer Haeman
Username pedox
Uploaded August 29, 2022
Rating 3.5
Size 7,031 Kb
Views 32,368
Do you need developer help for Commuter Line Tokyu 8500?

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!

Haeman (pedox) Script Codes
Name
Ticketbox
Pure CSS3 Button
Switch Button Single element
Thomas Bangalter Daft Punk helmet
Terminal
Martabak Box
The Rainbow
Windows 8 metro UI
Lollipop Loading
Thin Google Homepage
Create amazing captions with AI!

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!