2_css.css

/* 
CSS rules : 

 ini contoh selector
 membuat semua elemen h1 jadi warna merah
 red adalah value 
membuat semua elemen h1 jadi warna merah.
color adalah properti.
fun fact : ada sekitar 350 properties css

*/

h1 {
    color: rgb(32, 35, 221);
}

h2 {
    font-size: 13vh;
    border: 1px green solid;
    border-radius: 12px 12px;
    text-decoration: overline blue dashed;
}

ul {
    list-style: square;
}

.branding {
    color: red;
}

.desc {
    color: blue;
}

/* 
naming class:   
penamaannya disarankan 'what they are'
not
' what they looked'
misal. ada class='branding',
jika di suatu waktu kita ingin merubah value
dari branding maka kita tinggal ubah valuenya.
sedangkan jika kita pakai nama class
'what they looked', misal red-branding = red,
suatu saat branding ganti warna biru,
tentu akan merepotkan ganti value biru dan
nama class jadi blue-branding.
bayangkan itu ada di 1000 baris code mu.

lebih aman basic naming class
'what they are '
*/

/*
styling tags or class ?

prefer styling class instead of
direct styling into tags.

DON'T
*/

/* 
-cascade rules-

urutan rules styling

- 2 rules yang sama spesifik, akan
diambil rules yg terakhir (terbawah)
*/


.cascade {
    color: red;
}

.cascade {
    color: green;
}

/* 
rules diatas konflik.
the winner is the last rules
color -> green 

*/


.two-class {
 color: yellow;
}

.two-class.also2class {
 color: rgb(228, 153, 41);
}

/*
rules diatas :

1 class vs 2 class
winner : 2 class karna
lebih spesifik
nb : 

selector -> .class1.class2
tidak dipisah spasi,tapi sambung
kalau dispasi, beda arti.
*/

/*
selector tag vs class

winner : class (lbh spesifik)
*/

.username {
    color: aqua;
}

.username.name.fullname{
    color: bisque;
}

/*
rumus hitung spesifik selector::after
dumbways-

scores:

!important = 1000,
id = 100,
class = 10,
tag = 1

pada case diatas
.username scores = 10
.username.name.fullname = 30

winner -> color: bisque

*/
/*
selector #ID

superkuat dan sebaiknya dihindari
karna kalo lawan class,
langsung ke override

*/

/*
raja terakhir selector ada
!important.

sangat sangat sangat
baiknya dihindari pake !important
*/

/* 
--Pseudo classes--
mirip seperti fungsi (state/kondisi)
diletakkan setelah nama class diikuti titik 2 (:) 
dan nama pseudo classnya

*/

.hovver {
    border: 1px yellowgreen solid;
}
.hovver:hover {
    background-color: rgb(48, 233, 88);
    color: white;
}

/*
--- pseudo element ---

seperti pseudo class, tetapi titik dua dobel (::) 
lebih ke insert atau sisip informasi
kayak manipulasi DOM ? ya dan tidak. terlihat seperti itu
tetapi pseudo element tidak merubah struktur HTML .
*/
.hovver::after {
    content: 'sigma';
}

/* starting box model*/
/*
-- CSS Box Model ---

*/
.boks {
    border: 2px solid blue;
    background-color: aliceblue;
    width: 20vh;
    align-items: center;
    justify-content: center;
    display: flex;
    float: left;
    margin: 2vh;
    border-radius: 20px;
    padding: 10px;
}

/*
layout menggunakan display flex ini bikin pusing dan banyak anomali.
lebih baik pake cara lain yang lebih mudah seperti flex dan grid.

*/

/*
    pakai box-sizing : border-box;
    ke semua element pake wildcard 
    set di awal css mu (line paling atas)

    disarankan biar enak hidupmu wkwk
*/

* {
    box-sizing: border-box;
}

/*
kita coba layouting pake flex
kenapa ga grid ? well grid terhitung masih baru
belum terlalu bnyak support ke semua browser.

selalu set flex sebagai parent

*/

.box-1 {
    border: 1px solid salmon;
    background-color: aqua;
    width: 10%;
    height: 130px;
    flex-grow: 1;
}
.box-2 {
    border: 1px solid black;
    background-color: gold;
    width: 10%;
    height: 55px;
    flex-grow: 1;
}
.box-3 {
    border: 1px solid red;
    background-color: rebeccapurple;
    width: 20%;
    height: 100px;
    flex-grow: 1;
}

.container {
    display: flex;
    width: 100%;
    border: 1px solid black;
    flex-direction: row-reverse;
    justify-content: space-around;
    height: inherit;
}

/* 
flex-grow disetting di child nya.

boks 1 flex-grow :1;
boks 2 flex-grow :2;
boks 3 flex-grow :4;


total grow = 7
boks 1 punya grow 1/7
boks 2 grow 2/7
boks 3 grow 4/7
dari total width tersisa
 */

 /*
  ---Learning grid ---
  
  */
  .kontener {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 10px;
    column-gap: 10px;
  }
  .grid {
    border: 1px solid black;
    width: 60px;
  }
  .grid1 {
    background-color: beige;
  }
  .grid2 {
    background-color: aquamarine;
  }
  .grid3 {
    background-color: blue;
  }
  .grid4 {
    background-color: cadetblue;
  }

  /* 
  kita pakai grid templating 
  */

  .kontener1 {
    display: grid;
    grid-template-areas:
    "nav-header nav-header nav-header nav-header"
    "main-body main-body . nav-side"
    "footer footer footer footer" ;
  }


  .grids1{
    grid-area: nav-header;
    background-color: red;
    padding: 10px;
  }

  .grids2 {
    grid-area: main-body;
    background-color: blue;
    padding: 10px;
  }

  .grids3 {
    grid-area: nav-side;
    background-color: greenyellow;
    padding: 10px;
  }

  .grids4 {
    grid-area: footer;
    background-color: yellow;
    padding: 10px;
  }

  /* 
  next : css animation 
  */

  @keyframes mual {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(350deg);
    }
  }

  .spin-boy {
    animation: mual 1.5s infinite ease;
    display: inline-block;
    font-size: 30px;
  }

  /* animasi mobil*/

  @keyframes move {
    to {
      translate: 50px;
    }
  }

  .car {
    position: relative;
    display: inline-block;
    font-size: 25px;
    right: 0;
    animation: move 1s infinite alternate;
  }

  /*
  animation : move 1s infinite alternative;

 is shorthand from 
 
 animation-name: move;
 animation-duration: 1s;
 animation-iteration-count: infinite;
 animation-direction: alternative
 */
.car-list {
  width: 100%;
  max-width: 400px;
  position: relative;
}
/*
animation-timing-function atau disebut sbg easing

adalah beberapa perubahan animasi berdasar perubahan waktu
*/
.linear {
  
  animation-timing-function: linear;
}

.ease {
  animation-timing-function: ease;
}

.ease-in {
  animation-timing-function: ease-in;
}

.ease-out {
  animation-timing-function: ease-out;
}

.ease-in-out {
  animation-timing-function: ease-in-out;
}
.cubic-bezier {
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* next : rainbow text 

mari bikin teks yang ganti-ganti warna
*/

@keyframes rainbow {
  100%,
  0% {
    color: aqua;
  }
  20% {
    color: aliceblue;
  }
  30% {
    color: aquamarine;
  }
  40% {
    color: blue;
  }
  50% {
    color: ghostwhite;
  }
  60% {
    color: brown;
  }
  70% {
    color: yellow;
  }
  80% {
    color: burlywood;
  }
  90% {
    color: rebeccapurple;
  }
}

.teks-rainbow {
  animation: rainbow 3s infinite linear;
  font-size: 60px;
}