产品页上的英雄区跟之前我们为首页设计的英雄区的样式有点区别。这块文字会大一点，并且会显示在页面的底部 ..

先找到产品页的英雄区 .. .在这个 item 元素上，再添加一个 css 类 .. big white bottom .. big 是大，white 是白色，bottom 是底部 . 回到英雄区的样式文件 ..

先添加一个 .white ... 设置一下文字的颜色 ... 设置成白色 ..

再添加一个 .big ，里面嵌套一个 header ，先设置一下大号的标题 ... font-size 设置成 56px .. letter-spacing 设置成 8 像素 ...

再去设置一下大号的 .sub.header ... font-size 字号设置成 24px ，letter-spacing 字间距设置成 16px ... 再改一下字体 ... font-family: 'PingFangSC-Ultralight';

然后是 bottom ... 内容要显示在英雄区的底部 .. 里面嵌套一个 content .. 它里面用一个 align-items .. 设置成 flex-end ... 再给它添加一点下边儿的边距 ... padding-bottom: 4% ..

调整一下浏览器的窗口尺寸 .. 再回到样式文件，设置一下英雄区在小尺寸的设备上的样式 ... 找到这个 max-width: 767px 的媒体查询 ..

在内容元素上，用一下 color 设置一下文字的颜色 .. #000 表示黑色 .. align-items 设置成 center ，让内容居中 ..

大标题的字间距可以小一点，把 letter-spacing 设置成 4px ..

再添加一个 .sub.header ... font-size 字号是 16px ... letter-spacing 字间距设置成 8px ..

这样我们的英雄区在产品页面上的样式就做好了 ...