Halo semuanya, selamat datang di channel NgoDing Mastery Pada segmen landing page yang kedua ini, kita akan membuat sebuah landing page dengan menggunakan framework CSS yang bernama Bootstrap Bootstrap yang akan kita gunakan yaitu versi yang kelima dan tak lupa juga kita juga akan menambahkan sebuah animasi jadi ketika website di refresh atau misalkan kita masuk ke dalam sebuah website maka kita akan menambahkan sebuah animasi dengan menggunakan anime.style Kemudian yang kedua, kita akan menambahkan animasi ketika website di-scroll dengan menggunakan animate on scroll atau OS. Oke, yang berikut ini adalah website yang akan kita buat. Seperti biasa ada navbar dan juga hero.
Kemudian ketika di-refresh, maka akan ada animasinya dengan menggunakan animate.style. Dan ketika di-scroll, maka background pada navbar akan berubah warnanya. Kemudian kita scroll lagi, ini adalah section about, ini adalah section project.
Dan ketika di scroll maka akan ada animasinya dengan menggunakan animate on scroll. Kemudian kita scroll, ini adalah section service, kemudian ini adalah section FAQ. Yang akan kita buat dengan menggunakan sebuah komponen yang ada pada bootstrap yang bernama accordion.
Jadi ketika di klik maka akan muncul seperti ini. Dan terakhir adalah footer. Nah inilah project yang akan kita buat ketika di ukuran desktop.
Coba kita cek ya di ukuran mobile-nya. Nah kita lihat ini adalah di HP iPhone 12 ya. Kita cek, kita refresh, sama ya akan ada animasinya.
Kemudian kita scroll, akan berubah menjadi menu bar. Kita scroll, ini adalah about. Kemudian inilah projects, kemudian service, faq, dan terakhir adalah putar.
Nah inilah project yang akan kita buat pada video kali ini. Oke, seperti biasa buka kode editornya, dan pastikan teman-teman sudah membuat sebuah folder, yang nantinya folder tersebut akan kita gunakan sebagai tempat penyimpanan project yang akan kita buat pada video kali ini. Nah sebagai contoh disini saya sudah membuat sebuah folder dengan nama lp-hashtag2 atau landing page yang versi kedua.
Kemudian disini juga saya sudah menambahkan sebuah folder, folder assets. Yang dimana di dalam folder assets ada folder icon dan juga image. Di dalam folder icon ada sebuah gambar yang nantinya akan kita pakai sebagai favicon. Kemudian di dalam folder image akan ada beberapa gambar dan juga folder ya.
Ada folder projects dengan beberapa gambar projects. Kemudian folder service dengan beberapa gambar service dan juga gambar hero. Nah semua ini dapat teman-teman download ya seperti biasa di link Google Drive. Nanti akan saya taruh di deskripsi.
Nanti teman-teman tinggal download kemudian simpan di dalam folder project teman-teman. Oke jika sudah. Teman-teman dapat membuat sebuah file.
Seperti biasa kita akan membuat sebuah struktur folder atau file terlebih dahulu. Kita buat index.html. Kemudian selanjutnya kita akan membuat sebuah folder dengan nama disk.
Kemudian di dalam folder disk kita akan membuat sebuah folder lagi dengan nama css. Dan yang kedua adalah js. dan di dalam folder CSS akan kita buat sebuah file dengan nama style.css dan di dalam folder JS kita buat file script.js oke jika sudah kita bagi dua style nya kita pindahkan ke bagian kanan script nya juga sama kemudian cat rlb agar sidebar nya hilang Oke setelah itu kita akan membuat, bukan membuat ya, kita akan mengkopikan starter template dari bootstrapnya ya.
Jadi kita bisa ke web browser, kita bisa ketikan bootstrap. Kemudian kita masuk ke getbootstrap.com, ke bagian document atau docs, ke bagian introduce, scroll ke bawah. kita copykan yang ini saja ya yang langsung ada JS nya kita copy paste di HTML save kita cek jangan menjalankan live servernya bagi yang belum menginstal live server teman-teman dapat ke bagian extension nya ctrl b eh bukan ctrl b ke bagian sini ya extension kemudian cari live server kemudian install jika sudah ada tinggal kita klik kanan open with live server atau bisa klik yang go live ya kita open with live server, tunggu sebentar sudah jalan ya template bootstrapnya selanjutnya kita akan membuat, bukan membuat lagi kita akan mengkopikan fonts dari fonts google.com yaitu fonts popin jadi teman-teman dapat ke tab baru kemudian ketikan fonts.google kemudian kita ketikan popins kita scroll ke bawah add yang regular seperti biasa regular kemudian medium semi bold dan juga bold selanjutnya kita copykan saja linknya kopikan kembali ke kode editor simpan di dalam tag head kita akan buat sebuah komentar terlebih dahulu untuk menandai kita ketikan font popin paste, save kemudian yang selanjutnya kita akan menambahkan sebuah font awesome untuk jaga-jaga jika web tersebut kita akan menggunakan icon nah karena project Pada video kali ini kita akan membuat sebuah web dengan icon Jadi kita akan menambahkan icon dengan menggunakan font awesome Jadi teman-teman dapat ke tab baru kemudian font awesome cdn ke cdnjs.com Kita kopikan yang paling atas, copy link tag kembali ke kode editor Kita buat komentar font awesome cdn Oke paste save.
Oke selanjutnya adalah kita akan mengganti icon. Ini adalah five icon ya. Five icon.
Jadi kita akan menggantinya dengan gambar yang sudah kita sediakan. Caranya sangat mudah. Tinggal kita beri link di dalam taghead.
Kemudian five icon. Kita hapus. Catera spasi. Kemudian ke assets.
Icon. Done. nm.png kita cek, sudah berubah kita akan merubah title nya terlebih dahulu title kita akan buat dengan misalkan loading landing page 2 kemudian loading mastery Oke, selanjutnya adalah karena kita sudah menambahkan font popin, tinggal kita inisialisasi fontnya. Jadi kita bisa kembali ke fonts.google.com, scroll ke bawah di bagian selected family-nya.
Nah, di bagian CSS rule-nya kita tinggal kopikan. Kopi, kemudian kembali ke kode editor, ke style.css. Kita bisa ketikan bintang ya.
Oke, berlaku CSS, ketikan bintang, kemudian kita paste, save. Dan jangan lupa harus dihubungkan ya. Jadi kita harus menghubungkan file HTML dengan file style.css yang telah kita buat. Oke, kita buat di bawah saja. Kita buat CSS, ketik link, kemudian CSS, hapus.
ctrl spasi masuk ke disk CSS dan style.css oke kita cek ke ini oke kita repress kita cek dengan menggunakan extension chrome ya ada yang namanya what font klik kemudian kita arahkan nah sudah berubah ke font popin yang berarti font popin sudah berhasil kita terapkan pada project atau web yang akan kita buat Oke sip oke selanjutnya kita akan membuat sebuah navbar terlebih dahulu jadi teman-teman dapat ke website bootstrapnya langsung ya ke getbootstrap.com kemudian cari navbar di bagian sidebar teman-teman dapat Scroll ke bawah kemudian cari komponen kemudian pilih navbar ini atau bisa cara cepatnya ctrl K di keyboard teman-teman kemudian ketikan navbar atau apapun ya navbar oke scroll ke bawah kita akan copykan yang ini saja ya copykan kemudian kembali ke kode editor kita akan hapus hello world nya kemudian kita akan memberikan sebuah komentar untuk menandai bahwa ini adalah komponen navbar ctrl ternyata untuk membuat komentar kita ketikan misalkan navbar alt shift bawah untuk menduplikat satu kali tergantung klikannya berapa kali kemudian paste, save, kita cek kita refresh nah sudah ada ya Oke untuk navbar ini kalau teman-teman perhatikan ini tidak ada space kiri dan kanan. Nah karena ini menggunakan container fluid yang artinya 100% widthnya. Agar ada space kiri dan kanan kita akan menghapus fluidnya.
Jadi teman-teman dapat ke kembali ke konditor. Kemudian di bagian container fluid kita akan menghapus fluidnya. save kita cek nah sudah ada ya space kiri dan kanan selanjutnya kita akan menghapus drop down kemudian link yang disable ini kemudian inputan sama button search kembali ke kreditor pertama kita akan menghapus drop down terlebih dahulu kita akan hapus di bagian sini sampai disable ya kita hapus save kemudian yang form untuk inputan sama buttonnya kita hapus save kita cek lagi oke sip ya sudah berhasil kita hapus selanjutnya kita akan menambahkan beberapa kerangka lagi ya link-linknya jadi kita akan menambahkan beberapa link Hai jadi teman-teman dapat kembali ke kode editor kita akan membuat karangkat terlebih dahulu sebelum memberikan sebuah kelas style jadi kita akan menambahkan pertama kita akan menduplikat di bagian linknya kita duplikat kita selesai dulu atas bawah 123 pertama home Kemudian untuk link kedua kita akan memberikan misalkan about us.
Kemudian yang ketiga kita akan memberikan misalkan projects. Yang keempat service. Dan yang kelima adalah FAQ. Untuk pertanyaan-pertanyaan ya.
Jadi untuk FAQ ini kita akan. memberikan sebuah komponen pada bootstrap yang bernama accordion Oke kita cek lagi Oke sip sementara sudah kita tambahkannya link-linknya kemudian kita akan menambahkan sebuah icon ya icon yang kita ambil dari font awesome jadi teman-teman dapat ke tab baru atau di font awesome ini kita akan ganti menjadi font awesome icon kemudian kita klik iconnya font awesome kemudian kita cari kita akan membuat dua icon yang pertama kita akan membuat sebuah icon link in jadi kita ketikkan link cut in kemudian enter kita klik kemudian copy ya kembali ke konditor kita akan membuat di bawah all saja di bawah all kita akan membuat class terlebih dahulu atau kita buat div saja ya kita buat div kemudian paste save kita cek dulu Nah sudah ada ya dan yang kedua kita akan menambahkan ikon Facebook Oke kita cari lagi Facebook kemudian kita copy kan yang ini saja yang bulet kita copy kan kita pastu dibawah linkin save Oke jadi ini adalah pembungkus untuk icon ini untuk menu-menu dan ini untuk logo untuk logonya kita akan ubah menjadi modding kita cek dulu oke sip selanjutnya kita akan memberikan sebuah style pertama kita akan memberikan style agar link ini berada di tengah Caranya kita bisa kembali ke kode editor. Nah, di bagian ini ya, di bagian tag ul ini.
Nah, ini kan ada ME auto. ME itu kan berarti margin end, maka akan berada di kiri. Nah, kalau diberikan margin start atau MS, maka akan berada di kanan.
Nah, agar di tengah kita akan memberikan MX. kita save, kita cek, nah maka akan berada di tengah kemudian kita inspect, kita coba cek ya di ukuran menu bar nya nah oke sip ya, untuk navbar, bukan navbar, ketika di ukuran tablet ya ini tidak akan banyak kita ubah, namun ada beberapa sih sedikit yang akan kita ubah nanti Oke, kita fokus dulu di ukuran large ke atas. Oke, kita kembali ke kode editor. Pertama untuk logo, kita akan memberikan FW Bold. Yang artinya font weight atau ketebalan hurufnya akan kita ubah menjadi bold.
Save, kita cek. Nah, sudah berubah. Kemudian untuk font size-nya kita akan ubah menjadi... 4 misalkan kita cek dulu oke 4 cukup ya oke selanjutnya untuk icon kita akan memberikan style juga ya sama kita ke bagian icon pertama kita akan memberikan font size nya kita cek misalkan 4 save kita cek dulu Oke kita kurangi ya. 5. Ini kalau teman-teman bertanya ini FS1 sampai 6 itu sama seperti heading ya.
Heading 1 sampai 6 atau H1 H6. Kita cek lagi. Oke cukup ya. Kalau kurang tinggal teman-teman besarin ya. Oke selanjutnya kita akan memberikan jarak.
kiri dan kanan jadi kita akan memberikan MX atau margin inline kalau di CSS ya 2 kita copykan gunakan paste save kita cek lagi oke sip cukup ya Oke selanjutnya kita akan beralih ke link di bagian link kita akan memberikan jarak sama jarak kita akan tambahkan jaraknya kiri dan kanan untuk memberikan jarak kiri dan kanan yaitu kita akan memberikan MX jadi kita bisa memberikan di malu jadi coba disini di home kita akan MX satu save kita cek key kemudian di about us MX satu kita copy kan saja ya copy kan Oke save kita cek ya sudah ada jarak kemudian karena kita akan memberikan background image pada section Hero jadi untuk navbar ini kita akan memberikan sebuah position yaitu position fix yang di bootstrap ada yang namanya position fix top jadi teman-teman dapat kembali ke kode editor ya di pemungkus paling luar kita akan memberikan sebuah kelas yang bernama fixed top, diketikan fixed top, save ini tidak akan ada yang berubah ya karena untuk position fix akan terlihat ketika websitenya di scroll Oke selanjutnya adalah kita akan membuat sebuah seksion hero terlebih dahulu jadi kita kembali ke kode editor kemudian kita akan memberikan sebuah komentar lagi misalkan hero duplikat atas shift bawah pertama kita akan membuat sebuah pemungkusnya terlebih dahulu jadi kita akan memberikan kelas hero untuk pemungkus paling luarnya kemudian container row kemudian call kemudian di dalam kolom ini kita akan memberikan sebuah has satu pertama untuk value nya kita akan memberikan join bersama kami kemudian br agar ke bawah kemudian membangun sebuah project bangunan misalkan ya save kita cek Oke sudah ada kemudian dibawah satu kita akan membuat sebuah paragraf lorem 10 kata kemudian button Untuk button pertama kita akan memberikan join with us. Kemudian button kedua kita akan memberikan about us. Save. Kita cek dulu. Oke, kerangka untuk session hero sudah kita buat.
Selanjutnya kita akan memberikan style. Pertama kita akan memberikan sebuah background pada session hero-nya. Untuk memberikan background image kita akan tambahkan di file CSS jadi kita bisa panggil class hero kemudian background image url utip titik-titik slash untuk keluar satu kali, kemudian titik-titik slash lagi, masuk ke folder assets, kemudian image hero.jpg kemudian kita akan memberikan background size nya yaitu cover kemudian background positioning nya menjadi center dan background repeat, no repeat save, kita cek dulu, ok sip nah selanjutnya kita akan memberikan sebuah height agar background nya terlihat atau kelihatan jadi kita akan memberikan sebuah width dulu kita akan memberikan width 100%, kemudian height 100, viha agar full satu layer kita cek ke sip nah ini untuk navbar karena backgroundnya bukan transparan alias background light nah ini ini background lightnya alias putih jadi kita akan hapus background lightnya kita cek lagi ke sip Oke selanjutnya kita akan memberikan style pada hero nya agar H1 atau apa yang ada di dalam hero ini akan ke tengah gitu ya.
Oke kita akan memberikan di bagian hero terlebih dahulu. Karena ini kan satu kolom. Jadi nanti hero ini akan ke tengah gitu ya ceritanya. kemudian kita kemudikan display flex terlebih dahulu kemudian align item center save nah sudah ke tengah ya nah agar textnya ke tengah kita kemudikan text center di bagian kolom text center nah sip oke selanjutnya kita akan memberikan sebuah layar gitu ya ceritanya jadi di atas gambar ini akan ada layar hitam contohnya seperti ini ya kita akan memberikan url bukan url linear gradient ketikan saja dulu black kemudian arahkan kita akan kurangi opacity nya kita akan kurangi misalkan 8 ya kemudian kita kopikan Kemudian koma.
Pasti save. Kita cek. Nah, sudah ada. Oke, selanjutnya adalah kita harus merubah warnanya. jadi kita harus merubah warna terlebih dahulu pada navbar kemudian text ini juga kita harus rubah sebelum itu kita akan memberikan style pada buttonnya jadi kebagian button kita akan memberikan sebuah class kita akan memberikan button kemudian button primary untuk button pertama ya kita cek dulu sudah berubah kita akan memberikan size pada button nya kita akan memberikan button lg agar lebih besar kemudian kita akan merundutnya menjadi 1 dan kita akan memberikan sebuah margin n agar ada jarak dengan button yang kedua Oke selanjutnya untuk button yang kedua kita akan memberikan class juga sama button kemudian button kita akan memberikan button outline kita telah spasi biar kelihatan ya classnya kita akan memberikan button outline light kemudian button alg sama agar lebih besar gitu ya kemudian round out 1 kita cek selanjutnya kita akan memberikan warna pada textnya jadi kita bisa memberikan sebuah kelas pada bootstrap yang namanya text-width kita akan memberikan kelas pada satu kita akan memberikan text-width kemudian pada p nya juga sama kita akan memberikan kelas text-width oke kemudian kita akan merubah warnanya juga pada navbarnya oke kita scroll ke atas Hai untuk nafbar kita kembalikan warna ada yang namanya nafbar dark nah jadi putih ya kemudian pada iconnya juga sama kita akan rubah warnanya untuk icon berkita akan rubahnya tar coba kita akan rubah di bagian sini teks-teks yang cek kalau bisa kita gunakan teks white save kita cek oke sip Oke selanjutnya kita akan menambahkan beberapa style ke H1 dan juga yang lainnya kita kembali ke kode editor pertama di bagian H1 kita akan memberikan sebuah font-width jadi kita bisa memberikan FW kemudian bold kemudian kita akan memberikan margin-bottom agar ada jarak dengan paragrafnya kita akan memberikan MB untuk value nya kita akan memberikan 4 save, kita cek dulu kita refresh, nah sudah ada oke selanjutnya kita akan memberikan di bagian paragraph nya, di bagian paragraph kita akan memberikan pertama margin bottom agar ada jarak dengan button nya kita akan memberikan margin bottom nya sama 4, kemudian untuk text opacity nya kita akan menguranginya agar tidak terlalu putih jadi kita akan memberikan sebuah text opacity text opacity 50 save kita cek oke sip kita coba 75 kita cek lagi 75 cukup lah 75 oke sip untuk hero saya rasa sudah beres ya oke selanjutnya kita akan membuat sebuah section about jadi kita bisa kembali ke kode editor seperti biasa kita akan membuat sebuah komentar terlebih dahulu kita isikan misalkan about kemudian alt shift bawah untuk menduplikat satu kali kemudian seperti biasa kita akan membuat sebuah pemungkus paling luar jadi kita akan membuat kelasnya terlebih dahulu kita buat kelas dengan nama misalkan About untuk pemukus paling luarnya kemudian kita akan membuat sebuah container kemudian row satu baris satu kali kemudian kita akan membuat dua kolom berarti kita harus membuat dua kelas call kita duplikat atau shift bawah untuk kolom pertama kita akan mengisikan sebuah H2 Untuk hardware pertama kita akan mengisikan misalkan 2000 ya.
2000 plus kemudian untuk H2 yang kedua kita akan isikan Project selesai kemudian dibawah Project selesai kita akan memberikan sebuah paragraf dengan lorem delapan kata kemudian di bagian amet ini kita akan memberikan sebuah br agar ininya ke bawah ya Oke selanjutnya coba kita cek dulu. Oke sudah ada. Kemudian kita akan isikan di bagian kolom kedua. Sama seperti kolom pertama kita akan isikan H2.
Kemudian untuk H2 pertama kita akan isikan 250+. Kemudian H2 yang kedua kita akan memberikan misalkan perusahaan bekerja sama. Kemudian di bawah perusahaan bekerja sama kita akan memberikan sebuah paragraph.
Sama lorem 8 kata. Kemudian di amet kita akan memberikan bare. Save.
Kita cek lagi. Oke, sudah ada ya kerangkanya. Selanjutnya kita akan memberikan sebuah style. Oke, pertama di bagian H2 kita akan memberikan sebuah class.
Oke, pertama kita akan memberikan sebuah... Ehm... fwBolt, save, kita cek dulu oke, untuk bolt kita berikan disini saja jadi kita hapus saja, kita akan berikan di bagian hardware yang kedua kita beri kelas fwBolt kemudian kita akan berikan margin-bottom agar ada jarak dengan paragrafnya, kita isikan 2 oke, kita cek, kita refresh Oke, kemudian untuk P-nya kita akan memberikan sebuah kelas text center.
Jangan ya, jangan. Jangan di sini. Untuk text center kita akan memberikannya di bagian kolom.
Text center. Nah, sip. Sama untuk ini juga ya.
Kita kemudikan text center. Oke. Oke, lanjut ke H2 yang kolom kedua.
Kita kemudikan kelas. Kemudian FW, bold, MB, 2. Save. Kita cek. Oke, sip.
Selanjutnya, kita akan memberikan di bagian kolom lagi. untuk kolom kita akan memberikan sebuah padding atas bawah agar ada jarak ya ini yang atas dan bawahnya kita kemudikan sebuah py itu berarti kan vertikal ya jadi atas bawah akan ada jaraknya jarak padding kita kemudikan 5 kita cek dulu kemudian kita copy kan saja paste save kita cek ke sip selanjutnya kita akan memberikan sebuah backgroundnya jadi untuk background kolom pertama dan juga kolom kedua akan kita berikan background color key di bagian kolom kedua kita kembalikan background colornya primary misalkan kita cek dulu Oke cukup ya Nah ini supaya full kita akan memberikan fluid. Nah sip. Kita cek.
Oke sip. Kemudian untuk kolom pertama sama kita akan memberikan sebuah background juga. Tapi untuk kolom kedua kita akan memberikan background color di CSS nya.
Jadi kita bisa panggil about. Kemudian kita panggil row. kemudian kolom nth child 1 yang background color misalkan 222 save kita cek oke cukup ya 222 selanjutnya kita akan memberikan sebuah warna pada textnya berarti kita harus memberikan di bagian sini ya kita akan memberikan text warna putih berarti kita akan memberikan text white kita cek dulu oke sip kemudian di kolom kedua juga sama kita akan memberikan text white agar warnanya putih kita cek lagi oke sip oke kita inspect ya kita coba cek di ukuran large ke bawah alias 992 Oke di ukuran 992 sip.
Oke. Kita buat seperti ini aja. Kita buat seperti ini aja.
Row. Cols. Lg.
Kita akan membuat sebuah. kolom yang ada di dalam row, jadi yang ada di dalam row ini ya. Kita akan membuat kolom yang ada di dalam row ketika di ukuran large ke atas atau 992 ke atas widthnya, kita akan buat menjadi dua kolom. Nah di bawah 992 kita akan buat menjadi satu kolom.
Coba kita cek ya. Nah sudah berubah ya. Ketika di atas 992 akan menjadi dua kolom.
ketika dibawah 992 kita cek kita lihat akan menjadi satu kolom jadi satu kolom ya dua baris Oke sip Coba kita cek diukuran 420 Oke sip Oke serasa untuk about sudah beres ya Oke selanjutnya kita akan menambahkan sebuah function pada navbar Jadi kalau teman-teman perhatikan ketika website di scroll maka navbar juga akan ikut scroll karena kan kita sudah menambahkan sebuah position fix pada navbarnya jadi ketika website di scroll maka navbarnya juga akan ikut scroll, nah ketika di scroll maka kita akan memberikan sebuah function agar navbar ini ada warna backgroundnya jadi kita bisa kembali ke konditor pertama kita harus cek apakah file html kita dengan file javascript sudah terhubung ya Nah, jadi kita harus tambahkan dulu ya file javascript kita di file HTML agar terhubung. Kita bisa panggil script src ctrl spasi kemudian arahkan ke disk kemudian js dan script.js. Oke, sudah terhubung ya antara file HTML dengan file javascript yang telah kita buat.
Selanjutnya kita ke file javascriptnya. Oke, yang kita butuhkan adalah kelas navbarnya. Jadi kita buat variable cons kemudian navbar misalkan.
Sama dengan document.querySelector. Kemudian kita panggil kelas navbar. Selanjutnya kita akan memberikan sebuah addEventListener pada window. Kita ketikan window.addEventListener. Scroll.
kita akan membuat sebuah row function ketika window ini di scroll jadi window itu website nya di scroll kita akan pertama kita akan buat dulu const window position window titik nah ini window titik scroll y 0 kemudian kita akan panggil navbar nya titik classlist kemudian toggle kita akan memberikan misalkan scrolling active save aktif oke koma window position jadi cara bacanya ketika window atau website ini di scroll kita akan memberikan sebuah kelas baru yang namanya scrolling active ketika position window-nya lebih dari 0. Jadi kita cek. Ini kan posisinya paling atas itu 0. Jadi ketika di-scroll, kita inspect, kita lihat di bagian navbar-nya. Ini kan posisinya paling atas 0, jadi ketika di atas 0 kita akan memberikan kelas baru pada navbunnya, scrolling active. Coba kita cek apakah aktif. ketika kembali ke paling atas akan hilang kembali, hilang kembali, hilang lagi scrolling aktifnya, ketika lebih dari 0 maka scrolling aktifnya akan ada selanjutnya kita akan menambahkan sebuah kelas pada CSS nya, atau pada scrolling aktifnya kembali lagi ke kode editor ke bagian style.css kita akan panggil kemudian kita panggil class scrolling-active kita akan memberikan background-color untuk warna kita isikan 0d6 kemudian efd Oke save, kita cek, kita scroll, nah maka sudah berubah menjadi warna biru.
Oke, selanjutnya kita akan berikan sebuah transition akar. Ini kan terlalu cepat ya, keluar warnanya. Untuk berikan transition kita akan berikannya di bagian navbarnya. Kita berikan transition. all.03sec kemudian is, style dari transitionnya, kita cek, kita scroll, maka akan ada transition.
Kenapa kita tidak memberikan transition di bagian scrolling aktifnya? Kalau kita berikan transition di bagian scrolling aktif, maka transitionnya akan ada ketika aktif. Nah, ketika kembali ke paling atas, akan... kehilang gini, nah, maka si transition-nya akan tidak tidak aktif transition-nya, oke, coba kita cek ya kita cut, kita pastikan save, nah ketika di scroll, ada ya transition-nya, ketika di scroll ke atas, nah, akan hilang cepat gitu, jadi tidak ada transition-nya nah jadi bedanya gitu ya jadi agar ada transition di keduanya kita akan memberikan di bagian navbar Oke sip ya selanjutnya adalah kita akan memberikan padding ya 15 untuk atasnya kanannya 0 bawahnya 15 pixel kirinya 0 ketika di scroll maka akan nah seperti ini Oke sip nice Oke ya saya rasa sudah beres untuk navbar Oh ya untuk icon ini kita akan memberikan warna ketika di hover Jadi kita bisa panggil kelas navbar navbar kemudian i untuk icon Kita akan memberikan sebuah Oh ya lupa hovernya over, color nya kita akan berikan yang ini saja kemudian kita akan berikan cursor nya pointer cursor pointer, save, kita cek hmm tidak berubah, sepertinya kita harus menghapus yang di bagian ini, text white nya kita hapus kita akan berikan di CSS titik navbar i kemudian kita berikan color white save, kita cek dulu nah, sip oke kita inspect kita cek lagi nah, untuk di ukuran tablet ke bawah kita akan berikan ini nyecek center ya Jadi kita bisa ke bagian mana nih di sini teks center kita cek kita klik key kemudian iconnya juga sama kita akan berikan teks center coba bisa kita cek kita klik, oke sip sudah ke tengah Oke oke selanjutnya kita akan membuat sebuah seksion Projects jadi kita bisa kembali ke konditor ya seperti biasa kita akan membuat sebuah komentar terlebih dahulu kita buat komentar misalkan Projects kemudian Projects nah kita duplikat seperti biasa kita akan membuat sebuah kelas pemungkusnya kita buat misalkan kelas projects kemudian kita akan membuat container kemudian row oke di dalam row pertama ini atau di baris pertama ini kita akan membuat sebuah kolom satu kolom kita akan isikan h2 dengan value nya detail projects kita akan buat br yang telah diselesaikan save kita cek sudah ada ya kita akan memberikan padding dulu deh di bagian style.css nya kita panggil projects class projects projects kita akan memberikan padding untuk atasnya kita akan memberikan 100px kanannya 0, bawahnya 100px dan kirinya 0 kita cek, oke kemudian untuk row kedua kita akan buat row kedua atau baris kedua kita buat row, kemudian call nah di dalam row kedua ini kita akan membuat beberapa kolom Nah karena setiap kolomnya hampir sama jadi kita akan memberikan style-nya pada kolom pertama terlebih dahulu kemudian kita duplikat.
Nah di dalam kolom pertama kita akan membuat sebuah image terlebih dahulu ya. Kita panggil image kemudian catel spasi kita arahkan ke assets kemudian image projects, projects 1 kemudian kita buat class. Kita buat kelas, width-nya kita beri 100%.
Kemudian di bawah image kita akan memberikan sebuah judul dengan heading 4 atau H4. Untuk kolom pertama kita akan memberikan H4-nya, misalkan house. Kemudian di bawah H4 kita akan memberikan paragraph.
kita akan memberikan lorem 10, save, kita cek oke, sudah ada selanjutnya kita akan memberikan style pada H4 nya kita akan memberikan kelas FW semi bold, save, kita cek oke, sudah ada kemudian kita akan duplikat kita duplikat, 1, 2, 3, 4, 5, kita cek dulu, oke untuk image pertama kita akan terlalu menjadi project kedua untuk H4 nya kita akan memberikan restaurant, kita cek dulu, oke Kemudian untuk kolom kedua, kita akan memberikan Projects 3. Dengan H4-nya, kita akan memberikan Apartment. Kemudian Projects 4, kita akan memberikan H4-nya School. Kemudian untuk Projects 5, kita akan memberikan H4-nya School.
interior untuk Project 6 sampai 5 ya. Jadi kita hapus ya kolom ke 6 nya. Save, kita cek.
Oke selanjutnya adalah kita akan memberikan row seperti yang ini ya About kita akan memberikan row calls. Oke caranya di bagian row kita akan panggil row calls ketika diukuran large kita akan memberikan kolomnya 3 kita cek dulu oke kemudian ketika di ukuran MD atau 768 ke atas kita akan memberikan row atau kolomnya 2 kemudian row calls 1 save kita cek kita inspect Kita kecilkan di bawah 9, 9, 2. Apakah akan menjadi 2 kolom? Nah, akan menjadi 2 kolom ya. 2, 2, 2. Kemudian di bawah 7, 6, 8. Akan menjadi 1 kolom.
Oke, sip. Oke, kita kembali lagi ke kode editor. Nah, kita akan memberikan jarak ya antara row pertama dengan row kedua.
Oke kita akan berikan di bagian ini ya. Kita akan berikan margin bottom 5. Coba kita cek dulu. Oke 5 cukup ya 5. Atau kita kurangi deh.
Kita akan kurangi menjadi 4. Save kita cek. Nah cukup ya 4. Kemudian kita akan memberikan. ya, kita akan memberikan border ya di bawah H2 nya kita akan berikan border bottom, save kita cek dulu, sudah ada garisnya kemudian kita akan berikan padding bottom, padding bottom nya kita akan berikan 2 kemudian FW semi bold save kita cek Oke sip cukup ya ada garisnya menurut aku lihat dan ke sip nah ini ya hate-nya karena tidak sama jadi kita akan memberikan manual di CSS jadi kita bisa panggil Projects kemudian IMG hate-nya kita akan memberikan 250 save kita cek nah sip oke selanjutnya kita akan memberikan gutter, gutter itu sama ya kayak gap kalau grid itu kan pakai gap nah kalau tidak pakai grid kita bisa pakai namanya gutter kita panggil G untuk value nya kita kembalikan coba 4 save kita cek nah cukup ya selanjutnya kita akan memberikan jarak antara image dan juga deskripsinya di bagian image kita akan memberikan margin bottom 3 3 cukup ya kita duplikat kita klik kemudian tekan LT klik ops LT jangan lupa tekan kita paste, kita spasi dulu paste, save kita cek oke, sip dan tak lupa untuk alternatifnya kita akan memberikan unsplash unsplash.com kita duplikat kita duplikat copy kita tekan alt paste save oke sip kayak untuk project serasa sudah beres ya Coba kita cek lagi inspect kita kecilkan oke oke oke sip tetap coba kita cek di mobile page ya dengan menggunakan extension dari Chrome oke, oke, sip sip sip sip oke untuk project, saya rasa sudah beres ya oke selanjutnya kita akan membuat sebuah section service nah project kan sudah selesai selanjutnya kita akan membuat section service kembali ke kode editor Seperti biasa kita akan membuat komentar lebih dahulu.
Kita buat service. Kita duplikat, alt shift bawah. Kita buat class service. Kemudian kita akan buat container. kita akan buat row kemudian call untuk value nya kita akan isikan H2 dengan isinya layanan kemudian br yang dapat dapat diberikan save kita cek Oke sudah ada ya kemudian kita akan memberikan style terlebih dahulu di bagian kolomnya bukan kolom, H2 nya kita buat class di H2 nya kita akan memberikan FW semi bold kalau tidak keluar LT spacy eh CTL spacy maksudnya ya kemudian border border bottom untuk kemudian PB2 padding bottom nya 2 oke kita cek, oke sip sudah ada Selanjutnya kita akan memberikan row yang kedua.
Kita buat row. Kemudian kolom. Nah kita akan membuat dua kolom.
Kita alt-shift bawah untuk menduplikat. Untuk kolom pertama kita akan mengisikan sebuah image. Jadi kita bisa panggil image.
Kita panggil image. Kita panggil alt-shift bawah. Alt-shift bawah.
Alt-shift bawah. Kita ke assets. Kemudian image.
service kemudian service yang pertama atau save bawah ini kita rubah menjadi dua kita save kita cek Oke sudah ada selanjutnya kita akan memberikan sebuah display flex pada kolomnya agar si image ini menjadi dua ya ini kan ke bawah akan kita bersebelahan ya biar sebersebelahan kita buat display flex, kemudian kita cek dulu ya oke, sudah ada kemudian kita akan memberikan width sama height ya, image nya kita akan buat di CSS, kita bisa panggil service kemudian kita panggil image untuk width nya kita akan memberikan 250px dan height nya kita akan memberikan 400px taras save kita cek ke sip selanjutnya kita akan memberikan sebuah margin agar ada jaraknya antar image nya Nah untuk menggunakan margin kayak untuk lebih modenya ke lebih mudahnya kita akan memberikan gatter ya untuk gatter kita akan memberikan GX batang GX1 kita cek berarti jangan pakai gutter deh, pakai margin saja berarti kita akan berikan di bagian image class kita beri margin n 2 kita cek oke 1 oke 1 cukup lah ya, 1 Selanjutnya kita akan memberikan value pada kolom keduanya. Untuk kolom kedua kita akan memberikan sebuah halima. Untuk halima pertama kita akan memberikan misalkan bekerja sama dengan desain hebat.
Kita save dulu, kita cek. Oke sip kemudian kita duplikat saja untuk halima kedua kita akan memberikan misalkan alat-alat dan SDM yang berkualitas serta berpengalaman save data check Oke, sip ya. Kemudian kita kembali lagi ke kreditor.
Untuk halima ketiga, kita akan memberikan tersedia produk interior. Kemudian halima yang keempat, kita akan memberikan... 90% dapat mengerjakan proyek sesuai target.
kemudian yang kelima harga yang terjangkau save kita cek agar ke tengah ya ininya kita akan memberikan sebuah display flex pada row nya karena row ini gak usah display flex ya berarti kita langsung berikan align item center align item center save kita cek oke sudah ke tengah kemudian kita akan memberikan sebuah icon ya di bagian sininya di bagian sebelah kata-katanya kita akan memberikan sebuah icon dari font awesome kita panggil class FA, setelah spasi kalau nggak keluar ya. Regular, regular, kemudian FA, circle, check. Save, kita cek dulu. Oke, sudah ada.
Kita kopikan saja. Depas deh. kita cek, oke sudah ada selanjutnya kita akan memberikan style ya oke pertama kita akan memberikan style pada halimanya kita bisa panggil service kemudian halima kita akan memberikan line height 1.8 kemudian kita akan membuat display flex ya kemudian align item center agar icon semennya lurus ya kemudian kita akan memberikan kolom kolom gap 10 pixel save kita cek oke sip kemudian kita akan memberikan apa lagi ya warna kita akan menggunakan warna pada iconnya kita bisa panggil service i kemudian color kita langsung saja green dengan font size kita akan memberikan 30px save kita cek oke sip selanjutnya apa ya jarak jarak kita akan memiliki jarak antara row 1 dan row keduanya kita akan memberikan mb MB4 save kita cek kemudian kita coba inspect kita kecilkan Oke hmm kita cek dulu ketika diukuran kita akan memberikan kolomnya 2 kemudian ketika di bawah large kita akan memberikan kolomnya 1 jadi kita bisa berikan di sini kita bisa panggil row calls lg2 row calls lg1 kita cek nah kita kecilkan oke nah ini sudah dirubah ya coba kita beri media query saja kita panggil media screen and max width 992 pixel kita bisa panggil class service kemudian image kita akan memberikan with nya menjadi 220px kita cek Oh bukan 992 1200 1200 pixel Save, kita cek Oke Oke Oke, sip Nah, di ukuran 992 Kita akan menghilangkan image-nya Nah, kita bisa Memberikan sebuah display block Dan juga display non pada Um kita bisa berikan di kolom kita bisa panggil D BLG BLOCK jadi ketika diukuran large ke atas kita akan memunculkan image nya ketika dibawah 992 atau large ke bawah kita akan memberikan display none save kita cek Nah, sudah menghilang.
Ketika di atas 992, maka akan ada gambarnya. Ketika di bawah, akan menghilang. Oke, sip. Oke, kita cek-cek lagi. Oke.
Oke. Oke. Oke, saya rasa cukup ya.
Coba kita cek di ukuran dengan extension chrome. Oke, cukup ya. Coba kita cek dengan iPhone 5. di iPhone 5 harus diubah lagi ya tapi kalau lihat rata-rata HP sekarang kan width nya itu minimal sudah 420 jadi kita berikan 420 saja deh ya bukan 420, 390 ya Xiaomi 360, 360, oh 360, paling kecil. Minimal berarti 360 rata-rata HP.
Oke, kita kecilkan saja deh. Oke, kita lihat di ukuran width. Kita kecilkan di ukuran...
Coba kita cek di ukuran 4, 4, 7, 10 deh. Kita buat media query. Kemudian n max width 4, 7, 5 pixel. Kita akan mengecilkan hal 5-nya.
Jadi kita bisa panggil service kemudian halima one size kita akan memberikan untuk halima itu defaultnya pada apa ya coba 20px kita besarkan berarti di bawah 16 16 coba kita cek Oke, cukup lah ya. Oke, sip. Oke, saya rasa untuk service sudah beres ya.
Oke, selanjutnya kita akan membuat sebuah section FAQ. Nah, untuk FAQ ini kita akan membuat dengan menggunakan sebuah komponen dari bootstrap namanya Accordion. Jadi, Accordion itu... itu seperti ini ya nanti kita coba lihat akor Dion dan jadi sepenuhnya ketika diklik akan ada ini ya efeknya jadi ketika diklik akan muncul gini key-am kita akan copy kan ini saja yang semua kita copy kan aja semuanya oke kita buat komentar seperti biasa kita buat FAQ, duplicate, kita buat class FAQ, kemudian container, kemudian row, call nah untuk kolom pertama, di bagian row pertama kita akan membuat sebuah H2 untuk value nya kita akan memberikan pertanyaan kemudian kita akan berikan yang biasa ditanyakan save seperti biasa kita akan memberikan sebuah kelas pada H2 nya kelas ke FW semi bold setelah spasi kalau nggak keluar kemudian border bottom padding bottom nya kita beri 2 save kita cek Oke, sudah ada ya.
Kemudian kita akan memberikan sebuah padding pada kelas FAQ-nya agar ada jarak dengan kelas, eh bukan kelas, section service. Kita bisa panggil kelas FAQ di style.css-nya. Kita beri padding top 100px, save, kita cek.
Oke, sudah ada jarak. Kemudian kita akan paste. akordionnya sebelum itu kita harus membuat row yang kedua kita buat row kemudian kolom kita paste saja save Oke kita cek sudah ada ya Oke kita akan hapus yang yang ketiga wait ini akordion akordion item Oke berarti kita hapus yang di bagian sini. Ups.
Kita hapus. Save. Oke kita hapus.
Ini div lagi satu lagi. Save. Oke. Kita cek.
Oke sip. Nah selanjutnya. Nah ini kan. yang kita inginkan itu ketika masuk ini tidak akan langsung kebuka gini ya jadi akan tertutup seperti ini jadi kita harus menghapus di bagian ini show untuk show ini kita hapus save kita cek kita refresh oh tapi ada ini ya ada ininya kita kita copy kan saja deh yang kedua supaya tidak ribet ubah-ubah ini yang pertama kemudian ini yang kedua kita copy kita hapus disini save save kita cek, oke sip ya tinggal kita ubah judulnya dan juga ininya oke pertama untuk ininya kita akan hapus, kita akan ganti dengan menggunakan lorm, 30 kata kemudian untuk yang pertama, kita akan memberikan pertanyaannya dengan misalkan, bagaimana cara daftarnya save kita klik ok sip ya kita akan duplikat di bagian itemnya berarti sampai sini kita duplikat 1 2 3 4 5 save kita cek oke sudah ada ya semuanya agar menjadi 2 ya jadi ketika di ukuran large kita akan berubah akordeonnya menjadi 2 eh wait wait wait oh salah bukan bukan bukan yang kita duplikat bukan akordeonnya tapi kolomnya Nah, 1, 2, 3, 4, 5. Oke, berarti di bagian row, kita akan panggil row calls lg 2, kemudian row calls 1, save. Nah, sudah 2, kemudian kita inspect ketika di bawah large atau 992 akan menjadi 1. Nah, seperti ini ya. Oke, tak lupa kita harus memberikan jarak ya.
Kita akan memberikan gutter seperti biasa. Kita panggil G untuk value-nya 4. Save, kita cek. Oke, 4. Cukup ya, 4. Nah, oke. Oke, selanjutnya adalah kita harus memberikan, ini harus membedakan ya.
Di bagian, bentar. nah ini ya, id ini harus beda ya kemudian yang ininya juga harus beda jadi kita bisa panggil yang ini dulu kita akan berikan, ini bebas ya, kita akan berikan heading 1 saja kemudian yang ini juga sama, kita duplikat, bukan duplikat, chat rld kita berikan collapse 1 save kita cek, kita klik, oke sip kemudian yang kedua juga sama ya kita akan membedakan heading oh ini gak usah, ini nih, bukan yang kedua berarti ini yang ketiga ini collapse 2, iya benar berarti ini heading 3 Oke sip kita cek kita klik Oke kita klik yang ini Oke kita klik yang ini Oke sip ya udah beres Oke sip Oke selanjutnya kita akan memberikan jarak ya kita akan memberikan jarak antara row satunya kita bisa memberikan padding top nya di sini Kedepan di top 4, save kita cek. Oke sip. Oke selanjutnya kita harus kita akan memberikan style jadi kita tidak akan apa ya kita akan meng-custom ini akordeonnya. Ini kan ketika diklik ada shadownya.
Nah kita akan menghilangkannya dan juga kita akan memberikan background color pada akordeonnya. Oke, kita bisa panggil di style.css, f aki, kemudian titik akordeon. Nah, karena akordeon ini, background color-nya menggunakan variable dari bootstrap. Nah, kalau kita cek, kita inspect, kita arahkan ya ke sini.
Kemudian kita arahkan ke akordeon. ini pakai background variable ya variable background dari bootstrap jadi kita harus panggil ini ya ke CSS nya kalau pakai background color ini nggak akan aktif ya nggak akan bisa misalkan gini save kita cek nah kan nggak akan bisa ya jadi kita harus memberikan variable atau panggil variable dari bootstrap nya jadi kita harus menimpanya kita bisa panggil strip-strip BS kemudian background eh background ya strip-strip BS akordeon BG akordeon BG titik 2 kemudian untuk warnanya kita akan memiliki E9ED E9ED kemudian C9 save kita cek Oke selanjutnya, ini kita harus menghilangkan shadow-nya. Nah untuk shadow kita bisa panggil F key kemudian akordeon kemudian akordeon strip button kemudian titik dua focus kita akan memanggil box shadow boxizing box shadow none.
Save kita cek ketika di klik ketika di klik lagi nah sudah menghilang. Oke, selanjutnya kita akan memberikan huruf tebal ya pada judulnya. Di bagian pertanyaan, berarti di bagian button kita akan memberikan sebuah FW Semi Bolt.
FW Semi Bolt, save. Kita cek dulu. Oke, kita terapkan ke semuanya. Kita copy, kemudian tekan alt, kemudian kita cari lagi. Oke, spasi, paste, save.
kita cek, oke selanjutnya adalah kita harus memberikan judul yang berbeda ya, bukan judul pertanyaan-pertanyaan yang berbeda oke, yang pertama bagaimana cara daftarnya, kemudian yang kedua kita akan memberikan misalkan apakah ada forum diskusi kemudian yang ketiga kita akan memberikan berapa DP berapa DP sebelum, eh berapa DP yang harus dibayar ketika ingin membangun misalkan ya kita cek oke om panjang terlalu panjang ya kita persingkat berapa DP berapa DP pembangunannya walaupun pembangunannya Oke, kemudian yang keempat, kita akan memberikan apakah produk-produk interiornya mahal. Kemudian yang kelima, apakah... sudah terverifikasi kemudian yang terakhir kita akan memberikan apakah dapat menawar harga oke, cukup lah ya oke, kita cek-cek lagi kita kecilkan oke, sip oke oke ini kalau teman-teman ingin merubah warna background tinggal dia lihat disininya ya set, tinggal lihat disininya oke backgroundnya ya tinggal dilihat kalau ingin merubah warna backgroundnya kita kecilkan lagi 420 kembali terakhir kita akan berikan lineheight ya di bagian sininya kita akan memberikan di semuanya kita diberikan disini LH2 safe, kita cek bukan LH2, LHLG kalau nggak salah kita cek dulu ini dia apakah produk-produk interiornya apakah produk-produk interiornya berada disini save, kita cek oke, kita kecilkan lagi ini kalau ingin semuanya diukuran 360 ke bawah kita berikan saja semuanya seperti biasa kita tekan alt kemudian ke atas spasi paste save Oke sip oke untuk service sudah garisnya Oke selanjutnya kita akan membuat sebuah section footer kita bisa kembali ke konditor seperti biasa kita akan membuat sebuah komentar terlebih dahulu kita bisa panggil footer kita duplikat alt shift bawah kita buat class footer kemudian container row, kemudian kita buat kolom nah kita akan membuat 3 kolom ya, untuk kolom pertama kita akan isikan sebuah H2 dengan ngeoding, kemudian di bawah H2 kita akan memberikan P dengan lorem misalkan 30 kata kita cek dulu Oke, 20 kata, lorong 20. Oke, save. Kemudian kita akan membuat kolom kedua.
Untuk kolom kedua kita akan mengisikan sebuah menu. Kita bisa panggil H5 dengan menu. Kemudian kita akan panggil A. Kita beri pagar, duplikat.
semenjak 4 kali kemudian untuk yang pertama kita akan isikan home, kemudian about, kemudian projects, kemudian service dan yang terakhir fa kit, save, kita cek dulu oke, sudah ada kemudian kolom yang ketiga kita akan memberikan titik call untuk kolom ketiga kita akan memberikan H5 kemudian kontak kita akan memberikan A kita beri pagar 1, 2, 3 untuk yang pertama kita akan memberikan Buwilding, oh kok bahasa Arab bentar nah sip buwilding at gmail.com misalkan ya, kemudian yang kedua kita akan memberikan nomor hp plus 62 kemudian 1234 5678 901 misalkan ya kemudian yang ketiga kita akan berikan misalkan add building telegram ya telegram building ID telegram save kita cek selanjutnya kita akan memberikan style pada footernya yang pertama kita akan berikan style di H2 yang kolom pertama kita akan memiliki class fw bold untuk bold ya textnya kemudian text ini kita akan memiliki width karena untuk backgroundnya kita akan memberikan background Kemudian kita akan gunakan MB 3 agar ada jarak ke bawah ya dengan P nya. Oke, kita berikan dulu background color pada footernya. Kita panggil footer di CSS-nya.
Kita akan berikan min height-nya 60 viha. Kemudian kita panggil background color pagar 151. Kemudian 81if. 81f. Save.
Kemudian kita akan berikan margin top. 150px, save, kita cek, oke, sip nah, kita akan berikan warna ya, pada textnya juga kita akan berikan class, kita akan memberikan text width 50, alias opacity nya kita akan 50, berikan 50 Oke, selanjutnya kita akan memberikan class juga di bagian kolom kedua. Kita bisa panggil fw, kemudian bold, kemudian text-width.
Kita cek dulu. Oke, kemudian kita akan memberikan display flex ya. Display flex. Agar ke bawah, kita akan memberikan flex kolom. Kita cek.
Oke, kemudian di bagian A ini kita akan memiliki class. Kita akan memberikan pertama text-nya width. Width 50. Kita cek dulu. Oke, kemudian kita akan memiliki mt3 agar ada jarak ya.
kemudian kita kemudian text decoration none agar tidak ada garis bawah kita duplikat ya, bukan duplikat, copy sama kelasnya kita kopikan paste, save, kita cek oke, sip kemudian kita akan memberikan apa lagi ya ini terbesar ini dua saja deh 2222 set kita cek ke sip kemudian yang ini ya kita akan memberikan sama kita kondisi kelas di halimannya fwbolt kemudian text-wise save kita cek kemudian kita akan memberikan MB 3, oke sip kemudian sama kita akan memberikan sebuah display flex kemudian flex kolom kita cek dulu, oke kemudian sama kita akan memberikan class di bagian A nya kita akan memberikan text decoration none, kemudian text wife 50 kemudian kita akan memberikan mt dua yang pertama ini tiga ya kita copy kan paste save oke ini dua 22 save Oke cukup ya Oke selanjutnya kita akan memberikan ah apa ya size pada kolomnya ke-am kalau teman-teman berikan ini kan kalau call saja ini kan akan menyesuaikan kalau jumlah grid kan itu ada 12 ya kalau 3 berarti ini 4, 4, 4 nah kalau kita cek misalkan beri background color misalkan ini danger kemudian yang ini background bg bg primary misalkan, low info kemudian yang ini bg save, kita cek, ini kan sama ya ukurannya nah untuk yang ini, yang kolom kedua, kita akan memberikan kolomnya 2 jadi seperti ini ya nantinya kita panggil call, kemudian kita panggil di ukuran large, kita akan memberikan kolomnya 2 kita save, nah jadi seperti ini ya, menyempit kemudian yang ini kita akan memberikan kolomnya 6 Jadi kita bisa panggil kolom large 6. Save, kita cek. Oke, dan yang ini sama. Kita akan memberikan kolom large 2 atau 3. 3 aja deh. Kita panggil kolom large 3. Save, kita cek. Nah, seperti ini ya.
Nah, supaya ke tengah, kita akan memberikan justify content. center kita berikan justify jangan center deh, between, save kita cek nah jadi seperti ini ya oke selanjutnya kita akan hapus backgroundnya kita hapus yang kedua juga kita hapus dan juga yang ketiga save kita cek Oke selanjutnya kita akan memberikan jarak ya agar ada jarak kita beri padding saja di bagian row kita akan memberikan padding wait, padding jangan di row, di footer, PT 5 save Hai nasib Oke coba kita inspect kita kecilkan nah ketika diukuran 992 kita akan memberikan satu kolom untuk merubah itu kita akan memberikan di bagian row sama seperti yang lain kita akan memberikan row calls kita kan row kemudian calls LG3 kemudian row calls 1, save kita cek, kita kecilkan, tidak berubah ya, kita cek lagi row calls lg 3, nah sip, oke sip mantap ya Oke selanjutnya kita akan memberikan margin bottom di kolom kedua. Di kolom kedua kita akan memberikan margin bottom MB4.
Ketika di ukuran LG, MB LG 0. Ketika di ukuran large ke bawah kita akan memberikan MB 4. Oke, sip. Kemudian, sama ya untuk yang kolom pertama juga. Kita akan memberikan MB-LG0, MB4.
Save, kita cek. Oke, sip. Oke, apa lagi ya? Kita kecilkan. Oke.
Oke. Oke. Oke. Oke sip ya untuk footer Oke kita cek-cek lagi untuk hover nggak bisa ya tapi kalau misalkan teman-teman ingin menambahkan hover jadi ketika diarahkan akan merubah warnanya atau ada efek lainnya tinggal teman-teman rubah di CSS nya Oke selanjutnya kita akan membuat copyright. Jadi di bawah sini kita akan membuat copyright.
Jadi kita akan membuat row yang kedua. Row, call, kemudian kita akan membuat dengan p. Kita panggil n, copy, kemudian copyright.
Hai 222 by loading Mastery, kemudian koma, all right reserved. Save. Sudah ada. Selanjutnya adalah kita harus memberikan style agar ke tengah.
Kita beri class text white terlebih dahulu agar putih. Dengan text center. save, kita cek dulu, oke kita hapus dulu ini, selanjutnya kita akan memberikan padding untuk memudahkan kita akan buat copyright, jadi kita panggil putter, titik putter kemudian titik copyright, kita akan padding topnya, kita akan memberikan 100px, save, kita cek ok, sip ok, kurang ya deh, 80 ok, 80 cukup lah 80 90 deh Oke 90 saja.
Oke sip kita cek-cek lagi. 100 saja deh. Oke sip.
Kita kecilkan. Oke. Oke oke.
Oke sip ya. Oke kita coba cek dengan extension chrome. Oke kita scroll untuk hero.
Oke. Oke. Oke. Oke.
Oke sip. Oke cukupnya untuk footer. Oke next kita akan membuat link direct ya. Jadi ketika di klik ini about us akan diarahkan ke about.
Dan juga yang lainnya. Jadi kita bisa panggil. Oke pertama kita akan membuat id terlebih dahulu ya.
Oke di bagian faq kita akan membuat id. Faq. Kemudian.
service kita akan buat id service kemudian projects kita akan buat id projects about kita akan buat id about dan untuk home kita akan membuat id nya di bagian body id home Oke, selanjutnya kita akan memberikan di setiap link. Untuk home, ini home. Kemudian ini about. Ini adalah projects. Ini adalah service.
Dan terakhir adalah faq. Dan tak lupa di footer juga sama. Kita akan memberikan link.
Mana nih? Nah ini. home kemudian about kemudian Projects services dan terakhir F aki save kita cek kita klik about akan ke about ini Project ke Project service F aki Oke sip loko home Oke sip ya ke sip untuk dan juga link drive juga sudah beres ya oke terakhir kita akan menambahkan sebuah animasi dengan menggunakan animate style dan juga os animate on scroll jadi ketika website di refresh atau misalkan kita masuk ke dalam sebuah website gitu ya maka website tersebut akan ada animasinya nah animasi tersebut kita akan menambahkannya dengan menggunakan animate style Kemudian ketika website di scroll, kita akan menambahkan sebuah animasi dengan menggunakan animate on scroll atau aws. Oke, pertama kita akan menambahkan dengan menggunakan animate style. Jadi kita akan buka tab baru ya.
kita ketikan animate style kemudian pilih yang animate.style kita akan mengkopikan link cdn nya terlebih dahulu scroll ke bawah nah kita kopikan link ini ya kita kopikan ke dalam head seperti biasa kita akan membuat sebuah komentar animate style kita paste di bawahnya kita langsung saja ya berikan di OS nya juga jadi kita akan buka tab baru ketikkan OS kemudian kita klik di bagian GitHub klik yang di bagian ini ya kemudian kita Scroll ke bawah di bagian link ini kita kopikan kemudian di bagian head, kita akan membuat commentator dulu ini adalah aos kemudian kita copykan juga sama ya, yang ini scriptnya kita copykan di paling bawah di bawah file yang javascript ok, save Oke, kita akan menambahkan animasi terlebih dahulu dengan animate style. Jadi kita bisa pergi ke website animate.cd.css-nya. Pertama kita akan menambahkan animasi di bagian navbar.
Untuk navbar kita akan menambahkannya dengan menggunakan fade in down. Fade in down. Kopikan. ke bagian navbar untuk menggunakan animate.style kita akan menambahkan pertama animate kemudian animated kemudian style nya kita paste save kita cek nah ketika di refresh akan ada animasi kemudian kita akan memberikan di bagian hero nya ya A1 P dan juga button dan juga yang lainnya Oke, kita akan memberikan pertama di bagian H1. Kita akan memberikan animate, animated, kemudian animate, animate, fade in, up.
Save, kita cek. Kita refresh. Oke. Nah, kita akan memberikan delay ya. Jadi pertama akan muncul yang navbar terlebih dahulu.
kemudian H1, P dan juga button terakhir jadi untuk memberikan itu kita akan memberikan animate delay 1 second namun kita akan merubah ini, yang 1 second ini kita akan custom dengan menggunakan CSS kita akan berikan di bawah sini saja, kita panggil hero titik hero, kemudian kita panggil H1 untuk menggunakan Custom CSS kita bisa panggil yang namanya Animate Delay. Kita kopikan. Kita paste. Kita akan terubah menjadi 7 second. 7 second 0.7 second.
Kita cek ya. Kita refresh. Nah, sip.
Kemudian kita akan terapkan di P dan juga button. kita panggil animate terlebih dahulu, animate-animated, kemudian animate-fade in up fade in up, fade in up nah, sama kita akan gunakan animate delay 1 second, kemudian kita akan merubahnya dengan gunakan CSS titik hero p, kemudian kita panggil minus-minus animate strip delay, titik 2 1.2 second kita cek kita refresh oke kemudian yang batangnya juga sama kita akan memberikan fat enough kita panggil anime anime tatu menanime fat in up make fat in up nah anime delay satu second kita copy kan ke batang yang kedua Oke, kita buat customnya. Kita panggil hero. kemudian button kita panggil minus minus ya minus minus ya beneran minus minus animate delay.2 1.7 second sip kita cek kita refresh kita refresh lagi hmmm Oke kita cek-cek lagi.
Ini 1.2. Kalau 1 second gimana? 1.3. 1.5 kita cek, kok kayak sama saja ya bener, animate that, animate pan in up, animate delay 1 second oh, pantesan bukan O, P ini 2 shape refresh nah sip ya oke sip sudah beres kita cek coba di extension chrome nah sip kita refresh lagi Oke sip sudah beres ya kita beres menambahkan animasi ketika di refresh atau ketika kita masuk dengan menggunakan animate.style Oke selanjutnya kita akan menambahkan sebuah animasi dengan menggunakan animate on scroll Jadi ketika website di scroll kita akan menambahkan animasi transisi dengan menggunakan animate on scroll Oke karena kita sudah menambahkan AOS nya di bagian link dan juga script kita tinggal menggunakan animasinya untuk animasinya kita bisa mengunjungi githubnya ya disini banyak ada fade up, fade down, fade right dan yang lainnya namun yang akan kita tambahkan cuma dikit ya tidak terlalu banyak animasi Oke kita kembali ke kode editor kita akan tambahkan di bagian Projects untuk About kita tidak akan menambahkan animasi transisi. Oke di bagian H2 terlebih dahulu ya untuk menggunakan AOS pertama kita harus memanggil style nya atau kita harus memanggil data AOS nya terlebih dahulu jadi kita bisa panggil data strip AOS sama dengan stylenya, fade right fade right, nah kemudian yang kedua ada yang namanya data OS strip duration sama dengan 1000 untuk defaultnya data OS duration itu 500 kalau gak salah ya jadi kita berikan 1000 alias 1 detik jadi kita cek Kita scroll.
Nah, sudah ada. Oke, sip. Selanjutnya kita terapkan di setiap kolom. Nah, untuk kolom kita akan menambahkannya dengan menggunakan fade up.
Jadi kita bisa panggil pertama data OS dulu. Kemudian fade up. Kita cek dulu ya.
Nah, sip ya, sudah ada. Kemudian kita akan panggil data OS durationnya 1 detik. Kemudian yang kedua kita akan memanggil data OS delay.
Nah, sebanding dengan untuk delaynya kita akan memberikan 400. Save, kita cek. Kita scroll. Nah, sip ya.
Oke, kemudian kita terapkan di setiap kolom. Kita kopikan saja ya, biar cepat. Di kolom kedua kita paste.
Untuk delay-nya kita ubah menjadi 600. kemudian yang ketiga kita ubah delay nya menjadi 700 save, kita cek dulu kita scroll ke bawah ok, kita scroll ok, sip kemudian di kolom ke 4 dan 5 kita copy kan juga untuk delay nya kita ubah menjadi 200 dan yang kelima kita rubah menjadi 400 save kita cek kita Scroll ke bawah oke ya Oke coba kita pelan-pelan Oke saya rasa cukup ya kalau misalkan kurang atau kurang lama delaynya teman-teman dapat menambahkan di bagian data OS delay nya selanjutnya kita akan menambahkan di bagian service kita ke bagian H2 nya terlebih dahulu kita panggil data OS untuk ini nya fade right untuk data OS duration nya kita beri 1 detik save kita cek kita scroll Oke, kemudian di bagian image kita akan menambahkan data OS di bagian image. Kita akan tambahkan data OS fade up. Kemudian data OS durationnya kita ubah menjadi 1 detik. Save.
Kita tambahkan juga di image kedua. Data OS fade up. Data OS.
Duration 1 detik. Save. Kita cek dulu. Kita scroll ke bawah. Oke.
Untuk image kita beri delay ya. Untuk image pertama kita memberikan delaynya 200. Dan image kedua kita akan memberikan delaynya 400. Scroll. Oke, dan terakhir kita akan menambahkan di bagian kolom keduanya. Untuk kolom kedua kita akan memberikan di setiap halima saja. Jadi kita bisa panggil data OS.
Untuk ini fade right. Kemudian data OS durationnya 1 detik. Kemudian data OS delay 400. Kita kopikan. kita paste ke semuanya oke hal 5 kedua kita akan memberikan delay nya menjadi 500 500 kemudian yang ketiga 600 700 800 save kita cek kita scroll Oke siap ya cukup.
Oke dan terakhir kita akan memberikan OS di bagian FAQ. Jadi kita ke bagian FAQ. Oke sama ya di bagian haduannya terlebih dahulu kita memberikan data OS at right.
Kemudian data OS durationnya 1 detik. Save kita cek. Kita scroll oke kemudian yang ini sama. kita akan memberikan di setiap kolom, kita berikan data os untuk style nya kita akan memberikan fade data kita akan menggunakan yang lain deh, zoom in zoom in, ada gak zoom in nah ini zoom in ya kita akan berikan, coba di kolom dulu, data os zoom in data os duration 1 detik, save kemudian kita terapkan ke kolom yang lain eh kita butuh delay dulu ya, data os delay nya kita berikan 200 save kita cek Oke kita copy kan ke yang lain kita paste, paste, paste dan terakhir save untuk kolom kedua kita akan memberikan delay nya ini kolom pertama kolom kedua kita akan memberikan delay nya 3, 4, 5 6 dan terakhir 7 save kita cek kita scroll ke bawah oke sip oke coba kita cek dengan menggunakan extension dari Chrome Oke kita Scroll oke oke oke oke Oke, oke, sip ya.
Oke, sip. Saya rasa untuk menambahkan animasi sudah beres ya. Oke, terima kasih kepada teman-teman yang telah mengunjungi channel NgoDing Mastery.
Yang mana pada segmen landing page yang kedua ini, kita sudah membuat sebuah landing page dengan menggunakan framework CSS bootstrap 5. Semoga bermanfaat dan sampai jumpa di video selanjutnya.