Create a leadership page template with a logo, navigation in the header and footer, and a custom “Leaders” module. You can recreate the finished example in the screenshot above, or customize your page within the guidelines listed below.
When you are finished building your page, fill out the form at the bottom of this page with your details and a link to your work. Once you've submitted this form, please return to the learning center and click the "Check my work" button for this exercise to indicate that you're finished with the course and ready to be graded.
Folder and files: Three files are required: A drag and drop template, a custom module, and a CSS file. All files must be contained in a folder with the following naming structure: “CMS dev ”.
Revision history: All files used in this practicum must be exclusively revised by you.
All content must be centered and 1100 pixels wide on large screens.
The header and footer should have background colors that extend the full width of the browser window.
The leaders module must have a working responsive grid with gutters between items that can accommodate any number of items. We recommend using flexbox, but you are free to use whichever CSS technique you prefer.
The page must be responsive. The exact methodology and degree of responsiveness is up to you, but the content must flex with the window. Practicums with fixed width columns that break when the window is resized will be rejected. See illustration above for example of flexible content.
Navigation: The header and footer must use the same menu module. This menu must be at least two levels deep. In the footer secondary levels should be showing and styled.
Must contain a repeatable group of fields for image, leader name, and leader title. See this article for details on repeating groups.
Fields must be legibly and intuitively labeled (For example: Leader Image, Leader Name).
Must be 4 equal columns wide on large screens and 2 equal columns wide on screens below 900px.
Leader name and leader title must appear semi-transparent above image and animate to full opacity on hover. See illustration above for example of animation effect.
Must be used twice in template (in the example this is Board of directors and Management team)
Repeating group must contain at least 5 default entries at the template level. See illustration below for
All code must be valid and functional. The exact details are up to you, but practicums with broken or invalid code will be rejected.
CSS cannot contain important tags. Note: this is a requirement of this practicum for testing purposes and not necessarily a universal style recommendation as you may have valid conventions for using important in other projects.