Project Exercise — a Tribute Page

发表于 更新于 分类于 ， ， ， 本文字数： 3.6k 阅读时长 ≈ 3 分钟

freeCodeCamp —- Responsive Web Dedign

Build a Tribute Page —— Test

Objective:

Build an app that is functionally similar to https://tribute-page.freecodecamp.rocks

User Stories:
  1. Your tribute page should have a main element with a corresponding id of main, which contains all other elements
  2. You should see an element with an id of title, which contains a string (i.e. text), that describes the subject of the tribute page (e.g. “Dr. Norman Borlaug”)
  3. You should see either a figure or a div element with an id of img-div
  4. Within the #img-div element, you should see an img element with a corresponding id="image"
  5. Within the #img-div element, you should see an element with a corresponding id="img-caption" that contains textual content describing the image shown in #img-div
  6. You should see an element with a corresponding id="tribute-info", which contains textual content describing the subject of the tribute page
  7. You should see an a element with a corresponding id="tribute-link", which links to an outside site, that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to _blank in order for your link to open in a new tab
  8. Your #image should use max-width and height properties to resize responsively, relative to the width of its parent element, without exceeding its original size
  9. Your img element should be centered within its parent element

Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!

Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
  <head>
    <mate chartset="UTF-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main">
      <div>
        <h1 id="title">诺曼·博洛格博士</h1>
        <p>拯救了十亿人生命的男人</p>
      </div> 
      <div id="img-div">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" id="image">
        <div id="img-caption">Norman Borlaug博士（左三）在墨西哥培训生物学家 关于如何提高小麦产量——这是他终生反饥饿战争的一部分。</div>
      </div>
      <div id="tribute-info">
        <p>以下是博洛格博士一生的时间线：</p>
        <ul>
          <li>1914 - 出生于爱荷华州克雷斯科</li>
          <li>1933年 - 离开他家的农场参加 明尼苏达大学，这要归功于大萧条时期的计划 “国家青年管理局”</li>
          <li>1935年 - 不得不辍学，攒更多的钱。 在平民保护团工作，帮助饥饿 美国人。“我看到了食物如何改变他们，”他说。“这一切都离开了 我身上的伤疤。</li>
          <li>2005 - 声明“我们将不得不使世界翻一番 到2050年粮食供应。认为转基因作物是 我们满足需求的唯一方法，因为我们的耕地用完了。说 转基因作物本质上并不危险，因为“我们一直 长期以来对植物和动物进行基因改造。长 在我们称之为科学之前，人们正在选择最好的品种。</li>
          <li>2009年 - 去世，享年95岁。</li>
        </ul>
      </div> 
      <h3>如果你有时间，你应该阅读更多关于这个不可思议的人 在他的<a id="tribute-link" href="" target="_blank">维基百科条目</a>上。<h3>
    </main>
  </body>
<html> 

1
2
3
4
5
6
#image{
  max-width:100%; 
  height:auto;
  margin:0 auto;
  display:block;
}

修改版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
#main {
    margin: 30px 8px;
    padding: 15px;
    border-radius: 5px;
    background: #eee;
}
#image{
  max-width:100%; 
  height:auto;
  margin:0 auto;
  display:block;
}
h1 {
    font-size: 4rem;
    text-align:center;
    margin-bottom: 0;
}
p {
    display: block;
    text-align:center;
}
#img-div {
    background: white;
    padding: 10px;
    margin: 0;
}
#img-caption {
    margin: 15px 0 5px 0;
    text-align:center;
}

#tribute-info{
  display:block;
}

ul {
    max-width: 550px;
    margin: 0 auto 50px auto;
    text-align: left;
    line-height: 1.5;
}

li {
    margin: 16px 0;
}
h3{
  text-align:center;
}
a{
  color: #477ca7;
  text-decoration:none;
}