- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Challenge: Satellites</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="moon luna"></div>
<div class="moon umbriel"></div>
<div class="moon titan"></div>
<div class="moon io"></div>
<div class="moon europa"></div>
<div class="moon triton"></div>
</body>
</html>
CSS
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;
}
/*
Mixed colors for planetary satellites
Solid backgrounds:
1. satellite - ?
background-color: #ffdc00;
2. satellite - ?
background-color: #dddddd;
3. satellite - ?
background-color: #dddddd;
4. satellite - ?
background-color: #dddddd;
5. satellite - ?
background-color: #dddddd;
Gradients:
6. satellite - ?
Gradient no. 1
linear-gradient(#ffdc00, #ffffff)
7. satellite - ?
Gradient no. 2
linear-gradient(
rgba(0, 116, 217, 0.5),
rgba(221, 221, 221, 0.75)
)
8. satellite - ?
Gradient no. 3
linear-gradient(
rgba(221, 221, 221, 0.5),
rgba(221, 221, 221, 0.75)
)
9. satellite - ?
Gradient no. 4
linear-gradient(
rgba(255, 133, 27, 0.75),
rgba(0, 0, 0, 0.75),
rgba(255, 133, 27, 0.75)
)
10. satellite - ?
Gradient no. 5
linear-gradient(
rgba(0, 116, 217, 0.5),
rgba(255, 133, 27, 0.25),
rgba(0, 116, 217, 0.5)
)
11. satellite - ?
Gradient no. 6
linear-gradient(
rgba(0, 116, 217, 0.5),
rgba(255, 255, 255, 0.25),
rgba(0, 116, 217, 0.5)
)
12. satellite - ?
Gradient no. 7
linear-gradient(
rgba(255, 133, 27, 0.5),
rgba(255, 220, 0, 0.25),
rgba(255, 255, 255, 0.5)
)
13. satellite - ?
Gradient no. 8
linear-gradient(
to right,
rgba(0, 116, 217, 0.5),
rgba(255, 133, 27, 0.25),
rgba(0, 116, 217, 0.5)
)
14. satellite - ?
Gradient no. 9
linear-gradient(
to right,
rgba(0, 116, 217, 0.5),
rgba(255, 255, 255, 0.25),
rgba(0, 116, 217, 0.5)
)
15. satellite - ?
Gradient no. 10
linear-gradient(
to right,
rgba(255, 133, 27, 0.5),
rgba(255, 220, 0, 0.25),
rgba(255, 255, 255, 0.5)
)
*/
.luna {
top: 10px;
left: 10px;
background-color: transparent;
background-image: none;
}
.umbriel {
top: 10px;
left: 180px;
background-color: transparent;
background-image: none;
}
.titan {
top: 10px;
left: 350px;
background-color: transparent;
background-image: none;
}
.io {
top: 165px;
left: 10px;
background-color: transparent;
background-image: none;
}
.europa {
top: 165px;
left: 180px;
background-color: transparent;
background-image: none;
}
.triton {
top: 165px;
left: 350px;
background-color: transparent;
background-image: none;
}
- Goal
- Result
- Overlay
- Differences
- ?
Press Compare to send your code for review.