Web App CSS Layout

In this example below you will see how to do a Web App CSS Layout with some HTML / CSS and Javascript

Example of using Flexbox CSS Layout to create a dummy UI.

Thumbnail
This awesome code was written by oieduardorabelo, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright oieduardorabelo ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Web App CSS Layout</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="Header">
        <span class="HeadingHero">Header</span>
        <div class="SearchBox">
            <input type="text" class="SearchBox-input">
            <img role="button" tabindex="0" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OTAiIGhlaWdodD0iNDkwIj4KICAgIDxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIzNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJtMjgwLDI3OGExNTMsMTUzIDAgMSwwLTIsMmwxNzAsMTcwbS05MS0xMTcgMTEwLDExMC0yNiwyNi0xMTAtMTEwIi8+Cjwvc3ZnPiA=" class="Icon-magnifyingGlass" />
        </div>
    </div>
    <div class="Content">
        <div class="Col-md-1/2 Col-lg-3/4 CMSContent">
            <span class="HeadingHero">Content</span>
            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum dolorem saepe, odio unde reiciendis, reprehenderit porro, consequuntur numquam doloribus perspiciatis similique, consectetur. Fugit, dolores, sed distinctio necessitatibus iste totam tempora quis repudiandae sequi eligendi accusamus quaerat natus cumque. Asperiores minus, perferendis inventore placeat, doloremque tempore commodi et dicta quidem cupiditate nam. Animi nulla impedit quaerat reiciendis doloremque mollitia assumenda. Tempore ab culpa repellendus placeat dolores eius alias assumenda aliquid ducimus error quas recusandae aut at tempora veritatis, cumque magnam sed iure, nam corrupti. Et incidunt molestiae ad. Doloremque totam nobis quam minima repellat facilis debitis, tenetur hic adipisci omnis praesentium voluptatibus non tempora accusantium, voluptatum soluta consequuntur. Dolorem eveniet veniam, praesentium voluptate perspiciatis dolorum nam deserunt dignissimos ea facilis eaque vitae totam odit omnis doloremque tempore provident beatae nostrum. Recusandae ea, maiores quasi voluptas, eveniet libero nostrum facilis, quaerat inventore illum unde molestias provident quas harum ad velit nesciunt quisquam. Accusamus voluptates, doloribus animi. Nobis debitis, fuga repellendus. Delectus magni praesentium suscipit et dolore omnis, quidem minus labore. Sit est placeat sequi iste consequuntur accusamus, quisquam nemo. Itaque ex, saepe quibusdam officia nam explicabo iure, architecto maiores illo animi fugit doloribus, placeat molestiae eum. Voluptatem quis alias impedit, aspernatur porro dignissimos accusamus odit animi placeat autem, voluptatum minus dolorem inventore non illum nobis nostrum incidunt ducimus dolore in tempora corporis ut perspiciatis et nulla. Accusantium officia consectetur quam fuga corrupti voluptatibus, illum nisi nemo fugiat ea modi repellendus saepe iste voluptatem assumenda esse repudiandae id aliquam necessitatibus! Inventore delectus corporis mollitia, eius animi excepturi minus unde sequi dicta ratione vitae voluptas quas porro pariatur obcaecati perspiciatis quos commodi. Itaque placeat sint, corporis, culpa earum vitae similique possimus blanditiis debitis. Provident magnam dolores, perferendis maxime. Consectetur, eum in quos atque repellendus illo cumque deleniti, et quas vero, quisquam ipsam aliquid recusandae laborum. Ipsam optio voluptate voluptatum eum incidunt pariatur deserunt. Perferendis temporibus, numquam maiores cumque quisquam nihil, laborum quos eum qui? Officia quibusdam quos qui placeat expedita ipsa, odio amet saepe minus fuga tempora necessitatibus neque, corporis dolorem? Quam, recusandae id doloribus! Ut, quam, sequi. Molestias placeat velit, esse vel autem inventore debitis deleniti explicabo nostrum quasi qui animi minus maiores amet natus, repudiandae, asperiores odio accusantium veniam? Impedit doloribus aperiam dolores, architecto libero atque tempora odit voluptatibus quae dignissimos officia sequi explicabo iste laudantium eveniet possimus alias, tempore minima amet perferendis provident. Non soluta natus porro necessitatibus numquam totam a, assumenda velit quisquam quas odit voluptates, quaerat, excepturi doloribus quos alias enim officiis mollitia nobis dignissimos! Delectus sapiente optio, veritatis maxime laboriosam, architecto quod mollitia nemo aperiam veniam voluptatibus culpa incidunt dolor amet assumenda aut quibusdam explicabo possimus, impedit. Reprehenderit tempora alias iusto. Totam ipsa voluptate beatae consectetur, non, harum esse labore voluptatem mollitia accusantium quidem nesciunt obcaecati eos dolorem fuga corrupti, dignissimos numquam sapiente quam. Corrupti, ducimus, cumque labore optio iste deleniti pariatur consequuntur commodi laudantium placeat, aspernatur alias hic quidem perferendis velit aliquid. Dicta ipsa molestias explicabo sequi odio id facilis porro quis cumque. Nemo reprehenderit animi autem possimus, cum consectetur repellat beatae atque, repudiandae eos pariatur repellendus non dolorem voluptatem quia amet ipsa illum facere. Eos adipisci odio, voluptatibus! Quo veritatis quas accusantium, quos, rem aut natus ex unde vero saepe. Explicabo, debitis! Dignissimos inventore adipisci est expedita quod officiis a ratione et minima, placeat rem nam obcaecati eaque pariatur error voluptate, facilis explicabo exercitationem ipsa! Aliquid, incidunt repellat similique non quasi, in, porro laudantium corporis commodi vel velit quos libero sit at explicabo. Saepe vitae odit, soluta consequatur dolores eius, ad, officiis praesentium nesciunt molestias quaerat deleniti assumenda veniam, illo. Impedit quas maiores facilis optio adipisci qui at voluptates cumque, expedita sint nihil similique in tempore ipsam esse quia voluptas, reprehenderit deleniti et nemo deserunt eligendi. Dicta recusandae, ratione commodi corrupti at, tenetur delectus blanditiis rem quaerat saepe, alias adipisci. Dignissimos corporis culpa porro eligendi, magnam aut consequuntur consequatur. Quis illum voluptate repudiandae nobis, dicta quam quos obcaecati nulla eum rerum eveniet placeat officia dolor, ullam minus perferendis iste perspiciatis consectetur aperiam in culpa quae blanditiis inventore adipisci. Sint nihil assumenda neque nemo at, quo ex dicta, totam similique animi! Delectus quaerat excepturi, quas consectetur eius possimus earum? Delectus mollitia natus quibusdam eius ex provident sed voluptatem, sunt! Saepe molestiae temporibus dicta consectetur qui, vitae itaque hic. Nulla praesentium exercitationem autem porro, aperiam, quasi eum temporibus deserunt quis tempora cumque quia sint, labore ex doloremque optio numquam animi est quisquam. Fugit voluptas, numquam rem, laboriosam commodi iusto sunt aliquid nam veniam aliquam vero, magnam quidem sed harum. Aperiam amet necessitatibus dignissimos assumenda accusamus natus ut aut architecto temporibus, vero ipsam, non optio praesentium voluptatem. Vitae a eius, animi quos dicta quia autem ipsum. Expedita sequi quisquam quas doloremque hic, dignissimos deserunt facilis, officia necessitatibus maiores quod est neque quasi blanditiis suscipit, amet nesciunt magni voluptas voluptatum reiciendis dicta perferendis quae ea provident, illo. Neque quia officia aliquid error impedit reprehenderit similique itaque tempora architecto ipsum eos quis voluptas placeat quo vitae repudiandae asperiores vero mollitia nulla, autem voluptate sapiente quas sequi. Consectetur accusantium fuga labore illo! Eos impedit quasi blanditiis quo, et accusamus facilis eligendi quibusdam voluptas voluptate ducimus laborum nemo, culpa nulla consequuntur ea eius voluptates nostrum officiis explicabo. Modi corrupti magnam quidem laudantium quas architecto inventore cumque, facilis iusto dicta fugiat numquam repellat quam nihil, ullam ea sit laborum quae dolorem consectetur sint consequuntur. Sequi officia fuga architecto, qui mollitia at enim fugiat, ipsum facilis vel iure nulla unde, deleniti molestias facere eos eveniet quis natus delectus sed veritatis ea? Tempora dolor placeat vitae perferendis inventore modi, totam veritatis debitis, earum alias esse velit in, minima mollitia fugiat magnam! Assumenda odio, quibusdam quis amet, ab commodi ipsum nobis illo labore dicta saepe quaerat, impedit. Laboriosam consequuntur dolores, vel ipsum deleniti totam iusto sed omnis ipsa tempora animi, voluptatum adipisci consequatur non perspiciatis optio sequi, incidunt alias. Minima modi aut quia aspernatur architecto porro, adipisci minus, dolores excepturi nostrum aliquam ipsa reprehenderit! Itaque quos veniam amet sapiente voluptatum obcaecati sed ab molestias, distinctio autem, quo praesentium aliquam totam eveniet ad quae, sunt. Ipsa corporis quibusdam modi aperiam est provident laborum, quas, temporibus ducimus sit accusamus expedita ex adipisci quidem quae suscipit beatae! Id magni quasi saepe cumque consequatur nam fugiat ullam ut odio similique ratione cum, dolorum, dolorem. Quod temporibus voluptatem ex minima eligendi doloribus officiis, perferendis, vero, rem animi, dignissimos excepturi atque odio amet ipsam modi deserunt fugiat assumenda tempore ducimus labore. Et dolores quas nemo magni tenetur perferendis nisi rerum, velit nulla aliquam. Ducimus in quas earum harum! Similique sequi, delectus eos. Quisquam cum, ipsam quos, id, delectus dicta dolores obcaecati, molestias culpa vel nisi voluptate fugiat sequi doloremque aliquam debitis magni! Expedita error, blanditiis. Veritatis enim voluptatibus, sapiente suscipit sed reiciendis. Asperiores rem dolorum ducimus. Hic accusamus rerum fugiat cupiditate illum consequatur, praesentium dignissimos, vero eum deleniti optio in. Repellat voluptas veritatis fugit, nemo modi libero, officiis id velit labore saepe culpa cupiditate quae praesentium atque, dolores cumque animi consectetur nulla dolore odit consequuntur quaerat. Perferendis voluptatum officia, alias odit dicta quaerat porro magnam cum, dolorem voluptatibus assumenda blanditiis. Sapiente dolores possimus sed, aperiam est. Atque rem eius ullam neque quod non a temporibus hic commodi molestiae assumenda, error veritatis fugiat beatae excepturi enim ex mollitia expedita eveniet voluptatum! Vitae, dolorem rerum sapiente quis, fugit aliquam magnam eveniet totam, consequuntur facilis culpa, quasi. Non dicta ullam, culpa nobis fuga atque deleniti iure qui perspiciatis suscipit quas eveniet sunt, quod beatae eos labore obcaecati dolorum laudantium quae ducimus consequatur. Ullam incidunt magni, aut maiores similique. Amet maxime, saepe sint ea error placeat atque eveniet eligendi nisi voluptatum optio incidunt assumenda tempora ipsa expedita modi eius. Eos libero similique doloremque, officiis consequatur architecto iste quidem dolores sapiente iusto quasi, impedit accusamus alias, esse. Illo praesentium similique assumenda tempora aperiam repellendus sed ipsa minima, architecto magni a eius vel molestias qui quae rem voluptatibus necessitatibus aliquam fuga, laudantium error. Culpa, explicabo sunt. Ducimus quod, repudiandae doloribus consectetur magnam, modi sapiente beatae officiis corporis incidunt error sunt pariatur maxime, enim praesentium? A tempora harum magnam nihil odio, impedit sequi. Aperiam incidunt, eaque veniam possimus eveniet iure aliquam eum placeat quasi ex? Sed voluptatum, laborum maxime totam quam distinctio magni vitae, est, fugiat tenetur commodi corrupti esse natus facilis nisi! Optio dolore laboriosam, quam consectetur ea nesciunt mollitia quibusdam delectus necessitatibus aspernatur, sequi voluptates, aliquid asperiores totam? Incidunt expedita numquam quidem corporis. Eveniet optio nemo, nisi, molestiae incidunt impedit quod vel natus sapiente, delectus laboriosam repudiandae iusto sunt enim deserunt consectetur! Officia voluptatem asperiores obcaecati tempora! Aliquid ad deleniti voluptate. Fugiat officia iusto, nisi suscipit debitis inventore eum! Magni alias porro ratione tempora molestiae. Perferendis fugiat eligendi hic repellendus ipsa facilis ut enim vitae dolorum esse tenetur officiis saepe obcaecati consectetur vel, recusandae, dignissimos tempore cupiditate eaque, laborum, facere pariatur commodi voluptatem tempora. Voluptatum unde ut sit totam, veritatis molestiae distinctio facilis, modi quasi maiores nemo culpa similique non iure fugit reiciendis? Quia veniam consequatur iure, placeat omnis aspernatur! A eaque aliquam, porro harum. Necessitatibus consequuntur, laboriosam quo minima optio molestiae similique voluptatem nisi nulla perferendis totam libero voluptatum vel neque inventore cupiditate, molestias expedita laudantium accusantium! Nobis omnis modi ducimus accusantium obcaecati, eos aspernatur asperiores ipsum eligendi cupiditate commodi. Est, voluptatibus ducimus sunt nisi, debitis tempora sint reiciendis voluptas nostrum aliquid nulla. Sint reiciendis quis itaque earum molestias magni quod officiis, at, velit neque error ex soluta quaerat veniam nobis inventore harum ab odio sunt! Porro mollitia iure itaque accusantium ex labore, sequi, reprehenderit laborum quos quis delectus alias velit ipsa voluptatibus cum natus laudantium perspiciatis cupiditate eos autem dolorum nemo. Dolore voluptate voluptates neque ex adipisci vero tempora, ab commodi provident modi, laborum amet nemo iure saepe alias dolores necessitatibus, earum obcaecati quis. Ex sapiente, id autem quibusdam consequatur assumenda ab voluptas. Saepe rem, cumque, veritatis assumenda voluptas vero modi quaerat illum eius ullam est voluptatem reiciendis iste blanditiis obcaecati error atque. Quam aperiam sequi in, tempora facilis ullam! Est consectetur praesentium adipisci reiciendis quia omnis assumenda vitae, alias neque necessitatibus earum! Nihil quam quis similique, itaque tempora perferendis quo ipsa officiis magnam, ut illum odit necessitatibus, possimus deserunt. Similique molestias, totam dolorem vel ea animi harum ad quos fugiat nulla quod minima, unde libero, voluptatem ipsum! Cum impedit amet dolore exercitationem cupiditate nam temporibus dolor cumque, maiores obcaecati quam nihil corporis nemo laboriosam dolorem unde aut eos excepturi delectus praesentium. Blanditiis minima id consequatur laudantium et iste error impedit nesciunt ex quasi nisi, odio dolore quia totam natus, aut dolores, qui. Natus, voluptatum quis nostrum quo harum fugiat sint ad provident sunt, rem nemo. Quos vel facere, exercitationem totam nihil itaque harum veniam, suscipit dolor eius minima ex molestias vitae eveniet aliquam. Aliquid laboriosam, blanditiis animi provident repellat nisi ut quo rerum tempore, quia voluptate veritatis unde, itaque illum in eaque quibusdam? Possimus incidunt sint, laborum perferendis nisi eveniet quia optio, culpa, nulla non voluptatem, et aliquid quisquam cupiditate. Culpa eligendi porro at deserunt quia voluptates maiores veritatis praesentium sequi aperiam asperiores est dolorum nesciunt voluptas atque, enim numquam neque non impedit animi sapiente natus cupiditate alias. Aspernatur nostrum impedit rerum eveniet, ullam ea, officia ad quam quas, obcaecati nisi earum sunt quo. Suscipit ipsa veniam dolorem, eius earum at delectus, iusto aperiam dolore nisi totam, soluta error. Voluptas repellat, enim maiores quae, praesentium et. Reiciendis quisquam quis, porro. Inventore, aliquam saepe, voluptate, reiciendis nam, nobis tempore dolorum aperiam maxime atque unde ipsum doloribus officia totam. Nulla, dolor asperiores blanditiis fugit, dignissimos excepturi error quibusdam et veniam maxime voluptatibus reiciendis vel, illo aspernatur! Accusantium adipisci autem eos hic deserunt libero numquam odio dolorem aut, quod a labore, temporibus dolores officia sequi quia perspiciatis nobis ducimus fugit sed veritatis excepturi. Quibusdam eveniet hic voluptatem odio, iusto sint in. Aliquam doloribus perferendis quidem voluptates ducimus similique officia. Est quae itaque nam minima ea. A illo quam veritatis unde odio debitis ut minima et asperiores maxime sint, doloremque necessitatibus vitae magnam aperiam quibusdam, atque nisi harum nihil laudantium cupiditate temporibus pariatur ab! Ut quam qui recusandae culpa aut iure labore magnam deleniti, reprehenderit repellat optio doloribus, nemo, voluptatum dolorum debitis et neque consequuntur ratione ex veritatis. Unde pariatur quidem numquam iste distinctio molestiae sequi eos incidunt earum! Voluptas, aperiam. Maiores, alias eligendi vitae error odit placeat. Minima similique beatae quia consequatur quas, rerum quasi, nemo sequi a tempore qui ipsa quos odit enim nostrum eligendi ratione in reiciendis laboriosam. Quasi dicta ex doloribus nulla fugit velit, distinctio maiores dolorum ipsam eveniet explicabo recusandae fuga eum! Quo nostrum, debitis. Odio, quaerat neque quas dignissimos delectus saepe enim tempora, fugiat omnis id, placeat perferendis, ad quam! Numquam labore doloribus esse id voluptates suscipit ex accusantium dignissimos, nobis cum voluptas pariatur, consectetur beatae, eius! Cumque, a quidem magnam eius vel molestias fugit accusamus, unde. Odit officia veniam suscipit, delectus necessitatibus, similique debitis blanditiis nemo, doloribus ut nobis voluptates fuga aspernatur cupiditate. Odit impedit soluta, nemo molestiae quisquam sequi quis sint sit omnis, magnam ad iure voluptate architecto dolorum ducimus, est ullam aspernatur natus eligendi? Quia error, deleniti odio beatae officiis nobis molestiae, nemo quam nisi laudantium ipsum quos alias delectus accusantium aliquid blanditiis, eius voluptatem voluptates, cupiditate laborum deserunt provident nam sunt optio dolore? Ratione laborum temporibus eveniet vero optio tempora, dolor animi voluptatibus quam, recusandae, autem reprehenderit ad molestiae ducimus ea quis. Amet cupiditate recusandae, dicta suscipit, illum voluptates at dignissimos magni, minima maxime consectetur! Corporis voluptates eligendi, fugiat ad placeat ipsum ut magni assumenda alias aspernatur velit quis asperiores sunt doloremque maxime hic perspiciatis eos suscipit recusandae, necessitatibus itaque! Eos ab reprehenderit illum atque aliquid dignissimos, nulla libero aperiam, sequi veritatis recusandae minus. Tempora provident, dicta, saepe cupiditate tempore blanditiis consectetur neque reprehenderit expedita, veniam doloribus. Nulla iste eius animi eveniet ea maiores deserunt dolorum aut hic quaerat dolores soluta ducimus excepturi nostrum earum voluptate, aspernatur repellat aliquid perferendis autem. Excepturi consectetur dolorem, quaerat veniam voluptatem eum delectus! Libero sequi, iste velit officiis consequatur magni neque facere pariatur. Amet quas veniam, obcaecati ullam quos maxime alias eaque quia. Quae odit dolorem quia fuga doloremque blanditiis molestias, recusandae commodi ex, aspernatur neque debitis voluptas error cumque porro amet facilis quaerat fugiat praesentium accusantium? Dolore soluta alias necessitatibus vitae officia officiis, nisi deleniti, vel fugit? Repudiandae eveniet excepturi error quasi deserunt qui, quod aliquid maxime, suscipit quo vero provident, nobis pariatur doloremque dolorem impedit accusantium enim non temporibus atque. Delectus aliquam nisi sed, inventore illo repellat modi dolorum, cum atque in qui nihil veritatis dicta, reprehenderit voluptatibus! Facilis dignissimos consequuntur quibusdam suscipit quaerat iusto sapiente voluptas impedit, cumque? Aliquid quam at amet ducimus dolore nisi ea dolores vitae maxime! Tempora, officia tenetur et numquam dolore sapiente possimus eum! Non ipsam voluptate, quae dignissimos eligendi quia, maiores placeat vitae tempora nobis, error similique. Ab tempora magni, aspernatur, modi nisi at. Molestias dignissimos vero porro tempora molestiae iusto possimus. Culpa expedita et, est tempore. Fugit quisquam commodi atque eveniet consequuntur velit facilis cupiditate architecto. Itaque quae recusandae placeat hic dolorem, deserunt porro distinctio modi eius quia iusto sint veritatis et. Rem nesciunt quibusdam labore, voluptate id ullam dicta, recusandae. Sapiente quia magnam velit totam nobis et sed, quis, culpa quas. Voluptatibus beatae odio tenetur porro tempora est nesciunt quia eius, ipsam quam eos omnis nobis! Repellat eius voluptatum in, ut, eveniet non eum quidem facilis accusantium delectus cumque, est neque. Quas, saepe eos doloremque, temporibus totam nobis eligendi magni facilis tempore rem voluptatem sequi dolore aliquid sed recusandae eveniet excepturi atque pariatur expedita reiciendis libero quibusdam obcaecati incidunt placeat? Nam laboriosam suscipit architecto? Sapiente, labore. Ratione, maiores? Soluta molestiae officia consectetur totam mollitia, aliquam quos sed maxime quibusdam perspiciatis nulla animi. Tempora officiis quisquam, doloremque sed unde nisi possimus facere temporibus hic dolores ex aut nam ipsa esse ullam est qui magni natus labore, in fugit at autem eligendi nesciunt! Delectus quibusdam voluptas voluptates pariatur, facilis distinctio debitis iure accusamus rem aliquid vero obcaecati corporis voluptatem! Soluta reprehenderit mollitia delectus rerum, voluptas nulla cumque aspernatur praesentium qui perspiciatis dolore ipsa alias, voluptate sed tempora, repudiandae ab fugiat error beatae fuga! Modi delectus vero, error alias fuga officia amet enim odit unde harum suscipit officiis, hic, consequuntur, ipsam eos maxime impedit vitae nemo in. Fugit, suscipit delectus quidem sint repellat natus repudiandae recusandae eaque distinctio, adipisci dolore! Tenetur repellendus labore quae vel nihil quis, vitae cum voluptate similique, libero maxime quod soluta quam. Deleniti velit placeat natus laboriosam ratione, veritatis maiores delectus molestiae ipsum quibusdam ea, ut in debitis hic, officia eius quam ullam incidunt, perspiciatis distinctio nesciunt quaerat dolores ducimus. Mollitia soluta ut quaerat recusandae deserunt voluptates cumque inventore delectus incidunt, sequi illo ex dolore placeat quis officia deleniti possimus. Nihil, nemo. Dolorum ipsam, debitis quas culpa ad distinctio magnam quasi voluptatum qui deleniti reprehenderit perspiciatis adipisci sunt laboriosam explicabo. Assumenda dolores repellat est magnam tempora inventore vel cum aperiam similique. Quasi obcaecati, aliquid consequuntur nobis. Nemo neque beatae assumenda, asperiores voluptates voluptatum tenetur excepturi voluptate, accusantium adipisci dolorem distinctio mollitia consectetur voluptatem dolores temporibus sint ducimus molestias ex veniam quaerat, quas nulla harum. Repudiandae nihil asperiores dolores quam fugit alias eaque quas necessitatibus atque aliquid odit quidem repellat hic et nam cupiditate, illo qui esse ab laboriosam velit quibusdam. Nam quo corporis quos minus distinctio eaque, quia blanditiis officiis voluptatem enim reiciendis quod, nostrum ea amet, odio vitae incidunt. Voluptate excepturi aperiam impedit dignissimos placeat, expedita repellat, inventore quod aspernatur quos fugit vero ex facere veniam. Asperiores voluptatem itaque dolorem dolore eius aut, distinctio unde, non saepe laborum. Quod nulla, possimus quidem minus tempora assumenda quae animi eius totam nihil iure commodi! Totam illo a nemo ducimus reprehenderit sapiente, expedita sit quidem aliquam error deserunt excepturi libero ex, autem tenetur, quos veritatis placeat dicta, ipsum natus perferendis dolorum. Beatae, sapiente maxime perspiciatis quod dicta fuga, quos, at fugit tenetur nostrum deserunt, quibusdam harum vitae repellendus ea! Culpa sapiente mollitia cumque excepturi, animi eveniet dolor magnam dolore quaerat ex saepe minima. Voluptas asperiores nemo consectetur nihil reiciendis placeat quos fuga provident excepturi inventore. Provident distinctio iure ex recusandae non enim quod, eius?</span>
        </div>
        <div class="Col-md-1/2 Col-lg-1/4 Sidebar">
            <span class="HeadingHero">Sidebar</span>
        </div>
    <div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/oieduardorabelo/web-app-css-layout-dproOQ */
*,
*::after,
*::before {
    align-content: flex-start;
    align-items: stretch;
    border: 0 solid black;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}

head,
script,
meta,
title,
link,
style {
    display: none;
}

html {
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.25;
}

body {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

input {
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.25;
}

[role="button"] {
    cursor: pointer;
}

[class*="Col-md-1/2"],
[class*="Col-lg-1/4"],
[class*="Col-lg-3/4"] {
    width: 100%;
}

@media (min-width: 768px) {
    [class*="Col-md-1/2"] {
        width: 50%;
    }
}

@media (min-width: 1200px) {
    [class*="Col-lg-1/4"] {
        width: 25%;
    }

    [class*="Col-lg-3/4"] {
        width: 75%;
    }
}

.Header {
    background-color: #111;
    color: #FFF;
    flex-direction: row;
    height: 70px;
    padding: 20px;
}

.Header > .HeadingHero {
    flex: 1;
}

.SearchBox-input {
    padding: 4px 34px 4px 8px;
}

.Icon-magnifyingGlass {
    height: 18px;
    position: absolute;
    right: 8px;
    top: 5px;
    width: 18px;
}

.Content {
    height: 100%;
    padding-bottom: 70px;
    position: relative;
    flex-direction: row;
}

.Content > .CMSContent {
    margin-bottom: 20px;
}

.CMSContent {
    overflow: auto;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 20px;
}

.Sidebar {
    background-color: #EEE;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 20px;
    text-align: center;
}

.HeadingHero {
    font-size: 20px;
    line-height: 1.4;
    font-weight: bold;
}

Comments