Test your knowledge and make this page responsive. Bootstrap is included so take advantage and use it. Feel free to post to Netlify and share your links. We would love to see your work.
-
Import Roboto from google fonts and make it the body font
-
Make the navbar and the footer transparent so that the rocket image can be seen. Make sure the text on the navbar can be easily read. The text color should be the following: --cf-light: #ebebeb;
-
Add the rocket logo to the navbar. Make sure the logo is sized correctly on all break points. Add links for Blog and About.
-
Make the rocket landing page image responsive on all break points. The landing page rocket should always be on right third of the horizontal space of the page. The rocket should never be placed underneath the CTA text on any break point. On the portrait mobile breakpoint place the CTA text underneath the image. The rocket should be centered on the small portrait breakpoint.
-
Add a color that is layered under the landing page image. The color should be --cf-darkblue: #00223d; If the image does not cover the entire horizontal space this color will be the background.
-
Add a three line CTA (Call To Action) and a button. The Title is on two lines and should be stacked closely on top of each other. The font-size for the title should be larger but responsive on all breakpoints. Add a subtitle underneath the title. The width of the subtile should be equal to the width of the longest title, and the font-size of the subtitle should be smaller than the title font. Hint: use font-size and letter-spacing. Add a button for the user to click on that reads Start Today! Import the font Racing Sans One for the titles. Use Fira Sans for the sub title. The fonts can be found on google fonts.
-
The font size should be responsive and sized correctly on all breakpoints. Hint: use rem and media queries.
-
Add a copyright symbol to the footer with a year. The copyright should be centered in the footer.
-
Publish to Netlify and show the world!
