Catatan Harian Dwi Febriandaru

Corel Draw Graphic Suite X5 dan Cara Crack

Setelah sebelumnya saya membagikan Corel Draw X6 kali ini saya akan share versi X5 dari Corel Draw Graphic Suite. Sebenarnya tidak ada perbedaan berarti dari versi X6, -dwifebriandaru.blogspot.com

Membuat Sticky Footer dengan CSS

Komponen footer merupakan komponen yang wajib ada dalam sebuah web maupun blog. Pada Footer inilah biasanya developer web menempatkan... -dwifebriandaru.blogspot.com

Membuat Sistem Login Session di PHP-MySQLi

Berjumpa lagi dengan saya, Dwi Febriandaru. Seperti janji saya pada tutorial terdahulu, Kali ini kita akan membahas tentang cara membuat Membuat Sistem Login dengan Session... -dwifebriandaru.blogspot.com

Lirik Lagu 5 Seconds of Summer - She Look So Perfect



"She Looks So Perfect"
Hey, hey
Hey, hey
Hey, hey
Hey, hey
Hey, hey
Hey, hey
Hey, hey
Hey, hey

Simmer down, simmer down
They say we're too young now to amount to anything else
But look around
We work too damn hard for this just to give it up now
If you don't swim, you'll drown
But don't move, honey

You look so perfect standing there
In my American Apparel underwear
And I know now, that I'm so down
Your lipstick stain is a work of art
I got your name tattooed in an arrow heart
And I know now, that I'm so down (hey!)

Hey, hey
Hey, hey
Hey, hey
Hey, hey

Let's get out, let's get out
'Cause this deadbeat town's only here just to keep us down
While I was out, I found myself alone just thinking
If I showed up with a plane ticket
And a shiny diamond ring with your name on it
Would you wanna run away too?
'Cause all I really want is you

You look so perfect standing there
In my American Apparel underwear
And I know now, that I'm so down
I made a mixtape straight out of '94
I've got your ripped skinny jeans lying on the floor
And I know now, that I'm so down

Hey, hey
Hey, hey
Hey, hey
Hey, hey
Hey, hey

You look so perfect standing there
In my American Apparel underwear
And I know now, that I'm so down
Your lipstick stain is a work of art
I got your name tattooed in an arrow heart
And I know now, that I'm so down (hey!)

Hey, hey
Hey, hey
Hey, hey
Hey, hey

You look so perfect standing there
In my American Apparel underwear
And I know now, that I'm so down (hey)
Your lipstick stain is a work of art (hey, hey)
I got your name tattooed in an arrow heart (hey, hey)
And I know now, that I'm so down (hey, hey)


Sumber : AZ Lyrics
Share:

Membuat Design Halaman Login dengan CSS

Assalamu'alaikum Wr.Wb


Tak dipungkiri keindahan dan tata letak kerangka website adalah salah satu daya tarik bagi visitor untuk mengunjungi website kita. Oleh sebab itulah pada tutorial kali ini kita akan belajar membuat halaman login. 
Halaman yang akan kita buat kurang lebih seperti gambar pembuka diatas.
Oke langsung saja kita akan memulai tutorial kali ini.

Pertama - tama kita akan membuat kerangkanya terlebih dahulu
Silahkan Sobat Copy kode HTML berikut.
<html>
    <head>
        <title>Contoh Form Login</title>
    </head>
    <body>
        <div class="container">

            <div class="badan">
                <div class="kepala">
                    <p class="kepalatext">&#187; Login &#171;</p>
                </div>
                <form class="bingkai" action="login.php" method="POST">
                    <div>
                   
                        <input class="email" type="email" name="email" id="email" placeholder="Masukkan Email"/>
                        <input class="passwd" type="password" name="password" id="password" placeholder="Masukkan Pasword"/>
                 
                    </div>
                    <div class="bawah">
                        <input class="daftar" type="submit" name="submit" value="&#187; Login &#171;">
                        <p class="footertext">&#169; 2016 <a href="http://dwifebriandaru.blogspot.com">Dwi Febriandaru Site</a></p>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Setelah dicopy kemudian simpan dengan nama index.html
buka index.html tersebut dengan browser sobat, maka hasilnya kurang lebih seperti ini.
m
Dwi Febriandaru Site © 2016
Sangat jelek dan berantakan bukan ?, Oleh sebab itulah kita akan menambahkan sedikit css pada kode diatas. Silahkan sobat copy Kode CSS berikut ini.

.container{
                margin-top: 130px;
                margin-left: 500px;
            }
         
            .bingkai{
                border: 5px solid #3498db;
                width: 440px;
                height: 300px;
             
            }
            body{
                background-color: #bdc3c7;
            }

            .kepala{
                width: 450px;
                height: 50px;
                background-color: #3498db;
                border-radius: 3px 3px 0 0;
            }

            .kepalatext{
                color: #ffffff;
                text-align: center;
                font-size: 18pt;
                font-family: Century;
                padding-top: 12px;
            }
         
            .kepalatext:hover{
                color: #e74c3c;
            }

            .badan{
                width: 450px;
                height: 360px;
                background-color: #ffffff;
                border-radius: 3px;
                box-shadow: 6px 6px 0 0 #ffffff;
            }

            .email{
                font-family: Century;
                font-size: 13pt;
                width: 415px;
                height: 35px;
                border: 1px solid #2980b9;
                margin-left: 15px;
                margin-top: 65px;
                padding-left: 5px;
                display: compact;
                box-shadow: #95a5a6;
                border-radius: 5px;
            }

            .passwd{
                font-family: Century;
                font-size: 13pt;
                width: 415px;
                height: 35px;
                border: 1px solid #2980b9;
                margin-left: 15px;
                margin-top: 10px;
                padding-left: 5px;
                display: compact;
                box-shadow: #95a5a6;
                border-radius: 5px;
            }

            .daftar{
                background-color: #ffffff;
                color: #3498db;
                margin-top: 1px;
                margin-left: 15px;
                width: 415px;
                height: 40px;
                border: 2px solid #3498db;
                border-radius: 5px;
                font-family: Century;
                font-size: 13pt;
            }

            .daftar:hover{
                background-color: #e74c3c;
                color: #ffffff;
            }

            .bawah{
                margin-top: 80px;
                width: 440px;
                height: 80px;
                background-color: #3498db;
                border-radius: 0 0 3px 3px;
            }

            .footertext{
                margin-top: 5px;
                text-align: center;
                font-family: Century;
                font-size: 12pt;
                color: #ffffff;
            }
            .footertext>a{
                color: #fefefe;
            }
            .footertext>a:hover{
                color: #0e0e0e;
            }

Setelah kode CSS tersebut sobat copy, lalu simpan dengan nama main.css. dan tambahkan baris <link href="main.css" rel="stylesheet" type="text/css"/>  pada dokumen index.html kemudian simpan dan coba test dengan browser sobat. Bila tidak ada kesalahan, maka hasilnya adalah seperti ini.



Sepertinya cukup sekian dulu tutorial kali ini, bila ada yang merasa sulit bisa ditanyakan di komentar.
jangan lupa next post kita akan membahas tentang Membuat Login Dengan Session di PHP & MySQLi.

Mohon maaf apabila ada salah kata. Atas perhatiannya saya ucapkan terima kasih.

Wassalamu'alaikum Wr.Wb
Share:

Blog Traffic