JDX01(2017):Travel World(1)

範例結果

四、【section1】icon font 其他網站的應用

html結構

  <section id="sec1">
      <h2>section1:介紹</h2>
      <div class="introAll">
        <div class="intro">
            <div class="icon flaticon-travel"></div>
            <h3>item1</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium quisquam a velit officiis labore eius error animi iste itaque eum amet veritatis placeat voluptatem cupiditate dicta sapiente, perferendis vel maxime.</p>
        </div>
        <div class="intro">
            <div class="icon flaticon-global"></div>
            <h3>item2</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium quisquam a velit officiis labore eius error animi iste itaque eum amet veritatis placeat voluptatem cupiditate dicta sapiente, perferendis vel maxime.</p>
        </div>
        <div class="intro">
            <div class="icon flaticon-transport"></div>
            <h3>item3</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium quisquam a velit officiis labore eius error animi iste itaque eum amet veritatis placeat voluptatem cupiditate dicta sapiente, perferendis vel maxime.</p>
        </div> 
      </div>
  </section>

pug 結構

      section#sec1
        h2 section1.介紹
        .introAll
          .intro
            .icon.flaticon-travel
            h3 item1
            p Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio inventore sapiente cumque totam corrupti, repudiandae, provident nisi rerum tenetur quidem tempore quisquam aspernatur nihil hic nemo expedita ex. Id, nam
          .intro
            .icon.flaticon-global
            h3 item2
            p Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio inventore sapiente cumque totam corrupti, repudiandae, provident nisi rerum tenetur quidem tempore quisquam aspernatur nihil hic nemo expedita ex. Id, nam
          .intro
            .icon.flaticon-transport
            h3 item3
            p Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio inventore sapiente cumque totam corrupti, repudiandae, provident nisi rerum tenetur quidem tempore quisquam aspernatur nihil hic nemo expedita ex. Id, nam

 

CSS美化【#sec1 區】

/* sec1============================= */
.icon{
  text-align: center; 
}
.icon:before{
  font-size: 100px; margin-left: 0px;
}
.intro{
  width: calc(100%/3 - 2%); padding: 30px; margin: 1%;
  box-sizing: border-box;
  float: left; 
}
.intro h3{
  text-align: center; line-height: 50px;
}

SCSS美化【#sec1 區】

#sec1{
  .icon{
    text-align: center;
    &:before{
    font-size: 100px; margin-left: 0;
    }
  }
}
.intro{
  width: calc(100%/3 - 2%); padding: 30px; margin: 1%;
  box-sizing: border-box;
  float: left;
  h3{
    text-align: center; line-height: 50px;
  }
}
// #sec1 end