about.html Example File

webenginewidgets/webui/about.html
 <!DOCTYPE html>
 <html>
     <head>
         <title>Qt WebEngine WebUI Example</title>
         <style>
          html {
              background: #f0f0f0;
              color: #303030;
              font: 16px system-ui;
              height: 100%;
          }

          body {
              margin: 0;
              padding: 0;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: stretch;
          }

          body > * {
              padding-left: 20px;
              padding-right: 20px;
          }

          header {
              flex: none;
              display: flex;
              align-items: center;
              background: #f0fff0;
              border-bottom: 1px solid #e0e0e0;
              padding-top: 20px;
              padding-bottom: 20px;
          }

          header > h1 {
              font: bold 20px system-ui;
              margin-left: 18px;
          }

          main {
              flex: auto;
          }

          footer {
              flex: none;
              display: flex;
              justify-content: center;
              padding-bottom: 20px;
          }

          button {
              background: #41cd52;
              color: #f0f0f0;
              font: 16px system-ui;
              border: 0;
              box-shadow: 0px 1px 3px rgb(0,0,0,0.5);
              cursor: pointer;
              margin: 0 0 1px;
              padding: 10px 24px;
          }

          button:hover {
              background: #50dc61;
          }

          button:active {
              background: #50dc61;
              box-shadow: 0px 1px 2px rgb(0,0,0,0.5);
              margin: 1px 0 0;
          }

          button:focus {
              outline: 0;
          }

         </style>
     </head>
     <body>
         <header>
             <img width="48px" height="48px"
                  src="qrc:/qt-project.org/qmessagebox/images/qtlogo-64.png">
             <h1>WebEngine Widgets<br>WebUI Example</h1>
         </header>
         <main>
             <p>
                 Aside from the built-in schemes, such as <code>http</code> and
                 <code>qrc</code>, Qt WebEngine may be extended with <em>custom
                 schemes</em> by creating <em>custom scheme handlers</em>.
             </p>

             <p>
                 This is a simple HTML page loaded from a custom scheme and
                 displayed by a <code>QWebEngineView</code>. Even the Quit button
                 below is a standard HTML <code>&lt;button&gt;</code> element.
             </p>

             <p>
                 Read the documentation to find out
             </p>
             <ul>
                 <li>
                     <p>
                         How to create a custom scheme handler which serves HTML
                         and handles HTML form submissions.
                     </p>
                 </li>
                 <li>
                     <p>
                         How to prevent ordinary web content from accessing the
                         custom scheme.
                     </p>
                 </li>
                 <li>
                     <p>
                         How to prevent any other scheme from submitting HTML
                         form data.
                     </p>
                 </li>
             </ul>
         </main>
         <footer>
             <form action="" method="post">
                 <button name="quit">Quit</button>
             </form>
         </footer>
     </body>
 </html>