freeCodeCamp 2018 Personal Portfolio滿分答案

weixin_45628746發表於2020-10-19
<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>

相關文章