OpenBook is for new grads who'd like to connect with a seasoned Pro in their field.
Ask real questions. Get real answers.
A service to new grads looking for advice from seasoned professionals. Quick turn around on this React based project. Connecting to external services such as LinkedIn and Greenhouse.
Tricky build with such a precise 10 column (faux 5 col) design. Alignment was crucial especially with the five grey column lines highlighting any jank throughout the responsive range.
Fixed nav contrast changing throughout sections, slider with nested accordian and bold scaling title design on the professions pages.
Strict 5 column layout makes precise responsive views extra important
![Strict 5 column layout makes precise responsive views extra important](https://www.datocms-assets.com/20458/1608743396-open-book-hero-responsive.gif?dpr=0.25 386w,https://www.datocms-assets.com/20458/1608743396-open-book-hero-responsive.gif?dpr=0.5 772w,https://www.datocms-assets.com/20458/1608743396-open-book-hero-responsive.gif?dpr=0.75 1158w,https://www.datocms-assets.com/20458/1608743396-open-book-hero-responsive.gif 1544w)
Faint grey lines making 5 columns dictate a precise layout from mobile to desktop
![Faint grey lines making 5 columns dictate a precise layout from mobile to desktop](/_next/image?url=https%3A%2F%2Fwww.datocms-assets.com%2F20458%2F1608702350-open-book-layout.jpg%3Fdpr%3D0.25%20370w%2Chttps%3A%2F%2Fwww.datocms-assets.com%2F20458%2F1608702350-open-book-layout.jpg%3Fdpr%3D0.5%20741w%2Chttps%3A%2F%2Fwww.datocms-assets.com%2F20458%2F1608702350-open-book-layout.jpg%3Fdpr%3D0.75%201111w%2Chttps%3A%2F%2Fwww.datocms-assets.com%2F20458%2F1608702350-open-book-layout.jpg%201482w&w=3840&q=75)
Full screen slider with nested accordian and 75% bg photo. Tricky
![Full screen slider with nested accordian and 75% bg photo. Tricky](/_next/image?url=https%3A%2F%2Fwww.datocms-assets.com%2F20458%2F1608702366-open-book-slider.jpg%3Fdpr%3D0.25%20370w%2Chttps%3A%2F%2Fwww.datocms-assets.com%2F20458%2F1608702366-open-book-slider.jpg%3Fdpr%3D0.5%20740w%2Chttps%3A%2F%2Fwww.datocms-assets.com%2F20458%2F1608702366-open-book-slider.jpg%3Fdpr%3D0.75%201110w%2Chttps%3A%2F%2Fwww.datocms-assets.com%2F20458%2F1608702366-open-book-slider.jpg%201480w&w=3840&q=75)
Step 1: Large responsive text with description accordian. Again abiding by columns
![Step 1: Large responsive text with description accordian. Again abiding by columns](/_next/image?url=https%3A%2F%2Fwww.datocms-assets.com%2F20458%2F1608702326-open-book-disciplines.jpg%3Fdpr%3D0.25%20402w%2Chttps%3A%2F%2Fwww.datocms-assets.com%2F20458%2F1608702326-open-book-disciplines.jpg%3Fdpr%3D0.5%20804w%2Chttps%3A%2F%2Fwww.datocms-assets.com%2F20458%2F1608702326-open-book-disciplines.jpg%3Fdpr%3D0.75%201206w%2Chttps%3A%2F%2Fwww.datocms-assets.com%2F20458%2F1608702326-open-book-disciplines.jpg%201609w&w=3840&q=75)
Step 2: More options holding user selections
![Step 2: More options holding user selections](/_next/image?url=https%3A%2F%2Fwww.datocms-assets.com%2F20458%2F1608702337-open-book-more-disciplines.jpg%3Fdpr%3D0.25%20402w%2Chttps%3A%2F%2Fwww.datocms-assets.com%2F20458%2F1608702337-open-book-more-disciplines.jpg%3Fdpr%3D0.5%20804w%2Chttps%3A%2F%2Fwww.datocms-assets.com%2F20458%2F1608702337-open-book-more-disciplines.jpg%3Fdpr%3D0.75%201206w%2Chttps%3A%2F%2Fwww.datocms-assets.com%2F20458%2F1608702337-open-book-more-disciplines.jpg%201609w&w=3840&q=75)
Step 3: Final selection before booking
![Step 3: Final selection before booking](/_next/image?url=https%3A%2F%2Fwww.datocms-assets.com%2F20458%2F1608702381-open-book-help.jpg%3Fdpr%3D0.25%20402w%2Chttps%3A%2F%2Fwww.datocms-assets.com%2F20458%2F1608702381-open-book-help.jpg%3Fdpr%3D0.5%20804w%2Chttps%3A%2F%2Fwww.datocms-assets.com%2F20458%2F1608702381-open-book-help.jpg%3Fdpr%3D0.75%201206w%2Chttps%3A%2F%2Fwww.datocms-assets.com%2F20458%2F1608702381-open-book-help.jpg%201608w&w=3840&q=75)
![Award Corner](/_next/image?url=https%3A%2F%2Fwww.datocms-assets.com%2F20458%2F1605644439-award-corner-dark.png&w=750&q=75)