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-м направление первого градиента.

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

22 лайка

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 и скобкой стоит пробел, из-за него и ошибку выдало

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


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

1 лайк

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

1 лайк

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);
}

Указан порядковый номер, а не номер градиента!

luna - 8, bgc - ffdc00;
umbrel - 11, 14
titan - 9
io - 10, 13
europa - 12, 15
triton - 7, 6, bgc - transparent

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);
}