Static Website

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-420XFJRS1M"></script>
  <script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', 'G-420XFJRS1M');
  </script>
  <link rel="shortcut icon" href="https://1xpto.netlify.app/items/favicon.gif" type="image/x-icon">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="Static Webpage">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Static Webpage</title>
  <style>

    .app {
      z-index:1;
      text-decoration: none;
      font-family: verdana;
      font-weight: bold;
      color: red;
      position: absolute;
      top: 0;
      right: 0;
      margin: 5px;
      border: 2px solid red;
      padding: 5px 10px;
    }
    body {
      cursor: context-menu;
      margin: 0;
      font-family: calibri;
      overflow: hidden;
    }

    * {
      box-sizing: border-box;
    }

    button {
      border: none;
      outline: none;
      background-color: transparent;
    }

    textarea {
      border: none;
      background-color: transparent;
      resize: none;
      outline: none;
    }

    a {
      text-decoration: none;
    }

    audio {
      background-color: rgba(128, 128, 128, 0.1);
    }

    /*   ---- default settings -----  */

    .header {
      width: 100%;
      height: 8vw;
      font-size: 5vw;
      background-color: white;
      position: fixed;
      top: 0;
      left: 0;
    }

    .footer {
      width: 100%;
      height: 8vw;
      font-size: 5vw;
      background-color: green;
    }

    .sitecontainer {
      width: 100%;
      height: 100vh;
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      background-color: red;
      overflow-y: scroll;
    }

    .consid {
      font-size: 5vw;
      text-align: center;
      margin: 10vw 0 50px 0;
    }

    .topclass {
      width: 90%;
      height: calc(40vw / 1.777);
    }

    .top {
      width: 48%;
      text-align: justify;
      color: white;
      float: left;
      font-size: 1.2vw;
    }

    .right {
      width: 48%;
      text-align: justify;
      color: white;
      float: right;
      font-size: 1.2vw;
    }

    .down {
      width: 50%;
      text-align: justify;
      margin: 50px 0;
      color: white;
      font-size: 1.5vw;
    }

    h1 {
      width: 80%;
      text-align: justify;
      color: white;
      font-size: 2vw;
    }

    .image {
      width: 90%;
      border: 5px solid snow;
      height: calc(50vw / 1.777);
      margin-bottom: 50px;
    }

    .foo {
      width: 50%;
      height: 100%;
      float: left;
    }

    .smalltalk {
      float: right;
      width: 50%;
      height: 100%;
    }

    video {
      width: 60%;
      border: 10px solid snow;
      margin-bottom: 20px;
    }


    @media all and (orientation:portrait) {
      .app {  display: none;  }
      .header {
        font-size: 15vw;
        height: 20vw;
      }

      .footer {
        font-size: 15vw;
        height: 20vw;
      }

      .consid {
        font-size: 10vw;
        text-align: center;
        margin: 30vw 0 20px 0;
      }

      .topclass {
        height: calc(90vw / 1.777);
        background-color: white;
        overflow-y: scroll;
        padding: 0 10px;
      }

      .top {
        width: 100%;
        color: red;
        font-weight: bold;
        font-size: 4vw;
      }

      .right {
        width: 100%;
        color: red;
        font-weight: bold;
        font-size: 4vw;
      }

      h1 {
        margin: 20px 0;
        font-size: 4vw;
      }

      .down {
        width: 90%;
        margin: 0;
        font-size: 4vw;
      }

      .image {
        width: 90%;
        border: 1px solid snow;
        height: calc(90vw / 1.777);
        margin: 20px 0;
      }

      video {
        width: 90%;
        border: 1px solid snow;
        margin-bottom: 10px;
      }
    }

    @media all and (orientation:landscape) and (max-width:538px) {
      .header {
        font-size: 6vw;
        height: 10vw;
      }

      .footer {
        font-size: 6vw;
        height: 10vw;
      }

      .consid {
        font-size: 6vw;
        text-align: center;
        margin: 16vw 0 20px 0;
      }

      .topclass {
        height: calc(90vw / 1.777);
        background-color: white;
        overflow-y: scroll;
        padding: 0 10px;
      }

      .top {
        width: 100%;
        color: red;
        font-weight: bold;
        font-size: 3vw;
      }

      .right {
        width: 100%;
        color: red;
        font-weight: bold;
        font-size: 3vw;
      }

      h1 {
        margin: 20px 0;
        font-size: 3vw;
      }

      .down {
        width: 90%;
        margin: 0;
        font-size: 3vw;
      }

      .image {
        width: 90%;
        border: 1px solid snow;
        height: calc(90vw / 1.777);
        margin: 20px 0;
      }

      video {
        width: 90%;
        border: 1px solid snow;
        margin-bottom: 10px;
      }
}


  </style>
</head>

<body>
  <a class='app' href='https://1xpto.netlify.app/'>Visite Site</a>

  <button class='header'>Header</button>

  <section class='sitecontainer'>
    <center>

      <h1 class='consid'>Static Webpage <br> basic layout</h1>

      <div class='topclass'>
        <p class='top'>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath.</p>

        <p class='right'>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath.</p>
      </div>

      <h1>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath.</h1>

      <p class='down'>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath.</p>

      <div class='image'>
        <img class='foo' src='https://static.vecteezy.com/system/resources/previews/000/126/805/original/poseidon-comes-out-from-the-sea-vector.jpg'>
        <button class='smalltalk'>Write someting about</button>
      </div>

      <video src='https://player.vimeo.com/external/191636228.sd.mp4?s=336cbf2c81a05eb6624f63df92056e5bf3a9f933&profile_id=164' controls></video>

    </center>
    <button class='footer'>Footer</button>
  </section>

</body>
</html>