In this lesson, we’ll use much of what we’ve learned and some of what is still to come to build a project that I call a splash page.
This project will act as a profile or digital business card that features links to your identity online. Once you launch the page, resize the screen to see how it behave responsively (it even looks good on a mobile device).
Check out the code below to see how some clever programmers from weloveiconfonts.com figured out how to make icons out of the same protocol that is used for fonts.
<!-- Group of Elements -->
See the Pen eEGmA by Michael Macfadden (@mmacfadden) on CodePen.
Project Set Up
For this project, create a new folder in Code Anywhere called “splash.” Inside that folder create a file called “index.html” and a folder called “assets.” Inside that folder create a file called “main.css” and one more folder called “img.”
Copy the CSS Reset from below to your main.css file.
- HTML: index_html.pdf
- CSS: main_css.pdf
- CSS Reset: http://meyerweb.com/eric/tools/css/reset/
- Web fonts: https://www.google.com/fonts
- Icons: http://weloveiconfonts.com/
Right click the images below and “Save images as…” then upload them to your img folder.
Once you’ve completed the project above. Customize and personalize your splash page by completing the following:
- Add a new Background image
- Insert your First Name and Last Initial
- Personalize the bio
- Personalize font icons and links
- Choose new background colors