Tailwind CSS 主页

展示

Google I/O 2022

Screenshot of the Google I/O 2022 home page. The header contains the Google I/O logo, the main navigation, and a language selector. The hero section contains an illustration of a blimp with 'IO22' written on the side. The blimp is towing a banner that says 'Thanks for joining'.
技术
Tailwind CSS, Preact
日期
网址
io.google/2022
访问网站

Google I/O 2022

谷歌举办的年度开发者大会。

Google I/O 是谷歌的年度开发者大会，会上会发布新的谷歌产品。Google I/O 2022 网站使用 Tailwind CSS 构建。

Screenshot of the Google I/O 2022 'Program' page. The header contains the Google I/O logo, the main navigation, and a language selector. The hero section contains an introduction paragraph and an illustration of a laptop with the number '22' on the screen.
展示 Google I/O 上所有会议的节目页面。
Screenshot of the Google I/O 2022 'FAQ' page. A list of FAQ categories is displayed on the left side of the screen. On the right side the 'General' category is shown with a list of questions such as 'When and where is Google I/) 2022?'.
一个包含可折叠常见问题解答项目的常见问题解答部分。从侧边栏，可以导航到常见问题解答的不同子部分。
Mobile screenshot of the Google I/O 2022 'Learning Lab' page. The header contains the Google I/O logo and a menu button. The hero contains a short introduction paragraph and an illustration of blocks stacked on top of each other. Below is a 'Workshops' section and the first video thumbnail can just be seen.
Mobile screenshot of the Google I/O 2022 program filters overlay. The overlay contains a list of filters such as 'Topic' and 'Level'. Each filter has a list of checkboxes.
Mobile screenshot of the Google I/O 2022 'Products' page. The header contains the Google I/O logo and a menu button. The hero contains a short introduction paragraph and an illustration of a mobile phone. Below is a list of products with icons, starting with 'Accessibility' and 'Android'.
Google I/O 网站在移动设备上的体验。
Screenshot of the Google I/O 2022 'Program' page. The page contains a list of videos with thumbnails and short descriptions, in three columns. On the left side of the screen there is a list of checkboxes that can be used to filter the list of videos.
在节目页面上展示的会议，并可按主题、级别和类型进行筛选。
Screenshot of the Google I/O 2022 'About' page. The header contains the Google I/O logo, the main navigation, and a language selector. The hero section contains an introduction paragraph and an illustration of some plain flags blowing in the wind.
Google I/O 网站上的关于页面。在整个网站中，英雄部分都有动画，访客可以暂停动画。