PROWAREtech
CSS: Landing Page with Menu
A large menu that slides in from the sides and then the top.
This code creates a responsive landing page with an animated menu that slides in from the sides and then top. This effect can be combined with a carousel.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Website Landing Page w/Menu</title>
<style>
body {
font-family: sans-serif;
color: white;
background-color: black;
}
.banner {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background-image: url(https://picsum.photos/id/100/1920/1080);
background-size: cover;
background-position: center center;
left: 0;
top: 0;
right: 0;
bottom: 0;
text-align: center;
color: black;
}
.banner h1 {
font-size: 5vmin;
}
.banner h2 {
font-size: 2vmin;
}
.nav {
position: absolute;
display: flex;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.links {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
left: 0;
top: 0;
right: 0;
transform: translateY(-100%);
transition: .5s cubic-bezier(1, 0, 0, 1);
visibility: hidden;
overflow: hidden;
}
.links ul {
padding: 0;
margin: 0;
}
#menu-icon {
display: none;
}
#menu-icon ~ label {
display: block;
position: absolute;
top: 1vmin;
right: 1vmin;
font-size: 2vmax;
transition: color .1s .9s;
color: black;
cursor: pointer;
}
.links li {
text-align: center;
list-style: none;
}
.links a {
font-size: 50px;
line-height: 75px;
text-decoration: none;
color: white;
}
.links a:hover::before {
content: ">";
padding-right: .5vmin;
}
.links a:hover::after {
content: "<";
padding-left: .5vmin;
}
.box {
transition: flex .5s cubic-bezier(1, 0, 0, 1) .5s;
}
.box:nth-child(1),
.box:nth-child(3) {
flex: 1;
background-color: lightslategray;
}
.box:nth-child(2) {
flex: 1 0 100%;
background-color: transparent;
}
#menu-icon:checked ~ label {
transition: color .1s .1s;
color: white;
}
#menu-icon:checked ~ .nav .box {
transition: flex .5s ease-in-out;
}
#menu-icon:checked ~ .links {
transition: .5s cubic-bezier(0.18, 0.89, 0.32, 1.5) .5s;
top: 50%;
transform: translateY(-50%);
visibility: visible;
}
#menu-icon:checked ~ .nav .box:nth-child(2) {
flex: 0;
}
@media (max-width: 768px) {
#menu-icon ~ label {
font-size: 30px;
}
}
</style>
</head>
<body>
<input type="checkbox" id="menu-icon" />
<div class="banner">
<div>
<h1>Website Landing Page</h1>
<h2>Lorem ipsum dolor sit amet.</h2>
</div>
</div>
<div class="nav">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<label for="menu-icon">
☰
</label>
</body>
</html>
Coding Video
Combined with a Carousel
This is implemented with just HTML and CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Website Landing Page w/Menu</title>
<style>
html,
body {
font-family: sans-serif;
color: black;
background-color: white;
padding: 0;
margin: 0;
}
/* BEGIN CAROUSEL */
.slide a {
text-decoration: none;
color: white;
}
.slide-btn {
display: none;
}
.carousel {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.carousel h1 {
text-align: center;
margin: 0 auto;
line-height: 75vh;
font-size: 10vmin;
text-shadow: 1vmin 1vmin rgba(0,0,0,0.5);
}
.slide {
float: left;
height: 100%;
width: 0;
transition: width .3s linear;
padding: 0;
overflow: hidden;
white-space: nowrap;
}
.slide > * {
transition: transform .15s linear;
transform: scale(0);
}
.labels {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
z-index: 1;
transition: visibility 0s 1s;
}
.labels label {
display: inline-block;
background-color: rgba(0,0,0,0.25);
width: 25px;
height: 25px;
border-radius: 25px;
margin: .5vmin 2vmin;
border: 3px solid white;
}
.carousel .one,
.carousel .two,
.carousel .three,
.carousel .four,
.carousel .five {
background-position: center center;
background-size: cover;
}
.carousel .one {
background-image: url(https://picsum.photos/id/40/1920/810);
}
.carousel .two {
background-image: url(https://picsum.photos/id/41/1920/810);
}
.carousel .three {
background-image: url(https://picsum.photos/id/42/1920/810);
}
.carousel .four {
background-image: url(https://picsum.photos/id/43/1920/810);
}
.carousel .five {
background-image: url(https://picsum.photos/id/44/1920/810);
}
#slide-btn-1:checked ~ .one,
#slide-btn-2:checked ~ .two,
#slide-btn-3:checked ~ .three,
#slide-btn-4:checked ~ .four,
#slide-btn-5:checked ~ .five {
width: 100%;
}
#slide-btn-1:checked ~ .one > *,
#slide-btn-2:checked ~ .two > *,
#slide-btn-3:checked ~ .three > *,
#slide-btn-4:checked ~ .four > *,
#slide-btn-5:checked ~ .five > * {
transform: scale(1);
}
#slide-btn-1:checked ~ .labels label[for="slide-btn-1"],
#slide-btn-2:checked ~ .labels label[for="slide-btn-2"],
#slide-btn-3:checked ~ .labels label[for="slide-btn-3"],
#slide-btn-4:checked ~ .labels label[for="slide-btn-4"],
#slide-btn-5:checked ~ .labels label[for="slide-btn-5"] {
background-color: black;
}
/* END CAROUSEL; BEGIN MENU */
.nav {
position: absolute;
display: flex;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.links {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
left: 0;
top: 0;
right: 0;
transform: translateY(-100%);
transition: .5s cubic-bezier(1, 0, 0, 1);
visibility: hidden;
overflow: hidden;
}
.links ul {
padding: 0;
margin: 0;
}
#menu-icon {
display: none;
}
#menu-icon ~ label {
display: block;
position: absolute;
top: 1vmin;
right: 1vmin;
font-size: 2vmax;
transition: color .1s .9s;
color: black;
cursor: pointer;
}
.links li {
text-align: center;
list-style: none;
}
.links a {
font-size: 50px;
line-height: 75px;
text-decoration: none;
color: white;
}
.links a:hover::before {
content: ">";
padding-right: .5vmin;
}
.links a:hover::after {
content: "<";
padding-left: .5vmin;
}
.box {
transition: flex .5s cubic-bezier(1, 0, 0, 1) .5s;
}
.box:nth-child(1),
.box:nth-child(3) {
flex: 1;
background-color: lightslategray;
}
.box:nth-child(2) {
flex: 1 0 100%;
background-color: transparent;
}
#menu-icon:checked ~ label {
transition: color .1s .1s;
color: white;
}
#menu-icon:checked ~ .nav .box {
transition: flex .5s ease-in-out;
}
#menu-icon:checked ~ .links {
transition: .5s cubic-bezier(0.18, 0.89, 0.32, 1.5) .5s;
top: 50%;
transform: translateY(-50%);
visibility: visible;
}
#menu-icon:checked ~ .nav .box:nth-child(2) {
flex: 0;
}
#menu-icon:checked ~ .carousel .labels {
transition: visibility 0s;
visibility: hidden;
}
@media (max-width: 768px) {
#menu-icon ~ label {
font-size: 30px;
}
}
</style>
</head>
<body>
<input type="checkbox" id="menu-icon" />
<div class="carousel">
<input type="radio" name="carousel" id="slide-btn-1" class="slide-btn" checked />
<input type="radio" name="carousel" id="slide-btn-2" class="slide-btn" />
<input type="radio" name="carousel" id="slide-btn-3" class="slide-btn" />
<input type="radio" name="carousel" id="slide-btn-4" class="slide-btn" />
<input type="radio" name="carousel" id="slide-btn-5" class="slide-btn" />
<div class="slide one"><h1><a href="#">CAT NOSES</a></h1></div>
<div class="slide two"><h1><a href="#">WATER DROPLETS</a></h1></div>
<div class="slide three"><h1><a href="#">COFFEE SHOPS</a></h1></div>
<div class="slide four"><h1><a href="#">CITY SCAPES</a></h1></div>
<div class="slide five"><h1><a href="#">BEACHES</a></h1></div>
<div class="labels">
<label for="slide-btn-1"></label>
<label for="slide-btn-2"></label>
<label for="slide-btn-3"></label>
<label for="slide-btn-4"></label>
<label for="slide-btn-5"></label>
</div>
</div>
<div class="nav">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<label for="menu-icon">
☰
</label>
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur dolorem eum, nihil velit similique, esse rerum assumenda labore itaque, placeat accusamus aliquam. Eligendi delectus, quis similique dolorum corporis laboriosam, explicabo illum dolorem eos rem error. Hic, suscipit. Exercitationem, eius repellat fugit consequuntur distinctio dolor minus dicta qui in et, nemo earum cumque accusantium sapiente numquam iusto, accusamus expedita assumenda necessitatibus tenetur tempore blanditiis. Expedita aliquam vel, est itaque, eos perferendis mollitia suscipit maiores quos iste modi officia assumenda voluptatibus quod ipsa eligendi provident necessitatibus autem cumque, corrupti quisquam qui. Quos suscipit vero sequi doloremque nisi consequuntur corrupti impedit ipsam nobis.</p>
<p>Rerum illum culpa sed inventore voluptatum, natus est veniam magnam a amet saepe ad quisquam perferendis beatae pariatur libero assumenda debitis recusandae dolorem! Corrupti exercitationem libero eaque at, repellendus veritatis modi? Odit doloremque, quisquam cumque earum, iure perspiciatis soluta reprehenderit molestiae laboriosam quia iusto esse, fugit quos optio quo amet quaerat placeat ad. Voluptas reiciendis nesciunt, itaque molestias a nobis vel similique tempore iusto facere ea eius quas voluptates magni veniam quaerat aut et, saepe suscipit consequatur. Quam nisi eius excepturi ad sequi, commodi explicabo dolorem assumenda nam odio neque doloremque ipsum at est dolore obcaecati modi officia nemo possimus?</p>
<p>Est vitae, perferendis porro obcaecati hic sequi unde repudiandae illum ipsa, iste voluptas saepe reprehenderit animi assumenda explicabo corrupti non nam possimus ad, cupiditate corporis mollitia ipsum aliquam aspernatur? Mollitia error provident fugit eius sunt rem ducimus repudiandae minus voluptate quisquam iusto suscipit maxime, natus rerum odio quod dolores eum omnis fugiat eos numquam et! Ipsum porro eaque nostrum aut fuga quos, iure culpa enim velit maiores sit quae autem cum ratione corporis vel non dolorum quo tempora veniam vero harum blanditiis eius aliquid! Nisi ut quasi minima harum inventore nesciunt, labore aliquid veniam dolores dicta non soluta iure provident?</p>
<p>Eius labore laudantium doloribus fugiat cumque praesentium quas, eaque illum ducimus voluptatum maxime nam corrupti eum iure inventore commodi? Asperiores debitis itaque corporis voluptates quae molestiae blanditiis doloribus iure iusto, dolor quasi hic, possimus quaerat animi, nam vitae enim! Modi, inventore! Labore placeat maxime dolorum assumenda autem unde debitis, adipisci tempora quos ipsum temporibus ullam nesciunt magnam asperiores fuga iste doloribus molestias eveniet sit! Neque ipsa quas cupiditate, ullam optio sunt doloremque mollitia soluta dolore reprehenderit cum repudiandae sed delectus accusantium eveniet ad ratione error quasi nam natus deserunt. Laborum fugiat, voluptatem error obcaecati doloribus ipsum consequatur dolorem autem quas.</p>
<p>Nobis sapiente ullam officiis ipsa corporis fuga doloremque amet dignissimos aliquam et, magni similique voluptatem animi nihil vel non quaerat tempora odio, inventore accusamus est quos? Tempore dolorem fuga atque blanditiis nesciunt neque vel nostrum consequatur quo quos alias, eligendi ratione aperiam optio est quibusdam modi in cupiditate esse reiciendis. Beatae, nesciunt tenetur molestias nemo aliquid, minima eveniet harum ut aperiam totam rerum similique exercitationem! Incidunt molestias quam tenetur quasi nisi aliquam adipisci libero facere impedit deserunt. Sunt, distinctio, nisi placeat voluptate deserunt tempora vel quia, cumque accusamus exercitationem rerum porro et numquam dolor magni quasi inventore suscipit hic possimus?</p>
<p>Excepturi magnam impedit totam expedita deserunt voluptate reprehenderit. Nesciunt, repellendus, ut, dolor dolorem aut aliquam quibusdam quisquam accusamus dolores error laudantium dignissimos. Unde, eum repudiandae. Maiores suscipit veniam recusandae et blanditiis unde modi iste inventore exercitationem ipsam, iure, quam corrupti debitis neque nostrum molestiae temporibus sit cum natus eius quo tenetur. Animi delectus sint consequatur nulla, eligendi sapiente nihil magnam rem, dolorum aspernatur eos consequuntur esse corrupti? Nostrum, soluta. Ullam mollitia, porro officiis quisquam eos error fugiat quos, praesentium tempore consequatur molestias corporis vero quam dicta, dolore velit vel? Voluptatum quibusdam id qui, corporis architecto facere nobis quam modi culpa?</p>
<p>Amet autem, laborum voluptates, dolorem consectetur aliquam pariatur laboriosam facere nostrum fuga facilis magni veniam deleniti repudiandae suscipit obcaecati iusto? Nisi porro suscipit ipsam perferendis rem dolorum natus! Nulla explicabo iste ducimus alias voluptatem placeat debitis harum labore. Animi, veritatis. Voluptatem consectetur ipsa quos debitis nulla quia facere impedit quae magnam explicabo, aut aliquam excepturi velit eaque labore. Culpa dolore harum voluptatibus cum expedita voluptates aperiam adipisci. Vero ex nemo, error perspiciatis cumque consequuntur voluptate asperiores commodi quas dicta mollitia modi quisquam, placeat inventore soluta, ducimus assumenda magnam exercitationem alias illo aliquid unde labore. Iure architecto voluptates harum repudiandae quos.</p>
<p>Veniam expedita tempora ad. Odit atque iure, aliquam quam ipsum error sequi similique blanditiis aperiam, quas delectus ab modi excepturi sint facilis! Molestiae, accusantium soluta totam aspernatur libero maxime ex molestias, temporibus pariatur, architecto repudiandae incidunt ea quod nobis culpa eaque praesentium deleniti aperiam at! Tempora molestiae molestias consectetur modi vitae delectus repellendus, sint incidunt odio quaerat, cumque praesentium. Nisi tempora eum blanditiis? Aut dolore sunt delectus dolorem, quis laboriosam doloribus consequatur recusandae. Ipsa mollitia accusantium necessitatibus enim, quisquam deserunt aut obcaecati suscipit alias quis asperiores illo harum delectus veritatis debitis doloremque error iusto. In aliquid laborum minima architecto vitae!</p>
<p>Consequatur sequi aut voluptatibus soluta enim eos excepturi, eligendi minus, cumque ullam rerum vitae optio vero incidunt. Quasi dignissimos perspiciatis eveniet provident nobis dolorem soluta dolorum corporis! Debitis tenetur odio temporibus nisi. Dolor aut rerum odio repudiandae quia impedit vitae beatae aliquam facere odit, numquam soluta quod, dolore atque quasi unde doloribus deleniti error. Omnis animi at unde! Aperiam, id hic. Iusto est dicta vero delectus eligendi. Similique maxime assumenda officiis magni minima possimus, eius sequi magnam ullam debitis minus sit sunt incidunt dolor? Quia impedit qui molestias obcaecati dignissimos voluptatum quidem accusantium, minus alias. Repellendus assumenda inventore accusantium ipsa!</p>
<p>Hic at aspernatur itaque delectus ipsum dolore facilis? Iste placeat temporibus labore ab adipisci numquam facere atque sint soluta molestias saepe, eligendi qui. Cumque consectetur iusto adipisci eligendi dicta unde rerum quam provident cum enim illo aliquam commodi autem animi iste, aspernatur distinctio ipsum eaque similique maxime perspiciatis! Numquam officia sunt saepe minima odit perferendis officiis, voluptates quibusdam, eum laudantium eligendi, optio id amet ratione! Facilis beatae nostrum provident non nam. Pariatur architecto, cum quis, sed ipsum ullam consequatur facere esse id velit voluptas sapiente eligendi magnam in totam, obcaecati consequuntur officiis? Maxime eius totam eum vitae repellendus illum quasi?</p>
<p>Modi ad maiores, totam nesciunt nulla illo provident, at perferendis tempora est sint ab hic numquam deleniti esse magnam? Deserunt, similique. Magni, illum! Placeat eius quos voluptates, sint molestiae provident harum optio, eum eaque quisquam sapiente. Ipsa obcaecati aliquid fugit dicta corrupti atque a doloremque, nulla quibusdam eius reprehenderit aut impedit veritatis eveniet id nisi quas consequatur eos explicabo nemo delectus quis aspernatur dolorem? Dolorum officia ipsum deserunt eum commodi nulla, quis quo laborum repellendus mollitia ea voluptatum, iusto reiciendis. Ut, sapiente culpa pariatur veritatis perferendis eaque eligendi! Sint odio consequatur hic provident quae praesentium dolorem, reprehenderit pariatur quaerat porro?</p>
<p>Natus maiores temporibus repellendus nam aliquid harum aliquam, voluptates ducimus voluptatum ab pariatur, beatae quos cumque quae ea perferendis voluptas quas eveniet sed distinctio aspernatur autem? Ullam sit tenetur voluptatum quo velit! Aut ullam, corrupti pariatur harum quo doloremque. Architecto dignissimos unde eius repudiandae, fuga doloremque asperiores voluptatem totam similique accusamus nemo! Magnam temporibus alias eum nostrum. Maiores accusamus, impedit, deserunt culpa voluptate dolor ea ducimus cumque amet inventore veniam. Soluta nemo maiores ipsum accusantium officiis itaque, velit cupiditate vel quaerat hic laudantium saepe incidunt, aliquam dolor animi natus, ad rerum. Inventore sint quo tempore nesciunt sed expedita deserunt reiciendis!</p>
<p>Laudantium excepturi reprehenderit aperiam incidunt in eveniet sit eaque. Eaque suscipit illum veniam labore quisquam esse. Corrupti ab aliquam labore veniam eveniet suscipit iste sapiente, similique animi eligendi magnam recusandae. Nulla ducimus soluta doloribus iusto culpa veniam eum exercitationem cumque. Suscipit, consequuntur inventore, praesentium beatae quod fugit aliquam rerum sit vero dolorum adipisci temporibus obcaecati cupiditate ea earum necessitatibus, veniam natus iste vitae deserunt doloribus sint quisquam impedit. Delectus maxime, quas, at, ut sed accusantium cumque harum reiciendis itaque excepturi voluptatum inventore amet a corporis cum voluptatibus id debitis. Nesciunt optio natus asperiores illum doloremque adipisci? Facere ex aliquid nisi?</p>
<p>Animi suscipit natus recusandae iste, id pariatur! Vero eius dolorum eum at eligendi, sequi ex sit quisquam maxime quasi quibusdam totam quidem suscipit sapiente deserunt soluta tenetur expedita iusto dolor eaque aliquid eveniet architecto aperiam. Laborum adipisci iste animi, cupiditate necessitatibus sunt aperiam soluta nihil molestias quibusdam aspernatur saepe, quae placeat recusandae perferendis totam doloribus, aliquam debitis provident quo quasi. Dolor, officia! Doloremque natus ea necessitatibus, expedita facilis architecto dicta est iste veritatis ut incidunt cupiditate non voluptatibus veniam ducimus exercitationem sunt voluptate consequatur, iure quae qui? Tenetur doloremque sunt vero ipsam illo, quisquam aperiam, sint aut odit vel esse?</p>
<p>Magnam qui possimus molestiae beatae labore sequi et provident ut, laudantium dolorum expedita voluptatem ullam a nemo error esse aut, quia totam odit quasi maiores nulla? Omnis hic tempore, voluptatem eum unde earum consequatur totam eveniet sunt facilis, aut illo voluptas porro fugit nostrum excepturi a corrupti accusamus nihil molestiae expedita dolor obcaecati? Ex libero iusto cumque nam voluptatum ipsa laudantium commodi totam voluptatem nulla dolor nisi excepturi dolore doloremque error nostrum aperiam, reprehenderit adipisci accusamus, at corporis, consequatur molestias dolorum! Quidem earum tempora distinctio culpa! Quos porro odit delectus pariatur consequuntur iusto tempore, ex sed saepe optio maiores voluptates.</p>
<p>Sequi non repellat dolore sed eaque. Consequatur voluptatum atque eveniet! Eum, aut! Eum aliquam quasi veniam blanditiis eius voluptates esse iure, ea itaque necessitatibus perferendis optio eos porro, quia ad harum autem illum rerum dolorum. Corporis, voluptates esse delectus minima sapiente eius, nesciunt consequuntur unde cum dignissimos assumenda, illo rerum! Laboriosam odio facere quibusdam molestiae consequuntur tempore ratione eum modi illo est reiciendis, neque similique consectetur quod recusandae sunt commodi dolorum. Accusamus et magnam dignissimos, quisquam incidunt vero! Repellendus aliquam sapiente culpa voluptatum sint eaque dolorem non quae. Impedit deserunt magni culpa quos soluta aliquid expedita tempore amet quia laborum.</p>
<p>Recusandae repellendus excepturi, dolorum magni, ad deleniti repudiandae impedit iure id enim, provident veniam quisquam debitis ullam. Optio dignissimos debitis pariatur sunt enim dolorum sequi autem, praesentium adipisci totam dolorem sit suscipit, vero error magnam cumque quasi. Aut reiciendis, tempora hic laudantium et esse iusto mollitia, corporis ea nisi dicta accusamus totam ut. Magni temporibus veritatis nulla. Necessitatibus sequi suscipit corrupti quam magnam temporibus ea architecto eum nesciunt veritatis sit, quae fuga facere modi, at eos iste. Similique est tempore recusandae natus vel, laudantium saepe, labore quo nam, culpa voluptatibus eum ipsam sapiente maiores enim corporis provident obcaecati iure sunt.</p>
<p>Itaque, repellendus eveniet? Dolores veritatis, architecto qui sunt porro earum quam ea dolorum suscipit magni est assumenda vitae totam quae, veniam ipsa velit praesentium quis incidunt error enim obcaecati aut illum. Vitae obcaecati officia voluptate ullam quam suscipit sit alias. Quibusdam obcaecati sequi quisquam dolores qui modi placeat porro voluptatum ducimus reprehenderit ex adipisci illo alias reiciendis sint voluptates ipsa aliquam, autem corporis. Ipsam, fugiat. Molestias, itaque hic. Laudantium, error quia! Dolor velit officiis ad distinctio maiores ducimus eum odio, quae nisi neque culpa numquam exercitationem quis ex quisquam quasi sit earum nihil commodi ipsa dicta? Commodi quo numquam iure.</p>
<p>Cupiditate enim porro aut omnis, quod harum at voluptatem quae, velit minus consequuntur est sequi adipisci esse dignissimos ipsum, tempora laudantium odio cumque magni illo ipsam numquam quia possimus? Numquam nulla amet alias quasi odio consectetur consequatur praesentium aperiam officia, harum quas earum at in quis, ipsa quisquam exercitationem. Iste, reiciendis numquam qui quod inventore fugiat facere impedit quo deserunt id vel ducimus sint, commodi rem minus eligendi illo veniam ratione eveniet et neque praesentium sunt? Consequatur alias, necessitatibus quam ipsa expedita libero iste omnis ratione ad iusto blanditiis pariatur aperiam, veniam illum quaerat maiores consectetur est eum, natus optio!</p>
<p>Ducimus minima voluptas hic illum quod adipisci quam, voluptate suscipit reiciendis ut, saepe fugiat repellendus excepturi, voluptates perferendis architecto et placeat nihil fuga nam numquam iusto. Error ratione distinctio culpa voluptates possimus nihil, assumenda quasi dolores quaerat magni quas, voluptate expedita dicta commodi consequatur dolorem suscipit aliquam a harum, ducimus earum! Quibusdam ea minima dolor corrupti, ab velit iste consequatur optio labore veritatis maxime modi eius tempore ipsum culpa nobis et molestiae nesciunt similique. Dolore deleniti nulla consectetur optio. Temporibus maxime, odit consequatur enim quo magnam numquam culpa tenetur quibusdam aliquid, sint accusantium eaque dicta mollitia non optio voluptatem animi.</p>
</body>
</html>
Comment
