diff --git a/css2021.yml b/css2021.yml
new file mode 100644
index 0000000..6cb65c2
--- /dev/null
+++ b/css2021.yml
@@ -0,0 +1,464 @@
+locale: id-ID
+translations:
+  ###########################################################################
+  # Introduction
+  ###########################################################################
+
+  - key: general.results.description
+    t: Edisi 2021 dari survey pengembang tahunan tentang tren-tren terbaru di ekosistem CSS.
+
+  - key: introduction.css2021
+    t: |
+
+      <span class="first-letter">A</span>pakah tukang kayu harus belajar cara baru untuk memotong kayu setiap beberapa tahu sekali? Apakah pelukis merasa seperti penipu karena masih memakai cat minyak? Atau hanya perasaan kita sebagai pengembang front-end yang harus merasakan perubahan ini?
+
+      Dengan adanya container queries dan lain-lain yang akan dirilis, semua terasa bergerak begitu cepat. Dan karena kita juga perlu mengikuti perkembangannya, kami menyisihkan waktu untuk memberikan hasil survei ini beberapa kemampuan baru!
+
+      Yang berarti sekarang kita bisa melakukan referensi silang pada dua titik data, contohnya gaji tahunan berdasarkan tingkat pengalaman; atau jenis kelamin berdasarkan negara. Anda akan melihat beberapa penjabaran ini dalam hasil survei, tapi kami mengajak Anda untuk menjelajahi data lebih jauh dengan menggunakan [API kami](https://api.stateofjs.com/) atau dengan [mengunduh data kami](https://www.kaggle.com/sachag/state-of-css). Beritahu kami jika ingin membuat visualisasi datamu sendiri!
+
+      Baiklah, mari kita lihat apa yang disiapkan CSS untuk tahun ini!
+
+      *Catatan: kami mengundur survei [State of JavaScript](http://stateofjs.com/) 2021 ke bulan Januari 2022 dikarenakan kurangnya waktu. sampai jumpa setelah liburan!*
+
+      <span class="conclusion__byline">– Sacha Greif</span>
+
+  ###########################################################################
+  # Tshirt
+  ###########################################################################
+
+  - key: sections.tshirt.title
+    t: Kaos
+
+  - key: sections.tshirt.description
+    t: |
+      ## Dukung Survei ini Dengan Kaos State Of CSS 
+
+      Di antara kualitas video yang buruk, kaset yang besar, dan harus memutar balik, tidak ada yang dapat dirindukan dari era VHS. Namun satu hal yang kami *rindukan* adalah visual 90an yang dulu menghiasi kaset VHS yang kosong. 
+
+      Namun, berkat dari seniman bertalenta Christopher Kirk-Nielsen anda dapat menikmati semua kekerenan retro ini sambil juga merayakan kecintaan anda akan CSS dalam waktu yang bersamaan!
+
+  - key: tshirt.about
+    t: Tentang kaos ini
+
+  - key: tshirt.description
+    t: |
+      Kami menggunakan kaos tri-blend berkualitas tinggi yang sangat lembut dengan bentuk ramping yang dicetak dari mitra kami di Cotton Bureau.
+
+  - key: tshirt.getit
+    t: Dapatkan
+
+  - key: tshirt.price
+    t: USD $29 + pengiriman
+
+  - key: tshirt.designer.heading
+    t: Tentang perancang kaos
+
+  - key: tshirt.designer.name
+    t: Christopher Kirk-Nielsen
+
+  - key: tshirt.designer.bio
+    t: |
+      Berasal dari Prancis namun sekarang tinggal di Amerika Serikat, Chris bukan hanya seorang pengembang front-end yang menakjubkan, namun juga seorang ilustrator bertalenta dengan spesialisasi dalam bidang visual retro. Kami mendorong anda untuk melihat [desain kaos lainnya darinya](https://chriskirknielsen.com/designs)!
+
+  ###########################################################################
+  # Sections Introductions
+  ###########################################################################
+
+  - key: sections.user_info.description
+    t: |
+      Survei tahun ini mencapai **8,714** pengembang di seluruh dunia, dan untuk membantu menyorot perbedaan suara dan wawasan yang mendalam, kami melakukan upaya khusus untuk menyediakan cara baru dalam penjabaran data.
+
+  - key: sections.features.description
+    t: |
+      Sifat dinamis CSS tidak menunjukkan tanda-tanda akan berhenti, sebagai pengembang yang berusaha untuk mengadopsi sebagian fitur baru sembari menantikan inovasi-inovasi baru untuk beberapa tahun ke depan.
+
+  - key: sections.technologies.description
+    t: |
+      Dengan hampir 50% responden yang senang menggunakan satu atau lebih pustaka CSS-in-JS, bisa dikatakan kalau kategori mulai unjuk gigi. Mungkin kedua sisi dunia front-end tidak terpisah begitu jauh?
+
+  - key: sections.tools_others.description
+    t: |
+      Memilih sebuah teknologi kerap kali melalui rangakain pilihan sulit antara prioritas, dan tahun ini kita berusaha menangkap proses ini menggunakan pertanyaan format bracket.
+
+  - key: sections.environments.description
+    t: |
+      Aksesibilitas selalu jadi pertimbangan saat mengembangkan aplikasi berbasis web, 
+      tetapi banyak pengembang yang sekarang sadar akan pentingnya mendahulukan fitur itu.
+
+  - key: sections.resources.description
+    t: |
+      Blog yang disorot, podcast, dan situs web adalah awal yang bagus, tapi tahun ini kami memutuskan untuk selangkah lebih jauh lagi 
+      dan bahkan menyorot orang-orang yang membangun komunitas CSS!
+
+  - key: sections.opinions.description
+    t: |
+      Baik itu hal yang merepotkan, atau fitur hilang yang diharapkan untuk segera bisa digunakan, 
+      ini adalah kesempatan Anda untuk membagikan keluhan seputar CSS!
+
+  ###########################################################################
+  # Charts
+  ###########################################################################
+
+  - key: options.features_categories.layout
+    aliasFor: sections.layout.title
+  - key: options.features_categories.shapes_graphics
+    aliasFor: sections.shapes_graphics.title
+  - key: options.features_categories.interactions
+    aliasFor: sections.interactions.title
+  - key: options.features_categories.typography
+    aliasFor: sections.typography.title
+  - key: options.features_categories.animations_transforms
+    aliasFor: sections.animations_transforms.title
+  - key: options.features_categories.accessibility
+    aliasFor: sections.accessibility.title
+  - key: options.features_categories.media_queries
+    aliasFor: sections.media_queries.title
+  - key: options.features_categories.other_features
+    aliasFor: sections.other_features.title
+
+  ###########################################################################
+  # Notes
+  ###########################################################################
+
+  - key: blocks.gender.note
+    t: |
+      Jika Anda tertarik untuk mempelajari lebih lanjut, kami telah [menulis sebuah postingan blog](https://dev.to/sachagreif/is-our-survey-biased-against-women-49oj) tentang dinamika jenis kelamin pada survei.
+
+  - key: blocks.css_missing_features.note
+    t: |
+      Anda dapat menjelajahi keseluruhan dataset jawaban pertanyaan ini pada [proyek sampingan ini](https://whatsmissingfromcss.com/).
+
+  - key: blocks.source.note
+    t: >
+
+      Bagan ini menggabungkan campuran dari referensi, parameter URL, dan jawaban bebas. 
+
+      - State of JS: mailis [State of JS](https://stateofjs.com).
+
+      - State of CSS: mailis State of CSS; juga mencocokkan `email`, `dengan email`, dll.
+
+      - Work: mencocokkan `kerja`, `kolega`, `rekan kerja`, dll.
+
+  ###########################################################################
+  # Awards
+  ###########################################################################
+
+  - key: award.feature_adoption_delta_award.comment
+    t: Dengan peningkatan **{value}** pada tahun 2021, CSS comparison functions telah menjadi bagian kunci dari setiap toolkit pengembang CSS.
+
+  # - key: award.tool_usage_delta_award.comment
+  #   t: No other tool comes even close to Tailwind CSS's dramatic **{value}** progression over the last year.
+
+  - key: award.tool_satisfaction_award.comment
+    t: PostCSS meraih posisi pertama lagi dengan rasio retensi **{value}**.
+
+  - key: award.tool_interest_award.comment
+    t: Dengan rasio **{value}**, menjadikan CSS Modules sebagai yang paling menarik perhatian para pengembang pada tahun ini.
+
+  # - key: award.most_write_ins_award.comment
+  #   t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall.
+
+  ###########################################################################
+  # Conclusion
+  ###########################################################################
+
+  - key: conclusion.css2021
+    t: |
+      <span class="first-line">Caramu menulis CSS akan segera berubah</span>
+
+      Dalam beberapa tahun ini, terdapat banyak inovasi dalam gaya menulis untuk web yang terjadi di tempat lain: pada preprocessor, Kerangka kerja JavaScript, atau compiler.  Untuk memastikan, CSS sendiri juga mendapat peningkatan seperti [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) atau [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Akan tetapi kita masih menggunakan pustaka dan pembantu lainnya dalam akitivitas sehar-hari. 
+
+      Tapi akan datang sebuah perubahan. Inti bahasa CSS akan berguncang dan mengalami pembaharuan, dan kita berada di garda terdepan dari mempercepat evolusinya.
+
+      [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) akan membawa era baru dalam desain responsive, dan [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) akan membuat kerangka kerja, tema dan kelola basis kode yang kompleks jadi jauh lebih mudah.
+
+      Kalau kita perhatikan lebih dalam, kita juga bisa melihat [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) yang akan dirilis, yang membolehkan kita menggabungkan media, container dan supports queries menjadi kesatuan at-rule.
+
+      Semoga saja, 2022 adalah tahun di mana kita akhirnya melihat pergerakan dalam native CSS nesting. Kita yang bekerja memakai tool seperti Sass dan PostCSS sudah tidak bisa membayangkan cara kerja yang lain.
+
+      Dengan adanya semua ini berarti 2022 kemungkinan akan menjadi tahun di mana terjadi perubahan dari cara menulis dasar CSS. Ini adalah masa yang mendebarkan, dan kita semua menantikan semua implementasi luar biasa yang akan datang.
+
+  - key: conclusion.css2021.bio
+    t: Pengembang Web dan Pencipta Polypane
+
+  ###########################################################################
+  # Picks
+  ###########################################################################
+
+  - key: picks.my_pick
+    t: "Pilihan 2021 Saya: "
+  - key: picks.intro
+    t: Kita menanyakan berbagai anggota dari anggota komunitas CSS untuk membagikan “pilihan tahun ini” mereka
+
+  - key: picks.george_francis.name
+    t: CSS Paint API
+  - key: picks.george_francis.bio
+    t: Pengembang, penulis, dan seniman generatif.
+  - key: picks.george_francis.description
+    t: |
+      Paint API membolehkan kita untuk membuat gambar secara terprogram, 
+      dan memakainya pada CSS kita. Itu membuka dunia kreatifitas baru, 
+      dan aku sangat bersemangat untuk itu!
+
+  - key: picks.cassidy_williams.name
+    t: Lynn Fisher
+  - key: picks.cassidy_williams.bio
+    t: Developer advocate, pengajar, dan penasihat startup.
+  - key: picks.cassidy_williams.description
+    t: |
+      Saya pasti akan memilih Lynn Fisher. Dia terus membuat kejutan dan membuat komunitas CSS kagum dengan proyek dan eksperimen kreatifnya, 
+      dan aku suka mengetahui banyak orang yang bisa darinya!
+
+  - key: picks.josh_comeau.name
+    t: Amelia Wattenberger
+  - key: picks.josh_comeau.bio
+    t: Pengembang aplikasi dan pencipta [CSS for JavaScript Developers](https://css-for-js.dev/).
+  - key: picks.josh_comeau.description
+    t: |
+      Amelia membuat postingan blog yang menakjubkan seputar CSS dan JS. 
+      Periksa postingannya tentang cara kerja persentase di CSS!
+
+  - key: picks.kevin_j_powell.name
+    t: Stephanie Eckles
+  - key: picks.kevin_j_powell.bio
+    t: CSS Evangelist
+  - key: picks.kevin_j_powell.description
+    t: |
+      Aku terus takjub pada inisiatif Stephanie dalam membagikan pengetahuan tentang teknik CSS modern, 
+      dan juga antusiasnya pada CSS.
+
+  - key: picks.manuel_matuzovic.name
+    t: aspect-ratio
+  - key: picks.manuel_matuzovic.bio
+    t: Pengembang Front-end dari Vienna, dan pencipta [htmhell.dev](https://htmhell.dev).
+  - key: picks.manuel_matuzovic.description
+    t: |
+      Semua prambanan besar sudah mendukung aspect-ratio sejak 2021. 
+      Awalnya Saya meremehkannya, 
+      tapi ternyata ada banyak situasi di mana ini sangat berguna.
+
+  - key: picks.gift_egwuenu.name
+    t: Kevin Powell
+  - key: picks.gift_egwuenu.bio
+    t: Pengembang Frontend dan Pembuat konten
+  - key: picks.gift_egwuenu.description
+    t: |
+      Kevin membuat konten CSS di YouTube dan saya sangat suka menonton videonya. 
+      Dia hebat dalam menjelaskan konsep CSS 
+      dengan mudah dan menyenangkan.
+
+  - key: picks.eric_w_bailey.name
+    t: Miriam Suzanne
+  - key: picks.eric_w_bailey.bio
+    t: Inclusive Design dan \#a11y advocate.
+  - key: picks.eric_w_bailey.description
+    t: |
+      CSS akan berubah dari bagus menjadi luar biasa. 
+      Pekerjaan Miriam dalam Container Queries dan Cascade Layers 
+      akan mengubah cara penulisan CSS.
+
+  - key: picks.samuel_kraft.name
+    t: Vanilla Extract
+  - key: picks.samuel_kraft.bio
+    t: Frontend & design
+  - key: picks.samuel_kraft.description
+    t: |
+      Lately I've loved working with Vanilla Extract, it's like CSS Modules but 
+      fully typed with a magical developer experience.
+
+  - key: picks.sacha_greif.name
+    t: Open Props
+  - key: picks.sacha_greif.bio
+    t: State of JS and State of CSS creator
+  - key: picks.sacha_greif.description
+    t: |
+      It's really cool to see the feedback loop between new CSS features and new 
+      projects taking advantage of them! And I think Adam Argyle's Open Props 
+      is a great use of Custom Properties (CSS variables).
+
+  - key: picks.ahmad_shadeed.name
+    t: Container Queries
+  - key: picks.ahmad_shadeed.bio
+    t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com)
+  - key: picks.ahmad_shadeed.description
+    t: |
+      CSS container queries again! We got the chance to play with them in a browser. 
+      Thanks to Miriam Suzanne for moving this forward! 
+      I can't wait to use them without a flag.
+
+  # - key: picks.georgedoescode.name
+  #   t:
+  # - key: picks.georgedoescode.bio
+  #   t:
+  # - key: picks.georgedoescode.description
+  #   t: |
+
+  - key: picks.adam_argyle.name
+    t: CSS Noise
+  - key: picks.adam_argyle.bio
+    t: CSS at Google
+  - key: picks.adam_argyle.description
+    t: |
+      CSS generated texture and randomness makes for unique and 
+      interesting paint jobs in your design. 
+      Noise tools have made the technique accessible.
+
+  - key: picks.stephanie_walter.name
+    t: Miriam Suzanne
+  - key: picks.stephanie_walter.bio
+    t: UX Researcher and CSS lover
+  - key: picks.stephanie_walter.description
+    t: |
+      Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries.
+
+  - key: picks.michelle_barker.name
+    t: “Building a Color Scheme” by Adam Argyle
+  - key: picks.michelle_barker.bio
+    t: Senior Front End Developer
+  - key: picks.michelle_barker.description
+    t: |
+      I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables.
+
+  # - key: picks.christianoliff.bio
+  #   t: Front-end developer for Trimble MAPS
+  # - key: picks.christianoliff.description
+  #   t: |
+  #       One thing I've really started using and appreciating this year though is Purge CSS- an awesome tool for removing unused CSS. It can greatly reduce the size of your CSS, and its fast and easy to use.
+
+  - key: picks.kilian_valkhof.name
+    t: prefers-reduced-data
+  - key: picks.kilian_valkhof.bio
+    t: Web developer and creator of Polypane
+  - key: picks.kilian_valkhof.description
+    t: |
+      We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do!
+
+  # - key: picks.piccalilli_.bio
+  #   t: Freelance designer & dev who runs piccalil.li
+  # - key: picks.piccalilli_.description
+  #   t: |
+  #       This blog is an absolute gold mine of CSS knowledge. Michelle is a CSS legend and every post or tutorial they write is heaped with useful content.
+
+  # - key: picks.piccalilli_.bio
+  #   t: Freelance designer & dev who runs piccalil.li
+  # - key: picks.piccalilli_.description
+  #   t: |
+  #       This blog is an absolute gold mine of CSS knowledge. Michelle is a CSS legend and every post or tutorial they write is heaped with useful content.
+
+  # - key: picks.sarasoueidan.bio
+  #   t: Independent UI/design engineer
+  # - key: picks.sarasoueidan.description
+  #   t: |
+  #       My pick is a person, namely Rachel Andrew. She taught CSS Grid to a whole generation of developers.
+
+  # - key: picks.5t3ph.bio
+  #   t: Software Engineer @ Microsoft
+  # - key: picks.5t3ph.description
+  #   t: |
+  #       In this conference talk, Manuel Matuzovic provides thoughtfully
+  #       crafted examples that are engaging, approachable, and actionable.
+
+  # - key: picks.hugogiraudel.bio
+  #   t: Non-binary accessibility & diversity advocate
+  # - key: picks.hugogiraudel.description
+  #   t: |
+  #       Fela is an amazing piece of software.
+  #       It’s pretty powerful, relatively easy to use and very performant
+
+  # - key: picks.foolip.bio
+  #   t: Software Engineer @ Google
+  # - key: picks.foolip.description
+  #   t: |
+  #       Sergio has recently fixed lots of Flexbox in WebKit and even some in Chromium,
+  #       notably bringing flex gap to WebKit,
+  #       which means that soon it will be available on all modern browsers.
+
+  # - key: picks.jina.bio
+  #   t: Design systems advocate and practitioner
+  # - key: picks.jina.description
+  #   t: |
+  #       The media query to reduce motion, which helps avoid
+  #       triggering dizziness and discomfort.
+
+  ###########################################################################
+  # Sponsors
+  ###########################################################################
+
+  - key: sponsors.frontendmasters.description
+    t: Advance your skills with in-depth, modern front-end engineering courses.
+  - key: sponsors.polypane.description
+    t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease.
+  - key: sponsors.google_chrome.description
+    t: Thanks to the Google Chrome team for supporting our work.
+
+  ###########################################################################
+  # FAQ/About
+  ###########################################################################
+
+  - key: about.content
+    t: >
+      The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 responses. The survey is run by me, [Sacha Greif](https://sachagreif.com/), with help from a team of open-source contributors and consultants. 
+
+
+      This year's logo and t-shirt were designed and animated by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/).
+
+      ### Survey Goals
+
+      This survey, along with the [State of JavaScript](https://stateofjs.com/) survey, was created to identify upcoming trends in the web development ecosystem in order to help developers make technological choices. 
+
+
+      As such, these surveys are focused on anticipating what's coming over the next few years rather than analyzing what's popular now, which is why the features or technologies that are currently most widespread are not always included. 
+
+      ### Survey Design
+
+      The survey was designed in part based on last year's survey, with an open feedback period where the survey outline was discussed [on GitHub](https://github.com/StateOfJS/StateOfCSS-2020/issues/8). 
+
+      All survey questions were optional. 
+
+      ### Survey Audience
+
+      The survey was openly accessible online and respondents were not filtered or selected in any way. Respondents were primarily a mix of respondents from past surveys (alerted through a dedicated mailing list) and social media traffic. 
+
+      ### Representativeness & Inclusivity
+
+      While we believe it's important to give a voice to every community, the reality is that an open survey like this one will always struggle to properly represent everybody, especially when operating through systems that already carry their own inherent biases. 
+
+
+      In order to counter-balance this, we are implementing three distinct strategies:
+
+
+      - **Outreach**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current audience.
+
+      - **Data Analysis**: through features like facets and variants, we're always trying to make it easier to surface the voices of any demographic segment, no matter how minoritized it might be in our data. 
+
+      - **Barrier Lowering**: making the survey too long, inaccessible, slow to load, English-only, etc. can all contribute to imposing an "effort tax" that cuts off the parts of the community that can't afford to pay it. Fixing these issues can lower the barrier to entry and in the process make our audience more diverse. 
+
+      ### Project Funding
+
+      Funding from this project comes from a variety of sources:
+
+
+      - **T-shirt sales**. 
+
+      - **Sponsored links**: the links to recommended resources at the bottom of each page are provided by our partner [Frontend Masters](https://frontendmasters.com/).
+
+      - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey.
+
+
+      Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be greatly appreciated. I would especially like to work closely with more browser vendors, since they play such a central role in the web ecosystem.  
+
+      ### Technical Overview
+
+      You can find a more in-depth technical overview of how the surveys are run [here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb).
+
+      - **Data collection**: custom [Vulcan.js](http://vulcanjs.org/) app.
+
+      - **Data storage/processing**: MongoDB & MongoDB Aggregations.
+
+      - **Data API**: Node.js GraphQL API. 
+
+      - **Results Site**: [Gatsby](https://www.gatsbyjs.com/) React app.
+
+      - **Data Visualizations**: [Nivo](https://nivo.rocks/) React dataviz library. 
+
+      - **Type**: [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) and [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue).