Application Page
A selling page for eurobytes.eu
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">
<div class="content">
<article>
<header>
<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="links">
<li>
<a href="https://wordpress.org/" target="_blank" title="WordPress home page">wordpress.org</a>
</li>
<li>
<a...
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.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;
}
/*
.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;
}*/