Membuat Gedung Sate Dengan CSS

06:36:00 45 Comments
Membuat Gedung Sate Dengan CSS

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ 


Berjumpa lagi dengan saya selaku admin codingpintar.blogspot.com . .
masih semangat kan untuk belajar coding nya heheh  ^_^

pada kesempatan kali ini saya masih ingin membagikan sesuatu yang di buat oleh css.
kalau pada tutorial sebelumnya kita sudah membuat animasi yang terakhir adalah Membuat Animasi Motor Dengan CSS yang bisa anda lihat tutorial dan demonya DISINI 
Nah pada hari ini saya tidak akan bahas mengenai pembuatan animasi lagi melainkan sebuah karya yang  cukup indah yaitu Membuat Gedung Sate Dengan CSS, oh iya sekali lagi saya ingatkan karya ini bukan buatan saya melainkan salah seorang programmer yang hebatnya dia berasal dari INDONESIA yang bernama Khamil Aryansyah anda bisa melihat profilnya melalui twtternya di @arkhlima
seperti biasa karya dia sengaja saya share disini karena saya menyukainya dan supaya kita semua dapat menikmati karyanya,
tidak usah berlama-lama lagi langsung saja ikuti tutorial Cara Membuat Gedung Sate Dengan CSS pada kali ini dengan baik dan benar.

1. Langkah Pertama Adalah Membuat Script HTML
seperti tutorial-tutorial sebelumnya untuk membuat sesuatu yang menarik jangan lupa untuk membuat file htmlnya terlebih dahulu, file html memang sangat penting untuk membuat aplikasi berbasis web, jadi silahkan anda buat file html bernama index.html, lalu ketikkan script di bawah ini : 

<!DOCTYPE html>
<html>
<head>
 <title>Gedung Sate</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
        <div class="container">
            <ul class="sky">
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="gedung-sate">
                <div class="bd bd1">
                    <div></div>
                    <div>
                        <div>
                            <ul>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                            <ul>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="bd2-wrap">
                    <div class="bd bd2">
                        <div></div>
                        <div>
                            <div>
                                <ul>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                                <ul>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                        
                    <div class="bd cbd absolutely">
                        <div></div>
                        <div>
                            <ul>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                        <div></div>
                    </div>

                    <div class="bd bd2">
                        <div></div>
                        <div>
                            <div>
                                <ul>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                                <ul>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bd bd3 absolutely">
                    <div></div>
                    <div>
                        <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>

                <div class="bd bd4 absolutely">
                    <div>
                        <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <div></div>
                    <div></div>
                </div>

                <div class="bd bd5 absolutely">
                    <ul>
                        <li>
                            <div></div>
                        </li>
                        <li>
                            <div></div>
                        </li>
                        <li>
                            <div></div>
                        </li>
                    </ul>
                    <ol>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                </div>
            </div>
            <hgroup>
                <h1>Gedung Sate</h1>
                <h4>Bandung, Indonesia</h4>
            </hgroup>
        </div>
</body>
</html>


Seperti biasa sebelum membuat stylenya silahkan anda coba dulu membuka file htmlnya,
ya benar hasilnya hanya berupa titik yang gak jelas
agar terbentuk Gedung Sate nya Silahkan ikuti langkah selanjutnya

2. Membuat File CSS
file css memang sangat penting untuk membuat hal yang menarik di website, ya karena tanpa file css kita tidak akan bisa membuat gedung sate tersebut. silahkan anda buat file bernama style.css setelah itu ketikkan script di bawah ini :

@import url(http://fonts.googleapis.com/css?family=Roboto:300);

*,
*:after,
*:before {
    box-sizing:border-box;
}
body,
h1,
h4 {
    margin:0;
    padding:0;
}
body {
    color:#607d8b;
    font-family:"Roboto",sans-serif;
    background:#263238;
}
h1,
h4 {
    font-weight:300;
}
h1 {
    font-style:italic;
}
ul,
ol {
    margin:0;
    padding:0;
}
li {
    list-style:none;
}
hgroup {
    margin-top:25px;
    text-align:center;
}

/* container */
.container {
    margin:75px auto;
}

/* gedung sate */
.gedung-sate {
    margin:auto;
    width:939px;
    height:335px;
    position:relative;
}

/* bd */
.bd:before,
.bd:after,
.bd,
.sky:before,
.sky,
.sky li:before,
.sky li:after,
.sky li,
.sky div {
    position:absolute;
}
.bd:before,
.bd:after,
.bd5 ul li:before,
.bd5 ul li:after {
    z-index:1;
    top:-65px;
    width:38px;
    height:128px;
}
.bd:before,
.bd:after,
.bd > div:before,
.bd > div:after,
.bd5 ul li:before,
.bd5 ul li:after,
.bd5 ul li div:before,
.bd5 ul li div:after,
.bd5 ol:before,
.sky:before,
.sky li:before,
.sky li:after {
    content:'';
    display:block;
    border:1px solid;
}
.bd > div:before,
.bd > div:after,
.bd > div {
    background:#263238;
}
.bd > div:first-child:before,
.bd > div:first-child:after {
    z-index:2;
    height:4px;
}
.bd > div:first-child:after {
    height:6px;
    width:100%;
}
.bd > div:last-child:before,
.bd > div:last-child:after {
    width:12px;
    bottom:-1px;
    position:absolute;
}
.bd > div:last-child:before {
    left:-5px;
}
.bd > div:last-child:after {
    right:-5px;
}
.bd div,
.bd ul {
    width:100%;
    display:flex;
    display:-ms-flexbox;
    display:-webkit-box;
    display:-webkit-flex;
}
.bd {
    bottom:0;
    overflow:hidden;
}
.bd > div {
    border:1px solid;
    position:relative;
}
.bd > div:first-child {
    border:0;
    flex-direction:column;
    -ms-flex-direction:column;
    -webkit-flex-direction:column;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-pack:justify;
    -webkit-box-pack:justify;
    justify-content:space-between;
    -webkit-justify-content:space-between;
    align-items:center;
    -ms-flex-align:center;
    -webkit-box-align:center;
    -webkit-align-items:center;
}
.bd > div:nth-child(2) {
    margin:auto;
    border-top:0;
}
.bd ul {
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
}
.bd > div:nth-child(2) li:before,
.bd > div:nth-child(2) li:after {
    content:'';
}
.bd > div:nth-child(2) li {
    width:21px;
    height:21px;
    margin:0 5px;
    border:1px solid;
}
.absolutely {
    left:0;
    right:0;
    margin:auto;
}

/* bd1 */
.bd1:before {
    left:21px;
    transform:rotate(77deg);
    -ms-transform:rotate(77deg);
    -webkit-transform:rotate(77deg);
}
.bd1:after {
    right:21px;
    transform:rotate(-77deg);
    -ms-transform:rotate(-77deg);
    -webkit-transform:rotate(-77deg);
}
.bd1 {
    left:0;
    right:0;
    margin:auto;
    width:794px;
    height:183px;
}
.bd1 > div:first-child:before {
    width:590px;
}
.bd1 > div:first-child {
    height:33px;
}
.bd1 > div:last-child:before,
.bd1 > div:last-child:after {
    height:30px;
}
.bd1 > div:last-child {
    width:760px;
    padding:6px 32px 8px;
}
.bd1 > div:last-child div {
    -ms-flex-pack:justify;
    -webkit-box-pack:justify;
    justify-content:space-between;
    -webkit-justify-content:space-between;
}
.bd1 ul {
    width:auto;
}

/* bd2-wrap */
.bd2-wrap {
    bottom:0;
    z-index:3;
    width:100%;
    position:absolute;
    display:flex;
    display:-ms-flexbox;
    display:-webkit-box;
    display:-webkit-flex;
    -ms-flex-pack:justify;
    -webkit-box-pack:justify;
    justify-content:space-between;
    -webkit-justify-content:space-between;
}
.bd2-wrap .bd:last-child {
    transform:scaleX(-1);
    -ms-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
}

/* bd2 */
.bd2:before {
    left:-3px;
    transform:rotate(72deg);
    -ms-transform:rotate(72deg);
    -webkit-transform:rotate(72deg);
}
.bd2:after {
    right:-3px;
    transform:rotate(-72deg);
    -ms-transform:rotate(-72deg);
    -webkit-transform:rotate(-72deg);
}
.bd2 {
    z-index:2;
    width:448px;
    height:121px;
    position:relative;
}
.bd2 > div:first-child:before {
    width:326px;
}
.bd2 > div:first-child {
    height:29px; 
}
.bd2 > div:last-child:before {
    left:-6px;
    width:14px;
    height:83px;
}
.bd2 > div:last-child:after {
    display:none;
}
.bd2 > div:last-child {
    width:418px;
    height:90px;
    padding:12px 0 8px;
}
.bd2 > div:last-child div {
    margin-left:14px;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    flex-direction:column;
    -ms-flex-direction:column;
    -webkit-flex-direction:column;
    -ms-flex-pack:justify;
    -webkit-box-pack:justify;
    justify-content:space-between;
    -webkit-justify-content:space-between;
}
.bd2 > div:last-child ul:last-child li:before,
.bd2 > div:last-child ul:last-child li:after {
    left:0;
    width:100%;
    border:1px solid;
    position:absolute;
}
.bd2 > div:last-child ul:last-child li:before {
    top:0;
    height:23px;
    border-radius:40%;
}
.bd2 > div:last-child ul:last-child li:after {
    bottom:0;
    height:19px;
    background:#263238;
}
.bd2 > div:last-child ul:last-child li {
    border:0;
    height:32px;
    position:relative;
}

/* cbd */
.cbd:before,
.cbd:after {
    top:-24px;
}
.cbd:before {
    left:-49px;
    transform:rotate(40deg);
    -ms-transform:rotate(40deg);
    -webkit-transform:rotate(40deg);
}
.cbd:after {
    right:-49px;
    transform:rotate(-40deg);
    -ms-transform:rotate(-40deg);
    -webkit-transform:rotate(-40deg);
}
.cbd {
    z-index:1;
    top:-138px;
    width:45px;
    height:107px;
}
.cbd div:first-child:before {
    width:7px;
    height:10px;
}
.cbd div:first-child:after {
    height:8px;
}
.cbd div:first-child {
    height:40px;
}
.cbd div:nth-child(2):before,
.cbd div:nth-child(2):after {
    display:none;
}
.cbd div:nth-child(2) {
    border:0;
    padding:0;
    z-index:2;
    height:41px;
}
.cbd div:nth-child(2) ul,
.cbd div:last-child {
    margin:auto;
}
.cbd div:nth-child(2) ul,
.bd4 div:nth-child(1) ul {
    width:39px;
    height:100%;
    margin:auto;
    padding:7px 0 1px;
    border-left:1px solid;
    border-right:1px solid;
}
.cbd div:nth-child(2) li {
    width:7px;
    height:inherit;
    margin:0px 1px;
}
.cbd div:last-child:before,
.cbd div:last-child:after {
    top:-10px;
    z-index:-1;
    width:22px;
    height:22px;
}
.cbd div:last-child:before {
    left:-1px;
    border-right:0;
    transform:skew(0,38deg);
    -ms-transform:skew(0,38deg);
    -webkit-transform:skew(0,38deg);
}
.cbd div:last-child:after {
    right:-1px;
    border-left:0;
    transform:skew(0,-38deg);
    -ms-transform:skew(0,-38deg);
    -webkit-transform:skew(0,-38deg);
}
.cbd div:last-child {
    top:0;
    width:43px;
    height:4px;
}

/* bd3 */
.bd3:before,
.bd3:after {
    top:-60px;
}
.bd3:before {
    left:-17px;
    transform:rotate(72deg);
    -ms-transform:rotate(72deg);
    -webkit-transform:rotate(72deg);
}
.bd3:after {
    right:-17px;
    transform:rotate(-72deg);
    -ms-transform:rotate(-72deg);
    -webkit-transform:rotate(-72deg);
}
.bd3 {
    z-index:3;
    width:198px;
    height:81px;
    background:none;
}
.bd3 div:first-child:before {
    width:75px;
}
.bd3 div:first-child {
    height:30px; 
}
.bd3 div:last-child:before,
.bd3 div:last-child:after {
    height:43px;
}
.bd3 div:last-child {
    width:161px;
    height:49px;
    padding:8px 18px 0;
}
.bd3 div:last-child ul {
    width:100%;
    align-items:center;
    -ms-flex-align:center;
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-pack:distribute;
    justify-content:space-around;
    -webkit-justify-content:space-around;
}
.bd3 div:last-child li:first-child,
.bd3 div:last-child li:last-child {
    width:6px;
    height:17px;
    margin-top:-3px;
}
.bd3 div:last-child li:nth-child(2):before,
.bd3 div:last-child li:nth-child(2) {
    border-bottom:0!important;
}
.bd3 div:last-child li:nth-child(2):before {
    left:0;
    right:0;
    bottom:0;
    width:36px;
    height:28px;
    margin:auto;
    border:1px solid;
    position:absolute;
}
.bd3 div:last-child li:nth-child(2) {
    width:50px;
    height:38px;
    position:relative;
    align-self:flex-end;
    -ms-flex-item-align:end;
    -webkit-align-self:flex-end;
}

/* bd4 */
.bd4:before,
.bd4:after {
    top:auto;
    bottom:-58px;
    background:#263238;
}
.bd4:before {
    left:-66px;
    transform:rotate(-74deg);
    -ms-transform:rotate(-74deg);
    -webkit-transform:rotate(-74deg);
}
.bd4:after {
    right:-66px;
    transform:rotate(74deg);
    -ms-transform:rotate(74deg);
    -webkit-transform:rotate(74deg);
}
.bd4 {
    z-index:2;
    height:83px;
    width:160px;
    bottom:149px;
}
.bd4 div:first-child:before,
.bd4 div:first-child:after {
    display:none;
}
.bd4 div:first-child {
    width:94px;
    height:31px;
    margin:auto;
}
.bd4 div:first-child ul {
    padding:0;
    width:100%;
    border-top:1px solid;
    align-items:center;
    -ms-flex-align:center;
    -webkit-box-align:center;
    -webkit-align-items:center;
}
.bd4 div:first-child li {
    width:11px;
    height:18px;
    margin:0 3px;
    border:1px solid;
}
.bd4 div:nth-child(2):before,
.bd4 div:nth-child(2):after {
    bottom:0;
    position:absolute;
}
.bd4 div:nth-child(2):before {
    z-index:2;
    left:-15px;
    height:6px;
    width:179px;
    border-left:0;
    border-right:0;
}
.bd4 div:nth-child(2):after,
.bd4 div:nth-child(2) {
    border-bottom:0;
}
.bd4 div:nth-child(2):after {
    left:0;
    right:0;
    z-index:3;
    height:6px;
    width:125px;
    margin:auto;
    border-top:0;
}
.bd4 div:nth-child(2) {
    width:151px;
    height:51px;
    border-top:1px solid;
}
.bd4 div:last-child:before,
.bd4 div:last-child:after {
    height:38px;
    bottom:29px;
}
.bd4 div:last-child:before {
    left:0;
}
.bd4 div:last-child:after {
    right:0;
}
.bd4 div:last-child {
    border:0;
    z-index:2;
    height:11px;
}

/* bd5 */
.bd5:before,
.bd5:after {
    display:none;
}
.bd5 {
    top:0;
    bottom:auto;
    width:175px;
    height:116px;
    overflow:unset;
}
.bd5 ul,
.bd5 ul li div {
    width:100%;
}
.bd5 ul,
.bd5 ul li:before,
.bd5 ul li:after,
.bd5 ul li,
.bd5 ol:before,
.bd5 ol,
.bd5 div:before,
.bd5 div:after,
.bd5 > div {
    position:absolute;
}
.bd5 ul {
    bottom:0;
    height:67px;
}
.bd5 ul li,
.bd5 ol:before,
.bd5 ol,
.bd5 ol li,
.bd5 div:before,
.bd5 div:after,
.bd5 > div {
    left:0;
    margin:auto;
    border:1px solid;
    right:0!important;
}
.bd5 ul li {
    border:none;
    overflow:hidden;
}
.bd5 ul li div:before {
    bottom:0;
}
.bd5 ul li div:after {
    border:none;
    border-bottom:1px solid;
}
.bd5 ul li:first-child:before {
    left:-29px;
    transform:rotate(68deg);
    -ms-transform:rotate(68deg);
    -webkit-transform:rotate(68deg);
}
.bd5 ul li:first-child:after {
    right:-29px;
    transform:rotate(-68deg);
    -ms-transform:rotate(-68deg);
    -webkit-transform:rotate(-68deg);
}
.bd5 ul li:first-child {
    top:34px;
    width:127px;
    height:34px;
}
.bd5 ul li:first-child div,
.bd5 ul li:nth-child(2) div {
    height:16px;
}
.bd5 ul li:first-child div:before {
    width:123px;
    height:20px;
    transform:perspective(150px)rotateX(-28deg);
    -ms-transform:perspective(150px)rotateX(-28deg);
    -webkit-transform:perspective(150px)rotateX(-28deg);
}
.bd5 ul li:first-child div:after {
    width:55px;
}
.bd5 ul li:nth-child(2):before,
.bd5 ul li:nth-child(2):after {
    top:-65px;
}
.bd5 ul li:nth-child(2):before {
    left:-29px;
    transform:rotate(69deg);
    -ms-transform:rotate(69deg);
    -webkit-transform:rotate(69deg);
}
.bd5 ul li:nth-child(2):after {
    right:-29px;
    transform:rotate(-69deg);
    -ms-transform:rotate(-69deg);
    -webkit-transform:rotate(-69deg);
}
.bd5 ul li:nth-child(2) {
    top:14px;
    width:95px;
    height:28px;
}
.bd5 ul li:nth-child(2) div:before,
.bd5 ul li:last-child div:before {
    border-bottom:0;
}
.bd5 ul li:nth-child(2) div:before {
    width:93px;
    height:14px;
    transform:perspective(150px)rotateX(-32deg);
    -ms-transform:perspective(150px)rotateX(-32deg);
    -webkit-transform:perspective(150px)rotateX(-32deg);
}
.bd5 ul li:nth-child(2) div:after {
    width:19px;
}
.bd5 ul li:last-child:before,
.bd5 ul li:last-child:after {
    top:-69px;
}
.bd5 ul li:last-child:before {
    left:-32px;
    transform:rotate(71deg);
    -ms-transform:rotate(71deg);
    -webkit-transform:rotate(71deg);
}
.bd5 ul li:last-child:after {
    right:-32px;
    transform:rotate(-71deg);
    -ms-transform:rotate(-71deg);
    -webkit-transform:rotate(-71deg);
}
.bd5 ul li:last-child {
    top:0;
    z-index:1;
    width:57px;
    height:23px;
}
.bd5 ul li:last-child div {
    height:10px;
}
.bd5 ul li:last-child div:before {
    width:55px;
    height:15px;
    border-bottom:0;
    transform:perspective(150px)rotateX(-45deg);
    -ms-transform:perspective(150px)rotateX(-45deg);
    -webkit-transform:perspective(150px)rotateX(-45deg);
}
.bd5 ul li:last-child div:after {
    width:0;
}
.bd5 ol:before,
.bd5 ol {
    margin:auto;
}
.bd5 ol:before {
    width:0;
    height:100%;
    border-left:0;
}
.bd5 ol {
    width:7px;
    height:49px;
    border:none;
    transform:scaleY(-1);
    -ms-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
}
.bd5 ol li {
    width:4px;
    height:4px;
    display:block;
    margin:1px auto;
    background:#263238;
    transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}

/* sky */
.sky:before {
    top:28px;
    width:30px;
    height:30px;
    right:295px;
    border-radius:30px;
}
.sky {
    left:0;
    right:0;
    margin:auto;
    width:888px;
    height:152px;
}
.sky li:before,
.sky li:after {
    z-index:1;
    bottom:-1px;
    border-bottom:0;
    background:#263238;
}
.sky li {
    border-bottom:1px solid;
}
/* cloud 1 */
.sky li:first-child:before {
    left:20px;
    width:50px;
    height:25px;
    border-radius:25px 25px 0 0;
}
.sky li:first-child:after {
    left:53px;
    width:30px;
    height:15px;
    border-radius:15px 15px 0 0;
}
.sky li:first-child {
    bottom:30px;
    width:190px;
    height:25px;
}
/* cloud 2 */
.sky li:nth-child(2):before {
    left:74px;
    width:24px;
    height:12px;
    border-radius:12px 12px 0 0;
}
.sky li:nth-child(2):after {
    left:38px;
    width:40px;
    height:20px;
    border-radius:20px 20px 0 0;
}
.sky li:nth-child(2) {
    top:0;
    left:285px;
    width:110px;
    height:25px;
}
/* cloud 3 */
.sky li:last-child:before {
    left:60px;
    width:48px;
    height:24px;
    border-radius:24px 24px 0 0;
}
.sky li:last-child:after {
    left:48px;
    width:20px;
    height:10px;
    border-radius:10px 10px 0 0;
}
.sky li:last-child {
    right:80px;
    bottom:53px;
    width:180px;
    height:25px;
}

jika sudah selesai silahkan anda simpan file cssnya lalu cobalah jalankan file index.html nya,
dan lihat lah hasilnya  :D

Demikianlah Cara Membuat Gedung Sate Dengan CSS, keren bukan ? :D
Dan ternyata karya Anak Bangsa pun tidak kalah dengan karya orang luar, ini menunjukkan bahwa kita sudah sepatutnya mencintai buatan lokal yang kualitasnya pun tidak kalah dengan buatan luar. .

Namun kali ini saya minta maaf karena tidak menyediakan demonya :D
Mungkin itu saja yang dapat saya sampaikan kurang lebihnya mohon maaf .
Semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua :D

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ



SHARE THIS
Unknown

Author:

Previous Post
Next Post
Muchlist
10 October 2015 at 07:39

ijin menerapkan bikin gedung sate dengan css nya ya gan ;D

Reply
avatar
Muhammad taufiq nur
10 October 2015 at 09:15

wah keren banget, sampai gedung sate bisa dibikin pake html dan css..
ditunggu nih desain berikutnya gan :D

Reply
avatar
Unknown
10 October 2015 at 14:17

wiih.... bagus nih buat dcoba mkasih gan...

Reply
avatar
icshare
10 October 2015 at 15:00

Mantaf gan. keren nih. izin coba kodingnya ya.

Reply
avatar
Unknown
10 October 2015 at 15:25

ini baru karya seni dalam CSS, haha

Reply
avatar
LangkahNet
10 October 2015 at 15:44

wih keren nih membuat yang beginian :-) hehe

Reply
avatar
Awmad
10 October 2015 at 15:50

li li li li li :v kebanyakan li :v

Saya coba dlu ya gan :D

Reply
avatar
Anonymous
10 October 2015 at 17:13

Wah. Unik ni klo diterapin di blog

Reply
avatar
Syamsul Arifin
10 October 2015 at 18:02

wah keren. pengen belajar gan

Reply
avatar
Unknown
10 October 2015 at 19:18

keren kak. kepengen coba buat gedung sendiri nih menggunakan CSS

Reply
avatar
Mohammad Agustiar
10 October 2015 at 19:55

waah keren2 tapi sayangnya kurang tertarik sama html css nih lebih minat ke java hoho

Reply
avatar
Unknown
11 October 2015 at 07:38

Wah kalo ngerjain sendiri kayak gini pasti mumet ya gan....nice share loh

Reply
avatar
Unknown
11 October 2015 at 07:50

Itu bsa dterapkn di backround judul dblog g gan?

Reply
avatar
Bintang Azhar Nafis
11 October 2015 at 08:43

Bagus gan, tpi bisa nggak dikasih tau caranya gmina2 nya, kalo copas masih bingung

Reply
avatar
aga wicak
11 October 2015 at 09:17

Itu kodenya ditaruh dimana gan?

Reply
avatar
aga wicak
11 October 2015 at 09:18

Itu kodenya ditaruh dimana gan?

Reply
avatar
Marzota Dwi
11 October 2015 at 14:32

wah keren juga ya. jadi kepengen ngerti hal beginian :D

Reply
avatar
Bagas Aji Harvian
11 October 2015 at 14:43

Itu caranya naruh kode dimana bang?? :)

Reply
avatar
ramdan
11 October 2015 at 17:39

bagus turorial nya gan

Reply
avatar
Unknown
11 October 2015 at 20:25

edan,hebat bener bisa bikin kyk gini dari css wkwk,ga capek apa codingnya

Reply
avatar
Arie Sujadnorwanto
11 October 2015 at 20:27

gedung sate itu jualan sate gan?

Reply
avatar
fayzisme
11 October 2015 at 20:30

nice tutor, bookmark dulu bos

Reply
avatar
Unknown
11 October 2015 at 20:41

unik nih di coba dlu bro

Reply
avatar
Anonymous
11 October 2015 at 23:13

Keren banget gan..teruslah berkarya..

Reply
avatar
Unknown
12 October 2015 at 02:29 This comment has been removed by the author.
avatar
Unknown
12 October 2015 at 02:31

wah maaf gan, belum ada demonya, tapi hasil akhirnya seperti di gambar ko :)

Reply
avatar
Unknown
12 October 2015 at 02:32

kayanya sih gak bisa deh .

Reply
avatar
Unknown
12 October 2015 at 02:33

buat file html sama file cssnya dulu gan. .

Reply
avatar
Yulka Mayatskaya
12 October 2015 at 02:59

keren gan jadi niat belajar coding nih hhe

Reply
avatar
Unknown
12 October 2015 at 07:16

panjang banget gan skripnya tapi tetep mantap dan keren gan

Reply
avatar
Unknown
12 October 2015 at 09:10

mantap, ngintip juga artikel yg ini gan http://goo.gl/iDoHtB

Reply
avatar
Unknown
12 October 2015 at 17:13

keren jadinya, ga nyangka css bisa bikin beginian

Reply
avatar
Kin
15 October 2015 at 12:32

wahh ada cssnya juga nih gedung sate? mantap!

Reply
avatar
Anonymous
15 October 2015 at 17:04

keren banget gan, saya tunggu artikel berikutnya gan

Reply
avatar
Anonymous
17 October 2015 at 15:37

Mantap gan tutorialnya...
ijin bookmark

Reply
avatar
Admin
19 October 2015 at 09:14

Ajib keren betul...
Membuat rumah pake CSS bsa ga gan? rmh bnran tpi :v

Reply
avatar
Unknown
27 April 2016 at 19:06

wiss mantap gan keren

Reply
avatar
Subscribe to: Post Comments (Atom)