Main

Alternative to create the best display layout

One

Main Header
Header Left
Header Center
Header Right
Main Content
Content Side
Content Side
Content Info
Main Footer
Footer Left
Footer Center
Footer Right
<template>
    <div class="main">
        <div class="main-layout">
            <div class="main-app">
                <span class="text-center">Main Header</span>
                <div class="main-header hitam">
                    <div class="header-left">Header Left</div>
                    <div class="header-center">Header Center</div>
                    <div class="header-right">Header Right</div>
                </div>
                <span class="text-center">Main Content</span>
                <div class="main-content">
                    <div class="content-side biru">Content Side</div>
                    <div class="content-app biru">Content Side</div>
                    <div class="content-info biru">Content Info</div>
                </div>
                <span class="text-center">Main Footer</span>
                <div class="main-footer hitam">
                    <div class="footer-left">Footer Left</div>
                    <div class="footer-center">Footer Center</div>
                    <div class="footer-right">Footer Right</div>
                </div>
            </div>
        </div>
    </div>
</template>

Two

Konten
main-side
Main Header
Header Left
Header Center
Header Right
Main Content
Content Side
Content Side
Content Info
Main Footer
Footer Left
Footer Center
Footer Right
<template>
    <div class="main">
        <div class="main-layout">
            <div class="main-side hitam">
                Konten<br/>main-side
            </div>
            <div class="main-app">
                <span class="text-center">Main Header</span>
                <div class="main-header hitam">
                    <div class="header-left">Header Left</div>
                    <div class="header-center">Header Center</div>
                    <div class="header-right">Header Right</div>
                </div>
                <span class="text-center">Main Content</span>
                <div class="main-content">
                    <div class="content-side biru">Content Side</div>
                    <div class="content-app biru">Content Side</div>
                    <div class="content-info biru">Content Info</div>
                </div>
                <span class="text-center">Main Footer</span>
                <div class="main-footer hitam">
                    <div class="footer-left">Footer Left</div>
                    <div class="footer-center">Footer Center</div>
                    <div class="footer-right">Footer Right</div>
                </div>
            </div>
        </div>
    </div>
</template>

Three

Konten
main-side
Main Header
Header Left
Header Center
Header Right
Main Content
Content Side
Content Side
Content Info
Main Footer
Footer Left
Footer Center
Footer Right
Konten
main-info 
<template>
    <div class="main">
        <div class="main-layout">
            <div class="main-side hitam">
                Konten<br/>main-side
            </div>
            <div class="main-app">
                <span class="text-center">Main Header</span>
                <div class="main-header hitam">
                    <div class="header-left">Header Left</div>
                    <div class="header-center">Header Center</div>
                    <div class="header-right">Header Right</div>
                </div>
                <span class="text-center">Main Content</span>
                <div class="main-content">
                    <div class="content-side biru">Content Side</div>
                    <div class="content-app biru">Content Side</div>
                    <div class="content-info biru">Content Info</div>
                </div>
                <span class="text-center">Main Footer</span>
                <div class="main-footer hitam">
                    <div class="footer-left">Footer Left</div>
                    <div class="footer-center">Footer Center</div>
                    <div class="footer-right">Footer Right</div>
                </div>
            </div>
            <div class="main-info hitam">
                Konten<br/>main-info
            </div>
        </div>
    </div>
</template>