Hearthstone deck list

My code will display a Hearthstone deck list.

I'm still learning HTML and I'd like help with a few things:

• How readable is my code? How can I improve readability?

• Have I used any bad practices? What should I do instead?

• Is there any redundancy in my code?

```



Hearthstone Deck List

body {
font-family: 'Lato', sans-serif;
}

img {
vertical-align: middle;
}

* {
box-sizing: border-box;
}

.card-list ul {
list-style-type: none;
margin: 0px;
max-width: 250px;
padding: 0px;
}

.card-list ul li {
margin: 1px;
position: relative;
}

a.card-frame {
background-color: #191919;
display: block;
font-size: 12.5px;
height: 25px;
}

a.card-frame:hover {
background-color: #646464;
}

a.card-frame span.card-cost,
a.card-frame span.card-count {
color: #FFFFFF;
}

a.card-frame span.card-cost,
a.card-frame span.card-name,
a.card-frame span.card-count {
height: 25px;
padding-top: 6.25px;
position: absolute;
text-align: center;
}

a.card-frame span.card-cost {
background-color: #005580;
left: 0px;
width: 25px;
}

a.card-frame span.card-name {
font-size: 9.375px;
left: 31.25px;
z-index: 1000;
}

a.card-frame span.card-count {
background-color: #323232;
right: 0px;
width: 25px;
}

a.card-frame span.card-image {
position: absolute;
right: 25px;
}

a.free-card span.card-name {
color: #FFFFFF;
}

a.common-card span.card-name {
color: #

It's a bit hard to read, not because you wrote a bad HTML code, just because you did not use any framework or library to make your content dynamic and you end up writing 20 lines with all the cards you had to display. The day you have to add more cards, for example 80+ cards, it is going to take you a lot of time to add them. You should think of a faster/dynamic way of adding those cards to your html, maybe you could take a look at AngularJS (AngularJS Tutorial), it will speed up your development process in the future.

Also, you could move all your css to a new file and reference it from your index.html (Tutorial to move your css to a external file), so your html is going to be more readable. Hope this helped you!

StackExchange Code Review Q#126354, answer score: 3