A Pen by Lastwizard

Thumbnail
This awesome code was written by lastwizard, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright lastwizard ©
  • HTML
  • CSS
  • JavaScript
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
<header>Header Image</header>
<main>
  <ul>
    <li>Reason 1</li>
    <li>Reason 2</li>
    <li>Reason 3</li>
  </ul>
</main>
<aside> Download LinkedIn App</aside>
<ul id='promo'>
  <li>
    <figure><span class='fake-image'</span></figure>  
    <figcaption>
      <span>600分</span>
      <p>提升芝麻信用</p>
    </figcaption>
  </li>
  <li>
    <figcaption>
      <span>600分</span>
      <p>提升芝麻信用</p>
    </figcaption>
    <figure><span class='fake-image'</span></figure>  
  </li>
</ul>

    

/*Downloaded from https://www.codeseek.co/lastwizard/a-pen-by-lastwizard-XKQjWX */
        * {
  /*All reset css goes here */
  padding: 0;
  margin: 0;
}

header {
  background: blue;
  height: 200px;
}

section {
  background: gray;
}

main ul {
  margin-left: 20%;
}

aside {
  background: gray;
  text-align: center;
}

#promo {
  list-style: none;
}

#promo li {
  border-bottom: 1px dashed black;
  margin: 20px;
}

.fake-image {
  background: yellow;
  width: 200px;
  height: 100px;
  display: block;
  margin: auto;
}

figure {
  width: 49%;
  display: inline-block;
  vertical-align: middle;
}

figcaption {
  width: 49%;
  display: inline-block;
  font: 22px bold;
}

figcaption:nth-child(odd){
  text-align: right;
}

figcaption span {
  color: orange;
}
    

/*Downloaded from https://www.codeseek.co/lastwizard/a-pen-by-lastwizard-XKQjWX */
        
    

Comments