107 Building the Hero - To Become A Better Man 　　より良い自分になる為に

Heroセクションを作る
左にテキスト、右に写真が来るのでそのボックスをdivで作る
それぞれの箱にh1とimgを入れる
<body>

<section class="section-hero">

<div class="hero-text-box">

<h1>

A healthy meal delivered to your door, every single day

</h1>

</div>

<div class="hero-img-box">

<img src="img/hero.png" />

</div>

</section>

</body>
h1の下にpタグでhero-descriptionを入れる
h1にもheading-primaryのクラス名を入れておく
基本的には全てクラス名を入れて、CSSではそのクラス名に対してレイアウトする
ボタン2つをaタグで作る。href="#" class="btn"も忘れずに
<a href="#" class="btn">Start eating well</a>

<a href="#" class="btn">Learn more ↓</a>
テキストボックスとイメージボックスを横並びにするために、2つのボックスをdivで囲う
そのdivをdisplay: grid; でグリッドにし、２列の指定をする
.hero {

display: grid;

grid-template-columns: 1fr 1fr;

}
画像が大きすぎるので、画像にクラス名(altも)をつけて、そのクラス名に対しwidth: 100%で指定する。そうすることで親要素であるimg-boxの100％の幅になるので結果的にgrid boxでテキストボックスと画像の比率が半々になる
画面幅が小さくなっても自動的にちじむ