Responsive

index.html

    <header class="header">
        <button class="open_menu">Open</button>
        <div class="logo">Logo</div>
        <nav class="nav">
            <ul class="main_menu">
                <a href="#">
                    <li>Option1</li>
                </a>
                <a href="#">
                    <li>Option2</li>
                </a>
                <a href="#">
                    <li>Option3</li>
                </a>
                <a href="#">
                    <li>Option4</li>
                </a>
            </ul>
            <button class="close_menu">Close</button>
        </nav>
    </header>
    <main class="content">
        <div class="line">
            <section>
                <h1>Title responsive</h1>
                <article>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus neque sed neque dictum, ut volutpat sapien placerat.
                    Nullam egestas tempor nibh vitae pharetra. Fusce id suscipit nunc. In ultrices eu risus id condimentum.
                    Etiam dignissim quam a diam sagittis, non tincidunt turpis ultrices. Maecenas scelerisque tortor nisl,
                    at dapibus justo faucibus eu. Mauris volutpat turpis eu sem sollicitudin, et tempor eros faucibus. Nulla
                    ac lorem metus. Fusce venenatis mauris a mi tincidunt feugiat. Vivamus eget maximus nulla. Cras fermentum
                    facilisis accumsan.
                </article>
            </section>
            <section>
                <h1>Title responsive</h1>
                <article>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus neque sed neque dictum, ut volutpat sapien placerat.
                    Nullam egestas tempor nibh vitae pharetra. Fusce id suscipit nunc. In ultrices eu risus id condimentum.
                    Etiam dignissim quam a diam sagittis, non tincidunt turpis ultrices. Maecenas scelerisque tortor nisl,
                    at dapibus justo faucibus eu. Mauris volutpat turpis eu sem sollicitudin, et tempor eros faucibus. Nulla
                    ac lorem metus. Fusce venenatis mauris a mi tincidunt feugiat. Vivamus eget maximus nulla. Cras fermentum
                    facilisis accumsan.
                </article>
            </section>
            <section>
                <h1>Title responsive</h1>
                <article>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus neque sed neque dictum, ut volutpat sapien placerat.
                    Nullam egestas tempor nibh vitae pharetra. Fusce id suscipit nunc. In ultrices eu risus id condimentum.
                    Etiam dignissim quam a diam sagittis, non tincidunt turpis ultrices. Maecenas scelerisque tortor nisl,
                    at dapibus justo faucibus eu. Mauris volutpat turpis eu sem sollicitudin, et tempor eros faucibus. Nulla
                    ac lorem metus. Fusce venenatis mauris a mi tincidunt feugiat. Vivamus eget maximus nulla. Cras fermentum
                    facilisis accumsan.
                </article>
            </section>
        </div>
        <div class="line">
            <section>
                <h1>Title responsive</h1>
                <article>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus neque sed neque dictum, ut volutpat sapien placerat.
                    Nullam egestas tempor nibh vitae pharetra. Fusce id suscipit nunc. In ultrices eu risus id condimentum.
                    Etiam dignissim quam a diam sagittis, non tincidunt turpis ultrices. Maecenas scelerisque tortor nisl,
                    at dapibus justo faucibus eu. Mauris volutpat turpis eu sem sollicitudin, et tempor eros faucibus. Nulla
                    ac lorem metus. Fusce venenatis mauris a mi tincidunt feugiat. Vivamus eget maximus nulla. Cras fermentum
                    facilisis accumsan.
                </article>
            </section>
            <section>
                <h1>Title responsive</h1>
                <article>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus neque sed neque dictum, ut volutpat sapien placerat.
                    Nullam egestas tempor nibh vitae pharetra. Fusce id suscipit nunc. In ultrices eu risus id condimentum.
                    Etiam dignissim quam a diam sagittis, non tincidunt turpis ultrices. Maecenas scelerisque tortor nisl,
                    at dapibus justo faucibus eu. Mauris volutpat turpis eu sem sollicitudin, et tempor eros faucibus. Nulla
                    ac lorem metus. Fusce venenatis mauris a mi tincidunt feugiat. Vivamus eget maximus nulla. Cras fermentum
                    facilisis accumsan.
                </article>
            </section>
            <section>
                <h1>Title responsive</h1>
                <article>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus neque sed neque dictum, ut volutpat sapien placerat.
                    Nullam egestas tempor nibh vitae pharetra. Fusce id suscipit nunc. In ultrices eu risus id condimentum.
                    Etiam dignissim quam a diam sagittis, non tincidunt turpis ultrices. Maecenas scelerisque tortor nisl,
                    at dapibus justo faucibus eu. Mauris volutpat turpis eu sem sollicitudin, et tempor eros faucibus. Nulla
                    ac lorem metus. Fusce venenatis mauris a mi tincidunt feugiat. Vivamus eget maximus nulla. Cras fermentum
                    facilisis accumsan.
                </article>
            </section>
        </div>
    </main>
    <script src="responsive.js"></script>

script.js

document.querySelector('.open_menu').onclick = function() {
    document.querySelector('.nav').classList.add('active_menu');
};

document.querySelector('.close_menu').onclick = function() {
    document.querySelector('.nav').classList.remove('active_menu');
};

document.documentElement.onclick = function(event) {
    if (event.target === document.documentElement) {
        document.documentElement.classList.remove('active_menu');
    }
};

style.css

html {
    font-size: medium; /* this creates the base to the 'rem' measure works in all devices. */
}

body {
    margin: 0 auto;
    width: 90%;
    text-align: center; /* this make the site be centrlized */
    max-width: 1400px; /* this will make the site be centralized in big screens like smart tvs */
}

/* mobile first */
.header {
    width: auto;
}

.nav {
    display: none;
}

.main_menu {
    text-align: left;
    font-family: 'Lucida Sans', Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.3rem;
    width: auto;
    margin-right: 2rem;

}

.main_menu > a {
    display: block;
    text-decoration: none;
    list-style-type: none;
    color: black;
}

 div > section {
    max-width: 50rem; /* this makes the boxes with texts fit in the screen and use vertical heigh to fill the texts */
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    padding: 1rem;
    margin-bottom: 1rem;
    display: inline-block;
    text-align: left;
    background-color: cornflowerblue;
}

.open_menu {
    width: 4rem;
    height: 2rem;
    float: left;
    margin-top: 1rem;
    margin-bottom: .5rem;
    vertical-align: center;
}

.active_menu {
    display: inline-block;
    background-color: cornflowerblue;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    padding-bottom: 1rem;
}

.main_menu > a {
  color: white;
}

.disable_menu {
    display: none;
}

.logo {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 3rem;
    color: white;
    width: 12rem;
    height: 3.5rem;
    float: right;
    margin-top: 1rem;
    margin-bottom: .5rem;
    background-color: cornflowerblue;
}

/* desktops */
@media only screen and (min-width: 1200px) {
    div > section {
        max-width: 20rem;
    }

    .open_menu, .close_menu {
        display: none;
    }
    .nav {
        display: block;
        margin-left: 1rem;
    }
    .main_menu > a {
        display: inline-block;
        color: black;
    }

    .logo {
        margin-top: 0;
        margin-right: 4rem;
    }

    .line {
        display: inline-block;
    }

    section:nth-child(2) {
        margin-left: 1rem;
        margin-right: 1rem;
    }
    
}