[!]
[=title "Week 6 Homework"]
[=content-]
<p>
This homework is going to be entirely about background images.
You don't need to know anything not covered in <a href="week-6-backgrounds.html">Week 6: Backgrounds</a>, but
if you're curious or want a deeper understanding, check out <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background">MDN on the background property</a>.
It's complicated because it's powerful!
</p>
<p>
I recommend doing all of this in a new page with its own CSS file.
</p>
<h2>Part 1: Space Age</h2>
<p>
Download a good space age background image (there are some nice options on <a href="https://www.freepik.com/free-photos-vectors/space-background">freepik</a>).
Use it to set the background image of a new page on your website.
<span class="goal">Background image set properly</span>.
The background image should cover the entire area, should not stretch, and should not repeat - which single CSS property will achieve that?
</p>
<p>
Note that Freepik is <i>licensed</i> - you can't just use the images. Fortunately, their "free tier" only requires you to put an <i>attribution</i> on your site.
Find Freepik's free-license attribution on your own, and use it correctly on your webpage. <span class="goal">Correct attribution</span>
</p>
<p>
(Note that if you use a service other than freepik it is <b>your responsibility</b> to handle the license correctly - I <i>will</i> be checking.)
</p>
<h2>Part 2: Planetarium</h2>
<p>
Let's make your space page more interesting! Download some planets (<a href="https://www.pics4learning.com/results.php?search=cat&query=Space_Planets">Pics4Learning</a> has them, and you don't need
to worry about P4L licensing because this is a school project).
</p>
<p>
Add a few <code>div</code>'s to the page (with their own IDs) and give them planet backgrounds <span class="goal">divs with planet backgrounds</span>.
Use <code>padding</code> to increase the size of the divs, and use the background properties to set the position and size
of the planets within their divs <span class="goal">planet backgrounds are sized and positioned</span>.
</p>
<p>
There's no required end result here, so be creative!
</p>
<h2>Part 3: Words</h2>
<p>
Using <i>whatever technique you think is best</i>, add some Lorem text to the page between some planets.
<span class="goal">lorem text</span>
Make sure that it's <i>readable</i>:
e.g. white on black or black on white, not black on black.
<span class="goal">text is readable</span>.
Web developers have to be aware of contrast!
</p>
<h2>Extra Credit</h2>
<p>
I'll add 3 points of extra credit if you can figure out how to use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/gradient/linear-gradient">linear-gradient</a> to
set a spaceage-ey glow effect on your website, and 7 if you can
find and download a space font and correctly apply it to your text (this is hard!).
</p>
<h2>Self-Study</h2>
<p>
We'll be learning about fonts soon - to get a head start, read on your own about the font properties in CSS
and the <code>@font-face</code> declaration.
</p>
<p>
Also, read <a href="https://css-tricks.com/complete-guide-css-grid-layout/">CSS-Tricks' Grids page</a> - it's an excellent
dive into more advanced layouts. In particular, using a grid to complete
this homework is a far better solution than the intended one - I won't assign extra credit if you do so, but I will consider
it to be a fully correct solution.
</p>
<h2>Submission</h2>
<p>
Upload your page to your Github site and e-mail me the link, no later than February 20th.
</p>
[/]
[#template.html]