How do I post HTML template examples here?

How do I post HTML examples here? Every time I do it, it actually creates the images in the thread and I don’t want to do that. Very confusing. Trying to share an example of a template because I am confused on how to change a color of a button, but it won’t let me share it without basically showing the whole “site”.

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

I am trying to change the color of the buttons to blue but I don’t know where to do that

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-pink.css">    
    <title>Links website</title>
    <script src="https://unpkg.com/feather-icons"></script>
    <style>
    body {
      background: url("https://www.w3schools.com/howto/img_link_tree_template2_bg.jpg"); /* The image used for background */
    }

    .container {
      width: 100%;
      height: 100%;
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
    }


    .links-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 20px;
    }

    .links-container a {
      width: 80%;
    }

    .w3-theme-l1:hover {
      background-color: #f279a1 !important;
    }

    .margin-top-2 {
      margin-top: 32px;
    }

    .bottom {
      width: 100%;
      text-align: center;
      width: auto;
      font-weight: bolder;
    }

    .bottom span {
      color: #ed4d82;
    }

    .bottom svg {
      stroke: #ed4d82;
      fill: #ed4d82;
    }

    @media (min-width: 768px) {
      .link {
        width: 100%;
      }
    }
    @media (min-width: 576px) {
      .container {
        max-width: 540px;
      }
    }
    </style>
  </head>
  <body>
    <!-- Content container -->
    <div class="container">

      <!-- Image and name container. Change to your pictue here. -->
      <div style="text-align: center">
        <img src="https://lh3.googleusercontent.com/5dNemF0vmWcSB1viVDMRtgPWDgpK2Sz-ovMTjsPrKAisNXmaLdHeZBC38JuBeuq7uKlrefQU31v14v2BfQE04kjGGG0a8g2vM7fRjHSBP7vjBy8mfPwY6wUgydkjvSTfW9WxecfL5sLO9s5eF6JVPLDAsXFRlPg4lDXF820_BuP-57bOt0etgbqnnLhCRUB3eMJmEwnv1qqHFeBBL382emT-lx3dr1aIBrh8TkcIgGR_1iWiHyEpzhr-svVfWfhT9X1c5Tyt1lMDVcseaqmlauCGFjVt4wn5NoBxw5HnMJT2uSKI2NHmuB7OLEd3uQ1OmYYhcx8WkbKVOtnfJVNS9pPd--hz8yBzOSW8lKg72XB1ZsRrq_6Td1uzZIDE9pEIL2clYBrV-uGAEScaNfGQ2CR3u7hBJ3nEI-1Cd7QOJmCfFXv60sEnk2debAYNaI_0zseaLyo_P5wQT2kON68yR9NUkFi8uZ-QfWJ8ZwlMwOYZFkHys23u_KNCaPALoYDz-Pl4SCxbneWopoHE1RLfFoGBwVPtl3Y_tzxHkMPiKYGpcikkk0sx_UKT3rYzEioJPCaF6dGzuHsZ-1XySfaNVU91-1VgiDctmpa0efY04kL7KNLU-qTTs37bOEKA3SnhLEnK7ADdHSraEIzPiNoyw9eiJYdeckN9VHBF_KbkAVPy4JfJBY7VUkmxVW0uV-HtGPfn2x5VllP11vdmVGACUeYonlELzGvxUlOlUiobjc4TviBqCYaa5CDPdvWH4Q=s200-no?authuser=0" class="w3-margin" alt="image" width="150px" height="150px" style="border-radius: 50%;">
        <p><span class="name w3-padding w3-pink w3-round" style="font-weight: bolder;">Hi, I'm Tyler!</span></p>
        <p style="font-weight: bolder;">Check out my links!</p>
      </div>

      <!-- Links section 1. Replace the # inside of the "" with your links. -->
      <h4 class="margin-top-2" style="text-align: center;">MY SOCIAL NETWORKS</h4>
      <div class="links-container">
        <!-- <a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Facebook</a> !-->
        <!-- <a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Instagram</a> !-->
        <!-- <a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Twitter</a> !-->
        <a href="https://www.linkedin.com/in/tyler-mcmichael-44384a138/" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">LinkedIn</a>
      </div>

      <!-- Links section 2. Replace the # inside of the "" with your links. -->
      <h4 class="margin-top-2" style="text-align: center;">MY CV</h4>
      <div class="links-container">
        <a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Curriculum Vitae</a>
      </div>

      <!-- Links section 3. Replace the # inside of the "" with your links. -->
      <h4 class="margin-top-2" style="text-align: center;">MY BLOG</h4>
      <div class="links-container">
        <a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Hashnode</a>
      </div>

      <!-- Links section 3. Replace the # inside of the "" with your links. -->
      <h4 class="margin-top-2" style="text-align: center;">MY BUSINESS</h4>
      <div class="links-container">
        <a href="#" class="w3-button w3-round-xlarge w3-theme-l1 w3-border link" target="_blank">Business</a>
      </div>

      <!-- Bottom section 3 -->
      <div class="bottom margin-top-2 w3-padding w3-round">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
        <span style="vertical-align: 7px;"> 2021 - Jane Doe</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
      </div>
      <!-- Footer. This section contains an ad for W3Schools Spaces. You can leave it to support us. -->
      <footer class="w3-container w3-center w3-padding-48">
        <a class="w3-margin-bottom" href="https://www.w3schools.com/spaces" title="This website was made with W3schools Spaces. Make your own free website today!" target="_blank">
          <img src="https://spaces.w3schools.com/logo_4x.png" alt="This website was made with W3schools Spaces. Make your own free website today!" width="50" height="50">
        </a> 
      <!-- End footer -->
      </footer>
    </div>
    <script>
      feather.replace()
    </script>
  </body>  
</html>