<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
    <link rel="stylesheet" href="./assets/style.css">
    <link rel="stylesheet" href="./assets/style800.css" media="(max-width:800px)">
</head>

<body>
    <!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
    <link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./assets/css/style800.css" media="(max-width:800px)">

</head>

<body>

<input id="close-menu" class="close-menu" type="checkbox" aria-label="Close menu" role="button">
<label class="close-menu-label" for="close-menu" title="close menu"></label>
<aside class="menu white-bg">
    <div class="main-content menu-content">
        <h1 onclick="getElementById('close-menu').checked = false;">
            <a href="#home">LOGO</a>
        </h1>

        <nav>
            <ul onclick="getElementById('close-menu').checked = false;">

                <li><a href="#intro">INTRO</a></li>
                <li><a href="#grid-one">MY GRID</a></li>
                <li><a href="#gallery">GALLERY</a></li>
                <li><a href="#contact">CONTACT</a></li>
                <li><a href="/admin" target="_blank">Admin</a></li>
            </ul>
        </nav>
    </div>
</aside>


<div class="menu-spacing"></div>

<section id="home" class="intro main-bg section">
    <div class="main-content intro-content">
        <div class="intro-text-content">
            <h2>HTML 5 | CSS3 | JS  6</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur rerum eos ipsa rem accusantium voluptas quas
            unde quos magnam non, explicabo sequi. Facilis illo numquam quis, eaque quos voluptates sequi.</p>
        </div>
        <div class="intro-img">
            <img src="assets/images/javascript.svg" alt="Logo de HTML, CSS e JS.">
        </div>
    </div>
</section>

<section id="intro" class="white-bg section">
    <div class="main-content top3-content">
        <h2>Lorem ipsum dolor sit.</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quia hic ut voluptates ex, illo adipisci ipsum autem quibusdam laboriosam
        architecto recusandae velit fuga voluptate ipsa tempora? Pariatur, consectetur aperiam.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere voluptatem non enim tenetur, esse quibusdam atque unde eaque voluptates provident
        eius assumenda excepturi consequuntur iure quas asperiores tempora? Rem, incidunt?</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est ex pariatur laudantium tenetur perferendis doloribus, recusandae eos nulla id
        exercitationem quasi magnam quae sapiente beatae illo dolores. Doloremque, incidunt perferendis.</p>
    </div>
</section>

<section id="grid-one" class="grid-one main-bg section">
    <div class="main-content grid-one-content">
        <h2 class="grid-main-heading">My Grid</h2>
        <div class="grid">

    <%for (let index = 0; index < dados.length; index++) {%>
    <tr>
        <td><%=dados[index].titulo%></td>
        <br>
        <td><%=dados[index].texto%></td>
        <br>
        <td><%=dados[index].enviado%></td>

    </tr>

    <%}%>

        </div>
    </div>
</section>

<section id="gallery" class="grid-one white-bg section">
    <div class="main-content grid-one-content">
        <h2 class="grid-main-heading">Gallery</h2>
        <div class="grid">
            <div class="gallery-img">
                <img src="http://source.unsplash.com/random/360x360?r=1" alt="random image from unsplash" />
            </div>
            <div class="gallery-img">
                <img src="http://source.unsplash.com/random/360x360?r=2" alt="random image from unsplash" />
            </div>
            <div class="gallery-img">
                <img src="http://source.unsplash.com/random/360x360?r=3" alt="random image from unsplash" />
            </div>
            <div class="gallery-img">
                <img src="http://source.unsplash.com/random/360x360?r=4" alt="random image from unsplash" />
            </div>
            <div class="gallery-img">
                <img src="http://source.unsplash.com/random/360x360?r=5" alt="random image from unsplash" />
            </div>
            <div class="gallery-img">
                <img src="http://source.unsplash.com/random/360x360?r=6" alt="random image from unsplash" />
            </div>
        </div>
    </div>
</section>


<section id="contact" class="intro main-bg section">
    <div class="main-content intro-content">
        <div class="contact-form">
            <h2 class="grid-main-heading">Contact</h2>
            <form action="" method="post">
                <fieldset class="form-grid">

                    <div class="form-group">
                        <label for="first-name">First name</label>
                        <input type="text" name="first_name" id="first-name" placeholder="Your name">
                    </div>

                    <div class="form-group">
                        <label for="last-name">last name</label>
                        <input type="text" name="last_name" id="last-name" placeholder="Your last name">
                    </div>

                    <div class="form-group">
                        <label for="email">E-mail</label>
                        <input type="email" name="email" id="email" placeholder="Your e-mail">
                    </div>

                    <div class="form-group full-width">
                        <label for="message">Message</label>
                        <textarea name="message" id="message" cols="30" rows="10" placeholder="Your message"></textarea>
                    </div>

                    <div class="form-group full-width">
                        <button type="submit">Send message</button>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</section>

<footer id="footer" class="footer white-bg">
    <p><a rel="nofollow" target="_blank" href="#">| Feito com <span class="heart">❤</span> | AC - 1 Trimestre - INW | BD2 | LP2 |</a></p>
    <p><a href="/admin" target="_blank"></a></p>
</footer>

    <a class="back-to-top" href="#">▷</a>
</body>
</html>