Membuat Web Profil Perusahaan Sederhana

Ya, Assalamualaikum warahmatullahi wabarakatuh Selamat datang di channel Jurfika Nurfikri Di video kali ini kita akan belajar bagaimana caranya membuat sebuah web company profile menggunakan HTML dan CSS Oke, buat teman-teman yang penasaran seperti apa jadinya silahkan ditonton dulu aja videonya sampai selesai Baik, langsung saja mulai Jadi disini kita akan buat web company profile itu kurang lebih seperti ini tampilannya ya Jadi disini ada bagian header Bagian banner, about, service, dan footer. Lalu untuk menu-nya, di sini ada about ya, kita klik aja. Nah, dia akan pindah ke alamat about. Kemudian yang service juga sama, kontak juga sama ya. Selanjutnya kita akan coba cek untuk tampilan mobile-nya. Klik kanan, inspect. Seperti ini ya, oke. Kita coba scroll ke bawah. Nah, oke. Selanjutnya yang about. Oke, yang service, oke, kontak juga, oke, sip. Selanjutnya kalau kita perhatiin di sini ketika kita refresh alaman webnya, di sini muncul ya tampilan loading seperti ini, muter-muter gitu. Oke, kita juga akan buat seperti itu nanti. Sip, sekarang kita langsung saja eksekusi. Di sini seperti biasa saya akan menggunakan sublim text sebagai text editornya. Buat teman-teman yang di laptopnya ada editor lain, silakan gunakan saja. Oke, pertama di sini saya akan buka dulu text editornya, saya blend text. Selanjutnya kita buat saja file baru, new file, lalu save. Kita akan simpan di data D. Di sini kita buat saja folder baru dengan nama company profile. Strip profile, enter, enter lagi. Di sini kita simpan. file nya dengan nama index.html enter oke selanjutnya kita akan buat struktur html nya ya ketik aja html lalu tekan tombol save kemudian title nya kita kasih aja nama julfikar morfitri gitu ya lalu save kemudian kita kasih tag meta lalu kita kasih tag meta lagi namenya kita kasih viewport ya, karena kita nanti akan buat web responsive. Kemudian untuk kontennya, kita kasih aja width sama dengan device width, koma inisial, kali kasih jangka 1. Selanjutnya, kita akan hubungkan file index ini dengan file CSS, menggunakan tag link. Nah, untuk ref-nya, kita akan arahkan dia ke folder CSS, garis miring. style.css jadi nanti kita akan buat folder css di dalamnya ada style.css ya, sip sekarang kita lanjut buat bagian-bagiannya terlebih dahulu, disini kita akan buat bagian header dulu ya, kita kasih komentar aja, header gitu lalu disini kita lihat di header ini ada bagian link main source nya ya, lalu ada logo kemudian ada menu, oke kita buat aja div medsos gitu ya untuk kebungkus link medsosnya lalu di dalamnya kita kasih di class container oke di dalam container kita kasih tag all kasih tag li ya di dalam li kita kasih tag a biar medsosnya bisa kita klik oke kalau misalkan kita lihat disini link medsosnya menggunakan icon ya ini menggunakan icon font aws soal Cuman sekarang kita akan gunakan huruf dulu aja. Nah nanti kita akan ubah menjadi icon belakangan ya. Misalkan disini untuk Facebook kita kasih huruf F aja gitu ya. Kemudian kita copy aja. Lalu paste di bawahnya. Untuk Youtube kita kasih huruf Y. Lalu Twitter kasih huruf T. Nah buat teman-teman yang punya barangkali lebih dari ini metodenya silahkan tambahan aja ya. Kalau misalkan gak punya metode sama sekali. pakai ini aja ya buat perjalanan aja kemudian disini kita lanjut buat header dalam header kita kasih logo menggunakan hasil tuh kasih tegak lalu disini kasih aja nama jual pika kemudian setelah itu kita ubah atau kita buat menu yang menggunakan full lalu like di dalam kita kasih tegak kemudian kita kasih nama-nama menunya ya Kita kasih com, kemudian kita copy paste aja. Oke seperti ini ya, selanjutnya kita akan isi masing-masing hariannya. Untuk medsos saya akan kasih tanda pagar dulu aja. Buat teman-teman yang memang sudah ada link medsosnya silahkan isikan aja sesuaikan dengan link medsosnya masing-masing. Oke kita kasih tanda pagar, tanda pagar. Untuk julfikar kita kasih index.html. Jadi ketika julfikar di klik itu akan mengarah ke halaman index gitu ya. Begitupun yang home, sama ke index. Yang about kita arahkan dia ke about. Kemudian yang service kita arahkan ke service.html. Lalu yang contact kita arahkan ke contact.html. Jadi nanti kita akan buat file-file ini belakangan ya. Sekarang kita fokus ke halaman index dulu aja modifikasi. Oke selanjutnya kita coba cek terlebih dahulu seperti apa webnya ya. Kita masuk ke folder company profile. Indexnya kita buka ya, klik kanan, open with Google Chrome. Nah, webnya seperti ini ya. Sekarang kita akan lanjut modifikasi menggunakan CSS. Oke, sebelumnya saya akan masukkan dulu foldernya ke sublime ya. Nah, ke sini. Lalu di sini kita akan buat folder baru, klik kanan, new folder. Kasih aja nama foldernya CSS. Enter. Lalu di dalam CSS itu kita... Buat file baru, klik kanan new file, save dengan nama style.css, enter. Selanjutnya kita akan reset dulu padding marginnya ke 0 ya. Kasih bintang, jadi semua padding dan marginnya kita reset ke 0. Padding 0, margin 0 ya. Kemudian kita setting juga font familynya ke sans seri. Kita save, lalu buka browser refresh. Hai nah seperti ini ya Oke sekarang kita akan lanjut modifikasi yang bagian medsos terlebih dahulu ya sip di sini kita sudah punya kelas medsos kita copy aja kita panggil di sini ya Oke kita kasih aja misalkan paddingnya atas bawahnya 5px kiri kanannya nol lalu kita isi background color warna Misalkan kita coba cari inspirasi dulu di Google ya. Cari warna menggunakan kode HTML. Yang ini kita klik aja. Nah seperti ini ya ada banyak pilihan warna. Kita pilih aja salah satu. Misalkan pilih yang ini ya. Kita copy aja yang kode hexnya. Copy lalu paste di sini. Save lalu buka browser refresh. Nah seperti ini ya. Sekarang kita lanjut. modifikasi medsosnya medsosnya kita akan ubah warna putih ya oke medsos medsos all leak namun sebelum berwarna putih kita akan posisikan dia atau ubah posisinya menjadi horizontal ya mendatar oke yang leaknya kita kasih display inline block kita buka browser refresh nah seperti ini ya sekarang kita akan ubah warna putih color warna putih kita save, refresh belum ada perubahan ya kita kasih color inherit aja di tag A nya ya inherit jadi biar si tag A nya ngikut jadi warna putih nah seperti ini sekarang kita akan posisikan dia ke tengah-tengah sini ya oke disini kita sudah punya class container kita akan modifikasi aja di CSS titik container lalu kita kasih with 80% kemudian margin atas bawahnya nol kiri kanannya auto kita coba refresh nah seperti ini selanjutnya kita hilangkan dulu garis bawahnya itu adanya di teks a teks a kita kasih text decoration kasih non kita coba refresh oke hilang Selanjutnya kita akan ubah link methods ini menjadi icon seperti ini. Kita butuh yang namanya libraries font awesom terlebih dahulu. Kita gunakan saja cdn font awesom. Ketik saja di google cdn font awesom. Lalu kita gunakan saja yang ini. Lalu kita pilih yang css. Lalu pilih all min css. Copy saja. Kemudian kita paste di sini saja. sebelumnya kita ketik dulu link tab di bagian ref nya kita paste seperti ini sekarang kita coba buka browser refresh belum ada perubahan ya sekarang kita akan ubah terlebih dahulu namun sebelumnya kita akan lihat dahulu cara membuat icon seperti apa kita buka dulu font awesomnya yang font awesom ini ya oke seperti ini kita akan coba cari font icon facebook ya Disini kita cari icon facebook Kita ketik aja facebook gitu Oke disini ada facebook kita pilih yang ini aja Kita klik Oke seperti ini Nah disini ada caranya kita copy aja berarti yang Tagli ini ya copy html Copy kita paste aja di Pengganti f ini ya Kita ganti aja f nya kita paste disini Kita coba buka browser Kita refresh Nah jadi ya selanjutnya kita cari YouTube YouTube kita cari nah ini ya kita pilih aja YouTube ini klik Nah kita copy aja yang ini ya copy HTML kita paste disini ganti aja ya ini seperti ini ya save kemudian kita refresh sip berubah juga selanjutnya untuk Twitter kita cari juga Twitter Oke kita pilih aja yang ini ya Twitter Oke kita copy aja HTML nya seperti ini lalu kita paste pengganti huruf T paste disini save buka browser refresh Oke sudah jadi ya sekarang kita akan coba kasih jarak untuk masing-masing resource nya disini kita akan kasih margin untuk li-li nya belinya kita kasih margin margin-right kita kasih aja 10px kita coba set buka browser refresh seperti ini Oke untuk medsos sepertinya udah selesai ya sekarang kita akan lanjut buat bagian header ini Oke kita akan modifikasi bagian header header kita kasih border dulu aja buat alat bantu kita kita refresh nah ini border ya selanjutnya kita kasih border Hai yang bagian hak satunya header has satu kita kasih border satu pixel solid kita refresh sama ada juga ya kemudian yang punya juga kita kasih order Oke siap sekarang kita akan coba kasih plot terlebih dahulu ya Biar ini ke sebelah kanan dan ini si logonya sebelah kiri. Oke. Si all-nya kita kasih float right. Lalu H1-nya float left gitu ya. Kita refresh. Sip. Sekarang kita akan kasih div class container-nya biar dia ke tengah-tengah seperti message ini. Oke. Kita kasih div class container di sini. Jadi si H1 dan all-nya kita bungkus. menghapus dengan kontainer kita tep nah seperti ini kemudian kita coba buka browser refresh Oke selanjutnya kita akan coba kasih border dulu kontainer seperti apa ya kontainer kita kasih border satu pixel solid up serata kontainer yang dihider seperti ini ya Oh Oke kita akan kasih dia clear boot ya si kontainer kasih clear boot kontainer after konten Ops nah seperti ini kontennya kosong lalu displaynya blog kemudian kita kasih clear nilainya boot ya sekarang kita coba buka browser refresh nah si kontainer jadi ngikut isinya ya oke sekarang kita lanjut modifikasi uli-ulinya ya Oke kita akan panggil yang belinya dulu header uli kita akan posisikan dia horizontal atau mendatar ya seperti biasa link-nya kita kasih display inline blog inline blog kita coba ke browser refresh nah seperti ini selanjutnya tepanya kita kasih padding karena kita tahu di dalam tagli itu ada tag A ya jika ini kita kasih padding header uli a padding atas bawahnya misalkan 25 pixel kiri kanannya 20 pixel sekarang kita refresh buka browser nah seperti ini ya oh belum berubah ternyata kita kasih display dulu si a nya ya display display inline block juga kita refresh nah seperti ini ya oke sekarang kita lanjut modifikasi yang h1 nya kasih padding juga ya H1, H1, kita kasih padding, atas bawahnya 15px, kiri kanan 0px. Kita buka browser, refresh, seperti ini ya. Oke, cocok. Sekarang kita akan kasih warna untuk logonya ya. Kita kasih warna, misalkan warnanya itu seperti warna medsos ya. Nah ini, oke kita copy lalu paste di sini. Ayo kita refresh nah seperti ini ya selanjutnya kita maunya ketika menu ini menu ini disentuh itu berubah warna ya seperti ini sentuh berubah warna sentuh berubah warna Oke kita akan kasih teganya header uli a over ketika tegadi over disentuh ya backgroundnya ubah jadi warna seperti ini semuanya samain aja Ayo kita refresh Nah jadi ya kemudian warna fontnya ubah juga jadi warna putih color warna putih refresh nah seperti ini sip jadi sekarang kita akan buat kelas aktif ya Jadi kita tahu sekarang ini kita sedang di halaman apa ya misalkan kita dalam home ya udah home ini kita kasih warna background seperti ini gitu ya oke Ayo kita kasih kita bikin dulu kelas aktif di sini ya aktif kita kasih background warna ini dan color ini kita kecil aja paste di sini lalu kita akan pasang kelas aktif itu di tagli home ini ya kita kasih aktif karena kita tahu sekarang kita sedang ada di halaman home berarti home ini harus warnanya warna seperti ini ya oke sekarang kita kita lanjut ya untuk header sudah selesai kita akan hapus lagi border-border nya oke di sini kita akan hapus-hapusin dulu border dari tag pool kita hapus kemudian h1 hapus header juga hapus lalu container juga hapus sekarang kita save refresh nah seperti ini jadi ya oke sekarang kita akan lanjut bagian gambar banner ya oke disini saya sudah mempunyai satu gambar ya buat teman-teman yang belum ada gambarnya silahkan download dulu aja bebas mau gambar apa aja kita paste aja disini sebelumnya kita buat folder baru dengan nama img enter enter lagi kita paste aja gambarnya disini rename nama file jadi banner banner Hai enter Oke bener ya formatnya jpg sekarang disini kita akan setting bagian banner disini kita buat bagian baru kasih komentar banner gitu ya lalu kita akan buat menggunakan section kasih kelas banner lalu dalamnya kita buat H2 kasih aja kata-katanya Welcome to my website save kemudian kita coba buka browser refresh oke jadi ya selanjutnya kita akan buat seperti ini oke untuk banner kita panggil class disini banner tag nya kasih aja 60 viha ya kemudian kasih aja border biar ketahuan seperti apa bentuknya solid kita buka browser refresh nah ini untuk banner ya oke Selanjutnya kita akan masukkan gambar background image. URL kita akan keluar satu folder berbukit CSS. Kemudian kita akan masuk ke folder img. Lalu kita panggil nama filenya banner.jpg. Kita buka browser refresh. Sudah masuk ya. Kita akan atur posisinya ya. background size kasih cover kita buka browser refresh Oke, sudah jadi. Selanjutnya kita akan coba kasih background transparan ya. Oke, kita akan gunakan banner after aja. Banner after. Di sini kita kasih kontennya kosong. Lalu kasih display block. Kasih positionnya absolute. Lalu topnya kita kasih 0. Leftnya kita kasih 0. right nya kita kasih 0, bottom nya kita kasih 0 oke selanjutnya kita kasih warna background nya transparan kita kasih warna yang sama aja, kita kesini namun kita gunakan warna RGB aja, kita copy aja kemudian kita paste disini, kita kasih RGBA kita paste aja disini lalu kita kasih tingkatan transparan berapa ya disini kita kasih 0,6 aja kemudian kita coba refresh buka browser ups semuanya ternyata ya kita belum kasih posisi relatif di bannernya position relatif refresh nah seperti ini jadi ya oke Selanjutnya kita akan coba kasih padding aja di sectionnya. Jadi di section kita kasih padding atas bawahnya 50px. Kirikannya 0. Oke seperti ini ya. Sekarang kita akan posisikan welcome to my website-nya ke tengah-tengah sini. Sip. Di bagian bannernya kita kasih display flag. lalu justify kontennya center alaikan itemnya center kita coba broserefresh Oke selanjutnya kita akan ubah jadi warna putih Oke warna putih warna putih berarti banner H2 ya banner H2 nya kita akan kasih color warna putih obstrator dia masih ketutupan sama background transparan nya ya kita akan ubah dia ke paling depan untuk apa namanya hadwanya Oke kita akan kasih dia jet index kasih aja satu jadi posisinya dia ada di depannya background ini ya Oke sekarang kita akan lanjut kasih border kasih dulu aja padding atas bawahnya 20px kiri kanannya 25px kasih aja border 3px solid warnanya putih kita save refresh buka browser Oke seperti ini ya jadi sekarang sudah selesai untuk banner selanjutnya adalah kita hapus dulu untuk border bannernya ya karena sudah tidak dibutuhkan lagi kita hapus lalu kita refresh Oke sip selanjutnya kita akan buat bagian about ya kita akan buat bagian baru di bawah di bawah banner kita buat bagian baru kasih aja namanya about gitu ya kita akan gunakan section kasih aja kelas about di dalamnya kita kasih div container lalu kita kasih tag h3 ya ya h3 kita kasih aja about seperti ini ya lalu kita coba buka browser refresh Hai sip jadi ya sekarang kita akan modifikasi about ini about H3 ya jadi kita akan panggil class about jangan tersebut ya kita akan panggil section aja section H3 kemudian kita akan kasih posisi ya text-align center gitu kita coba refresh Oke selanjutnya kita kasih padding atas bawahnya 20px Hai ikan yang nol lalu kita akan ubah warnanya jadi warna sama seperti yang sebelum-sebelumnya kita kasih warna ini aja kita coba refresh buka browser fresh ya Nah seperti ini sip sekarang kita kelanjut buat teksnya ya Oke kita akan gunakan aja lorem ipsum lorem ipsum kita klik aja kita copy aja yang ini Oke copy sampai sini aja lalu kita paste di bawahnya hati kayak ini kita lalu paste disini kita coba buka browser refresh tip sudah jadi sekarang kita akan modifikasi P ini ya P ini ada di dalam flash about kasih aja colornya misalkan 666 lalu word spacing nya kita kasih 2 pixel kemudian line height nya kita kasih 25 pixel ya kita coba ke browser refresh Oke, seperti ini. Sekarang kita akan buat beberapa bagian dipertebal seperti ini ya. Oke, kita akan kasih aja bagian ini kita pertebal menggunakan text strong. Kita pindahkan aja penutupnya ke sini ya. Save, refresh. Oke, sudah ya. Selanjutnya untuk H3 kita kasih margin bottom agar agak jauh dikit ya ke bawah. Hai tip hati gak kita kasih margin batem margin batem nya 20pixel Oke cukup ya selanjutnya kita akan buat bagian service Oke service kita akan buat bagian baru di HTML nya di sini kita kasih aja komentar service gitu Hai seperti biasa menggunakan section kasih kelas service seperti biasa juga kasih di flash container lalu H3 service kita coba buka browser refresh nah seperti ini ya yang bagian service kita ubah warnanya jadi warna abu-abu seperti ini Oke kita panggil ya kelas servicenya di CSS service kasih aja background color F9 F9 F9 kita buka browser refresh seperti ini lalu kita akan buat bagian bagian servicenya ada mobile apps web development design digital marketing oke lanjut disini kita akan buat kelas baru dengan nama div box ya di dalam box ini kita akan kasih dia div misalkan col-4 gitu ya karena kita akan buat 4 kolom ke samping lalu di dalam class col-4 ini kita akan buat div class icon nah di dalam icon ini kita akan masukkan icon dari font aws nanti ya oke sip selanjutnya kita akan kasih h4 disini ya untuk nama-namanya misalkan mobile app gitu ya kita akan coba buka browser Hai refresh nah seperti ini ya sekarang kita akan modifikasi dulu yang kelas boxnya oke pas box kita modifikasi misalkan masih border dulu satu pixel solid-tab lalu buka browser refresh nah seperti ini ya selanjutnya kita akan modifikasi yang apa ini Hai nih ya yang call-call sipatnya Oke kita akan modifikasi box call strip 4 kita akan setting misalkan lebarnya itu 25% kemudian kasih padding nya seakan 1520 ya 20pixel kirikan bawahnya 20pixel lalu kita kasih box sizing border box Hai agar lebar tetap segitu lalu kita kasih border seperti biasa biar ketahuan seperti apa bentuknya satu pixel solid kita buka browser refresh nah seperti ini ya Oke selanjutnya kita akan buat atau modifikasi yang iconnya sip icon kita modifikasi lebarnya itu misalkan 70pixel Hai tingginya itu 70 bisa juga kasih border aja satu pisau solid buka browser refresh nah seperti ini ya sekarang kita akan ubah bentuknya di bulet kita kasih aja border-radius 50% save buka browser refresh nah bulet kan oke Selanjutnya kita akan kasih jarak untuk text mobile up sini kasih jarak dikit ya seperti ini oke di bagian icon nya mungkin kita kasih margin atau jangan deh di H4 nya ya kita tau di dalam box ini di dalam call 4 kita punya H4 ya kita coba cek Hai Nah di sini kita punya hampat hampat ini dalam kelas box ya kita akan kasih margin atas bawahnya 10px kirimkan yang nol refresh refresh Oke refresh tadi sampai mana eh udah margin 10px ya kita akan kasih warna juga Ayo kita akan kasih warna misalkan di boxnya kita akan kasih color warnanya warna ini aja ya Oke kita paste di sini refresh nah seperti ini ya selanjutnya kita akan kasih icon mobile ya sama seperti ini icon mobile kita akan cari disini mobile Oke, mobile kita pilih aja yang ini. Sip, kita copy aja yang HTML ini ya. Kita copy, kita paste di dalam if icon ini. Set, seperti ini. Kita coba buka browser, refresh. Nah, udah kelihatan ya. Siap. Sekarang kita akan posisikan icon ini ke tengah-tengah. Oke. Di dalam box, di dalam icon, kita kasih text-align center. Lalu. Hai lainnya 70px kita buka browser refresh nah seperti ini ya lalu kita akan ubah ukuran fontnya ya perbesar dikit font-size 20px ops kita save refresh cukup ya Oke sekarang kita akan posisikan ke tengah-tengah sini Oke sip Hai di dalam callnya atau di iconnya ya di-div icon ini kita kasih margin aja atas bawahnya nol kiri kalanya auto kita buka browser refresh Oke seperti ini kemudian yang mobile apps nya sama ya empatnya kita kasih seperti ini juga ops nggak bisa kita kasih itu aja ya kita kasih di boxnya atau di colmd nya kita kasih teks elegan center ya kita refresh Oke jadi sekarang kita lanjut mungkin kurang jauh ya antara icon dengan namanya kita kasih jarak lagi 20 bisel Oke seperti ini ya Hai selanjutnya kita akan coba copy lagi ke sampingnya kita akan tambahin lagi yang kol empatnya kita copy nah seperti ini kita ganti aja mobile appnya jadi web development save buka browser refresh udah ke bawah ya sekarang kita akan buat dia ke samping kita kasih aja di kol empatnya float float left Ayo kita save buka browser refresh tip sudah jadi seperti ini ya sudah selesai sekarang kita coba ini tebel nih nih kayaknya sih kelas boxnya ya dia gak ngikut isinya karena ada plot live nya sekarang di boxnya kita kasih clear boot ya after konten kosong displaynya blog ups lalu clear ya boot kita save buka browser refresh oke seperti ini ya cocok sekarang untuk bagian service saya rasa Oh iya untuk icon-icon nya belum ya kita akan gunakan icon lain untuk development kita kasih aja icon jatahkan gelobok gitu ya kita ke browser Oke kemudian yang desain kita kasih aja Pak edit gitu ya sip lalu digital marketing kita kasih aja kelas apa tuh car bar Hai sip seperti ini untuk service sudah selesai kita akan hapus lagi untuk border-border nya border call x4 nya kosip pacar kita hapus lalu box-nya kita aku juga sip kita buka browser refresh Oke jadi seperti ini ya selanjutnya kita buat bagian footer footer footer Oh ya Hai untuk ini kurang jauh ya buat bawah untuk service ke icon nya kita cek dulu A4 Oh ya nanti tuh Oh udah ini udah kasih perting udah kita kasih 25 aja deh ya oke cukup kemudian ini untuk jaraknya kita kasih padding aja ya kurang jauh yang buat ini kita kasih about kasih padding bottomnya misalkan 100px gimana ya kita coba cek buka brosery press segini ya oke cukup sekarang kita akan lanjut buat bagian footernya di HTML kita buat bagian baru kita buat komentar footer plus tag footer di dalamnya ada div container di dalamnya lagi ada kita seperti biasa kasih aja copyright copy 2020 strip misalkan julfikar alright reserved gitu ya save sekarang kita buka browser refresh nah muncul ya sekarang kita akan modifikasi footernya di css kasih padding aja atas bawahnya misalkan 30px kirikannya 0 lalu kasih background color mungkin untuk warnanya kasih warna ini aja ya kasih bugger lalu kita kasih warna fontnya warna putih sekarang kita buka browser refresh nah seperti ini ya oke kita akan posisikan dia ke tengah-tengah Hai ke tengah-tengah berdikasi teks elegan Center Oops refresh Oke jadi ini kurang jauh juga untuk jarak bawahnya kita kasih padding juga sama kayak bot ya out kasih piring bottom juga servis juga si piring batam ya kita kasih koma aja service kasih piring batam juga Oke, cukup ya. Sip, untuk bagian index sudah selesai ya. Sekarang kita akan coba kasih namanya preloader ya. Jadi kita akan tampilkan loader sebelum menampilkan halaman webnya. Oke, siap. Sekarang kita akan buat dulu untuk loadernya. Di HTML, di bagian atas ini kita akan buat bagian baru. Kasih aja nama bagiannya. Hai akan loader gini ya ini kita kasih div div bg strip loader lalu kasih div lagi misalkan loadernya sekarang kita akan modifikasi bg-loader ini di CSS di bagian bawah kita akan modifikasi bg-loader kita akan ubah warna petronya misalkan warna ee gitu ya lalu positif editionnya kasih fixer lalu topnya kita kasih nol letak kita nol right nya nol batamnya nol juga kemudian kita coba buka browser refresh nah seperti ini ya namun ini kayaknya ke apa namanya ketutup sama sih banner ini ya berarti sih bagi loadernya kita kasih jadi next jadi index aja 1999 kita buka browser di press oke jadi semuanya ketutup sama bgloader ini ya selanjutnya kita akan buat preloadernya kita panggil loader ini di CSS bgloader loader kita kasih aja misalkan lebarnya 100 pixel heightnya 100 pixel kasih border misalkan 3 pixel solid warnanya putih Hai solid ya lalu kita kasih atau sekarang kita ke browser refresh nah seperti ini karena kita akan posisikan dia ke tengah-tengah sip di bagel ordernya kita kasih display flag lalu justify kontennya Center alaikennya Center kita buka browser refresh Oke udah setengah sekarang kita lanjut buat ya menjadi bulet kasih aja border radius 50% nah seperti ini kemudian kita kasih warna ya buat motor-motor nya di bagian loader kita kasih warna border color kasih aja warnanya warna kayak yang warna yang lainnya ya kayak warna ini native kita paste aja di sini Hai seperti ini kita coba browser refresh Oke sekarang kita akan tambahkan lagi border-right dari sebelah kanannya kita kasih warna yang sama kemudian border-bottom abs color ya kasih warna sama juga kita coba buka browser refresh tip seperti ini sekarang kita akan buat dia jadi berputar-putar Oke kita gunakan keyframe aja keyframes ya nama keyframe nya kita kasih aja puterin gitu, seperti ini lalu kita kasih dalam posisi 100% dia akan posisinya berubah 360 derajat transform rotate 360 dek ya sekarang kita coba buka browser refresh belum ada apa-apa ya kita kasih animasi di loadernya animation kasih aja nama animationnya puterin kemudian kecepatannya kasih aja 0,3 misal 0,5 gitu ya lalu linear infinity infinity gitu biar dia terus menerus puter ya kita coba buka browser refresh Oh ternyata belum muter kita coba buka browser seperti apa Kenapa dia gak muter Oh ini belum ada esnya ya 0,5 s-second maksudnya kita refresh nah seperti ini oke oke pusing gak pusing ya Oke untuk cepatannya sedangkan teman-teman aja misalkan tahu cepat kata 0,8 ya oke atur aja sesuai dengan kebutuhannya masing-masing Hai selanjutnya jadi ketika webnya nampil silode ini hilang Oke di sini kita akan butuh bantuan jQuery aja ya kita butuh library jQuery ya kita akan gunakan cdn aja cdn jQuery jQuery jQuery enter cdn jQuery kita klik aja Oke di sini kita gunakan aja yang minifile ini ya klik Ayo kita copy aja ini scriptnya lalu kita paste aja di bagian sini kita paste seperti ini kemudian kita coba buka browser gak ada perubahan ya sekarang kita akan buat scriptnya di bawah jadi ketika halamannya nya nampil dollar dokumen ready ya ketika halaman webnya sudah nampil gitu ya Hai pangsen apa yang terjadi kita maunya si kelas-kelas BG loader ini hilang gitu ya Oke seperti ini titik ini titik kelas ya BG loader Hai ya disembunyikan kita sekarang buka browser refresh nah seperti ini ya oke sudah selesai sekarang kita akan lanjut ke... apa lagi nih? Hai kebagian about ya Jadi ketika kita klik menu about dia akan pindah kalimat about seperti ini ya Oke lanjut sekarang kita akan buat file baru disini kasih aja namanya about dot HTML untuk isinya kita copy aja dari dari apa nih dari indeks ya copy semua lalu paste di sini kita hapus beberapa bagian sisakan aja bagian about ya Hai welcome bernyanya kita hapus lalu Oke Cukup segini aja ya kita sisakan yang tagihan about ya kita coba browser refresh sekarang kita masuk ke baut nah seperti ini ya kemudian kita akan buat untuk labelnya ya biar kita tahu kita sedang di posisi mana ya selain dari menu kita juga buat ini aja ya oke hmm Ayo kita akan buat label itu di bawahnya menu ya di sini kita kece bagian misalkan label kasih aja section kasih aja kelasnya misalkan label selama kelas ini bebas ya teman-teman selain kebutuhan kemudian disini kita akan kasih p lalu eh sebelumnya kita kasih div kontainer dulu div kontainer lalu kita kasih P kita kasih home lalu garis miring kita kasih about ya sekarang kita ke browser refresh seperti ini sekarang label ini kita kasih warna label kita kasih warna background color kita kasih warna ini aja ya kita ke browser refresh seperti ini ya sekarang fontnya kita ubah warna putih tefal refresh Oke jadi selanjutnya kita akan coba kalau kita kasih gambar yang diberi buat ini kita kasih gambar seperti yang kayak gini ya Oke ini kita kasih gambar Oke tapi di atas about nya ya di atas about di sini kita akan kasih IMG src kita akan panggil gambar yang sudah raja IMG nama filenya banner.jpg buka browser refresh uh kegedean ya oke sekarang mungkin kita akan resize dulu ya untuk gambarnya jangan terlalu besar kita resize dulu klik kanan lalu kita akan refresh menggunakan paint aja resize ubah aja ukurannya jadi misalkan 1200 bisa gitu ya lalu Oke sip lalu kita save lalu close kita coba ke browser refresh nah udah berubah ya sekarang kita coba atur lebarnya di bagian ini kita kasih with kasih aja 100% ya oke cukup segini aja ya siap sekarang kita akan buat mungkin bagian visi misinya ya Oke, yang about kita tambahkan lagi aja textnya seperti ini. Ups, terlalu nempel ya. Oke, kita akan modifikasi yang P-nya ya. P itu ada di about. Kita kasih margin, bottom. Kasih aja 20px. Biar ada jarak masing-masing paragrafnya. Nah, seperti ini ya. Sip, sekarang kita akan lanjut kasih visi-visi. Kita copy aja. yang bagian about ini kita paste di bawah ganti aja jadi visi kemudian kita kurangi aja teksnya sampai di sini mungkin ya kita coba ke browser refresh oke cukup ya kemudian yang isinya yang isinya kita copy aja kita ke browser refresh Oke, beres ya. Untuk text-nya silakan teman-teman sesuaikan aja dengan kebutuhan. Selanjutnya kita akan buat, oh iya, untuk class aktifnya kita pindahin dulu ya di menu-nya. Kan sekarang ada di halaman about nih. Jadi halaman about-nya aktif. Nah, seperti ini. Kita coba ke browser, refresh. Oke. Kita ke halaman home. Oke, about, oke ya. Selanjutnya kita akan buat halaman service. kita buat file baru, klik kanan new file service.html, enter kita copy aja dari index, kita paste di service kita hapus yang bagian aboutnya lalu kita hapus juga yang banner kemudian kita kelas aktifnya pindahin ke service Kemudian kita tambahkan label ya, sama seperti about. Copy aja label, copy lalu paste di atasnya service ini. Ganti aja nama buatnya jadi service. Sekarang kita buka browser, refresh. Service, oke jadi ya, siap. Selanjutnya kita akan buat yang bagian kontak. Kontak new file. kontak.html enter, kita paste aja dari about atau enggak service ya copy semua lalu paste di kontak, kita hapus aja bagian misalkan bagian ini aja deh bagian ininya lah ya kita ganti kelas aktifnya jadi kelas di menu kontak lalu labelnya kita ganti jadi kontak kemudian judulnya juga kita ganti jadi kontak kontak info gitu ya kontak info kita buka browser refresh kita buka kontak oke seperti ini kemudian kita akan buat kontaknya hampir sama seperti ini ya oke kita lanjut kita akan buat menggunakan div class box ya kemudian div class call script 4 sebelumnya kita pernah buat ya class call script 4 ini kita kasih script 4 lalu di dalamnya kasih misalkan h4 ya kita kasih address kita coba browser refresh nah seperti ini ya kemudian kita kasih p di bawahnya misalkan jalan petojo ops petojo vijv6 misalkan Cideng Gambir Jakarta pusat 10150 gitu ya kita coba refresh buka browser sip sekarang kita akan lanjut buat yang bagian email email Oh ya kita coba browser lalu refresh sip jadi selanjutnya kita akan tambahkan lokasi ini ya sip Google Maps kita butuh yang namanya Google Maps ya kita masuk ke Google Maps kita klik aja lalu kita masukkan lokasinya dimana petonjok bij6 itu ya kita klik ini lalu kita klik bagikan lalu pilih sematkan peta lalu kita salin HTML kita paste aja di bawahnya div class box itu ya di sini lalu lebarnya kita ganti 100% kita coba ke browser lalu refresh sip jadi ya sekarang kita akan buat untuk tampilan responsifnya kita coba Klik Kanan Hai Nah kita akan buat ketika dia ditampilkan HP menunya atau logonya kesebelahkan ketengah-tengah gitu ya Oke siap di CSS kita akan buat query nya ya jadi kita akan bikin media screen and ketika layar lebarnya maksimal width nya itu 768 pixel maka Hai maka pertama kontainernya dulu ya kontainer kita ganti lebarnya jadi 90% refresh nah seperti ini ya selanjutnya kita akan ketengahin logonya ya untuk header H1 kita kasih text-align center coba bisa apa enggak kita coba float nya kita kasih non oke seperti ini ya kemudian untuk all nya juga ya kita posisikan dia ke tengah-tengah header all kita kasih text align center bisa apa enggak kalau masih di samping kanan kita hilangkan juga float nya jadi non ya Hai Oke sip sudah ketengah-tengah ya about service kontak Oke selanjutnya kita akan modifikasi yang bagian Oh iya yang tersebut ya tak dulu tersebut ini kita akan atur just TV ya teks elegan nya kita akan setting just TV mana itu buat nah ini teks elegan nya kita kasih kalau enggak senter aja deh senter kita save ke browser refresh Hai nah ke tengah-tengah seperti ini ya sip sekarang kita akan modifikasi yang service juga ya yaitu kalau nggak salah kolom 4 ya kolom 4 jadi kolom 4 ini pada saat ukuran layarnya 768 pixel box 4 lebarnya kita ganti 100% lalu plotnya kita hilangkan aja non Hai kabrosa refresh nah seperti ini ya kemudian kita kasih margin-bottom aja untuk masing-masing plot masing-masing kolnya margin-bottom misalkan eh 20p sawo refresh Oke cukup ya sip sekarang kita lanjut ke about disini Oke udah cukup ya service sudah cukup kontak Sudah cukup. Oke. Oke, mungkin untuk pembuatan web company profile cukup sampai di sini dulu saja. Cukup mudah bukan? Mudah sekali. Oke, mungkin dari saya cukup sekian dulu. Buat teman-teman silakan dikembangin lagi saja di rumah. Mau seperti apa bentuknya ya. Bebas. Kemudian mungkin kita akan coba hosting ya. Dan hostingnya akan kita lakukan di video berikutnya. Jadi agar web kita ini dapat diakses oleh semua orang melalui perangkat apapun ya, baik itu handphone, laptop, maupun komputer. Oke, mungkin di video kali ini kita cukup aja sampai di sini. Kurang lebihnya mohon maaf. Buat teman-teman yang masih bingung, silakan tanyakan aja di kolom komentar di bawah ini. Oke, sampai berjumpa lagi di video tutorial berikutnya. Terima kasih. Wassalamualaikum warahmatullahi wabarakatuh.

Kemudian yang service juga sama, kontak juga sama ya. Selanjutnya kita akan coba cek untuk tampilan mobile-nya. Klik kanan, inspect.

Seperti ini ya, oke. Kita coba scroll ke bawah. Nah, oke.

Selanjutnya yang about. Oke, yang service, oke, kontak juga, oke, sip. Selanjutnya kalau kita perhatiin di sini ketika kita refresh alaman webnya, di sini muncul ya tampilan loading seperti ini, muter-muter gitu. Oke, kita juga akan buat seperti itu nanti.

Sip, sekarang kita langsung saja eksekusi. Di sini seperti biasa saya akan menggunakan sublim text sebagai text editornya. Buat teman-teman yang di laptopnya ada editor lain, silakan gunakan saja.

Oke, pertama di sini saya akan buka dulu text editornya, saya blend text. Selanjutnya kita buat saja file baru, new file, lalu save. Kita akan simpan di data D. Di sini kita buat saja folder baru dengan nama company profile.

Strip profile, enter, enter lagi. Di sini kita simpan. file nya dengan nama index.html enter oke selanjutnya kita akan buat struktur html nya ya ketik aja html lalu tekan tombol save kemudian title nya kita kasih aja nama julfikar morfitri gitu ya lalu save kemudian kita kasih tag meta lalu kita kasih tag meta lagi namenya kita kasih viewport ya, karena kita nanti akan buat web responsive. Kemudian untuk kontennya, kita kasih aja width sama dengan device width, koma inisial, kali kasih jangka 1. Selanjutnya, kita akan hubungkan file index ini dengan file CSS, menggunakan tag link. Nah, untuk ref-nya, kita akan arahkan dia ke folder CSS, garis miring.

style.css jadi nanti kita akan buat folder css di dalamnya ada style.css ya, sip sekarang kita lanjut buat bagian-bagiannya terlebih dahulu, disini kita akan buat bagian header dulu ya, kita kasih komentar aja, header gitu lalu disini kita lihat di header ini ada bagian link main source nya ya, lalu ada logo kemudian ada menu, oke kita buat aja div medsos gitu ya untuk kebungkus link medsosnya lalu di dalamnya kita kasih di class container oke di dalam container kita kasih tag all kasih tag li ya di dalam li kita kasih tag a biar medsosnya bisa kita klik oke kalau misalkan kita lihat disini link medsosnya menggunakan icon ya ini menggunakan icon font aws soal Cuman sekarang kita akan gunakan huruf dulu aja. Nah nanti kita akan ubah menjadi icon belakangan ya. Misalkan disini untuk Facebook kita kasih huruf F aja gitu ya.

Kemudian kita copy aja. Lalu paste di bawahnya. Untuk Youtube kita kasih huruf Y.

Lalu Twitter kasih huruf T. Nah buat teman-teman yang punya barangkali lebih dari ini metodenya silahkan tambahan aja ya. Kalau misalkan gak punya metode sama sekali. pakai ini aja ya buat perjalanan aja kemudian disini kita lanjut buat header dalam header kita kasih logo menggunakan hasil tuh kasih tegak lalu disini kasih aja nama jual pika kemudian setelah itu kita ubah atau kita buat menu yang menggunakan full lalu like di dalam kita kasih tegak kemudian kita kasih nama-nama menunya ya Kita kasih com, kemudian kita copy paste aja.

Oke seperti ini ya, selanjutnya kita akan isi masing-masing hariannya. Untuk medsos saya akan kasih tanda pagar dulu aja. Buat teman-teman yang memang sudah ada link medsosnya silahkan isikan aja sesuaikan dengan link medsosnya masing-masing.

Oke kita kasih tanda pagar, tanda pagar. Untuk julfikar kita kasih index.html. Jadi ketika julfikar di klik itu akan mengarah ke halaman index gitu ya. Begitupun yang home, sama ke index.

Yang about kita arahkan dia ke about. Kemudian yang service kita arahkan ke service.html. Lalu yang contact kita arahkan ke contact.html.

Jadi nanti kita akan buat file-file ini belakangan ya. Sekarang kita fokus ke halaman index dulu aja modifikasi. Oke selanjutnya kita coba cek terlebih dahulu seperti apa webnya ya. Kita masuk ke folder company profile.

Indexnya kita buka ya, klik kanan, open with Google Chrome. Nah, webnya seperti ini ya. Sekarang kita akan lanjut modifikasi menggunakan CSS. Oke, sebelumnya saya akan masukkan dulu foldernya ke sublime ya. Nah, ke sini.

Lalu di sini kita akan buat folder baru, klik kanan, new folder. Kasih aja nama foldernya CSS. Enter.

Lalu di dalam CSS itu kita... Buat file baru, klik kanan new file, save dengan nama style.css, enter. Selanjutnya kita akan reset dulu padding marginnya ke 0 ya. Kasih bintang, jadi semua padding dan marginnya kita reset ke 0. Padding 0, margin 0 ya.

Kemudian kita setting juga font familynya ke sans seri. Kita save, lalu buka browser refresh. Hai nah seperti ini ya Oke sekarang kita akan lanjut modifikasi yang bagian medsos terlebih dahulu ya sip di sini kita sudah punya kelas medsos kita copy aja kita panggil di sini ya Oke kita kasih aja misalkan paddingnya atas bawahnya 5px kiri kanannya nol lalu kita isi background color warna Misalkan kita coba cari inspirasi dulu di Google ya.

Cari warna menggunakan kode HTML. Yang ini kita klik aja. Nah seperti ini ya ada banyak pilihan warna.

Kita pilih aja salah satu. Misalkan pilih yang ini ya. Kita copy aja yang kode hexnya. Copy lalu paste di sini.

Save lalu buka browser refresh. Nah seperti ini ya. Sekarang kita lanjut.

modifikasi medsosnya medsosnya kita akan ubah warna putih ya oke medsos medsos all leak namun sebelum berwarna putih kita akan posisikan dia atau ubah posisinya menjadi horizontal ya mendatar oke yang leaknya kita kasih display inline block kita buka browser refresh nah seperti ini ya sekarang kita akan ubah warna putih color warna putih kita save, refresh belum ada perubahan ya kita kasih color inherit aja di tag A nya ya inherit jadi biar si tag A nya ngikut jadi warna putih nah seperti ini sekarang kita akan posisikan dia ke tengah-tengah sini ya oke disini kita sudah punya class container kita akan modifikasi aja di CSS titik container lalu kita kasih with 80% kemudian margin atas bawahnya nol kiri kanannya auto kita coba refresh nah seperti ini selanjutnya kita hilangkan dulu garis bawahnya itu adanya di teks a teks a kita kasih text decoration kasih non kita coba refresh oke hilang Selanjutnya kita akan ubah link methods ini menjadi icon seperti ini. Kita butuh yang namanya libraries font awesom terlebih dahulu. Kita gunakan saja cdn font awesom. Ketik saja di google cdn font awesom.

Lalu kita gunakan saja yang ini. Lalu kita pilih yang css. Lalu pilih all min css. Copy saja.

Kemudian kita paste di sini saja. sebelumnya kita ketik dulu link tab di bagian ref nya kita paste seperti ini sekarang kita coba buka browser refresh belum ada perubahan ya sekarang kita akan ubah terlebih dahulu namun sebelumnya kita akan lihat dahulu cara membuat icon seperti apa kita buka dulu font awesomnya yang font awesom ini ya oke seperti ini kita akan coba cari font icon facebook ya Disini kita cari icon facebook Kita ketik aja facebook gitu Oke disini ada facebook kita pilih yang ini aja Kita klik Oke seperti ini Nah disini ada caranya kita copy aja berarti yang Tagli ini ya copy html Copy kita paste aja di Pengganti f ini ya Kita ganti aja f nya kita paste disini Kita coba buka browser Kita refresh Nah jadi ya selanjutnya kita cari YouTube YouTube kita cari nah ini ya kita pilih aja YouTube ini klik Nah kita copy aja yang ini ya copy HTML kita paste disini ganti aja ya ini seperti ini ya save kemudian kita refresh sip berubah juga selanjutnya untuk Twitter kita cari juga Twitter Oke kita pilih aja yang ini ya Twitter Oke kita copy aja HTML nya seperti ini lalu kita paste pengganti huruf T paste disini save buka browser refresh Oke sudah jadi ya sekarang kita akan coba kasih jarak untuk masing-masing resource nya disini kita akan kasih margin untuk li-li nya belinya kita kasih margin margin-right kita kasih aja 10px kita coba set buka browser refresh seperti ini Oke untuk medsos sepertinya udah selesai ya sekarang kita akan lanjut buat bagian header ini Oke kita akan modifikasi bagian header header kita kasih border dulu aja buat alat bantu kita kita refresh nah ini border ya selanjutnya kita kasih border Hai yang bagian hak satunya header has satu kita kasih border satu pixel solid kita refresh sama ada juga ya kemudian yang punya juga kita kasih order Oke siap sekarang kita akan coba kasih plot terlebih dahulu ya Biar ini ke sebelah kanan dan ini si logonya sebelah kiri. Oke.

Si all-nya kita kasih float right. Lalu H1-nya float left gitu ya. Kita refresh.

Sip. Sekarang kita akan kasih div class container-nya biar dia ke tengah-tengah seperti message ini. Oke.

Kita kasih div class container di sini. Jadi si H1 dan all-nya kita bungkus. menghapus dengan kontainer kita tep nah seperti ini kemudian kita coba buka browser refresh Oke selanjutnya kita akan coba kasih border dulu kontainer seperti apa ya kontainer kita kasih border satu pixel solid up serata kontainer yang dihider seperti ini ya Oh Oke kita akan kasih dia clear boot ya si kontainer kasih clear boot kontainer after konten Ops nah seperti ini kontennya kosong lalu displaynya blog kemudian kita kasih clear nilainya boot ya sekarang kita coba buka browser refresh nah si kontainer jadi ngikut isinya ya oke sekarang kita lanjut modifikasi uli-ulinya ya Oke kita akan panggil yang belinya dulu header uli kita akan posisikan dia horizontal atau mendatar ya seperti biasa link-nya kita kasih display inline blog inline blog kita coba ke browser refresh nah seperti ini selanjutnya tepanya kita kasih padding karena kita tahu di dalam tagli itu ada tag A ya jika ini kita kasih padding header uli a padding atas bawahnya misalkan 25 pixel kiri kanannya 20 pixel sekarang kita refresh buka browser nah seperti ini ya oh belum berubah ternyata kita kasih display dulu si a nya ya display display inline block juga kita refresh nah seperti ini ya oke sekarang kita lanjut modifikasi yang h1 nya kasih padding juga ya H1, H1, kita kasih padding, atas bawahnya 15px, kiri kanan 0px. Kita buka browser, refresh, seperti ini ya.

Oke, cocok. Sekarang kita akan kasih warna untuk logonya ya. Kita kasih warna, misalkan warnanya itu seperti warna medsos ya. Nah ini, oke kita copy lalu paste di sini.

Ayo kita refresh nah seperti ini ya selanjutnya kita maunya ketika menu ini menu ini disentuh itu berubah warna ya seperti ini sentuh berubah warna sentuh berubah warna Oke kita akan kasih teganya header uli a over ketika tegadi over disentuh ya backgroundnya ubah jadi warna seperti ini semuanya samain aja Ayo kita refresh Nah jadi ya kemudian warna fontnya ubah juga jadi warna putih color warna putih refresh nah seperti ini sip jadi sekarang kita akan buat kelas aktif ya Jadi kita tahu sekarang ini kita sedang di halaman apa ya misalkan kita dalam home ya udah home ini kita kasih warna background seperti ini gitu ya oke Ayo kita kasih kita bikin dulu kelas aktif di sini ya aktif kita kasih background warna ini dan color ini kita kecil aja paste di sini lalu kita akan pasang kelas aktif itu di tagli home ini ya kita kasih aktif karena kita tahu sekarang kita sedang ada di halaman home berarti home ini harus warnanya warna seperti ini ya oke sekarang kita kita lanjut ya untuk header sudah selesai kita akan hapus lagi border-border nya oke di sini kita akan hapus-hapusin dulu border dari tag pool kita hapus kemudian h1 hapus header juga hapus lalu container juga hapus sekarang kita save refresh nah seperti ini jadi ya oke sekarang kita akan lanjut bagian gambar banner ya oke disini saya sudah mempunyai satu gambar ya buat teman-teman yang belum ada gambarnya silahkan download dulu aja bebas mau gambar apa aja kita paste aja disini sebelumnya kita buat folder baru dengan nama img enter enter lagi kita paste aja gambarnya disini rename nama file jadi banner banner Hai enter Oke bener ya formatnya jpg sekarang disini kita akan setting bagian banner disini kita buat bagian baru kasih komentar banner gitu ya lalu kita akan buat menggunakan section kasih kelas banner lalu dalamnya kita buat H2 kasih aja kata-katanya Welcome to my website save kemudian kita coba buka browser refresh oke jadi ya selanjutnya kita akan buat seperti ini oke untuk banner kita panggil class disini banner tag nya kasih aja 60 viha ya kemudian kasih aja border biar ketahuan seperti apa bentuknya solid kita buka browser refresh nah ini untuk banner ya oke Selanjutnya kita akan masukkan gambar background image. URL kita akan keluar satu folder berbukit CSS. Kemudian kita akan masuk ke folder img.

Lalu kita panggil nama filenya banner.jpg. Kita buka browser refresh. Sudah masuk ya.

Kita akan atur posisinya ya. background size kasih cover kita buka browser refresh Oke, sudah jadi. Selanjutnya kita akan coba kasih background transparan ya.

Oke, kita akan gunakan banner after aja. Banner after. Di sini kita kasih kontennya kosong. Lalu kasih display block.

Kasih positionnya absolute. Lalu topnya kita kasih 0. Leftnya kita kasih 0. right nya kita kasih 0, bottom nya kita kasih 0 oke selanjutnya kita kasih warna background nya transparan kita kasih warna yang sama aja, kita kesini namun kita gunakan warna RGB aja, kita copy aja kemudian kita paste disini, kita kasih RGBA kita paste aja disini lalu kita kasih tingkatan transparan berapa ya disini kita kasih 0,6 aja kemudian kita coba refresh buka browser ups semuanya ternyata ya kita belum kasih posisi relatif di bannernya position relatif refresh nah seperti ini jadi ya oke Selanjutnya kita akan coba kasih padding aja di sectionnya. Jadi di section kita kasih padding atas bawahnya 50px.

Kirikannya 0. Oke seperti ini ya. Sekarang kita akan posisikan welcome to my website-nya ke tengah-tengah sini. Sip.

Di bagian bannernya kita kasih display flag. lalu justify kontennya center alaikan itemnya center kita coba broserefresh Oke selanjutnya kita akan ubah jadi warna putih Oke warna putih warna putih berarti banner H2 ya banner H2 nya kita akan kasih color warna putih obstrator dia masih ketutupan sama background transparan nya ya kita akan ubah dia ke paling depan untuk apa namanya hadwanya Oke kita akan kasih dia jet index kasih aja satu jadi posisinya dia ada di depannya background ini ya Oke sekarang kita akan lanjut kasih border kasih dulu aja padding atas bawahnya 20px kiri kanannya 25px kasih aja border 3px solid warnanya putih kita save refresh buka browser Oke seperti ini ya jadi sekarang sudah selesai untuk banner selanjutnya adalah kita hapus dulu untuk border bannernya ya karena sudah tidak dibutuhkan lagi kita hapus lalu kita refresh Oke sip selanjutnya kita akan buat bagian about ya kita akan buat bagian baru di bawah di bawah banner kita buat bagian baru kasih aja namanya about gitu ya kita akan gunakan section kasih aja kelas about di dalamnya kita kasih div container lalu kita kasih tag h3 ya ya h3 kita kasih aja about seperti ini ya lalu kita coba buka browser refresh Hai sip jadi ya sekarang kita akan modifikasi about ini about H3 ya jadi kita akan panggil class about jangan tersebut ya kita akan panggil section aja section H3 kemudian kita akan kasih posisi ya text-align center gitu kita coba refresh Oke selanjutnya kita kasih padding atas bawahnya 20px Hai ikan yang nol lalu kita akan ubah warnanya jadi warna sama seperti yang sebelum-sebelumnya kita kasih warna ini aja kita coba refresh buka browser fresh ya Nah seperti ini sip sekarang kita kelanjut buat teksnya ya Oke kita akan gunakan aja lorem ipsum lorem ipsum kita klik aja kita copy aja yang ini Oke copy sampai sini aja lalu kita paste di bawahnya hati kayak ini kita lalu paste disini kita coba buka browser refresh tip sudah jadi sekarang kita akan modifikasi P ini ya P ini ada di dalam flash about kasih aja colornya misalkan 666 lalu word spacing nya kita kasih 2 pixel kemudian line height nya kita kasih 25 pixel ya kita coba ke browser refresh Oke, seperti ini. Sekarang kita akan buat beberapa bagian dipertebal seperti ini ya.

Oke, kita akan kasih aja bagian ini kita pertebal menggunakan text strong. Kita pindahkan aja penutupnya ke sini ya. Save, refresh. Oke, sudah ya.

Selanjutnya untuk H3 kita kasih margin bottom agar agak jauh dikit ya ke bawah. Hai tip hati gak kita kasih margin batem margin batem nya 20pixel Oke cukup ya selanjutnya kita akan buat bagian service Oke service kita akan buat bagian baru di HTML nya di sini kita kasih aja komentar service gitu Hai seperti biasa menggunakan section kasih kelas service seperti biasa juga kasih di flash container lalu H3 service kita coba buka browser refresh nah seperti ini ya yang bagian service kita ubah warnanya jadi warna abu-abu seperti ini Oke kita panggil ya kelas servicenya di CSS service kasih aja background color F9 F9 F9 kita buka browser refresh seperti ini lalu kita akan buat bagian bagian servicenya ada mobile apps web development design digital marketing oke lanjut disini kita akan buat kelas baru dengan nama div box ya di dalam box ini kita akan kasih dia div misalkan col-4 gitu ya karena kita akan buat 4 kolom ke samping lalu di dalam class col-4 ini kita akan buat div class icon nah di dalam icon ini kita akan masukkan icon dari font aws nanti ya oke sip selanjutnya kita akan kasih h4 disini ya untuk nama-namanya misalkan mobile app gitu ya kita akan coba buka browser Hai refresh nah seperti ini ya sekarang kita akan modifikasi dulu yang kelas boxnya oke pas box kita modifikasi misalkan masih border dulu satu pixel solid-tab lalu buka browser refresh nah seperti ini ya selanjutnya kita akan modifikasi yang apa ini Hai nih ya yang call-call sipatnya Oke kita akan modifikasi box call strip 4 kita akan setting misalkan lebarnya itu 25% kemudian kasih padding nya seakan 1520 ya 20pixel kirikan bawahnya 20pixel lalu kita kasih box sizing border box Hai agar lebar tetap segitu lalu kita kasih border seperti biasa biar ketahuan seperti apa bentuknya satu pixel solid kita buka browser refresh nah seperti ini ya Oke selanjutnya kita akan buat atau modifikasi yang iconnya sip icon kita modifikasi lebarnya itu misalkan 70pixel Hai tingginya itu 70 bisa juga kasih border aja satu pisau solid buka browser refresh nah seperti ini ya sekarang kita akan ubah bentuknya di bulet kita kasih aja border-radius 50% save buka browser refresh nah bulet kan oke Selanjutnya kita akan kasih jarak untuk text mobile up sini kasih jarak dikit ya seperti ini oke di bagian icon nya mungkin kita kasih margin atau jangan deh di H4 nya ya kita tau di dalam box ini di dalam call 4 kita punya H4 ya kita coba cek Hai Nah di sini kita punya hampat hampat ini dalam kelas box ya kita akan kasih margin atas bawahnya 10px kirimkan yang nol refresh refresh Oke refresh tadi sampai mana eh udah margin 10px ya kita akan kasih warna juga Ayo kita akan kasih warna misalkan di boxnya kita akan kasih color warnanya warna ini aja ya Oke kita paste di sini refresh nah seperti ini ya selanjutnya kita akan kasih icon mobile ya sama seperti ini icon mobile kita akan cari disini mobile Oke, mobile kita pilih aja yang ini. Sip, kita copy aja yang HTML ini ya. Kita copy, kita paste di dalam if icon ini. Set, seperti ini.

Kita coba buka browser, refresh. Nah, udah kelihatan ya. Siap.

Sekarang kita akan posisikan icon ini ke tengah-tengah. Oke. Di dalam box, di dalam icon, kita kasih text-align center. Lalu. Hai lainnya 70px kita buka browser refresh nah seperti ini ya lalu kita akan ubah ukuran fontnya ya perbesar dikit font-size 20px ops kita save refresh cukup ya Oke sekarang kita akan posisikan ke tengah-tengah sini Oke sip Hai di dalam callnya atau di iconnya ya di-div icon ini kita kasih margin aja atas bawahnya nol kiri kalanya auto kita buka browser refresh Oke seperti ini kemudian yang mobile apps nya sama ya empatnya kita kasih seperti ini juga ops nggak bisa kita kasih itu aja ya kita kasih di boxnya atau di colmd nya kita kasih teks elegan center ya kita refresh Oke jadi sekarang kita lanjut mungkin kurang jauh ya antara icon dengan namanya kita kasih jarak lagi 20 bisel Oke seperti ini ya Hai selanjutnya kita akan coba copy lagi ke sampingnya kita akan tambahin lagi yang kol empatnya kita copy nah seperti ini kita ganti aja mobile appnya jadi web development save buka browser refresh udah ke bawah ya sekarang kita akan buat dia ke samping kita kasih aja di kol empatnya float float left Ayo kita save buka browser refresh tip sudah jadi seperti ini ya sudah selesai sekarang kita coba ini tebel nih nih kayaknya sih kelas boxnya ya dia gak ngikut isinya karena ada plot live nya sekarang di boxnya kita kasih clear boot ya after konten kosong displaynya blog ups lalu clear ya boot kita save buka browser refresh oke seperti ini ya cocok sekarang untuk bagian service saya rasa Oh iya untuk icon-icon nya belum ya kita akan gunakan icon lain untuk development kita kasih aja icon jatahkan gelobok gitu ya kita ke browser Oke kemudian yang desain kita kasih aja Pak edit gitu ya sip lalu digital marketing kita kasih aja kelas apa tuh car bar Hai sip seperti ini untuk service sudah selesai kita akan hapus lagi untuk border-border nya border call x4 nya kosip pacar kita hapus lalu box-nya kita aku juga sip kita buka browser refresh Oke jadi seperti ini ya selanjutnya kita buat bagian footer footer footer Oh ya Hai untuk ini kurang jauh ya buat bawah untuk service ke icon nya kita cek dulu A4 Oh ya nanti tuh Oh udah ini udah kasih perting udah kita kasih 25 aja deh ya oke cukup kemudian ini untuk jaraknya kita kasih padding aja ya kurang jauh yang buat ini kita kasih about kasih padding bottomnya misalkan 100px gimana ya kita coba cek buka brosery press segini ya oke cukup sekarang kita akan lanjut buat bagian footernya di HTML kita buat bagian baru kita buat komentar footer plus tag footer di dalamnya ada div container di dalamnya lagi ada kita seperti biasa kasih aja copyright copy 2020 strip misalkan julfikar alright reserved gitu ya save sekarang kita buka browser refresh nah muncul ya sekarang kita akan modifikasi footernya di css kasih padding aja atas bawahnya misalkan 30px kirikannya 0 lalu kasih background color mungkin untuk warnanya kasih warna ini aja ya kasih bugger lalu kita kasih warna fontnya warna putih sekarang kita buka browser refresh nah seperti ini ya oke kita akan posisikan dia ke tengah-tengah Hai ke tengah-tengah berdikasi teks elegan Center Oops refresh Oke jadi ini kurang jauh juga untuk jarak bawahnya kita kasih padding juga sama kayak bot ya out kasih piring bottom juga servis juga si piring batam ya kita kasih koma aja service kasih piring batam juga Oke, cukup ya.

Sip, untuk bagian index sudah selesai ya. Sekarang kita akan coba kasih namanya preloader ya. Jadi kita akan tampilkan loader sebelum menampilkan halaman webnya. Oke, siap.

Sekarang kita akan buat dulu untuk loadernya. Di HTML, di bagian atas ini kita akan buat bagian baru. Kasih aja nama bagiannya.

Hai akan loader gini ya ini kita kasih div div bg strip loader lalu kasih div lagi misalkan loadernya sekarang kita akan modifikasi bg-loader ini di CSS di bagian bawah kita akan modifikasi bg-loader kita akan ubah warna petronya misalkan warna ee gitu ya lalu positif editionnya kasih fixer lalu topnya kita kasih nol letak kita nol right nya nol batamnya nol juga kemudian kita coba buka browser refresh nah seperti ini ya namun ini kayaknya ke apa namanya ketutup sama sih banner ini ya berarti sih bagi loadernya kita kasih jadi next jadi index aja 1999 kita buka browser di press oke jadi semuanya ketutup sama bgloader ini ya selanjutnya kita akan buat preloadernya kita panggil loader ini di CSS bgloader loader kita kasih aja misalkan lebarnya 100 pixel heightnya 100 pixel kasih border misalkan 3 pixel solid warnanya putih Hai solid ya lalu kita kasih atau sekarang kita ke browser refresh nah seperti ini karena kita akan posisikan dia ke tengah-tengah sip di bagel ordernya kita kasih display flag lalu justify kontennya Center alaikennya Center kita buka browser refresh Oke udah setengah sekarang kita lanjut buat ya menjadi bulet kasih aja border radius 50% nah seperti ini kemudian kita kasih warna ya buat motor-motor nya di bagian loader kita kasih warna border color kasih aja warnanya warna kayak yang warna yang lainnya ya kayak warna ini native kita paste aja di sini Hai seperti ini kita coba browser refresh Oke sekarang kita akan tambahkan lagi border-right dari sebelah kanannya kita kasih warna yang sama kemudian border-bottom abs color ya kasih warna sama juga kita coba buka browser refresh tip seperti ini sekarang kita akan buat dia jadi berputar-putar Oke kita gunakan keyframe aja keyframes ya nama keyframe nya kita kasih aja puterin gitu, seperti ini lalu kita kasih dalam posisi 100% dia akan posisinya berubah 360 derajat transform rotate 360 dek ya sekarang kita coba buka browser refresh belum ada apa-apa ya kita kasih animasi di loadernya animation kasih aja nama animationnya puterin kemudian kecepatannya kasih aja 0,3 misal 0,5 gitu ya lalu linear infinity infinity gitu biar dia terus menerus puter ya kita coba buka browser refresh Oh ternyata belum muter kita coba buka browser seperti apa Kenapa dia gak muter Oh ini belum ada esnya ya 0,5 s-second maksudnya kita refresh nah seperti ini oke oke pusing gak pusing ya Oke untuk cepatannya sedangkan teman-teman aja misalkan tahu cepat kata 0,8 ya oke atur aja sesuai dengan kebutuhannya masing-masing Hai selanjutnya jadi ketika webnya nampil silode ini hilang Oke di sini kita akan butuh bantuan jQuery aja ya kita butuh library jQuery ya kita akan gunakan cdn aja cdn jQuery jQuery jQuery enter cdn jQuery kita klik aja Oke di sini kita gunakan aja yang minifile ini ya klik Ayo kita copy aja ini scriptnya lalu kita paste aja di bagian sini kita paste seperti ini kemudian kita coba buka browser gak ada perubahan ya sekarang kita akan buat scriptnya di bawah jadi ketika halamannya nya nampil dollar dokumen ready ya ketika halaman webnya sudah nampil gitu ya Hai pangsen apa yang terjadi kita maunya si kelas-kelas BG loader ini hilang gitu ya Oke seperti ini titik ini titik kelas ya BG loader Hai ya disembunyikan kita sekarang buka browser refresh nah seperti ini ya oke sudah selesai sekarang kita akan lanjut ke... apa lagi nih? Hai kebagian about ya Jadi ketika kita klik menu about dia akan pindah kalimat about seperti ini ya Oke lanjut sekarang kita akan buat file baru disini kasih aja namanya about dot HTML untuk isinya kita copy aja dari dari apa nih dari indeks ya copy semua lalu paste di sini kita hapus beberapa bagian sisakan aja bagian about ya Hai welcome bernyanya kita hapus lalu Oke Cukup segini aja ya kita sisakan yang tagihan about ya kita coba browser refresh sekarang kita masuk ke baut nah seperti ini ya kemudian kita akan buat untuk labelnya ya biar kita tahu kita sedang di posisi mana ya selain dari menu kita juga buat ini aja ya oke hmm Ayo kita akan buat label itu di bawahnya menu ya di sini kita kece bagian misalkan label kasih aja section kasih aja kelasnya misalkan label selama kelas ini bebas ya teman-teman selain kebutuhan kemudian disini kita akan kasih p lalu eh sebelumnya kita kasih div kontainer dulu div kontainer lalu kita kasih P kita kasih home lalu garis miring kita kasih about ya sekarang kita ke browser refresh seperti ini sekarang label ini kita kasih warna label kita kasih warna background color kita kasih warna ini aja ya kita ke browser refresh seperti ini ya sekarang fontnya kita ubah warna putih tefal refresh Oke jadi selanjutnya kita akan coba kalau kita kasih gambar yang diberi buat ini kita kasih gambar seperti yang kayak gini ya Oke ini kita kasih gambar Oke tapi di atas about nya ya di atas about di sini kita akan kasih IMG src kita akan panggil gambar yang sudah raja IMG nama filenya banner.jpg buka browser refresh uh kegedean ya oke sekarang mungkin kita akan resize dulu ya untuk gambarnya jangan terlalu besar kita resize dulu klik kanan lalu kita akan refresh menggunakan paint aja resize ubah aja ukurannya jadi misalkan 1200 bisa gitu ya lalu Oke sip lalu kita save lalu close kita coba ke browser refresh nah udah berubah ya sekarang kita coba atur lebarnya di bagian ini kita kasih with kasih aja 100% ya oke cukup segini aja ya siap sekarang kita akan buat mungkin bagian visi misinya ya Oke, yang about kita tambahkan lagi aja textnya seperti ini. Ups, terlalu nempel ya.

Oke, kita akan modifikasi yang P-nya ya. P itu ada di about. Kita kasih margin, bottom.

Kasih aja 20px. Biar ada jarak masing-masing paragrafnya. Nah, seperti ini ya. Sip, sekarang kita akan lanjut kasih visi-visi.

Kita copy aja. yang bagian about ini kita paste di bawah ganti aja jadi visi kemudian kita kurangi aja teksnya sampai di sini mungkin ya kita coba ke browser refresh oke cukup ya kemudian yang isinya yang isinya kita copy aja kita ke browser refresh Oke, beres ya. Untuk text-nya silakan teman-teman sesuaikan aja dengan kebutuhan.

Selanjutnya kita akan buat, oh iya, untuk class aktifnya kita pindahin dulu ya di menu-nya. Kan sekarang ada di halaman about nih. Jadi halaman about-nya aktif. Nah, seperti ini. Kita coba ke browser, refresh.

Oke. Kita ke halaman home. Oke, about, oke ya.

Selanjutnya kita akan buat halaman service. kita buat file baru, klik kanan new file service.html, enter kita copy aja dari index, kita paste di service kita hapus yang bagian aboutnya lalu kita hapus juga yang banner kemudian kita kelas aktifnya pindahin ke service Kemudian kita tambahkan label ya, sama seperti about. Copy aja label, copy lalu paste di atasnya service ini. Ganti aja nama buatnya jadi service. Sekarang kita buka browser, refresh.

Service, oke jadi ya, siap. Selanjutnya kita akan buat yang bagian kontak. Kontak new file.

kontak.html enter, kita paste aja dari about atau enggak service ya copy semua lalu paste di kontak, kita hapus aja bagian misalkan bagian ini aja deh bagian ininya lah ya kita ganti kelas aktifnya jadi kelas di menu kontak lalu labelnya kita ganti jadi kontak kemudian judulnya juga kita ganti jadi kontak kontak info gitu ya kontak info kita buka browser refresh kita buka kontak oke seperti ini kemudian kita akan buat kontaknya hampir sama seperti ini ya oke kita lanjut kita akan buat menggunakan div class box ya kemudian div class call script 4 sebelumnya kita pernah buat ya class call script 4 ini kita kasih script 4 lalu di dalamnya kasih misalkan h4 ya kita kasih address kita coba browser refresh nah seperti ini ya kemudian kita kasih p di bawahnya misalkan jalan petojo ops petojo vijv6 misalkan Cideng Gambir Jakarta pusat 10150 gitu ya kita coba refresh buka browser sip sekarang kita akan lanjut buat yang bagian email email Oh ya kita coba browser lalu refresh sip jadi selanjutnya kita akan tambahkan lokasi ini ya sip Google Maps kita butuh yang namanya Google Maps ya kita masuk ke Google Maps kita klik aja lalu kita masukkan lokasinya dimana petonjok bij6 itu ya kita klik ini lalu kita klik bagikan lalu pilih sematkan peta lalu kita salin HTML kita paste aja di bawahnya div class box itu ya di sini lalu lebarnya kita ganti 100% kita coba ke browser lalu refresh sip jadi ya sekarang kita akan buat untuk tampilan responsifnya kita coba Klik Kanan Hai Nah kita akan buat ketika dia ditampilkan HP menunya atau logonya kesebelahkan ketengah-tengah gitu ya Oke siap di CSS kita akan buat query nya ya jadi kita akan bikin media screen and ketika layar lebarnya maksimal width nya itu 768 pixel maka Hai maka pertama kontainernya dulu ya kontainer kita ganti lebarnya jadi 90% refresh nah seperti ini ya selanjutnya kita akan ketengahin logonya ya untuk header H1 kita kasih text-align center coba bisa apa enggak kita coba float nya kita kasih non oke seperti ini ya kemudian untuk all nya juga ya kita posisikan dia ke tengah-tengah header all kita kasih text align center bisa apa enggak kalau masih di samping kanan kita hilangkan juga float nya jadi non ya Hai Oke sip sudah ketengah-tengah ya about service kontak Oke selanjutnya kita akan modifikasi yang bagian Oh iya yang tersebut ya tak dulu tersebut ini kita akan atur just TV ya teks elegan nya kita akan setting just TV mana itu buat nah ini teks elegan nya kita kasih kalau enggak senter aja deh senter kita save ke browser refresh Hai nah ke tengah-tengah seperti ini ya sip sekarang kita akan modifikasi yang service juga ya yaitu kalau nggak salah kolom 4 ya kolom 4 jadi kolom 4 ini pada saat ukuran layarnya 768 pixel box 4 lebarnya kita ganti 100% lalu plotnya kita hilangkan aja non Hai kabrosa refresh nah seperti ini ya kemudian kita kasih margin-bottom aja untuk masing-masing plot masing-masing kolnya margin-bottom misalkan eh 20p sawo refresh Oke cukup ya sip sekarang kita lanjut ke about disini Oke udah cukup ya service sudah cukup kontak Sudah cukup. Oke. Oke, mungkin untuk pembuatan web company profile cukup sampai di sini dulu saja. Cukup mudah bukan?

Mudah sekali. Oke, mungkin dari saya cukup sekian dulu. Buat teman-teman silakan dikembangin lagi saja di rumah.

Mau seperti apa bentuknya ya. Bebas. Kemudian mungkin kita akan coba hosting ya.

Dan hostingnya akan kita lakukan di video berikutnya. Jadi agar web kita ini dapat diakses oleh semua orang melalui perangkat apapun ya, baik itu handphone, laptop, maupun komputer. Oke, mungkin di video kali ini kita cukup aja sampai di sini.

Kurang lebihnya mohon maaf. Buat teman-teman yang masih bingung, silakan tanyakan aja di kolom komentar di bawah ini. Oke, sampai berjumpa lagi di video tutorial berikutnya.

Terima kasih. Wassalamualaikum warahmatullahi wabarakatuh.

Transcript for:Membuat Web Profil Perusahaan Sederhana

Transcript for:
Membuat Web Profil Perusahaan Sederhana