Layout

Our website layout is carefully crafted based on the Bootstrap guidelines, ensuring a responsive and mobile-first design.
By leveraging Bootstrap's powerful layout system, we have created a seamless and intuitive user experience across all devices.

Breakpoint

We adopt the Bootstrap guideline and define the device as follows:

Mobile Tablet Deaktop
Bootstrap Breakpoint Extra Small Medium XX-Large
Dimensions <576px ≥768px ≥1400px
Container 100% 720px 1320px
Mobile
Dimensions: <576px
Container: 100%
Tablet
Dimensions: ≥768px
Container: 720px
Desktop
Dimensions: ≥1400px
Container: 1320px

Learn more about Bootstrap Breakpoint & Container

Header

The header is fixed at the top of the page layout and will remain visible when the page is scrolled. Allow users to access the navigation bar more easily.

Desktop Width: 100%
Height: 65px
Tablet Width: 100%
Height: 65px
Mobile Width: 100%
Height: 65px
Style
Background - Light Mode
#000C27
Background - Dark Mode
#000C27, Opacity:0.5
Text
#FFFFFF
Learn more about Navigation component.

Side Menu

The side menu is used when operating pages with more diverse units to assist users in finding the corresponding page. For example, member center pages.

Desktop Width: 400px
Height: Auto Flow
The height will adjust automatically depending on the content
Tablet Width: 100%
Height: Auto Flow
The height will adjust automatically depending on the content
Mobile Width: 100%
Height: Auto Flow
The height will adjust automatically depending on the content
Style
Background
#3E4C72
Text
#FFFFFF