- using css grid | mobile-first workflow
This is a solution to the Space tourism website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for each of the website's pages depending on their device's screen size
- See hover states for all interactive elements on the page
- View each page and be able to toggle between the tabs to see new information
- Converts website design elements and mockups into CSS, JavaScript (JS), and HTML code
- Create the website guideline
- Use the templet in the guide to build a website
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- Mobile-first workflow
/* -- grid template -- */
.number-title{
grid-area: title;
}
.grid-container--destination > picture {
grid-area: image;
}
.grid-container--destination > .tab-list {
grid-area: tabs;
}
.grid-container--destination > .destination-info {
grid-area: content;
}
.grid-container--destination{
grid-template-areas:
'. title title .'
'. image tabs .'
'. image content .';
}
/* -- blur effect -- */
.primary-navigation {
backdrop-filter: blur( 2rem);
}
- Github - @chia-liu
- Thanks for Frontend Mentor challenge built by Scrimba, and Kevin Powell