'insert html and css into wordpress

how can i correctly implement html and css to wordpress site? inserting into html section caused this: enter image description here

enter image description here

and i want it to look like this: check pic enter image description here

i dont want other text to be in box shadow

* {
      box-sizing: border-box;
    }
    
    div.cenovy_box {
      width: 100%;
      outline: 1px solid #f2f1f1 !important;
      box-shadow: 0px 5px 10px #d3d3d3;
      float: left;
    }
    
    div.fotkavboxe {
      display: flex;
      float: left;
      width: 30%;
      margin-left: 50px;
    }
    
    h1.nadpis_p {
      border-bottom: 2px solid #20d796;
      font-family: "poppins";
      text-align: center;
      padding-bottom: 10px;
    }
    
    div.tlacidlo {
      clear: both;
      width: 30%;
      display: flex;
    }
    
    .k_predajcovi {
      font-family: "poppins";
      background-color: #000000;
      color: #ffffff;
      font-size: 20px;
      cursor: pointer;
      padding: 10px 20px;
      border: solid #000000 2px;
      opacity: 1;
      transition: 0.3s;
    }
    
    .k_predajcovi:hover {
      color: #000000;
      background-color: #fff;
      opacity: 1;
    }
    
    p.cena_v_boxe {
      width: 30%;
      font-size: 25px;
      font-family: "poppins";
      float: left;
    }
    
    img.fotka {
      background-color: #000000;
      border: 2px #555;
      opacity: 1;
      transition: 0.3s;
    }
    
    img.fotka:hover {
      color: #fff;
      opacity: 0.5;
    }

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    
  </style>
</head>

<body>
  <div class="cenovy_box">
    <div class="obsah">
      <h1 class="nadpis_p">Brutálna vychytávka</h1>
    </div>
    <div class="fotkavboxe">
      <a href="https://www.banggood.com/Xiaomi-Redmi-Note-10-Pro-Global-Version-6GB-128GB-108MP-Quad-Camera-6_67-inch-120Hz-AMOLED-Display-33W-Fast-Charge-Snapdragon-732G-Octa-Core-4G-Smartphone-p-1828679.html?cur_warehouse=HK&ID=62464446304721&rmmds=search"
        target="_blank"><img class="fotka" src="https://imgaz.staticbg.com/thumb/large/oaupload/banggood/images/FE/BE/525e460f-581a-46ee-b737-1fe3d9492492.jpg.webp" alt="redmi note 10" style="width: 200px; height:200px;"></a>
    </div>
    <div class="cena">
      <p class="cena_v_boxe">20€</p>
    </div>
    <div class="tlacidlo">
      <button class="k_predajcovi" onclick="window.location.href = 'https://www.google.sk';">
        K predajcovi
        </button>
    </div>

  </div>

</body>

</html>

can you please help mw with inserting this code into articles? i want to adding it into articles just html (css will be in custom css settings) i am unable to code my own plugin, so this how i am making this

Solution 1:^[1]

How to Upload an HTML File to WordPress

1) Navigate to your Admin Dashboard.
2) Click 'Pages' in the left sidebar.
3) Choose an existing page or create a new one.
4) Click 'Add Block.'
5) Add a 'File' block.
6) Choose your HTML file.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Areg Nikoghosyan

'insert html and css into wordpress

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]