高级网页设计学生挑战：Exoplanet 2K

Like some of the previous featured exercises, this piece is designed to challenge web designer students. The illustrated article - a short piece written on the discovery of the two thousandth planet outside our solar system - uses the CSS Shapes module and flexbox for the ideal layout conditions, although it’s entirely possible to complete it using more traditional methods.

像以前的一些特色练习一样 ，本作品旨在挑战网页设计师的学生。 插图文章-写了一篇关于发现太阳系外第二千个行星的简短文章-使用CSS Shapes模块和flexbox来实现理想的布局条件，尽管完全可以使用更传统的方法来完成它。

Instructions: using the Markdown content provided, create a valid HTML5 page that duplicates, as closely as possible, the web page shown in the screenshot exo-screen.jpg. Use your best judgement to make the page fully responsive; use Sass if possible. The following should be noted:

说明 ：使用提供的Markdown内容 ，创建一个有效HTML5页面，该页面尽可能地复制屏幕快照exo-screen.jpg中显示的网页。 根据您的最佳判断，使页面充分响应； 如果可能，请使用Sass 。 应注意以下几点：

• The typeface used for the headings is Moon, which is freely available. You will need to convert and embed this font in an appropriate method.

  标题使用的字体是Moon ，可以免费获得。 您将需要转换此字体并将其嵌入适当的方法中。

• The rest of the page is set in Avenir, with fallbacks provided to the closest matching common typefaces.
  页面的其余部分设置在Avenir中，并提供与最接近的匹配常用字体的备用。
• The background of the essay is #222, while the page background is black; the text color is white.
  文章的背景是＃222，页面的背景是黑色； 文字颜色为白色。

• You will need two images: Miridian VI and Occupied. You’ll need a bitmap editor to make changes to the images.

  您将需要两个图像： Miridian VI和Occupied 。 您将需要一个位图编辑器来更改图像。

You will need to make the following changes to the page:

您将需要对该页面进行以下更改：

1. Link the words “Mimas” and “James Web Space Telescope” in the article to appropriate resources on the web. The links should have the appearance of examples shown in the screenshot.
   将文章中的“ Mimas”和“ James Web Space Telescope”链接到网络上的适当资源。 链接的外观应如屏幕快照所示。
2. Provide appropriate definitions for the words SETI and COROT. This text should not appear on the web page by default, but should be available to the user.
   为单词SETI和COROT提供适当的定义。 默认情况下，该文本不应出现在网页上，但应可供用户使用。
3. The images will need to be edited and optimized appropriately before inclusion in the page.
   在将图像包含在页面中之前，需要对其进行适当的编辑和优化。

Time: You have 120 minutes to complete and submit this work.

时间 ：您需要120分钟才能完成并提交此作品。

When you are done: Compare your work to the example at Codepen.

完成后 ：将您的工作与Codepen上的示例进行比较 。

翻译自: https://thenewcode.com/998/Advanced-Web-Design-Student-Challenge-Exoplanet-2K