title: Responsive iframe and button
body: <p>I've been struggling for a few days to get a responsive iframe, so I decided to ask for help.</p>
  <p>The question is the following, I created a code for a video carousel for a page of mine, but I am not able to make the iframe have the proper size on mobile, on desktop apparently it looks great, but on mobile the video has very large black bars ...</p>
  <p>Here's my current code:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot; &gt;
  
  &lt;head&gt;
  
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    
  &lt;link rel=&quot;apple-touch-icon&quot; type=&quot;image/png&quot; href=&quot;https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png&quot; /&gt;
  &lt;meta name=&quot;apple-mobile-web-app-title&quot; content=&quot;CodePen&quot;&gt;
  
  &lt;link rel=&quot;shortcut icon&quot; type=&quot;image/x-icon&quot; href=&quot;https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico&quot; /&gt;
  
  &lt;link rel=&quot;mask-icon&quot; type=&quot;image/x-icon&quot; href=&quot;https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg&quot; color=&quot;#111&quot; /&gt;
    
    
    &lt;link rel='stylesheet' href='https://unpkg.com/swiper@7.0.1/swiper-bundle.min.css'&gt;
  
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css?family=Rubik&quot;&gt;
    
  &lt;style&gt;
  /* ####################################
             SITON STYLES 
  ####################################### */
  
  .swiper-custom-next.swiper-button-disabled,
  .swiper-custom-prev.swiper-button-disabled
  {
    opacity: 2.0;
    
  }
  
  /* Zoom In on hover */
  .vid-thumb {
      overflow: hidden;
    display: block;
    width: auto;
    position: relative; 
    z-index: 1!important;
    border: #00f498 solid 2px;
    border-radius: 4px;
  }
  
  .vid-thumb img{
     display: block;
  }
  
  .swiper-slide:hover .desc{
    margin: 0px;
    padding: 0px;
    text-decoration: underline;
  }
  
  .swiper-slide:hover .titulo{
    margin: 0px;
    padding-bottom: 4px;
    text-decoration: none;
    line-height: 14px;
  }
  
  .vid-thumb img {
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transition: .3s ease-in-out;
      transition: .3s ease-in-out;
  }
  .vid-thumb:hover img {
      -webkit-transform: scale(1.08);
      transform: scale(1.08);
  }
  
  /* #####################
        SWIPER STYLES
  #######################*/
  .swiper-container-videos .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets {
    position: relative;
    top: 0px;
  }
  
  .swiper-container-videos .swiper-slide a {
    text-decoration: none;
    font-size: 12px;
    color: #ffffff;
    font-family: &quot;Rubik&quot;;
    font-weight: 400
  }
  @media only screen and (max-width: auto) {
    .swiper-container-videos .swiper-slide a {
      font-size: 1vw;
      line-height: 14px;
      font-family: &quot;Rubik&quot;;
    }
  }
  .swiper-container-videos  .selected.swiper-slide a .desc {
    font-weight: bold;
    font-family: &quot;Rubik&quot;;
    color: #fff;
    animation: glow 1s ease-in-out infinite alternate;
     position: relative;
     z-index: 1!important;
  }
  .swiper-container-videos  .selected {
    border-bottom: 2px solid #00f498;
  }
  /*  
  slidesPerView: &quot;auto&quot; so the width of each slide set by CSS */
  .swiper-container-videos .swiper-slide {
    max-width: 200px;
    width: 35%;
    text-align: center;
    font-size: clamp(12px, 1vw, 18px);
    background: blank;
    font-family: &quot;Rubik&quot;;
    color: #fff;
    font-weight: bold
  }
  
  .swiper-container-videos .swiper-slide a .desc {
    margin-top: 3px;
    margin-bottom: 3px;
  }
  
  .swiper-container-videos .swiper-slide img {
    height: auto;
    width: 100%;
  }
  
  .swiper-pagination-bullet-active {
      background: #00f498!important;
  }
  .swiper-pagination-bullet {
      width: 12px;
      height: 12px;
      background-color: #ffffff!important;
  }
  
  iframe {
    border: 4px solid;
    color: #00f498;
    -border-radius: 4px;
     position: relative;
    overflow: hidden;
    width: 100%;
  }
  
  @-webkit-keyframes glow {
    from {
      text-shadow: 0 0 5px #00F498, 0 0 10px #00F498, 0 0 15px #00BCAA, 0 0 20px #00BCAA, 0 0 25px #00BCAA, 0 0 30px #00BCAA, 0 0 35px #00BCAA;
  position: relative; z-index: -1!important; }
    
    to {
      text-shadow: 0 0 5px #00F498, 0 0 10px #00BCAA, 0 0 15px #00BCAA, 0 0 20px #00BCAA, 0 0 25px #00BCAA, 0 0 30px #00BCAA, 0 0 35px #00BCAA; 
  position: relative; z-index: -1!important;}
  &lt;/style&gt;
  
    &lt;script&gt;
    window.console = window.console || function(t) {};
  &lt;/script&gt;
  
    
    
    &lt;script&gt;
    if (document.location.search.match(/type=embed/gi)) {
      window.parent.postMessage(&quot;resize&quot;, &quot;*&quot;);
    }
  &lt;/script&gt;
  
  
  &lt;/head&gt;
  
  &lt;body translate=&quot;no&quot; &gt;
    &lt;div style=&quot;max-width: 730px; margin: auto; padding-bottom: 20px;&quot;&gt;
    &lt;container class=&quot;vid-main-wrapper clearfix&quot;&gt;
      &lt;!-- THE YOUTUBE PLAYER --&gt;
        &lt;iframe id=&quot;vid_frame&quot; src=&quot;https://www.youtube.com/embed/-2yHBjfhC-s?autoplay=1&amp;rel=0&amp;showinfo=0&amp;autohide=1'&quot; frameborder=&quot;0&quot; width=&quot;800&quot; height=&quot;415&quot; allow=&quot;autoplay&quot; allowfullscreen&gt;&lt;/iframe&gt;
      &lt;/div&gt;
    &lt;/container&gt;
  
    &lt;section id=&quot;extra wrapper&quot; style=&quot;position: relative; padding-right: 40px; padding-left: 40px; background: #000000; border-style: solid none solid none; color:#00f498 &quot;&gt;
  
      &lt;!-- CUSTOM ARROWS --&gt;
      &lt;button title=&quot;Next&quot; class=&quot;swiper-custom-next&quot; style=&quot;position: absolute; padding: 10px 2px; right: 1px;top: 32%; z-index: 100;
      display: inline-block;cursor: pointer;&quot;&gt;     
  &lt;svg style=&quot;position: relative; top: 1px;&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot;&gt;&lt;g class=&quot;nc-icon-wrapper&quot; fill=&quot;#111111&quot;&gt;&lt;polygon fill=&quot;#111111&quot; points=&quot;4.9,15.7 3.4,14.3 9.7,8 3.4,1.7 4.9,0.3 12.6,8 &quot;&gt;&lt;/polygon&gt;&lt;/g&gt;&lt;/svg&gt;
        &lt;/button&gt;
      &lt;button title=&quot;Prev&quot; class=&quot;swiper-custom-prev&quot; style=&quot;position: absolute; padding: 10px 2px; left: 2px; top: 35%; z-index: 100;
      display: inline-block;cursor: pointer;font-size: 15px;&quot;&gt;
       &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot;&gt;&lt;g class=&quot;nc-icon-wrapper&quot; fill=&quot;#111111&quot;&gt;&lt;polygon fill=&quot;#111111&quot; points=&quot;11.1,15.7 3.4,8 11.1,0.3 12.6,1.7 6.3,8 12.6,14.3 &quot;&gt;&lt;/polygon&gt;&lt;/g&gt;&lt;/svg&gt;
      &lt;/button&gt;
  
      &lt;!-- Swiper --&gt;
      &lt;nav class=&quot;swiper swiper-container-videos slider-produtos-destaque&quot;&gt;
        &lt;ol class=&quot;swiper-wrapper&quot; style=&quot;list-style-type: none; padding-top: 30px;&quot;&gt;
          &lt;li class=&quot;swiper-slide&quot;&gt;
  &lt;p class=&quot;titulo&quot;&gt;AFTERSALE&lt;/p&gt;
            &lt;a class=&quot;&quot; href=&quot;javascript:void();&quot; onClick=&quot;document.getElementById('vid_frame').src='https://www.youtube.com/embed/-2yHBjfhC-s?autoplay=1&amp;rel=0&amp;showinfo=0&amp;autohide=1'&quot;&gt;
            &lt;span class=&quot;vid-thumb&quot;&gt;
       &lt;img src=&quot;https://img.youtube.com/vi/-2yHBjfhC-s/mqdefault.jpg&quot; /&gt;
          &lt;/span&gt;
                    &lt;p class=&quot;desc&quot;&gt;TROCAS E DEVOLUÇÕES&lt;/p&gt;
                  &lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li class=&quot;swiper-slide&quot;&gt;
  &lt;p class=&quot;titulo&quot;&gt;GUARARAPES&lt;/p&gt;
            &lt;a href=&quot;javascript:void();&quot; onClick=&quot;document.getElementById('vid_frame').src='https://www.youtube.com/embed/eu6cPAq6CMk?autoplay=1&amp;rel=0&amp;showinfo=0&amp;autohide=1'&quot;&gt;
                    &lt;span class=&quot;vid-thumb&quot;&gt;&lt;img  src=&quot;https://img.youtube.com/vi/eu6cPAq6CMk/mqdefault.jpg&quot; /&gt;&lt;/span&gt;
                    &lt;p class=&quot;desc&quot;&gt;DIA DO MARCENEIRO&lt;/p&gt;
                  &lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li class=&quot;swiper-slide&quot;&gt;
  &lt;p class=&quot;titulo&quot;&gt;STAMP IDEIAS&lt;/p&gt;
            &lt;a href=&quot;javascript:void();&quot; onClick=&quot;document.getElementById('vid_frame').src='https://www.youtube.com/embed/RziBakioKp8?autoplay=1&amp;rel=0&amp;showinfo=0&amp;autohide=1'&quot;&gt;
                    &lt;span class=&quot;vid-thumb&quot;&gt;&lt;img  src=&quot;https://img.youtube.com/vi/RziBakioKp8/mqdefault.jpg&quot; /&gt;&lt;/span&gt;
                    &lt;div class=&quot;desc&quot;&gt;IMPRESSÃO DTF&lt;/div&gt;
                  &lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li class=&quot;swiper-slide&quot;&gt;
  &lt;p class=&quot;titulo&quot;&gt;AFTERSALE&lt;/p&gt;
            &lt;a href=&quot;javascript:void();&quot; onClick=&quot;document.getElementById('vid_frame').src='https://www.youtube.com/embed/ENukjLmV78o?autoplay=1&amp;rel=0&amp;showinfo=0&amp;autohide=1'&quot;&gt;
                    &lt;span class=&quot;vid-thumb&quot;&gt;&lt;img  src=&quot;https://img.youtube.com/vi/ENukjLmV78o/mqdefault.jpg&quot; /&gt;&lt;/span&gt;
                    &lt;div class=&quot;desc&quot;&gt;BLACK FRIDAY&lt;/div&gt;
                  &lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li class=&quot;swiper-slide&quot;&gt;
  &lt;p class=&quot;titulo&quot;&gt;ROCK PEANUT&lt;/p&gt;
            &lt;a href=&quot;javascript:void();&quot; onClick=&quot;document.getElementById('vid_frame').src='https://www.youtube.com/embed/8Iu-zO1PSrc?autoplay=1&amp;rel=0&amp;showinfo=0&amp;autohide=1'&quot;&gt;
                    &lt;span class=&quot;vid-thumb&quot;&gt;&lt;img  src=&quot;https://img.youtube.com/vi/8Iu-zO1PSrc/mqdefault.jpg&quot; /&gt;&lt;/span&gt;
                    &lt;div class=&quot;desc&quot;&gt;PASTA DE AMENDOIM&lt;/div&gt;
                  &lt;/a&gt;
          &lt;/li&gt;
  
  &lt;li class=&quot;swiper-slide&quot;&gt;
  &lt;p class=&quot;titulo&quot;&gt;IDEE&lt;/p&gt;
            &lt;a href=&quot;javascript:void();&quot; onClick=&quot;document.getElementById('vid_frame').src='https://youtube.com/embed/BWIXETHWk2A?autoplay=1&amp;rel=0&amp;showinfo=0&amp;autohide=1'&quot;&gt;
                    &lt;span class=&quot;vid-thumb&quot;&gt;&lt;img  src=&quot;https://img.youtube.com/vi/BWIXETHWk2A/mqdefault.jpg&quot; /&gt;&lt;/span&gt;
                    &lt;div class=&quot;desc&quot;&gt;BIBLIOTECA DE CARGOS&lt;/div&gt;
                  &lt;/a&gt;
          &lt;/li&gt;
  
  &lt;li class=&quot;swiper-slide&quot;&gt;
  &lt;p class=&quot;titulo&quot;&gt;OLIST&lt;/p&gt;
            &lt;a href=&quot;javascript:void();&quot; onClick=&quot;document.getElementById('vid_frame').src='https://youtube.com/embed/TnfAYRCUoJE?autoplay=1&amp;rel=0&amp;showinfo=0&amp;autohide=1'&quot;&gt;
                    &lt;span class=&quot;vid-thumb&quot;&gt;&lt;img  src=&quot;https://img.youtube.com/vi/TnfAYRCUoJE/mqdefault.jpg&quot; /&gt;&lt;/span&gt;
                    &lt;div class=&quot;desc&quot;&gt;VENDA ONLINE&lt;/div&gt;
                  &lt;/a&gt;
          &lt;/li&gt;
  
  &lt;li class=&quot;swiper-slide&quot;&gt;
  &lt;p class=&quot;titulo&quot;&gt;AFTERSALE&lt;/p&gt;
            &lt;a href=&quot;javascript:void();&quot; onClick=&quot;document.getElementById('vid_frame').src='https://youtube.com/embed/gph9bUwHzLc?autoplay=1&amp;rel=0&amp;showinfo=0&amp;autohide=1'&quot;&gt;
                    &lt;span class=&quot;vid-thumb&quot;&gt;&lt;img  src=&quot;https://img.youtube.com/vi/gph9bUwHzLc/mqdefault.jpg&quot; /&gt;&lt;/span&gt;
                    &lt;div class=&quot;desc&quot;&gt;AUTOMATIZE SUAS VENDAS&lt;/div&gt;
                  &lt;/a&gt;
          &lt;/li&gt;
  
  &lt;li class=&quot;swiper-slide&quot;&gt;
  &lt;p class=&quot;titulo&quot;&gt;ROCK PEANUT&lt;/p&gt;
            &lt;a href=&quot;javascript:void();&quot; onClick=&quot;document.getElementById('vid_frame').src='https://youtube.com/embed/W-_rVVwEEPo?autoplay=1&amp;rel=0&amp;showinfo=0&amp;autohide=1'&quot;&gt;
                    &lt;span class=&quot;vid-thumb&quot;&gt;&lt;img  src=&quot;https://img.youtube.com/vi/W-_rVVwEEPo/mqdefault.jpg&quot; /&gt;&lt;/span&gt;
                    &lt;div class=&quot;desc&quot;&gt;CRACKER MONSTER&lt;/div&gt;
                  &lt;/a&gt;
          &lt;/li&gt;
  
  &lt;li class=&quot;swiper-slide&quot;&gt;
  &lt;p class=&quot;titulo&quot;&gt;OLIST&lt;/p&gt;
            &lt;a href=&quot;javascript:void();&quot; onClick=&quot;document.getElementById('vid_frame').src='https://youtube.com/embed/A8g0Hcc8opA?autoplay=1&amp;rel=0&amp;showinfo=0&amp;autohide=1'&quot;&gt;
                    &lt;span class=&quot;vid-thumb&quot;&gt;&lt;img  src=&quot;https://img.youtube.com/vi/A8g0Hcc8opA/mqdefault.jpg&quot; /&gt;&lt;/span&gt;
                    &lt;div class=&quot;desc&quot;&gt;VENDA MAIS!&lt;/div&gt;
                  &lt;/a&gt;
          &lt;/li&gt;
  
        &lt;/ol&gt;
        &lt;!-- Add Pagination --&gt;
        &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;/div&gt;
        &lt;!-- If we need navigation buttons --&gt;
  
      &lt;/nav&gt;
  
    &lt;/section&gt;
    
      &lt;script src=&quot;https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js&quot;&gt;&lt;/script&gt;
  
    &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'&gt;&lt;/script&gt;
  &lt;script src='https://unpkg.com/swiper@7.0.1/swiper-bundle.min.js'&gt;&lt;/script&gt;
  &lt;script src='//cdnjs.cloudflare.com/ajax/libs/fitvids/1.0.1/jquery.fitvids.js'&gt;&lt;/script&gt;
        &lt;script id=&quot;rendered-js&quot; &gt;
  /* webflow only this section swiper pagination */
  $(document).ready(function () {
    /* add html by js (no way to add this HTML by webflow UI beacuse this is CMS list*/
    var part1 = &quot;&lt;div class=swiper-pagination&gt;&lt;/div&gt;&quot;;
    //  var part2 = '&lt;div class=&quot;swiper-button-prev&quot;&gt;&lt;/div&gt;';
    //var part3 = '&lt;div class=&quot;swiper-button-next&quot;&gt;&lt;/div&gt;';
    // var swiperString = part1.concat(part2, part3);
    $(&quot;#swiper-press&quot;).append(part1);
  });
  
  /* change active class when click */
  $(&quot;.swiper-container-videos .swiper-wrapper .swiper-slide a&quot;).click(function () {
    $(this).
    closest(&quot;.swiper-slide&quot;).
    addClass(&quot;selected&quot;).
    siblings().
    removeClass(&quot;selected&quot;);
    mySwiper1.slideTo(mySwiper1.clickedIndex);
  });
  
  $(&quot;.swiper-container-videos .swiper-slide&quot;).
  first().
  addClass(&quot;selected&quot;);
  
  /* 1 of 2 : SWIPER */
  var mySwiper1 = new Swiper(&quot;.swiper-container-videos&quot;, {
    // If loop true set photoswipe - counterEl: false
    loop: false,
    /* slidesPerView || auto - if you want to set width by css like flickity.js layout - in this case width:80% by CSS */
    slidesPerView: &quot;auto&quot;,
    spaceBetween: 15,
    centeredSlides: false,
  
    // If we need pagination
    pagination: {
      el: &quot;.swiper-pagination&quot;,
      clickable: true },
  
    navigation: {
      nextEl: &quot;.swiper-custom-next&quot;,
      prevEl: &quot;.swiper-custom-prev&quot; },
  
  
    keyboard: {
      enabled: true,
      onlyInViewport: true } });
  
  
  
  /* This is what makes the videos responsive. You can either include this in a &lt;script&gt; tag in the markup, or better yet, include it in a separata JavaScript file.*/
  $(function () {
    //Look for all the videos inside this element and make them responsive
    $(&quot;.vid-container&quot;).fitVids();
  });
  
  /*JS FOR SCROLLING THE ROW OF THUMBNAILS*/
  
  $(document).ready(function () {
    $(&quot;.vid-item&quot;).each(function (index) {
      $(this).on(&quot;click&quot;, function () {
        var current_index = index + 1;
        $(&quot;.vid-item .thumb&quot;).removeClass(&quot;active&quot;);
        $(&quot;.vid-item:nth-child(&quot; + current_index + &quot;) .thumb&quot;).addClass(&quot;active&quot;);
      });
    });
  });
  //# sourceURL=pen.js
      &lt;/script&gt;
  
    
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>In addition to this problem, I'm having a hard time getting a button aligned in the center of my code box.</p>
  <p>I'm building a landing page in a website builder called Zyro, in it I have the option to add elements in code, the problem is that I can't in any way make this button vertically centered in the code box, I made several attempts and the the most I could do was make the button horizontally centered.</p>
  <p>Here is the code for that button:</p>
  <pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css?family=Rubik&quot;&gt;
  
  &lt;div&gt;
  &lt;button id=&quot;randomButton&quot;&gt;
  &lt;span&gt;&lt;/span&gt;
  &lt;span&gt;&lt;/span&gt;
  &lt;span&gt;&lt;/span&gt;
  &lt;span&gt;&lt;/span&gt; Comece Agora!
  &lt;/button&gt;
  &lt;/div&gt;
  
  &lt;style&gt;
  div {
  margin: 0 auto;
  text-align: center;
  }
  
  button {
   position: relative;
   padding: 1em 1.8em;
   outline: none;
   border: 1px solid #303030;
   background: #000000;
   color: #00F498;
   text-transform: uppercase;
   letter-spacing: 2px;
   font-size: 15px;
   overflow: hidden;
  transition: 0.2s;
  border-radius: 20px;
  cursor: pointer;
  font-family: &quot;Rubik&quot;;
  font-weight: 900;
  }
  
  button:hover {
  box-shadow: 0 0 10px #00F498, 0 0 25px #00BCAA, 0 0 50px #00F498;
  transition-delay: 0.6s;
  }
  button span {
  position: absolute;
  }
  button span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00F498);
  }
  button:hover span:nth-child(1) {
  left: 100%;
  transition: 0.7s;
  }
  button span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00F498);
  }
  button:hover span:nth-child(3) {
  right: 100%;
  transition: 0.7s;
  transition-delay: 0.35s;
  }
  button span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #00F498);
  }
  button:hover span:nth-child(2) {
  top: 100%;
  transition: 0.7s;
  transition-delay: 0.17s;
  }
  button span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #00F498);
  }
  button:hover span:nth-child(4) {
  bottom: 100%;
  transition: 0.7s;
  transition-delay: 0.52s;
  }
  button:active {
  background: #00F498;
  background: linear-gradient(to top right, #00F498, #00BCAA);
  color: #bfbfbf;
  box-shadow: 0 0 8px #00F498, 0 0 8px #00BCAA, 0 0 8px #00F498;
  transition: 0.1s;
  }
  button:active span:nth-child(1) span:nth-child(2) span:nth-child(2) span:nth-child(2) {
  transition: none;
  transition-delay: none;
  }
  &lt;/style&gt;
  &lt;script&gt;
  document.getElementById('randomButton').onclick = function(){
  window.open('https://google.com', '_blank')
  }
  &lt;/script&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/sJi2X.png" rel="nofollow noreferrer">Box de Código - Zyro</a></p>
  <p>I'm not sure how this code box on the site works, I believe it makes a 'div' function, but I could be talking nonsense.</p>
  <p>I'm new to programming, I solve many things through trial and error, but I would like to understand the solution for both cases so that I can walk with my own legs in other day-to-day situations.</p>
  <p>If anyone can help me solve it and can explain the solution in a way that a newbie understands, I would be very grateful!</p>