實戰一 Build a Tribute Page
目標: 設計一個類似於: http://codepen.io/FreeCodeCamp/full/wMQrXV的頁面。
規則1: 程式碼是開源的,你可以借鑑,但請不要抄襲。
規則2: 用你喜愛的任何庫來定製屬於你自己的風格,實現下面的功能
功能1: 你可以用圖片和文字來實現這個致敬頁面。
功能2: 你可以點選連結穿越到另一個網站,獲得關於這個主題的更多資訊。
CSS庫使用BootStrap
<div class="container"> <div class="jumbotron"> <div class="row"> <div class="col-xs-12"> <h1 class="text-center">Dr. Norman Borlaug</h1> <h2 class="blue-text text-center"><em>The man who saved a billion lives</em></h2> <div class="thumbnail">
<img class="img-box" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg"> <div class="text-center">Dr. Norman Borlaug, third from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger. </div></div></div> <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2"> <h3>Here's a time line of Dr. Borlaug's life:</h3> <ul> <li><strong>