Jak psát web

Stáhnout

Index:

<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="utf-8" />
    <title>Testovací webová stránka s responsivním designem</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <div id="wrapper">
      <header>
        <h1>
          <a href="index.html">Název</a>
        </h1>
      </header>
      <main>
        <div id="left-column">
          <h2>Menu</h2>
          <div class="menu">
            <a href="index.html">Položka 1</a>
            <ul>
              <li><a href="index.html">Položka A</a></li>
              <li><a href="index.html">Položka B</a></li>
            </ul>
          </div>
          <div class="menu">
            <a href="index.html">Položka 2</a>
            <ul>
              <li><a href="index.html">Položka C</a></li>
            </ul>
          </div>
        </div>
        <article>
          <h2>Hlavní obsah</h2>
          <form id="person-form" method="post" action="data.html">
            <p>
              <label for="first-name">Jméno:</label>
              <input type="text" name="firstName" id="first-name" value="" placeholder="Jan" />
            </p>
            <p>
              <label for="last-name">Příjmení:</label>
              <input type="text" name="lastName" id="last-name" value="" placeholder="Novák" />
            </p>
            <p>
              <label for="birth-number">Rodné číslo:</label>
              <input type="text" name="birthNumber" id="birth-number" value="" placeholder="012345/6789" />
            </p>
            <p>
              <label for="email">Email:</label>
              <input type="text" name="email" id="email" value="" placeholder="jan@novak.cz" />
            </p>
            <p>
              <input type="submit" value="Odeslat" />
            </p>
          </form>
        </article>
        <div id="right-column">
          <h2>Widget vpravo</h2>
          <p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABXJJREFUeNrEV1tsFGUU/mame++2u+22RSqtNOFSAhXRVGskECOWCCZNCA8+GBNDjIRG5fIgPqJCMUUMKRGNiT6oTz5gghcCJhCI3OSqxlYI0kKht22XZXe7O7vz/54zMyvLStmyJTrJ2fnn/885/7mfs4qUEv/rMwUBSlI7Qj8w8LpYJmohhOvvVXljnVU1+XSDWwIbnKG65QyDW8o35PNiGqadqgCqnjae8mnGQHJ7+aFoR+AV2tPObCxbVF2mbceLW8FQ7S/Zznt8xjiMyzRMW+iOQqbTpBCLMbMFroaWJa4L+5bIjvNfQCQMrNhFx1ELa9VOPPblq8dlh0vDw7OBppXA5WOQp48tptMjBKJYAUoMw6hA+Qyg4RmwIIgOAjevawjVA1c+srDq3wLa3tdQXguUkbcUDQhfg2EcrbDvSBfrAq3Gh6UIkisvfQgMHGSbANWNQO/ngCEs6KN19TzrjHEYl2hMWtqdtAvOv13pqwsojzsU8aQ0jDJ6v+CQeiOcJEAsBiRPkGbHiKqMLk5YmvKTGiVrfAJkopZOrFapF15Fb0xu8x9OS/V7RdOi9D7RF5GnH+0Ix+8mgHItYoSaarTDmLGATDmNtJoF+KrIgFeIOWmnqJZCaaZX7nStiN9WNsP741BXf+BwxYcXuYYuLkJ0ALj6G36OGI/QYYIrwL9csGJPJDaaECcxfT4wvxWoqDMZIX7VQhe5QBtC2CDvPGNcpmFa5sG8iCfz5jsmcoF5xak+Y19r94FmaH1EP2xpyqY2tReTLW+kI2kc/9Zae8iK3T1g3jkiWmbnSqgoSvbbTVAnO4M9WDiHLJqVTym2zlovIwOc64GyaYyYgjRDcqIsSH/1sr+Wcl+YKDJrYqNIEBaPJL+EYN75KZlrAXVsW+X6gFftRPMqwEGEo+cmU60LPMSnYiG5UwfOfIdIQmwKbg7vzPozK0BJckdon6ss0IoFz1JkuKjgdJPkY7bvp9Lt6B53kLJqLmUHCfHrT0hFI/vdG0dWcr5knexO6HC72NcpujR6gwyVsLSXYuotdzxMV50FXNPNeOK77HiLZS1QygX1x9fL17XOdaxFLZVTj3PyQT+Zlscu6B/E/u70x8v33NxNO725ArAlqLxhWvtiT8uuNu+nSm21CrczJ2GKfDi8kjpk/5B4Y2/ita4j41RKMWB3sswdQUjA/btW7gx1o56ajdAfkAVIkd5eKOtHKBDQb1dCkZ+GZv38fXPFMnjII5ozp9JNEZgX8TR5m+XxtnPzQ9wxI6i9hFIfBWPMymVjisA8mBfxNHnTHRO2467V/jq/S3kaMXJPlCBFFSxjWLU+23onC0zDtMyDeRFP5s13TNQLlMOX0nGKhjWzq/RmZ4lS2litPVHpVWaqlX7HfdcDSl8RvpUOJ+RffwwZv+gZGftz2DjJd9ihKfMrIf94CHiK4bSkagT/8NbQZ6Ea3xyo2n0WQAMjg/GeqndG1tDXLZ4aOO0IRu04kHfrhtwBaOZC2G7ugd5RcTQUzMyBM8tY8ixPzsuzCAcbK6LajUvPgGlpRcMEItySOO3st5xoJsx29H8aBvEcNX2qZ6xBgzRj6yoep4psFyWB5LguyEuqaakS1YwDk9a6PFbsTGj0DBlnWbv+Ef3C16cSncqbQ8+v/ebWOqT02wFHa97jM8ZhXKYxaS2NJ65TefNA/uNYOstZH/AoDXsvpCK2NlxEfAfWBdufm+tsZ6SD3XrXst1jXTwH2cUs0NbkCkTG5eVDF/Xee03Fhf6aZatjJUHQbiCaHaTzrr1bdZyB1/aeZuMEbRpvISsXskDuOCTzBAsQPGR/37CtIwrQFSXAvUZ6t71O2hH+n/47fiDP3wIMABi+3q39KudiAAAAAElFTkSuQmCC" alt="Sluníčko" /></p>
          <p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABHJJREFUeNrsV11MHFUU/mZndncWKC24hQLKj6WiqWlJDK0ISWnsg8FgCq0m6gspvGAfmkZjfDFRX4wPrYmJEg020dqQWJGAkmpMfDBaa4qmNA2RtnT5XX52l2WB3dn5vZ47u1Z+loAVwoO9ySEzlzPn5zvnfPeuwBjDVi4HtnjdD2DLAxDWUnj6nfaszJLH29weT4Pskuw9VTegxpSv54duNP/w5ovhTQvumTM9pS3dg6w/qLDl68fRGHup4zarPdtTup5E/vWqPHXG+8b3Q7azBZOxS36DdY7otvwaMO19f4yxlymIqlNnvffqR1pt37u/5tzr1QW4ErRwOaBDEhJpctYYjpr4PSSgeY8LjRUF+Gju0DnabiAxNqoJPdWlOXVjuojL07odpZAUR1J0k+GTmyoq8mWkb99ex7/ZSATcuRluXAkYds4WS6a+aPFX1QR6gyZckm3GTTK/UQE4JhUDotsC926tosT3x6gcTlFAY/dQwEEQxVVdVyOh4x1NT36bVFnXGIovXLj+sScjo0kUHIhrOhizUP5YISxrpQ1BEGwELPo82yXgQI4LLgc3JiCgmGjvHUdg1Fff2VLTtRK7lQiIxz/7o62qLK/xiaJs8MNJMRiuDs8iquqUnWO5d8TjOsYmw7AMA9tkEX2DIF3+7EbVHi9qy/PwZVT5grT5dMTXQiDjZI9vvnpvPsYXTOiUcaZTQK5HwkBEh2ayJc6jio7pyRBO04SU75SXGBsIxfHBbxPYW7QTN8bnoKoaTNNELDxTf/HEge5UJeEIyLJTxECY2M20bMAiKoM/qnF/uHta04tGWU5PhdB6dDfS6H8+HaAhSYwNAVXwgIwPa0vw2nc+lD2Ug0xZQkSz0DcgdJJKGomSagwdM9RwGksUiyX/EtXAoAY0+TMfcNr2T83iZGUBNHr/ifp9LM7HMSEEFvpp7zrtnX7qQVwdDOJWxAD1KARRxO7Dx7yr8YA1M3K7KxyK2E3FxVwkBhMwOxfD6PAEctIcKMuV0RsBlSbhWDOXPgdUKrrsxKOZIsKTQYT9AeoZFcWH6itS8Y7dAyTFde/3vJdVVFYrSv/ocPhNQiGLoHz1cCGyXMCfCwS7ujqD/U0ZB7OIGEiJj2aM6KT1lzH09g8e/eaVmu7Fk8EDEEl2kOSRZJM4F9lzPv953/m3ju3zLpCRCYKX96SwxunDkj1BrWSXbgcFXkw8+e6lW9FPGx5ZMhl3eSBJpbytpSNvXzhSuL/yvMctYlu6jGf35WA0urbj5UEsXumU1s2hAO4EFShUq7lQoL6j6WB3KnueE113Yg2VJchwJjKeilF9rf945tLHuyg9t5Sw2f6zD23PPZyWioo9slMCUQImYolU2HpvL2ugMbKQMEI9SqRlV9qTKgBJ0QwQpyR4YBOuYBrN8WzMJhApVQDGta9am4GWNhchsdG/G/g5otGV7tpF7gNGKlR5I+4iyb/XM34dizOin2RSWAUld5I6pU0KgF80eIepW30rh3D/t+H/PoC/BBgARkv7uo5OBuYAAAAASUVORK5CYII=" alt="Mráčky" /></p>
          <p class="smaller">Ikonky dodal <a href="http://www.fatcow.com/free-icons">FatCow</a></p>
        </div>
      </main>
      <footer>
        <p>Zápatí</p>
      </footer>
    </div>
  </body>
</html>

Zvalidováno:

<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="utf-8" />
    <title>Testovací webová stránka s responsivním designem</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
    <div id="wrapper">
      <header>
        <h1>
          <a href="index.html">Název</a>
        </h1>
      </header>
      <main>
        <div id="left-column">
          <h2>Menu</h2>
          <div class="menu">
            <a href="index.html">Položka 1</a>
            <ul>
              <li><a href="index.html">Položka A</a></li>
              <li><a href="index.html">Položka B</a></li>
            </ul>
          </div>
          <div class="menu">
            <a href="index.html">Položka 2</a>
            <ul>
              <li><a href="index.html">Položka C</a></li>
            </ul>
          </div>
        </div>
        <article>
          <h2>Hlavní obsah</h2>
            Formulář úspěšně zvalidován&hellip;
          </form>
        </article>
        <div id="right-column">
          <h2>Widget vpravo</h2>
          <p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABXJJREFUeNrEV1tsFGUU/mame++2u+22RSqtNOFSAhXRVGskECOWCCZNCA8+GBNDjIRG5fIgPqJCMUUMKRGNiT6oTz5gghcCJhCI3OSqxlYI0kKht22XZXe7O7vz/54zMyvLStmyJTrJ2fnn/885/7mfs4qUEv/rMwUBSlI7Qj8w8LpYJmohhOvvVXljnVU1+XSDWwIbnKG65QyDW8o35PNiGqadqgCqnjae8mnGQHJ7+aFoR+AV2tPObCxbVF2mbceLW8FQ7S/Zznt8xjiMyzRMW+iOQqbTpBCLMbMFroaWJa4L+5bIjvNfQCQMrNhFx1ELa9VOPPblq8dlh0vDw7OBppXA5WOQp48tptMjBKJYAUoMw6hA+Qyg4RmwIIgOAjevawjVA1c+srDq3wLa3tdQXguUkbcUDQhfg2EcrbDvSBfrAq3Gh6UIkisvfQgMHGSbANWNQO/ngCEs6KN19TzrjHEYl2hMWtqdtAvOv13pqwsojzsU8aQ0jDJ6v+CQeiOcJEAsBiRPkGbHiKqMLk5YmvKTGiVrfAJkopZOrFapF15Fb0xu8x9OS/V7RdOi9D7RF5GnH+0Ix+8mgHItYoSaarTDmLGATDmNtJoF+KrIgFeIOWmnqJZCaaZX7nStiN9WNsP741BXf+BwxYcXuYYuLkJ0ALj6G36OGI/QYYIrwL9csGJPJDaaECcxfT4wvxWoqDMZIX7VQhe5QBtC2CDvPGNcpmFa5sG8iCfz5jsmcoF5xak+Y19r94FmaH1EP2xpyqY2tReTLW+kI2kc/9Zae8iK3T1g3jkiWmbnSqgoSvbbTVAnO4M9WDiHLJqVTym2zlovIwOc64GyaYyYgjRDcqIsSH/1sr+Wcl+YKDJrYqNIEBaPJL+EYN75KZlrAXVsW+X6gFftRPMqwEGEo+cmU60LPMSnYiG5UwfOfIdIQmwKbg7vzPozK0BJckdon6ss0IoFz1JkuKjgdJPkY7bvp9Lt6B53kLJqLmUHCfHrT0hFI/vdG0dWcr5knexO6HC72NcpujR6gwyVsLSXYuotdzxMV50FXNPNeOK77HiLZS1QygX1x9fL17XOdaxFLZVTj3PyQT+Zlscu6B/E/u70x8v33NxNO725ArAlqLxhWvtiT8uuNu+nSm21CrczJ2GKfDi8kjpk/5B4Y2/ita4j41RKMWB3sswdQUjA/btW7gx1o56ajdAfkAVIkd5eKOtHKBDQb1dCkZ+GZv38fXPFMnjII5ozp9JNEZgX8TR5m+XxtnPzQ9wxI6i9hFIfBWPMymVjisA8mBfxNHnTHRO2467V/jq/S3kaMXJPlCBFFSxjWLU+23onC0zDtMyDeRFP5s13TNQLlMOX0nGKhjWzq/RmZ4lS2litPVHpVWaqlX7HfdcDSl8RvpUOJ+RffwwZv+gZGftz2DjJd9ihKfMrIf94CHiK4bSkagT/8NbQZ6Ea3xyo2n0WQAMjg/GeqndG1tDXLZ4aOO0IRu04kHfrhtwBaOZC2G7ugd5RcTQUzMyBM8tY8ixPzsuzCAcbK6LajUvPgGlpRcMEItySOO3st5xoJsx29H8aBvEcNX2qZ6xBgzRj6yoep4psFyWB5LguyEuqaakS1YwDk9a6PFbsTGj0DBlnWbv+Ef3C16cSncqbQ8+v/ebWOqT02wFHa97jM8ZhXKYxaS2NJ65TefNA/uNYOstZH/AoDXsvpCK2NlxEfAfWBdufm+tsZ6SD3XrXst1jXTwH2cUs0NbkCkTG5eVDF/Xee03Fhf6aZatjJUHQbiCaHaTzrr1bdZyB1/aeZuMEbRpvISsXskDuOCTzBAsQPGR/37CtIwrQFSXAvUZ6t71O2hH+n/47fiDP3wIMABi+3q39KudiAAAAAElFTkSuQmCC" alt="Sluníčko" /></p>
          <p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABHJJREFUeNrsV11MHFUU/mZndncWKC24hQLKj6WiqWlJDK0ISWnsg8FgCq0m6gspvGAfmkZjfDFRX4wPrYmJEg020dqQWJGAkmpMfDBaa4qmNA2RtnT5XX52l2WB3dn5vZ47u1Z+loAVwoO9ySEzlzPn5zvnfPeuwBjDVi4HtnjdD2DLAxDWUnj6nfaszJLH29weT4Pskuw9VTegxpSv54duNP/w5ovhTQvumTM9pS3dg6w/qLDl68fRGHup4zarPdtTup5E/vWqPHXG+8b3Q7azBZOxS36DdY7otvwaMO19f4yxlymIqlNnvffqR1pt37u/5tzr1QW4ErRwOaBDEhJpctYYjpr4PSSgeY8LjRUF+Gju0DnabiAxNqoJPdWlOXVjuojL07odpZAUR1J0k+GTmyoq8mWkb99ex7/ZSATcuRluXAkYds4WS6a+aPFX1QR6gyZckm3GTTK/UQE4JhUDotsC926tosT3x6gcTlFAY/dQwEEQxVVdVyOh4x1NT36bVFnXGIovXLj+sScjo0kUHIhrOhizUP5YISxrpQ1BEGwELPo82yXgQI4LLgc3JiCgmGjvHUdg1Fff2VLTtRK7lQiIxz/7o62qLK/xiaJs8MNJMRiuDs8iquqUnWO5d8TjOsYmw7AMA9tkEX2DIF3+7EbVHi9qy/PwZVT5grT5dMTXQiDjZI9vvnpvPsYXTOiUcaZTQK5HwkBEh2ayJc6jio7pyRBO04SU75SXGBsIxfHBbxPYW7QTN8bnoKoaTNNELDxTf/HEge5UJeEIyLJTxECY2M20bMAiKoM/qnF/uHta04tGWU5PhdB6dDfS6H8+HaAhSYwNAVXwgIwPa0vw2nc+lD2Ug0xZQkSz0DcgdJJKGomSagwdM9RwGksUiyX/EtXAoAY0+TMfcNr2T83iZGUBNHr/ifp9LM7HMSEEFvpp7zrtnX7qQVwdDOJWxAD1KARRxO7Dx7yr8YA1M3K7KxyK2E3FxVwkBhMwOxfD6PAEctIcKMuV0RsBlSbhWDOXPgdUKrrsxKOZIsKTQYT9AeoZFcWH6itS8Y7dAyTFde/3vJdVVFYrSv/ocPhNQiGLoHz1cCGyXMCfCwS7ujqD/U0ZB7OIGEiJj2aM6KT1lzH09g8e/eaVmu7Fk8EDEEl2kOSRZJM4F9lzPv953/m3ju3zLpCRCYKX96SwxunDkj1BrWSXbgcFXkw8+e6lW9FPGx5ZMhl3eSBJpbytpSNvXzhSuL/yvMctYlu6jGf35WA0urbj5UEsXumU1s2hAO4EFShUq7lQoL6j6WB3KnueE113Yg2VJchwJjKeilF9rf945tLHuyg9t5Sw2f6zD23PPZyWioo9slMCUQImYolU2HpvL2ugMbKQMEI9SqRlV9qTKgBJ0QwQpyR4YBOuYBrN8WzMJhApVQDGta9am4GWNhchsdG/G/g5otGV7tpF7gNGKlR5I+4iyb/XM34dizOin2RSWAUld5I6pU0KgF80eIepW30rh3D/t+H/PoC/BBgARkv7uo5OBuYAAAAASUVORK5CYII=" alt="Mráčky" /></p>
          <p class="smaller">Ikonky dodal <a href="http://www.fatcow.com/free-icons">FatCow</a></p>
        </div>
      </main>
      <footer>
        <p>Zápatí</p>
      </footer>
    </div>
  </body>
</html>

Styl:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-indent: 0;
}
html, body {
  height: 100%;
}
body {
  align-content: center;
  background-color: #eee;
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  font-size: 16px;
}
#wrapper {
  align-self: center;
  background-color: #fff;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  max-width: 62.5em;
}
header {
  border-bottom: 1px solid #eee;
  padding: 1em;
}
header h1 a {
  background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3VJREFUeNq8V89rE0EUfm9mNon9YVoPoYSWpgoK0kMp2kuhHgRp6UVQQfwnvBVK0WIvCp78M4QWPKQNHrx4ECzVUxEUf0IPvZiCVLFNs+O82Znd2TTZ5pcd2DbZ7Mz73ve+780sAoAYerT+4k8V5yu+BCnhvw5EAI8h9HC5vrs8f5Pu9Z99uCFPe1BMii3UnwxlTuP95iZ4HEEwAAWyq4NCHPkAlaqEyakpMDEzBAAt7emUgGfbEl7tSGDQ3Vr4gHB9GOH+eJCZiYnCfSgtuApegce3rqgHfHqsW5VXtWewuLYFCxOxkBD7JjhTj0rw/Sq8/r4XiqaTYdmdKQzqtSlGQwCMsTDpXJ8A1Ng7BODyKE2MJAC++Z8fyHRVA+7aDQH4qk5z51OwtPZOuUCG2RONskNFkAhnx9I6RkMAUv24Mt0PT68hcHQnGwv5ZCdsqy6UxKGy4EHlqDGAlGoAy2/24eXXAy0+dDw8dyEDD6az8OXHDpT3ytByy1QLZrODkM/n6wGQBgCHjc9/4cmdq/EAavLi6haszJyDcvkn3JidUz/LFuMjlEolGBkZBjfmcRtiwNfq9q7uhpT97fEhfV9wbuiU8OHjJ3L3yeXQ+pFw+dJFPY+ZNRq4gBtgEjIKjAUQrEKTo/7I1UJM1wlPLL7vsMVZAgCum4QtB+oA7mTXQkJ9rrVUQwf4frRGYiNyshHMAnAAkoVkYEhiizW9Y2HYkngNY3EG1KLSWIYYQN08oz5g0dN3rvWCTQowOGdIacrckAHOjGgiQUqJUd1ZpAGiv1kArmMSSxAIxGiAYUAcxkQSSrt1ADJM4jiAKMWQYk9gVDk7nwUitVQ2u1Na+gMGuNsG4gyA0QANr0ZgUm9lvMYxrY+6NpSRz8JgnrMZSPuEs103a8HaUrAwRj0GeBSAGJDueUDf5zERtsVAkggBIxuSBiyCSMQYZsJbBGCdkGhD2zBIXGnBQgDajjZ3GWwsgovo3sknwtAxyDEJANOdjw6QPSmuMw+2ZRZ2RGks6KW8lk9EAQuYzMDdiRwsPH8bO5CocwTcm8zpz6Ojo1AsFtuqf6FQqHs/d2apeOpvRhSTYmsleW16upNhY+oS9ArYzy6X+ipVP7b7/Y9B/Y2CU8xfRhED6hpT12AXXgNaeV2gN59vFJDk3Ev7zylX4VBdv/8JMAAqZQ6x01b1QQAAAABJRU5ErkJggg==') no-repeat left center;
  padding-left: 1.25em;
}
main {
  align-self: stretch;
  display: flex;
  flex: 3 1 auto;
  flex-direction: row;
}
#left-column,
#right-column {
  flex: 1 1 auto;
  padding: 1em;
}
#left-column {
  border-right: 1px solid #eee;
}
#right-column {
  border-left: 1px solid #eee;
}
article {
  flex: 2 1 auto;
  padding: 1em;
}
footer {
  border-top: 1px solid #eee;
  padding: 0.5em;
}
form {
  display: inline-block;
}
label {
  display: inline-block;
  width: 6em;
}
main h2 {
  margin-bottom: 0.5em;
}
ul, ol {
  margin-left: 1.25em;
}
form p:last-child {
  text-align: center;
}
input[type="submit"] {
  padding: 0 1em;
}
.smaller {
  font-size: 0.75em;
}
a {
  color: #00f;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 480px) {
  #wrapper {
    width: 100%;
  }
  header h1 a {
    background: transparent none;
    padding-left: 0;
  }
  main {
    flex: 1 1 auto;
    flex-direction: column;
  }
  #left-column {
    display: flex;
    flex-wrap: wrap;
  }
  #left-column h2 {
    flex: 1 1 100%;
  }
  #left-column .menu {
    flex: 1 1 auto;
  }
  #left-column .menu > a {
    display: none;
  }
  #right-column {
    display: none;
  }
}

Skript:

window.addEventListener('load', function(e) {
  function trim(value) {
    return value.replace(/^[\s\t]+/g, '').replace(/[\s\t]+$/g, '');
  }

  document.getElementById('person-form').addEventListener('submit', function(e) {
    var
      fn = trim(document.getElementById('first-name').value),
      ln = trim(document.getElementById('last-name').value),
      bn = trim(document.getElementById('birth-number').value),
      em = trim(document.getElementById('email').value)
    ;
    if (!fn || /[^a-záčďéěíňóřšťúůýž]/gi.test(fn)) {
      alert('Formulářové pole „Jméno“ musí být správně vyplněno!');
      e.preventDefault();
      return false;
    }
    if (!ln || /[^a-záčďéěíňóřšťúůýž]/gi.test(ln)) {
      alert('Formulářové pole „Příjmení“ musí být správně vyplněno!');
      e.preventDefault();
      return false;
    }
    if (!/^[0-9]{6}\/[0-9]{3,4}$/gi.test(bn)) {
      alert('Formulářové pole „Rodné číslo“ musí být správně vyplněno!');
      e.preventDefault();
      return false;
    }

    var
      odd = +bn.charAt(0) + +bn.charAt(2) + +bn.charAt(4)
          + +bn.charAt(7) + +bn.charAt(9),
      even = +bn.charAt(1) + +bn.charAt(3) + +bn.charAt(5)
           + +bn.charAt(8) + +bn.charAt(10)
    ;

    if ((11 === bn.length) && ((odd - even) % 11)) {
      alert('Formulářové pole „Rodné číslo“ není platným rodným číslem!');
      e.preventDefault();
      return false;
    }
    if (!/^[a-z_\.\-]+@[a-z_\.\-]+[a-z]{2,3}$/gi.test(em)) {
      alert('Formulářové pole „Email“ musí být správně vyplněno!');
      e.preventDefault();
      return false;
    }
  });
});