I am trying to create a style using CSS and HTML.
My style is like this:
I tried it and this is my HTML :
<div class="download-content">
<div class="download-item">
<div class="download-file">
<div class="front-number">1</div>
<p><a href="">Financial Ratio Analysis</a></p>
<small><span>2013-01-12</span><span>Format | Power Point</span></small>
</div>
</div>
</div>
This is my CSS :
.download-content > .download-item > .download-file {
background: #027bc6;
float: right;
width: 100%;
}
.download-content > .download-item > .download-file > .front-number {
background: none repeat scroll 0 0 #000;
border: 5px solid #fff;
border-radius: 50%;
color: #fff;
float: left;
font-size: 40px;
font-weight: bold;
height: 70px;
text-align: center;
width: 70px;
}
It was so close to my expected result. But not 100%.
JS FIDDLE
My two cents:
http://jsfiddle.net/coma/jBx76
HTML
<div class="files">
<a href="#">
<div>
<div class="name">Financial Ratio Analysis</div>
<div class="meta">
<div class="date">2014-08-25</div>
<div class="format">Word</div>
</div>
</div>
</a>
<a href="#">
<div>
<div class="name">Financial Ratio AnalysisFinancial Ratio Analysis (this name is so so so long long long long long long)</div>
<div class="meta">
<div class="date">2014-08-25</div>
<div class="format">PDF</div>
</div>
</div>
</a>
</div>
CSS
html {
font-family: Arial, Helvetica, sans-serif;
}
div.files {
position: relative;
display: block;
padding: 4px 4px 4px 0;
text-decoration: none;
counter-reset: file;
}
div.files a {
position: relative;
display: block;
padding: 4px 4px 4px 62px;
text-decoration: none;
counter-increment: file;
}
div.files a:before {
content: counter(file);
display: block;
position: absolute;
top: 2px;
left: 2px;
width: 68px;
height: 68px;
border: 5px solid #fff;
background-color: #000;
border-radius: 50%;
text-align: center;
line-height: 72px;
color: #fff;
font-size: 40px;
font-weight: bold;
}
div.files div {
line-height: 1em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div.files a > div {
padding: 14px 14px 14px 28px;
background-color: #017BC6;
}
div.files .name {
margin: 0 0 14px 0;
font-size: 18px;
color: #fff;
}
div.files .meta {
font-size: 14px;
color: #bebfba;
font-weight: bold;
}
div.files .meta:after {
content: "";
display: block;
clear: both;
}
div.files .date {
float: left;
}
div.files .format {
float: right;
}
div.files .format:before {
content: "Format | ";
}
Hover
http://jsfiddle.net/coma/jBx76/4/
div.files a > div,
div.files a:before {
transition: background-color 350ms;
}
div.files a:hover > div {
background-color: #000;
}
div.files a:hover::before {
background-color: #017BC6;
}
Better browser support
http://jsfiddle.net/coma/jBx76/5/
Here's my shot at a solution. You need to move .front-number
outside .download-file
for it to work, though.
<div class="download-content">
<div class="download-item">
<div class="front-number">1</div>
<div class="download-file">
<p><a href="">Financial Ratio Analysis</a></p>
<small><span>2013-01-12</span><span>Format | Power Point</span></small>
</div>
</div>
</div>
.download-content > .download-item {
position: relative;
height: 80px
}
.download-content > .download-item > * {
position: absolute;
}
.download-content > .download-item > .front-number {
background: none repeat scroll 0 0 #000;
border: 5px solid #fff;
border-radius: 50%;
color: #fff;
float: left;
font-size: 40px;
font-weight: bold;
height: 70px;
text-align: center;
width: 70px;
z-index: 2;
}
.download-content > .download-item > .download-file {
background: #027bc6;
width: calc(100% - 110px);
height: 78px;
top: 1px;
left: 45px;
padding-left: 50px;
padding-right: 15px;
}
.download-content > .download-item > .download-file p,
.download-content > .download-item > .download-file a {
color: #fff;
text-decoration: none;
}
.download-content > .download-item > .download-file p {
font-size: 22px;
margin: 10px 0px;
}
.download-content > .download-item > .download-file small {
height: 1em;
line-height: 1em;
display: block;
}
.download-content > .download-item > .download-file small span:first-child {
float:left;
}
.download-content > .download-item > .download-file small span:last-child {
float:right;
}
JSBin
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With