Created
June 10, 2019 16:15
-
-
Save ilaborie/34fd20c998a4be5859999675ff13c4ba to your computer and use it in GitHub Desktop.
Test dialog tout naze
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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>Document</title> | |
<style> | |
body { | |
position: relative; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
max-height: 100vh; | |
max-width: 100vw; | |
overflow: hidden; | |
margin: 0; | |
background: coral; | |
} | |
main { | |
margin: 1em 10vw; | |
padding: .5em; | |
border-radius: .25em; | |
max-height: calc(100vh - 3em); /* remove margin and padding */ | |
overflow: auto; | |
background: cadetblue; | |
} | |
label { | |
border : thin outset lightgrey; | |
background: lightgrey; | |
padding: .25em; | |
} | |
.dialog { | |
position: absolute; | |
display: none; | |
justify-content: center; | |
align-items: center; | |
} | |
.dialog .dialog-content > label { | |
float: right; | |
margin: .25em; | |
} | |
.dialog .dialog-content { | |
padding: .5em; | |
max-width: 66vw; | |
max-height: 80vh; | |
overflow: auto; | |
background: wheat; | |
border: medium solid rgba(0, 0, 0, .5); | |
box-shadow: | |
0 0 10vmin rgba(0, 0, 0, .5), | |
0 0 0 100vmax rgba(0, 0, 0, .5); | |
} | |
#toggle-dialog:checked ~ .dialog { | |
display: flex; | |
} | |
#toggle-dialog { | |
/* Hide checkbox, the a11y way */ | |
position: absolute !important; | |
height: 1px; | |
width: 1px; | |
overflow: hidden; | |
clip: rect(1px, 1px, 1px, 1px); | |
} | |
</style> | |
</head> | |
<body> | |
<input type="checkbox" id="toggle-dialog"> | |
<main> | |
<label for="toggle-dialog">Open</label> | |
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel sapiente quas voluptas modi ad! Architecto iusto, provident cupiditate quo recusandae, optio distinctio perspiciatis eveniet laborum consequatur ullam tempora delectus enim.</span> | |
<span>Magnam expedita architecto odio recusandae vel excepturi, magni, unde fugit mollitia omnis sed consectetur vero. Accusamus, qui aperiam. Quasi rem, ea vitae culpa repellendus vel necessitatibus voluptas et beatae commodi!</span> | |
<span>Aperiam, dolorem accusantium. Voluptatum veniam ut, mollitia sapiente enim vitae harum, sunt pariatur eveniet aspernatur perspiciatis porro sed excepturi aliquam nobis expedita magnam distinctio! Ex explicabo expedita nulla magni animi!</span> | |
<span>Aliquam, saepe porro molestia | |
padding: .5em; | |
max-width: 66vw;e ipsa nobis recusandae quam vitae ut iure ipsam? Quaerat, illum in repellendus soluta cumque optio commodi, illo voluptate voluptatibus laboriosam, quasi labore quisquam est. Optio, accusamus.</span> | |
<span>Ut excepturi voluptatem labore, ad sint natus velit placeat ducimus nihil provident odit est id, esse hic. Aliquid autem sequi suscipit dolorum, possimus accusantium expedita quasi eaque, dolore ducimus reprehenderit?</span> | |
<span>Impedit illum unde in, fugiat fuga, labore earum minus placeat commodi ad enim aperiam nemo, corrupti dolorem? Fuga deleniti recusandae expedita beatae, aperiam distinctio sed. Sapiente culpa minus ipsum in?</span> | |
<span>Veniam dolor deserunt, similique provident maxime excepturi sed. Atque quam ad inventore deleniti nesciunt delectus cupiditate quaerat iusto voluptas minus. Commodi molestias, velit quos vel placeat quod pariatur necessitatibus debitis!</span> | |
<span>Omnis ipsum nemo, vel, quod nostrum facilis repudiandae quaerat velit nisi consequuntur voluptatum eos illum! Beatae asperiores totam inventore expedita autem, impedit nesciunt aspernatur assumenda voluptatem consequatur magni corporis quas.</span> | |
<span>Ab necessitatibus ipsa totam, aut corrupti iste porro impedit a similique assumenda harum cupiditate magnam nihil sapiente, accusantium sed consequuntur adipisci. Qui, rerum officia iure pariatur alias beatae vitae amet.</span> | |
<span>Enim sit dolorum eligendi eveniet quisquam dolore ab in ducimus. Qui, doloribus omnis tempora deserunt deleniti ipsa eos. Eaque ab suscipit officia quidem necessitatibus sed aperiam ullam modi delectus in.</span> | |
<span>Cupiditate accusantium atque magnam magni et assumenda ad aperiam quos eaque saepe nihil quia consequatur necessitatibus sapiente est debitis minima, ut deserunt sint. Fuga dolorem exercitationem, quia saepe praesentium ullam!</span> | |
<span>Pariatur officiis sunt harum eum ea aliquid dolores ut corrupti dolor itaque, enim animi totam deleniti beatae et, maiores inventore eligendi magni. Vitae doloribus reiciendis tenetur consequuntur rerum sed possimus?</span> | |
<span>Obcaecati culpa consequuntur quo autem itaque placeat corrupti numquam cumque in voluptates, a vel tempore accusantium esse. Et doloribus error perferendis unde accusantium dolore, animi molestias cumque suscipit cupiditate voluptatem?</span> | |
<span>Numquam fugiat necessitatibus quibusdam laCloseudantium a, minima aut, veniam beatae reprehenderit incidunt, error consequuntur? Voluptatibus eaque molestiae veritatis esse accusantium! Quis, ipsum nam. Distinctio asperiores voluptatibus magni quo, minima magnam.</span> | |
<span>Officia ut necessitatibus repellat ipsum eligendi illo neque, totam fugiat sit explicabo adipisci esse nulla obcaecati sed quae alias praesentium magnam cum soluta itaque similique odio provident et asperiores! Aperiam.</span> | |
<span>Recusandae ipsum at, nemo eligendi culpa perspiciatis animi quo quidem provident repudiandae cupiditate illum error voluptatum rerum iure laborum! Odit itaque sit reiciendis totam eveniet at repellat ullam aperiam similique.</span> | |
<span>Cum animi veritatis enim ducimus sunt consequuntur quo perferendis? Nostrum optio quos a modi, ea pariatur facere aliquid dignissimos laudantium ratione libero ducimus dicta error voluptas iure perspiciatis quas consequuntur.</span> | |
<span>Est et iste consequuntur nulla dicta aperiam aut facilis? Molestias cupiditate id repellendus beatae illo dicta voluptates, ducimus est reiciendis, doloremque aut aspernatur quas rerum. Ex, quod provident. Architecto, maxime.</span> | |
<span>Nostrum necessitatibus animi perspiciatis facere deleniti, quibusdam praesentium asperiores saepe odit soluta dolores, quas corrupti quam consequatur deserunt? Eius distinctio ipsam voluptatem quaerat! Delectus ut magni consequuntur illo autem iste.</span> | |
<span>Aspernatur magnam voluptate in delectus, quaerat magni explicabo amet soluta eaque laboriosam deserunt ratione voluptatibus quasi enim! Obcaecati laudantium magnam, eum dolorem vel quos ducimus reiciendis omnis consequuntur veniam quaerat?</span> | |
<span>Placeat ut eius impedit molestias. Hic, vel neque? Ullam voluptas mollitia excepturi fuga dolores deleniti veniam harum quasi, porro, suscipit consequatur, libero possimus officiis. Saepe eaque eligendi atque exercitationem veniam.</span> | |
<span>Sequi laborum natus debitis. Aliquam cupiditate corrupti, sit at saepe sunt suscipit iusto nulla fugiat doloremque aut porro quod vitae nisi voluptas a, accusamus molestias eum nesciunt cumque tempore reiciendis!</span> | |
<span>Quos consequatur quisquam ipsam ea dolore nobis voluptates nostrum obcaecati asperiores aperiam nesciunt earum facilis molestiae, incidunt in optio necessitatibus fuga saepe fugiat id cumque. Error nobis quibusdam totam quod.</span> | |
<span>Quia maiores nihil, accusantium perspiciatis nemo labore corrupti temporibus dicta itaque molestiae veritatis totam minima rem impedit reiciendis sint expedita nulla! In praesentium consectetur, facere blanditiis explicabo quis rerum odio!</span> | |
<span>Laborum et illo asperiores voluptatum corporis expedita blanditiis culpa id, repellendus dolore, sequi fuga est, earum voluptates odit quos. Nam, nisi. Nam qui excepturi dicta! Vero, minima. Sit, reiciendis ducimus.</span> | |
<span>Ut, nihil. At repellendus eligendi, cum nobis vero ipsa corporis adipisci sapiente perspiciatis ullam corrupti saepe eius reprehenderit repudiandae necessitatibus optio vitae nulla voluptatum ratione accusamus, aliquam alias, omnis veniam!</span> | |
<span>Accusamus, consequatur rem. Deserunt harum ducimus eos magni sint recusandae ullam nam officia pariatur molestias repellat aperiam autem doloremque ex accusamus laborum ratione odit, vitae eligendi voluptates cumque. Aliquid, blanditiis.</span> | |
<span>Voluptatem accusamus eius voluptate, harum dolorum saepe sapiente excepturi vel delectus, maiores rerum ipsa esse fugiat quasi mollitia voluptatum natus soluta inventore cupiditate maxime aperiam? Quae cumque adipisci architecto corporis.</span> | |
<span>Accusamus, praesentium. Ipsa molestias sed maxime odit beatae ullam fugit, quis maiores quas magni deleniti amet ipsum adipisci a in corrupti possimus neque iste excepturi enim atque! Reprehenderit, praesentium dolore?</span> | |
<span>Molestias temporibus vel tempore placeat quam ea totam numquam facilis necessitatibus? Mollitia, perferendis deserunt facere fuga officia nemo magnam vitae perspiciatis quis laborum in atque, molestias dignissimos adipisci dolor praesentium.</span> | |
<span>Minus, culpa. Modi amet neque sed veritatis placeat laudantium fuga dolorum, voluptate reprehenderit, eius velit cumque excepturi mollitia doloribus inventore alias nam fugit maiores aut cum! Sunt, perferendis velit? Optio?</span> | |
<span>Ducimus est voluptas ipsum optio harum omnis quis voluptatum minima corporis quod tempora commodi, enim consequatur, modi repellendus quibusdam, hic sapiente quisquam architecto inventore debitis officia ea animi sed. Suscipit!</span> | |
<span>Sunt voluptatum facilis ducimus doloremque, quo obcaecati blanditiis velit a ipsum sequi optio, expedita, commodi officiis. Eaque magnam consectetur, a neque dolore quibusdam aperiam laudantium vel! Repellendus facere quisquam maiores?</span> | |
<span>Omnis, optio incidunt! Culpa velit libero adipisci autem labore dolores nihil numquam est quae. Obcaecati nulla id amet. Ad repellendus inventore rem veniam iure. Nulla iste ex odio repudiandae! Odit?</span> | |
<span>Id laboriosam veritatis ea sequi officia nemo obcaecati, iusto ullam ut, impedit tempore. Excepturi odio est vero, similique veritatis fugiat sit? Rerum ab consectetur, ea non qui voluptatem reiciendis perspiciatis?</span> | |
<span>Enim molestiae porro aliquam, asperiores nemo magni tempora harum voluptatem hic quam atque sequi consectetur fuga officia rerum sint ex at accusamus sapiente illum nisi culpa odio id quae. Facere?</span> | |
<span>Deleniti accusantium corporis unde velit, in perspiciatis mollitia repellendus expedita. Ipsum earum, eaque obcaecati omnis distinctio cumque dicta eum iure ratione est incidunt animi necessitatibus cupiditate iste, temporibus dolores ex.</span> | |
<span>Facere accusamus labore cum expedita soluta earum fuga sed, vitae voluptatem saepe tempore repellat molestias nemo doloribus natus consectetur magnam tempora quis unde adipisci perferendis vel enim. Praesentium, repellat exercitationem?</span> | |
<span>Iure cupiditate deleniti, nemo neque dolorem velit cumque laborum, voluptatibus nisi ipsa maiores ab asperiores, incidunt vitae sunt? Est nostrum vitae recusandae facilis, eligendi itaque nisi odit provident veritatis officiis.</span> | |
<span>Omnis, voluptatum tenetur maiores fuga similique sint a laborum veritatis id vero neque ipsum qui dolores eaque voluptatibus odit illo cum veniam expedita nisi! Non consequatur distinctio perferendis delectus laboriosam.</span> | |
<span>Rem dicta a placeat nobis libero? Dicta cum libero vero natus? Ullam beatae minima dolores quaerat quibusdam libero eos! Fugiat, expedita veniam iusto at similique ratione fugit voluptate vel ab?</span> | |
<span>Dicta, modi? Ut reprehenderit autem provident non ipsum laudantium dolore, placeat quos commodi quibusdam quaerat repudiandae accusantium, accusamus voluptatem eligendi vero totam aliquam! Quia vel aspernatur corporis, deserunt voluptas excepturi!</span> | |
<span>Repellat velit numquam rem aliquid temporibus hic excepturi repellendus eos. Iure esse accusantium, vitae facere accusamus magnam reprehenderit odit incidunt provident commodi cumque repellat quam laboriosam! Maxime animi dicta ipsum!</span> | |
<span>Suscipit fugiat, fugit provident mollitia rem fuga accusantium delectus doloribus excepturi quidem soluta labore, consequatur quod! Nobis fuga fugiat a perspiciatis quis laboriosam animi sapiente iure porro, ab quod! Laboriosam?</span> | |
<span>Dolores molestias illum modi labore repellendus, repudiandae distinctio quae necessitatibus numquam amet veritatis! Magni maiores hic, consequatur illum adipisci doloremque itaque cumque illo reprehenderit! Excepturi, maiores. Eius facilis praesentium provident.</span> | |
<span>Consectetur at maiores voluptates necessitatibus consequatur accusamus nemo recusandae iure ducimus dolorum nesciunt aut ipsum aspernatur impedit quos eius veniam, animi optio iusto obcaecati consequuntur. Tempora adipisci debitis necessitatibus officiis!</span> | |
<span>Reiciendis animi dolorem ea rerum sit possimus minima modi, veniam enim iste! Numquam, consequatur quisquam? Corporis obcaecati at unde provident, porro quod eos neque distinctio ipsum doloribus dolor, facere sequi.</span> | |
<span>Quisquam, cum! Quis, nisi modi! Magnam eius consectetur necessitatibus deleniti debitis suscipit ab architecto voluptatibus delectus autem officia ipsa nemo cupiditate consequuntur, inventore molestias placeat doloribus quibusdam eum. Dolores, explicabo!</span> | |
<span>Vitae illum odio velit a minima temporibus! Dicta, itaque mollitia. Omnis consequuntur sint ratione ut amet inventore iste, ex tempora eos quia molestiae rerum nesciunt, commodi vitae dolorum quam modi.</span> | |
<span>Atque laborum excepturi asperiores suscipit velit vero aspernatur amet, unde consectetur, ea voluptates dolorum quia accusantium doloribus aut consequatur perspiciatis vitae! Commodi architecto adipisci perspiciatis voluptatum quidem quia nemo unde?</span> | |
<span>Accusamus ad eligendi accusantium repellendus laudantium, quam, odit iure unde modi hic consectetur eveniet itaque consequuntur numquam recusandae odio corrupti ratione dolore a tempore nulla rerum ex nisi. Tempora, vel.</span> | |
<span>Harum quibusdam iusto quasi? Adipisci consequuntur excepturi quia aperiam ipsa. Cupiditate illo adipisci distinctio magni repellat fugit veritatis asperiores maxime reprehenderit corporis? Quas, asperiores eum? Fugiat optio minima laudantium nisi?</span> | |
<span>Soluta tempore accusantium, maxime obcaecati provident a iure saepe esse aliquid cumque dolores, enim distinctio non consectetur omnis ipsam perspiciatis veritatis minus quod, dolorum fuga. Unde quaerat aliquam veritatis impedit.</span> | |
<span>Porro beatae aliquam quasi cum, quos in dicta placeat, vitae harum repellat optio quaerat delectus rem eum ea provident consequuntur expedita exercitationem fugiat officiis accusamus laborum. Voluptatum, debitis. Enim, unde.</span> | |
<span>Eveniet eum error quod itaque! Quae numquam voluptate tempora fuga dolore eos quaerat illo aliquid soluta nihil, quo in architecto nemo iste cupiditate corporis, fugit officia autem vero exercitationem eligendi?</span> | |
<span>Perspiciatis quisquam libero laborum. Vero aliquid sint numquam inventore quaerat molestias provident maiores praesentium ut dolore voluptates saepe laudantium hic, architecto nisi molestiae magni magnam quas. Esse repudiandae dolore voluptatem.</span> | |
<span>Optio recusandae iusto id illo dolorum quia? Iusto delectus quisquam vero, consectetur at officia ratione, eligendi quia molestiae expedita amet? Incidunt voluptatibus enim dolore ipsam iste architecto corrupti suscipit pariatur!</span> | |
<span>Perferendis, molestiae porro, aspernatur debitis excepturi rerum quaerat ab nesciunt quisquam suscipit ducimus tempora neque, quod eaque dolore velit quasi distinctio! Quasi, magni expedita? Magnam cum itaque incidunt sapiente architecto?</span> | |
<span>Minima, expedita animi deleniti, cum quae voluptas quas corrupti minus ratione laudantium nemo, autem doloribus enim quisquam? Molestiae commodi voluptates aut pariatur repellendus aperiam, vel quaerat eveniet autem repellat exercitationem?</span> | |
<span>Autem libero quasi minima debitis hic molestias vitae, obcaecati dicta commodi sit, consectetur suscipit numquam! Delectus impedit in facere porro nisi ducimus adipisci reprehenderit dolores distinctio explicabo, blanditiis, vel ab.</span> | |
<span>Totam quia hic magni aut ex iusto vitae maiores voluptatibus nemo ipsum, velit est mollitia! Beatae odio, officiis fugiat accusamus suscipit ea. Obcaecati quod repellendus inventore voluptas distinctio eaque recusandae!</span> | |
<span>Fugiat officiis harum sint id beatae provident animi laboriosam aperiam dolore, mollitia nemo alias. Eos, ex nam est recusandae perferendis sapiente porro dolore voluptatem unde? Tenetur eum fugit earum veritatis.</span> | |
<span>Sit esse reiciendis, inventore quasi in itaque ipsa veniam doloremque commodi quia alias, officia explicabo vitae rem illo maiores neque. Numquam perspiciatis quae quasi, inventore labore repellat eum suscipit atque.</span> | |
<span>Asperiores delectus veniam quidem iusto neque fuga, sed ducimus adipisci quasi odit voluptatem sapiente illum cum nobis aliquid aliquam eius. A illo facilis labore sit incidunt vitae deserunt quae nisi.</span> | |
<span>Perspiciatis laborum aliquid nihil earum adipisci laudantium, quia ipsa, quo excepturi harum voluptatem quaerat! Voluptatem illo tempore assumenda asperiores aspernatur eos similique voluptatum sit, reprehenderit provident? Perferendis recusandae non quasi?</span> | |
<span>Exercitationem vel quibusdam repellendus numquam inventore velit cupiditate qui cumque accusantium suscipit quasi enim voluptates odit reiciendis fugit aliquid molestiae esse eligendi, aperiam quam animi incidunt repellat delectus officiis. Ullam.</span> | |
<span>Totam ipsam nisi, veritatis numquam voluptas, sunt obcaecati laborum enim eius, ipsum recusandae itaque. Error voluptatibus numquam soluta esse sit! Quam ad impedit debitis cum excepturi repudiandae facilis incidunt soluta?</span> | |
<span>Odio, architecto facilis reiciendis ipsam eos voluptates alias tempora quia incidunt hic, qui dolor perferendis omnis quaerat voluptate labore nemo laboriosam ad praesentium enim tempore ipsum dolores! Tempore, repellendus consequuntur.</span> | |
<span>Possimus adipisci veniam iusto distinctio vero aliquid quam amet explicabo deleniti inventore vitae a illum doloribus officiis error, magni omnis. Voluptatem, molestiae quos. Sint provident magnam quibusdam aliquam id ullam.</span> | |
<span>Ratione tempore nesciunt quaerat? Veritatis explicabo itaque error unde cum laboriosam odit, nisi at reiciendis, quibusdam earum, iste iure a fuga culpa dolorem atque excepturi illo distinctio aperiam labore. Quibusdam.</span> | |
<span>Quia, incidunt officiis temporibus ut praesentium quae ipsum provident cumque molestias totam? Aliquam totam corrupti veritatis dolorem alias dolores facere quae nihil deleniti consectetur aperiam vero, accusamus, quisquam, sapiente illo!</span> | |
<span>Ipsa animi aut dolor quam exercitationem, sunt hic libero, praesentium sequi eaque voluptatum, repellat nobis doloribus facilis vel omnis! Illo ducimus officia voluptatem necessitatibus vitae blanditiis quam dolores modi deserunt!</span> | |
<span>Quo architecto obcaecati unde praesentium, assumenda ipsum voluptatibus rerum accusamus veritatis expedita quas, at aut nulla incidunt libero maxime fugiat dolor! Reprehenderit error earum incidunt esse repudiandae quibusdam, officia commodi?</span> | |
<span>Optio tempora sunt voluptatum tenetur nisi officia vitae quisquam velit corporis quibusdam, nulla commodi provident. Rem reprehenderit pariatur ex soluta, sequi eaque sapiente quidem tempore itaque non consequatur quo nobis!</span> | |
<span>Voluptatem perferendis accusantium non dolor deleniti quidem illo. Dolore recusandae assumenda excepturi nostrum asperiores dicta natus, cum quaerat. Nulla ratione hic omnis? Quis rem sint obcaecati velit dolorum, maiores quia.</span> | |
<span>Velit quam ab dignissimos atque quae sequi dolorum voluptatibus neque. Vitae cupiditate aspernatur ex, similique molestiae amet harum aliquid eaque enim voluptatibus maxime temporibus excepturi saepe repudiandae est, perferendis tempore.</span> | |
<span>Doloremque tempore blanditiis, tempora ex beatae vel. Amet sunt quidem cum unde? Veritatis unde molestiae esse cupiditate itaque minima sint voluptatum asperiores, ipsam quisquam accusantium quod labore suscipit cum ea.</span> | |
<span>Numquam tenetur temporibus deleniti omnis non qui harum, explicabo consequuntur saepe nisi labore ullam modi optio corporis reprehenderit quas ducimus beatae sapiente odit veritatis cupiditate iure! Nulla nam vero alias.</span> | |
<span>Eius odit aliquam, officiis dolorum, ad accusamus odio, autem minima quod illum itaque nobis repellendus esse. Similique, dicta nobis perferendis, possimus temporibus dolorum vero repudiandae corrupti deserunt rem iste atque.</span> | |
<span>Quidem numquam nemo unde, atque omnis qui modi consequatur officiis, consectetur repellendus pariatur, veritatis odio libero temporibus molestias ab! Magni dolorem exercitationem quas repudiandae eius et saepe a sint officiis.</span> | |
<span>Eveniet distinctio eos fugiat, voluptatum quam possimus, cumque recusandae magni reiciendis iure necessitatibus esse molestiae aperiam nesciunt dignissimos enim natus suscipit quod exercitationem. Placeat incidunt natus asperiores sed nulla laborum?</span> | |
<span>Sunt, delectus ducimus. Placeat, itaque nisi, voluptate eaque illum vel et cum impedit architecto quae ut laborum rem neque harum totam voluptatibus ex? Explicabo natus minima sequi! Neque, expedita reiciendis.</span> | |
<span>Sit nobis repellendus rerum id omnis aliquam deserunt iste. Sed facilis laudantium aliquid distinctio ipsam praesentium omnis placeat earum animi, libero illum, id commodi, vel deserunt facere ab eveniet eligendi.</span> | |
<span>Illo tempora vero dolor, numquam praesentium in. Veniam enim delectus tenetur natus provident, esse eligendi, iste non numquam sequi ducimus molestias porro perspiciatis exercitationem necessitatibus! Placeat, in. Esse, placeat maxime!</span> | |
<span>Dicta ducimus consequatur omnis iusto, asperiores facere expedita suscipit sequi, nobis sed, alias hic ratione blanditiis natus magnam fugit sunt nostrum culpa? Esse nulla cum aspernatur possimus eos ea dolore.</span> | |
<span>Sequi, corporis pariatur. Iure voluptatem dolores placeat officiis, quis aperiam voluptates tempore corporis quia aliquam incidunt beatae sequi itaque nostrum modi rem similique repellendus earum eum. Numquam laudantium nostrum temporibus.</span> | |
<span>Nisi ipsa, soluta totam delectus facere in sit corporis beatae quae voluptatibus aspernatur sunt nemo quia quidem possimus blanditiis modi nesciunt consectetur dolorem doloremque iure explicabo perspiciatis amet. Soluta, eum.</span> | |
<span>Ab at temporibus earum repudiandae doloremque consequuntur et laborum id expedita soluta aperiam quidem odio adipisci mollitia autem labore laudantium ut, quae aliquid maxime beatae possimus quam natus? Numquam, minus?</span> | |
<span>Sunt itaque illum odio corporis voluptatem saepe minus recusandae dolores sed, mollitia deleniti animi ex sapiente nobis accusantium similique reprehenderit rerum repellat beatae exercitationem libero! Consectetur natus unde laboriosam temporibus?</span> | |
<span>Beatae, vel facilis, architecto cum tempora eius nam quae, rem tenetur iusto autem iure nisi? Nihil, ad voluptates ipsam, cum, suscipit doloribus nostrum atque inventore architecto blanditiis laudantium odit dolorum.</span> | |
<span>Hic recusandae quidem incidunt voluptatem esse! Saepe temporibus, sapiente unde autem deleniti ullam eum debitis in molestiae aliquam atque odio sed perspiciatis eius maiores tempora voluptas nobis nihil, neque assumenda.</span> | |
<span>Consectetur animi reiciendis praesentium. Deleniti amet sequi doloremque vitae eaque, perferendis nemo tempora. Vitae excepturi optio incidunt tempore asperiores illum expedita sit, commodi placeat, reprehenderit odit quo, pariatur vel dolores?</span> | |
<span>Provident minus facere suscipit. Atque mollitia, quam culpa itaque dolores molestiae eaque nulla, sed aperiam libero explicabo vitae, necessitatibus autem impedit ut distinctio molestias laboriosam suscipit magnam quod dolorem totam.</span> | |
<span>Sed sapiente consequatur dicta, dolor possimus cupiditate officia, dolores assumenda eos et vitae incidunt architecto provident, ipsa rerum eaque autem dignissimos magni nesciunt repudiandae ex fuga veniam quod? Incidunt, impedit.</span> | |
<span>Nobis atque nulla quae iusto eos quia quibusdam, iste labore exercitationem amet ipsam et adipisci sapiente numquam repellat laboriosam cum modi! Neque vel nulla ratione itaque tenetur? Porro, ea dolorem?</span> | |
<span>Qui unde et natus, nihil nemo nisi. Culpa doloremque rem veniam perspiciatis molestiae! Provident molestias culpa voluptate numquam quas rem? Inventore accusamus quibusdam cum nemo consequuntur repudiandae culpa dignissimos ipsum?</span> | |
<span>Non placeat eius id quos quis debitis sed eos repellat dolorum, ipsa, voluptatum repudiandae magni. Esse, rerum fuga voluptates ipsam, tempora nulla id consequuntur voluptas eaque quos beatae nostrum dignissimos.</span> | |
<span>Officia repellendus quibusdam veniam assumenda, dolorum magnam at? Omnis, tenetur aspernatur eligendi consectetur libero illum illo, hic corporis ratione, repellendus nemo rerum. Suscipit delectus illo exercitationem perspiciatis assumenda voluptatem temporibus!</span> | |
<span>Tenetur repellendus amet cupiditate rerum aperiam voluptate illo possimus consequuntur, magni distinctio ad ipsum iusto culpa aspernatur nostrum eius eaque. Perspiciatis dolores odit facere libero! Iste perferendis nam animi? Perspiciatis.</span> | |
<span>Harum, illum rem? Mollitia veritatis reprehenderit dolores labore inventore nesciunt? Adipisci dicta doloremque aliquam ducimus rem, deleniti quasi accusamus earum voluptatibus, autem eligendi! Facere aspernatur accusantium officiis voluptatibus maiores illo.</span> | |
</main> | |
<div class="dialog"> | |
<div class="dialog-content"> | |
<label for="toggle-dialog">X</label> | |
<span> | |
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum veniam dignissimos consequuntur blanditiis fugit atque dolorum placeat voluptatum harum maxime doloribus voluptas soluta, deserunt numquam, quibusdam quidem fugiat ipsa quam!</span> | |
<span>Quo, corrupti culpa! Veritatis, aperiam quisquam minima molestiae praesentium iusto quod officiis voluptates minus sit hic nisi amet quia facere accusamus velit distinctio nesciunt ut eum natus fugit perferendis eveniet!</span> | |
<span>Assumenda omnis praesentium aliquid, harum voluptatem eos totam aperiam similique. Magni illum explicabo ducimus itaque? Facilis optio nesciunt beatae fugiat. A quis iusto, nesciunt quod nobis qui! Officia, illo magnam.</span> | |
<span>Praesentium laboriosam delectus, dolorum, quibusdam quo consequuntur enim quam magni doloremque earum distinctio facere facilis dolores, ipsam corporis nobis deserunt. Omnis itaque et ea voluptatibus magni provident nobis alias esse.</span> | |
<span>Aut in dolorum rem at voluptatem, culpa, facilis mollitia nam voluptatibus sequi perferendis neque, nemo libero? Maiores animi sapiente harum deserunt omnis ullam natus, consequuntur nihil nam voluptate eum sit.</span> | |
<span>Blanditiis beatae nemo rem aliquam iure quasi culpa doloremque eum excepturi provident officiis exercitationem corporis, labore fuga? Quidem officia placeat nostrum fugiat maxime necessitatibus fuga, temporibus aperiam provident aspernatur id?</span> | |
<span>Dolorum quos, minus pariatur delectus optio, ad minima ducimus adipisci vitae sint quam nulla quisquam, magni expedita? Iste ea modi ducimus esse minus nisi, laudantium error, maiores culpa numquam sequi.</span> | |
<span>Vel quasi praesentium ad qui omnis alias dolor odit voluptates voluptate placeat, impedit dignissimos cupiditate! Rem repellat sit quasi asperiores illum nulla error odit fugiat! Repellendus, consequatur. Cupiditate, eos quas.</span> | |
<span>A quidem similique dolor corporis aspernatur vitae exercitationem obcaecati qui velit accusantium. Maiores, ipsa aliquid voluptatum hic aut laudantium incidunt architecto reprehenderit labore porro sequi repellendus animi vitae illo beatae.</span> | |
<span>Ratione vel consequatur, illum facere laborum, ducimus nihil fugiat tempora hic est amet esse pariatur cupiditate rem eum quas similique totam! Est omnis, quidem odit quos cupiditate deleniti tenetur rem.</span> | |
<span>Incidunt, exercitationem soluta ratione culpa dolores, consectetur facere error saepe recusandae dicta rem itaque quasi commodi natus? Repudiandae ad in dolorem suscipit animi natus aspernatur excepturi, aut placeat obcaecati quas.</span> | |
<span>Voluptatem voluptates doloremque, ipsum esse harum porro delectus veritatis maiores hic! Explicabo aliquid neque laboriosam illo suscipit consectetur sint cumque dolorem nemo, dicta quo corrupti. Aliquam nisi illo inventore distinctio.</span> | |
<span>Aliquid voluptates quisquam temporibus fuga maxime hic. Error exercitationem quo perspiciatis, sint et blanditiis, impedit suscipit commodi nesciunt delectus harum alias quaerat hic cupiditate similique corporis, vitae molestiae aut! Itaque.</span> | |
<span>Voluptatum inventore, explicabo quibusdam possimus vero deserunt quia dolorem natus similique doloribus recusandae praesentium excepturi perferendis eaque mollitia, magni eligendi. Iste autem quos, recusandae illo eaque tempora et earum quae!</span> | |
<span>Saepe alias quaerat dicta ea tenetur aliquam fugiat odit culpa distinctio animi ullam, nemo ut pariatur fugit est cum accusamus perspiciatis qui omnis, delectus temporibus explicabo? Nesciunt tenetur magnam vel.</span> | |
<span>Nihil optio dolor temporibus consectetur deleniti rem soluta sint, neque illo fuga nesciunt repudiandae reiciendis ut saepe quis labore fugit dolore? Est deserunt quis temporibus ullam numquam sunt aut quasi.</span> | |
<span>Quidem, numquam! Asperiores consectetur enim eius eum, sed magni temporibus. Nulla alias accusantium vel quam eum deserunt voluptas, quas reiciendis, eligendi voluptatibus, magni illum dicta rem natus facere porro! Sunt.</span> | |
<span>Esse quisquam ipsa possimus incidunt rem, molestiae nulla voluptas corrupti cum accusamus necessitatibus cupiditate amet nobis ex consectetur aut. Autem unde aliquam dolorem tenetur blanditiis? Voluptate odit saepe beatae. Quam!</span> | |
<span>Distinctio natus impedit atque! Reiciendis, dolor, consequatur architecto tempora odit beatae maxime dolore quam tempore laudantium dolorum ab quibusdam quaerat? Praesentium numquam sapiente dicta atque, assumenda commodi ducimus nesciunt dolore.</span> | |
<span>Rem nemo deserunt eos perspiciatis eligendi, dolores esse quas asperiores aut velit optio enim eum, totam voluptas id mollitia assumenda quod voluptatum dolorem vel adipisci? Vero praesentium assumenda consequuntur unde.</span> | |
<span>Deserunt repellat labore eos enim, aspernatur explicabo autem quod omnis tempore consequatur? Dolor asperiores sequi, assumenda error voluptatibus temporibus impedit natus corporis, illo non facilis tempora nesciunt! Voluptatum, aliquid error!</span> | |
<span>Cumque, laborum rerum? Culpa saepe, sed ut illum ipsum itaque dicta quae doloribus, exercitationem reiciendis vero sint porro ipsa pariatur aspernatur, hic eligendi unde minus a fugiat voluptatibus necessitatibus temporibus?</span> | |
<span>Nam quidem, nisi vel harum aliquid nulla ullam voluptas asperiores atque accusamus quasi ad excepturi. Blanditiis fugiat reprehenderit id dolorum amet, ea illo inventore sunt ut, tempore saepe, recusandae magnam.</span> | |
<span>Veniam, facilis possimus voluptatem corporis adipisci quis nostrum repudiandae iure ipsum! Labore rem ducimus, nisi distinctio dolorem dolore eveniet laborum at, deserunt dolorum dolor dicta neque ut impedit omnis aliquam!</span> | |
<span>Natus nam ipsum excepturi aperiam distinctio sequi quas, id quidem rerum? Distinctio beatae corporis ducimus quibusdam, dolores unde minus in nam et tenetur molestias officia maxime, ut ullam doloribus voluptatum!</span> | |
</span> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment