Main Page: Difference between revisions
No edit summary |
No edit summary Tag: Reverted |
||
| Line 1: | Line 1: | ||
__NOTOC__ | __NOTOC__ | ||
<style> | |||
/* On mobile (screens up to 600px wide), force each table cell to display as a full-width block */ | |||
@media screen and (max-width: 600px) { | |||
.responsive-table th, | |||
.responsive-table td { | |||
display: block; | |||
width: 100%; | |||
} | |||
} | |||
</style> | |||
<!-- =========================== --> | <!-- =========================== --> | ||
<!-- HERO / BANNER --> | <!-- HERO / BANNER --> | ||
<!-- =========================== --> | <!-- =========================== --> | ||
<div style="text-align:center; margin:1em 0;"> | <div style="text-align:center; margin:1em 0;"> | ||
<!-- Replace ' | <!-- Replace 'inzoi banner.jpg' with your banner file name --> | ||
[[File:inzoi banner.jpg|400px|center|alt=inZOI Banner|link=inZOI]] | [[File:inzoi banner.jpg|400px|center|alt=inZOI Banner|link=inZOI]] | ||
<div style="font-size: 2em; font-weight: bold; margin-top:0.5em; color:#2c3e50;"> | <div style="font-size: 2em; font-weight: bold; margin-top:0.5em; color:#2c3e50;"> | ||
| Line 15: | Line 25: | ||
<!-- =========================== --> | <!-- =========================== --> | ||
<!-- | <!-- ABOUT --> | ||
<!-- =========================== --> | <!-- =========================== --> | ||
<div style="max-width: 800px; margin: 0 auto; font-size: 1.1em; line-height: 1.6; text-align: center; color:#333;"> | <div style="max-width: 800px; margin: 0 auto; font-size: 1.1em; line-height: 1.6; text-align: center; color:#333;"> | ||
| Line 26: | Line 36: | ||
<!-- MAIN SECTIONS --> | <!-- MAIN SECTIONS --> | ||
<!-- =========================== --> | <!-- =========================== --> | ||
<!-- Using a table with 2 columns per row --> | <!-- Using a table with 2 columns per row on desktop, 1 per row on mobile --> | ||
<div style="margin: 1.5em auto; max-width: 1000px;"> | <div style="margin: 1.5em auto; max-width: 1000px;"> | ||
{| style="width:100%; border-spacing:1em; margin:0 auto; background-color:#fafafa;" | {| class="responsive-table" style="width:100%; border-spacing:1em; margin:0 auto; background-color:#fafafa;" | ||
|- | |- | ||
! style="width:50%; vertical-align:top; padding:1em; background-color:#eff7ff; border:1px solid #ccc;" | '''News & Updates''' | ! style="width:50%; vertical-align:top; padding:1em; background-color:#eff7ff; border:1px solid #ccc;" | '''News & Updates''' | ||