У меня проблема с дублированием карточек, каждый раз, когда я дублирую карточку, цвет карточки становится темнее, см. Изображение ->:
Я имею в виду, что зеленый и фиолетовый становятся темнее слева направо (float: left), почему это происходит?
Я даю здесь и свои html и css коды:
МОЙ HTML КОД
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="yeni6c.css">
</head>
<body>
<div class="aussen">
<div class="in_card">
<div class="in_up">
<!-- <hr> -->
<div class="total center">TOTAL
</div>
</div>
<div class="in_down">
<div class="number center">NUMBER
</div>
</div>
</div>
<div class="in_card two">
<div class="in_up">
<!-- <hr> -->
<div class="total center">TOTAL2
</div>
</div>
<div class="in_down">
<div class="number center">NUMBER
</div>
</div>
</div>
<div class="in_card tree">
<div class="in_up">
<!-- <hr> -->
<div class="total center">TOTAL3
</div>
</div>
<div class="in_down">
<div class="number center">NUMBER
</div>
</div>
</div>
<div class="in_card four">
<div class="in_up">
<hr>
<div class="total center">TOTAL4
</div>
</div>
<div class="in_down">
<div class="number center">NUMBER
</div>
</div>
</div>
</div>
</body>
</html>
МОЙ CSS КОД
.aussen {
top: 30px;
left: 10px;
width: 100%;
height: 170px;
position: absolute;
border: 1px solid #F5A9BC;
background: #FBEFF2;
}
.center {
position: relative;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
}
.in_card {
position: relative;
width: 15%;
height: 150px;
border: 1px solid blue;
float: left;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 10px;
border-radius: 25px;
overflow: hidden;
}
/*.in_card.zwei {
}*/
.in_card .in_up {
height: 60px;
width: 100%;
background: green;
}
.in_card .in_down {
height: 90px;
width: 100%;
background: purple;
}
.in_card .in_down .number {
text-align: center;
}
.in_card .in_up .total {
text-align: center;
}
.aussen hr {
position: relative;
margin: 0px;
padding: 0px;
top: 60px;
}
где моя ошибка, поэтому становится темнее здесь?
-> Мой второй вопрос: как я могу сделать тег <hr> независимым? Colours, текст TOTAL4 движется. Я не хочу этого, но я все еще хочу разместить свой тег <hr> относительно моей основной карты class="in_card".
Надеюсь, я все хорошо объяснил, и кто-то может мне помочь:)