Three Things in a Series (pt 1): Pick three objects that share some common theme and represent them using CSS shapes. Keep your representations simple and abstract.
Your code should be properly indented and contain no errors - this means that your CSS selectors are correct, your syntax is well-formatted and your property names/values are valid.
We learned about CSS pseudoselectors - terms we can use with our usual selectors to access certain properties or groupings of elements. For example, adding :hover to a tag name, class or ID will apply styles only when the cursor is placed over that element. There are many different pseudoselectors - see the reference material at the bottom of the page for documentation.
Here is the code for the planet drawing that we made in class:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="planet">
<div id="planetBody" class="planetBody"></div>
<div id="planetRing"></div>
<div id="planetCover" class="planetBody"></div>
<div class="star" id="star1"></div>
<div class="star" id="star2"></div>
<div class="star" id="star3"></div>
</div>
</body>
</html>
body {
background-color: black;
}
#planet {
position: relative;
}
.planetBody {
background-color: goldenrod;
border-radius: 100px;
width: 200px;
position: absolute;
top: 80px;
left: 80px;
}
#planetBody {
height: 200px;
}
#planetCover {
height: 100px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
#planetRing {
border: 30px solid red;
width: 300px;
height: 300px;
border-radius: 180px;
position: absolute;
top: 0;
transform: rotateX(70deg);
}
.star {
width: 10px;
height: 10px;
background-color: white;
border-radius: 5px;
position: absolute;
transition: box-shadow 1s;
}
.star:hover {
box-shadow: 0 0 10px 5px white;
}
#star1 {
top: 20px;
left: 20px;
}
#star2 {
top: 250px;
left: 50px;
}
#star3 {
top: 350px;
left: 300px;
}
We learned a lot of new CSS properties in class, like transform, transition, border-radius and box-shadow. You should start getting comfortable with reading documentation for new CSS properties so you know the right way to use them. The MDN CSS Reference is a great place to start.