123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="o-container">
	<div class="c-nav">
		<ul class="c-nav__list || c-menu || o-container__wrap || u-list-reset">
			<li class="c-menu__item">
				<a class="c-nav-link" href="#" title="hover me!!!">Home</a>
			</li>
			<li class="c-menu__item">
				<a class="c-nav-link" href="#">About Us</a>
			</li>
			<li class="c-menu__item">
				<a class="c-nav-link"href="#">Contact Us</a>
			</li>
		</ul>
	</div>
	<div class="o-container__wrap">
		<h1>
			Lorem, ipsum
		</h1>
		<p>
			Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eligendi saepe officiis, ducimus laborum totam, dignissimos velit explicabo impedit ut suscipit optio ratione facere at odio repellendus quos, illo recusandae laboriosam hic perspiciatis esse fugiat tempore quidem omnis. Unde, ducimus, sint tenetur at eligendi similique animi architecto provident officiis vitae est natus tempora voluptates debitis consequuntur sequi pariatur quasi ab atque labore ex et cupiditate! Excepturi, rem. Obcaecati nemo quas voluptatum saepe eaque quidem maxime suscipit harum. Odit sapiente totam tempore rem sint, magni unde facilis ipsum assumenda dolor. Aliquid voluptates minus vitae quisquam nemo maiores tenetur quo, hic laudantium natus, quod dicta ea omnis temporibus. Reprehenderit dolorum nihil officia, fugiat unde accusamus molestias sapiente porro consequuntur, earum veritatis doloremque! Ex, officia earum odit repellat ut fugiat vero maiores? Aliquid itaque ducimus alias quas qui deserunt tenetur distinctio aperiam. Itaque accusamus soluta delectus ducimus molestiae tempore fuga similique quam odit tempora modi earum consequatur id vitae hic culpa at, laudantium provident esse reprehenderit placeat? Facere aliquam natus rerum amet porro vitae tempore veniam beatae fugit. Nemo, architecto quia dicta voluptate aliquid qui id incidunt temporibus voluptatum ad at culpa magnam impedit placeat ut reiciendis excepturi et quas consequatur perferendis possimus? Vel ducimus soluta et, labore dolores veniam fugiat dolorum iste. Quasi, obcaecati accusantium. Molestiae sapiente quos blanditiis, a modi dicta recusandae sed ut, atque aliquid esse animi eligendi ipsa voluptatibus beatae. Eligendi earum adipisci a eum nisi minus dolores minima quas accusantium, excepturi alias aut ipsum. Corrupti, soluta deserunt officiis neque at mollitia alias? Ducimus quibusdam voluptatum eius beatae ipsa. Qui asperiores minus tenetur aperiam eaque! Nobis maiores magni possimus dignissimos corporis, beatae dolorum, tempore autem repellendus, facere veniam optio ab. Minus in accusamus, cum assumenda commodi facere illum quod soluta omnis ipsum repellat odio doloremque dolore maxime reiciendis, animi perferendis repudiandae consectetur ipsa ducimus tempore autem, illo voluptatum ab. Neque labore sint quisquam sequi provident repellendus numquam architecto qui totam assumenda. Quam sit dolorem adipisci fuga animi, commodi perferendis id quas perspiciatis vel odio quo illo neque, minus dicta libero recusandae eius aut tempore aspernatur sapiente officia est? Minus porro reprehenderit maiores veniam, sapiente natus molestiae nulla distinctio illum. Laudantium natus inventore fugiat! Officiis quod animi ipsam maxime et pariatur sint autem molestiae, temporibus maiores ut nihil fugiat, quaerat ratione ab. Similique et, harum eligendi ducimus veniam blanditiis voluptatibus, praesentium aliquid voluptatum illum deleniti quia rem labore. Tenetur aliquid, totam dolorum eligendi sint quas exercitationem natus, magni necessitatibus ducimus dignissimos neque repellendus veniam odit et vero unde repudiandae deleniti, aspernatur labore possimus. Rerum optio sunt quod molestias maxime sit cumque sed cum nostrum velit nihil, doloribus recusandae. Repellat nihil tempore labore accusantium inventore. Nisi voluptate molestiae porro libero odio soluta odit exercitationem, dolor minima tempore veniam molestias illum. Dolores vel enim voluptatem magnam sint modi, sequi explicabo autem nemo eos dolorum at omnis aspernatur temporibus accusantium. Rerum cupiditate non vero fugit quod eum magnam quo doloribus animi beatae! Iusto atque natus odio quia impedit nisi cumque? Odit exercitationem perspiciatis vel autem, numquam similique molestiae in sint nesciunt fuga cum corporis rem ipsum labore saepe ullam enim itaque minima quia? Nulla, est pariatur. Voluptatibus distinctio, voluptates labore quam tempora aut quasi. Beatae sit animi expedita minus aperiam fugiat cum molestiae quae nam id, soluta voluptates doloremque sunt omnis ab error quidem recusandae reprehenderit voluptatum labore debitis? Fuga, voluptate! Corporis cupiditate id debitis adipisci impedit quisquam earum sit eaque, temporibus maxime facere at, blanditiis numquam recusandae accusamus ex, provident harum repudiandae dignissimos! Possimus fugiat culpa dolorem facere consequatur exercitationem, labore repellat perspiciatis reprehenderit! Consectetur hic quisquam, vel reiciendis explicabo minima dignissimos tempora dolore error repudiandae fugiat officia nobis accusamus sapiente deleniti non facilis alias. Vero tempora laboriosam facilis id culpa excepturi, molestiae qui quae cum totam facere suscipit cupiditate perspiciatis. Quae cumque ad soluta accusamus minima tenetur fugit sit beatae facere! Eaque, modi pariatur! Aliquam quo autem at quod ad exercitationem. Sunt sapiente alias maiores facere eius saepe corporis obcaecati doloribus quibusdam consequatur consequuntur, non molestiae voluptate, vitae ipsum dolore ullam ipsa reiciendis esse autem. Tenetur ullam eaque, perspiciatis optio unde quisquam ratione, libero a esse tempora dolorem possimus illo. Quod recusandae blanditiis magnam, architecto enim nobis odio laboriosam cumque animi fugit quam, dolores sapiente quaerat facere. Magni, temporibus ut, autem laborum accusamus repellendus illum at cupiditate vero saepe doloribus nisi iure vitae error dolor in dolore pariatur voluptate ad qui quisquam atque! Veritatis molestias illum beatae nulla maiores dolorem consequuntur exercitationem modi numquam suscipit, laudantium dolor perspiciatis? Libero consequuntur minus est ut ullam ipsum magni porro. Ipsum, nisi, quis numquam temporibus blanditiis, laborum et modi ad unde reprehenderit similique! Quasi, maxime. Eum molestiae reiciendis ducimus magni, magnam vero necessitatibus aperiam itaque dignissimos quam eveniet esse libero? Eos nesciunt quia nulla natus nobis modi optio quos minus ex asperiores tempora, sequi eveniet quisquam, reiciendis perspiciatis. Excepturi saepe aspernatur ab dolor iure atque tenetur ipsa nulla, numquam quos, quasi porro sed consectetur magni neque est! Voluptate, id perferendis libero cupiditate totam tenetur in ea atque, quisquam, nobis impedit necessitatibus repellat! Ducimus mollitia, minus non doloribus eius dolorem est, id atque quibusdam cumque nulla, fuga corporis sed temporibus aliquid neque placeat dicta ut iste quidem obcaecati. Perspiciatis quod enim, voluptate odit totam exercitationem saepe maiores magni, mollitia cumque eos reprehenderit et magnam cupiditate. Eum, impedit tempora. Similique commodi reprehenderit quasi porro numquam. Quis incidunt sint ratione velit inventore autem nisi, ea numquam quod recusandae temporibus, iusto eius minima? Culpa aspernatur, nulla ea dolore illo modi distinctio facilis placeat voluptate doloremque assumenda vitae earum, temporibus necessitatibus, ad eaque corrupti velit eum quas reprehenderit. Temporibus cumque nostrum libero totam ratione voluptate doloremque quam quod corrupti accusantium. Dicta corporis officiis odit rerum, iusto tempora nihil praesentium accusantium inventore, eveniet repellendus consequuntur nemo ullam sit dolores, nulla eum repellat minima sequi iste ipsum sint odio aspernatur. Officiis dicta error ullam, natus perferendis sed beatae harum ab suscipit numquam obcaecati vel aperiam dolores. Cumque, magni alias temporibus omnis aspernatur commodi quidem et unde atque obcaecati fugit, ad facilis, nemo ipsam molestiae mollitia. Minus quia consectetur ab eaque dicta? Soluta fuga qui consequatur fugit quia totam fugiat aliquid perspiciatis consequuntur quidem! Facere quaerat aliquid aspernatur est eaque ipsum nesciunt labore consequuntur. Atque suscipit ut sapiente magni corporis maxime dolores iste veritatis doloribus. Sed rerum quod perferendis tempore quas. Modi inventore eveniet, quidem, vel mollitia et incidunt alias quae non iste culpa dolorum? Iure numquam ab tenetur est sit accusamus saepe ducimus perferendis, quam omnis culpa nihil facilis aperiam repudiandae nesciunt, aut, at itaque. Neque quos impedit exercitationem. Impedit reprehenderit officia eos necessitatibus cum nihil quisquam. Nulla temporibus eum, accusamus deserunt accusantium sapiente, praesentium aspernatur consequatur, magnam inventore at natus unde illum sit asperiores facilis delectus. Optio provident, totam saepe cum illum amet sunt sed animi quibusdam quas ipsum maiores hic omnis modi tenetur quisquam tempore enim fugiat fugit dolorem alias pariatur! Accusamus adipisci impedit tempora soluta voluptatibus amet consequatur. Rerum natus, nesciunt possimus officiis, vitae delectus aut totam eius saepe earum provident quod repudiandae itaque temporibus sint velit, dolore nihil ipsa! Ut deserunt nihil rem voluptatum nam sint excepturi libero aliquam corrupti amet saepe blanditiis sed cumque dolorem, et optio hic dicta dolor! Nobis hic libero itaque architecto repellat voluptates praesentium ipsum ea, iusto debitis animi alias eaque cumque blanditiis neque nostrum nam! Incidunt, laboriosam expedita id eaque non ut, impedit placeat officiis pariatur consequatur amet alias similique harum. Voluptatem quod possimus repudiandae modi pariatur? Reiciendis, voluptatum atque. Optio nihil praesentium doloremque itaque impedit incidunt, commodi odit. Officia expedita cumque officiis magnam non, aliquam dolorem vitae. Fugiat similique nihil delectus illo voluptas eveniet tenetur ipsam enim ratione? Laboriosam tempore a dignissimos id vitae ratione amet quisquam repellendus quis excepturi maxime deleniti, maiores, modi laudantium. Odio dolorum corrupti minima perspiciatis consequuntur, blanditiis nulla repellendus dignissimos amet modi harum excepturi iure molestiae ipsam nemo est voluptatibus tenetur perferendis doloribus animi? Praesentium numquam explicabo odit qui eligendi tempora ut magni! A, suscipit fugit blanditiis deserunt excepturi doloremque non repellat quas est ad doloribus, dicta laudantium molestiae eligendi. Minima porro adipisci autem ducimus pariatur nulla deleniti voluptas quo quia sint impedit est consequatur facilis consequuntur, optio omnis eos cumque error nam reiciendis ab inventore dolorum iste! Eaque suscipit nulla at consequatur, exercitationem incidunt nihil cupiditate rem, cum explicabo voluptatibus porro expedita pariatur, laudantium qui inventore quis corporis est aliquid labore reiciendis deleniti provident cumque eveniet. Id eum incidunt pariatur quibusdam placeat aliquam, consequatur ea beatae at labore a tempore itaque nisi cupiditate, modi ab consectetur provident, ipsa architecto nobis. Maxime quaerat odio eveniet culpa exercitationem dolorum dolor esse atque! Veritatis, minus! Amet, repellat? Numquam minus doloremque natus similique ea voluptas exercitationem repudiandae cupiditate, earum, veritatis totam fuga omnis maiores quaerat nesciunt praesentium cum quos incidunt sed alias consequatur. Quis, voluptate ab nemo cumque eligendi voluptatum amet, itaque quasi, aliquid perferendis corrupti ducimus quam hic odio quae? Praesentium quaerat fuga magnam, atque corrupti debitis eum, nam sapiente aut consectetur excepturi sequi magni vero maxime sed fugit perferendis animi hic voluptatem sunt accusantium minima eaque facere. Voluptatibus in, laboriosam rem maiores culpa, optio officia consequuntur dicta, quae harum dolore numquam aperiam libero corporis totam accusantium. Laborum numquam eos soluta accusantium explicabo! Magnam iure omnis animi neque architecto exercitationem deserunt corrupti voluptate maiores dolorum rerum consectetur sapiente in, explicabo minima accusantium aperiam non praesentium eaque itaque adipisci! Eos vero ex minus doloribus tenetur, dolorem facere libero eius, voluptates magni perferendis sequi mollitia ipsa iste dolor nesciunt voluptatum voluptate enim iusto impedit dicta, odit exercitationem quia? Enim ipsam assumenda culpa minima possimus provident, voluptatum, nulla veritatis sunt at nihil deleniti voluptates fugit recusandae soluta adipisci molestias harum. Laborum illo porro sapiente, nisi similique, eos distinctio omnis veritatis reiciendis, molestias natus soluta. Consequuntur est repellendus quos fugiat reiciendis? Praesentium saepe amet pariatur officia quidem neque possimus vitae sequi. Quas qui nostrum soluta earum enim ipsum aliquam alias in laborum! Earum ab, laudantium magnam sint consequuntur beatae laboriosam vitae dolor, neque dolorum maxime ea obcaecati quidem sed, reprehenderit modi sit. Aperiam delectus praesentium error nisi, sapiente quod at maiores consequuntur placeat incidunt. Ea ullam corrupti molestias velit. Fugit, quisquam delectus culpa voluptate nihil velit soluta quod nisi consectetur maxime fuga quasi ullam ratione rem dolore autem sint impedit similique voluptates aut tempore? Ipsa illum fugit porro quam! Ea, deserunt saepe. Praesentium eaque mollitia nostrum! Suscipit laboriosam adipisci asperiores illo, labore quo rerum ea? Odit quae, dolorum exercitationem sed distinctio sequi, ratione quos consectetur veritatis fugit ipsa rem temporibus nisi sapiente obcaecati vitae? Veritatis rem natus sed modi, maxime fugiat accusantium nobis vitae in illo quo ipsum nihil perspiciatis sint laboriosam iure ipsam esse facilis impedit. Aliquam ad facilis sit quo consequatur voluptates quos explicabo corrupti ea harum, odit labore, dolorum repudiandae deserunt aut quis ullam molestiae necessitatibus magni! Autem vero magnam sit recusandae consequuntur, voluptatem minima quae cupiditate eveniet odit voluptatibus velit neque sint esse! Porro similique culpa, facere ea perferendis harum tenetur tempora enim. Facere cumque quia natus omnis ullam repellendus temporibus quibusdam magni expedita in. Dicta at tempore beatae maxime quaerat suscipit illo dolorem odit nesciunt vero ab officiis iure nihil qui sed quos tenetur minus voluptatibus deleniti, vitae esse! Nemo reiciendis amet iste? Illo natus quasi reiciendis eligendi iste deserunt corrupti quas blanditiis, fugit non amet vero. Veniam inventore dolor ipsa suscipit? Vitae omnis vel temporibus eius, consequatur ipsum, impedit maxime distinctio deleniti voluptatibus rerum fugiat perspiciatis esse, vero placeat amet quaerat expedita. Fugit sequi distinctio porro. Rerum error porro possimus architecto officiis, minus aut exercitationem pariatur nisi consectetur cumque aperiam veniam omnis blanditiis dignissimos optio delectus ipsum voluptatem voluptatum? Provident, ullam cum beatae sunt aliquam nemo impedit ab, libero consequatur eveniet laboriosam ipsa, ducimus tempora amet illo repellendus necessitatibus corporis illum explicabo doloribus itaque. Excepturi at, deleniti officia minima, suscipit aliquam qui alias quam magnam repellat molestias eos! Reprehenderit et perspiciatis labore doloribus ratione necessitatibus mollitia, quia, magni eius voluptas quam. Quisquam minus, tenetur, natus, nihil odit unde perspiciatis saepe quibusdam illo maxime ipsa voluptatum! Debitis at atque tempora, ex asperiores veniam dicta voluptatibus odio, consequuntur saepe nostrum fugit, reiciendis labore eveniet animi magni totam blanditiis officia. Ipsam harum similique sapiente facilis ab numquam voluptates nemo consequatur. Sint commodi excepturi esse rem tempora obcaecati sunt sequi. Porro tempore nemo doloribus, quae cupiditate libero consequatur nisi cumque quam perspiciatis soluta sequi delectus itaque animi, eius quod reiciendis, eaque a numquam totam praesentium! Tenetur, optio quisquam amet natus odio quos dignissimos ipsa deleniti, ad voluptate dolorem magnam pariatur rem? Provident at dolorem laborum consequuntur ad officia cupiditate alias et, quidem aperiam cumque error ipsum in odit corporis modi voluptates harum totam repudiandae molestiae adipisci labore delectus sit. Facere reprehenderit iste sequi exercitationem officia voluptate architecto delectus a ducimus quam ea laudantium, illo dolorum. Voluptatem iste aperiam et omnis quibusdam assumenda voluptatum ipsa? Assumenda fugiat sapiente officia deserunt distinctio rem ex porro similique numquam neque exercitationem, nulla iure vitae earum tempore id asperiores at. Architecto ipsa atque iste ratione nihil? Dolorem reiciendis iusto voluptate quas earum natus, quae quia, ex labore ducimus, aut quasi adipisci? Saepe totam quisquam omnis ullam dolores eveniet odit quo, quos doloremque autem quasi quibusdam neque ipsum cumque aperiam, veniam, cum aut! Eum sed temporibus quia ex veritatis similique explicabo exercitationem, quam molestias ducimus illum, alias possimus sapiente nobis sequi illo. Quidem molestias harum non saepe tenetur, rerum nobis sit quod nesciunt ipsum sequi necessitatibus officiis quos distinctio corporis accusantium hic. Necessitatibus officiis voluptatum quod dignissimos, fugit accusamus nesciunt laborum iste dolor, earum quis ut aspernatur laudantium commodi. Accusamus est unde omnis non, perspiciatis ea ipsam sapiente itaque delectus, ratione magni voluptatum sunt excepturi iste placeat. Voluptate unde porro iusto autem quis, rem soluta iure voluptas, non earum, ipsa aliquam officiis libero exercitationem corrupti voluptatibus. Veritatis non aliquid ipsa iusto repellendus aut sed obcaecati quae ipsam cupiditate, cum molestias mollitia repudiandae! Voluptate aliquid cumque libero praesentium voluptas esse numquam quas excepturi itaque delectus quisquam mollitia, labore et! Deserunt cum velit voluptates eius aliquam voluptatum nobis eos soluta inventore cumque ut ipsa, modi non eveniet reprehenderit, enim iusto tempore quo. Excepturi cumque quas odio maxime consequatur saepe officiis sunt laboriosam quasi, commodi nam ipsa aperiam, necessitatibus inventore hic sed nisi obcaecati non aliquid doloremque possimus distinctio dolore tenetur quos? Aut provident totam animi vel repudiandae iste vero! Beatae molestiae natus dolorem quidem sit, rem, porro sint temporibus, architecto possimus molestias in odit? Dolorum eos vel, sapiente perferendis necessitatibus velit alias similique? In incidunt deleniti ex, distinctio harum quisquam voluptate autem iure molestiae rem beatae cupiditate vitae, mollitia dolores quod fugiat expedita porro velit temporibus, praesentium consectetur illo! Hic sunt nihil cum. Error adipisci vitae ipsa facilis? Eius earum illum voluptatibus officiis amet rem nihil nam qui assumenda a quidem obcaecati veniam, at quasi ad et quod voluptate accusantium excepturi explicabo, optio consequuntur. Doloremque, amet, possimus molestiae architecto incidunt, impedit quos magnam distinctio laborum nesciunt necessitatibus maiores ad voluptatem culpa reprehenderit harum. Libero quibusdam quam impedit debitis suscipit deserunt harum, dolores quasi amet, eveniet inventore ea a ipsam soluta reiciendis repellat minus consequuntur mollitia voluptatibus, odit deleniti repellendus? Excepturi, neque cupiditate? Provident ducimus excepturi odio ea suscipit asperiores error impedit distinctio, aut, assumenda et sunt consequatur ad alias ipsum. Saepe animi officiis molestias minus soluta maxime iste, explicabo non similique qui adipisci distinctio tempora illum, nemo quas eligendi autem natus reprehenderit a nisi? Ducimus quam perspiciatis ex. Impedit aliquam consequatur tenetur! Ducimus beatae expedita a reiciendis perspiciatis minima cum dignissimos ad, maiores reprehenderit. Ipsam excepturi est itaque error expedita tempore deleniti quis architecto reprehenderit delectus, harum fugiat quas suscipit saepe, officiis repudiandae. Ex rem ab nobis iste! Nostrum eaque distinctio, iusto quos facilis repellendus ab magni earum similique natus recusandae, perspiciatis non sint mollitia molestias aliquam. Suscipit optio laborum, maxime vel dolores quis! Eos, perspiciatis! Nulla quaerat doloremque cupiditate corporis nam nesciunt facilis modi unde error maxime vitae eos necessitatibus minima sequi, eum mollitia molestias! Eos doloremque voluptate deserunt consequatur explicabo similique vitae nihil! Alias odit dicta corporis enim. Voluptatem deserunt beatae, mollitia facere vitae, quidem repellat labore tenetur eaque molestias, maiores sequi. Dicta numquam corrupti voluptatem atque distinctio ea minima voluptatum perferendis amet labore molestias expedita, esse, quam cumque nisi. Repudiandae ipsam tenetur necessitatibus debitis aliquam sint nisi laboriosam pariatur cupiditate, aperiam sit deleniti, nesciunt iure eligendi mollitia eveniet rem voluptatibus libero excepturi, suscipit natus eaque ratione itaque. Eligendi, asperiores numquam voluptatibus aliquid totam eos veritatis fuga soluta fugiat nam iure itaque mollitia possimus excepturi molestias? Quae pariatur distinctio perferendis ex? Error voluptatibus culpa sit reprehenderit fugiat doloribus numquam incidunt? Ipsam enim, neque tenetur, quaerat porro quis, est saepe odio excepturi ullam fugiat numquam doloremque distinctio velit. Ipsa, recusandae. Tempore cum iusto aut quidem consequuntur, quaerat similique? Dolore laboriosam ut deleniti autem doloremque architecto nemo quisquam dolorum numquam mollitia laborum optio dicta ipsa nam et, distinctio facilis doloribus totam aperiam? Voluptatum sed commodi, quasi quae praesentium, ipsam totam labore ad ea fugiat voluptate minus corrupti debitis sunt optio est aut. Quidem numquam voluptas totam beatae voluptatem eligendi asperiores eveniet est, quos quasi, laudantium deserunt autem cupiditate enim sequi eaque excepturi quas? Dicta culpa repellendus nostrum veniam nihil praesentium distinctio hic ea delectus natus, non officiis vitae aperiam expedita. Accusamus ipsa at id explicabo dolore in cumque neque quod cum nostrum quibusdam et veniam perspiciatis culpa unde eligendi, libero quae placeat obcaecati consequatur laudantium alias sed. Voluptatibus illum ad corporis impedit dignissimos unde, facilis veritatis aperiam repellendus ex itaque natus architecto alias error provident iste assumenda sunt odit, magnam at ratione deleniti? Optio est explicabo ad recusandae commodi quod autem accusamus quia tenetur id! Aspernatur debitis nulla atque molestiae corporis nobis. Ut quas nostrum ex vero quasi modi quaerat, soluta, ratione voluptatum amet ipsum natus pariatur repudiandae ab voluptatibus autem. Dignissimos placeat quae delectus quas quos autem dolorum eius iusto provident possimus est impedit, nihil consequuntur, rem velit atque, totam voluptas. Eos maxime nisi et nostrum optio consequuntur commodi accusantium atque sunt iure explicabo, dignissimos repellat illum sed labore! Quos ipsum perferendis officiis accusantium. Ducimus hic mollitia cupiditate porro est similique quia quas facere temporibus tenetur provident, sequi dolorum id? Ducimus laboriosam dolor quis! Eius quis illum dolores ad cum saepe omnis distinctio dolor debitis facere maxime ipsum dolorem quam id vero excepturi enim, vel officiis corrupti libero magnam nesciunt aut voluptatibus! Quia iste dignissimos expedita quae deleniti atque ratione quod sequi. Autem dolore doloremque accusantium ipsum ab quam, necessitatibus voluptatum reprehenderit aspernatur? Corrupti impedit ea illo exercitationem porro ducimus dolore id quae quis! Vel, optio amet? Quos repellat harum nemo illo ipsa delectus quam, est a neque ipsam minus dolorum sed magnam iusto officia. Sit tempora quasi, doloribus dignissimos cumque provident consequatur fuga numquam accusantium ipsum velit obcaecati. Ducimus nostrum dolorum ea magni, cumque amet obcaecati quo, voluptates eius distinctio excepturi. Minus mollitia omnis obcaecati labore aut suscipit vero optio commodi facilis laborum, minima, aspernatur porro consequatur iure totam molestiae placeat pariatur velit. Eveniet a molestiae cum amet unde dolorem explicabo. Praesentium error, dolorum voluptatibus exercitationem sequi alias rem eaque sit eius reiciendis iusto similique explicabo repellendus quas, nobis atque nulla possimus nihil placeat odio temporibus consequuntur assumenda ea. Voluptate, illo esse reprehenderit aperiam quae molestias aliquam sed, beatae laboriosam debitis ipsum, unde at quod? Aut sunt, voluptas beatae minima ratione vitae ab? Totam accusamus quod, necessitatibus quam tempora possimus nostrum, aliquid voluptas dignissimos a saepe ea vero corrupti et, doloribus ab. Doloremque ipsam corrupti veniam maxime pariatur, voluptate itaque accusamus nobis quo quisquam iusto at aspernatur quia aut illum obcaecati porro vel qui? Quis doloremque quidem ut cumque, eaque delectus sunt dolorum iste quas necessitatibus. Repellat aperiam a architecto et minima quos incidunt, neque ab itaque soluta illum voluptates quod nam saepe delectus sequi deleniti illo aspernatur dolorum aliquid at deserunt. Recusandae reprehenderit, excepturi inventore architecto, sequi nemo aspernatur numquam error aliquid magnam, sapiente eligendi fugit corrupti eaque delectus placeat eos omnis rerum. Dolorem impedit libero dolores magnam commodi quod, error animi repellat maiores quia, doloribus, consectetur eveniet quam vel optio neque doloremque expedita. Culpa in aliquam ipsam fugit iusto minima, ipsum suscipit non quaerat illo, qui iste. Facilis vitae quod expedita aliquid delectus labore, necessitatibus consequuntur enim nihil ipsum sunt at, aliquam blanditiis, totam culpa quibusdam itaque neque. Numquam, accusamus ea facilis, porro nemo distinctio omnis eligendi, et fugiat laborum libero ex culpa ducimus. Optio culpa distinctio nam sed reiciendis voluptates expedita excepturi perferendis possimus pariatur et autem nulla aliquid incidunt, dicta sapiente ipsum ipsa praesentium, laborum natus accusamus adipisci facilis soluta tempora. Optio neque nostrum obcaecati. Ullam sapiente aliquam provident reprehenderit libero deleniti nemo molestias molestiae nisi. Quibusdam, beatae fugit vel numquam eius expedita distinctio aperiam sed explicabo repellendus, odio molestias reiciendis similique quos eos? Cupiditate accusamus reiciendis beatae in voluptatum molestiae tempora eveniet aut ad, voluptates facere nemo laudantium asperiores libero tenetur blanditiis repellendus eum consectetur sit officiis ratione ab accusantium dolorem fugit. Ex eaque, deserunt saepe eligendi, cum optio iste quisquam at aliquid quis libero officia dolor hic atque molestias quae magni. Corrupti cum libero nulla consequuntur rem illo suscipit unde a ut vitae dignissimos laudantium non perferendis, voluptates ducimus magnam mollitia repudiandae ipsum sapiente sit beatae! Dolores ducimus adipisci minima maxime facilis natus asperiores nulla nemo rem? Deleniti aspernatur esse, amet veritatis vero soluta iusto aperiam sunt eaque, possimus repellat! Sed accusamus dolor voluptatem itaque, adipisci, cupiditate soluta facere aspernatur neque, mollitia asperiores incidunt eum repellat quas! Ab, reprehenderit quas sed enim doloribus voluptatibus, eius deleniti nam adipisci corrupti quasi praesentium provident saepe doloremque? Quisquam minus est magnam, quasi nulla earum nobis. Maxime odit esse enim magnam officiis, excepturi amet ducimus molestiae quibusdam beatae et sit vitae maiores deserunt commodi nam quia! Corrupti delectus saepe voluptates eveniet tempora porro neque ipsam laudantium sint consequuntur, mollitia modi molestiae nulla impedit voluptate nam voluptatibus, vitae sed? Unde hic provident repellat quo obcaecati corrupti quod aliquid repellendus velit cupiditate deleniti sequi expedita, harum impedit veritatis? Repellendus aliquid officia, aspernatur laboriosam ad quod voluptate officiis saepe quos, autem inventore ducimus, magni quisquam nisi nobis! Cum maxime fuga esse veniam voluptas! Ullam quam, magni cupiditate hic fugit ipsum alias rerum quia ad eos! Cum eaque inventore accusamus laboriosam, et blanditiis possimus saepe deleniti illo odit doloribus explicabo deserunt suscipit eveniet numquam animi molestiae est rem asperiores quasi. Quae doloremque odio dolorum laborum voluptate excepturi, laboriosam, quam magnam nesciunt eaque officia eos similique amet alias, placeat quaerat iure. Id officiis, dolores reiciendis nobis nihil consequuntur itaque commodi sapiente eos, quaerat maxime aperiam esse quidem nemo quos assumenda eius cum veniam? Expedita dicta vitae, delectus, ut aliquam mollitia laborum beatae nulla inventore placeat sed officia! Quas temporibus culpa ipsam inventore maiores velit aliquid autem magni alias? Repudiandae eaque eos et optio sunt est numquam culpa, ex harum debitis fugit, id cumque expedita voluptates a libero animi. Adipisci iusto possimus molestias non eum consequuntur ipsam esse aliquam voluptatum, expedita voluptate quam natus eaque quisquam veniam fugit rem praesentium saepe modi, magni aspernatur sit excepturi ex? Rerum atque vitae voluptas vel commodi quae repellat velit dignissimos porro, quia numquam voluptatibus veniam suscipit, nemo aliquam! Quo accusamus a id dolores, consequatur illo maxime ut! Esse ea officia deleniti et cupiditate ullam sequi nisi qui minima consequatur eveniet vitae quod, hic quaerat mollitia perspiciatis quisquam possimus quae similique, facilis atque! Delectus, deleniti voluptates nulla doloribus dicta unde asperiores nisi laborum earum quasi, quae nobis doloremque at aliquam commodi corrupti numquam fuga laboriosam dolorem fugiat, vero ad iure! Libero eaque alias magni nostrum. Commodi, corrupti perferendis necessitatibus officia est maxime dolorum delectus ea sequi provident autem. Itaque autem temporibus suscipit, exercitationem recusandae repudiandae, nulla provident, laborum culpa dignissimos non. Consequuntur adipisci fugiat et quod sint magnam, eligendi velit dolores architecto debitis minima ducimus veniam enim qui vitae labore pariatur ipsum incidunt maiores fuga facilis magni. Facilis officiis magnam minus eos fugit hic recusandae perspiciatis suscipit ipsa ut! A placeat excepturi sapiente harum quod repudiandae. Fugiat nisi magni quod qui quaerat illo soluta unde aperiam similique corrupti commodi a vel repellat, ipsa dolores? Nisi, quos. Repudiandae recusandae numquam quam at distinctio facilis in, quo eveniet minus iusto natus, voluptatibus vel eius veritatis provident?
		</p>
	</div>
</div>




            
          
!
            
              
/*

 (generic)
 (elements)
 o- = object
 c- = component
 u- = utility
 t- = theme
 _ = "hack"
 js- = javascript

 */

*, *:before, *:after {
	box-sizing: border-box;
}

body {
	font-family: sans-serif;
	margin: 0;
}


.o-container {
	
}

@media screen and (min-width: 1080px) {
	.o-container__wrap {
		max-width: 1000px;
		margin-right: auto;
		margin-left: auto;
	}
}

@media screen and (max-width: 1080px) {
	.o-container__wrap {
		margin-right: 40px;
		margin-left: 40px;
	}
}

.c-example-1 > li {
	display: inline-block;
	outline: 1px solid blue;
}

.c-example-2 {
	font-size: 0;
}

.c-example-2 > li {
	font-size: 1rem;
	display: inline-block;
	outline: 1px solid blue;
}

.c-example-3:after {
	content: "";
	display: table;
	clear: both;
}


.c-example-2, .c-example-3, .c-example-4, .c-example-5 {
	background-color: lime;
	
}

c-example-2 > li, .c-example-3  > li, .c-example-4 > li, .c-example-5> li {
	border: 1px solid red;
}

.c-example-3 {
	overflow: hidden;
}

.c-example-3 > li {
	border: 1px solid red;
	float: left;
}

.c-example-4 {
	display: table;
}

.c-example-4 > li {
	display: table-cell;
}

.c-example-5 {
	display: flex;
}


.c-nav {
	background-color: red;
	color: #FFF;
	position: fixed;
	top: 0;
	width: 100%;
}

.c-nav + * {
	padding-top: 48px;
}

.c-nav__list {
}

.c-menu {
	display: flex;
}

.c-menu__item {
	margin: -10px;
}

.c-menu__item .c-nav-link {
	margin: 20px;
}

.c-menu__item:nth-child(2) {
	margin-right: auto;
}

.c-menu__item:last-child {
	position: absolute;
	right: 0;
	top: 0;
}

.c-menu__item:last-child .c-nav-link {
	background-color: #FFF;
}

.c-menu__item:last-child .c-nav-link:hover, .c-menu__item:last-child .c-nav-link:focus {
	color: red;
}

.c-menu__item + .c-menu__item {
}

.c-nav-link {
	display: inline-block;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: bold;
	color: #000;
	border: 1px solid;
	padding: 5px 10px;
	line-height: 1;
}

.c-nav-link:hover, .c-nav-link:focus {
	background-color: red;
	color: #FFF;
}

.u-size-100 {
	width: 100px;
}

.u-align-left {
	text-align: left;
}

.u-align-center {
	text-align: center;
}

.u-align-right {
	text-align: right;
}

.u-list-reset {
	list-style: none;
	padding-left: 0;
	margin-top: 0;
	margin-bottom: 0;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console