Home>

I'm practicing creating a homepage with dot installation, but I don't see it even if I put the code when I want to put the description alternately.
Can you tell me why?

Code
<! DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "utf-8">
  Try<title>Dotinstall Pane</title>
 <link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity = "sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ + a4 + 0owXq79v + lsFkW54bOGbiDQ" crossorigin = "anonymous">
 <link rel = "stylesheet" href = "css/styles.css">
</head>
<body>
  <header>
    <div>
    <h1>Dotinstall Pane</h1>
    <p>
      <br>
      Atom package for coding
    </p>
    <a href = "#" target = "_ blank"
   >Learn more<i></i></a>
    <img src = "img/top.png"
    width = "480" height = "270"
    alt = "Image of Dotistall Pane">
  </div>
  </header>
  <section>
    <div>
      <h1 data-subtitle = "-Features-">Dotinstall Pane Features</h1>
      <section>
        <img src = "img/feature1.png"
        width = "420" height = "270" alt = "Feature 1">
        <div class = desc "">
          <h1>There are some great features!</h1>
          <p>There are various things. There are various things. There are various things. There are various things. There are various things. There are various things. There are various things. There are various things.</p>
      <section>
        <img src = "img/feature2.png"
        width = "420" height = "270" alt = "Feature 2
        ">
        <div class = desc "">
          <h1>There are some great features!</h1>
          <p>There are various things. There are various things. There are various things. There are various things. There are various things. There are various things. There are various things. There are various things.</p>
      <section>
        <img src = "img/feature3.png"
        width = "420" height = "270" alt = "Feature 3">
        <div class = desc "">
          <h1>There are some great features!</h1>
          <p>There are various things. There are various things. There are various things. There are various things. There are various things. There are various things. There are various things. There are various things.</p>
      </div>
  </section>
</body>
</html>
Code
body {
  font-size: 16px;
  font-family: Verdana, sans-serif;
  color: # 333;
  margin: 0;
}
.container {
  width: 820px;
  margin: 0 auto;
  padding: 60px 0;
}
.orange-bg {
  color: #fff;
  background: url (../ img/bg.png);
  background-size: cover;
}
.section-title {
  text-align: center;
  font-weight: normal;
  font-size: 24px;
}
.section-title :: after {
  content: attr (data-subtitle);
display: block;
font-size: 16px;
color: #aaa;
padding-top: 10px;
}
/ * header * /
header h1 {
   margin-top: 0;
   font-weight: normal;
   font-size: 36px;
   margin-bottom: 8px;
}
header p {
  margin-top: 0;
  margin-bottom: 50px;
}
header .container {
  position: relative;
}
header img {
  position: absolute;
  bottom: 0;
  right: 0;
}
.btn {
  display: inline-block;
  width: 290px;
  background: #fff;
  color: # f39800;
  text-align: center;
  text-decoration: none;
  padding: 8px 0;
  border-radius: 5px;
  opacity: 0.9;
}
.btn: hover {
  opacity: 1.0;
}
/ * features * /
.feature h1 {
  font-weight: normal;
  font-size: 18px;
}
.feature .desc {
  width: 360px;
}
.feature: nth-of-type (odd) .desc {
  float: right;
  padding-left: 40px;
}
.feature: nth-of-type (even) .desc {
  float: left;
  padding-right: 40px;
}
css