Cara menggunakan log in python

Halo PythonMania!…Apa kabarnya hari ini? Pasti LEBIH FRESH dari hari biasanya ya…karena hari ini adalah hari pertama kita di tahun 2013…YES! Sudah buat DAFTAR IMPIAN Anda di tahun 2013? Khususnya tentang perkembangan ilmu pemrograman Python, ingin seberapa dalam ilmu kita di tahun 2013 ini? Kalo belum…Ayo Tulis Dulu DAFTAR IMPIAN ANDA!

Oiya, insyaAlloh di tahun 2013 ini akan ada buku baru Python yang berjudul “Python, Pemrograman Yang Baik.” tulisan admin KlinikPython tentunya. Ditunggu saja tanggal mainnya ya…(hehehe…cos sudah masuk DAFTAR IMPIAN Admin).

Nah, sebagai pembuka di awal tahun 2013 ini, kami ingin mengajak para PythonMania untuk membuat sebuah aplikasi sederhana berbasis GUI Tkinter, “Bagaimana membuat form Login di GUI Python – Tkinter?”. Tak usah berlama-lama…Cek TeKaPe!

Learn how to create a social media login form with CSS.

Responsive Social Login Form

Try it Yourself »

How To Create a Social Login Form

Step 1) Add HTML:

Use a

Example

Login with Social Media or Manually

        or
     

Or sign in manually:

Step 2) Add CSS:

Example

* {box-sizing: border-box}

/* style the container */
.container {
  position: relative;
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px 0 30px 0;
}

/* style inputs and link buttons */
input,
.btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 4px;
  margin: 5px 0;
  opacity: 0.85;
  display: inline-block;
  font-size: 17px;
  line-height: 20px;
  text-decoration: none; /* remove underline from anchors */
}

input:hover,
.btn:hover {
  opacity: 1;
}

/* add appropriate colors to fb, twitter and google buttons */
.fb {
  background-color: #3B5998;
  color: white;
}

.twitter {
  background-color: #55ACEE;
  color: white;
}

.google {
  background-color: #dd4b39;
  color: white;
}

/* style the submit button */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

/* Two-column layout */
.col {
  float: left;
  width: 50%;
  margin: auto;
  padding: 0 50px;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* vertical line */
.vl {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  border: 2px solid #ddd;
  height: 175px;
}

/* text inside the vertical line */
.inner {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 50%;
  padding: 8px 10px;
}

/* hide some text on medium and large screens */
.hide-md-lg {
  display: none;
}

/* bottom container */
.bottom-container {
  text-align: center;
  background-color: #666;
  border-radius: 0px 0px 4px 4px;
}

/* Responsive layout - when the screen is less than 650px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 650px) {
  .col {
    width: 100%;
    margin-top: 0;
  }
  /* hide the vertical line */
  .vl {
    display: none;
  }
  /* show the hidden text on small screens */
  .hide-md-lg {
    display: block;
    text-align: center;
  }
}

Tip: Go to our HTML Form Tutorial to learn more about HTML Forms.

Tip: Go to our CSS Form Tutorial to learn more about how to style form elements.