Mahasiswa Kemarin Sore: April 2017

Assalamualaikum Wr. Wb.
Pada kesempatan kali ini saya akan membagikan ilmu yang saya dapat dari mata kuliah Pemrograman Web.
Tanpa basa basi, monggo check this out!

Code :
<html>
<script src="awesomplete.js"></script>
<link rel="stylesheet" href="awesomplete.css" />
    <head><title>Form Rencana Studi</title></head>
    <body>
    <table border="4" bgcolor="#FFFFFF" align="center" height="500" width="400" cellpadding="20">
    <tr>
    <td>
    <b><font color="black" size="10" style="font-family:Impact"><i> FRS </i></font></b>
    <p style="font-family:Futura Md BT"> Masukkan Nama depan, Nama Belakang, NRP, Mata Kuliah, Nama Dosen! </p>
    <p style="font-family:Futura Md BT"><font size="2">Nama Depan</font></p>
    <input type="text" Name="nama" size="20" placeholder="Nama Depan">
    <p style="font-family:Futura Md BT"><font size="2">NRP</font></p>
    <input type="text" Name="NRP" size="46" placeholder="NRP">
    <p style="font-family:Futura Md BT"><font size="2">Mata Kuliah *PAA 2, PWEB, IMK, KIJ, RK, MBD</font></p>
    <input type="text" Name="Mata Kuliah" size="46" placeholder="Mata Kuliah" autofocus class="awesomplete" data-list="PAA 2, PWEB, IMK, KIJ, RK, MBD">
    <p style="font-family:Futura Md BT"><font size="2">Nama Dosen</font></p>
    <input type="text" Name="Nama Dosen" size="46" placeholder="Nama Dosen" autofocus class="awesomplete" data-list="Wijayanti N Khotimah, Fajar Baskoro, Bagus Jati, Daniel O, Dwi S"><br>
    <br><br>
    <input href="www.google.com" target="_blank" value="Submit" style="background-color: #FF0000; height: 50; width: 150;"type="submit">
    </td>
    </tr>

    </body>
    </html>

CSS(From Awesomeplete :

.awesomplete [hidden] {
    display: none;
}

.awesomplete .visually-hidden {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.awesomplete {
    display: inline-block;
    position: relative;
}

.awesomplete > input {
    display: block;
}

.awesomplete > ul {
    position: absolute;
    left: 0;
    z-index: 1;
    min-width: 100%;
    box-sizing: border-box;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
}

.awesomplete > ul:empty {
    display: none;
}

.awesomplete > ul {
    border-radius: .3em;
    margin: .2em 0 0;
    background: hsla(0,0%,100%,.9);
    background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8));
    border: 1px solid rgba(0,0,0,.3);
    box-shadow: .05em .2em .6em rgba(0,0,0,.2);
    text-shadow: none;
}

@supports (transform: scale(0)) {
    .awesomplete > ul {
        transition: .3s cubic-bezier(.4,.2,.5,1.4);
        transform-origin: 1.43em -.43em;
    }

    .awesomplete > ul[hidden],
    .awesomplete > ul:empty {
        opacity: 0;
        transform: scale(0);
        display: block;
        transition-timing-function: ease;
    }
}

    /* Pointer */
    .awesomplete > ul:before {
        content: "";
        position: absolute;
        top: -.43em;
        left: 1em;
        width: 0; height: 0;
        padding: .4em;
        background: white;
        border: inherit;
        border-right: 0;
        border-bottom: 0;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .awesomplete > ul > li {
        position: relative;
        padding: .2em .5em;
        cursor: pointer;
    }

    .awesomplete > ul > li:hover {
        background: hsl(200, 40%, 80%);
        color: black;
    }

    .awesomplete > ul > li[aria-selected="true"] {
        background: hsl(205, 40%, 40%);
        color: white;
    }

        .awesomplete mark {
            background: hsl(65, 100%, 50%);
        }

        .awesomplete li:hover mark {
            background: hsl(68, 100%, 41%);
        }

        .awesomplete li[aria-selected="true"] mark {
            background: hsl(86, 100%, 21%);
            color: inherit;
        }
/*# sourceMappingURL=awesomplete.css.map */

Hasil Screencapture :
Suggestion pada Mata Kuliah :

Suggestion pada Nama Dosen :

Thanks guys!

Assalamualaikum Wr. Wb.
Pada kesempatan kali ini saya Brilian Widya Mustofa akan sedikit berbagi ilmu mengenai penerapan bootstrap.
Langsung saja tanpa panjang lebar guys!
Ini code-nya :

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
}
</style>
</head>
<body>

   <header>
    <h1 align="center"; style="font-family:Impact;"><i>COOLLIKE CLOTHING CO. - TRY BOOTSTRAP</i></h1>
    <h3 align="center"; style="font-family:Futura Md BT;">Brilian Widya Mustofa</h3>
    <p align="center">5114100047</p>
</header>

<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="images/DSC_0726.jpg" alt="Chania" width="460" height="345">
      </div>

      <div class="item">
        <img src="images/DSC_0729.jpg" alt="Chania" width="460" height="345">
      </div>

      <div class="item">
        <img src="images/DSC_0754.jpg" alt="Flower" width="460" height="345">
      </div>

      <div class="item">
        <img src="images/DSC_0765.jpg" alt="Flower" width="460" height="345">
      </div>
    </div>

    
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
</div>
</div>
    <div class="copy">
          <p align="center">© Coollike Clothing co. 2017 by Brilian Widya Mustofa 5114100047</p>
    </div>

</body>
</html>

Ini screenshot dari hasil code diatas, monggo :)

Terima Kasih...

Mahasiswa Kemarin Sore

Jumat, 07 April 2017

Javascript, not Javanese

Bootstrap...Bootstrap...Bootstrap!!!