�� <!DOCTYPE html> <!-- saved from url=(0126)https://googlesamples.github.io/web-fundamentals/samples/getting-started/your-first-multi-screen-site/content-with-styles.html --> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Bayu's Portfolio</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-0365989963097136", enable_page_level_ads: true }); </script> <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,200,100&subset=latin,cyrillic" rel="stylesheet"> <!-- // [start style] --><style> #download { float: left; padding: 10px; padding-bottom: 20px; } a { text-decoration: none; } a:link, a:visited { color: white; } a:hover { color: white; } p a { color: #00BCD4 !important; font-weight: bolder; } quote { color: #00BCD4 !important; /* font-size: larger; */ background-color: #f5f5f5; display: block; padding: 20px; font-weight: bolder; } body { margin: 0; padding: 0; color: #e7e9ee; } #atas { width: 100%; height: 48px; display: block; z-index: 9; position: fixed; background-color: #00BCD4; font-family: Roboto, sans-serif; font-weight: 100; font-size: 18px; color:white; } #atas-judul { margin: auto; max-width: 200px; line-height: 48px; } h2 { color: #00BCD4 !important; } a { text-decoration: none; } #headline { text-shadow: black 1px 1px 11px; padding-top: 48px !important; padding: 0px; margin: 0px; color: white; font-family: Roboto, helvetica, arial, sans-serif; background: transparent; background-position: top center; background-size: cover; } #headline h1 { font-weight: 200; font-size: 60px; line-height: 1em; margin-bottom: 0; } #headline h2 { font-weight: 200; font-size: 30px; margin-top: 5px; } #headline #blurb { font-weight: 300; font-size: 18px; } #headline #register { background-color: #39b1a4; background-color: rgba(57,177, 164, 0.7); padding: 1em; } #headline #register h2 { font-weight: 100; padding: 0; margin: 0; } #headline #register label { font-size: 1.2em; font-weight: 200; padding-top: 12px; display: block; } #headline #register input { width: 100%; font-size: 18px; font-weight: 200; padding: 10px; box-sizing: border-box; } #headline #register input[type=submit] { background-color: hsl(8, 70%, 54%); color: white; margin-top: 20px; padding: 10px; border: none; box-sizing: border-box; font-size: 18px; } #section1, #section2, #section3 { box-sizing: border-box; padding: 20px; } #section1 h2, #section2 h2, #section3 h2 { margin-top: 0; font-size: 24px } #section1 { background-color: #2a2e2e; font-family: Roboto, sans-serif; font-weight: 300; font-size: 18px; line-height: 28px; } #section1 h2 { font-weight: 300; text-align: left; margin-bottom: 0px; margin-top: 20px; } #section1 h2 + p { } #section1 video { width: 100%; } #section1 img { width: 100%; } #section2 { background-color: #e9e9e9; font-family: Roboto, sans-serif; font-weight: 100; font-size: 18px; } #section2 h2 { font-weight: 300; text-align: center; margin-bottom: 0px; margin-top: 20px; } #section2 h2 + p { text-align: center; } #section2 div { text-align: center; } #section2 div img { width: 100% } #section3 { background-color: #f5f5f5; font-family: Roboto, sans-serif; font-weight: 100; text-align: center; margin: auto; } #section3 h2 { font-weight: 300; text-align: center; margin-bottom: 0px; margin-top: 20px; } #section3 h2 + p { text-align: center; } #section3 figure { text-align: center; } #section3 figure figcaption { text-align: center; font-weight: 400; } footer { font-family: Roboto, sans-serif; font-weight: 300; text-align: left; /* background-color: hsl(8, 70%, 54%); */ background-color: #21252b; color: white; padding: 20px; } table { margin-top: 26px; width: 100%; } thead { font-weight: bold; } tbody { text-align: center; } @media screen and (max-width: 600px) { video { top:-5px; } table thead { display: none; } table td { display: block; position: relative; padding-left: 50%; padding-top: 13px; padding-bottom: 13px; text-align: left; background: #e9e9e9; } table td:before { content: attr(data-th) " :"; display: inline-block; color: #000000; background: #e9e9e9; border-right: 2px solid transparent; position: absolute; top: 0; left: 0; bottom: 0; width: 33%; max-height: 100%; font-size: 16px; font-weight: 300; padding-left: 13px; padding-top: 13px; } } @media screen and (min-width: 600px) { video { top:-5px; } #img-kiri img { float:left !important; margin-left: -10%;} #headline { padding-top: 48px; padding: 0px; color: white; font-family: Roboto, helvetica, arial, sans-serif; background-color: transparent; background-size: cover; } .container { padding: 32px; margin: auto; max-width: 800px; } .container0 { margin: auto; max-width: 1024px; } #headline #blurb { float: left; font-weight: 200; width: 50%; font-size: 18px; box-sizing: border-box; padding-right: 10px; } #headline br { clear: both; } #headline #register { float:right; padding: 20px; width: 50%; box-sizing: border-box; font-weight: 300; } #section1 #section2, #section3 { box-sizing: border-box; padding: 10px 20% 80px 20%; } #section1 h2, #section2 h2, #section3 h2 { margin-top: 0px; font-size: 30px; font-style: normal; } #section1 ul { box-sizing: border-box; float: left; width: 50%; padding-right: 1em; } #section1 video { box-sizing: border-box; width: 50%; float: right; } #section1 img { /* box-sizing: border-box; width: 50%; float: right; padding: 20px; */ } #section1 br { clear: both; } #section2 div img { width: 30%; margin: 1%; box-sizing: border-box; border-radius: 50% 50%; box-shadow: black 0px 0px 5px; } } #penulis { display: block; text-align: right; text-decoration: none; font-style: italic; color: #00BCD4; } #penulis a { color: #00BCD4; } #atas-judul img { float: left; height: 48px; /* border: white 2px solid; */ /* border-radius: 100px; */ margin: auto; display: block; margin-right: 5px; } #youtube { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } #youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #download img { height: 32px; width: auto; float: left; } #download a { color: #FF9800; font-weight: bolder; margin-left: 10px; } #stabilo { background: red; padding: 5pt; font-weight: bold; } </style> </head> <body> <div id="atas"><a href="//bramantya.org"><div id="atas-judul"><img src="../img/me/fotobunder.png"><center>Bayu's Portfolio</center></div></a></div> <div id="headline" style=" background-image: url(../img/me/game.png); "> <!-- <video style="position:absolute;z-index:-1;" width="100%" height="auto" autoplay loop> <source src="../img/me/timelapse1.mp4" type="video/mp4"> </video> --> <div class="container"> <header> <center><h1>GAME & APP</h1></center> <a href="#" target="_self"><center><p>Play/Create</p></center></a> </header> <br></div></div> <div id="section1"> <div class="container0"> <!-- <h2>"It's more than a moving picture </h2> --> <!-- <div id="penulis"><a align="right" href="http://www.ishtar-collective.net/cards/exo">Exo Grimoire</a></div> --> </div> <div class="container"> <p><a href="https://app.bramantya.org/"> <div id="stabilo"> <center> Click here to see my latest apps </center> </div></a> <br /> <h2>Realistic interior showcase app</h2> </p> <p> Lightweight! Even works fine on old phones! <p> <div id="youtube"> <iframe width="854" height="480" src="https://www.youtube.com/embed/oZny2E6251Y" frameborder="0" allowfullscreen></iframe> </div> </p> <br /> <br /> <h2>Video Combiner for Nintendo Switch</h2> </p> <p style="font-size:24px;">=ؼ��=ؼ��=ؼ��=ؼ��=ؼ�� �'� <img src="./switchvideocombiner-icon48.png" style="width:48px !important; vertical-align: text-bottom;"> �'� =ؼ�� </p> <p> Nintendo Switch only able to record videos for 30s, resulting in tons of chunks of short videos if you want to record long play session. This app will combine these chunks into one in seconds, without losing any quality. <p>+ Download switchvideocombiner.exe (ver. 0.1.1) from (<a href="//bramantya.org/stash/switchvideocombiner.exe">Main Server</a> | <a hef="https://archive.org/details/switchvideocombiner">Archive.org</a>)</p> <p>CHANGELOG 0.1.1 <br />+ App icon </p> <p>CHANGELOG 0.1 <br />+ Initial release </p> </p> <!-- <p> <a href="https://play.google.com/store/apps/details?id=org.bramantya.comicmax&hl=en" target="_blank" ><div id="download"><img src="../img/me/playstore.png"></div></a> </p> --> <p> <div id="youtube"> <iframe width="854" height="480" src="https://www.youtube.com/embed/G0g0xmIrUSc" frameborder="0" allowfullscreen></iframe> </div> </p> <br /> <br /> <p> <h2>P.T. Silent Hills Recovery Project</h2> </p> <p> P.T., also known as Silent Hills is an historical masterpiece made by Hideo Kojima and Guillermo Del Toro. But it has been taken away, wiped from existence. My effort to recover its access was covered by a lot of international video game and technology websites. <p>+ <a href="http://www.polygon.com/2015/12/16/10296546/pt-hideo-kojima-silent-hills-re-download-ps4">Polygon</a> + <a href="http://www.eurogamer.net/articles/2016-04-18-theres-a-slightly-fiddly-way-to-re-download-p-t">Eurogamer</a> + <a href="http://www.technobuffalo.com/2016/04/19/how-to-download-pt-on-ps4-again/">Technobuffalo</a> + <a href="https://www.google.com/#q=p.t.+download+suwi">Many more!</a></p> </p> <!-- <p> <a href="https://play.google.com/store/apps/details?id=org.bramantya.comicmax&hl=en" target="_blank" ><div id="download"><img src="../img/me/playstore.png"></div></a> </p> --> <p> <div id="youtube"> <iframe width="854" height="480" src="https://www.youtube.com/embed/uDpiq4xmkjM" frameborder="0" allowfullscreen></iframe> </div> </p> <br /> <br /> <p> <h2>Mafia II Empire Expander</h2> </p> <p> Pioneered the restoration of cut content functionality and expanded the Empire Bay. </p> <p> <a href="http://game.bramantya.org/m2ex/" target="_blank" ><div id="download">Download NOW<img src="../img/me/download.png"></div></a> </p> <p> <img src="../img/me/m2ex.png" style="max-width:400px !important;"> </p> <br /> <br /> <p> <h2>Glove Xperia</h2> </p> <p> <strong>MORE THAN 20000 INSTALLS! </strong>Enable Glove Mode and increase screen sensitivity. </p> <p> <a href="https://play.google.com/store/apps/details?id=t.gimbot.glove&hl=en" target="_blank" ><div id="download"><img src="../img/me/playstore.png"></div></a> </p> <p> <img src="../img/me/xperiaglove.jpg"> </p> <br /> <br /> <p> <h2 id="usb" >Disable USB Charging</h2> </p> <p> Keep your battery healthy by disabling USB charging. Nifty for Android Developers that often use ADB via USB. </p> <p> <div id="download"><a href="https://play.google.com/store/apps/details?id=org.bramantya.stopcharging&hl=en" target="_blank" ><img src="../img/me/playstore.png"></a></div> <div id="download"><a href="http://app-liv.com/" target="_blank" ><img src="https://app-liv.com/images/apps/logo_s.png"></a></div> </p> <!--<p> <img src="../img/me/puzzle.jpg"> </p> --> <br /> <br /> <h2>Kuis Puzzle Snack 90an</h2> </p> <p> Challange your memory and puzzle solving skill. </p> <p> <a href="https://play.google.com/store/apps/details?id=com.gimbot.snack90&hl=en" target="_blank" ><div id="download"><img src="../img/me/playstore.png"></div></a> </p> <p> <img src="../img/me/puzzle.jpg"> </p> <br /> <br /> <p> <h2>Food Warz</h2> </p> <p> One-level protoype of food eating competition video game, complemented with design-it-yourself clothing pattern. </p> <p> <a href="http://bramantya.org/games/foodwarz/" target="_blank" ><div id="download"><img src="../img/me/html532.png"> Play NOW</div></a> </p> <p> <img src="../img/me/foodwarz.png"> </p> <br /> <br /> <p> <h2>Flapp</h2> </p> <p> Balloon Trip / Flappy Bird clone made in one evening </p> <p> <a href="http://bramantya.org/games/flapp/" target="_blank" ><div id="download"><img src="../img/me/html532.png"> Play NOW</div></a> </p> <p> <img src="../img/me/flapp.png"> </p> <br /> <br /> <p> <h2>Dirt 2 - Batik Liveries</h2> </p> <p> Rally car with Batik pattern as its Liveries. </p> <p> <a href="http://game.bramantya.org/2-dirt-2-livery-baru-hati-indonesia-dan-gamexeon/" target="_blank" ><div id="download">Download NOW<img src="../img/me/download.png"></div></a> </p> <p> <img src="../img/me/mobilbatik.jpg"> </p> <br /> <br /> <p> <h2>Comic Max</h2> </p> <p> Hassle-free opensource comic reader. </p> <p> <a href="https://play.google.com/store/apps/details?id=org.bramantya.comicmax&hl=en" target="_blank" ><div id="download"><img src="../img/me/playstore.png"></div></a> </p> <p> <img src="../img/me/comicmax.png"> </p> <br /> <br /> </div> <!-- <img src="./img/exo-stranger.jpg" style="width:100% !important;"> --> <div class="container"> <!-- <center><p><a href="https://www.youtube.com/playlist?list=PLiNZwWCliJcCNi3Z6l_ezOxGIdx-7cMWf">Watch More on YouTube</a></p></center> --> <br></div> <div id="disqus_thread" style="border-top:#00BCD4 solid 5px;"></div> <script type="text/javascript"> /* * * CONFIGURATION VARIABLES * * */ var disqus_shortname = 'destinylorearchive'; /* * * DON'T EDIT BELOW THIS LINE * * */ (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript> </div> <!-- <div id="section2"><div class="container"><h2>Who will teach me?</h2><p>Some of the world's leading web developers.</p> <div id="images"><img src="./CS256_ Mobile Web Development - full content with styles_files/chriswilson.png" alt="Chris Wilson Course Instructor"> <img src="./CS256_ Mobile Web Development - full content with styles_files/peterlubbers.png" alt="Peter Lubbers Course Instructor"> <img src="./CS256_ Mobile Web Development - full content with styles_files/seanbennett.png" alt="Sean Bennet Course Developer"></div> <br></div></div><div id="section3"><div class="container"><h2>Mobile. Why should I care?</h2><p>It is huge. Everywhere.</p><table><caption><p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p></caption><thead><tr><th>Country</th><th>Desktop share</th><th>Tablet share</th><th>Mobile share</th></tr></thead><colgroup><col span="1"><col span="1"><col span="1"><col span="1"></colgroup><tbody><tr><td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td><td data-th="Desktop share">32%</td><td data-th="Table share">1%</td><td data-th="Mobile share">67%</td></tr><tr><td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td><td data-th="Desktop share">69%</td><td data-th="Table share">13%</td><td data-th="Mobile share">18%</td></tr><tr><td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td><td data-th="Desktop share">69%</td><td data-th="Table share">9%</td><td data-th="Mobile share">22%</td></tr><tr><td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td><td data-th="Desktop share">86%</td><td data-th="Table share">4%</td><td data-th="Mobile share">10%</td></tr></tbody></table></div></div> --> <footer><div class="container" > <center><p>"Saat suatu kejadian berhenti diberitakan, masyarakat akan melupakannya" - Bayu Bramantya</p></center> <center><img style="width:64px;" src="../img/logo.png"></center> </div> </footer> <script type="text/javascript">function init() { window.matchMedia("(max-width: 600px)").addListener(hitMQ); } function hitMQ(evt) { sampleCompleted("GettingStarted-ContentWithStyles"); } init();</script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-64340744-1', 'auto'); ga('send', 'pageview'); </script> </body></html>