石垣島観光ガイド　課題 - WEB学習

週末、ずっとうまくできずに悩みに悩んだ外部リンクがやっとできました！
うれしい。。。
border等の色をあえて変えてみました。

<?xml version"1.0"encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN""http//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="ja"lang="ja">
<head>
<meta http-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<meta http-equiv="Content-Style-Type"content="text/css"media="screen,print"/>
<title>9月30日課題01</title>
<link href="css/base3.css"rel="stylesheet"type="text/css"media"screen,print"/>
</head>
<body>
<!-- ▼#container-->
<div id="container">
<!-- ▼#content-->
<div id="content">
<!-- ▼.section-->
<div class="section">
<h1>石垣島観光ガイド</h1>
<p>石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。 沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、 1年を通じて平均気温は27度もあります。亜熱帯気候のため、 マングローブの森や色とりどりの南国の花が咲き、赤瓦屋根の民家、 そして何よりも、鮮やかなコバルトブルーの海岸は、多くの観光客をひきつけ、 特にダイバーやシュノーケリングを楽しむ人にとっては格好の場所になっています。</p>
<h2>観光スポット</h2>
</div>
<!-- ▲.section-->
<!-- ▼.section-->
<div class="section">
<h3>「川平（かびら）湾」</h3>
<h4>石垣湾から車で約20分</h4>
<p>石垣を代表する景勝地で、エメラルド色のサンゴ礁と黒真珠の養殖でよく知られています。 潮の流れが早いため、遊泳は禁止されています。</p>
</div>
<!-- ▲.section-->
<!-- ▼.section-->
<div class="section">
<h3>「宮良川（みやらがわ）のヒルギ林」</h3>
<h4>石垣湾からバスで30分宮良橋で下車</h4>
<p>巨大なマングローブ林（ヒルギ群落）があり、国の天然記念物に指定されているほど壮大です。</p>
</div>
<!-- ▲.section-->
<!-- ▼.section-->
<div class="section">
<h3>「底地（すくじ）ビーチ」</h3>
<h4>川平湾から車で約10分</h4>
<p>マリンスポーツが楽しめ、マンタが見られることから、ダイバーに人気があります。</p>
</div>
<!-- ▲.section-->
<!-- ▼.section-->
<div class="section">
<h3>「フサキビーチ」</h3>
<h4>石垣湾からバスで30分、宮良橋下車</h4>
<p>島の西側にあるビーチで、西表（いりおもて）島に沈む美しいサンセットが見られるビーチとして有名です。</p>
</div>
<!-- ▲.section-->
<!-- ▼.section-->
<div class="section">
<h3>「米原海岸」</h3>
<h4>石垣空港より車で約30分</h4>
<p>米原キャンプ場が隣接していて、ビーチパーティが楽しめます。潮の流れが早いため、遊泳は禁止されています。</p>
</div>
<!-- ▲.section-->
<!-- ▼.section-->
<div class="section">
<h3>「マエザトビーチ」</h3>
<h4>石垣空港より車で約5分</h4>
<p>ホテル内にあるリゾートビーチですが、宿泊者以外でも利用可能です。ファミリー向けリゾート地で、 シュノーケルのレンタルもあります。</p>
</div>
<!-- ▲.section-->
</div>
<!-- ▲#content-->
</div>
<!-- ▲#container-->
</body>
</html>

@charset"UTF-8";
*{
  margin: 0;
  padding: 0;
}

body{
  color: #343434;
  font-size: 0.8em;
  font-family:
    "hiragino kaku Gothic Pro",
    "ヒラギノ角ゴPro W3",
    Meiryo,
    "メイリオ",
    Osaka,
    "MS PGothik",
    "ＭＳ Pゴシック",
    sans-serif;
  line-height: 1.7;
  margin: 20px 0;
  padding: 0;
  background-color: #FFFFFF;
}
div#container{
  width: 600px;
  margin: 20px auto 0 auto;
  border: 16px solid #75FFA9;
  border-top: hidden;
}
div#content{
  width: 600px;
  margin: 20px auto 0 auto;
}
div.section{
  margin: 20px;
}
h1{
  color: #00C84B;
  font-size: 30px;
  margin: 0 0 10px 0;
  padding: 10px 10px 5px 16px:
}
h2{
  color: #00C84B;
  font-size: 20px;
  border-left: 5px solid #00FF60;
  margin: 0;
  padding: 0 5px 0 10px;
}
h3{
  color: #00C800;
  font-size: 18px;
  background-color: #75FFA9;
  border-top: 2px solid #35FF81;
  border-bottom: 2px solid #35FF81;
  margin: 10px 0 12px 0;
  padding: 0 5px 0 10px;
}
h4{
  color: #35FF81;
  font-size: 16px;
  margin: 20;
}
p{
  margin: 4px 0 20px 0;
}