Испытание Псевдоэлементы

Курсы §18. Селекторы. Часть 2
1

Выполнил испытание на 98 %. Не пойму, как исправить до 100%.

Ниже прикладываю скрин.

pseudo-elements
pseudo-elements663×729 122 KB

И код, соответственно:

html,
body {
margin: 0;
padding: 0;
font-family: “Arial”, sans-serif;
line-height: 30px;
}

body {
min-width: 550px;
min-height: 290px;
padding: 10px;
}

.two-cards {
width: 350px;
height: 250px;
padding: 10px;
text-align: center;
}

.two-cards div {
position: relative;
display: inline-block;
width: 120px;
height: 180px;
margin: 0 10px;
margin-top: 30px;
vertical-align: middle;
background-color: white;
border-radius: 5px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
}

/* Ширина иконок, не изменяйте */
.two-cards div::before,
.two-cards div::after {
width: 20px;
height: 50px;
}

/* Поворот нижней иконки */
.two-cards div::after {
transform: rotate(180deg);
}

.ace-heart {
background: url(heart.svg) no-repeat 35px 65px;
background-size: 50px 50px;
}

.two-spade {
background: url(spade.svg) no-repeat 35px 65px;
background-size: 50px 50px;
}

.ace-heart::before {
content: “A”;
color: red;
font-weight: bold;
font-size: 25px;
position: absolute;
left: 5px;
top: 5px;
background: url(heart.svg) no-repeat -3px 25px;
background-size: 25px 25px;
}

.ace-heart::after {
content: “A”;
color: red;
font-weight: bold;
font-size: 25px;
position: absolute;
right: 5px;
bottom: 5px;
background: url(heart.svg) no-repeat -3px 25px;
background-size: 25px 25px;
}

.two-spade::before {
content: “2”;
color: black;
font-weight: bold;
font-size: 25px;
position: absolute;
left: 5px;
top: 5px;
background: url(spade.svg) no-repeat -3px 25px;
background-size: 25px 25px;
}

.two-spade::after {
content: “2”;
color: black;
font-weight: bold;
font-size: 25px;
position: absolute;
right: 5px;
bottom: 5px;
background: url(spade.svg) no-repeat -3px 25px;
background-size: contain;
background-size: 25px 25px;
}

1 лайк
2

Ребят реально не усвоил тему "Селекторов и псевдоклассов на примере карт ". Подскажите как готовиться чтобы вся инфа в голову вошла…Взаимосвязь некоторых элементов трудно понять…Над чем лучше поработать? А то желание начинает пропадать к изучению когда что то не понятно…Может кто-то из личного опыта что подскажет.Спасибо.

4
  1. Пользуйтесь ссылками в подвале - на одних тренажерах далеко не уедешь.
    https://htmlacademy.ru/blog/education/all/productive-study
  2. Желательно знать перевод изучаемых псевдо-элементов (Google translate в помощь). Переосмыслить значение перевода и заново сделать упражнение.
  3. Комментировать, раскомментировать - прямо в тренажере - поэтапно кусочки кода для понятия работы свойств.
  4. Читать сторонние ресурсы (много гуглить).

Ответить

Закладки Поделиться Пожаловаться Ответить

Наблюдать

Вы будете получать уведомления, поскольку наблюдаете за темой.

Похожие темы

Тема Ответов Просм. Активность
[19/20] обрезаются масти

§18. Селекторы. Часть 2|0|10|23ч|
|Котогалерея, мой вариант 100%

§15. Сетки|0|9|17ч|
|Less подключение.

§37. Примеси в LESS|0|11|1д|

У вас осталось 3 новых тем, вы также можете посмотреть другие темы в разделе §18. Селекторы. Часть 2

Как насчет изображения для вашей учетной записи?

Вы опу

5

У вас позиционирование иконок задается пикселями: background: url(…) no-repeat -3px 25px;

В источнике есть другие варианты. К тому же в условии сказано, что все размеры и координаты указаны в пикселях и кратны 5. У Вас -3 не кратно 5. Это можно обойти, указав одно из ключевых значений данного свойства. Попробуйте позиционировать иконку относительно родительского контейнера. Это исправит проблему с несовпадением иконок. (спойлер - ниже)

background: url(…) no-repeat bottom;

image
image670×845 179 KB

1 лайк
6

Спасибо всем за подсказки, намучался с исчезающим маленьким сердечком под буквой “А” (5 часов тырканий с кодом),
Так и не понял, почему оно не показывается, чем оно скрывается?
Может кто подскажет.

Решение увидел у Создателя темы - выше, надо вписать высоту 50px под ширину (где написано не изменять).

Вот код с результатом 100 %.

html,
body {
margin: 0;
padding: 0;
font-family: “Arial”, sans-serif;
line-height: 30px;
}

body {
min-width: 550px;
min-height: 290px;
padding: 10px;
}

.two-cards {
width: 350px;
height: 250px;
padding: 10px;
text-align: center;
}

.two-cards div {
position: relative;
display: inline-block;
width: 120px;
height: 180px;
margin: 0 10px;
margin-top: 30px;
vertical-align: middle;
background-color: white;
border-radius: 5px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
}

/* Ширина иконок, не изменяйте */
.two-cards div::before,
.two-cards div::after {
width: 20px;
height: 50px;
}

/* Поворот нижней иконки */
.two-cards div::after {
transform: rotate(180deg);
}

.ace-heart {
background: url(“heart.svg”) no-repeat center;
background-size: 50px 50px; }

.ace-heart::before {
content: “A”;
color: red;
position: absolute;
left: 5px;
top: 5px;
font-size: 25px;
font-weight: 600;
background: url(“heart.svg”) no-repeat bottom;
background-size: 25px 25px;
}

.ace-heart::after {
content: “A”;
color: red;
position: absolute;
right: 5px;
bottom: 5px;
font-size: 25px;
font-weight: 600;
background: url(“heart.svg”) no-repeat bottom;
background-size: 25px 25px;
}

.two-spade {
background: url(“spade.svg”) no-repeat center;
background-size: 50px 50px; }

.two-spade::before {
content: “2”;
color: black;
position: absolute;
left: 5px;
top: 5px;
font-size: 25px;
font-weight: 600;
background: url(“spade.svg”) no-repeat bottom;
background-size: 25px 25px;
}

.two-spade::after {
content: “2”;
color: black;
position: absolute;
right: 5px;
bottom: 5px;
font-size: 25px;
font-weight: 600;
background: url(“spade.svg”) no-repeat bottom;
background-size: 25px 25px;
}