Frontend Mentor - Space tourism website solution

This is a solution to the Space tourism website challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshots
  • Links
• My process
  • Built with
  • What I did
  • Continued development
  • Useful resources
• Author

Overview

The challenge

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

Screenshots

Index

Destination

Crew

Technology

Links

• Solution URL: Add solution URL here
• Live Site URL: Live link

My process

Built with

• Semantic HTML5 markup
• TailwindCss
• Flexbox
• CSS Grid
• Mobile-first workflow
• Vanilla JavaScript

What I did

In order to make this looks same with design, I need to add some custom value to tailwind config.

theme: {
  extend: {
    fontSize: {
      'sm-base': ['0.9375rem'],
      '1xxl': ['5em'],
      '2xxl': ['9.375em'],
    },
    letterSpacing: {
      '2.7ls': '0.16875em',
      '2.36ls': '0.1475em',
      '4.75ls': '0.29685em'
    },
    height: {
      '532': '33.25em'
    },

    width: {
      '515': '32.1875em'
    }
  },
  fontFamily: {
    'bellefair': ['Bellefair', 'Helvetica', 'Arial', 'sans-serif'],
    'barlow': ['"Barlow"'],
    'barlow-condensed': ['"Barlow Condensed"'],
  }
},

There is no special things to describe here. Just normally style website in dev tool with tailwind and copy, paste it in editor.

Continued development

Later, I will make this better. But no plan right now.

Useful resources

• Tailwind Documentation - I usually look documentation

Author

• Website - Aung Htet Paing
• Frontend Mentor - @ahp-sooyaa
• Twitter - @aunghte23771311