HTML Sections

Page is divided into several sections outlined below.


    <header></header>
    <nav></nav>
    <main></main>
    <section></section>
    <article></article>
    <aside></aside>
    <details></details>
    <summary></summary>
    <footer></footer>

Code For the Layout


    /*DISPLAY GRID*/
.grid{
    display: grid;

/* CREATE TEMPLATE*/

    /*Layout Columns*/
    grid-template-columns: 1fr 1fr;

    /*Layout Rows*/
    grid-template-rows: 1fr 1fr 1fr 1fr;

    /*Layout Content*/
    grid-template-areas:
    "title title"
    "header header"
    /*Use punctuation if you DONT want something displayed*/
    "header ." /*Now the right side would not show*/
    "sidebar content"
    "footer footer";

    /*To Create a Gap Between Grid*/
    grid-gap 10px;

/*CREATE GAP ON THE SIDES OF THE CONTENT*/

    /*Add main content size (800px 800px) */
    grid-template-columns: 1fr 800px 800px 1fr;

    /*Layout Rows*/
    grid-template-rows: 1fr 1fr 1fr 1fr;

    /*Layout Content*/
    grid-template-areas:
    ". title title ." /*Need to add punctuation before and after*/
    ". header header ."
    ". sidebar content ."
    ". footer footer .";
}

}
.title{
    grid-area: title;
    background-color: #96ba87;
}
.header{
    grid-area: header;
    background-color: #ff6600;
}
.sidebar{
    grid-area: sidebar;
    background-color: #0099ff;
}
.content{
    grid-area: content;
    background-color: #CEE3F3;
}
.footer{
    grid-area: footer;
    background-color: darkcyan;
}

1 - ODD Title

4 - EVEN Content