PROWAREtech
CSS: Slick, Simple Nav-Bar Menu
HTML and CSS only.
Create a top menu just like the one pictured here.
Create a base64 string of your images to use on this menu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML and CSS Menu System</title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
/*
USE THIS LINK TO CONVERT AN IMAGE TO A BASE64 STRING:
http://www.prowaretech.com/articles/current/tools/convert-image-to-base64
*/
.home::before {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAR1JREFUeNpi/P//PwMlgJGAfCkQswBxO5RfCMSqQHwBiGcxEKH5PxRXQcUuQPkHYYpYsGhkBuIZQJwCxJuB+DcQt0Jt/gNV8x2XAaJAvBqI7YG4D4jPAjETEN8C4gpszmRCYhsA8Rmo5kwgfg3ES4F4MdRGkIt+QdX+QzfIH4h/APF7KHsukv9hGGSQLxA/hxoYCtNcCVVwCYg9gPgQFs0wfByI3aEuBfHrQAYcBuJ9QOwHxI/waIbhZ0AcCMQ7gPgkyAA2qEs2EKEZhndD9bCz4AmYx9BoBAEvIFZAkvsLpX+y4ElIl4E4G8peg2YA1mhEB8iGs+JShGwAG5ocDxKbG02ODZsti6GJBwauIrE3Q8MEBvbBcyOl2RkgwACLAFtHd1yzSAAAAABJRU5ErkJggg==);
}
.about::before {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALNJREFUeNpidC/wYUAHuyZu/Q8EKGKMjIwMbvnejOhqWZA5B6bv/v/z50+4BmRDQOydE7aABYCWwg1igjHWt62Ca4ZpIAbADeDi4sJwMsgmZNtgAOYSFAPQAbJ/sRmC1wBsGkAuwgZYiLEFX5gwERNQyH7GGQvEar59+zbudECMzTlTC4nzwpbu9f8JBSxeA1hZWYlKSDi9QChWiApEUBighwPRBiBrxGcIEzFewOcdgAADAJQfTxdipcrxAAAAAElFTkSuQmCC);
}
.services::before {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwtJREFUeNp0U09ImnEY/qmfqa0lqZVYVMtQgxwiHZwHDwkixGgM2aWx8CjSoMMOu+zUhkFjO8xB3cN1zEXbiA7JGApCBZXhGhXKnCXlvzQ1dc8rNeqwD358n77v877P+zzvj7ewsMAKhQKLRqNMq9UKvV7v85mZmQ+np6cyj8fz0OVyze/v7zOr1cp4PB67fug7n88zjs/nM5FIxFKpFB3pxsbG7PT0tDmdTnfs7e0N4/c8JTc1NbFarXarAB2OAkg0+/3+dxzHFSgYCAQeXyXVlpaWvlxeXsp1Ot2Tzs7Ow0ql8q+IUChkHMBEJZrJZIxI5K4COXTjqtWqJJFI2FtbW//gOSqXy0wsFrN6vd4oIJfLmUCj0XSHw+FHSLQRyGKxzI2Ojo7p9XovANrj42MNChZLpVJscHDwsL29vUysm5ubGbERJJPJqZ2dnVkCSySSk/HxcRs655CQU6vVP0KhkBvgu7FYzDEwMPBNKpUeZbPZhmbEiG+329+YTKZXRAkalECvROpeXFyQBnmcKsXgwsTw8HCAuhoMhgbYaDQyvs1m4wQCgZqScrlcNyxz0Yyk+Pb29guwEVMMndXn5+ckOMN/DKwab253d7cjEonch50pgBQ+n++jQqGYQFB0dnZmIDBGiwOo6+rq0q+srLzv6+uzQvCGCwKn05mBsnMymSx0cHDgJAAWqxsjKOkbO5Lt6en5juLFzc3NZ/F43IIRf8MVE6z9xYE2gzhkzSU6JSHcIhi5oXS6v7//E8Sz9/b2hldXV19j1AqaJYPB4Dxyi1i2z9CNY0qlkmiG8K0Bvezi4iJfpVIdjoyMvIVD97a2tqYgZt3tdj9AbgQrngArP5yIcbSOJBgYVFE9i7kZxpnEadwR2GxGgUka5+TkRAV9MsjnQeCneK9z7MZD6l87QHaBIsPi+BwORxAjBCCw/8ruDBbQYzabf94qcLMQXbKWlha6RDUAjpaXl+/Aha9gpUM8jU19OTQ0xP5bgNYVejSYFIvFOhZuDAXW29radGtrayZ0b9yFvwIMAMg1s1/TPO6NAAAAAElFTkSuQmCC);
}
.products::before {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAQCAYAAADwMZRfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAi1JREFUeNqUVEuLUmEY/s7xiOWtNNFIGW2h5GUhXmYqjFYRJQ1Uu6KFW3ExP6CfIi7ayOSigmgxi4gp25ghihfwgmKOecm8O4qXnm+gGAYv0wsvh3O+93ue533O+31MIBAgPB6PHB8fE5ZlyWw2I8PhUJnL5W4lk8mHxWJxR61Wf7Pb7e91Ot1XiURSp/XT6ZTQWCwWhPH7/WQymYiwaTubzd7F01Uulx39fv8SORNisbit1Wojer3+EPlJo9FE+Hz+mAMrabVa/Eqlsh2NRp9Vq1U9RV8WAL6cSqXu9Xq9LaFQ2EN+RxLGarXuGwyGiNPpDEFqCYVX4/H4g0Qi8TSTydwZjUZSkUjUR82h2WwOGY3GDyqVql6r1ZSo2S0UCk4GSBWoucZx3BTyYgB9B8A3SqUy2W63r4DZYTKZYqirlUqlGwDehVePaMuw4QIIjggFof6cToZhFgqFoujz+V4Eg0Hi9XqfyOXy0tk6mgD5wS7rnXrSbDa1aMstEAgI/tBN+LZFVgRL1sdilcn/A3KiahMQi/5XLtI1OoTItWTsJpZzKdnUDlWzTu1fEOYcStbVMKzL5XqNGfi5lAEHstPpkG63y1u2LpVKfzkcjrecx+PZc7vdL/P5/O1YLPY4nU7fbzQa108rmc/n/5SA8AhH4CPGP4TnZ7z/5qj7GKi+xWI5wMcDXAUXAbITDoefy2SyFgAoY91ms+0jX2HzF0xpdzAYnFwh4/GY/BFgAJofGdO2kcU0AAAAAElFTkSuQmCC);
}
.forums::before {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFAQEBAgIC////Y3rqWwAAAAN0Uk5T//8A18oNQQAAAFlJREFUeNpcjgEWwCAIQoH7H3oo2raorP5TFLoEItvBCphP3QYgXxKAk+OMlLNPBW1qu3qJ26K9XYKPGA/OM76qRrLfmbMBYj7TVoaOS8CKPal+5AIu1iPAAGfqAOjbvDk7AAAAAElFTkSuQmCC);
}
body {
margin: 0;
padding: 0;
background-color: #fff;
color: #333;
font-family: sans-serif;
}
main {
padding: 10px;
}
nav {
position: relative;
text-align: center;
background-color: #c5d6eb;
background-image: linear-gradient(#e4f0ff, #b0c4de);
border-radius: 8px;
box-shadow: 0 0 4px 3px rgba(63, 76, 131, 0.25);
margin: 25px auto 0 auto;
width: 768px;
}
nav div {
display: inline-block;
height: 45px;
}
#menu {
text-align: left;
list-style: none;
margin: 0;
padding: 0;
}
#menu::after {
content: "";
display: block;
clear: both;
}
#menu li {
position: relative;
float: left;
}
#menu li li {
height: auto;
}
#menu a {
text-decoration: none;
color: #222;
display: inline-block;
border: none;
padding: 6px 12px;
margin: 8px;
line-height: 20px;
font-size: 16px;
white-space: nowrap;
vertical-align: middle;
}
#menu a:hover {
background-image: linear-gradient(#b0c4de, #e4f0ff);
border-radius: 12px;
box-shadow: inset 0 0 1px 1px rgba(63, 76, 131, 0.25);
}
#menu ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
visibility: hidden;
opacity: 0;
transition: opacity .3s ease-in-out .2s;
border-radius: 0 0 16px 16px;
background-color: #c5d6eb;
box-shadow: inset 0 0 2px 2px rgba(63, 76, 131, 0.25);
}
#menu ul li {
float: none;
}
#menu li:hover ul {
visibility: visible;
opacity: 1;
}
#menu li:hover a {
background-image: linear-gradient(#b0c4de, #e4f0ff);
border-radius: 12px;
box-shadow: inset 0 0 1px 1px rgba(63, 76, 131, 0.25);
}
#menu li:hover li a {
background-image: none;
border-radius: 0;
box-shadow: none;
}
#menu li:hover li a:hover {
background-image: linear-gradient(#b0c4de, #e4f0ff);
border-radius: 12px;
box-shadow: inset 0 0 1px 1px rgba(63, 76, 131, 0.25);
}
#mobilebtn {
display: none;
}
/* MOBILE CSS */
@media (max-width: 768px) {
nav {
border-radius: 0;
box-shadow: none;
margin: 0;
width: auto;
}
nav div {
display: block;
}
#menu { /* THIS IS A UL */
display: block;
position: absolute;
visibility: hidden;
padding: 0;
margin: 0;
list-style: none;
top: 45px;
height: auto;
width: 100%;
transition: .25s ease-in-out .1s;
transform: scale(1,0);
transform-origin: top;
z-index: 1;
}
#menu li {
float: none;
width: auto;
height: auto;
display: block;
margin: 0;
padding: 0;
text-align: right;
background-color: #ddd;
}
#menu li:hover {
background-image: none;
}
#menu a {
display: inline;
line-height: 40px;
font-size: 20px;
padding-right: 15px;
transition: .1s ease-in-out;
opacity: 0;
}
#menu a:hover,
#menu li:hover a {
background-color: transparent;
background-image: none;
box-shadow: none;
}
#menu ul {
display: none;
}
#mobilechk:checked ~ #menu {
visibility: visible;
transform: scale(1,1);
}
#mobilechk:checked ~ #menu a {
opacity: 1;
transition: .25s ease-in-out .25s;
}
#mobilebtn {
display: block;
padding: 8px;
margin: 5px 15px 0 0;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
#mobilebtn span {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
background-color: #333;
margin-top: 4px;
}
}
</style>
</head>
<body>
<header>
<nav>
<div>
<input style="display:none;" type="checkbox" id="mobilechk" />
<label id="mobilebtn" for="mobilechk">
<span></span>
<span></span>
<span></span>
</label>
<ul id="menu">
<li><a href="#" class="home"> home</a></li>
<li>
<a href="#" class="services"> services</a>
<ul>
<li></li>
<li><a href="#">Placeat rem unde saepe.</a></li>
<li><a href="#">Accusamus culpa.</a></li>
<li><a href="#">Rerum, labore</a></li>
<li><a href="#">Facilis voluptates.</a></li>
</ul>
</li>
<li>
<a href="#" class="products"> products</a>
<ul>
<li></li>
<li><a href="#">Rerum, labore</a></li>
<li><a href="#">Placeat rem unde saepe.</a></li>
<li><a href="#">Facilis voluptates.</a></li>
</ul>
</li>
<li>
<a href="#" class="forums"> forums</a>
<ul>
<li></li>
<li><a href="#">Lorem, ipsum.</a></li>
<li><a href="#">Ipsum dolor.</a></li>
<li><a href="#">Dolor sit amet.</a></li>
<li><a href="#">Cum quo consectetur.</a></li>
<li><a href="#">Rerum, labore</a></li>
</ul>
</li>
<li>
<a href="#" class="about"> about</a>
<ul>
<li></li>
<li><a href="#">history</a></li>
<li><a href="#">testimonials</a></li>
<li><a href="#">contact</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<main>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, consequuntur id commodi aliquam unde voluptatibus hic deleniti tempora eligendi doloribus quaerat consectetur cumque quas laboriosam rem! Quam odio qui neque a unde commodi veniam saepe nemo placeat, corporis, labore impedit quibusdam omnis voluptatibus iusto quia ullam maxime sapiente, illo mollitia. Velit eius, placeat praesentium molestias repudiandae exercitationem quidem alias itaque sequi, nostrum voluptatem. Beatae officia minus at consectetur fugiat perferendis quibusdam eos, accusantium ea distinctio a ducimus dicta laudantium sint molestiae, adipisci recusandae animi deserunt corporis tenetur? Odio aperiam quas mollitia officiis, ex assumenda quibusdam? Optio sequi, possimus ut dignissimos excepturi est illum a perspiciatis necessitatibus non, aut nemo debitis temporibus, nihil minima in sed soluta. Excepturi amet, accusantium laudantium et expedita dolorum nemo, harum autem quibusdam, error nobis! Officia, velit dolorum optio dolorem repellendus voluptate saepe quae voluptas aliquam, animi aspernatur dolores doloribus voluptatum sed est. Quisquam neque nam eius! Sit quo quod error temporibus quam non, repellendus iste sunt distinctio iusto tenetur voluptas accusamus odit commodi perferendis perspiciatis nesciunt accusantium porro. Atque aliquid omnis, sint quo vel provident, temporibus iusto libero deleniti voluptatibus ratione cupiditate dolor molestias cum tenetur! Nam laudantium alias neque quis, iste reprehenderit provident eveniet, quibusdam vitae veniam sequi saepe id voluptatibus? Ut commodi, quo officiis quasi odit totam eos ipsam reiciendis excepturi est beatae repellat minus eum praesentium perferendis consequatur provident incidunt ipsa ipsum sapiente modi atque. Omnis illum, temporibus ad labore repellendus in est. Vero, dolor impedit! Aspernatur facere cumque reiciendis dolorem asperiores.</p>
<p>Cum quo consectetur praesentium beatae iste ipsam nemo sapiente qui, suscipit, explicabo mollitia id doloribus repudiandae eum tempora officia ipsum ea ratione harum aspernatur dolores earum? Consequatur deserunt odit molestias. Vitae fugiat eligendi quaerat dolor eius facere harum quam, neque nesciunt quia nihil sit minima! Beatae eos assumenda autem consequuntur quo enim laudantium? Officia optio voluptate doloremque corrupti, voluptatum cumque voluptas, adipisci nemo reiciendis omnis impedit veniam quidem debitis nulla velit ad esse porro unde facere quibusdam. Sunt possimus atque quidem exercitationem facere laboriosam, iusto quia placeat voluptas dolores, deleniti perferendis error in, ex assumenda vitae quas. Fuga eos vero a maxime tempora inventore rerum quidem quasi beatae hic eaque reiciendis placeat, dolorem vel quisquam, quaerat fugit dicta assumenda animi repellendus perferendis blanditiis dolore libero atque? Ducimus impedit excepturi modi. Quia maxime molestiae culpa in ex placeat dolorem. Expedita iusto esse iste error blanditiis consectetur voluptatem, nam incidunt aspernatur delectus exercitationem quasi mollitia sit autem veniam earum veritatis! Perspiciatis quod dolores optio cum, quo maiores iste eius ipsam amet, dolorum rerum dolore pariatur corporis voluptate excepturi commodi quos labore vel qui, fuga eaque deserunt id vero deleniti? Ut provident delectus et a iusto, quos consequatur ullam. Tenetur fugit esse omnis est, dignissimos nostrum repellendus ratione iure odio rem corrupti? Deserunt fugiat cupiditate eligendi inventore voluptatem dolores minus, voluptates quisquam accusantium recusandae dicta perspiciatis animi iste expedita esse laudantium doloribus! Qui officiis atque ut recusandae quam, inventore eaque! Rerum distinctio fugiat enim atque quis consectetur doloremque debitis! Ipsam placeat adipisci nulla.</p>
<p>Voluptates mollitia, error dolorum accusamus sit non, totam, debitis laudantium vitae dignissimos exercitationem qui a. Doloribus eum unde similique quidem harum aliquam nisi eveniet deserunt tempore velit esse minus sint reprehenderit, numquam natus sapiente sed incidunt dolorem omnis cum nostrum deleniti rem quasi. Tempore debitis voluptatem beatae quos numquam. Harum aliquam magnam at quisquam impedit et ratione cumque. Iste, quis exercitationem? Eos iste id enim aliquam alias magnam quasi, hic possimus harum similique a culpa illum assumenda ducimus autem exercitationem atque. Dolores repellendus reiciendis saepe sunt iusto corporis laboriosam sequi nisi voluptatibus quasi accusantium maiores voluptates asperiores autem odio labore iste excepturi omnis nobis, soluta, quia rerum. Est similique facilis, odio distinctio consequuntur cumque aliquid deserunt excepturi, veniam incidunt dolores? Magnam reiciendis consequuntur cupiditate quis fugit cum tempora at sed labore quos sunt pariatur quam, quae error eveniet nisi esse necessitatibus. Et cupiditate facilis neque a, blanditiis dolores tenetur ullam velit id quibusdam perspiciatis harum iusto! Porro voluptatum quis amet necessitatibus! Repellat quibusdam in totam esse molestiae hic fugiat nemo optio quia illo repellendus, ex facilis sunt delectus quod! Soluta a numquam assumenda quis deleniti distinctio eaque beatae repudiandae ducimus eius ullam eveniet quae iusto maiores tempora velit, obcaecati ipsa similique consectetur quaerat magni, nihil aliquam! A tempore quasi, vero ab sint magnam minus, at voluptate veritatis iure esse, quisquam ullam in id mollitia ipsa illum distinctio eum rerum totam voluptates ex dignissimos neque. Molestiae rerum magni eaque nobis repellat molestias quia? Reprehenderit, id inventore! Possimus voluptas explicabo ipsa quisquam?</p>
<p>Veniam eligendi dicta, facere pariatur saepe debitis impedit autem mollitia unde doloribus laudantium ullam perferendis suscipit molestiae cupiditate asperiores repellat culpa ducimus ipsum beatae expedita odit explicabo voluptate. Sed dicta fugiat at culpa atque cum expedita sit et harum nisi error non, magnam nihil voluptas animi, tempore reprehenderit! Sit tempore iste, minus nemo ex, temporibus, voluptates accusantium iusto dignissimos debitis sint quia corporis eaque nihil obcaecati quas odio a? Reiciendis ullam dolores, quos nemo distinctio, nam tempore quisquam minus a voluptatum exercitationem, officiis id? Fugit esse laudantium, excepturi blanditiis, non veritatis debitis cum saepe suscipit, nostrum soluta. Nam et impedit praesentium quaerat. Nisi cum itaque eveniet facere, recusandae eligendi earum odit laudantium! Excepturi earum dolore minima distinctio doloribus facilis commodi minus sed, iure eos nostrum vero rem porro corrupti id ea quis! Perferendis eos saepe at quisquam voluptates, reprehenderit libero dolore itaque, recusandae ullam placeat voluptatum nam, blanditiis nostrum vero numquam porro possimus illo minima non. Ipsa, corrupti. Quae hic alias, ea velit, nulla dolorem fugiat perspiciatis repellendus nemo fuga dolorum optio esse dicta aut eligendi eos, facilis corporis veritatis. Sequi voluptatum illum, repellat esse officia delectus vitae quo dicta optio itaque rerum. Libero, quod, autem repellat labore ea voluptatibus necessitatibus nobis molestias ex dignissimos ducimus qui eaque vitae tempore fugit, et praesentium quisquam eum ut numquam nesciunt rem quae sunt doloribus! Fugiat, perspiciatis? Iste optio expedita maiores mollitia molestiae in ut. Sunt labore dolores a odio iste temporibus mollitia error? Quae natus delectus harum enim deserunt aperiam beatae nulla.</p>
<p>Voluptatum odit similique temporibus nihil aliquam assumenda optio minima itaque doloribus. Sapiente at nesciunt minus, repellendus exercitationem quidem cumque nobis, eius ipsum ullam impedit similique repellat voluptates. Ipsa blanditiis laboriosam suscipit. In vitae, doloremque tempore nulla quidem similique eum voluptate voluptatum odio inventore reprehenderit illo exercitationem id ipsa! Laudantium dolore eos impedit voluptate quis. Cumque sapiente voluptate veritatis molestias animi quidem est aut asperiores ea repudiandae, rerum dicta, architecto aspernatur harum accusantium iste at culpa. Enim ducimus voluptatem numquam laborum, in facilis necessitatibus incidunt consequatur veniam nobis blanditiis fugiat fuga iste adipisci ipsum magnam quam nam modi rerum quibusdam explicabo. Asperiores cum non sint laudantium obcaecati voluptates ad distinctio similique nobis atque mollitia tenetur, eos commodi quaerat totam dolor numquam! Tempore error nisi accusantium earum officia fugiat veritatis adipisci quaerat, ab ea maxime voluptas cum corrupti magni modi maiores cupiditate nulla suscipit ipsum voluptates, alias architecto? Repudiandae, iure. Laborum totam ad eos voluptate incidunt molestiae quaerat accusamus ipsam necessitatibus deleniti vitae, sapiente recusandae dolore perspiciatis quasi architecto qui omnis consequatur earum praesentium. Possimus fuga sequi rerum corporis labore animi doloremque praesentium. Maxime fugit atque ducimus, ea magnam quae, voluptate qui facere quod id eum aspernatur dolorum quas molestias, aperiam consectetur commodi distinctio? Voluptatem reiciendis et modi sint rem, omnis, iure, quas ullam assumenda qui esse vitae? Placeat unde error recusandae esse possimus. Tempora natus sequi nihil iure, architecto eius ad blanditiis. Iusto ullam dolores quibusdam rem, perferendis blanditiis quae officiis! Cumque, libero ipsa nulla delectus voluptas consectetur sequi. Praesentium, odit.</p>
<p>Placeat rem unde saepe. Rerum, labore voluptate maxime accusamus possimus numquam pariatur rem dolor deserunt sequi. Laudantium fuga maxime doloribus rerum numquam cum nemo facilis fugit iusto saepe, modi voluptate rem sed deserunt similique expedita magnam excepturi quaerat temporibus debitis eum ut neque vitae? Porro ducimus neque vel quis magnam non, fuga excepturi? Dolore, provident quisquam nam exercitationem enim incidunt, ex facilis voluptatem eos at officiis quod cum tenetur eligendi voluptatibus! Ipsam aliquam similique aspernatur quas accusantium vero repudiandae odio molestias perspiciatis impedit quisquam in, vitae aperiam asperiores error eos mollitia? Quos maiores earum, saepe aliquam error nesciunt explicabo quaerat delectus? Esse numquam dolore doloremque. Exercitationem officia repellendus maxime expedita eligendi, doloribus deserunt! Dolore, officia? Rem inventore laboriosam exercitationem dolores! Tenetur recusandae inventore quos. Odio veniam incidunt earum nulla. Dicta tempora eaque vero nobis optio debitis saepe dignissimos commodi numquam deleniti qui reiciendis labore odit ipsa maxime, beatae expedita accusamus? Reiciendis ipsum laboriosam officiis rem animi odio. Rerum rem assumenda repudiandae fugiat molestias! Aperiam ratione, eligendi corrupti esse culpa voluptatum voluptatibus optio nesciunt omnis aliquid nam sit porro sunt facere placeat possimus blanditiis vitae. Corporis ipsam deleniti ullam iste illo mollitia eligendi aliquam vel. Quisquam in modi voluptas laboriosam. Ipsa nam neque mollitia, vel quas nisi facilis tempore autem, qui inventore beatae? Nisi quas illo, impedit sunt commodi quidem, necessitatibus neque modi itaque, quis sapiente harum eum autem magnam consequuntur. Eaque minima delectus placeat suscipit tenetur sequi corporis debitis, iusto magnam et cum quasi officia architecto fugit, molestias totam nihil?</p>
<p>Amet libero provident, animi molestiae nulla illum voluptate laboriosam dolorem! Saepe doloribus, excepturi, sit odit, error quidem molestiae cupiditate consequatur corrupti dolorem veniam odio alias earum aperiam. Necessitatibus libero, impedit ut facere incidunt nostrum commodi voluptatibus quasi recusandae odit corporis fuga amet consectetur magnam maiores quos vel quidem placeat sunt mollitia aspernatur totam eius voluptates! Delectus, mollitia quaerat perferendis, id officiis ipsum atque tempore nam est quia exercitationem eligendi saepe molestias molestiae doloremque sed. Numquam temporibus odio delectus voluptatum, esse beatae consectetur sunt excepturi sapiente doloribus, et eum. Odit sequi facere hic possimus vero. Inventore, neque. Quibusdam, modi. Amet impedit corrupti, veniam veritatis voluptate, molestias unde sunt nam mollitia explicabo, accusantium officiis placeat asperiores voluptatem. Quos blanditiis obcaecati neque et consequuntur molestiae quaerat maxime doloremque assumenda esse perferendis facere, quibusdam distinctio deleniti cum. Neque blanditiis cupiditate consequatur! Assumenda, eos odit. Numquam minus aspernatur iusto officia nam dolorem suscipit. Necessitatibus iste aspernatur vero deserunt vitae similique alias qui cum nemo nisi reiciendis placeat, mollitia quam dolores in incidunt maiores magnam. Minima reiciendis quas eius voluptatum explicabo facilis eum aperiam commodi culpa ipsa, dolore maxime laudantium accusamus sapiente, ad minus aliquam! Consequuntur accusantium sunt doloremque placeat dicta atque asperiores pariatur quidem neque illum, inventore, velit ratione ad tempora magni, iusto aliquam voluptatem accusamus tempore deserunt. Doloribus, vel eaque. Tempore temporibus, dolorum labore facere reprehenderit doloribus repellat, quae nostrum eligendi voluptatibus voluptates quidem, fuga aut maiores sit sapiente enim. Eius distinctio facilis non dolorum fuga, modi ut. Ex veritatis vitae laborum eligendi temporibus.</p>
<p>Nostrum, quis. Ex voluptatibus quidem nulla beatae distinctio quibusdam rerum est, quae sunt ea necessitatibus qui sit nobis! Veritatis omnis excepturi asperiores mollitia quas? Qui adipisci quo labore, id provident doloribus veritatis recusandae debitis, nam sed ipsam corrupti dolorem. Alias dolores ipsum, deleniti saepe ex possimus officiis distinctio, earum vero nisi aliquid asperiores, odio tenetur velit? Doloremque eligendi natus dignissimos quis culpa exercitationem sapiente ut! Ipsam sint iusto esse rerum beatae tempore nulla maxime quas! Debitis illo quaerat alias aliquid eaque vero eos voluptatem sit dolor voluptas. Repudiandae aliquid fugiat voluptatibus nesciunt nihil maxime maiores, dicta unde minus vitae natus, saepe hic quos rerum laudantium, exercitationem eaque sunt quis. Alias dolorem tempore voluptas sunt minima! Quisquam odit minima soluta maiores quasi distinctio, expedita perspiciatis odio molestias hic aliquam dolore illum quas reiciendis vitae dignissimos esse rem ea pariatur illo. Harum, inventore illo? Aspernatur ratione ducimus a eos explicabo nisi temporibus rerum qui sequi cumque numquam eveniet autem velit placeat facilis doloribus iusto, tenetur esse, mollitia et ipsa vitae architecto? Vel, ducimus? Temporibus sunt nobis incidunt quibusdam. Ex mollitia pariatur voluptatum nostrum quae officia doloremque commodi consectetur, sapiente recusandae rem ad nobis neque et error, perferendis voluptate, cumque dicta quo hic quos necessitatibus? Sapiente, laborum? Incidunt odio soluta exercitationem? Quo nesciunt, eaque fugiat molestiae non laboriosam, quae accusantium nemo dolore at necessitatibus a, omnis corporis! Labore fugiat pariatur aliquam cupiditate? Aperiam voluptates eius autem repellendus, quas officiis commodi. In, nam quia totam voluptatem sed dignissimos repudiandae, quos dolores sint laboriosam quaerat?</p>
<p>Maxime, voluptatum fuga neque vero alias est officia, odio eligendi aliquam quos harum quaerat provident unde quia veniam rem sit expedita iste. Maiores modi sit voluptates fugiat, hic recusandae dolore ad ipsum consequatur consequuntur, alias harum repudiandae accusamus, accusantium dignissimos dolorem nemo. Neque, ipsum natus cupiditate vel dignissimos asperiores nesciunt voluptates minima similique libero nihil ratione iure sit adipisci quidem doloremque magni placeat suscipit explicabo hic commodi autem quo impedit corrupti. Esse dolorem obcaecati a soluta inventore asperiores ratione, eos, reprehenderit, voluptatum incidunt quo quisquam deleniti deserunt ullam suscipit? Iste ducimus omnis harum officiis ad rerum veritatis vero quod. Odio amet, mollitia vero ipsam hic nisi debitis libero perferendis voluptate animi laboriosam atque molestiae totam iure voluptatum facilis nobis. Illum error eos itaque in accusantium culpa vero laborum beatae reiciendis, perferendis distinctio odio tempora dolorem molestias provident? Corporis tenetur, quod omnis reprehenderit distinctio id aut ducimus illo fugit corrupti, sed sapiente consequatur iste ad illum, eligendi exercitationem eaque amet libero cupiditate delectus molestias veritatis atque. Nihil, quod! Repudiandae quas rem dolorem atque quasi? Quas, cumque! Quisquam, deserunt natus blanditiis culpa iure autem aperiam eveniet exercitationem placeat minus ullam vitae perferendis harum voluptatibus voluptates dignissimos nemo dicta vel commodi quis. Nulla magnam eius hic vel quae. At labore delectus nam soluta neque, quisquam animi error incidunt quae obcaecati perspiciatis tempore cupiditate, sint ex ad eaque rem perferendis libero doloremque reprehenderit, exercitationem esse rerum sapiente? Exercitationem dicta aperiam dignissimos dolorem optio quos enim fugit tenetur fugiat sunt. Dolorem sapiente error autem dolore!</p>
<p>Ipsum unde harum, tempore qui velit illum hic consequatur saepe in illo deserunt quis delectus cumque eos nostrum! Nobis praesentium repellendus maiores aspernatur alias eveniet cum neque animi dolores! Earum consequuntur molestiae sequi soluta, obcaecati illum! In est quas consequuntur pariatur culpa qui accusamus tempora id, aliquid quidem fugiat laboriosam corporis quae provident iure maxime vitae, vel porro aperiam itaque minima, possimus quibusdam aut quo! Nobis consectetur modi dignissimos distinctio eos, odio incidunt minima ullam reiciendis ipsum vel omnis veniam excepturi eveniet optio, sit, velit fugit sint architecto quia. Molestiae quis quos quisquam quo voluptas, veniam voluptates delectus ullam aperiam temporibus accusantium repellat, reprehenderit unde ea accusamus! Esse distinctio sequi voluptas rerum eos veniam modi quae commodi id! Architecto ipsam odio pariatur dolorem facere iure quod, doloribus repellat maxime commodi quam quia adipisci a nemo vitae aut debitis deleniti, earum quo libero voluptatem. Vitae eos possimus est odio recusandae quaerat deleniti sint itaque corporis dolorem? Voluptatibus inventore deserunt laudantium. Impedit numquam nihil, fuga corrupti dolor repudiandae a voluptas tempore dolorem quas dicta consequatur modi vero illum quod, ratione error neque magnam ipsum excepturi dolore eaque, quam rerum? Perspiciatis, cupiditate! Placeat odit autem praesentium corporis eos veniam esse labore quam perferendis voluptas illo, ex voluptate saepe delectus odio incidunt deserunt neque porro totam consequuntur ipsam soluta libero fugit vel. Itaque sapiente, officia omnis assumenda quaerat id repellendus nihil in voluptates expedita ipsam voluptas exercitationem facilis, ab cupiditate aperiam? Quisquam amet minima cum omnis, quo deleniti id dolore, iusto doloribus sit repellendus.</p>
</main>
</body>
</html>
Coding Video
Comment
