<div id="wrap">
        <header id="header">
            <div class="container"></div>
        </header>
        <nav id="nav">
            <div class="container"></div>
        </nav>
        <section id="section">
            <div class="contents container">
                <div class="left">
                    <div class="box1"></div>
                </div>
                <div class="right">
                    <div class="box2"></div>
                    <div class="box3"></div>
                    <div class="box4"></div>
                </div>
            </div>
        </section>
        <footer id="footer">
            <div class="container"></div>
        </footer>
    </div>
    <style>
        #wrap {}
        #header {
            height: 100px;
            background-color: #EEEBE9;
        }
        #nav {
            height: 100px;
            background-color: #B9AAA5;  
        }
        #section {
           height: 780px;
           background-color: #886F65;  
        }
        #footer {
            height: 100px;
            background-color: #4E342E;  
        }

        .container {
            margin: 0 auto;
            width: 1200px;
            height: inherit;
            display: flex;
            flex-wrap: wrap;
            background-color: rgba(0, 0, 0, 0.3);
        }

        .contents .left {
            width: 100%;
            height: 100px;
        } 
        .contents .left .box1 {
            width: 100%;
            height: 100px;
            background-color: #74574A;
        } 
        .contents .right {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            height: 680px;
        } 
        .contents .right .box2 {
            width: 100%;
            height: 200px;
            background-color: #684D43;
        } 
        .contents .right .box3 {
            width: 50%;
            height: 480px;
            background-color: #594139;
        } 
        .contents .right .box4 {
            width: 50%;
            height: 480px;
            background-color: #4A352F;
        } 

        @media(max-width:1220px){
            .container{
                width: 96%;
            }
                .contents .left {
                width: 100%;
                height: 100px;
            } 
            .contents .left .box1 {
                width: 100%;
                height: 100px;
            } 
            .contents .right {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                height: 680px;
            } 
            .contents .right .box2 {
                width: 100%;
                height: 200px;
            } 
            .contents .right .box3 {
                width: 50%;
                height: 480px;
            } 
            .contents .right .box4 {
                width: 50%;
                height: 480px;
            } 

        }

        @media(max-width:780px){
            .container{
                width: 100%;
            }
            .contents .left {
                width: 30%;
                height: 780px;
            } 
            .contents .left .box1 {
                width: 100%;
                height: 780px
            } 
            .contents .right {
                display: flex;  
                flex-wrap: wrap;
                width: 70%;
                height: 780px;
            } 
            .contents .right .box2 {
                width: 100%;
                height: 260px;
            } 
            .contents .right .box3 {
                width: 100%;
                height: 260px;
            } 
            .contents .right .box4 {
                width: 100%;
                height: 260px;
            } 

        }

        @media(max-width:480px){
            
            .contents .left {
                width: 100%;
                height: 150px;
            } 
            .contents .left .box1 {
                width: 100%;
                height: 150px;
            } 
            .contents .right {
                display: flex;  
                flex-wrap: wrap;
                width: 100%;
                height: 630px;
            } 
            .contents .right .box2 {
                width: 100%;
                height: 210px;
            } 
            .contents .right .box3 {
                width: 100%;
                height: 210px;
            } 
            .contents .right .box4 {
                width: 100%;
                height: 210px;
            } 
        }

    </style>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.