<!DOCTYPE html>
<html lang="en">
<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">
    <!-- BOOTSTRAP -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <title>NYC</title>
</head>
<body>
    <nav>
        <%- include('./partials/nav.ejs')%>
    </nav>
    <img class="logo" src="/Logo/shutterstock_1236166135.jpg" alt="">
    <h3 class="city-description">
        With a globally recognizable skyline and 8.4 million people who call it home, New York City is bursting with diversity and excitement, from the iconic attractions you've seen on TV and in the movies to hidden gems waiting to be uncovered. Each of the five boroughs: The Bronx, Brooklyn, Manhattan, Queens and Staten Island; has a distinctive flavor, while individual neighborhoods maintain identities all their own. Walkable streets and access to the subway, buses and cabs make it easy to get from neighborhood to neighborhood. Whether it's your first visit or your hundredth, there's always something new to do. 
    </h3>
    <div class="container">
        <div class="card" style="width: 28rem;">
            <p class="titles" >Restaurants</p>
            <div class="card-body">
                <img src="https://metropolisny.com/wp-content/uploads/2020/07/bigstock-New-York-City-Usa-May-314744143-900x538.jpg" alt="Card image cap" class="card-img-top">
                <% for (let i=0; i<restaurants.length; i++) { %>
                    <div class="card-title"><%= restaurants[i].name%>
                        <h4 class="card-text"><%= restaurants[i].location%></h4>
                        <h5 class="card-text"><%= restaurants[i].hours%></h5>
                    </div>
                <% } %>
            </div>
        </div>
        <div class="card" style="width: 28rem;">
            <p class="titles" >Landmarks</p>
            <div class="card-body">
                <img src="https://www.telegraph.co.uk/content/dam/travel/Spark/collette/statue-of-liberty-xlarge.jpg" alt="Card image cap" class="card-img-top">
                <% for (let i=0; i<landmarks.length; i++) { %>
                    <div class="card-title"><%= landmarks[i].name%>
                        <h4 class="card-text"><%= landmarks[i].location%></h4>
                        <h5 class="card-text"><%= landmarks[i].hours%></h5>
                    </div>
                    <% } %>
                </div>
            </div>
            <div class="card" style="width: 28rem;">
                <p class="titles">Events</p>
                <div class="card-body">
                <img src="https://www.lavocedinewyork.com/wp-content/uploads/2020/11/terry-sanders-natale-new-york-rockcenter_tree_113020_lvn-620x430.jpg" alt="Card image cap" class="card-img-top">
                <% for (let i=0; i<events.length; i++) { %>
                    <div class="card-title"><%= events[i].name%>
                        <h4 class="card-text"><%= events[i].location%></h4>
                        <h5 class="card-text"><%= events[i].hours%></h5>
                    </div>
                <% } %>
            </div>
        </div>
    </div>
    <div class="container2">
        <p>Leave a comment!</p>
        <a class="comment-button" href="/comments/new">Leave Comment</a>
        <a class="comment-button" href="/nyc/comments">All NYC Comments</a> <br> <br>
        <% for (let i=0; i<comments.length;i++) { %>
            <a href="/comments/<%=comments[i]._id%>"><%=comments[i].name%></a> <br>
            <%=comments[i].comment%> <br><br>
        <% } %>
    </div>
    <footer>
        <%- include('./partials/footer.ejs')%>
    </footer>
</body>
</html>
<style>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Advent Pro', sans-serif;
    text-align: center;
    color: #A0F2EA;
}
body {
    height: 100vh;
    background-color: #E1B598;
}
.container2 {
    border: 2px solid white;
    border-radius: 10px;
    background-color: #1B0273;
    box-shadow: 5px 5px 20px #A0F2EA;
    color: #A0F2EA;
    word-wrap: break-word;
    margin: auto;
    margin-top: 100px;
    margin-bottom: 100px;
    width: 70%;
    padding: 10px;
    text-align: left;
}
.container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    font-size: 30px;
    margin-top: 50px;
    color: #A0F2EA;
}
.card {
    border: 2px solid white;
    background-color: #1B0273;
    border-radius: 10px;
    box-shadow: 5px 5px 20px #A0F2EA;
}
.card-img-top {
    height: 150px;
    width: 237px;
    text-align: center;
    margin: 0 auto;
    display: block;
    border: 2px solid #E1B598;
    border-radius: 10px;
}
.card-body {
    text-align: center;
    margin: 10px;
    background-color: #1B0273;
    color: #A0F2EA
}
.card-title {
    font-size: 24px;
    border: 2px solid #E1B598;
    margin: 10px;
    border-radius: 10px;
    background-color: #1B0273;
    color: #A0F2EA;
}
.city-description {
    text-align: center;
    font-size: 20px;
    display: inline-block;
    width: 80%;
    font-family: 'Bebas Neue', cursive;
    color: #1B0273;
    margin-top: 50px;
}
.logo {
    width: 400px;
    height: 250px;
    border: 3px solid #1B0273;
    border-radius: 10px;
    box-shadow: 5px 5px 20px #A0F2EA;
    margin-top: 50px;
}

.car-art {
    display: none;
}

.airplane-art {
    display: none;
}

.main {
    border: 2px solid white;
    background-color: #1B0273;
}

.footer {
    border: 2px solid white;
    background-color: #1B0273;
}

a { text-decoration: none; color: white;}
a:visited { text-decoration: none; color:white; }
a:hover { text-decoration: none; color:white; }
a:focus { text-decoration: none; color:white; }
a:hover, a:active { text-decoration: none; color:white }

.comment-button {
    border: 1px solid white;
    border-radius: 3px;
    color: white;
    padding: 5px;
    float: right;
}

.comment-button:hover {
    background-color: #A0F2EA;
    color: #1B0273;
    transition: ease-in 0.2s;
}


@media only screen and (max-width: 985px) {
.container {
    display: inline-block;
    text-align: center;
}

.card {
    margin: 25px;
}
}
</style>
