Menambahkan Gaya ke Pembuatan Halaman Skeleton Kita

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Dalam bagian proses pengembangan berkelanjutan kita, kita akan fokus pada gaya HTML. Tutorial ini akan memiliki tiga bagian utama:

Menambahkan gambar
Mengkonversi font ke font web
Gaya pada setiap bagian

Mari dengan cepat mengingat kembali apa yang telah kita bangun sejauh ini:

Mengingat kita bertujuan untuk ini, kita memiliki sedikit yang wajar untuk dilakukan!

Menambahkan Gambar

Alih-alih memotong gambar latar untuk setiap bagian, kita akan mengunduh gambar dari www.unsplash.com, yang memiliki banyak gambar dan bebas untuk menggunakannya. Kita akan menggunakan gambar berikut ini:

Buat folder baru, sebut saja "images" dan unduh gambar disana. Jika Anda ingin mengoptimalkan dan menyimpan ulang mereka untuk melepaskan beberapa kilobyte lagi, silakan.

Selain itu, untuk gambar portofolio kita, kita akan meraih beberapa gambar trianglify yang agak bagus.

Unduh enam file SVG dan letakkan di folder "images/portfolio", masing-masing file harus diberi nama sebagai berikut: "work_1.svg", "work_2.svg" ... "work_6.svg".

Untuk bagian clients, people dan services, kita akan mengekspor gambar dari PSD. Saya tidak akan terlalu jauh ke dalam proses ini, karena ada banyak tutorial tentang bagaimana mengekspor gambar dari PSD. Alat yang saya suka dan gunakan secara pribadi, setiap hari, untuk mengekspor gambar disebut Semser.

Setiap gambar dari section harus ditempatkan di bawah direktori yang relevan "images/section_name". Struktur folder seharusnya terlihat seperti ini:

Mengkonversi Font ke Webfonts

Font yang digunakan di PSD adalah Amble, SlimJoe & BigJohn dan FontAwesome.

Untuk font SlimJoe and BigJohn, kita akan menggunakan FontSquirrel untuk mengubah dari otf ke webfonts. Pergi ke FontSquirrel dan unggah font yang diunduh dari sini. Layar akan terlihat seperti ini:

Penting: Kapan pun Anda menggunakan alat konversi seperti Fontsquirrel, Anda harus yakin bahwa file font yang Anda konversi memiliki lisensi yang sesuai.

Setelah FontSquirrel selesai melakukan konversi, Anda bisa mengunduh kitnya. Di dalam arsip Anda akan memiliki file berikut:

Agar semuanya tetap bersih, setelah mengunduh Amble, SlimJoe & BigJohn dan FontAwesome, kita perlu memindahkan setiap paket font ke dalam folder "fonts". Struktur folder untuk font akan terlihat seperti ini:

Ok, sekarang kita sudah selesai dengan folder "images" dan "fonts", tugas yang tersisa adalah menata bagian-bagian sesuai dengan PSD, jadi mari kita lanjutkan ke bagian selanjutnya.

Menata Bagian-bagian

Setiap bagian yang disajikan dalam tutorial sebelumnya membutuhkan beberapa sentuhan CSS, untuk menghadirkan tampilan dan nuansa PSD. Mari kita mulai dengan membuat file baru, yang disebut "style.css" di mana kita akan menulis semua css kustom kita untuk bagian-bagiannya.

Catatan: Anda mungkin merasa nyaman menggunakan preprocessor seperti Sass atau LESS, dalam hal ini Anda akan menggabungkan file Anda menjadi satu, tapi demi daya tarik global, kita akan tetap berpegang pada CSS kuno yang bagus dalam tutorial ini.

Jadi, secara singkat, kita telah mengubah font kita menjadi webfonts dan sekarang kita perlu mereferensikannya di CSS kita. Kode untuk font Amble, SlimJoe and BigJohn terlihat seperti ini:

/* Fonts */
/* Generated by Font Squirrel (http://www.fontsquirrel.com) */

/* SlimJoe */
@font-face {
    font-family: 'slim_joeregular';
    src: url('../fonts/SlimJoe/slim_joe-webfont.eot');
    src: url('../fonts/SlimJoe/slim_joe-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SlimJoe/slim_joe-webfont.woff2') format('woff2'),
         url('../fonts/SlimJoe/slim_joe-webfont.woff') format('woff'),
         url('../fonts/SlimJoe/slim_joe-webfont.ttf') format('truetype'),
         url('../fonts/SlimJoe/slim_joe-webfont.svg#slim_joeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* BigJohn */
@font-face {
    font-family: 'big_johnregular';
    src: url('../fonts/BigJohn/big_john-webfont.eot');
    src: url('../fonts/BigJohn/big_john-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BigJohn/big_john-webfont.woff2') format('woff2'),
         url('../fonts/BigJohn/big_john-webfont.woff') format('woff'),
         url('../fonts/BigJohn/big_john-webfont.ttf') format('truetype'),
         url('../fonts/BigJohn/big_john-webfont.svg#big_johnregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* == http://www.fontsquirrel.com/fonts/amble */

/* Amble Regular */
@font-face {
    font-family: 'ambleregular';
    src: url('../fonts/Amble/Regular/Amble-Regular-webfont.eot');
    src: url('../fonts/Amble/Regular/Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble/Regular/Amble-Regular-webfont.woff') format('woff'),
         url('../fonts/Amble/Regular/Amble-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Amble/Regular/Amble-Regular-webfont.svg#ambleregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Amble Bold */
@font-face {
    font-family: 'amblebold';
    src: url('../fonts/Amble/Bold/Amble-Bold-webfont.eot');
    src: url('../fonts/Amble/Bold/Amble-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble/Bold/Amble-Bold-webfont.woff') format('woff'),
         url('../fonts/Amble/Bold/Amble-Bold-webfont.ttf') format('truetype'),
         url('../fonts/Amble/Bold/Amble-Bold-webfont.svg#amblebold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Amble Light */
@font-face {
    font-family: 'amblelight';
    src: url('../fonts/Amble/Light/Amble-Light-webfont.eot');
    src: url('../fonts/Amble/Light/Amble-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble/Light/Amble-Light-webfont.woff') format('woff'),
         url('../fonts/Amble/Light/Amble-Light-webfont.ttf') format('truetype'),
         url('../fonts/Amble/Light/Amble-Light-webfont.svg#amblelight') format('svg');
    font-weight: normal;
    font-style: normal;
}

FontAwesome menyediakan file CSS, yang disebut font-awesome.css yang perlu ditempatkan di dalam folder css. Baik style.css dan font-awesome.css memerlukan referensi di dalam index.html seperti yang dapat Anda lihat dari cuplikan di bawah ini.

<!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/skeleton.css">
  <link rel="stylesheet" href="css/font-awesome.css">
  <link rel="stylesheet" href="css/style.css">

Setelah menambahkan referensi untuk file gaya, mari melompat ke css/style.css dan mulai menambahkan beberapa gaya default, menimpa default Skeleton. Hal pertama yang ingin saya lakukan adalah menambahkan box-sizing ke semua elemen sebagai berikut:

/* Personal Flavour */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

Sekarang mulai penulisan ulang tipografi. Karena desainer menambahkan font kustom dan kita telah mengubahnya menjadi font web, kita perlu menetapkannya ke judul, paragraf dan body. Tipografi memainkan peran penting saat merancang situs web; kita perlu memastikan bahwa kita memenuhi spesifikasi desainernya.

/* Typography */

body {
  font-size: 16px;
  letter-spacing: .05em;
  color: #222222;
  font-family: "amblelight", "Raleway", Helvetica, Arial, sans-serif;
}
h1, h3{
  font-family: "big_johnregular", "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h4 {
  font-size: 22px;
}
h3 {
  font-size: 28px;
}

Seperti yang bisa Anda lihat dari potongannya, h1 dan h3 berbagi font-family yang sama, BigJohn. Kita juga perlu membuat beberapa perubahan untuk tipografi body, seperti font-size, letter-spacing, color dan font-family.

Jika Anda ingat dari bagian pertama, saat kita menulis HTML, kita membuat beberapa kelas utilitas kustom ke elemen tengah, dan juga kelas separator yang memiliki dua warna berbeda, #222 (abu-abu gelap) dan #d87843 (oranye). Untuk memusatkan elemen, kita akan memposisikannya secara absolute dan menggunakan properti transform untuk memposisikannya dengan benar.

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.vertical-centered {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
}

Idenya di sini adalah bahwa dibutuhkan dimensi elemen saat ini dan memindahkannya. Misalnya, translateY(-50%) akan memindahkan elemen ke atas sebesar 50% dari tingginya.

Pada tutorial sebelumnya, kita membuat elemen dengan kelas separator untuk membuat garis dari desainnya. Gayanya sangat minim, tapi triknya disini adalah kita menggunakan pseudo element :before agar membuatnya terlihat. Kelas separator hanyalah penolong untuk jarak dan keselarasan teks.

/* Separator */

.separator {
  position: relative;
  margin-bottom: 1.7em;
  padding-bottom: 1.7em;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  color: inherit;
}
.separator:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 86px;
  height: 2px;
  background-color: #222;

  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
.separator.orange:before {
  background-color: #d87843;
}

Skeleton dilengkapi dengan gaya yang telah ditentukan untuk tombol:

Tombol SkeletonDalam desain kita ada dua jenis tombol yang berbeda, salah satunya memiliki garis tepi dan yang lainnya dibulatkan untuk tombol putar dari bagian video.

/* Button inverted */

.button.inverted {
  font-size: inherit;
  padding: 25px 70px;
  color: white;
  height: auto;
  border: 3px solid white;
  text-transform: none;
  font-size: 26px;
  font-family: "ambleregular";
}

.button.inverted:hover {
  background: white;
  color: #222;
}

.button.circle {
  padding: 0;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  border-radius: 50%;
  text-align: center;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  box-sizing: content-box;
}

Kelas tambahan untuk membuat tombol yang bergaris tepi adalah terbalik, dan memiliki latar belakang transparan dan #222 untuk color dan border. Pada hover, warna latar belakangnya adalah #222 dan warna teksnya adalah white. Saya juga menambahkan padding substansial untuk keperluan jarak dan desain.

Gaya Default untuk Bagian-bagian

Jika Anda ingat, setiap bagian memiliki nama kelas yang berbeda yang akan kita targetkan sekarang. Keseluruhan ide di sini adalah bahwa setiap bagian harus memiliki background-color atau background-image.

Selain itu, bagian-bagian dengan background-image, untuk menghindari pengulangan, memiliki kelas lain featured-bg-image yang pada dasarnya menentukan posisi background-image, ukuran dan opacity, dan menciptakan efek background-cover yang akan meregangkan gambar di seluruh ukuran kontainer.

Setiap bagian memiliki padding 80px untuk bagian top dan bottom dan 0px untuk left dan right.

/* =Section general styling
-------- */

section {
  text-align: center;
  padding: 80px 0;
}

/*

  Section with featured background image. Every section which will have this
  class will get the effect with a background cover.

*/

.featured-bg-image {
  position: relative;
  background-color: #222222;
  color: white;
  min-height: 500px;
}

.featured-bg-image:before {
  content: '';
  position: absolute;
  top: 0; right: 0; left: 0; bottom: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: .35;
}

.help:before {
  background: url("../images/help_bg_image.jpg");
}

.creativity:before {
  background: url("../images/creativity_bg_image.jpg");
  background-position: 50% 0;
}

.quote:before {
  background: url("../images/quote_bg_image.jpg");
}

.video-iframe{
  position: absolute;
  left: 0; top: 0; bottom: 0; right: 0;
  height: 100%;
  width: 100%;
  display: none;
}

.video:before {
  background: url("../images/video_bg_image.jpg");
}

.clients {
  background-color: #f4f4f4;
}

.footer {
  background-color: #222222;
  color: white;
}

Navigasi

Navigasi berasal dari ikon hamburger dan unordered list dari tautan. Navigasi adalah fixed, untuk tetap di atas segalanya saat bergulir. Ini memiliki lebar 320px dan tinggi 100%. Untuk menempatkan navigasi di luar situs web, kita menggunakan properti transform translate (yang juga kita gunakan untuk elemen tengah) tapi kali ini kita translate 100% dari width-nya, jadi tidak akan terlihat.

Tautan di dalam navigasi memiliki teks huruf besar, color white dan width 100%. Saya juga menghapus text-decoration yang ada pada tautan dan membuat font-weight bold.

Ikon hamburger memiliki font-size 30px dan color white, dengan padding 20px di sekelilingnya. Saya juga menambahkan efek transisi untuk background-color dan kondisi active. Sesuatu yang ingin saya fokuskan lebih jauh adalah penempatan ikon hamburger, karena seperti yang dapat Anda lihat dari desainnya, ia berada "di luar" navigasi. Solusi cepat untuk ini adalah menempatkannya absolute dan left 100%. left: 100% mewakili lebar navigasi, jadi sekarang kita bisa menambah lebar navigasi dan ikon akan selalu berada di luarnya.

/* =Navigation
-------- */

.navigation {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  height: 100%;
  z-index: 3;
  width: 320px;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);

  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.navigation.active {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.navigation ul {
  list-style: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0;
  background: #222;
}
.navigation ul li {
  display: block;
  text-align: center;
  margin: 0;
  padding: 0;
}
.navigation ul li a {
  display: block;
  height: 100%;
  padding: 10px 0;

  text-decoration: none;
  text-transform: uppercase;
  color: white;
  font-weight: 900;
}

.navigation ul li a.current,
.navigation ul li a:hover {
  color: #222;
  background-color: white;
}

.navigation .menu-icon {
  color: white;
  font-size: 30px;
  line-height: 1em;

  position: absolute;
  left: 100%;
  padding: 20px;

  -webkit-transition: all .15s ease-in-out;
  -moz-transition: all .15s ease-in-out;
  -ms-transition: all .15s ease-in-out;
  -o-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
}

.navigation .menu-icon.active {
  background-color: rgba(0,0,0, .3);
}
.navigation .menu-icon:hover {
  color: #222;
  background-color: transparent;
}

Bagian Hero

Bagian hero mewarisi gaya yang sama dengan bagian dengan gambar latar belakang unggulan, tapi sekarang kita ingin memiliki pendekatan yang berbeda, karena ada banyak gaya untuknya. Ini terdiri dari background-image sebagai latar belakang, background-color sebagai pengisi warna, gradient-overlay dan tinggi yang berbeda: 500px.

Efek gradient-overlay dibuat dengan pseudo element (:after) dibuat menggunakan Gradient CSS3. Saya membuat efek ini karena memberi kita fleksibilitas untuk mengubah estetika gambar tanpa membuka Photoshop.

/* =Hero
-------- */

.hero {
  padding: 0;
  min-height: 500px;
  text-align: center;
  position: relative;
  background-color: #d56d4d; /* layer fill content */
  color: white;
}
.hero-image {
  background: url("../images/hero_bg_image.jpg") no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: .9;
}
.hero-image:after {
  content: '';
  opacity: .87; /* layer alpha */
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSIxMDAlIiB5MT0iNTAlIiB4Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIiB5Mj0iNTAlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiNDI0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VmYWI0YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); /* gradient overlay */
  background-image: -moz-linear-gradient(right, #bb4242 0%, #efab4a 100%); /* gradient overlay */
  background-image: -o-linear-gradient(right, #bb4242 0%, #efab4a 100%); /* gradient overlay */
  background-image: -webkit-linear-gradient(right, #bb4242 0%, #efab4a 100%); /* gradient overlay */
  background-image: linear-gradient(right, #bb4242 0%, #efab4a 100%); /* gradient overlay */
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}
.hero h2 {
  font-size: 24px;
}

.hero p {
  padding: 0 15%;
}
.hero .separator:before {
  background-color: white;
}

Bagian "Contact us"

Bagian "Contact us" dibuat dari dua subbagian; satu untuk kiri, satu untuk sisi kanan, dan memiliki warna #f2f2f2 sebagai warna latar belakang. Sisi kiri memiliki padding 70px di sekelilingnya dan latar belakang transparan. Item daftar social-links di-float, list style none dan 10px untuk margin-right agar menambahkan spasi di antara item.

Bentuknya sendiri tidak memiliki terlalu banyak gaya (selain 70px untuk padding dan warna latar belakang) karena Skeleton telah menangani hal itu untuk kita.

/*Contact*/

.contact-us {
  background-color: #f2f2f2;
  text-align: left;
}
.contact-us-details {
  padding: 70px;
}
.contact-us-details h5 {
  font-size: 2rem;
}
.contact-us-details .social-links a {
  color: #222;
  display: block;
}

.contact-us-details .social-links li {
  list-style: none;
  float: left;
  font-size: 24px;
  margin-right: 10px;
}
.contact-us-details .social-links li:last-child {
  margin-right: 0;
}
.contact-us-form {
  padding: 70px;
  background-color: #e4e4e4;
}
.contact-us .row {
  margin: 0;
}

Bagian Work

Filter Work

Item filter Work memiliki "SlimJoe" untuk font-family, teksnya adalah huruf besar, ukuran font 18px dan 0.5em untuk margin kiri dan kanan agar menciptakan ruang di antara keduanya. Status active memiliki font-family yang berbeda, "BigJohn" untuk membedakannya dari sisa item saat aktif.

/* Work Filters */

.work-filters {
  list-style: none;
}
.work-filters li {
  display: inline-block;
  margin: 0 .5em;
  font-size: 18px;
  text-transform: uppercase;
  font-family: "slim_joeregular";
}
.work-filters li a {
  color: inherit;
  text-decoration: none;
}
.work-filters li.active {
  font-family: "big_johnregular"
}

Item work dan detail work

Item work memiliki tinggi tetap 360px dan 33% untuk lebar, memberi kita grid dengan tiga item per baris. Ruang "palsu" antar item dibuat dengan border yang diterapkan pada setiap item.

Detail work lebih merupakan keterangan untuk setiap item, diregangkan di sepanjang item work dengan posisi absolute, dan 0px untuk kiri, kanan, atas, dan bawah. Ini juga memiliki latar belakang dengan opacity .75, menciptakan efek overlay karena berada di atas gambar. Secara default, kontainer detail tersembunyi, dan bila item work di-hover, ia menjadi terlihat–dianimasikan melalui transisi CSS.

/* Work items */

.work-items {
  list-style: none;
  width: 100%;
  display: inline-block;
}
.work-items li {
  position: relative;
  overflow: hidden;
  height: 360px;

  /* important because we need to overwrite the default skeleton */
  margin: 0!important;
  width: 33%;
  border: 10px solid white;

  position: relative;
}
.work-items li:nth-child(4n) {
  margin-left: 0;
}
.work-items li img{
  width: auto;
  height: 100%;
  display: block;
}
/* Work detail */

.work-detail {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;

  opacity: 0;
  background: rgba(0,0,0,.75);
  color: white;

  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.work-detail h3 {
  font-size: 16px;
  letter-spacing: .05em;
}
.work-detail p {
  font-size: 20px;
  text-transform: capitalize;
  padding-left: 20px;
  padding-right: 20px;
}

.work-items li:hover .work-detail{
  opacity: 1;
  box-shadow: inset 0 0 0 10px #222;
}

Bagian Clients

Bagian Clients adalah daftar inline sederhana. Satu-satunya hal yang layak disebutkan di sini adalah bahwa saya menggunakan filter CSS grayscale untuk desaturate gambarnya. Lebar untuk setiap item adalah 18% dan 2% untuk jarak kanan.

/* Clients */

.clients {
  list-style: none;
}
.clients li {
  display: inline-block;
  width: 18%;
  margin-right: 2%;
}
.clients li:last-child {
  margin-right: 0;
}
.clients li img {
  max-width: 100%;
  height: auto;
  display: block;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  filter: grayscale(100%);
}

Bagian "About"

Bagian About, mewarisi penataan bagian work, kecuali untuk tinggi item, 300px.

/* About */

.people-list {
  list-style: none;
  margin: 70px 0;
  width: 100%;
}
.people-list li {
  position: relative;
  height: 300px;
  overflow: hidden;
}
.people-list li img {
  width: auto;
  height: 100%;
  display: block;
}

.people-list .people-hover {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.45);

  opacity: 0;

  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.people-list .people-hover a {
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
}

/* About people details */

.people-list .people-detail {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 0 20px;
  z-index: 1;
  color: white;
}
.people-list .people-detail h3 {
  font-size: 22px;
  margin-bottom: 0;
}
.people-list .people-detail p {
  font-size: 16px;
}

.people-list li:hover .people-hover{
  opacity: 1;
  box-shadow: inset 0 0 0 5px #222;
}

Item terakhir dari daftar memiliki gaya yang berbeda, karena tidak memiliki efek hover. Warna latar belakang adalah putih dan warna border sekitarnya yang berbeda.

/* Feature people hiring */

.people-list li.blank-feature{
  box-shadow: inset 0 0 0 3px #222;
}
.people-list li.blank-feature img {
  visibility: hidden;
}
.people-list li.blank-feature h3 {
  font-size: 26px;
}

Bagian “Services”

Gambar untuk services setinggi 150px dan margin bawah 20px. Seperti yang dapat Anda lihat dari kodenya, gambar memiliki display block yang berbeda dan 100% untuk max-width.

/* Services */

.services {
  list-style: none;
  margin: 70px 0;
}

.services .service-image {
  height: 150px;
  margin-bottom: 20px;
}

.services .service-image img{
  display: block;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

.services p {
  font-size: 16px;
  letter-spacing: 0;
}

Sifat Responsif

Karena kita menggunakan sistem grid Skeleton, situs web responsif sudah termasuk, namun masih ada beberapa masalah penataan untuk ukuran font, margin, padding dan penjajaran.

Seperti yang dapat Anda lihat dari kode di bawah ini, padding tombol lebih kecil untuk tampilan mobile.

Untuk tabel, item work harus memiliki lebar 100% dan item people harus dua buah per baris. Kita juga perlu mengurangi padding untuk bagian contact dan social link akan menjadi lebar 33% dan sejajar di tengah.

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Larger than mobile */
@media (max-width: 400px) {
  .button.inverted {
    padding: 15px;
  }
}
@media (min-width: 400px)  and (max-width: 750px) {
  .work-items li.isotope-item.columns {
    width: 100%;
  }
  .people-list li.people-list-item.columns {
    width: 46%;
    margin: 2%;
    box-sizing: content-box;
  }
  .contact-us-details {
    padding: 70px 25px;
    text-align: center;
  }
  .contact-us-details .social-links li {
    text-align: center;
    width: 33%;
    margin: 0;
  }
  .contact-us-details h5 {
    font-size: 1.7rem;
  }

}

Kesimpulan

Jika Anda memanfaatkan kerangka Skeleton, seperti yang dapat Anda lihat dari tutorial ini, sebagian besar pekerjaan berat dilakukan dengan mudah, memberi Anda ketenangan pikiran untuk sebagian besar dari apa yang Anda bangun.

Benar, Anda perlu menerapkan font familly yang berbeda, ukuran font, jarak dan, bila diperlukan, gaya tombol yang berbeda tapi hanya tentang itu.

Itu untuk pelajaran ini, saya harap Anda menikmatinya, dan saya tak sabar untuk bertemu dengan Anda di tutorial berikutnya dimana kita akan menerapkan JavaScript. Sampai jumpa!