freeCodeCamp 2018 Personal Portfolio满分答案

<style> @media(max-width:200px){
     font-family:"宋体"; } #welcome-section{
     background-color:yellow;margin-top:0;top:0;height:465px;width:auto; } #divnav{
     position:fixed;margin:0;top:0; }</style>
<section id="welcome-section"><h1 align="center">欢迎区</h1><p align="center">Responsive Web Design Projects - Build a Personal Portfolio Webpage</p>
</section>
<div id="projects"><div class="project-tile" id="project01" align="center"><p>目标：使用 CodePen.io 搭建一个与这个功能上相似的 app：https://codepen.io/freeCodeCamp/full/zNBOYG。
在满足以下需求并能通过所有测试的前提下，你可以根据自己的喜好来美化你的 app。
你可以使用 HTML、JavaScript 以及 CSS 来完成项目，由于目前我们只学到了 CSS，因此建议你只使用 CSS 完成这个项目，顺便还可以巩固一下之前学到的内容。你也可以使用 Bootstrap 或者是 SASS。在当前的项目中，不推荐使用其他技术如 jQurey、React、Angular 或者是 Vue，因为一旦出现问题，风险自担。但在别的项目中我们仍有机会去使用不同的技术栈比如 React，我们会接受并尽力处理你在使用建议的技术栈过程中遇到的问题，编码愉快！</p></div><div class="project-tile" id="project02"></div><div class="project-tile" id="project03"></div><a href="#project01">goto_project01</a><div><p align="center">需求 1：我的作品集应该有一个 id 为welcome-section的欢迎区。
需求 2：欢迎区内应该有一个包含标题的h1元素。
需求 3：我的作品集应该有一个 id 为projects的项目区。
需求 4：项目区至少包含一个带有project-tile类的元素来保存项目。
需求 5：项目区至少包含一个链接到一个项目的链接。
需求 6：我的作品集应有一个 id 为navbar的导航栏。
需求 7：导航栏至少包含一个我可以跳转到本页另外区域的链接。
需求 8：我的作品集应有一个 id 为profile-link的链接，它能在新标签打开我的 GitHub 或者 FCC 作品集。
需求 9：我的作品集至少使用一次媒体查询。
需求 10：欢迎区的高度应该的与视口的高度保持一致。
需求 11：导航栏应保持在视口的顶部。</p></div><br>
</div>
<div id="divnav">
<nav id="navbar"><a href="#project01">goto_project01</a><a href="#project02">goto_project02</a><a href="#project03">goto_project03</a>
</nav></div>
<br>
<a href="https://github.cn" id="profile-link" target="_blank">goto_mygithub</a>