<header id="header">
  <img id="header-img" src="https://i.ibb.co/X2V7x8t/Temple-Stay-Logo.jpg" alt="Temple-Stay-Logo" border="0">
  <nav id="nav-bar">
    <ul>
      <li><a class="nav-link"  href="#About">About</a></li>
      <li><a class="nav-link" href="#Reservation">Reservation</a></li>
      <li><a class="nav-link" href="#Gallery">Gallery</a></li>
      <li><a class="nav-link" href="#Video">Video</a></li>
    </ul>
  </nav>
</header>
<main>
  <h1 id="About">What is Temple Stay?</h1>
  <p>Temple stay is one way to get a deeper understanding of Korean culture. Through this program you will learn about Korean culture and Buddhism through chanting, meditation, conversation over tea with a Buddhist monk and enjoy Buddhist meals.</p>

<h1 id="Reservation">Reservation</h1>

<div class="flex-container">
  <img id="reservation-img" src="https://i.ibb.co/7Wjj3M7/Kopie-von-20181104-102949.jpg" alt="Kopie-von-20181104-102949" border="0">
<form id="form" action="https://www.freecodecamp.com/email-submit">
  <div class="item">
  <label for="prices">Participation Fee</label>
  <table id="prices" name="prices">
  <tr>
    <th></th>
    <th>Adult</th>
    <th>Children over 6</th>
    <th>Children under 6</th>
  </tr>
  <tr>
    <td>Per Day</td>
    <td>20,000 Won</td>
    <td>15,000 Won</td>
    <td>0 Won</td>
  </tr>
</table>
    </div>
  <div class="item">
  <label for="starting_date">Check-In:</label>
  <input type="date" id="starting_date" name="starting_date">
  <label for="ending_date">Check-Out:</label>
  <input type="date" id="ending_date" name="ending_date">
  </div>
  <br>
  <div class="item">
  <label for="participants">Number of Participants:</label>
  <br>
  <select id="adult_participants" name="adult_participants">
    <option value="adult">Adults</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  <select id="children_participants" name="children_participants">
    <option value="child">Children</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  <select id="children_participants" name="children_participants">
    <option value="baby">Children under 5</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  </div>
  <br>
  <div class="item">
  <label for="email">Please leave your email address:</label>
  <br>
  <input id="email" name="email" type="email" placeholder="honkildong@naver.com"></input>
  </div>
<br>
<button id="submit">Reservation</button>
</form>
</div>
<h1 id="Gallery">Gallery</h1>
<img class="gallery_image" src="https://i.ibb.co/RNtkFMX/img1.jpg" alt="img1" border="0">
<img class="gallery_image" src="https://i.ibb.co/MVT4LGx/img2.jpg" alt="Temple-Stay-Logo" border="0">
<img class="gallery_image" src="https://i.ibb.co/QrCFd8b/img3.jpg" alt="Temple-Stay-Logo" border="0">
<img class="gallery_image" src="https://i.ibb.co/VtCTqzF/img4.jpg" alt="Temple-Stay-Logo" border="0">
<img class="gallery_image" src="https://i.ibb.co/JyjwgYy/img5.jpg" alt="Temple-Stay-Logo" border="0">


<h1 id="Video">Video</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Yy62SwWM_zA?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</main>

* {
    font-family: 'Nanum Gothic', sans-serif;
}

#header-img {
  width: 3%;
  border-radius: 25px;
  margin: 15px 15px 15px 15px;
  left: 100px;
  position: absolute;
  z-index: 999;
  top: 0;
}

body {
  background-color: white;
}

li {
  display: inline-block;
}

#header {
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  padding: 25px 0 25px 200px;
  line-height: 20px;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #ecdfce;
}

.nav-link {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  font-weight: bold;
  color: #636b66;
  display: block;
  padding-right: 50px;
  float: left;
  display: block;
  text-align: center;
}

h1 {
  color: rgb(240, 191, 76);
  text-align: center;
}

p::first-letter {
  font-size: 200%;
  color: rgb(240, 191, 76);
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

.gallery_image {
  height: 20em;
  padding-left: 10px;
  box-shadow: 5px 5px 5px grey;
}

#reservation-img {
  width: 40%;
  padding: 0 20px 0 15px;
}

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#form {
  padding: 30px;
  border: solid;
  background-color: #ecdfce;
}

label {
  color: #636b66;
  font-weight: bold;
}

.item {
  padding: 10px;
}

#submit {
  float: right;
  padding: 10px 15px;
  font-size: 20px;
  font-weight: bold;
  background-color: rgb(240, 191, 76);
}

#prices {
  background-color: white;
}

@media screen and (max-width: 600px) {
  #header-img {
    width: 10%;
  }
}

main {
  padding: 18px;
  margin-top: 130px;
  height: 2000px;
}

/***********
User Story #1: My product landing page should have a header element with a corresponding id="header".

User Story #2: I can see an image within the header element with a corresponding id="header-img". A company logo would make a good image here.

User Story #3: Within the #header element I can see a nav element with a corresponding id="nav-bar".

User Story #4: I can see at least three clickable elements inside the nav element, each with the class nav-link.

User Story #5: When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.

User Story #6: I can watch an embedded product video with id="video".

User Story #7: My landing page has a form element with a corresponding id="form".

User Story #8: Within the form, there is an input field with id="email" where I can enter an email address.

User Story #9: The #email input field should have placeholder text to let the user know what the field is for.

User Story #10: The #email input field uses HTML5 validation to confirm that the entered text is an email address.

User Story #11: Within the form, there is a submit input with a corresponding id="submit".

User Story #12: When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit).

User Story #13: The navbar should always be at the top of the viewport.

.navbar {
  overflow: hidden;
  background-color: #666666;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: #eeeeee;
  text-align: center;
  padding: 15px 18px;
  text-decoration: none;
  font-size: 18px;
}

.container {
  padding: 18px;
  margin-top: 35px;
  height: 2000px;
}


User Story #14: My product landing page should have at least one media query.

User Story #15: My product landing page should utilize CSS flexbox at least once. ****/
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js