lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

webIntroBioChapter4Title

lesson9Title

lesson10Title

lesson11Title

webIntroBioChapter1Title

lesson12Title

webIntroBioChapter2Title

lesson13Title

lesson14Title

webIntroBioChapter3Title

webIntroBioChapter5Title

webIntroBioChapter6Title

<html>
  <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>Website Title</title>
    <meta name="title" content="Website Title" />
    <meta name="description" content="#" />

    
    <meta property="og:title" content="Website Title" />
    <meta property="og:description" content="#" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="#" />

    <link rel="icon" type="image/x-icon" href="https://www.codefriends.net/icons/favicon.ico" />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
    />
    <link rel="canonical" href="https://www.example.com" />

    <link rel="stylesheet" href="./styles.css" />
    <script src="./index.js" defer></script>
  </head>

  <body>
    <header id="hero">
      <nav class="navbar">
        <div class="container">
          <span id="logo">
            <a href="#">Website Title</a>
          </span>
          <ul class="nav-menu">
            <li><a class="nav-link" href="#about">About</a></li>
            <li><a class="nav-link" href="#interests">Hobbies</a></li>
            <li><a class="nav-link" href="#memory">Memories</a></li>
            <li>
              <a class="nav-link btn btn-primary" href="#contact">Contact <i class="fas fa-arrow-right"></i></a>
            </li>
          </ul>
          <div class="hamburger">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
          </div>
        </div>
      </nav>

      <section class="header-container">
        <img
          class="profile-image"
          src="https://assets.codefriends.net/assets/images/bio-website/hero-image.png"
          alt="hero-image"
        />
        <h1 class="intro">Hello!</h1>

        <div class="content-text">
          <h2>I am {Name}</h2>
          <p>Thank you for visiting 🙂</p>
        </div>

        <a href="https://www.instagram.com/codefriends.korea/" class="social-media" target="_blank">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            fill="currentColor"
            class="bi bi-instagram"
            viewBox="0 0 16 16"
          >
            <path
              d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"
            />
          </svg>
        </a>
      </section>
    </header>

    <div class="division"></div>

    <section id="about" class="container">
      <div class="content-text">
        <h2>About</h2>
        <p>Let me introduce myself briefly!</p>
      </div>

      <div class="bio-container">
        <div class="bio-item">
          <h4>Date of Birth</h4>
          <p class="bio-text">2000.01.01</p>
        </div>

        <div class="bio-item">
          <h4>Location</h4>
          <p class="bio-text">USA</p>
        </div>

        <div class="bio-item">
          <h4>Age</h4>
          <p class="bio-text">25</p>
        </div>
      </div>
    </section>

    <div class="division"></div>

    <section id="interests" class="container">
      <div class="content-text">
        <h2>Hobbies</h2>
        <p>Check out the photos and videos 📹</p>
      </div>

      <div class="grid">
        <div onclick="gridImageClick(this)">
          <img
            src="https://assets.codefriends.net/assets/images/bio-website/gallery-1.jpeg"
            width="100%"
            height="100%"
            alt="설명 1"
            class="grid-image"
          />
        </div>
        <div onclick="gridImageClick(this)">
          <img
            src="https://assets.codefriends.net/assets/images/bio-website/gallery-2.jpeg"
            width="100%"
            height="100%"
            alt="설명 2"
            class="grid-image"
          />
        </div>
        <video
          src="https://assets.codefriends.net/assets/images/bio-website/gallery-3.mp4"
          class="grid-video"
          width="100%"
          height="100%"
          controls
        >
          Video
        </video>
        <iframe
          width="100%"
          height="100%"
          src="https://www.youtube.com/embed/YaEG2aWJnZ8"
          title="iframe example"
          allow="fullscreen;"
          >Iframe
        </iframe>
      </div>
    </section>

    <div id="modal">
      <div class="modal-content">
        <div class="modal-close">&times;</div>
        <div id="modal-image"></div>
        <div id="modal-text"></div>
      </div>
    </div>

    <div class="division"></div>

    <section id="memory" class="container">
      <div class="content-text">
        <h2>Memories</h2>
        <p>Preserving precious memories 📷</p>

        <div class="slideshow-container">
          <div class="my-slides fade">
            <img src="https://assets.codefriends.net/assets/images/bio-website/carousel-1.webp" class="slide-image" />
            <div class="slide-text">Image Description 1</div>
          </div>

          <div class="my-slides fade">
            <img src="https://assets.codefriends.net/assets/images/bio-website/carousel-2.jpeg" class="slide-image" />
            <div class="slide-text">Image Description 2</div>
          </div>

          <div class="my-slides fade">
            <img src="https://assets.codefriends.net/assets/images/bio-website/carousel-3.jpeg" class="slide-image" />
            <div class="slide-text">Image Description 3</div>
          </div>

          
          <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
          <a class="next" onclick="plusSlides(1)">&#10095;</a>
        </div>
        <br />

        
        <div>
          <span class="dot" onclick="currentSlide(1)"></span>
          <span class="dot" onclick="currentSlide(2)"></span>
          <span class="dot" onclick="currentSlide(3)"></span>
        </div>
      </div>
    </section>

    <div class="division"></div>

    <section id="contact" class="container">
      <div class="content-text">
        <h3 style="margin-top: 32px; margin-bottom: 12px">Feel free to contact me anytime!</h3>
        <a href="mailto:contact@codefriends.net">contact@codefriends.net</a>
      </div>
    </section>

    <footer id="footer">
      <div class="container">
        <p>Instagram & Youtube</p>
        <div class="social">
          <a href="#" target="_blank">
            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 448 512">
              <path
                fill="white"
                d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
              />
            </svg>
          </a>
          <a href="#" target="_blank">
            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 576 512">
              <path
                fill="white"
                d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
              />
            </svg>
          </a>
        </div>
        <div class="attribution">Built with <a href="https://www.codefriends.net">CodeFriends</a></div>
      </div>
    </footer>
  </body>
</html>

# HTML iframe Tag

The `<iframe>` tag allows you to display another webpage within your current webpage.

The embedded webpage will occupy a defined area within a frame on your webpage.

For instance, the following HTML code can be used to embed another webpage into your current webpage.

```html title="Display a page from https://www.example.com"
<iframe src="https://www.example.com"></iframe>
```

In the code above, the `src` attribute specifies the URL of the webpage you want to embed.

This example shows how to display the "https://www.example.com" webpage inside an `<iframe>` tag.

To display a YouTube video uploaded to your webpage, you need to know the URL of the YouTube video file.

However, it is impractical to directly include the video file due to its large size, and YouTube doesn't share direct access to video files as a means of copyright protection.

Nonetheless, many web pages still show YouTube videos, right?

YouTube provides an `<iframe>` tag to allow videos to be shared easily without the need for large file sizes while still protecting the rights of content creators.

```html title="YouTube iframe Example"
<iframe
  width="320"
  height="180"
  src="https://www.youtube.com/embed/W0DCi5kwURM"
  title="iframe example"
  allow="fullscreen;"
></iframe>
```

The above iframe displays a YouTube video on your website with a width of 320px and a height of 180px.

<iframe
  width="320"
  height="180"
  src="https://www.youtube.com/embed/W0DCi5kwURM"
  title="iframe example"
  allow="fullscreen;"
></iframe>

<br />
<br />

Here, "src" can be found by right-clicking on the YouTube video, selecting the `Copy embed code`, and then pasting the value into a text input.

Alternatively, conform to the format `https://www.youtube.com/embed/{YouTubeVideoID}` and replace `{YouTubeVideoID}` with the actual video ID.

For example, the unique ID of the YouTube video with the address [https://www.youtube.com/watch?v=AY5qcIq5u2g](https://www.youtube.com/watch?v=AY5qcIq5u2g) is `AY5qcIq5u2g`.

You would insert `"https://www.youtube.com/embed/AY5qcIq5u2g"` in the src, right?

Additionally, `title="iframe example"` sets the title of the iframe element, and `allow="fullscreen;"` enables the fullscreen button on the YouTube iframe.

This way, even without knowing the original address of the YouTube video file, you can display the uploaded video on your webpage using an iframe.

Now, let's place a YouTube video in the fourth grid item of the gallery!