/* Font : sans-serif */
/* Navbar */
*, html{
    padding: 0%;
    margin: 0%;
}
header { 
    position: fixed; 
    display: block; 
    height: 65px; 
    background-color:#beb298; 
    padding: 3px; 
    left:0; right:0; top:0; 
    z-index:5;
    border-bottom: 5px solid #222222;
    line-height: 66px;
    justify-content: center;
    align-items: center;
}

.logo {
    display:flex; 
    width:65px;
    float: left;

}

.home {
    display: flex; 
    width:30px;
    margin-top: 15px;
    margin-right: 15px;
    float: right;
}

.tittle {
    font-size: xx-large;
    font-family: sans-serif;
    color: #222222;

}

body {
    background-color: #eae6de ;
    font-family: sans-serif;
}
/* Navbar End */



.intro{
    padding-top: 150px;
    text-align: center;
    justify-content: center;
    font-size: larger;
    font-family: sans-serif;
}
.content{
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly
}


.htmldasar{
    background: rgb(255, 255, 255);
    padding: 50px;
    border: 6px solid #beb298;
    text-align: center;
    width: 230px;
    font-family: sans-serif;
    font-size: x-large;
    font-weight: bold;
    border-radius: 10px;
}

.materi1{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly
}

.materi2{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding-bottom: 170px;
}
.a :hover{
    transition: ease-in-out;
    opacity: 90%;
    transform: scale(110%);
    transition-delay: .2s;
}
.a{
    color: #222222;
    text-decoration: none;
}
.textdasar{
    text-align: center;
    justify-content: center;
}

.atas{
    justify-content: space-evenly;
}

.hr{margin: auto;
    background-color: #222222;
    width: 98%;
    border-radius: 10px;
    height: 5px;
}
.aboutus{
    padding-top: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-family: sans-serif;
    padding-bottom: 80px;

}
.foto{
    width: 30%;
    border-radius: 15px;    
}
.foto2{
    text-align: center;
   
}
.foto1{
    margin: auto;
    width: 37%;
}
.judul{
    padding-top: 70px;
    text-align: center;
    font-family: sans-serif;
    font-size: 45px;
}
/* footer */
footer{
    height: 70px; 
    background-color:#beb298; 
    border-top: 5px solid #222222;
}
.footerteks{
    font-family: sans-serif;
    font-size: large;
    padding: 25px;
    float: right;
}
.youtube{
    width:50%;    
}
.logoinstagram{

    text-align: center;
    margin-top: 14px;
    width: 7%;
}
.logoemail{

    text-align: center;
    margin-top: 14px;
    width: 7%;
}
.logoyoutube{

    text-align: center;
    margin-top: 14px;
    margin-left: 10px;
    width: 7%;
}
.logofooter{
    display: flex;
    flex-direction: row;
}
/* footer end */


/* html dasar */


.bodymateri1{
    font-size: 28px;
    margin-left: 33px;
    width: 97%;
}

.judulmateri1{
    font-weight: bold;
    font-size: 40px;
    padding-top: 100px;
    text-align: center;
}
.judulapaituhtml{
   font-size: 30px;
   font-weight: bold;
}
/* apa itu html */

.isiapaituhtml{
    padding-top: 10px;
    font-size: 28px;
}

.judulmulaibelajarhtml{
    font-size: 30px;
    font-weight: bold;
    padding-top: 15px;
}
.mulaibelajarhtmlke1{
    padding-top: 10px;
    font-size: 29px;
}
.isimulaibelajarhtmlke1{
    font-size: 28px;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: 33px;
    width: 90%;
}
.code1mulaibelajarhtml{
    background-color: lightgray;
    width: 7%;

}
.code1-2mulaibelajarhtml{
    display: flex;
    flex-direction: row;

}

.mulaibelajarhtmlke2{
    padding-top: 10px;
    font-size: 29px;
}
.isimulaibelajarhtmlke2{
    font-size: 27px;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: 33px;
    width: 90%;
}
.codemulaibelajarhtml{
    background-color: lightgray;
    width: 12.5%;
}
.code2mulaibelajarhtml{
    display: flex;
    flex-direction: row;
}
.gambar1htmldasar{
    width: 23%;
}
/* langkah belajar html */

.judullangkahdalambelajarhtml{
    font-size: 30px;
    font-weight: bold;
    padding-top: 30px;
}
.judulke1langkahdalambelajarhtml{
    font-size: 29px;
    padding-top: 10px;
    font-weight: bold;
}
.gambarlangkahdalambelajarhtml{
    text-align: center;
    margin-top: 40px;
}
.listlangkahdalambelajarhtml{
    font-size: 27px;
    padding-top: 15px;
}
.tambahanlistlangkahdalambelajarhtml{
    list-style: none;
    padding-left: 40px;
}
.judulke2langkahdalambelajarhtml{
    padding-top: 50px;
    font-weight: bold;
}
.judulke3angkahdalambelajarhtml{
    text-align: center;
    padding-top: 100px;
    font-weight: bold;
    font-size: 30px;
}
.codeke3langkahbelajarhtml{
    padding-top: 35px;
    text-align: center;
    font-size: 29px;
    padding-bottom: 25px;
}
/* materi ke 3 html dasar */
.materike3htmldasar{
    font-size: 30px;
    font-weight: bold;
    padding-top: 10px;
}
.judulmaterike3htmldasar{
    font-size: 29px;
    padding-top: 30px;
    font-weight: bold;
    padding-bottom: 30px;
}
.listmaterike3htmldasar{
    font-size: 27px;
    padding-top: 10px;
}
.tambahanlistmaterike3htmldasar{
    list-style: none;
    padding-left: 36px;
}
.gambarmaterike3htmldasar{
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
}
.ollistmaterike3htmldasar{
    font-size: 27px;
    padding-top: 5px;
    padding-left: 14px;
}
.oltambahanlistmaterike3htmldasar{
    list-style: none;
    padding-left: 14px;
}
.codematerike3htmldasar{
    margin: auto;
    width: 90vw;
    padding-bottom: 200px;
}
.nextmateri{
    display: flex;
    flex-direction: row;
    justify-content: right;
    font-size: 25px;
    text-decoration: none;
    color: #222222;
    padding-right: 50px;
    padding-bottom: 25px;
}
.tablecodingan{
    margin: auto;
    text-align: justify;
    border: 1px solid black;
    background-color: aliceblue;
    height: 50px;
    width: 800px;
    padding: 10px;
}

.tablecodingan1{
    margin: auto;
    text-align: justify;
    border: 1px solid black;
    background-color: aliceblue;
    height: 50px;
    width: 400px;
    padding: 10px;
}
.tablecodingan2{
    margin: auto;
    text-align: justify;
    border: 1px solid black;
    background-color: aliceblue;
    height: 50px;
    width: 1000px;
    font-size: 20px;
    text-align: justify;
    padding: 10px;
}
.tablecodingan3{
    margin: auto;
    text-align: justify;
    border: 1px solid black;
    background-color: aliceblue;
    height: 50px;
    width: 100px;
    padding: 10px;
}
.tablecodingan4{
    margin: auto;
    text-align: justify;
    border: 1px solid black;
    background-color: aliceblue;
    width :70%;
}
/* html dasar end */

/* html lanjutan */
.judullanjutan{
    font-weight: bold;
    font-size: 40px;
    padding-top: 100px;
    text-align: center;
}
.listlanjutan{
    font-size: 25px;
    padding-top: 2px;
    list-style: none;
    padding-left: 30px;
}
.tambahanlistlanjutan{
    list-style: none;
    padding-left: 30px;
    font-size: 25px;
    padding-bottom: 25px;
}
.tambahanlistlanjutan1{
    list-style: none;
    padding-left: 30px;
    font-size: 25px;
    padding-top: 25px;
}
.tambahanlistlanjutan2{
    list-style: none;
    padding-left: 30px;
    font-size: 25px;
    padding-bottom: 25px;
}
.judulmateri2{
    padding-left: 30px;
    font-size: 25px;
    padding-top: 30px;
    padding-bottom: 30px;
    font-weight: bold;

}
.codingan{
    margin: auto;
    width: 40%;
    padding: 10px;
    font-size: 20px;
    background-color: aliceblue;
    border: 3px solid black;
    border-radius: 10px;
}
.gambarlanjutan{
    width:100%;
}
.codingan1{
    margin: auto;
    width: 50%;
    padding: 10px;
    font-size: 20px;
    border-radius: 10px;
}
.nextmateri2{
    display: flex;
    flex-direction: row;
    justify-content: left;
    font-size: 25px;
    text-decoration: none;
    color: #222222;
}
.tombolnext{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 100px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 25px;
}




/* html lanjutan end */

/* iframe */
.iframe{
   display: block;
   width:100%;
   height:350px;
   overflow:hidden;
   text-align: center;
   margin-bottom: 10px;
}
.iframe1{
    margin-top: 10px;
    width: 1000px;
    height: 100%;
    padding: 10px;
    font-size: 20px;
    border-radius: 10px;
}

.listtagif{
    font-size: 25px;
    padding-top: 20px;
    padding-left: 30px;
}

.codingan{
    margin: auto;
    width: 80%;
    padding: 10px;
    font-size: 20px;
    background-color: aliceblue;
    border: 3px solid black;
    border-radius: 10px;
}

.listiframe2{
    font-size: 25px;
    padding-top: 10px;
    list-style: none;
    padding-left: 30px;
    padding-bottom: 15px;
}

.listiframe3{
    font-size: 25px;
    padding-top: 15px;
    padding-bottom: 15px;
    list-style: none;
    padding-left: 30px;
}

.listiframe4{
    font-size: 25px;
    padding-top: 10px;
    list-style: none;
    padding-left: 30px;
    padding-top: 15px;
}

.listiframe5{
    font-size: 25px;
    padding-top: 10px;
    list-style: none;
    padding-left: 30px;
    padding-top: 15px;
}

.gambarframe{
    width:60%;
    text-align: center;
}

.gambart{
    text-align: center;
}

.listiframe{
    font-size: 25px;
    padding-top: 2px;
    list-style: none;
    padding-left: 30px;
}
/* iframe end */

/* list dan table */
.codingan{
    margin: auto;
    width: 80%;
    padding: 10px;
    font-size: 20px;
    background-color: aliceblue;
    border: 3px solid black;
    border-radius: 10px;
}

.codingan{
    margin: auto;
    width: 80%;
    padding: 10px;
    font-size: 20px;
    background-color: aliceblue;
    border: 3px solid black;
    border-radius: 10px;
}

.listcd{
    font-size: 20px;
    padding-top: 2px;
    list-style: none;
    padding-left: 30px;
}

.coding2 {
    font-size: 20px;
    margin-left: 20px;
}

.coding3 {
    font-size: 20px;
    margin-left: 40px;
}

.coding4 {
    font-size: 20px;
    margin-left: 60px;
}

.coding5 {
    font-size: 20px;
    margin-left: 80px;
}

.listtable2{
    font-size: 25px;
    padding-top: 10px;
    list-style: none;
    padding-left: 30px;
}

.listtable3{
    font-size: 25px;
    padding-top: 30px;
    padding-bottom: 15px;
    list-style: none;
    padding-left: 30px;
}

.listtaglt{
    font-size: 25px;
    padding-left: 30px;
}

.listtb3{
    font-size: 25px;
    padding-top: 30px;
    padding-bottom: 15px;
    list-style: none;
    padding-left: 30px;
}

.listtb4{
    font-size: 25px;
    padding-top: 30px;
    list-style: none;
    padding-left: 30px;
}

.listtb5{
    font-size: 25px;
    padding-bottom: 15px;
    list-style: none;
    padding-left: 30px;
}

.listur{
    font-size: 25px;
    padding-top: 2px;
    list-style: decimal;
    padding-left: 60px;
    padding-bottom: 15px;
}

.judulmateri2{
    padding-left: 30px;
    font-size: 20px;
    padding-top: 30px;
    font-weight: bold;
}

.listtagtb{
    font-size: 25px;
    padding-left: 30px;
}

.listtb{
    font-size: 25px;
    padding-top: 2px;
    list-style: none;
    padding-left: 30px;
}
/* list dan table end */

/* php */
.judulphp{
    font-weight: bold;
    font-size: 40px;
    padding-top: 100px;
    text-align: center;
}
.listphp1{
    font-size: 25px;
    padding-top: 25px;
    list-style: none;
    padding-left: 67px;
}
.listphp{
    font-size: 25px;
    padding-top: 2px;
    list-style: none;
    padding-left: 67px;
}
.listphp2{
    font-size: 25px;
    padding-top: 2px;
    list-style: none;
    padding-left: 67px;
    padding-bottom: 25px;
}
.listphp3{
    font-size: 25px;
    padding-top: 2px;
    list-style: none;
    padding-left: 67px;
    padding-bottom: 25px;
    padding-top: 25px;
}
.gambarphp{
    text-align: center;
}
.gambarphp1{
    width: 90%;
}
.gambarphp2{
    width: 75%;
}
.judulmateriphp{
    font-weight: bold;
    font-size: 30px;
    padding-left: 67px;
    padding-top: 20px;
    padding-bottom: 20px;
}
.listdalamlistphp{
    font-size: 25px;
    padding-top: 2px;
    padding-left: 67px;
}
.listdalamlistphp1{
    font-size: 25px;
    padding-top: 2px;
    padding-left: 105px;
    list-style: none;
}
.codinganphp{
    background-color: aliceblue;
    width: 90%;
    margin: auto;
    font-size: 25px;
    border: 2px solid black;
    border-radius: 10px;
    height: 150px;
}
.codinganphp1{
    padding-top: 35px;
    padding-left: 35px;
}
.codinganphp2{
    padding-left: 35px;
}
.codinganphp01{
    background-color: aliceblue;
    width: 90%;
    margin: auto;
    font-size: 25px;
    border: 2px solid black;
    border-radius: 10px;
    height: 618px;
}
.codinganphp002{
    background-color: aliceblue;
    width: 90%;
    margin: auto;
    font-size: 25px;
    border: 2px solid black;
    border-radius: 10px;
    height: 350px;
}
.codinganphp003{
    background-color: aliceblue;
    width: 90%;
    margin: auto;
    font-size: 25px;
    border: 2px solid black;
    border-radius: 10px;
    height: 240px;
}
.codinganphp004{
    background-color: aliceblue;
    width: 90%;
    margin: auto;
    font-size: 25px;
    border: 2px solid black;
    border-radius: 10px;
    height: 120px;
}
.codinganphp005{
    background-color: aliceblue;
    width: 90%;
    margin: auto;
    font-size: 25px;
    border: 2px solid black;
    border-radius: 10px;
    height: 180 px;
}
.codinganphp006{
    background-color: aliceblue;
    width: 90%;
    margin: auto;
    font-size: 25px;
    border: 2px solid black;
    border-radius: 10px;
    height: 180 px;
}
.codinganphp5{
    margin: auto;
    width: 80%;
    font-size: 25px;
    border: 2px solid black;
    border-radius: 10px;
    height: 120px;
}
.codinganphp001{
    padding-left: 25px;
}
.codinganphp02{
    padding-left: 50px;
}
.codinganphp3{
    padding-left: 75px;
}
.codinganphp4{
    padding-left: 100px;
}
.subjudulphp{
    font-weight: bold;
    font-size: 25px;
    padding-left: 67px;
}
.codinganphp007{
    margin: auto;
    width: 90%;
    font-size: 25px;
    border: 2px solid black;
    border-radius: 10px;
    height: 150px;
    background-color: aliceblue;
}
.iframephp{
    margin: auto;
    
}
.iframephp1{
    padding-top: 20px;
    margin: auto;
    width: 50%;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.iframephp2{
    text-decoration: none;
    color: #222222;
}






/* php end */

/* materi 4 */
.judulcss{
    font-weight: bold;
    font-size: 40px;
    padding-top: 100px;
    text-align: center;
}
.listcss{
    font-size: 25px;
    padding-top: 2px;
    list-style: none;
    padding-left: 67px;
}
.listcss1{
    font-size: 25px;
    padding-top: 25px;
    list-style: none;
    padding-left: 67px;
}
.listcss2{
    font-size: 25px;
    padding-top: 2px;
    list-style: none;
    padding-left: 67px;
    padding-bottom: 25px;
}
.gambarcss{
    text-align: center;
}
.gambarcss1{
    width: 90%;
}


/* materi 4*/
/* FORM PHP AWAL */