Small Application page

Small selling page

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<div class="container">

  <figure>
    <a href="https://upload.wikimedia.org/wikipedia/commons/c/c6/WordPress_PostEdit.png" target="_blank" title="WordPress.org, GPL <http://www.gnu.org/licenses/gpl.html>, via Wikimedia Commons" rel="fancybox">

      <picture>
        <source media="(min-width:1400px)" srcset="https://upload.wikimedia.org/wikipedia/commons/c/c6/WordPress_PostEdit.png">
        <source media="(min-width:800px)" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/WordPress_PostEdit.png/800px-WordPress_PostEdit.png">
        <source media="(min-width:640px)" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/WordPress_PostEdit.png/640px-WordPress_PostEdit.png">
        <source media="(min-width:320px)" srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/WordPress_PostEdit.png/320px-WordPress_PostEdit.png">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/WordPress_PostEdit.png/320px-WordPress_PostEdit.png" alt="WordPress PostEdit">
      </picture>
    </a>

    <figcaption style="text-align:center;font-size: 12px;">

      <ul class="application-buttons">

        <li>
          <a href="https://wordpress.org/" target="_blank" title="WordPress home page">Install</a>
        </li>

        <li>
          <a href="https://en.wikipedia.org/wiki/WordPress" target="_blank" title="WordPress - Wikipedia">Wikipedia</a>
        </li>

        <li>
          <img src="https://s.w.org/style/images/about/WordPress-logotype-simplified.png" alt="WordPress logo">
        </li>
      </ul>

    </figcaption>
  </figure>



</div>

CSS

html,
body {
  color: #454545;

}

article header img {
  width: 100%;
  
}

.container {
  margin-top: 5%;
}


table {
  width: 100%;
}

h2,
h3,
h4,
h5,
h6 {
  text-align: left;
}

figure figcaption ul.application-buttons {
  list-style-type: none;
}

figure figcaption ul.application-buttons li {
  display: inline-block;
  vertical-align: middle;
  padding: 0px 10px;
}

figure figcaption ul.application-buttons li img {
  width: 25px;
}

/*
.content {
  background-color: #F9F9F9;
  border-radius: 5px;

}

article {
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  padding: 20px 30px;
}

header {
  border-bottom: 1px solid #CCCCCC;
  margin: 20px 30px;
}

#app-name {
  position: absolute;
  margin-top: -15%;
  display: block;
  background: #000;
  color: #F9F9F9;
  margin-left: 5%;
  padding: 20px 30px;
  opacity: 0.75;
  border: 1px solid #454545;
  border-radius: 5px;
}

.container {
  margin-top: 5%;
}

.container .content article .description {
  background-color: #EEEEEE;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  padding: 20px 30px;
  
}

figure figcaption ul.links {
	list-style-type: none;
}

figure figcaption ul.links li {
	display: inline-block;
	vertical-align: middle;
	padding: 0px 10px;
}

figure figcaption ul.links li img {
	width: 25px;
}

aside div {
  border: 1px solid #CCCCCC;
  background-color: #EEEEEE;
  padding: 20px 30px;
  margin: 0px 0px 10px 0px;
  border-radius: 5px;

}

article header img {
  width: 100%;
  
}


h1 {
  text-align: center;
  
}*/