23/23 Испытание спутники 100%

Вдруг кому пригодится :slight_smile:

.luna {
    top: 10px;
    left: 10px;
    background-image: 
        linear-gradient(
            rgba(221, 221, 221, 0.5),
            rgba(221, 221, 221, 0.75)
        );
    background-color: #ffdc00;
}
.umbriel {
    top: 10px;
    left: 180px;
    background-image:    
        linear-gradient(
            rgba(0, 116, 217, 0.5),
            rgba(255, 255, 255, 0.25),
            rgba(0, 116, 217, 0.5)
        ),
        linear-gradient(
            to right,
            rgba(0, 116, 217, 0.5),
            rgba(255, 255, 255, 0.25),
            rgba(0, 116, 217, 0.5)
        );
    background-color: #dddddd;
}
.titan {
    top: 10px;
    left: 350px;
    background-image: 
        linear-gradient(
            rgba(255, 133, 27, 0.75),
            rgba(0, 0, 0, 0.75),
            rgba(255, 133, 27, 0.75)
        );
    background-color: #dddddd;
}
.io {
    top: 165px;
    left: 10px;
    background-image: 
        linear-gradient(
            rgba(0, 116, 217, 0.5),
            rgba(255, 133, 27, 0.25),
            rgba(0, 116, 217, 0.5)
        ),
        linear-gradient(
            to right,
            rgba(0, 116, 217, 0.5),
            rgba(255, 133, 27, 0.25),
            rgba(0, 116, 217, 0.5)
        );
    background-color: #dddddd;
}
.europa {
    top: 165px;
    left: 180px;    
    background-image:     
        linear-gradient(
            rgba(255, 133, 27, 0.5),
            rgba(255, 220, 0, 0.25),
            rgba(255, 255, 255, 0.5)
        ),
        linear-gradient(
            to right,
            rgba(255, 133, 27, 0.5),
            rgba(255, 220, 0, 0.25),
            rgba(255, 255, 255, 0.5)
        );
    background-color: #dddddd;  
}
.triton {
    top: 165px;
    left: 350px;
    background-image: 
        linear-gradient(
            rgba(0, 116, 217, 0.5),
            rgba(221, 221, 221, 0.75)
        ),
        linear-gradient(#ffdc00, #ffffff);
    background-color: none;
}
7 Симпатий

норм, у меня в двух местах отличалось, потому и 96%. особенно на последнем спутнике неожиданно цвет фона отсутсвует

Набрал 97 процентов, подсмотрел 4-й и 6-й элемент. Действительно неожиданно. В 6-м отсутствие фона, в 4-м направление первого градиента.

Спасибо, даже делать не стал, конченое задание.

18 Симпатий

html,
body {
margin: 0;
padding: 0;
}

body {
width: 565px;
height: 315px;
background-image: url(“cosmos.jpg”);
background-repeat: no-repeat;
background-position: 0 0;
}

.moon {
position: absolute;
width: 140px;
height: 140px;
border-radius: 50%;
box-shadow: 0 0 5px white;
}

.luna {
top: 10px;
left: 10px;
background-color: #ffdc00;
background-image:
linear-gradient(
rgba(221, 221, 221, 0.5),
rgba(221, 221, 221, 0.75)
)
;
}

.umbriel {
top: 10px;
left: 180px;
background-color: #ddd;
background-image:
linear-gradient(
rgba(0, 116, 217, 0.5),
rgba(255, 255, 255, 0.25),
rgba(0, 116, 217, 0.5)
),
linear-gradient(
to right,
rgba(0, 116, 217, 0.5),
rgba(255, 255, 255, 0.25),
rgba(0, 116, 217, 0.5)
)
}

.titan {
top: 10px;
left: 350px;
background-color: #dddddd;
background-image:
linear-gradient(
rgba(255, 133, 27, 0.75),
rgba(0, 0, 0, 0.75),
rgba(255, 133, 27, 0.75)
);
}

.io {
top: 165px;
left: 10px;
background-color: #ddd;
background-image:
linear-gradient(
rgba(0, 116, 217, 0.5),
rgba(255, 133, 27, 0.25),
rgba(0, 116, 217, 0.5)
),
linear-gradient(
to right,
rgba(0, 116, 217, 0.5),
rgba(255, 133, 27, 0.25),
rgba(0, 116, 217, 0.5)
);
}

.europa {
top: 165px;
left: 180px;
background-color: #ddd;
background-image:
linear-gradient(
rgba(255, 133, 27, 0.5),
rgba(255, 220, 0, 0.25),
rgba(255, 255, 255, 0.5)
),
linear-gradient(
to right,
rgba(255, 133, 27, 0.5),
rgba(255, 220, 0, 0.25),
rgba(255, 255, 255, 0.5)
);
}

.triton {
top: 165px;
left: 350px;
background-image:
linear-gradient(
rgba(0, 116, 217, 0.5),
rgba(221, 221, 221, 0.75)
),
linear-gradient(#ffdc00, #ffffff);
}

Спасибо. Судя по Вашему 100% коду, я просто задание неправильно поняла)))

Друзья, скажите, в чем смысл этого задания? Здесь учимся наугад подгонять или цель - выучить наизусть цвета в коде?

2 Симпатий

Полностью согласен!

И то, и другое. А если серьёзно, это это задание что-то типо “спортивная вёрстка”(по аналогии спортивного программирования), но не понятно зачем нам надо эта “спортивная вёрстка”.

Я извиняюсь, конечно, но такое ощущение, что постоянно скриптами тормозится выполнение заданий. Делаешь все один-в-один: то там что-то не так, то вообще ничего не показывает. Потом вырежешь, перезагрузишь страницу, вставишь - и уже 100 %.
Может, я , конечно, конспиролог и просто неуч.




вот что это значит?

В первом скриншоте между linear-gradient и скобкой стоит пробел, из-за него и ошибку выдало

Вы просто потеряли вторую(закрывающую грандиент) скобку при копировании, посмотрите внимательно.


у меня все настолько странно, что даже не получается просто залить спутник цветом. Что не так то?

Обратите, пожалуйста, внимание на код, который находится после закомментированного блока. Он перезаписывает значения свойств, которые задаёте вы. В том числе и background-color.

100%
html,
body {
margin: 0;
padding: 0;
}

body {
width: 565px;
height: 315px;
background-image: url(“cosmos.jpg”);
background-repeat: no-repeat;
background-position: 0 0;
}

.moon {
position: absolute;
width: 140px;
height: 140px;
border-radius: 50%;
box-shadow: 0 0 5px white;
}

.luna {
top: 10px;
left: 10px;
background-color: #ffdc00;
background-image: linear-gradient(rgba(221, 221, 221, 0.5),
rgba(221, 221, 221, 0.75));

}

.umbriel {
top: 10px;
left: 180px;
background-color: #dddddd;
background-image: linear-gradient(
rgba(0, 116, 217, 0.5),
rgba(255, 255, 255, 0.25),
rgba(0, 116, 217, 0.5)
),
linear-gradient(
to right,
rgba(0, 116, 217, 0.5),
rgba(255, 255, 255, 0.25),
rgba(0, 116, 217, 0.5)
);
}

.titan {
top: 10px;
left: 350px;
background-color: #dddddd;
background-image: linear-gradient(
rgba(255, 133, 27, 0.75),
rgba(0, 0, 0, 0.75),
rgba(255, 133, 27, 0.75)
)
}

.io {
top: 165px;
left: 10px;
background-color: #dddddd;
background-image: linear-gradient(
rgba(0, 116, 217, 0.5),
rgba(255, 133, 27, 0.25),
rgba(0, 116, 217, 0.5)
),
linear-gradient(
to right,
rgba(0, 116, 217, 0.5),
rgba(255, 133, 27, 0.25),
rgba(0, 116, 217, 0.5)
);
}

.europa {
top: 165px;
left: 180px;
background-color: #dddddd;
background-image: linear-gradient(
rgba(255, 133, 27, 0.5),
rgba(255, 220, 0, 0.25),
rgba(255, 255, 255, 0.5)
),
linear-gradient(
to right,
rgba(255, 133, 27, 0.5),
rgba(255, 220, 0, 0.25),
rgba(255, 255, 255, 0.5)
);
}

.triton {
top: 165px;
left: 350px;
background-color: transparent;
background-image:linear-gradient(
rgba(0, 116, 217, 0.5),
rgba(221, 221, 221, 0.75)
),
linear-gradient(#ffdc00, #ffffff);
}