Home>

I have a question about creating a home page for dot installation.
The width at<section class ="voices">and the background at<section class ="call-to-action orange-bg">
Also, the image at<section class ="voices">is not reflected.
Can you tell me why I can't find out why?
Thank you.

Code
&lt;! DOCTYPE html&gt;
&lt;html lang = "en"&gt;
&lt;head&gt;
  &lt;meta charset = "utf-8"&gt;
  Try&lt;title&gt;Dotinstall Pane&lt;/title&gt;
 &lt;link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity = "sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ + a4 + 0owXq79v + lsFkW54bOGbiDQ" crossorigin = "anonymous"&gt;
 &lt;link rel = "stylesheet" href = "css/styles.css"&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;header&gt;
    &lt;div&gt;
    &lt;h1&gt;Dotinstall Pane&lt;/h1&gt;
    &lt;p&gt;
      &lt;br&gt;
      Atom package for coding
    &lt;/p&gt;
    &lt;a href = "#" target = "_ blank"
   &gt;Learn more&lt;i&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;img src = "img/top.png"
    width = "480" height = "270"
    alt = "Image of Dotistall Pane"&gt;
  &lt;/div&gt;
  &lt;/header&gt;
  &lt;section&gt;
    &lt;div&gt;
      &lt;h1 data-subtitle = "-Features-"&gt;Dotinstall Pane Features&lt;/h1&gt;
      &lt;section&gt;
        &lt;img src = "img/feature1.png"
        width = "420" height = "270" alt = "Feature 1"&gt;
        &lt;div&gt;
          &lt;h1&gt;There are some great features!&lt;/h1&gt;
          &lt;p&gt;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.&lt;/p&gt;
        &lt;/div&gt;
        &lt;/section&gt;
      &lt;section&gt;
        &lt;img src = "img/feature2.png"
        width = "420" height = "270" alt = "Feature 2
        "&gt;
        &lt;div&gt;
          &lt;h1&gt;There are some great features!&lt;/h1&gt;
          &lt;p&gt;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.&lt;/p&gt;
        &lt;/div&gt;
        &lt;/section&gt;
      &lt;section&gt;
        &lt;img src = "img/feature3.png"
        width = "420" height = "270" alt = "Feature 3"&gt;
        &lt;div&gt;
          &lt;h1&gt;There are some great features!&lt;/h1&gt;
          &lt;p&gt;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.&lt;/p&gt;
        &lt;/div&gt;
  &lt;/section&gt;
  &lt;section&gt;
    &lt;div&gt;
      &lt;h1 data-subtitle = "-Voices-"&gt;User Voice&lt;/h1&gt;
      &lt;div&gt;
        &lt;section&gt;
          &lt;img src = "img/use1.png"
          width = "90" height = "90" alt = "User A"&gt;
          &lt;h1&gt;User A&lt;/h1&gt;
          &lt;p&gt;feel well. feel well. feel well. feel well. feel well. feel well.&lt;/P&gt;
          &lt;/section&gt;
          &lt;section&gt;
            &lt;img scr = "img/use2.png" width = "90" height = "90" alt = "User B"&gt;
            &lt;h1&gt;User B&lt;/h1&gt;
            &lt;p&gt;feel well. feel well. feel well. feel well. feel well. feel well.&lt;/P&gt;
            &lt;/section&gt;
            &lt;section&gt;
              &lt;img scr = "img/use3.png" width = "90" height = "90" alt = "User C"&gt;
              &lt;h1&gt;User C&lt;/h1&gt;
              &lt;p&gt;feel well. feel well. feel well. feel well. feel well. feel well.
              &lt;/P&gt;
            &lt;/section&gt;
          &lt;/div&gt;
        &lt;/div&gt;
     &lt;/section&gt;
  &lt;section&gt;
    &lt;div&gt;
      Try&lt;h1&gt;Dotinstall Pane!&lt;/h1&gt;
      &lt;a href = "#" target = "_ blank"
     &gt;Learn more&lt;i&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  &lt;footer&gt;
  &lt;p&gt;&amp;copy;dotinstall.com&lt;/p&gt;
  &lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;
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;margin-bottom: 60px;
  margin-top: 0;
}
.section-title :: after {
  content: attr (data-subtitle);
display: block;
font-size: 16px;
color: #aaa;
padding-top: 10px;
}
.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;
}
/ * 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;
}
/ * 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;
}
 .feature: not (: last-child) {
   margin-bottom: 60px
   }
.feature {
  overflow: hidden;
}
/ * voices * /
.voices {
  background: # f8f8f8;
}
.voices .flex {
  display: flex;
  justify-content: space-between;
}
.voice {
 width: 250px;
 background: #fff;
 position: relative;
 box-sizing: border-box;
 padding: 60px 40px 25px;
}
.voice img {
  border-radius: 50%;
  border: 10px solid #fff;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -55px;
}
.voice h1 {
  text-align: center;
  font-size: 18px;
  font-weight: normal;
}
.voices .section-title {
  margin-bottom: 95px;
}
/ * call-to-action * /
.call-to-action {
  text-align: center;
}
.call-to-action .section-title {
  margin-bottom: 15px;
}
/ * footer * /
footer {
  padding: 40px 0;
  text-align: center;
  color: #aaa;
}



Let's use the voice of this user and Dotinstall Pane! However, I want to make the background length the same as the header below.

  • Answer # 1

    <section class ="features">and<div class ="container">;/div>and</section>are missing.
    If you are aware of the indentation, you will notice that the closing tag is missing.

    The user image doesn't appear because<img src =is misspelled as<img scr =.

    Please check with the following 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 = "Dotistall Pane image">
          </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>
                <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>
            <section>
              <img src = "img/feature2.png" width = "420" height = "270" alt = "feature 2">
              <div>
                <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>
            <section>
              <img src = "img/feature3.png" width = "420" height = "270" alt = "feature 3">
              <div>
                <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>
          </div><!-/.container This is missing->
        </section><!-/.features This is missing->
        <section>
          <div><h1 data-subtitle = "-Voices-">User Voice</h1>
            <div>
              <section>
                <img src = "img/use1.png" width = "90" height = "90" alt = "User A">
                <h1>User A</h1>
                <p>feel well. feel well. feel well. feel well. feel well. feel well.</p>
              </section>
              <section>
                <img src = "img/use2.png" width = "90" height = "90" alt = "User B">
                <h1>User B</h1>
                <p>feel well. feel well. feel well. feel well. feel well. feel well.</p>
              </section>
              <section>
                <img src = "img/use3.png" width = "90" height = "90" alt = "User C">
                <h1>User C</h1>
                <p>feel well. feel well. feel well. feel well. feel well. feel well.</p>
              </section>
            </div>
          </div><!-/.container->
        </section><!-/.voices->
        <section>
          <div>
            Try<h1>Dotinstall Pane!</h1>
            <a href = "#" target = "_ blank">Learn more<i></i></a>
          </div>
        </section>
        <footer>
          <p>&copy;dotinstall.com</p>
        </footer>
      </body>
    </html>

    (I'm curious about the line breaks in a and img.


    In the previous question, you mentioned the closing tag in the previous question.
    In HTML, tags are basically nested.
    Although it is possible to omit the partially closed tag, it is difficult to understand. (Apart from img, hr, etc.)

    >

    Shooting of the part that will be a problem (2018/08/27 19:10)
    * Addbackground: orange;to.orange-bgandbackground: red;to.voices

    Isn't the image displayed just because the path is wrong?
    (use1.pngis actuallyuser1.png)

    "It has become shorter" is unanswerable because the difference between before and after is unknown

  • Answer # 2

    I look at it

      

    <section class ="voices">background and<section class ="call-to-action orange-bg">.

    There is "<div class ="container">" as a parent element, butwidth: 820px;.
    The same class is also used for child elements. If this is a problem, why not change the name and settings?


      

    <section class ="voices">

    I have the same opinion as "liveAsNotes" regarding the display of this image.