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 the current webpage.

This embedded webpage will occupy a frame within a specific area of your webpage.

For example, using the following HTML code, you can embed another webpage within the current page.

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

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

The above example shows the webpage "https://www.example.com" inside an `<iframe>` tag.

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

However, embedding video files directly into your webpage is impractical due to their large size, and YouTube does not provide direct URLs to video files to protect content rights.

Yet, many webpages display YouTube videos.

YouTube offers an `<iframe>` tag that allows you to embed videos without the burden of the video size, while protecting the content creator's rights and sharing useful content widely.

```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 within your webpage at 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 />

The "src" attribute can be found by right-clicking on the YouTube video, selecting `Copy embed code`, and pasting the copied value into your text editor.

Alternatively, follow the format `https://www.youtube.com/embed/{YouTubeVideoID}`, replacing `{YouTubeVideoID}` with the video's unique ID.

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

So you would input `src="https://www.youtube.com/embed/AY5qcIq5u2g"`.

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

By using an iframe in this way, you can display YouTube videos on your webpage without needing the original video URL.

Now, let's put a YouTube video in the fourth grid item of the gallery.