In this lab, you'll have the opportunity to design a student newsletter. The content already exists -- you just need to style it to the best of your ability!
-
Fork and clone this repository.
-
Navigate to the
settings
tab on GitHub, then choosePages
from the menu. Configure theBuild and Deployment
to have aSource
ofDeploy from a branch
and select themain
branch for deployment. Deployments can take a few minutes, so get started on the lab, and then be sure to check the deployment after you have made a few commits. -
Open up the repository in VSCode. Follow the instructions below to complete the Lab.
To complete this lab, you will need to add the following styles. If you're unclear about any of the instructions below, remember that you can check the provided image to see what exactly the appearance should be.
Hint: while styling, you can use the following to help see your elements and understand their overall placement and size:
* {
border: 1px solid gold;
}
- Set all paragraph text to have a font of
sans-serif
. - Set all heading text to have a font of
serif
. - Set all heading text to be centered.
- Set all anchor elements to have no text decoration.
- Set all anchor elements to have a color of
#4242EA
. - Set all unordered lists to have no list-style.
- Set all
span
elements inside the footer to have afont-weight
of700
. - Set all paragraph text inside the element with the class of
weather
to have a font size of40px
. - Set all articles inside the
.above-the-fold
element to have adisplay
value ofinline-block
. - Set the
.weather
element to have awidth
of300px
. - Set the
.weather
element to have a2px gray border
on all sides. - Set the
.breaking-news
element to have a top/down padding of0px
and a left/right padding of30px
. - Set the image inside of the
.breaking-news
element to have awidth
of200px
. - Set all articles inside the element with the class of
.click-bait
to have adisplay
ofinline-block
. - Set all articles inside the element with the class of
.click-bait
to have awidth
of250px
. - Set all articles inside the element with the class of
.click-bait
to have16px
of margin and padding on all sides. - Set all articles inside the element with the class of
.click-bait
to havebox-sizing
set toborder-box
. - Set all articles inside the element with the class of
.below-the-fold
to have adisplay
ofinline-block
. - Set the image inside the element with the class of
.below-the-fold
to have adisplay
ofinline-block
. - Set the image inside the element with the class of
.below-the-fold
to have16px
of margin and padding on all sides. - Set the image inside the element with the class of
.below-the-fold
to have awidth
of200px
. - Set the div inside the element with the class of
.below-the-fold
to have awidth
of500px
.
Once your complete with the above tasks, your page should look something like the image below.
Once you've completed these tasks, continue to style your page. Consider adding specific styles to all list items, only list items under the "Libraries" heading, the introductory paragraph, and the "Hardest Bug So Far" section.
Better alignment of inline elements. There are a few ways to approach this. Display Flex, and related properties, are recommended