lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

webLightPracticeChapter3Title

webLightPracticeChapter1Title

webLightPracticeChapter2Title

webLightPracticeChapter4Title

webLightPracticeChapter5Title

webLightPracticeChapter6Title

<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>

# Styling Buttons in Menus

Let's learn how to style buttons in menus and add icons.

```css title="Button Style in Menu"
.navbar .btn {
  margin-right: 24px;
}
```

- `margin-right: 24px;`: Sets the right margin to 24px.

```css title="Icon Style in Menu Button"
.fas.fa-arrow-right {
  margin-left: 8px;
  font-size: 14px;
}
```

- `margin-left: 8px;`: Sets the left margin to 8px, providing a natural spacing for the arrow icon within the button.
- `font-size: 14px;`: Sets the font size of the icon to 14px.

<br />

## How to Add Icons

There are several ways to add icons.

Besides drawing them yourself or using images, you can also utilize icon libraries like `fontawesome`.

```html title="Importing fontawesome Library"
<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
  integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
  crossorigin="anonymous"
/>
```

To use icons, include the fontawesome library's CSS file via the `<link>` tag.

```html title="Using fontawesome Library"
<i class="fas fa-arrow-right"></i>
```

With the fontawesome library, you can easily add icons by specifying the icon's name in the class attribute, such as `fas fa-arrow-right`.

Additionally, you can explore various icons on [fontawesome's official website](https://fontawesome.com/search) and use them in your project.

How to Style Buttons and Add Icons in Menus