<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<link rel="stylesheet" href="menu-burger.css"/>
<title>Menu burger</title>
</head>
<body>
<header class="header">L'en-tête de page</header>
<section class="page">
<nav class="menu">
<button class="menu__button"></button>
<ul class="menu__list">
<li><a class="menu__item" href="#section1">Nullam id eros et urna hendrerit elementum.</a>
<li><a class="menu__item" href="#section2">Vestibulum ut leo porta, facilisis diam eu, feugiat eros.</a>
<li><a class="menu__item" href="#section3">Curabitur vestibulum orci eu consectetur pellentesque.</a>
<li><a class="menu__item" href="#section4">Praesent ut libero in ipsum vestibulum lacinia.</a>
<li><a class="menu__item" href="#section5">Nam dapibus ex cursus ultrices imperdiet.</a>
</ul>
</nav>
<main class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra nibh sed libero tempus, eget cursus dui auctor. Aliquam nec lectus mi. Fusce sed tortor pellentesque, ultricies enim vel, dignissim ex. Ut id turpis eget nisl placerat luctus vel et erat. Suspendisse eget venenatis risus. Sed ultrices tincidunt ligula in pretium. Mauris et magna dictum arcu pellentesque ornare ac vitae dui. Nulla suscipit commodo lectus, nec luctus nisl aliquam a. Nunc tortor ipsum, vulputate et porta id, consequat at elit. Proin non sem at enim pretium posuere in sit amet lectus. Suspendisse blandit risus nisl, quis aliquam dolor ultrices a. Ut tempor nisl quis augue tristique molestie. Quisque vel vehicula dui, sed consequat lorem. Duis nunc felis, maximus pellentesque purus id, molestie elementum quam.
<h1 id="section1">Nullam id eros et urna hendrerit elementum.</h1>
<p>Phasellus a est leo. Mauris convallis nec tortor vel pharetra. Suspendisse in viverra odio. Nullam vel pretium sapien. Nam eu dui condimentum, egestas metus in, ornare ex. Ut at feugiat arcu. Integer ultrices venenatis eros ut vehicula. Vivamus consectetur eros in hendrerit dignissim. Ut dictum mi sit amet elit tincidunt sagittis. Morbi at efficitur eros. Phasellus accumsan nisl vitae faucibus mollis. Ut libero turpis, mollis ac lectus ac, efficitur pellentesque ante. Cras sagittis vulputate metus id accumsan.
<p>Etiam vel iaculis orci. Donec consectetur lacus non leo feugiat faucibus. Vivamus volutpat quam in nibh feugiat efficitur. Pellentesque tempus neque ut ornare cursus. Ut fermentum ut orci sit amet interdum. Phasellus sollicitudin posuere massa, ut semper sapien condimentum sed. In viverra a massa eget rutrum. Fusce vitae mi ex. Sed ligula risus, vehicula nec mattis id, venenatis in urna. Morbi eu dolor vel libero feugiat dictum. Phasellus bibendum lobortis tellus nec pharetra. Donec a massa non diam finibus imperdiet sed interdum dolor. Vivamus vestibulum rutrum nunc, id malesuada justo blandit eu. Quisque dolor justo, eleifend vel tellus sit amet, tristique sollicitudin dui. Aenean nulla orci, egestas varius magna a, porttitor vulputate sapien. Suspendisse aliquam convallis felis, at fermentum erat consectetur non.
<p>Sed non lobortis lorem. Curabitur quis ex ornare, faucibus leo vel, lobortis eros. In ultricies vitae erat sit amet gravida. Mauris dignissim viverra quam ac maximus. Duis ornare ante ut tristique tempor. Morbi venenatis leo vel lacus ultricies elementum. Donec nec ipsum libero. Aliquam sem erat, pellentesque eget justo id, tincidunt varius neque. Phasellus vel cursus lorem. Praesent egestas urna quis nulla varius, vitae laoreet ante placerat. Maecenas fringilla diam felis, non posuere risus eleifend sit amet. Quisque vel nunc vulputate, aliquet sapien et, scelerisque massa.
<p>In nec luctus dolor. Aenean neque ex, lacinia in risus eget, tempus tincidunt odio. Nullam non malesuada sem, ut lobortis lacus. Aliquam rutrum elit sed mollis posuere. Nam sed sem molestie, viverra risus quis, eleifend orci. Quisque nec elit eu sem malesuada gravida a vel nunc. Donec vulputate libero eget dui aliquet dapibus. Nam facilisis nisi magna, ac fermentum arcu luctus congue. Pellentesque ultrices bibendum magna, sed ullamcorper odio fringilla imperdiet. Morbi luctus, neque eget vestibulum hendrerit, leo nibh imperdiet lacus, eu fringilla purus lacus vitae est. Nam id elit pretium elit efficitur ullamcorper imperdiet euismod ligula. Nam sagittis erat sed dui semper, ac tempus massa scelerisque. In dignissim feugiat lacus, id elementum nisl facilisis a. Curabitur feugiat fermentum tellus, sit amet sagittis ipsum dapibus at. Mauris luctus augue dui, quis tincidunt massa imperdiet in.
<h1 id="section2">Vestibulum ut leo porta, facilisis diam eu, feugiat eros.</h1>
<p>Aliquam quis sagittis risus. In condimentum risus dui, in consectetur diam finibus in. Morbi in justo lacus. Sed convallis vehicula turpis, bibendum dapibus nisi condimentum id. Vivamus sed accumsan orci. Maecenas tincidunt arcu nec massa ornare finibus. Aliquam sapien metus, consequat at eros quis, tincidunt convallis ligula. Sed libero ipsum, placerat ac tortor vel, ultrices aliquam augue. Sed a ipsum quis erat lobortis blandit. Aenean eget urna in ex pretium rhoncus at quis tortor. Nulla luctus eget sapien id sagittis.
<p>Sed vestibulum et ante ac ullamcorper. Fusce rhoncus quam vel tellus interdum, sit amet ullamcorper urna imperdiet. In hac habitasse platea dictumst. Aenean augue diam, finibus in tellus et, finibus hendrerit arcu. Fusce sit amet consectetur erat, ut suscipit dolor. Nunc at est eu nisi consectetur egestas quis et tortor. Phasellus lectus turpis, luctus eleifend erat a, iaculis condimentum lorem.
<p>Etiam sit amet ultrices nibh, eu auctor nisi. Aliquam mattis lorem et ligula posuere cursus. Etiam laoreet lectus sed ullamcorper dictum. Donec sit amet felis arcu. Nulla feugiat lacus nisl, at volutpat metus malesuada non. Curabitur ligula arcu, tristique in fermentum quis, vehicula non elit. Ut sed sem libero. Sed vehicula nisl eget eros aliquam cursus. Donec facilisis erat ut mauris finibus, et faucibus est ornare. Nunc rhoncus sem justo. Maecenas scelerisque, purus eu fringilla bibendum, enim sem tristique mi, ac interdum purus massa ut purus. Suspendisse sodales ornare nibh, eu finibus sapien. Morbi eleifend sapien et accumsan finibus. Fusce nibh dui, consectetur in metus congue, blandit sollicitudin neque. Maecenas a faucibus nisl.
<h1 id="section3">Curabitur vestibulum orci eu consectetur pellentesque.</h1>
<p>Cras id vehicula lectus. Etiam lacinia, velit ut varius scelerisque, sem magna aliquam ligula, quis sollicitudin augue nunc at quam. Suspendisse id felis nec nunc tempor accumsan vitae eget augue. Nulla finibus lacus augue, id blandit felis varius a. In sit amet dictum quam, vitae laoreet leo. Nullam tellus eros, ultrices vitae vehicula non, scelerisque nec lorem. Curabitur in est vitae felis tempor vestibulum a quis mauris. Curabitur dictum erat a erat sagittis fermentum. Mauris faucibus odio sed velit tempus rhoncus. Maecenas lacinia placerat sollicitudin.
<p>Donec ex purus, semper et pretium a, pretium non ante. Nunc vitae nulla non elit sagittis dictum. Nam in nisi tellus. Sed tempus arcu magna, sit amet porta orci venenatis a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla dignissim tincidunt hendrerit. In quis nulla eget tortor auctor sodales nec et nisl. Nam a ornare ligula, quis volutpat turpis. Pellentesque ut arcu eget diam suscipit elementum ut eu felis. Duis lorem diam, vulputate eu tortor id, vestibulum vehicula nisl. Maecenas vitae magna auctor tortor semper aliquet. Nulla sit amet ullamcorper est. Pellentesque sit amet mi dignissim, tristique urna ac, pellentesque magna. Maecenas in velit nec odio sollicitudin pretium. In ligula nibh, bibendum quis dolor ut, vehicula faucibus ex.
<p>Ut mi leo, accumsan non commodo eget, ullamcorper ac sapien. Fusce viverra consectetur varius. Morbi auctor nulla et porttitor auctor. Mauris in gravida augue. Vivamus ut risus sed justo porttitor vehicula. Etiam semper tincidunt justo, a efficitur eros aliquet tempus. Vivamus tincidunt dolor sed sollicitudin eleifend. Ut sit amet sodales arcu, in congue lectus. Nulla risus dui, fringilla ullamcorper mi a, placerat sagittis diam. Vivamus eu libero sit amet ligula porta iaculis. Fusce semper sit amet erat vitae laoreet. Quisque tincidunt, mauris vel consectetur volutpat, lorem nibh tincidunt tortor, eget viverra tortor lectus ac purus. Suspendisse vitae tellus ac nibh commodo vestibulum. Mauris consectetur pulvinar elementum. Phasellus eleifend diam ut mi ultricies gravida. Maecenas ac dolor vitae lorem mattis molestie.
<p>Integer et finibus enim, sit amet iaculis nulla. Proin ultrices felis sed ex pretium lacinia. Integer condimentum a enim vitae dignissim. Duis faucibus massa ante, nec suscipit metus molestie et. Nulla volutpat, ligula at pellentesque facilisis, nisi nisl convallis leo, eget placerat turpis risus imperdiet arcu. Donec mattis erat eget neque blandit auctor. Suspendisse vitae faucibus purus. Aenean nulla turpis, consectetur ac sollicitudin id, pellentesque non odio. Sed consequat est sem, et pellentesque sapien placerat vel. Cras sit amet lacus finibus, lobortis nunc vitae, fermentum leo. Pellentesque eget semper massa. Praesent ut sapien euismod, eleifend lacus vulputate, consectetur enim. Ut id sapien est. Pellentesque sit amet dui arcu. Donec et dolor eu velit efficitur ultricies a at sem. Curabitur dignissim vestibulum nunc, nec aliquet tellus tempor eget.
<h1 id="section4">Praesent ut libero in ipsum vestibulum lacinia.</h1>
<p>Sed quis efficitur sapien, in sodales sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed porta purus. Etiam volutpat lectus vitae imperdiet rhoncus. Duis lobortis turpis quis eros gravida aliquet. Suspendisse tincidunt erat sed sodales ultricies. Etiam vulputate dictum lobortis. Aliquam eget velit orci. Phasellus dignissim ultrices aliquet. Nullam consectetur posuere tortor, id imperdiet diam viverra sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<p>Aenean pulvinar eget justo nec aliquam. Nam id risus vehicula, lobortis libero et, finibus sapien. Fusce non urna dapibus, mattis neque non, tempus sem. Maecenas venenatis imperdiet porttitor. Suspendisse potenti. Vivamus eleifend consectetur ante vel consequat. Praesent posuere ut magna quis venenatis. Suspendisse potenti. Praesent et leo magna. Mauris vitae posuere urna. Nam sed aliquet odio, quis mollis mi. Donec iaculis ligula vel ultrices gravida. Pellentesque rutrum risus in nisl dictum cursus. Curabitur pellentesque sem a tellus semper volutpat. Sed porta risus sollicitudin faucibus cursus. Phasellus bibendum ipsum eget tempor vestibulum.
<p>Etiam et lectus vel lectus euismod semper. Quisque nec nisi vitae ipsum luctus varius. Duis quis arcu sit amet tortor consequat auctor. In congue pulvinar neque. Integer erat neque, vulputate id elementum ac, pretium ut sapien. Nulla facilisi. Pellentesque bibendum urna vel erat maximus venenatis.
<p>Donec risus est, sodales sed malesuada et, tristique non metus. Integer lacinia dapibus ex vel luctus. Phasellus consectetur enim ac dolor finibus, a accumsan dolor placerat. Aenean id vulputate lectus. Fusce ultrices, felis posuere ultricies pulvinar, lorem erat egestas enim, nec tincidunt est erat ac odio. In rutrum purus mauris, id aliquam lectus mollis eu. Integer consectetur quis sem id interdum. Integer molestie iaculis massa sit amet dictum. Nulla laoreet, elit vitae auctor mattis, ante justo rutrum eros, non mattis est orci a lectus. Cras ac bibendum erat, quis malesuada nunc. Aliquam at mauris eu justo vehicula fermentum sit amet sed nulla. Suspendisse non massa tristique, aliquet nisl in, sollicitudin nibh. Sed pulvinar vitae eros id tempus. Sed facilisis luctus luctus.
<h1 id="section5">Nam dapibus ex cursus ultrices imperdiet.</h1>
<p>Donec consectetur feugiat turpis, at sagittis tellus pellentesque sit amet. Ut dignissim rhoncus mi, sit amet mattis nunc viverra quis. Vivamus ut fermentum mi. Ut augue purus, tristique at elementum sed, tincidunt ac est. Cras sem erat, rutrum id mauris eget, vestibulum iaculis magna. In fermentum nisl a ex posuere dignissim. Vivamus in ex feugiat nunc condimentum bibendum quis sit amet nibh.
<p>Quisque semper lorem ut euismod sollicitudin. Duis sit amet tristique nunc, in tempus ex. In et convallis eros. Phasellus iaculis eros a velit vulputate suscipit. Vestibulum rhoncus tortor elit, in accumsan nibh fringilla a. Aliquam sed arcu tempor, pulvinar erat varius, tincidunt odio. Maecenas blandit turpis vitae ligula lobortis condimentum eu in libero. Aenean in tempor justo. Aliquam vehicula auctor magna, quis pellentesque sem laoreet quis. Maecenas ante ligula, aliquet ac ornare ut, pharetra ut magna. Integer rhoncus placerat convallis. Sed ut dui sit amet purus ornare fringilla nec at purus. Fusce at cursus eros. Sed massa eros, fermentum nec bibendum non, volutpat ut massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget lacus in sapien consectetur blandit a id metus.
<p>Ut in nisl felis. In tristique risus ipsum, nec vehicula felis rhoncus nec. Quisque sagittis nisi eu tincidunt facilisis. Sed felis ex, pretium eu metus et, sollicitudin facilisis ante. Quisque eget dignissim enim. Praesent vitae pretium velit, fermentum ultricies mi. Aenean suscipit scelerisque scelerisque. Mauris quis mauris in diam finibus venenatis. Nullam eget ligula scelerisque dui fringilla finibus. Morbi at eleifend eros. Maecenas suscipit pharetra consectetur.
<p>Donec posuere a massa nec laoreet. Etiam volutpat placerat enim sit amet tempor. Vivamus ullamcorper at nisi condimentum finibus. Nulla dignissim consequat erat, vel ornare orci. Maecenas blandit elit sed aliquam ullamcorper. Fusce erat leo, semper sit amet dolor at, consequat aliquet lorem. In convallis finibus feugiat. Quisque volutpat dapibus sapien non fermentum. Praesent eu odio ac ligula bibendum mattis quis vitae tortor. Curabitur non eleifend elit. Vestibulum sed mattis quam. Mauris sed nibh maximus quam efficitur scelerisque non vel massa. Morbi pellentesque nisl vel elit tristique viverra. Morbi lorem quam, pellentesque ut tincidunt vitae, sagittis quis odio. Morbi risus mauris, cursus ac massa sed, placerat pulvinar lacus. Nullam mattis varius dolor a semper.
</main>
</section>
<footer class="footer">Le pied de page</footer>
</body>
</html>