Share
Explore

eLearning Homepage Review

Navbar Dropdown Menus
XL Screen Size
XL eLearning-Template.png

Notes:
The last child in the “Announcements” feed doesn’t have to have a line to separate.
The dropdown chevron: FontAwesome unicode: “f078”, also the chevron should transform on hover (see Header and Navbar example)
When you hover over the navbar in an empty area, the opacity is reduced to all the navbar links.
Lansing Community College eLearning Department and D2L Instructor Resources should have a drop shadow: #00000080 X: 0px Y: 3px Blur: 6px
Banner overlay should be: background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent 100%);
Default button font size should be 16px. (font-size: 1rem;)
The heading sizes are off a bit (and in the cards), check the mockup for the exact sizes.
Headings margin-bottom should be 15px.
The links, anchors, and header color should be: #012169 and hover #0072CE in the body copy.
Floating button should be background-color: #012169 and hover #0072CE.
Top Footer:
border-top should be 1px solid #7C878E
Small button font size should be 14px.
Under the “Locations” section, break the address from “Technology Learning Center 1101” and remove room number from “West Campus” and break address from “West Campus”
Bottom Footer:
Headings should be 18px.
Small button font size should be 14px.
Body copy should be 14px.
There is a copyright character below the bottom footer.

LG Screen Size
LG eLearning-Template.png
Notes:
See above for styling
The “CONTACT US” button seems to be trimmed, and should be 25px left and right.
The card text under the “Services” column doesn’t seem to be centered with the image.
MD Screen Size
MD eLearning-Template.png
Notes:
See above for styling
Buttons start to get smaller at this breakpoint, if not already.
The headings start to change size at this breakpoint, as well as SM and XS (see mockup for exact sizes).
There’s very little padding below the image in the cards, should be 15px all around the content.
The card should be at a smaller size image, heading, and text (see mockup)
Should have two columns “Services” and “Announcements” side-by-side.
The footer layout doesn’t look like the mockup. This is expected to be centered for SM and XS screen sizes.
SM Screen Size
SM eLearning-Template.png
Notes:
The banner image should be centered with the lady in the black coat.
The heading in the banner should be smaller SM size (see mockup)
The heading in the banner should be smaller MD size (see mockup)
The card text in the “Services” column doesn’t seem to be centered with the image.
The footer layout doesn’t look like the mockup. This is expected to be centered for SM and XS screen sizes.
XS Screen Size
XS eLearning-Template.png

Notes:
The banner image should be centered with the lady in the black coat.
The heading in the banner should be smaller SM size (see mockup)
The card text in the “Services” column doesn’t seem to be centered with the image.
If the text overflows, the max lines should be 2 for the heading. Nothing I noticed here but other mockups show examples.
The footer layout doesn’t look like the mockup. This is expected to be centered for SM and XS screen sizes.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.