Du kannst eine globale Klasse definieren und die allen Boxen vergeben. Da packst du dann alle allgemeinen Formatierungen rein. Die einzelnen Boxen bekommen dann nur noch spezifische Anweisungen:
Code
<div class"box1 globalBoxStyle"></div>
<div class"box2 globalBoxStyle"></div>
<style>
.globalBoxStyle {
padding: 10px;
color: #fff;
height: 130px;
border: 4px solid #aeaeae;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
transition: background-color 300ms ease;
-moz-transition: background-color 300ms ease;
-webkit-transition: background-color 300ms ease;
-o-transition: background-color 300ms ease;
background-size: cover;
&:hover {
cursor: pointer;
}
}
.box1 {
background: url(/images/style-2/smallbox_teaser_jedi.webp) no-repeat center;
}
.box2 {
background: url("/images/style-2/swjs_kachel.jpg") no-repeat;
}
</style>
Alles anzeigen
usw…
Außerdem solltest du mal schauen ob du wirklich alle Vendor-Präfixe brauchst. border-radius reicht z.B. völlig aus. Opera ist tot, -o- braucht kein Mensch mehr.
Ansonsten sieht die Seite für den Anfang gut aus.
Du solltest allerdings noch bei den Boxen cursor: pointer; beim Hover-Status ergänzen. Wirkt sonst etwas seltsam.