Project: Web Front-End Design 1
Header and Primary Navigation
This project's header background image is one that I myself created. As for the name "Ark Racer", it is my nickname, which I myself came up with many years ago. Just below the header is the primary navigation, which contains five example hyperlinks. All of these hyperlinks simply link back to the same page (that is, this project's only page).
Example "Posts" Section
The example "Posts" section of this project contains six example blog post previews. This section is meant to demonstrate various visual effects such as blurred backgrounds and image special-effects. Each preview contains the following components:
- Featured Image
- Featured Image Caption
- Post Title
- Post Date
- Post Author
- Tags
- Comment Count
- Post Excerpt
- "Read More…" Button
Example Call-to-Action Buttons
This project has a section containing four different sets of example Call-to-Action buttons; each of these sets contains a large button, a medium-sized button, and a small button. For this project, all of the Call-to-Action buttons have the same text: "Click Me!". Of course, on a production website, any Call-to-Action buttons would likely have unique text without words like "click" or "tap".
Example Subscription Form
This project contains an example subscription form (as this project is not a production website, this subscription form isn't actually connected to any subscription). On this form, when the e-mail address input field receives the keyboard focus, the placeholder text "Enter your e-mail address." is hidden using an animation; when this input field loses the keyboard focus, the placeholder is returned to its default position using another animation.
