kodzik pzdr

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8" />
    <title>Project</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body bgcolor="darkred">
    <div class="banner">
      <h1>pogchamp</h1>
    </div>
    <div class="lewy">
      <div class="panel">
        <p><a href="1.html">Strona Główna</a></p>
      </div>
      <br />
      <div class="panel">
        <p><a href="funkcje.js">Proste funkcje</a></p>
      </div>
      <br />
      <div class="panel">
        <p><a href="1.html">Operacje na ciągach znaków</a></p>
      </div>
    </div>
    <div class="prawy">
      <div class="podstawa">
        <div class="trzy">
          <div class="plecy"><p>we</p></div>
          <div class="twarz"><h2>cenzura zdania</h2></div>
        </div>
      </div>
      <div class="podstawa">
        <div class="trzy">
          <div class="plecy">
            <br />
            <input type="text" id="slowo" placeholder="wprowadz slowo" />
            <button onclick="cenzura()"></button>
            <div id="ok">
              <script>
                let slowo = document.getElementById("slowo");
                cenzura(){
                  for()
                }
              </script>
            </div>
          </div>
          <div class="twarz">
            <h2>cenzura</h2>
          </div>
        </div>
      </div>
      <div class="podstawa">
        <div class="trzy">
          <div class="plecy"><p>we</p></div>
          <div class="twarz">
            <p>test</p>
          </div>
        </div>
      </div>
      <div class="podstawa">
        <div class="trzy">
          <div class="plecy" id="code">
            <input type="text" id="code_input" placeholder="wprowadz kod" />
            <div id="code_ekran">
              <script>
                let code_input = document.getElementById("code_input");
                let code_ekran = document.getElementById("code_ekran");
                code_input.addEventListener("change", code);
                code_ekran.innerHTML = "";
                function code() {
                  code_ekran.innerHTML =
                    "<code>" + code_input.value + "</code>";
                }
              </script>
            </div>
          </div>
          <div class="twarz">
            <h2>konsola</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="stopka">
      <div id="flaga">
        <img src="polska.png" alt="flaga" />
      </div>
    </div>
  </body>
  <script src="operacje.js"></script>
</html>





* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.banner {
  position: absolute;
  left: 0px;
  height: 20%;
  width: 100%;
  text-align: center;
  font-size: 48px;
  color: #c10000;
}
.lewy {
  position: absolute;
  float: left;
  top: 200px;
  width: 30%;
  height: 15%;
  background-color: darkred;
}
.panel {
  background-color: darkorange;
  text-align: center;
  height: 25%;
  width: 480px;
  border: solid darkred 4px;
}
.prawy {
  width: 68.3%;
  position: absolute;
  height: 70%;
  text-align: center;
  left: 500px;
  top: 150px;
  background-color: orange;
}
.stopka {
  height: 10%;
  width: 100%;
  clear: both;
}
iframe {
  position: absolute;
  left: 300px;
  top: 150px;
  width: 68.3%;
  height: 40%;
  background-color: darkorange;
}
#flaga {
  position: absolute;
  width: 300px;
  height: 150px;
  top: 715px;
  left: 0px;
}
#flaga img {
  width: 75%;
  height: 50%;
}
a {
  text-decoration: none;
}
.panel:hover {
  height: 30px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 5px;
  background-color: red;
  border: 1px solid yellow;
  text-align: center;
}
#zegarek {
  position: absolute;
  border: 6px groove yellow;
  width: 200px;
  color: yellow;
  font-size: 50px;
  text-align: center;
}
h1 {
  color: black;
}
.podstawa {
  margin-right: 90px;
  margin-top: 20px;
  margin-bottom: 40px;
  float: right;
  position: relative;
  width: 400px;
  height: 200px;
  perspective: 20cm;
}
.trzy {
  position: relative;
  width: 400px;
  height: 200px;
  transition: all 3s;
  transform-style: preserve-3d;
}
.twarz {
  position: absolute;
  width: 400px;
  height: 200px;
  border: solid black 3px;
  background-color: darkorange;
  perspective: 15cm;
  backface-visibility: hidden;
}
.plecy {
  position: absolute;
  width: 400px;
  height: 200px;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  border: solid black 3px;
  background-color: darkorange;
}
.podstawa:hover > .trzy {
  transform: rotateY(180deg);
}
Editor is loading...