指定されたデザインを形にできるか?
html&cssを学び始めた初級者のための課題です。

作るお題

寸法

だいたいその通りになればOKですが、以下の寸法は遵守してください。
色味はpdfをchormeで表示してスポイトツールで測定してください。
(最初にCSSresetしてください)
width:960px…ブラウザに対してセンター
header/height:300px..header部分(海の画像がある部分の高さ)

pdfダウンロード

素材

作成例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="css/main.css"/>
  </head>
  <body>
    <div id="container">
      <header>
        <h1>Sample Company</h1>
      </header>
      <main>
        <h2>About</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <h2>Sales</h2>
        <table border="1">
          <tr><th>2018</th><th>2019</th><th>2020</th></tr>
          <tr><td>$120,312.00</td><td>$146,570.00</td><td>$180,906.00</td></tr>
        </table>
        <h2>Gallery</h2>
        <div class="box">
          <img src="images/float1.jpg">
          <img src="images/float2.jpg">
          <img src="images/float3.jpg">
          <img src="images/float4.jpg">
        </div>
      </main>
      <footer>
        ©sample company
      </footer>
    </div>
  </body>
</html>
#container{
    width:960px;
    margin:0 auto;
    background:#eee;
    
}
header{
    height:300px;
    background-image:url(../images/headerImg.png);
    background-size: cover;
    display: flex;
}
header h1{
    margin:auto;
    font-size:50px;
}
main{
    padding:50px;
}
h2{
    text-align: center;
    background:#157eee;
    font-size:20px;
    color:white;
    margin-bottom:30px;
}
main p{
    
    border-radius: 20px;
    background-color:white;
    padding:30px;
    margin-bottom:40px;
}
table{
    
    width:600px;
    margin:40px auto;
}
td,th{
    text-align: center;
}
th{
    background:#333;
    color:white;
}

.box{
    display:flex;
    justify-content: space-between;
 
}

.box img{
    width:24%;
}
footer{
    height:30px;
    line-height: 30px;
    background:#157eee;
    font-size:16px;
    text-align: center;
    color:white;
}