Back to frontpage
Hét vraag- en antwoordplatform van Nederland

hoe laat ik html code zien, zonder dat het wat doet?

Ik wil iemand een stukje "naakte" html code emailen. Probleem is dat de code bij aankomst uiteraard is geformatteerd en het eindresultaat al te zien is. Ik wil zowel het eindresultaat alswel de code laten zien.
Heb het al geprobeerd tussen

en <textarea> tags te zetten maar dat werkt niet...<br/><br/>Hoe doe ik dit? </p> <div class="h-[calc(0.75rem_-_1px)] relative text-gray-300 !mt-2 sm:!mt-3"> <div class="absolute left-0 h-[0.75rem] w-[calc(7%_+_1px)] border-b border-current"></div> <div class="absolute left-[7%] bottom-0 h-[0.75rem] w-[0.75rem] border-t border-l border-current rotate-45 translate-y-[calc(0.375rem)] translate-x-[calc(0.155rem_+_1px)]" > </div> <div class="absolute right-0 h-3 w-[calc(93%_-_1.06rem)] border-b border-current"></div> </div> <div> <div class="stack-x space-x-3 justify-between | text-xs "> <div class="stack-x space-x-3 sm:space-x-4"> <span class="icon default-avatar | w-10 h-10 text-current"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1000 1000"><path d="M599.8 375.6c-10.2 0-22.6 2.5-37.1 5.3-18.7 3.8-39.9 8-62.8 8-22.8 0-44-4.2-62.7-8-14.4-2.8-26.8-5.3-37-5.3-11.9 0-28.3 0-28.3 51.1 0 85.7 39.6 172.1 128 172.1S628 512.4 628 426.7c.1-51.1-16.3-51.1-28.2-51.1zM500 557.2c-44.2 0-57.2-42.9-57.2-42.9h114.3c.1 0-12.9 42.9-57.1 42.9zm-65.5 48v71.1c39.2 17.9 84.6 17.8 123.6 0v-67.1c-17.6 8.4-37 13.2-58.1 13.2-24.1 0-46-6.3-65.5-17.2z"/><path d="M500 10C229.4 10 10 229.4 10 500s219.4 490 490 490 490-219.4 490-490S770.6 10 500 10zM264.6 757.3s51.8-55.6 146.4-80.1v-43.6h-79.1c0-137.9-19.5-160.8-19.5-206.9 0-101.5 61.8-183.9 187.6-183.9 125.7 0 187.6 82.4 187.6 183.9 0 49.1-19.4 72.5-19.4 206.9h-86.6v41.9c99.1 23.5 153.8 81.8 153.8 81.8H264.6z"/></svg></span> <div class="stack-y space-y-0 justify-center"> <div class="text-wrap"> <span class="italic text-current opacity-70">Verwijderde gebruiker</span> <span class="!ml-1"> </span> </div> <div class="opacity-light"> 12 jaar geleden </div> <div> <span class="opacity-light">in: </span> <a href="/v/computers-internet/programmeren/" class="text-primary">Programmeren</a> </div> </div> </div> <div class="stack-x items-center | min-w-fit last:children:!-mr-2.5"> <div class="stack-x space-x-2.5 | min-w-fit text-xs text-gray-600 p-2.5"> <div class="inline-block sm:hidden"> <span>1.1K</span> </div> <div class="hidden sm:inline-block !ml-0"> <span> 1.1K keer bekeken </span> </div> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style="fill:none;stroke:currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg> </span> </div> <button class="block-footer-button min-w-fit children:active:opacity-80" x-on:click="commentsOpened=!commentsOpened" > <div class="stack-x space-x-2.5"> <span class="hidden sm:inline-block"> 0 reacties </span> <span class="inline-block sm:hidden !ml-0"> 0 </span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl cursor-pointer" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12c0 4.418-4.03 8-9 8a9.862 9.862 0 0 1-4.255-.95L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8Z"/></svg> </span> </div> </button> <div class="relative !-ml-2.5" x-data="Dropdown" @keydown.escape.prevent.stop="close($refs.button)" @focusin.window="! $refs.panel.contains($event.target) && close()" x-id="['dropdown']" > <button class="more-button w-9 h-9 py-1.5 " type="button" title="Meer" x-ref="button" :aria-expanded="open" :aria-controls="$id('dropdown')" @click.prevent="toggle()" > <span aria-hidden="true" class="icon inline-block box-content px-3 w-6 h-6" > <svg xmlns="http://www.w3.org/2000/svg" width="16" height="24" viewBox="0 0 16 24"><path d="M8 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2Zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg> </span> </button> <div class="absolute -right-3 -bottom-3" x-show="open" x-cloak > <div class="more-dropdown-content dropdown-arrow-top absolute right-2 min-w-max py-1.5 bg-white text-sm border border-gray-200 rounded-sm shadow-lg z-50" x-ref="panel" :id="$id('dropdown')" @click.outside="close($refs.button)" > <ul x-data="{ ...QuestionDropdownPanel(), 'UserInfo': UserInfo() }" > <li> <a class="stack-x | w-full py-1.5 px-5 text-gray-800 hover:bg-gray-50 transition-[background-color] duration-150 ease-out" href="https://www.facebook.com/sharer.php?u=https://www.startpagina.nl/v/computers-internet/programmeren/vraag/324811/laat-html-code//&caption=Startpagina%20Goeievraag" target="_blank" x-show="!isMobileOrTablet" > <span class="grow inline-block text-left text-sm select-none">Deel op Facebook</span> <span aria-hidden="true" class="icon inline-block w-5 h-5 ml-4 text-gray-500" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"/></svg> </span> </a> </li> <li> <a class="stack-x | w-full py-1.5 px-5 text-gray-800 hover:bg-gray-50 transition-[background-color] duration-150 ease-out" href="https://twitter.com/share?text=hoe laat ik html code zien, zonder dat het wat doet?&hashtags=dtv&url=https://www.startpagina.nl/v/computers-internet/programmeren/vraag/324811/laat-html-code/" target="_blank" x-show="!isMobileOrTablet" > <span class="grow inline-block text-left text-sm select-none">Deel op Twitter</span> <span aria-hidden="true" class="icon inline-block w-5 h-5 ml-4 text-gray-500" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/></svg> </span> </a> </li> <li> <a class="stack-x | w-full py-1.5 px-5 text-gray-800 hover:bg-gray-50 transition-[background-color] duration-150 ease-out" href="https://api.whatsapp.com/send?text=https://www.startpagina.nl/v/computers-internet/programmeren/vraag/324811/laat-html-code/" target="_blank" x-show="! isMobileOrTablet" > <span class="grow inline-block text-left text-sm select-none">Deel op WhatsApp</span> <span aria-hidden="true" class="icon inline-block w-5 h-5 ml-4 text-gray-500" > <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M19.05 4.91A9.816 9.816 0 0 0 12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01zm-7.01 15.24c-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.264 8.264 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.24-8.24 2.2 0 4.27.86 5.82 2.42a8.183 8.183 0 0 1 2.41 5.83c.02 4.54-3.68 8.23-8.22 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.12-.17.25-.64.81-.78.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43s.17-.25.25-.41c.08-.17.04-.31-.02-.43s-.56-1.34-.76-1.84c-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31-.22.25-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.14-1.18s-.22-.16-.47-.28z"/></svg> </span> </a> </li> <li> <button class="stack-x | w-full py-1.5 px-5 text-gray-800 hover:bg-gray-50 transition-[background-color] duration-150 ease-out" @click="shareOnMobileOrTablet('https://www.startpagina.nl/v/computers-internet/programmeren/vraag/324811/laat-html-code/', 'hoe laat ik html code zien, zonder dat het wat doet?', 'Startpagina Goeievraag') && close();" x-show="isMobileOrTablet" > <span class="grow inline-block text-left text-sm select-none">Delen</span> <span aria-hidden="true" class="icon inline-block w-5 h-5 ml-4 text-gray-500" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"><path fill="none" d="M0 0h24v24H0z"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg> </span> </button> </li> <input type="hidden" name="csrfmiddlewaretoken" :value="window.appConfig.csrf_token" /> </ul> </div> </div> </div> </div> </div> <div class="!mt-4" x-cloak x-show="commentsOpened==true"> <div x-data="{ 'UserInfo': UserInfo() }" > <div class="stack-y space-y-3 mb-4"> </div> <p class="ml-14 mb-3 text-xs italic"> Heb je meer informatie nodig om de vraag te beantwoorden? Reageer dan hier. </p> <div class="mb-1" id="addComment"> <div class="stack-x space-x-3 items-center | relative" x-data="AddComment" > <div class="min-w-fit"> <img class="w-10 h-10 rounded-full" aria-hidden="true" :src="UserInfo.avatarUrl" x-show="UserInfo.avatarUrl" > <span class="icon default-avatar | w-10 h-10 text-current" x-show="!UserInfo.avatarUrl" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1000 1000"><path d="M599.8 375.6c-10.2 0-22.6 2.5-37.1 5.3-18.7 3.8-39.9 8-62.8 8-22.8 0-44-4.2-62.7-8-14.4-2.8-26.8-5.3-37-5.3-11.9 0-28.3 0-28.3 51.1 0 85.7 39.6 172.1 128 172.1S628 512.4 628 426.7c.1-51.1-16.3-51.1-28.2-51.1zM500 557.2c-44.2 0-57.2-42.9-57.2-42.9h114.3c.1 0-12.9 42.9-57.1 42.9zm-65.5 48v71.1c39.2 17.9 84.6 17.8 123.6 0v-67.1c-17.6 8.4-37 13.2-58.1 13.2-24.1 0-46-6.3-65.5-17.2z"/><path d="M500 10C229.4 10 10 229.4 10 500s219.4 490 490 490 490-219.4 490-490S770.6 10 500 10zM264.6 757.3s51.8-55.6 146.4-80.1v-43.6h-79.1c0-137.9-19.5-160.8-19.5-206.9 0-101.5 61.8-183.9 187.6-183.9 125.7 0 187.6 82.4 187.6 183.9 0 49.1-19.4 72.5-19.4 206.9h-86.6v41.9c99.1 23.5 153.8 81.8 153.8 81.8H264.6z"/></svg> </span> </div> <form id="addCommentForm" method="post" action="/v/programmeren/324811/laat-html-code/comment/" class="grow stack-x space-x-2 items-center" x-ref="form" > <textarea name="text" placeholder="Voeg een reactie toe..." maxlength="5000" rows="1" class="grow ml-1 h-9 w-40 py-1.5 border border-gray-300 rounded-md overflow-hidden" x-validate.silent="required, minLength:10" x-auto-grow></textarea> <button type="button" class="button-filled w-9 h-9 rounded-full sm:w-auto sm:rounded-md text-sm" :disabled="isLoading" @click="addComment" > <span class="hidden sm:block">Voeg reactie toe</span> <span aria-hidden="true" class="icon inline-block w-4 h-4 block sm:hidden" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg> </span> </button> </form> </div> </div> </div> </div> </div> </article> </div> </div> <div class=" bg-body-container border-gray-200 px-4 h-2 border-b sm:px-5 sm:border-0 sm:rounded-b-md"> </div> </div> </div> <div > <div class=" text-on-body-container relative sm:shadow sm:shadow-gray-400/80 sm:rounded-md"> <div class="bg-body-container border-gray-200 | pt-4 px-4 sm:pt-5 sm:px-5 sm:border-0 sm:rounded-t-md pb-4"> <h2 class="text-on-body-container block-header" x-ref="block_header"> Antwoorden&nbsp;(7) </h2> </div> <div class="bg-transparent border-gray-200 px-4 -mb-2 border-b sm:px-5 sm:border-0 sm:rounded-b-md " > <div class="animate-new-items space-y-3 | divide-y divide-y-bottom divide-y-bottom-gray-300 sm:space-y-0 sm:divide-y-bottom-0 children:-mx-4 children:px-4 sm:children:-mx-5 sm:children:px-5" > <div class="answer stack-y space-y-3 | pb-2.5 sm:pb-3 pt-3.5 sm:pt-5 bg-body-container last:rounded-b-lg" x-data="{ ...Answer(), 'UserInfo': UserInfo() }" @show-comment.window="showLastComment" @open-comments-panel.window="openCommentsPanel" @show-answer.window="showAnswer" data-answer-id="1249816" data-author-id="267717" data-entity-type="answer" > <div class="stack-y space-y-6" x-data="{ collapsed: true }" x-init="collapsed = ($refs.answertext.scrollHeight > $refs.answertext.clientHeight);" x-bind:class="collapsed ? 'hover:cursor-pointer':''" > <div class="relative"> <div class="user-content line-clamp-6 sm:line-clamp-8" x-ref="answertext" x-on:click="collapsed = false" x-bind:class="collapsed ? 'hover:opacity-80': 'line-clamp-none sm:line-clamp-none'"> Dan zet je in plaats van < &lt; en in plaats van > &gt;<br/>Als dat niet werkt dan de alttoets ingedrukt houden en voor < 0139 typen en voor > 0155 </div> <a role="button" class="readmore-overlay | absolute bottom-0 right-0 px-2 py-0.5 text-sm z-30" x-cloak x-show="collapsed == true" x-on:click="collapsed = false"> (Lees meer...) </a> </div> </div> <div class="h-[calc(0.75rem_-_1px)] relative text-gray-300 !mt-1 sm:!mt-3"> <div class="absolute left-0 h-[0.75rem] w-[calc(7%_+_1px)] border-b border-current"></div> <div class="absolute left-[7%] bottom-0 h-[0.75rem] w-[0.75rem] border-t border-l border-current rotate-45 translate-y-[calc(0.375rem)] translate-x-[calc(0.155rem_+_1px)]" > </div> <div class="absolute right-0 h-3 w-[calc(93%_-_1.06rem)] border-b border-current"></div> </div> <div class="stack-x space-x-3 justify-between | text-xs"> <div class="stack-x space-x-3 sm:space-x-4"> <span class="icon default-avatar | w-10 h-10 text-current"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1000 1000"><path d="M599.8 375.6c-10.2 0-22.6 2.5-37.1 5.3-18.7 3.8-39.9 8-62.8 8-22.8 0-44-4.2-62.7-8-14.4-2.8-26.8-5.3-37-5.3-11.9 0-28.3 0-28.3 51.1 0 85.7 39.6 172.1 128 172.1S628 512.4 628 426.7c.1-51.1-16.3-51.1-28.2-51.1zM500 557.2c-44.2 0-57.2-42.9-57.2-42.9h114.3c.1 0-12.9 42.9-57.1 42.9zm-65.5 48v71.1c39.2 17.9 84.6 17.8 123.6 0v-67.1c-17.6 8.4-37 13.2-58.1 13.2-24.1 0-46-6.3-65.5-17.2z"/><path d="M500 10C229.4 10 10 229.4 10 500s219.4 490 490 490 490-219.4 490-490S770.6 10 500 10zM264.6 757.3s51.8-55.6 146.4-80.1v-43.6h-79.1c0-137.9-19.5-160.8-19.5-206.9 0-101.5 61.8-183.9 187.6-183.9 125.7 0 187.6 82.4 187.6 183.9 0 49.1-19.4 72.5-19.4 206.9h-86.6v41.9c99.1 23.5 153.8 81.8 153.8 81.8H264.6z"/></svg></span> <div class="stack-y space-y-0 justify-center"> <div class="text-wrap"> <span class="italic text-current opacity-70">Verwijderde gebruiker</span> <span class="!ml-1"> </span> </div> <div class="opacity-light"> 12 jaar geleden </div> </div> </div> <div class="stack-x stack-x-0 items-center min-w-fit"> <div class="stack-x min-w-fit" x-data="VoteButtons" data-answer-id="1249816" data-votes-up="2" data-votes-down="1" data-url-up="/v/programmeren/324811/laat-html-code/1249816/thumb_up/" data-url-down="/v/programmeren/324811/laat-html-code/1249816/thumb_down/" > <button class="block-footer-button min-w-fit" :disabled="votingPaused" @click="vote('up')" > <div class="stack-x space-x-2.5" x-show="!hasUserVotedUp"> <span x-text="votesUp">2</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14.5 8.5h4.764a2 2 0 0 1 1.789 2.894l-3.5 7a2 2 0 0 1-1.79 1.106h-4.017c-.163 0-.326-.02-.485-.06L7.5 18.5m7-10v-5a2 2 0 0 0-2-2h-.095c-.5 0-.905.405-.905.905a3.61 3.61 0 0 1-.608 2.006L7.5 9.5v9m7-10h-2m-5 10h-2a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2H8"/></svg> </span> </div> <div class="stack-x space-x-2.5" x-show="hasUserVotedUp" x-cloak> <span x-text="votesUp">2</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 20 20"><path d="M2 8.5a1.5 1.5 0 1 1 3 0v6a1.5 1.5 0 0 1-3 0zm4-.167v5.43a2 2 0 0 0 1.106 1.79l.05.025A4 4 0 0 0 8.943 16h5.416a2 2 0 0 0 1.962-1.608l1.2-6A2 2 0 0 0 15.56 6H12V2a2 2 0 0 0-2-2 1 1 0 0 0-1 1v.667a4 4 0 0 1-.8 2.4L6.8 5.933a4 4 0 0 0-.8 2.4Z"/></svg> </span> </div> <input type="hidden" name="csrfmiddlewaretoken" :value="window.appConfig.csrf_token" /> </button> <button class="block-footer-button min-w-fit" :disabled="votingPaused" @click="vote('down')" > <div class="stack-x space-x-2.5" x-show="!hasUserVotedDown"> <span x-text="votesDown">1</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m14.508 15.994 4.764-.013c1.487-.004 2.449-1.57 1.781-2.899l-3.519-6.99a2 2 0 0 0-1.792-1.101L11.724 5c-.164 0-.325.021-.484.062l-3.758.95m7.027 9.98.013 5A2 2 0 0 1 12.528 23h-.096a.905.905 0 0 1-.908-.901 3.616 3.616 0 0 0-.613-2.006l-3.406-5.08-.024-9m7.027 9.982-2 .005M7.481 6.013l-2 .005a2 2 0 0 0-1.994 2.006l.016 6a2 2 0 0 0 2.005 1.994l2.5-.007"/></svg> </span> </div> <div class="stack-x space-x-2.5" x-show="hasUserVotedDown" x-cloak> <span x-text="votesDown">1</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m14.508 15.994 4.764-.013c1.487-.004 2.449-1.57 1.781-2.899l-3.519-6.99a2 2 0 0 0-1.792-1.101L11.724 5c-.164 0-.325.021-.484.062l-3.758.95m7.027 9.98.013 5A2 2 0 0 1 12.528 23h-.096a.905.905 0 0 1-.908-.901 3.616 3.616 0 0 0-.613-2.006l-3.406-5.08-.024-9m7.027 9.982-2 .005M7.481 6.013l-2 .005a2 2 0 0 0-1.994 2.006l.016 6a2 2 0 0 0 2.005 1.994l2.5-.007"/></svg> </span> </div> </button> <input type="hidden" name="csrfmiddlewaretoken" :value="window.appConfig.csrf_token" /> </div> <button class="block-footer-button min-w-fit children:active:opacity-80" x-on:click="commentsOpened=!commentsOpened" :class="!UserInfo.isAuthenticated ? '-mr-2.5' : ''" > <div class="stack-x space-x-2.5"> <span class="hidden sm:inline-block"> 1 reacties </span> <span class="inline-block sm:hidden !ml-0"> 1 </span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl cursor-pointer" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12c0 4.418-4.03 8-9 8a9.862 9.862 0 0 1-4.255-.95L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8Z"/></svg> </span> </div> </button> </div> </div> <div class="!mt-4" x-cloak x-show="commentsOpened==true"> <div x-data="{ 'UserInfo': UserInfo() }" > <div class="stack-y space-y-3 mb-4"> <div class="stack-x space-x-3 | relative " id="1229703" x-data="{ moreOpened: false }" data-entity-type="comment" > <div class="mt-3 min-w-fit"> <span class="icon default-avatar | w-10 h-10 text-current"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1000 1000"><path d="M599.8 375.6c-10.2 0-22.6 2.5-37.1 5.3-18.7 3.8-39.9 8-62.8 8-22.8 0-44-4.2-62.7-8-14.4-2.8-26.8-5.3-37-5.3-11.9 0-28.3 0-28.3 51.1 0 85.7 39.6 172.1 128 172.1S628 512.4 628 426.7c.1-51.1-16.3-51.1-28.2-51.1zM500 557.2c-44.2 0-57.2-42.9-57.2-42.9h114.3c.1 0-12.9 42.9-57.1 42.9zm-65.5 48v71.1c39.2 17.9 84.6 17.8 123.6 0v-67.1c-17.6 8.4-37 13.2-58.1 13.2-24.1 0-46-6.3-65.5-17.2z"/><path d="M500 10C229.4 10 10 229.4 10 500s219.4 490 490 490 490-219.4 490-490S770.6 10 500 10zM264.6 757.3s51.8-55.6 146.4-80.1v-43.6h-79.1c0-137.9-19.5-160.8-19.5-206.9 0-101.5 61.8-183.9 187.6-183.9 125.7 0 187.6 82.4 187.6 183.9 0 49.1-19.4 72.5-19.4 206.9h-86.6v41.9c99.1 23.5 153.8 81.8 153.8 81.8H264.6z"/></svg></span> </div> <div class="grow stack-x text-green-980 "> <div class="stack-y space-y-2 | w-full relative ml-1 px-4 py-3 rounded-md bg-gray-75"> <div class="flex flex-row justify-between flex-wrap | text-xs"> <div class="text-wrap | font-bold "> <span> <span class="italic text-current opacity-70">Verwijderde gebruiker</span> </span> </div> <div class="min-w-fit text-xs opacity-80"> 12 jaar geleden </div> </div> <div class="text-on-body whitespace-pre-line user-content">Inderdaad dat klopt</div> <div class="border-r-gray-75 | absolute w-0 h-0 !mt-0 border-t-[14px] border-t-transparent border-b-[14px] border-b-transparent border-r-[20px] right-[calc(100%_-_6px)] top-[2em] translate-y-[-50%]"> </div> </div> </div> </div> </div> <div class="mb-1" id="addComment"> <div class="stack-x space-x-3 items-center | relative" x-data="AddComment" > <div class="min-w-fit"> <img class="w-10 h-10 rounded-full" aria-hidden="true" :src="UserInfo.avatarUrl" x-show="UserInfo.avatarUrl" > <span class="icon default-avatar | w-10 h-10 text-current" x-show="!UserInfo.avatarUrl" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1000 1000"><path d="M599.8 375.6c-10.2 0-22.6 2.5-37.1 5.3-18.7 3.8-39.9 8-62.8 8-22.8 0-44-4.2-62.7-8-14.4-2.8-26.8-5.3-37-5.3-11.9 0-28.3 0-28.3 51.1 0 85.7 39.6 172.1 128 172.1S628 512.4 628 426.7c.1-51.1-16.3-51.1-28.2-51.1zM500 557.2c-44.2 0-57.2-42.9-57.2-42.9h114.3c.1 0-12.9 42.9-57.1 42.9zm-65.5 48v71.1c39.2 17.9 84.6 17.8 123.6 0v-67.1c-17.6 8.4-37 13.2-58.1 13.2-24.1 0-46-6.3-65.5-17.2z"/><path d="M500 10C229.4 10 10 229.4 10 500s219.4 490 490 490 490-219.4 490-490S770.6 10 500 10zM264.6 757.3s51.8-55.6 146.4-80.1v-43.6h-79.1c0-137.9-19.5-160.8-19.5-206.9 0-101.5 61.8-183.9 187.6-183.9 125.7 0 187.6 82.4 187.6 183.9 0 49.1-19.4 72.5-19.4 206.9h-86.6v41.9c99.1 23.5 153.8 81.8 153.8 81.8H264.6z"/></svg> </span> </div> <form id="addCommentForm" method="post" action="/v/programmeren/324811/laat-html-code/comment/answer/1249816/" class="grow stack-x space-x-2 items-center" x-ref="form" > <textarea name="text" placeholder="Voeg een reactie toe..." maxlength="5000" rows="1" class="grow ml-1 h-9 w-40 py-1.5 border border-gray-300 rounded-md overflow-hidden" x-validate.silent="required, minLength:10" x-auto-grow></textarea> <button type="button" class="button-filled w-9 h-9 rounded-full sm:w-auto sm:rounded-md text-sm" :disabled="isLoading" @click="addComment" > <span class="hidden sm:block">Voeg reactie toe</span> <span aria-hidden="true" class="icon inline-block w-4 h-4 block sm:hidden" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg> </span> </button> </form> </div> </div> </div> </div> </div> <div class="answer stack-y space-y-3 | pb-2.5 sm:pb-3 pt-3.5 sm:pt-5 bg-body-container last:rounded-b-lg" x-data="{ ...Answer(), 'UserInfo': UserInfo() }" @show-comment.window="showLastComment" @open-comments-panel.window="openCommentsPanel" @show-answer.window="showAnswer" data-answer-id="1249817" data-author-id="267717" data-entity-type="answer" > <div class="stack-y space-y-6" x-data="{ collapsed: true }" x-init="collapsed = ($refs.answertext.scrollHeight > $refs.answertext.clientHeight);" x-bind:class="collapsed ? 'hover:cursor-pointer':''" > <div class="relative"> <div class="user-content line-clamp-6 sm:line-clamp-8" x-ref="answertext" x-on:click="collapsed = false" x-bind:class="collapsed ? 'hover:opacity-80': 'line-clamp-none sm:line-clamp-none'"> Wat dan denk ik het makkelijkste werkt, is de 'naakte' code even plakken op www.pastebin.com en de link van het bestand in de mail plakken. </div> <a role="button" class="readmore-overlay | absolute bottom-0 right-0 px-2 py-0.5 text-sm z-30" x-cloak x-show="collapsed == true" x-on:click="collapsed = false"> (Lees meer...) </a> </div> </div> <div class="h-[calc(0.75rem_-_1px)] relative text-gray-300 !mt-1 sm:!mt-3"> <div class="absolute left-0 h-[0.75rem] w-[calc(7%_+_1px)] border-b border-current"></div> <div class="absolute left-[7%] bottom-0 h-[0.75rem] w-[0.75rem] border-t border-l border-current rotate-45 translate-y-[calc(0.375rem)] translate-x-[calc(0.155rem_+_1px)]" > </div> <div class="absolute right-0 h-3 w-[calc(93%_-_1.06rem)] border-b border-current"></div> </div> <div class="stack-x space-x-3 justify-between | text-xs"> <div class="stack-x space-x-3 sm:space-x-4"> <span class="icon default-avatar | w-10 h-10 text-current"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1000 1000"><path d="M599.8 375.6c-10.2 0-22.6 2.5-37.1 5.3-18.7 3.8-39.9 8-62.8 8-22.8 0-44-4.2-62.7-8-14.4-2.8-26.8-5.3-37-5.3-11.9 0-28.3 0-28.3 51.1 0 85.7 39.6 172.1 128 172.1S628 512.4 628 426.7c.1-51.1-16.3-51.1-28.2-51.1zM500 557.2c-44.2 0-57.2-42.9-57.2-42.9h114.3c.1 0-12.9 42.9-57.1 42.9zm-65.5 48v71.1c39.2 17.9 84.6 17.8 123.6 0v-67.1c-17.6 8.4-37 13.2-58.1 13.2-24.1 0-46-6.3-65.5-17.2z"/><path d="M500 10C229.4 10 10 229.4 10 500s219.4 490 490 490 490-219.4 490-490S770.6 10 500 10zM264.6 757.3s51.8-55.6 146.4-80.1v-43.6h-79.1c0-137.9-19.5-160.8-19.5-206.9 0-101.5 61.8-183.9 187.6-183.9 125.7 0 187.6 82.4 187.6 183.9 0 49.1-19.4 72.5-19.4 206.9h-86.6v41.9c99.1 23.5 153.8 81.8 153.8 81.8H264.6z"/></svg></span> <div class="stack-y space-y-0 justify-center"> <div class="text-wrap"> <span class="italic text-current opacity-70">Verwijderde gebruiker</span> <span class="!ml-1"> </span> </div> <div class="opacity-light"> 12 jaar geleden </div> </div> </div> <div class="stack-x stack-x-0 items-center min-w-fit"> <div class="stack-x min-w-fit" x-data="VoteButtons" data-answer-id="1249817" data-votes-up="1" data-votes-down="1" data-url-up="/v/programmeren/324811/laat-html-code/1249817/thumb_up/" data-url-down="/v/programmeren/324811/laat-html-code/1249817/thumb_down/" > <button class="block-footer-button min-w-fit" :disabled="votingPaused" @click="vote('up')" > <div class="stack-x space-x-2.5" x-show="!hasUserVotedUp"> <span x-text="votesUp">1</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14.5 8.5h4.764a2 2 0 0 1 1.789 2.894l-3.5 7a2 2 0 0 1-1.79 1.106h-4.017c-.163 0-.326-.02-.485-.06L7.5 18.5m7-10v-5a2 2 0 0 0-2-2h-.095c-.5 0-.905.405-.905.905a3.61 3.61 0 0 1-.608 2.006L7.5 9.5v9m7-10h-2m-5 10h-2a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2H8"/></svg> </span> </div> <div class="stack-x space-x-2.5" x-show="hasUserVotedUp" x-cloak> <span x-text="votesUp">1</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 20 20"><path d="M2 8.5a1.5 1.5 0 1 1 3 0v6a1.5 1.5 0 0 1-3 0zm4-.167v5.43a2 2 0 0 0 1.106 1.79l.05.025A4 4 0 0 0 8.943 16h5.416a2 2 0 0 0 1.962-1.608l1.2-6A2 2 0 0 0 15.56 6H12V2a2 2 0 0 0-2-2 1 1 0 0 0-1 1v.667a4 4 0 0 1-.8 2.4L6.8 5.933a4 4 0 0 0-.8 2.4Z"/></svg> </span> </div> <input type="hidden" name="csrfmiddlewaretoken" :value="window.appConfig.csrf_token" /> </button> <button class="block-footer-button min-w-fit" :disabled="votingPaused" @click="vote('down')" > <div class="stack-x space-x-2.5" x-show="!hasUserVotedDown"> <span x-text="votesDown">1</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m14.508 15.994 4.764-.013c1.487-.004 2.449-1.57 1.781-2.899l-3.519-6.99a2 2 0 0 0-1.792-1.101L11.724 5c-.164 0-.325.021-.484.062l-3.758.95m7.027 9.98.013 5A2 2 0 0 1 12.528 23h-.096a.905.905 0 0 1-.908-.901 3.616 3.616 0 0 0-.613-2.006l-3.406-5.08-.024-9m7.027 9.982-2 .005M7.481 6.013l-2 .005a2 2 0 0 0-1.994 2.006l.016 6a2 2 0 0 0 2.005 1.994l2.5-.007"/></svg> </span> </div> <div class="stack-x space-x-2.5" x-show="hasUserVotedDown" x-cloak> <span x-text="votesDown">1</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m14.508 15.994 4.764-.013c1.487-.004 2.449-1.57 1.781-2.899l-3.519-6.99a2 2 0 0 0-1.792-1.101L11.724 5c-.164 0-.325.021-.484.062l-3.758.95m7.027 9.98.013 5A2 2 0 0 1 12.528 23h-.096a.905.905 0 0 1-.908-.901 3.616 3.616 0 0 0-.613-2.006l-3.406-5.08-.024-9m7.027 9.982-2 .005M7.481 6.013l-2 .005a2 2 0 0 0-1.994 2.006l.016 6a2 2 0 0 0 2.005 1.994l2.5-.007"/></svg> </span> </div> </button> <input type="hidden" name="csrfmiddlewaretoken" :value="window.appConfig.csrf_token" /> </div> <button class="block-footer-button min-w-fit children:active:opacity-80" x-on:click="commentsOpened=!commentsOpened" :class="!UserInfo.isAuthenticated ? '-mr-2.5' : ''" > <div class="stack-x space-x-2.5"> <span class="hidden sm:inline-block"> 0 reacties </span> <span class="inline-block sm:hidden !ml-0"> 0 </span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl cursor-pointer" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12c0 4.418-4.03 8-9 8a9.862 9.862 0 0 1-4.255-.95L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8Z"/></svg> </span> </div> </button> </div> </div> <div class="!mt-4" x-cloak x-show="commentsOpened==true"> <div x-data="{ 'UserInfo': UserInfo() }" > <div class="stack-y space-y-3 mb-4"> </div> <div class="mb-1" id="addComment"> <div class="stack-x space-x-3 items-center | relative" x-data="AddComment" > <div class="min-w-fit"> <img class="w-10 h-10 rounded-full" aria-hidden="true" :src="UserInfo.avatarUrl" x-show="UserInfo.avatarUrl" > <span class="icon default-avatar | w-10 h-10 text-current" x-show="!UserInfo.avatarUrl" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1000 1000"><path d="M599.8 375.6c-10.2 0-22.6 2.5-37.1 5.3-18.7 3.8-39.9 8-62.8 8-22.8 0-44-4.2-62.7-8-14.4-2.8-26.8-5.3-37-5.3-11.9 0-28.3 0-28.3 51.1 0 85.7 39.6 172.1 128 172.1S628 512.4 628 426.7c.1-51.1-16.3-51.1-28.2-51.1zM500 557.2c-44.2 0-57.2-42.9-57.2-42.9h114.3c.1 0-12.9 42.9-57.1 42.9zm-65.5 48v71.1c39.2 17.9 84.6 17.8 123.6 0v-67.1c-17.6 8.4-37 13.2-58.1 13.2-24.1 0-46-6.3-65.5-17.2z"/><path d="M500 10C229.4 10 10 229.4 10 500s219.4 490 490 490 490-219.4 490-490S770.6 10 500 10zM264.6 757.3s51.8-55.6 146.4-80.1v-43.6h-79.1c0-137.9-19.5-160.8-19.5-206.9 0-101.5 61.8-183.9 187.6-183.9 125.7 0 187.6 82.4 187.6 183.9 0 49.1-19.4 72.5-19.4 206.9h-86.6v41.9c99.1 23.5 153.8 81.8 153.8 81.8H264.6z"/></svg> </span> </div> <form id="addCommentForm" method="post" action="/v/programmeren/324811/laat-html-code/comment/answer/1249817/" class="grow stack-x space-x-2 items-center" x-ref="form" > <textarea name="text" placeholder="Voeg een reactie toe..." maxlength="5000" rows="1" class="grow ml-1 h-9 w-40 py-1.5 border border-gray-300 rounded-md overflow-hidden" x-validate.silent="required, minLength:10" x-auto-grow></textarea> <button type="button" class="button-filled w-9 h-9 rounded-full sm:w-auto sm:rounded-md text-sm" :disabled="isLoading" @click="addComment" > <span class="hidden sm:block">Voeg reactie toe</span> <span aria-hidden="true" class="icon inline-block w-4 h-4 block sm:hidden" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg> </span> </button> </form> </div> </div> </div> </div> </div> <div class="answer stack-y space-y-3 | pb-2.5 sm:pb-3 pt-3.5 sm:pt-5 bg-body-container last:rounded-b-lg" x-data="{ ...Answer(), 'UserInfo': UserInfo() }" @show-comment.window="showLastComment" @open-comments-panel.window="openCommentsPanel" @show-answer.window="showAnswer" data-answer-id="1249819" data-author-id="267717" data-entity-type="answer" > <div class="stack-y space-y-6" x-data="{ collapsed: true }" x-init="collapsed = ($refs.answertext.scrollHeight > $refs.answertext.clientHeight);" x-bind:class="collapsed ? 'hover:cursor-pointer':''" > <div class="relative"> <div class="user-content line-clamp-6 sm:line-clamp-8" x-ref="answertext" x-on:click="collapsed = false" x-bind:class="collapsed ? 'hover:opacity-80': 'line-clamp-none sm:line-clamp-none'"> De code als een tekstdocument wegschrijven (niet als platte tekst) en dan e-mailen. </div> <a role="button" class="readmore-overlay | absolute bottom-0 right-0 px-2 py-0.5 text-sm z-30" x-cloak x-show="collapsed == true" x-on:click="collapsed = false"> (Lees meer...) </a> </div> </div> <div class="h-[calc(0.75rem_-_1px)] relative text-gray-300 !mt-1 sm:!mt-3"> <div class="absolute left-0 h-[0.75rem] w-[calc(7%_+_1px)] border-b border-current"></div> <div class="absolute left-[7%] bottom-0 h-[0.75rem] w-[0.75rem] border-t border-l border-current rotate-45 translate-y-[calc(0.375rem)] translate-x-[calc(0.155rem_+_1px)]" > </div> <div class="absolute right-0 h-3 w-[calc(93%_-_1.06rem)] border-b border-current"></div> </div> <div class="stack-x space-x-3 justify-between | text-xs"> <div class="stack-x space-x-3 sm:space-x-4"> <span class="icon default-avatar | w-10 h-10 text-current"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1000 1000"><path d="M599.8 375.6c-10.2 0-22.6 2.5-37.1 5.3-18.7 3.8-39.9 8-62.8 8-22.8 0-44-4.2-62.7-8-14.4-2.8-26.8-5.3-37-5.3-11.9 0-28.3 0-28.3 51.1 0 85.7 39.6 172.1 128 172.1S628 512.4 628 426.7c.1-51.1-16.3-51.1-28.2-51.1zM500 557.2c-44.2 0-57.2-42.9-57.2-42.9h114.3c.1 0-12.9 42.9-57.1 42.9zm-65.5 48v71.1c39.2 17.9 84.6 17.8 123.6 0v-67.1c-17.6 8.4-37 13.2-58.1 13.2-24.1 0-46-6.3-65.5-17.2z"/><path d="M500 10C229.4 10 10 229.4 10 500s219.4 490 490 490 490-219.4 490-490S770.6 10 500 10zM264.6 757.3s51.8-55.6 146.4-80.1v-43.6h-79.1c0-137.9-19.5-160.8-19.5-206.9 0-101.5 61.8-183.9 187.6-183.9 125.7 0 187.6 82.4 187.6 183.9 0 49.1-19.4 72.5-19.4 206.9h-86.6v41.9c99.1 23.5 153.8 81.8 153.8 81.8H264.6z"/></svg></span> <div class="stack-y space-y-0 justify-center"> <div class="text-wrap"> <span class="italic text-current opacity-70">Verwijderde gebruiker</span> <span class="!ml-1"> </span> </div> <div class="opacity-light"> 12 jaar geleden </div> </div> </div> <div class="stack-x stack-x-0 items-center min-w-fit"> <div class="stack-x min-w-fit" x-data="VoteButtons" data-answer-id="1249819" data-votes-up="3" data-votes-down="1" data-url-up="/v/programmeren/324811/laat-html-code/1249819/thumb_up/" data-url-down="/v/programmeren/324811/laat-html-code/1249819/thumb_down/" > <button class="block-footer-button min-w-fit" :disabled="votingPaused" @click="vote('up')" > <div class="stack-x space-x-2.5" x-show="!hasUserVotedUp"> <span x-text="votesUp">3</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14.5 8.5h4.764a2 2 0 0 1 1.789 2.894l-3.5 7a2 2 0 0 1-1.79 1.106h-4.017c-.163 0-.326-.02-.485-.06L7.5 18.5m7-10v-5a2 2 0 0 0-2-2h-.095c-.5 0-.905.405-.905.905a3.61 3.61 0 0 1-.608 2.006L7.5 9.5v9m7-10h-2m-5 10h-2a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2H8"/></svg> </span> </div> <div class="stack-x space-x-2.5" x-show="hasUserVotedUp" x-cloak> <span x-text="votesUp">3</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 20 20"><path d="M2 8.5a1.5 1.5 0 1 1 3 0v6a1.5 1.5 0 0 1-3 0zm4-.167v5.43a2 2 0 0 0 1.106 1.79l.05.025A4 4 0 0 0 8.943 16h5.416a2 2 0 0 0 1.962-1.608l1.2-6A2 2 0 0 0 15.56 6H12V2a2 2 0 0 0-2-2 1 1 0 0 0-1 1v.667a4 4 0 0 1-.8 2.4L6.8 5.933a4 4 0 0 0-.8 2.4Z"/></svg> </span> </div> <input type="hidden" name="csrfmiddlewaretoken" :value="window.appConfig.csrf_token" /> </button> <button class="block-footer-button min-w-fit" :disabled="votingPaused" @click="vote('down')" > <div class="stack-x space-x-2.5" x-show="!hasUserVotedDown"> <span x-text="votesDown">1</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m14.508 15.994 4.764-.013c1.487-.004 2.449-1.57 1.781-2.899l-3.519-6.99a2 2 0 0 0-1.792-1.101L11.724 5c-.164 0-.325.021-.484.062l-3.758.95m7.027 9.98.013 5A2 2 0 0 1 12.528 23h-.096a.905.905 0 0 1-.908-.901 3.616 3.616 0 0 0-.613-2.006l-3.406-5.08-.024-9m7.027 9.982-2 .005M7.481 6.013l-2 .005a2 2 0 0 0-1.994 2.006l.016 6a2 2 0 0 0 2.005 1.994l2.5-.007"/></svg> </span> </div> <div class="stack-x space-x-2.5" x-show="hasUserVotedDown" x-cloak> <span x-text="votesDown">1</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m14.508 15.994 4.764-.013c1.487-.004 2.449-1.57 1.781-2.899l-3.519-6.99a2 2 0 0 0-1.792-1.101L11.724 5c-.164 0-.325.021-.484.062l-3.758.95m7.027 9.98.013 5A2 2 0 0 1 12.528 23h-.096a.905.905 0 0 1-.908-.901 3.616 3.616 0 0 0-.613-2.006l-3.406-5.08-.024-9m7.027 9.982-2 .005M7.481 6.013l-2 .005a2 2 0 0 0-1.994 2.006l.016 6a2 2 0 0 0 2.005 1.994l2.5-.007"/></svg> </span> </div> </button> <input type="hidden" name="csrfmiddlewaretoken" :value="window.appConfig.csrf_token" /> </div> <button class="block-footer-button min-w-fit children:active:opacity-80" x-on:click="commentsOpened=!commentsOpened" :class="!UserInfo.isAuthenticated ? '-mr-2.5' : ''" > <div class="stack-x space-x-2.5"> <span class="hidden sm:inline-block"> 0 reacties </span> <span class="inline-block sm:hidden !ml-0"> 0 </span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl cursor-pointer" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12c0 4.418-4.03 8-9 8a9.862 9.862 0 0 1-4.255-.95L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8Z"/></svg> </span> </div> </button> </div> </div> <div class="!mt-4" x-cloak x-show="commentsOpened==true"> <div x-data="{ 'UserInfo': UserInfo() }" > <div class="stack-y space-y-3 mb-4"> </div> <div class="mb-1" id="addComment"> <div class="stack-x space-x-3 items-center | relative" x-data="AddComment" > <div class="min-w-fit"> <img class="w-10 h-10 rounded-full" aria-hidden="true" :src="UserInfo.avatarUrl" x-show="UserInfo.avatarUrl" > <span class="icon default-avatar | w-10 h-10 text-current" x-show="!UserInfo.avatarUrl" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1000 1000"><path d="M599.8 375.6c-10.2 0-22.6 2.5-37.1 5.3-18.7 3.8-39.9 8-62.8 8-22.8 0-44-4.2-62.7-8-14.4-2.8-26.8-5.3-37-5.3-11.9 0-28.3 0-28.3 51.1 0 85.7 39.6 172.1 128 172.1S628 512.4 628 426.7c.1-51.1-16.3-51.1-28.2-51.1zM500 557.2c-44.2 0-57.2-42.9-57.2-42.9h114.3c.1 0-12.9 42.9-57.1 42.9zm-65.5 48v71.1c39.2 17.9 84.6 17.8 123.6 0v-67.1c-17.6 8.4-37 13.2-58.1 13.2-24.1 0-46-6.3-65.5-17.2z"/><path d="M500 10C229.4 10 10 229.4 10 500s219.4 490 490 490 490-219.4 490-490S770.6 10 500 10zM264.6 757.3s51.8-55.6 146.4-80.1v-43.6h-79.1c0-137.9-19.5-160.8-19.5-206.9 0-101.5 61.8-183.9 187.6-183.9 125.7 0 187.6 82.4 187.6 183.9 0 49.1-19.4 72.5-19.4 206.9h-86.6v41.9c99.1 23.5 153.8 81.8 153.8 81.8H264.6z"/></svg> </span> </div> <form id="addCommentForm" method="post" action="/v/programmeren/324811/laat-html-code/comment/answer/1249819/" class="grow stack-x space-x-2 items-center" x-ref="form" > <textarea name="text" placeholder="Voeg een reactie toe..." maxlength="5000" rows="1" class="grow ml-1 h-9 w-40 py-1.5 border border-gray-300 rounded-md overflow-hidden" x-validate.silent="required, minLength:10" x-auto-grow></textarea> <button type="button" class="button-filled w-9 h-9 rounded-full sm:w-auto sm:rounded-md text-sm" :disabled="isLoading" @click="addComment" > <span class="hidden sm:block">Voeg reactie toe</span> <span aria-hidden="true" class="icon inline-block w-4 h-4 block sm:hidden" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg> </span> </button> </form> </div> </div> </div> </div> </div> <div class="answer stack-y space-y-3 | pb-2.5 sm:pb-3 pt-3.5 sm:pt-5 bg-body-container last:rounded-b-lg" x-data="{ ...Answer(), 'UserInfo': UserInfo() }" @show-comment.window="showLastComment" @open-comments-panel.window="openCommentsPanel" @show-answer.window="showAnswer" data-answer-id="1249918" data-author-id="267717" data-entity-type="answer" > <div class="stack-y space-y-6" x-data="{ collapsed: true }" x-init="collapsed = ($refs.answertext.scrollHeight > $refs.answertext.clientHeight);" x-bind:class="collapsed ? 'hover:cursor-pointer':''" > <div class="relative"> <div class="user-content line-clamp-6 sm:line-clamp-8" x-ref="answertext" x-on:click="collapsed = false" x-bind:class="collapsed ? 'hover:opacity-80': 'line-clamp-none sm:line-clamp-none'"> htmlspecialchars(); </div> <a role="button" class="readmore-overlay | absolute bottom-0 right-0 px-2 py-0.5 text-sm z-30" x-cloak x-show="collapsed == true" x-on:click="collapsed = false"> (Lees meer...) </a> </div> </div> <div class="h-[calc(0.75rem_-_1px)] relative text-gray-300 !mt-1 sm:!mt-3"> <div class="absolute left-0 h-[0.75rem] w-[calc(7%_+_1px)] border-b border-current"></div> <div class="absolute left-[7%] bottom-0 h-[0.75rem] w-[0.75rem] border-t border-l border-current rotate-45 translate-y-[calc(0.375rem)] translate-x-[calc(0.155rem_+_1px)]" > </div> <div class="absolute right-0 h-3 w-[calc(93%_-_1.06rem)] border-b border-current"></div> </div> <div class="stack-x space-x-3 justify-between | text-xs"> <div class="stack-x space-x-3 sm:space-x-4"> <span class="icon default-avatar | w-10 h-10 text-current"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1000 1000"><path d="M599.8 375.6c-10.2 0-22.6 2.5-37.1 5.3-18.7 3.8-39.9 8-62.8 8-22.8 0-44-4.2-62.7-8-14.4-2.8-26.8-5.3-37-5.3-11.9 0-28.3 0-28.3 51.1 0 85.7 39.6 172.1 128 172.1S628 512.4 628 426.7c.1-51.1-16.3-51.1-28.2-51.1zM500 557.2c-44.2 0-57.2-42.9-57.2-42.9h114.3c.1 0-12.9 42.9-57.1 42.9zm-65.5 48v71.1c39.2 17.9 84.6 17.8 123.6 0v-67.1c-17.6 8.4-37 13.2-58.1 13.2-24.1 0-46-6.3-65.5-17.2z"/><path d="M500 10C229.4 10 10 229.4 10 500s219.4 490 490 490 490-219.4 490-490S770.6 10 500 10zM264.6 757.3s51.8-55.6 146.4-80.1v-43.6h-79.1c0-137.9-19.5-160.8-19.5-206.9 0-101.5 61.8-183.9 187.6-183.9 125.7 0 187.6 82.4 187.6 183.9 0 49.1-19.4 72.5-19.4 206.9h-86.6v41.9c99.1 23.5 153.8 81.8 153.8 81.8H264.6z"/></svg></span> <div class="stack-y space-y-0 justify-center"> <div class="text-wrap"> <span class="italic text-current opacity-70">Verwijderde gebruiker</span> <span class="!ml-1"> </span> </div> <div class="opacity-light"> 12 jaar geleden </div> </div> </div> <div class="stack-x stack-x-0 items-center min-w-fit"> <div class="stack-x min-w-fit" x-data="VoteButtons" data-answer-id="1249918" data-votes-up="0" data-votes-down="3" data-url-up="/v/programmeren/324811/laat-html-code/1249918/thumb_up/" data-url-down="/v/programmeren/324811/laat-html-code/1249918/thumb_down/" > <button class="block-footer-button min-w-fit" :disabled="votingPaused" @click="vote('up')" > <div class="stack-x space-x-2.5" x-show="!hasUserVotedUp"> <span x-text="votesUp">0</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14.5 8.5h4.764a2 2 0 0 1 1.789 2.894l-3.5 7a2 2 0 0 1-1.79 1.106h-4.017c-.163 0-.326-.02-.485-.06L7.5 18.5m7-10v-5a2 2 0 0 0-2-2h-.095c-.5 0-.905.405-.905.905a3.61 3.61 0 0 1-.608 2.006L7.5 9.5v9m7-10h-2m-5 10h-2a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2H8"/></svg> </span> </div> <div class="stack-x space-x-2.5" x-show="hasUserVotedUp" x-cloak> <span x-text="votesUp">0</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 20 20"><path d="M2 8.5a1.5 1.5 0 1 1 3 0v6a1.5 1.5 0 0 1-3 0zm4-.167v5.43a2 2 0 0 0 1.106 1.79l.05.025A4 4 0 0 0 8.943 16h5.416a2 2 0 0 0 1.962-1.608l1.2-6A2 2 0 0 0 15.56 6H12V2a2 2 0 0 0-2-2 1 1 0 0 0-1 1v.667a4 4 0 0 1-.8 2.4L6.8 5.933a4 4 0 0 0-.8 2.4Z"/></svg> </span> </div> <input type="hidden" name="csrfmiddlewaretoken" :value="window.appConfig.csrf_token" /> </button> <button class="block-footer-button min-w-fit" :disabled="votingPaused" @click="vote('down')" > <div class="stack-x space-x-2.5" x-show="!hasUserVotedDown"> <span x-text="votesDown">3</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m14.508 15.994 4.764-.013c1.487-.004 2.449-1.57 1.781-2.899l-3.519-6.99a2 2 0 0 0-1.792-1.101L11.724 5c-.164 0-.325.021-.484.062l-3.758.95m7.027 9.98.013 5A2 2 0 0 1 12.528 23h-.096a.905.905 0 0 1-.908-.901 3.616 3.616 0 0 0-.613-2.006l-3.406-5.08-.024-9m7.027 9.982-2 .005M7.481 6.013l-2 .005a2 2 0 0 0-1.994 2.006l.016 6a2 2 0 0 0 2.005 1.994l2.5-.007"/></svg> </span> </div> <div class="stack-x space-x-2.5" x-show="hasUserVotedDown" x-cloak> <span x-text="votesDown">3</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m14.508 15.994 4.764-.013c1.487-.004 2.449-1.57 1.781-2.899l-3.519-6.99a2 2 0 0 0-1.792-1.101L11.724 5c-.164 0-.325.021-.484.062l-3.758.95m7.027 9.98.013 5A2 2 0 0 1 12.528 23h-.096a.905.905 0 0 1-.908-.901 3.616 3.616 0 0 0-.613-2.006l-3.406-5.08-.024-9m7.027 9.982-2 .005M7.481 6.013l-2 .005a2 2 0 0 0-1.994 2.006l.016 6a2 2 0 0 0 2.005 1.994l2.5-.007"/></svg> </span> </div> </button> <input type="hidden" name="csrfmiddlewaretoken" :value="window.appConfig.csrf_token" /> </div> <button class="block-footer-button min-w-fit children:active:opacity-80" x-on:click="commentsOpened=!commentsOpened" :class="!UserInfo.isAuthenticated ? '-mr-2.5' : ''" > <div class="stack-x space-x-2.5"> <span class="hidden sm:inline-block"> 0 reacties </span> <span class="inline-block sm:hidden !ml-0"> 0 </span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl cursor-pointer" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12c0 4.418-4.03 8-9 8a9.862 9.862 0 0 1-4.255-.95L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8Z"/></svg> </span> </div> </button> </div> </div> <div class="!mt-4" x-cloak x-show="commentsOpened==true"> <div x-data="{ 'UserInfo': UserInfo() }" > <div class="stack-y space-y-3 mb-4"> </div> <div class="mb-1" id="addComment"> <div class="stack-x space-x-3 items-center | relative" x-data="AddComment" > <div class="min-w-fit"> <img class="w-10 h-10 rounded-full" aria-hidden="true" :src="UserInfo.avatarUrl" x-show="UserInfo.avatarUrl" > <span class="icon default-avatar | w-10 h-10 text-current" x-show="!UserInfo.avatarUrl" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1000 1000"><path d="M599.8 375.6c-10.2 0-22.6 2.5-37.1 5.3-18.7 3.8-39.9 8-62.8 8-22.8 0-44-4.2-62.7-8-14.4-2.8-26.8-5.3-37-5.3-11.9 0-28.3 0-28.3 51.1 0 85.7 39.6 172.1 128 172.1S628 512.4 628 426.7c.1-51.1-16.3-51.1-28.2-51.1zM500 557.2c-44.2 0-57.2-42.9-57.2-42.9h114.3c.1 0-12.9 42.9-57.1 42.9zm-65.5 48v71.1c39.2 17.9 84.6 17.8 123.6 0v-67.1c-17.6 8.4-37 13.2-58.1 13.2-24.1 0-46-6.3-65.5-17.2z"/><path d="M500 10C229.4 10 10 229.4 10 500s219.4 490 490 490 490-219.4 490-490S770.6 10 500 10zM264.6 757.3s51.8-55.6 146.4-80.1v-43.6h-79.1c0-137.9-19.5-160.8-19.5-206.9 0-101.5 61.8-183.9 187.6-183.9 125.7 0 187.6 82.4 187.6 183.9 0 49.1-19.4 72.5-19.4 206.9h-86.6v41.9c99.1 23.5 153.8 81.8 153.8 81.8H264.6z"/></svg> </span> </div> <form id="addCommentForm" method="post" action="/v/programmeren/324811/laat-html-code/comment/answer/1249918/" class="grow stack-x space-x-2 items-center" x-ref="form" > <textarea name="text" placeholder="Voeg een reactie toe..." maxlength="5000" rows="1" class="grow ml-1 h-9 w-40 py-1.5 border border-gray-300 rounded-md overflow-hidden" x-validate.silent="required, minLength:10" x-auto-grow></textarea> <button type="button" class="button-filled w-9 h-9 rounded-full sm:w-auto sm:rounded-md text-sm" :disabled="isLoading" @click="addComment" > <span class="hidden sm:block">Voeg reactie toe</span> <span aria-hidden="true" class="icon inline-block w-4 h-4 block sm:hidden" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg> </span> </button> </form> </div> </div> </div> </div> </div> <div class="answer stack-y space-y-3 | pb-2.5 sm:pb-3 pt-3.5 sm:pt-5 bg-body-container last:rounded-b-lg" x-data="{ ...Answer(), 'UserInfo': UserInfo() }" @show-comment.window="showLastComment" @open-comments-panel.window="openCommentsPanel" @show-answer.window="showAnswer" data-answer-id="1249950" data-author-id="267717" data-entity-type="answer" > <div class="stack-y space-y-6" x-data="{ collapsed: true }" x-init="collapsed = ($refs.answertext.scrollHeight > $refs.answertext.clientHeight);" x-bind:class="collapsed ? 'hover:cursor-pointer':''" > <div class="relative"> <div class="user-content line-clamp-6 sm:line-clamp-8" x-ref="answertext" x-on:click="collapsed = false" x-bind:class="collapsed ? 'hover:opacity-80': 'line-clamp-none sm:line-clamp-none'"> Het bericht als tekst emailen en niet als html gecodeerd.<br/>(Of juist als html...)<br/><br/>Het resultaat hangt af van de email programma's die aan beide zijden gebruikt worden...<br/><br/>Het lukt mij iig niet om jouw probleem te reproduceren met <br/>thunderbird, outlook, webmail (exchange) en gmail in allerlei combinaties.<br/>Als ik html code intype komt er html code uit (ongeformatteerd) </div> <a role="button" class="readmore-overlay | absolute bottom-0 right-0 px-2 py-0.5 text-sm z-30" x-cloak x-show="collapsed == true" x-on:click="collapsed = false"> (Lees meer...) </a> </div> </div> <div class="h-[calc(0.75rem_-_1px)] relative text-gray-300 !mt-1 sm:!mt-3"> <div class="absolute left-0 h-[0.75rem] w-[calc(7%_+_1px)] border-b border-current"></div> <div class="absolute left-[7%] bottom-0 h-[0.75rem] w-[0.75rem] border-t border-l border-current rotate-45 translate-y-[calc(0.375rem)] translate-x-[calc(0.155rem_+_1px)]" > </div> <div class="absolute right-0 h-3 w-[calc(93%_-_1.06rem)] border-b border-current"></div> </div> <div class="stack-x space-x-3 justify-between | text-xs"> <div class="stack-x space-x-3 sm:space-x-4"> <span class="icon default-avatar | w-10 h-10 text-current"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1000 1000"><path d="M599.8 375.6c-10.2 0-22.6 2.5-37.1 5.3-18.7 3.8-39.9 8-62.8 8-22.8 0-44-4.2-62.7-8-14.4-2.8-26.8-5.3-37-5.3-11.9 0-28.3 0-28.3 51.1 0 85.7 39.6 172.1 128 172.1S628 512.4 628 426.7c.1-51.1-16.3-51.1-28.2-51.1zM500 557.2c-44.2 0-57.2-42.9-57.2-42.9h114.3c.1 0-12.9 42.9-57.1 42.9zm-65.5 48v71.1c39.2 17.9 84.6 17.8 123.6 0v-67.1c-17.6 8.4-37 13.2-58.1 13.2-24.1 0-46-6.3-65.5-17.2z"/><path d="M500 10C229.4 10 10 229.4 10 500s219.4 490 490 490 490-219.4 490-490S770.6 10 500 10zM264.6 757.3s51.8-55.6 146.4-80.1v-43.6h-79.1c0-137.9-19.5-160.8-19.5-206.9 0-101.5 61.8-183.9 187.6-183.9 125.7 0 187.6 82.4 187.6 183.9 0 49.1-19.4 72.5-19.4 206.9h-86.6v41.9c99.1 23.5 153.8 81.8 153.8 81.8H264.6z"/></svg></span> <div class="stack-y space-y-0 justify-center"> <div class="text-wrap"> <span class="italic text-current opacity-70">Verwijderde gebruiker</span> <span class="!ml-1"> </span> </div> <div class="opacity-light"> 12 jaar geleden </div> </div> </div> <div class="stack-x stack-x-0 items-center min-w-fit"> <div class="stack-x min-w-fit" x-data="VoteButtons" data-answer-id="1249950" data-votes-up="0" data-votes-down="0" data-url-up="/v/programmeren/324811/laat-html-code/1249950/thumb_up/" data-url-down="/v/programmeren/324811/laat-html-code/1249950/thumb_down/" > <button class="block-footer-button min-w-fit" :disabled="votingPaused" @click="vote('up')" > <div class="stack-x space-x-2.5" x-show="!hasUserVotedUp"> <span x-text="votesUp">0</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14.5 8.5h4.764a2 2 0 0 1 1.789 2.894l-3.5 7a2 2 0 0 1-1.79 1.106h-4.017c-.163 0-.326-.02-.485-.06L7.5 18.5m7-10v-5a2 2 0 0 0-2-2h-.095c-.5 0-.905.405-.905.905a3.61 3.61 0 0 1-.608 2.006L7.5 9.5v9m7-10h-2m-5 10h-2a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2H8"/></svg> </span> </div> <div class="stack-x space-x-2.5" x-show="hasUserVotedUp" x-cloak> <span x-text="votesUp">0</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 20 20"><path d="M2 8.5a1.5 1.5 0 1 1 3 0v6a1.5 1.5 0 0 1-3 0zm4-.167v5.43a2 2 0 0 0 1.106 1.79l.05.025A4 4 0 0 0 8.943 16h5.416a2 2 0 0 0 1.962-1.608l1.2-6A2 2 0 0 0 15.56 6H12V2a2 2 0 0 0-2-2 1 1 0 0 0-1 1v.667a4 4 0 0 1-.8 2.4L6.8 5.933a4 4 0 0 0-.8 2.4Z"/></svg> </span> </div> <input type="hidden" name="csrfmiddlewaretoken" :value="window.appConfig.csrf_token" /> </button> <button class="block-footer-button min-w-fit" :disabled="votingPaused" @click="vote('down')" > <div class="stack-x space-x-2.5" x-show="!hasUserVotedDown"> <span x-text="votesDown">0</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m14.508 15.994 4.764-.013c1.487-.004 2.449-1.57 1.781-2.899l-3.519-6.99a2 2 0 0 0-1.792-1.101L11.724 5c-.164 0-.325.021-.484.062l-3.758.95m7.027 9.98.013 5A2 2 0 0 1 12.528 23h-.096a.905.905 0 0 1-.908-.901 3.616 3.616 0 0 0-.613-2.006l-3.406-5.08-.024-9m7.027 9.982-2 .005M7.481 6.013l-2 .005a2 2 0 0 0-1.994 2.006l.016 6a2 2 0 0 0 2.005 1.994l2.5-.007"/></svg> </span> </div> <div class="stack-x space-x-2.5" x-show="hasUserVotedDown" x-cloak> <span x-text="votesDown">0</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m14.508 15.994 4.764-.013c1.487-.004 2.449-1.57 1.781-2.899l-3.519-6.99a2 2 0 0 0-1.792-1.101L11.724 5c-.164 0-.325.021-.484.062l-3.758.95m7.027 9.98.013 5A2 2 0 0 1 12.528 23h-.096a.905.905 0 0 1-.908-.901 3.616 3.616 0 0 0-.613-2.006l-3.406-5.08-.024-9m7.027 9.982-2 .005M7.481 6.013l-2 .005a2 2 0 0 0-1.994 2.006l.016 6a2 2 0 0 0 2.005 1.994l2.5-.007"/></svg> </span> </div> </button> <input type="hidden" name="csrfmiddlewaretoken" :value="window.appConfig.csrf_token" /> </div> <button class="block-footer-button min-w-fit children:active:opacity-80" x-on:click="commentsOpened=!commentsOpened" :class="!UserInfo.isAuthenticated ? '-mr-2.5' : ''" > <div class="stack-x space-x-2.5"> <span class="hidden sm:inline-block"> 0 reacties </span> <span class="inline-block sm:hidden !ml-0"> 0 </span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl cursor-pointer" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12c0 4.418-4.03 8-9 8a9.862 9.862 0 0 1-4.255-.95L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8Z"/></svg> </span> </div> </button> </div> </div> <div class="!mt-4" x-cloak x-show="commentsOpened==true"> <div x-data="{ 'UserInfo': UserInfo() }" > <div class="stack-y space-y-3 mb-4"> </div> <div class="mb-1" id="addComment"> <div class="stack-x space-x-3 items-center | relative" x-data="AddComment" > <div class="min-w-fit"> <img class="w-10 h-10 rounded-full" aria-hidden="true" :src="UserInfo.avatarUrl" x-show="UserInfo.avatarUrl" > <span class="icon default-avatar | w-10 h-10 text-current" x-show="!UserInfo.avatarUrl" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1000 1000"><path d="M599.8 375.6c-10.2 0-22.6 2.5-37.1 5.3-18.7 3.8-39.9 8-62.8 8-22.8 0-44-4.2-62.7-8-14.4-2.8-26.8-5.3-37-5.3-11.9 0-28.3 0-28.3 51.1 0 85.7 39.6 172.1 128 172.1S628 512.4 628 426.7c.1-51.1-16.3-51.1-28.2-51.1zM500 557.2c-44.2 0-57.2-42.9-57.2-42.9h114.3c.1 0-12.9 42.9-57.1 42.9zm-65.5 48v71.1c39.2 17.9 84.6 17.8 123.6 0v-67.1c-17.6 8.4-37 13.2-58.1 13.2-24.1 0-46-6.3-65.5-17.2z"/><path d="M500 10C229.4 10 10 229.4 10 500s219.4 490 490 490 490-219.4 490-490S770.6 10 500 10zM264.6 757.3s51.8-55.6 146.4-80.1v-43.6h-79.1c0-137.9-19.5-160.8-19.5-206.9 0-101.5 61.8-183.9 187.6-183.9 125.7 0 187.6 82.4 187.6 183.9 0 49.1-19.4 72.5-19.4 206.9h-86.6v41.9c99.1 23.5 153.8 81.8 153.8 81.8H264.6z"/></svg> </span> </div> <form id="addCommentForm" method="post" action="/v/programmeren/324811/laat-html-code/comment/answer/1249950/" class="grow stack-x space-x-2 items-center" x-ref="form" > <textarea name="text" placeholder="Voeg een reactie toe..." maxlength="5000" rows="1" class="grow ml-1 h-9 w-40 py-1.5 border border-gray-300 rounded-md overflow-hidden" x-validate.silent="required, minLength:10" x-auto-grow></textarea> <button type="button" class="button-filled w-9 h-9 rounded-full sm:w-auto sm:rounded-md text-sm" :disabled="isLoading" @click="addComment" > <span class="hidden sm:block">Voeg reactie toe</span> <span aria-hidden="true" class="icon inline-block w-4 h-4 block sm:hidden" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg> </span> </button> </form> </div> </div> </div> </div> </div> <div class="answer stack-y space-y-3 | pb-2.5 sm:pb-3 pt-3.5 sm:pt-5 bg-body-container last:rounded-b-lg" x-data="{ ...Answer(), 'UserInfo': UserInfo() }" @show-comment.window="showLastComment" @open-comments-panel.window="openCommentsPanel" @show-answer.window="showAnswer" data-answer-id="1250564" data-author-id="10627" data-entity-type="answer" > <div class="stack-y space-y-6" x-data="{ collapsed: true }" x-init="collapsed = ($refs.answertext.scrollHeight > $refs.answertext.clientHeight);" x-bind:class="collapsed ? 'hover:cursor-pointer':''" > <div class="relative"> <div class="user-content line-clamp-6 sm:line-clamp-8" x-ref="answertext" x-on:click="collapsed = false" x-bind:class="collapsed ? 'hover:opacity-80': 'line-clamp-none sm:line-clamp-none'"> Zet je code in een tekstbestand, pak het in met 7-zip (Of Winrar of Winzip o.i.d.) en mail het als bijlage. </div> <a role="button" class="readmore-overlay | absolute bottom-0 right-0 px-2 py-0.5 text-sm z-30" x-cloak x-show="collapsed == true" x-on:click="collapsed = false"> (Lees meer...) </a> </div> </div> <div class="h-[calc(0.75rem_-_1px)] relative text-gray-300 !mt-1 sm:!mt-3"> <div class="absolute left-0 h-[0.75rem] w-[calc(7%_+_1px)] border-b border-current"></div> <div class="absolute left-[7%] bottom-0 h-[0.75rem] w-[0.75rem] border-t border-l border-current rotate-45 translate-y-[calc(0.375rem)] translate-x-[calc(0.155rem_+_1px)]" > </div> <div class="absolute right-0 h-3 w-[calc(93%_-_1.06rem)] border-b border-current"></div> </div> <div class="stack-x space-x-3 justify-between | text-xs"> <div class="stack-x space-x-3 sm:space-x-4"> <a rel="nofollow" title="rose" href="/v/profiel/rose/" class="min-w-fit text-current hover:text-current active:text-current m-auto" tabindex="-1"> <img src="https://m.startpagina.nl/m/m1fyd87w4vwm" class="w-10 h-10 rounded-full" aria-hidden="true" alt=""> </a> <div class="stack-y space-y-0 justify-center"> <div class="text-wrap"> <a rel="nofollow" title="rose" href="/v/profiel/rose/" class="min-w-fit text-current hover:text-current active:text-current"> <span>rose</span> </a> <span class="!ml-1"> <div class="inline-block" x-data x-tooltip.theme.light.placement.bottom="{ content: () => $refs.tooltipContent.innerHTML, allowHTML: true, appendTo: $root, sticky: true }" > <span aria-hidden="true" class="icon aligned inline-block medal-icon icon-2xl cursor-pointer text-medal-gold" > <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="bg-white rounded-full" width="24" height="24" viewBox="0 0 24 24"><ellipse cx="12.016" cy="11.969" fill="#fff" paint-order="markers fill stroke" rx="8.716" ry="8.7"/><path fill="currentColor" d="M16.23 18 12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18M12 2C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2Z"/></svg> </span> <div class="medal-tooltip-content hidden" x-ref="tooltipContent"> <div class="stack-x space-x-4 items-center p-1"> <div> <img src="/v/static/images/medal-gold.453851f645d5.png" class="w-20 ml-1 aspect-auto" alt="Medaille"> </div> <div> rose is an excellent responder and has a gouden medal in programmeren category </div> </div> </div> </div> </span> </div> <div class="opacity-light"> 12 jaar geleden </div> </div> </div> <div class="stack-x stack-x-0 items-center min-w-fit"> <div class="stack-x min-w-fit" x-data="VoteButtons" data-answer-id="1250564" data-votes-up="0" data-votes-down="0" data-url-up="/v/programmeren/324811/laat-html-code/1250564/thumb_up/" data-url-down="/v/programmeren/324811/laat-html-code/1250564/thumb_down/" > <button class="block-footer-button min-w-fit" :disabled="votingPaused" @click="vote('up')" > <div class="stack-x space-x-2.5" x-show="!hasUserVotedUp"> <span x-text="votesUp">0</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14.5 8.5h4.764a2 2 0 0 1 1.789 2.894l-3.5 7a2 2 0 0 1-1.79 1.106h-4.017c-.163 0-.326-.02-.485-.06L7.5 18.5m7-10v-5a2 2 0 0 0-2-2h-.095c-.5 0-.905.405-.905.905a3.61 3.61 0 0 1-.608 2.006L7.5 9.5v9m7-10h-2m-5 10h-2a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2H8"/></svg> </span> </div> <div class="stack-x space-x-2.5" x-show="hasUserVotedUp" x-cloak> <span x-text="votesUp">0</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 20 20"><path d="M2 8.5a1.5 1.5 0 1 1 3 0v6a1.5 1.5 0 0 1-3 0zm4-.167v5.43a2 2 0 0 0 1.106 1.79l.05.025A4 4 0 0 0 8.943 16h5.416a2 2 0 0 0 1.962-1.608l1.2-6A2 2 0 0 0 15.56 6H12V2a2 2 0 0 0-2-2 1 1 0 0 0-1 1v.667a4 4 0 0 1-.8 2.4L6.8 5.933a4 4 0 0 0-.8 2.4Z"/></svg> </span> </div> <input type="hidden" name="csrfmiddlewaretoken" :value="window.appConfig.csrf_token" /> </button> <button class="block-footer-button min-w-fit" :disabled="votingPaused" @click="vote('down')" > <div class="stack-x space-x-2.5" x-show="!hasUserVotedDown"> <span x-text="votesDown">0</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m14.508 15.994 4.764-.013c1.487-.004 2.449-1.57 1.781-2.899l-3.519-6.99a2 2 0 0 0-1.792-1.101L11.724 5c-.164 0-.325.021-.484.062l-3.758.95m7.027 9.98.013 5A2 2 0 0 1 12.528 23h-.096a.905.905 0 0 1-.908-.901 3.616 3.616 0 0 0-.613-2.006l-3.406-5.08-.024-9m7.027 9.982-2 .005M7.481 6.013l-2 .005a2 2 0 0 0-1.994 2.006l.016 6a2 2 0 0 0 2.005 1.994l2.5-.007"/></svg> </span> </div> <div class="stack-x space-x-2.5" x-show="hasUserVotedDown" x-cloak> <span x-text="votesDown">0</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m14.508 15.994 4.764-.013c1.487-.004 2.449-1.57 1.781-2.899l-3.519-6.99a2 2 0 0 0-1.792-1.101L11.724 5c-.164 0-.325.021-.484.062l-3.758.95m7.027 9.98.013 5A2 2 0 0 1 12.528 23h-.096a.905.905 0 0 1-.908-.901 3.616 3.616 0 0 0-.613-2.006l-3.406-5.08-.024-9m7.027 9.982-2 .005M7.481 6.013l-2 .005a2 2 0 0 0-1.994 2.006l.016 6a2 2 0 0 0 2.005 1.994l2.5-.007"/></svg> </span> </div> </button> <input type="hidden" name="csrfmiddlewaretoken" :value="window.appConfig.csrf_token" /> </div> <button class="block-footer-button min-w-fit children:active:opacity-80" x-on:click="commentsOpened=!commentsOpened" :class="!UserInfo.isAuthenticated ? '-mr-2.5' : ''" > <div class="stack-x space-x-2.5"> <span class="hidden sm:inline-block"> 0 reacties </span> <span class="inline-block sm:hidden !ml-0"> 0 </span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl cursor-pointer" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12c0 4.418-4.03 8-9 8a9.862 9.862 0 0 1-4.255-.95L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8Z"/></svg> </span> </div> </button> </div> </div> <div class="!mt-4" x-cloak x-show="commentsOpened==true"> <div x-data="{ 'UserInfo': UserInfo() }" > <div class="stack-y space-y-3 mb-4"> </div> <div class="mb-1" id="addComment"> <div class="stack-x space-x-3 items-center | relative" x-data="AddComment" > <div class="min-w-fit"> <img class="w-10 h-10 rounded-full" aria-hidden="true" :src="UserInfo.avatarUrl" x-show="UserInfo.avatarUrl" > <span class="icon default-avatar | w-10 h-10 text-current" x-show="!UserInfo.avatarUrl" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1000 1000"><path d="M599.8 375.6c-10.2 0-22.6 2.5-37.1 5.3-18.7 3.8-39.9 8-62.8 8-22.8 0-44-4.2-62.7-8-14.4-2.8-26.8-5.3-37-5.3-11.9 0-28.3 0-28.3 51.1 0 85.7 39.6 172.1 128 172.1S628 512.4 628 426.7c.1-51.1-16.3-51.1-28.2-51.1zM500 557.2c-44.2 0-57.2-42.9-57.2-42.9h114.3c.1 0-12.9 42.9-57.1 42.9zm-65.5 48v71.1c39.2 17.9 84.6 17.8 123.6 0v-67.1c-17.6 8.4-37 13.2-58.1 13.2-24.1 0-46-6.3-65.5-17.2z"/><path d="M500 10C229.4 10 10 229.4 10 500s219.4 490 490 490 490-219.4 490-490S770.6 10 500 10zM264.6 757.3s51.8-55.6 146.4-80.1v-43.6h-79.1c0-137.9-19.5-160.8-19.5-206.9 0-101.5 61.8-183.9 187.6-183.9 125.7 0 187.6 82.4 187.6 183.9 0 49.1-19.4 72.5-19.4 206.9h-86.6v41.9c99.1 23.5 153.8 81.8 153.8 81.8H264.6z"/></svg> </span> </div> <form id="addCommentForm" method="post" action="/v/programmeren/324811/laat-html-code/comment/answer/1250564/" class="grow stack-x space-x-2 items-center" x-ref="form" > <textarea name="text" placeholder="Voeg een reactie toe..." maxlength="5000" rows="1" class="grow ml-1 h-9 w-40 py-1.5 border border-gray-300 rounded-md overflow-hidden" x-validate.silent="required, minLength:10" x-auto-grow></textarea> <button type="button" class="button-filled w-9 h-9 rounded-full sm:w-auto sm:rounded-md text-sm" :disabled="isLoading" @click="addComment" > <span class="hidden sm:block">Voeg reactie toe</span> <span aria-hidden="true" class="icon inline-block w-4 h-4 block sm:hidden" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg> </span> </button> </form> </div> </div> </div> </div> </div> <div class="answer stack-y space-y-3 | pb-2.5 sm:pb-3 pt-3.5 sm:pt-5 bg-body-container last:rounded-b-lg" x-data="{ ...Answer(), 'UserInfo': UserInfo() }" @show-comment.window="showLastComment" @open-comments-panel.window="openCommentsPanel" @show-answer.window="showAnswer" data-answer-id="1250666" data-author-id="267717" data-entity-type="answer" > <div class="stack-y space-y-6" x-data="{ collapsed: true }" x-init="collapsed = ($refs.answertext.scrollHeight > $refs.answertext.clientHeight);" x-bind:class="collapsed ? 'hover:cursor-pointer':''" > <div class="relative"> <div class="user-content line-clamp-6 sm:line-clamp-8" x-ref="answertext" x-on:click="collapsed = false" x-bind:class="collapsed ? 'hover:opacity-80': 'line-clamp-none sm:line-clamp-none'"> Het allermakkelijkst:<br/><br/><code>...</code><br/><br/>http://www.quackit.com/html/tags/html_code_tag.cfm </div> <a role="button" class="readmore-overlay | absolute bottom-0 right-0 px-2 py-0.5 text-sm z-30" x-cloak x-show="collapsed == true" x-on:click="collapsed = false"> (Lees meer...) </a> </div> </div> <div class="h-[calc(0.75rem_-_1px)] relative text-gray-300 !mt-1 sm:!mt-3"> <div class="absolute left-0 h-[0.75rem] w-[calc(7%_+_1px)] border-b border-current"></div> <div class="absolute left-[7%] bottom-0 h-[0.75rem] w-[0.75rem] border-t border-l border-current rotate-45 translate-y-[calc(0.375rem)] translate-x-[calc(0.155rem_+_1px)]" > </div> <div class="absolute right-0 h-3 w-[calc(93%_-_1.06rem)] border-b border-current"></div> </div> <div class="stack-x space-x-3 justify-between | text-xs"> <div class="stack-x space-x-3 sm:space-x-4"> <span class="icon default-avatar | w-10 h-10 text-current"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1000 1000"><path d="M599.8 375.6c-10.2 0-22.6 2.5-37.1 5.3-18.7 3.8-39.9 8-62.8 8-22.8 0-44-4.2-62.7-8-14.4-2.8-26.8-5.3-37-5.3-11.9 0-28.3 0-28.3 51.1 0 85.7 39.6 172.1 128 172.1S628 512.4 628 426.7c.1-51.1-16.3-51.1-28.2-51.1zM500 557.2c-44.2 0-57.2-42.9-57.2-42.9h114.3c.1 0-12.9 42.9-57.1 42.9zm-65.5 48v71.1c39.2 17.9 84.6 17.8 123.6 0v-67.1c-17.6 8.4-37 13.2-58.1 13.2-24.1 0-46-6.3-65.5-17.2z"/><path d="M500 10C229.4 10 10 229.4 10 500s219.4 490 490 490 490-219.4 490-490S770.6 10 500 10zM264.6 757.3s51.8-55.6 146.4-80.1v-43.6h-79.1c0-137.9-19.5-160.8-19.5-206.9 0-101.5 61.8-183.9 187.6-183.9 125.7 0 187.6 82.4 187.6 183.9 0 49.1-19.4 72.5-19.4 206.9h-86.6v41.9c99.1 23.5 153.8 81.8 153.8 81.8H264.6z"/></svg></span> <div class="stack-y space-y-0 justify-center"> <div class="text-wrap"> <span class="italic text-current opacity-70">Verwijderde gebruiker</span> <span class="!ml-1"> </span> </div> <div class="opacity-light"> 12 jaar geleden </div> </div> </div> <div class="stack-x stack-x-0 items-center min-w-fit"> <div class="stack-x min-w-fit" x-data="VoteButtons" data-answer-id="1250666" data-votes-up="0" data-votes-down="0" data-url-up="/v/programmeren/324811/laat-html-code/1250666/thumb_up/" data-url-down="/v/programmeren/324811/laat-html-code/1250666/thumb_down/" > <button class="block-footer-button min-w-fit" :disabled="votingPaused" @click="vote('up')" > <div class="stack-x space-x-2.5" x-show="!hasUserVotedUp"> <span x-text="votesUp">0</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14.5 8.5h4.764a2 2 0 0 1 1.789 2.894l-3.5 7a2 2 0 0 1-1.79 1.106h-4.017c-.163 0-.326-.02-.485-.06L7.5 18.5m7-10v-5a2 2 0 0 0-2-2h-.095c-.5 0-.905.405-.905.905a3.61 3.61 0 0 1-.608 2.006L7.5 9.5v9m7-10h-2m-5 10h-2a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2H8"/></svg> </span> </div> <div class="stack-x space-x-2.5" x-show="hasUserVotedUp" x-cloak> <span x-text="votesUp">0</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 20 20"><path d="M2 8.5a1.5 1.5 0 1 1 3 0v6a1.5 1.5 0 0 1-3 0zm4-.167v5.43a2 2 0 0 0 1.106 1.79l.05.025A4 4 0 0 0 8.943 16h5.416a2 2 0 0 0 1.962-1.608l1.2-6A2 2 0 0 0 15.56 6H12V2a2 2 0 0 0-2-2 1 1 0 0 0-1 1v.667a4 4 0 0 1-.8 2.4L6.8 5.933a4 4 0 0 0-.8 2.4Z"/></svg> </span> </div> <input type="hidden" name="csrfmiddlewaretoken" :value="window.appConfig.csrf_token" /> </button> <button class="block-footer-button min-w-fit" :disabled="votingPaused" @click="vote('down')" > <div class="stack-x space-x-2.5" x-show="!hasUserVotedDown"> <span x-text="votesDown">0</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m14.508 15.994 4.764-.013c1.487-.004 2.449-1.57 1.781-2.899l-3.519-6.99a2 2 0 0 0-1.792-1.101L11.724 5c-.164 0-.325.021-.484.062l-3.758.95m7.027 9.98.013 5A2 2 0 0 1 12.528 23h-.096a.905.905 0 0 1-.908-.901 3.616 3.616 0 0 0-.613-2.006l-3.406-5.08-.024-9m7.027 9.982-2 .005M7.481 6.013l-2 .005a2 2 0 0 0-1.994 2.006l.016 6a2 2 0 0 0 2.005 1.994l2.5-.007"/></svg> </span> </div> <div class="stack-x space-x-2.5" x-show="hasUserVotedDown" x-cloak> <span x-text="votesDown">0</span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl ml-2.5" > <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m14.508 15.994 4.764-.013c1.487-.004 2.449-1.57 1.781-2.899l-3.519-6.99a2 2 0 0 0-1.792-1.101L11.724 5c-.164 0-.325.021-.484.062l-3.758.95m7.027 9.98.013 5A2 2 0 0 1 12.528 23h-.096a.905.905 0 0 1-.908-.901 3.616 3.616 0 0 0-.613-2.006l-3.406-5.08-.024-9m7.027 9.982-2 .005M7.481 6.013l-2 .005a2 2 0 0 0-1.994 2.006l.016 6a2 2 0 0 0 2.005 1.994l2.5-.007"/></svg> </span> </div> </button> <input type="hidden" name="csrfmiddlewaretoken" :value="window.appConfig.csrf_token" /> </div> <button class="block-footer-button min-w-fit children:active:opacity-80" x-on:click="commentsOpened=!commentsOpened" :class="!UserInfo.isAuthenticated ? '-mr-2.5' : ''" > <div class="stack-x space-x-2.5"> <span class="hidden sm:inline-block"> 1 reacties </span> <span class="inline-block sm:hidden !ml-0"> 1 </span> <span aria-hidden="true" class="icon aligned inline-block icon-2.5xl cursor-pointer" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 12c0 4.418-4.03 8-9 8a9.862 9.862 0 0 1-4.255-.95L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8Z"/></svg> </span> </div> </button> </div> </div> <div class="!mt-4" x-cloak x-show="commentsOpened==true"> <div x-data="{ 'UserInfo': UserInfo() }" > <div class="stack-y space-y-3 mb-4"> <div class="stack-x space-x-3 | relative " id="1232002" x-data="{ moreOpened: false }" data-entity-type="comment" > <div class="mt-3 min-w-fit"> <span class="icon default-avatar | w-10 h-10 text-current"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1000 1000"><path d="M599.8 375.6c-10.2 0-22.6 2.5-37.1 5.3-18.7 3.8-39.9 8-62.8 8-22.8 0-44-4.2-62.7-8-14.4-2.8-26.8-5.3-37-5.3-11.9 0-28.3 0-28.3 51.1 0 85.7 39.6 172.1 128 172.1S628 512.4 628 426.7c.1-51.1-16.3-51.1-28.2-51.1zM500 557.2c-44.2 0-57.2-42.9-57.2-42.9h114.3c.1 0-12.9 42.9-57.1 42.9zm-65.5 48v71.1c39.2 17.9 84.6 17.8 123.6 0v-67.1c-17.6 8.4-37 13.2-58.1 13.2-24.1 0-46-6.3-65.5-17.2z"/><path d="M500 10C229.4 10 10 229.4 10 500s219.4 490 490 490 490-219.4 490-490S770.6 10 500 10zM264.6 757.3s51.8-55.6 146.4-80.1v-43.6h-79.1c0-137.9-19.5-160.8-19.5-206.9 0-101.5 61.8-183.9 187.6-183.9 125.7 0 187.6 82.4 187.6 183.9 0 49.1-19.4 72.5-19.4 206.9h-86.6v41.9c99.1 23.5 153.8 81.8 153.8 81.8H264.6z"/></svg></span> </div> <div class="grow stack-x text-green-980 "> <div class="stack-y space-y-2 | w-full relative ml-1 px-4 py-3 rounded-md bg-gray-75"> <div class="flex flex-row justify-between flex-wrap | text-xs"> <div class="text-wrap | font-bold "> <span> <span class="italic text-current opacity-70">Verwijderde gebruiker</span> </span> </div> <div class="min-w-fit text-xs opacity-80"> 12 jaar geleden </div> </div> <div class="text-on-body whitespace-pre-line user-content">Inderdaad, ik wou dat ik hier een plusje kon geven maar nog niet genoeg punten.. :(</div> <div class="border-r-gray-75 | absolute w-0 h-0 !mt-0 border-t-[14px] border-t-transparent border-b-[14px] border-b-transparent border-r-[20px] right-[calc(100%_-_6px)] top-[2em] translate-y-[-50%]"> </div> </div> </div> </div> </div> <div class="mb-1" id="addComment"> <div class="stack-x space-x-3 items-center | relative" x-data="AddComment" > <div class="min-w-fit"> <img class="w-10 h-10 rounded-full" aria-hidden="true" :src="UserInfo.avatarUrl" x-show="UserInfo.avatarUrl" > <span class="icon default-avatar | w-10 h-10 text-current" x-show="!UserInfo.avatarUrl" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1000 1000"><path d="M599.8 375.6c-10.2 0-22.6 2.5-37.1 5.3-18.7 3.8-39.9 8-62.8 8-22.8 0-44-4.2-62.7-8-14.4-2.8-26.8-5.3-37-5.3-11.9 0-28.3 0-28.3 51.1 0 85.7 39.6 172.1 128 172.1S628 512.4 628 426.7c.1-51.1-16.3-51.1-28.2-51.1zM500 557.2c-44.2 0-57.2-42.9-57.2-42.9h114.3c.1 0-12.9 42.9-57.1 42.9zm-65.5 48v71.1c39.2 17.9 84.6 17.8 123.6 0v-67.1c-17.6 8.4-37 13.2-58.1 13.2-24.1 0-46-6.3-65.5-17.2z"/><path d="M500 10C229.4 10 10 229.4 10 500s219.4 490 490 490 490-219.4 490-490S770.6 10 500 10zM264.6 757.3s51.8-55.6 146.4-80.1v-43.6h-79.1c0-137.9-19.5-160.8-19.5-206.9 0-101.5 61.8-183.9 187.6-183.9 125.7 0 187.6 82.4 187.6 183.9 0 49.1-19.4 72.5-19.4 206.9h-86.6v41.9c99.1 23.5 153.8 81.8 153.8 81.8H264.6z"/></svg> </span> </div> <form id="addCommentForm" method="post" action="/v/programmeren/324811/laat-html-code/comment/answer/1250666/" class="grow stack-x space-x-2 items-center" x-ref="form" > <textarea name="text" placeholder="Voeg een reactie toe..." maxlength="5000" rows="1" class="grow ml-1 h-9 w-40 py-1.5 border border-gray-300 rounded-md overflow-hidden" x-validate.silent="required, minLength:10" x-auto-grow></textarea> <button type="button" class="button-filled w-9 h-9 rounded-full sm:w-auto sm:rounded-md text-sm" :disabled="isLoading" @click="addComment" > <span class="hidden sm:block">Voeg reactie toe</span> <span aria-hidden="true" class="icon inline-block w-4 h-4 block sm:hidden" > <svg xmlns="http://www.w3.org/2000/svg" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg> </span> </button> </form> </div> </div> </div> </div> </div> </div> </div> <div class=" bg-body-container border-gray-200 px-4 h-2 border-b sm:px-5 sm:border-0 sm:rounded-b-md"> </div> </div> </div> </div> <div class="space-y-5 mt-5"> <div x-data="{ ...AddAnswerBlock(3), &#39;UserInfo&#39;: UserInfo()}" x-on:click.outside="collapsed=true"> <div class=" text-white relative sm:shadow sm:shadow-gray-400/80 sm:rounded-md"> <div class="bg-primary border-gray-200 | pt-4 px-4 sm:pt-5 sm:px-5 sm:border-0 sm:rounded-t-md pb-4"> <h2 class="text-white block-header" x-ref="block_header"> Weet jij het beter..? </h2> </div> <div class="bg-primary border-gray-200 px-4 -mb-2 border-b sm:px-5 sm:border-0 sm:rounded-b-md " > <form id="addAnswerForm" method="POST" action="/v/programmeren/324811/laat-html-code/answer/" enctype="multipart/form-data" class="pb-6" x-ref="form" > <p class="p-2 mb-4 text-xs text-on-error rounded" :class="showDailyLimitsError ? 'bg-accentone' : 'bg-yellow-700'" x-show="hasErrorMessage" x-cloak > <span x-show="showOwnQuestionError" x-cloak> Het is niet mogelijk om je eigen vraag te beantwoorden </span> <span x-show="showAnswerOnceError" x-cloak> Je mag slechts 1 keer antwoord geven op een vraag </span> <span x-show="showDailyLimitsError" x-cloak> Je hebt vandaag al <span x-text="UserInfo.dailyLimits.maxAnswers"></span> antwoorden gegeven. Morgen mag je opnieuw maximaal <span x-text="UserInfo.dailyLimits.maxAnswers"></span> antwoorden geven. </span> </p> <div class="stack-y space-y-10" > <div class="space-y-6 !border-t-0" > <div class="stack-y space-y-1 !mt-0"> <textarea name="text" cols="" rows="" placeholder="Plaats je antwoord" maxlength="5000" minlength="10" class="w-full h-10" x-model="answer" x-bind:disabled="hasErrorMessage === true" x-bind:class="hasErrorMessage || collapsed ? &#x27;h-10 overflow-hidden cursor-pointer&#x27; : &#x27;h-36 cursor-default&#x27;" x-validate="required, minLength:10" data-natural-name="je antwoord" data-server-error="" x-transition="" @focus="collapsed = false" required id="id_text"> </textarea> <div x-show="!collapsed" x-cloak> <span class="float-right text-xs text-blue-50"> <span x-count-chars-from="#id_text">0</span>&nbsp;/&nbsp;<span>5000</span> </span> <span class="error-message" x-validate-message="text"></span> </div> </div> <div class="form-group-multiple transition ease-in-out" x-show="!collapsed" x-cloak > <div> <div class="space-y space-y-1 !mt-1"> <div class="flex items-center justify-center sm:justify-start" x-data="ImageInput" x-init=" editMode = false; showImage= false; " x-transition.opacity > <input type="file" name="image" class="hidden w-0" accept="image/*" x-ref="fileinput" x-validate="optional" data-server-error="" id="id_image"> <button type="button" class="button-tonal rounded-full text-sm w-full sm:w-auto" x-show="!showImage" @click="openFileDialog; showImage!=showImage" > Afbeelding toevoegen&hellip; </button> <div class="shrink-0 relative mr-5 -mt-1" x-show="showImage" x-cloak> <img class="h-32 w-32 ml-3 object-cover rounded border border-primary-on" alt="Gekozen afbeelding" x-ref="imagepreview" > <button type="button" class="button-outlined rounded-full px-0 w-4 h-4 text-sm absolute -top-1.5 -right-1.5 bg-body-container text-on-body-container" x-on:click="removeImage"> <span aria-hidden="true" class="icon inline-block w3 h-3" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg> </span> </button> </div> </div> <span class="error-message" x-validate-message="image"></span> </div> <div :class="showImage ? 'mt-3' : 'mt-6'"> <div class="form-group space-y-3 " x-data="SourcesInput" > <button type="button" class="button-tonal rounded-full text-sm w-full sm:w-auto !text-sm" :class="sourcesInputOpened ? 'bg-gray-100':''" @click="sourcesInputOpened = !sourcesInputOpened" > Bron toevoegen <span aria-hidden="true" class="icon aligned inline-block ml-1" :class="sourcesInputOpened ? 'rotate-180 -translate-y-px' : ''"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41 8 12 12.58 16.59 8 18 9.41l-6 6-6-6z"/></svg> </span> </button> <div class="space-y-3 !-mb-1" x-show="sourcesInputOpened" :class="allSourcesShown() ? '' : 'sm:!-mb-6'" x-transition.opacity x-cloak > <div class="stack-y space-y-3"> <div class="stack-x items-center" x-show="sources[0].value || !sources[0].hidden" > <input name="form-0-url" placeholder="Bron / Url" class="w-full" :type="sources[0].value || !sources[0].hidden ? 'text' : 'hidden'" x-model="sources[0].value" x-validate="optional, url, differsFromElementValues:[#form-1-url #form-2-url]" data-error-differsFromElementValues="De toegevoegde bronnen moeten uniek zijn" data-validate-if-hidden x-ref="input-0" id="form-0-url" /> <button type="button" class="button-outlined rounded-full px-0 w-4 h-4 text-sm grow-0 shrink-0 ml-3" x-on:click="removeSource(0)"> <span aria-hidden="true" class="icon inline-block w3 h-3" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg> </span> </button> </div> <span class="error-message !mt-1 w-full" x-show="sources[0].value && !(sources[0].hidden)" x-validate-message="form-0-url" ></span> <div class="stack-x items-center" x-show="sources[1].value || !sources[1].hidden" > <input name="form-1-url" placeholder="Bron / Url" class="w-full" :type="sources[1].value || !sources[1].hidden ? 'text' : 'hidden'" x-model="sources[1].value" x-validate="optional, url, differsFromElementValues:[#form-0-url #form-2-url]" data-error-differsFromElementValues="De toegevoegde bronnen moeten uniek zijn" data-validate-if-hidden x-ref="input-1" id="form-1-url" /> <button type="button" class="button-outlined rounded-full px-0 w-4 h-4 text-sm grow-0 shrink-0 ml-3" x-on:click="removeSource(1)"> <span aria-hidden="true" class="icon inline-block w3 h-3" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg> </span> </button> </div> <span class="error-message !mt-1 w-full" x-show="sources[1].value && !(sources[1].hidden)" x-validate-message="form-1-url" ></span> <div class="stack-x items-center" x-show="sources[2].value || !sources[2].hidden" > <input name="form-2-url" placeholder="Bron / Url" class="w-full" :type="sources[2].value || !sources[2].hidden ? 'text' : 'hidden'" x-model="sources[2].value" x-validate="optional, url, differsFromElementValues:[#form-0-url #form-1-url]" data-error-differsFromElementValues="De toegevoegde bronnen moeten uniek zijn" data-validate-if-hidden x-ref="input-2" id="form-2-url" /> <button type="button" class="button-outlined rounded-full px-0 w-4 h-4 text-sm grow-0 shrink-0 ml-3" x-on:click="removeSource(2)"> <span aria-hidden="true" class="icon inline-block w3 h-3" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg> </span> </button> </div> <span class="error-message !mt-1 w-full" x-show="sources[2].value && !(sources[2].hidden)" x-validate-message="form-2-url" ></span> </div> <div class="text-light | flex justify-end !mt-1 text-sm" x-show="!allSourcesShown()" > +&nbsp;<button class="pr-8 hover:underline" type="button" @click="addSource" > Nog een bron toevoegen </button> </div> <div class="hidden"> <input type="hidden" name="form-TOTAL_FORMS" value="3" id="id_form-TOTAL_FORMS"><input type="hidden" name="form-INITIAL_FORMS" value="0" id="id_form-INITIAL_FORMS"><input type="hidden" name="form-MIN_NUM_FORMS" value="0" id="id_form-MIN_NUM_FORMS"><input type="hidden" name="form-MAX_NUM_FORMS" value="1000" id="id_form-MAX_NUM_FORMS"> </div> </div> </div> </div> <div class="mt-6"> <div class="form-group space-y-3" x-data="VideoInput" x-model="videoUrl" x-modelable="video" x-init=" video = ''; videoInputOpened = false " > <button type="button" class="button-tonal rounded-full text-sm w-full sm:w-auto" :class="videoInputOpened ? 'bg-gray-100':''" @click="videoInputOpened = !videoInputOpened" > Video toevoegen <span aria-hidden="true" class="icon aligned inline-block ml-1" :class="videoInputOpened ? 'rotate-180 -translate-y-px' : ''"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41 8 12 12.58 16.59 8 18 9.41l-6 6-6-6z"/></svg> </span> </button> <div class="stack-y space-y-1" x-show="videoInputOpened" x-transition.opacity x-cloak > <div class="flex items-center"> <input type="url" name="video" class="w-full" placeholder="Typ of plak hier de URL van de video" type="url" x-model="video" x-validate="optional, url, videoUrl" data-validate-if-hidden="" data-server-error="" id="id_video"> <button type="button" class="button-outlined rounded-full px-0 w-4 h-4 text-sm grow-0 shrink-0 ml-3" x-on:click="removeVideo"> <span aria-hidden="true" class="icon inline-block w3 h-3" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg> </span> </button> </div> <span class="error-message w-full" x-validate-message="video" ></span> </div> </div> </div> </div> </div> </div> <div class="stack-y space-y-3 pt-6 !mt-2 w-full sm:space-y-0 sm:stack-x sm:space-x-4 sm:justify-end sm:pt-4" x-cloak x-show=!collapsed> <div class="form-group flex justify-end space-x-2 !mt-8 sm:!mt-6" data-ga-event-context="antwoord-geven" > <button type="button" class="button-filled is-form-action" :class="isSubmitting && 'loading'" :disabled="isSubmitting" x-validate-on-click.disable="isSubmitting=true;submitAnswer()" > <span aria-hidden="true" class="icon inline-block w-4 h-4 mr-3" x-cloak x-show=isSubmitting> <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="24" height="24" viewBox="0 0 100 100"><rect width="6" height="24" x="47" y="2" fill="currentColor" rx="3" ry="3.84"><animate attributeName="opacity" begin="-0.9166666666666666s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="6" height="24" x="47" y="2" fill="currentColor" rx="3" ry="3.84" transform="rotate(30 50 50)"><animate attributeName="opacity" begin="-0.8333333333333334s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="6" height="24" x="47" y="2" fill="currentColor" rx="3" ry="3.84" transform="rotate(60 50 50)"><animate attributeName="opacity" begin="-0.75s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="6" height="24" x="47" y="2" fill="currentColor" rx="3" ry="3.84" transform="rotate(90 50 50)"><animate attributeName="opacity" begin="-0.6666666666666666s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="6" height="24" x="47" y="2" fill="currentColor" rx="3" ry="3.84" transform="rotate(120 50 50)"><animate attributeName="opacity" begin="-0.5833333333333334s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="6" height="24" x="47" y="2" fill="currentColor" rx="3" ry="3.84" transform="rotate(150 50 50)"><animate attributeName="opacity" begin="-0.5s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="6" height="24" x="47" y="2" fill="currentColor" rx="3" ry="3.84" transform="rotate(180 50 50)"><animate attributeName="opacity" begin="-0.4166666666666667s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="6" height="24" x="47" y="2" fill="currentColor" rx="3" ry="3.84" transform="rotate(210 50 50)"><animate attributeName="opacity" begin="-0.3333333333333333s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="6" height="24" x="47" y="2" fill="currentColor" rx="3" ry="3.84" transform="rotate(240 50 50)"><animate attributeName="opacity" begin="-0.25s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="6" height="24" x="47" y="2" fill="currentColor" rx="3" ry="3.84" transform="rotate(270 50 50)"><animate attributeName="opacity" begin="-0.16666666666666666s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="6" height="24" x="47" y="2" fill="currentColor" rx="3" ry="3.84" transform="rotate(300 50 50)"><animate attributeName="opacity" begin="-0.08333333333333333s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect><rect width="6" height="24" x="47" y="2" fill="currentColor" rx="3" ry="3.84" transform="rotate(330 50 50)"><animate attributeName="opacity" begin="0s" dur="1s" keyTimes="0;1" repeatCount="indefinite" values="1;0"/></rect></svg> </span> Plaats je antwoord </button> </div> </div> <input type="hidden" name="csrfmiddlewaretoken" :value="window.appConfig.csrf_token" /> </div> </form> </div> <div class=" bg-primary border-gray-200 px-4 h-2 border-b sm:px-5 sm:border-0 sm:rounded-b-md"> </div> </div> </div> <div id="o1_ace" class="ad_widget mt-5 mx-auto min-h-0" data-ace-position="o1" x-move-element-on-mobile.after=div.answer:nth-child(2) x-data> <script type="text/javascript"> if (window.loadAdvertSlot) { window.loadAdvertSlot("o1", "o1_ace"); } </script> <script type="text/javascript"> if (window.ootag && window.ootag.queue) { ootag.queue.push(function () {ootag.defineSlot({adSlot: "goeievraag_o1", targetId: "o1_ace"});}); } </script> </div> <div class="OUTBRAIN" data-src="https://www.startpagina.nl/v/computers-internet/programmeren/vraag/324811/laat-html-code/" data-widget-id="AR_1"></div> </div> </div> </main> </div> <aside class="stack-y content-aside md:mt-8"> <div x-data="{ ...LoginBlock(), &#39;UserInfo&#39;: UserInfo() }" :hidden="UserInfo.isAuthenticated" class="mb-5"> <div class=" text-current relative sm:shadow sm:shadow-gray-400/80 sm:rounded-md"> <div class="bg-body-container border-gray-200 | pt-4 px-4 sm:pt-5 sm:px-5 sm:border-0 sm:rounded-t-md pb-4"> <div class="text-current block-header" x-ref="block_header"> Inloggen </div> </div> <div class="bg-body-container border-gray-200 px-4 -mb-2 border-b sm:px-5 sm:border-0 sm:rounded-b-md pt-2 pb-4 sm:pb-5 " > <div class="stack-y space-y-4"> <div class="button-filled px-0"> <div class="flex items-center justify-center h-full p-3 border-r border-white"> <span aria-hidden="true" class="icon inline-block w-6 h-6" > <svg viewBox="0 0 1792 1792" width="24" height="24"><path fill="currentColor" d="M1600 1405q0 120-73 189.5t-194 69.5H459q-121 0-194-69.5T192 1405q0-53 3.5-103.5t14-109T236 1084t43-97.5 62-81 85.5-53.5T538 832q9 0 42 21.5t74.5 48 108 48T896 971t133.5-21.5 108-48 74.5-48 42-21.5q61 0 111.5 20t85.5 53.5 62 81 43 97.5 26.5 108.5 14 109 3.5 103.5zm-320-893q0 159-112.5 271.5T896 896 624.5 783.5 512 512t112.5-271.5T896 128t271.5 112.5T1280 512z"/></svg> </span> </div> <a :href="window.appConfig.registrationIsNotCompleted ? '/v/gebruiker/aanmelden/' : '/v/gebruiker/login/'" class="flex justify-center items-center h-full w-full " x-text= "window.appConfig.registrationIsNotCompleted ? 'Kies een gebruikersnaam' : 'Inloggen met Mijn Account'" > </a> </div> <div class="register-message flex justify-center text-sm sm:justify-start" :class="window.appConfig.registrationIsNotCompleted ? 'hidden' : ''" > Nog geen account?&nbsp; <a href="/v/gebruiker/aanmelden/" class="text-blue underline" > Registreer je gratis </a> </div> </div> </div> <div class=" bg-body-container border-gray-200 px-4 h-2 border-b sm:px-5 sm:border-0 sm:rounded-b-md"> </div> </div> </div> <div id="r1_ace" class="ad_widget mb-5 mx-auto !border-0 !hidden md:!block min-h-[15rem]" data-ace-position="r1" x-data> <script type="text/javascript"> if (window.loadAdvertSlot) { window.loadAdvertSlot("r1", "r1_ace"); } </script> <script type="text/javascript"> if (window.ootag && window.ootag.queue) { ootag.queue.push(function () {ootag.defineSlot({adSlot: "goeievraag_r1", targetId: "r1_ace"});}); } </script> </div> <div class="mb-5 sidebar"> <div > <div class=" text-white relative sm:shadow sm:shadow-gray-400/80 sm:rounded-md"> <div class="bg-primary border-gray-200 | pt-4 px-4 sm:pt-5 sm:px-5 sm:border-0 sm:rounded-t-md pb-4"> <div class="text-white block-header" x-ref="block_header"> Stel zelf een vraag </div> </div> <div class="bg-primary border-gray-200 px-4 -mb-2 border-b sm:px-5 sm:border-0 sm:rounded-b-md " > <div class="pb-4" x-data="{ ...AddQuestionMiniBlock(), 'UserInfo': UserInfo() }" > <form method="get" action="/v/vraag/stellen/" class="stack-y space-y-4" id="addQuestionMiniForm" x-ref="form" > <p class="p-2 bg-accentone text-xs text-on-error rounded" x-show="UserInfo.dailyLimits.maxQuestionsReached" x-cloak :hidden="!UserInfo.dailyLimits.maxQuestionsReached" hidden > Je hebt vandaag al <span x-text="UserInfo.dailyLimits.maxQuestions"></span> vragen gesteld. Morgen mag je opnieuw maximaal <span x-text="UserInfo.dailyLimits.maxQuestions"></span> vragen stellen. </p> <div class="stack-y space-y-1"> <input type="text" name="title" placeholder="Waar wil je antwoord op krijgen?" cols="" rows="" maxlength="100" minlength="10" class="w-full text-gray-500 placeholder-gray-400" x-validate.silent="required" data-natural-name="je vraag" :disabled="UserInfo.dailyLimits.maxQuestionsReached === true" required id="id_title"> <span class="flex justify-end text-xs text-blue-50" x-show="!UserInfo.dailyLimits.maxQuestionsReached" > <span x-count-chars-from="#id_title">0</span>&nbsp;/&nbsp;100 </span> </div> <div class="flex justify-end !mt-3" x-show="!UserInfo.dailyLimits.maxQuestionsReached" > <button type="button" class="button-filled is-small-button" x-on:click.prevent="submitQuestion" > Stel je vraag </button> </div> </form> </div> </div> <div class=" bg-primary border-gray-200 px-4 h-2 border-b sm:px-5 sm:border-0 sm:rounded-b-md"> </div> </div> </div> </div> <div class="mb-5 newest-questions-block"> <div > <div class=" text-current relative sm:shadow sm:shadow-gray-400/80 sm:rounded-md"> <div class="bg-body-container border-gray-200 | pt-4 px-4 sm:pt-5 sm:px-5 sm:border-0 sm:rounded-t-md pb-4"> <div class="text-current block-header" x-ref="block_header"> Top 3 nieuwste vragen </div> </div> <div class="bg-body-container border-gray-200 px-4 -mb-2 border-b sm:px-5 sm:border-0 sm:rounded-b-md " > <ol class="newest-questions-list"> <li> <a href="/v/maatschappij/samenleving/vraag/716248/effect-melleretten-baby-50-jarige/" class="font-condensed text-base text-primary my-auto line-clamp-2">Wat kan het effect van melleretten hebben van baby tot 50 jarige vrouw?</a> </li> <li> <a href="/v/werk-onderwijs/carriere-werk/vraag/716245/rechten-ziektemelding-verkeersongeval/" class="font-condensed text-base text-primary my-auto line-clamp-2">Wat zijn mijn rechten bij ziektemelding (door verkeersongeval)?</a> </li> <li> <a href="/v/elektronica/huishoudelijke-apparaten/vraag/716243/bewegende-dansende-trillende-wasmachine/" class="font-condensed text-base text-primary my-auto line-clamp-2">Wat te doen bij bewegende, dansende en trillende wasmachine?</a> </li> </ol> </div> <div class=" bg-body-container border-gray-200 px-4 h-2 border-b sm:px-5 sm:border-0 sm:rounded-b-md"> </div> </div> </div> </div> <div class="mb-5"> <div > <div class=" text-current relative sm:shadow sm:shadow-gray-400/80 sm:rounded-md"> <div class="bg-body-container border-gray-200 | pt-4 px-4 sm:pt-5 sm:px-5 sm:border-0 sm:rounded-t-md pb-4"> <h2 class="text-current block-header" x-ref="block_header"> Wellicht zijn deze vragen ook interessant? </h2> </div> <div class="bg-body-container border-gray-200 px-4 -mb-2 border-b sm:px-5 sm:border-0 sm:rounded-b-md " > <ol class="stack-y space-y-4 pt-1.5 pb-5 divide-y divide-gray-200 "> <li class="flex pt-4 first:pt-0"> <a href="/v/computers-internet/programmeren/vraag/190844/programma-t-algemene-website-bouwen/" class="w-full text-primary" > <span class="font-condensed mr-1"> In welk programma kan ik t beste een (algemene) website bouwen? </span> <span class="underline text-xs whitespace-nowrap"> 8 antwoorden </span> </a> </li> <li class="flex pt-4 first:pt-0"> <a href="/v/computers-internet/programmeren/vraag/335932/reacties-mensen-site-html/" class="w-full text-primary" > <span class="font-condensed mr-1"> Hoe kan ik reacties van mensen op mijn site krijgen in html? </span> <span class="underline text-xs whitespace-nowrap"> 2 antwoorden </span> </a> </li> <li class="flex pt-4 first:pt-0"> <a href="/v/computers-internet/programmeren/vraag/429101/cms-download-site/" class="w-full text-primary" > <span class="font-condensed mr-1"> Welke cms voor download site? </span> <span class="underline text-xs whitespace-nowrap"> 1 antwoorden </span> </a> </li> </ol> </div> <div class=" bg-body-container border-gray-200 px-4 h-2 border-b sm:px-5 sm:border-0 sm:rounded-b-md"> </div> </div> </div> </div> <div id="r2_ace" class="ad_widget mb-5 !border-0 min-h-0" data-ace-position="r2" x-move-element-on-mobile.after=.newest-questions-block x-data> <script type="text/javascript"> if (window.loadAdvertSlot) { window.loadAdvertSlot("r2", "r2_ace"); } </script> <script type="text/javascript"> if (window.ootag && window.ootag.queue) { ootag.queue.push(function () {ootag.defineSlot({adSlot: "goeievraag_r2", targetId: "r2_ace"});}); } </script> </div> </aside> </div> </div> <div class="!mt-0"> </div> <div id="h2_ace" class="ad_widget mt-8 min-h-0" data-ace-position="h2" x-data> <script type="text/javascript"> if (window.loadAdvertSlot) { window.loadAdvertSlot("h2", "h2_ace"); } </script> <script type="text/javascript"> if (window.ootag && window.ootag.queue) { ootag.queue.push(function () {ootag.defineSlot({adSlot: "goeievraag_h2", targetId: "h2_ace"});}); } </script> </div> <script type="application/ld+json"> {"@context": "https://schema.org", "@type": "QAPage", "mainEntity": {"@type": "Question", "answerCount": 7, "author": {"@type": "Person", "name": "", "url": ""}, "dateCreated": "2012-04-23T11:45:43+00:00", "image": "", "name": "hoe laat ik html code zien, zonder dat het wat doet?", "suggestedAnswer": [{"@type": "Answer", "author": {"@type": "Person", "award": "", "name": "", "url": ""}, "dateCreated": "2012-04-23T11:52:06+00:00", "downvoteCount": 1, "image": "", "text": "Dan zet je in plaats van \u003c \u0026lt; en in plaats van \u003e \u0026gt;\nAls dat niet werkt dan de alttoets ingedrukt houden en voor \u003c 0139 typen en voor \u003e 0155", "upvoteCount": 2, "url": "https://www.startpagina.nl/v/computers-internet/programmeren/vraag/324811/laat-html-code/#1249816"}, {"@type": "Answer", "author": {"@type": "Person", "award": "", "name": "", "url": ""}, "dateCreated": "2012-04-23T11:52:36+00:00", "downvoteCount": 1, "image": "", "text": "Wat dan denk ik het makkelijkste werkt, is de \u0027naakte\u0027 code even plakken op www.pastebin.com en de link van het bestand in de mail plakken.", "upvoteCount": 1, "url": "https://www.startpagina.nl/v/computers-internet/programmeren/vraag/324811/laat-html-code/#1249817"}, {"@type": "Answer", "author": {"@type": "Person", "award": "", "name": "", "url": ""}, "dateCreated": "2012-04-23T11:55:53+00:00", "downvoteCount": 1, "image": "", "text": "De code als een tekstdocument wegschrijven (niet als platte tekst) en dan e-mailen.", "upvoteCount": 3, "url": "https://www.startpagina.nl/v/computers-internet/programmeren/vraag/324811/laat-html-code/#1249819"}, {"@type": "Answer", "author": {"@type": "Person", "award": "", "name": "", "url": ""}, "dateCreated": "2012-04-23T14:21:47+00:00", "downvoteCount": 3, "image": "", "text": "htmlspecialchars();", "upvoteCount": 0, "url": "https://www.startpagina.nl/v/computers-internet/programmeren/vraag/324811/laat-html-code/#1249918"}, {"@type": "Answer", "author": {"@type": "Person", "award": "", "name": "", "url": ""}, "dateCreated": "2012-04-23T15:08:01+00:00", "downvoteCount": 0, "image": "", "text": "Het bericht als tekst emailen en niet als html gecodeerd.\n(Of juist als html...)\n\nHet resultaat hangt af van de email programma\u0027s die aan beide zijden gebruikt worden...\n\nHet lukt mij iig niet om jouw probleem te reproduceren met \nthunderbird, outlook, webmail (exchange) en gmail in allerlei combinaties.\nAls ik html code intype komt er html code uit (ongeformatteerd)", "upvoteCount": 0, "url": "https://www.startpagina.nl/v/computers-internet/programmeren/vraag/324811/laat-html-code/#1249950"}, {"@type": "Answer", "author": {"@type": "Person", "award": "Goud in deze categorie", "name": "rose", "url": "https://www.startpagina.nl/v/profiel/rose/"}, "dateCreated": "2012-04-24T08:52:24+00:00", "downvoteCount": 0, "image": "", "text": "Zet je code in een tekstbestand, pak het in met 7-zip (Of Winrar of Winzip o.i.d.) en mail het als bijlage.", "upvoteCount": 0, "url": "https://www.startpagina.nl/v/computers-internet/programmeren/vraag/324811/laat-html-code/#1250564"}, {"@type": "Answer", "author": {"@type": "Person", "award": "", "name": "", "url": ""}, "dateCreated": "2012-04-24T12:17:04+00:00", "downvoteCount": 0, "image": "", "text": "Het allermakkelijkst:\n\n\u003ccode\u003e...\u003c/code\u003e\n\nhttp://www.quackit.com/html/tags/html_code_tag.cfm", "upvoteCount": 0, "url": "https://www.startpagina.nl/v/computers-internet/programmeren/vraag/324811/laat-html-code/#1250666"}], "text": "Ik wil iemand een stukje \"naakte\" html code emailen. Probleem is dat de code bij aankomst uiteraard is geformatteerd en het eindresultaat al te zien is. Ik wil zowel het eindresultaat alswel de code laten zien. Heb het al geprobeerd tussen \u003cxmp\u003e en \u003ctextarea\u003e tags te zetten maar dat werkt niet... Hoe doe ik dit?"}} </script> <nav role="navigation" class="hidden sm:flex h-12 bg-primary mt-8"> <div class="stack-x space-x-8 items-center | w-full max-content-width mx-auto px-safe-area-8 | text-sm text-white"> <a href="/v/voorwaarden" target="_blank" class="hover:underline" > Algemene Voorwaarden </a> <a href="https://www.startpagina.nl/klantenservice" target="_blank" class="hover:underline" > Contact </a> <a href="https://www.startpagina.nl/adverteren" target="_blank" class="hover:underline" > Adverteren </a> <a href="/v/huisregels" target="_blank" class="hover:underline" > Huisregels </a> </div> </nav> <footer class="mt-8 mx-auto margin-bottom-safe-area px-safe-area-3 w-full max-content-width sm+:px-safe-area-8"> <div class="stack-y space-y-6"> <div class="stack-y space-y-4 sm+:stack-x sm+:space-x-4 sm+:space-y-0 "> <div class="grow stack-y space-y-4 items-center | sm+:!items-start"> <a class="h-12" href="/v/" > <span class="sr-only">Back to frontpage</span> <svg viewBox="0 0 147 42" width="24" height="7" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M29.36 40.103c.87 0 1.577-.286 2.122-.857.546-.572.818-1.292.818-2.161v-1.28c0-.865-.273-1.585-.82-2.158-.547-.572-1.255-.859-2.124-.859-.85 0-1.54.287-2.073.86-.532.572-.798 1.292-.798 2.158v1.279c0 .87.266 1.59.798 2.16.532.572 1.225.858 2.078.858zm0-.972c-.523 0-.937-.191-1.24-.574-.302-.382-.453-.873-.453-1.472v-1.29c0-.592.15-1.078.454-1.46.302-.38.714-.57 1.235-.57.54 0 .97.19 1.287.57.317.382.476.868.476 1.46v1.29c0 .602-.157 1.094-.472 1.475-.314.38-.743.57-1.286.57zm5.35.869v-3.833a1.243 1.243 0 011.07-.576c.334 0 .584.084.749.251.164.168.246.45.246.847V40h1.187v-3.32c0-.707-.154-1.227-.462-1.56-.307-.334-.736-.5-1.286-.5a1.74 1.74 0 00-.886.226 1.89 1.89 0 00-.652.633l-.069-.762h-1.084V40h1.187zm6.423.103c.316 0 .593-.065.83-.193.238-.129.441-.317.61-.564l.118.654h.996v-7.617H42.5v2.905a1.74 1.74 0 00-.588-.496 1.666 1.666 0 00-.77-.173c-.653 0-1.161.258-1.523.774-.36.516-.542 1.196-.542 2.039v.102c0 .768.181 1.389.542 1.86.362.473.866.709 1.514.709zm.303-.967c-.407 0-.704-.145-.891-.435-.187-.29-.281-.679-.281-1.167v-.102c0-.547.096-.99.288-1.33.192-.341.49-.511.894-.511.24 0 .449.054.625.163.175.11.319.262.43.457v2.305c-.111.198-.254.351-.428.459a1.191 1.191 0 01-.637.16zm5.89.967c.434 0 .815-.06 1.143-.181.33-.12.593-.269.791-.444l-.38-.777a2.688 2.688 0 01-.66.337 2.54 2.54 0 01-.82.117c-.4 0-.714-.133-.94-.4-.226-.267-.349-.61-.368-1.03l.01-.025h3.295v-.698c0-.726-.19-1.305-.569-1.736-.379-.431-.925-.647-1.638-.647a2.093 2.093 0 00-1.658.755c-.44.506-.661 1.143-.661 1.911v.195c0 .769.222 1.398.666 1.888.445.49 1.041.735 1.79.735zm.894-3.272h-2.094l-.01-.024c.045-.358.163-.654.351-.887a.89.89 0 01.723-.349c.345 0 .603.106.774.318.171.211.256.485.256.82v.122zM51.64 40v-3.672a.965.965 0 01.36-.415c.154-.098.347-.146.578-.146l.508.02.142-1.11a1.462 1.462 0 00-.171-.04 1.106 1.106 0 00-.2-.018 1.2 1.2 0 00-.726.23c-.21.153-.381.364-.515.634l-.078-.766h-1.084V40h1.187zm4.212.103c.316 0 .592-.065.83-.193.238-.129.441-.317.61-.564l.118.654h.996v-7.617h-1.187v2.905a1.74 1.74 0 00-.588-.496 1.666 1.666 0 00-.77-.173c-.653 0-1.161.258-1.523.774-.36.516-.542 1.196-.542 2.039v.102c0 .768.181 1.389.542 1.86.362.473.866.709 1.514.709zm.303-.967c-.407 0-.704-.145-.891-.435-.188-.29-.281-.679-.281-1.167v-.102c0-.547.096-.99.288-1.33.192-.341.49-.511.894-.511.24 0 .449.054.625.163.175.11.319.262.43.457v2.305c-.111.198-.254.351-.428.459a1.191 1.191 0 01-.637.16zm5.89.967c.434 0 .815-.06 1.143-.181.33-.12.593-.269.791-.444l-.38-.777a2.688 2.688 0 01-.66.337 2.54 2.54 0 01-.82.117c-.4 0-.714-.133-.94-.4-.226-.267-.349-.61-.369-1.03l.01-.025h3.296v-.698c0-.726-.19-1.305-.569-1.736-.379-.431-.925-.647-1.638-.647a2.093 2.093 0 00-1.658.755c-.44.506-.661 1.143-.661 1.911v.195c0 .769.222 1.398.666 1.888.445.49 1.041.735 1.79.735zm.894-3.272h-2.094l-.01-.024c.045-.358.163-.654.351-.887a.89.89 0 01.723-.349c.345 0 .603.106.774.318.17.211.256.485.256.82v.122zm4.5 3.272c.433 0 .814-.06 1.142-.181.33-.12.593-.269.791-.444l-.38-.777a2.688 2.688 0 01-.66.337 2.54 2.54 0 01-.82.117c-.4 0-.714-.133-.94-.4-.226-.267-.35-.61-.369-1.03l.01-.025h3.296v-.698c0-.726-.19-1.305-.569-1.736-.379-.431-.925-.647-1.638-.647a2.093 2.093 0 00-1.658.755c-.44.506-.661 1.143-.661 1.911v.195c0 .769.222 1.398.666 1.888.445.49 1.041.735 1.79.735zm.893-3.272h-2.094l-.01-.024c.045-.358.163-.654.351-.887a.89.89 0 01.723-.349c.345 0 .603.106.774.318.17.211.256.485.256.82v.122zM71.831 40v-7.617h-1.187V40h1.187zm6.464 0l1.875-5.283h-1.225l-1.05 3.496-.093.43h-.03l-.087-.43-1.079-3.496H75.38L77.265 40h1.03zm4.129.103c.329 0 .626-.084.89-.252.266-.168.48-.375.643-.622.01.126.028.253.056.38s.063.258.105.391h1.201a3.332 3.332 0 01-.141-.588c-.03-.2-.044-.41-.044-.628v-2.348c0-.586-.19-1.036-.567-1.348-.377-.313-.874-.469-1.489-.469-.635 0-1.15.161-1.545.484-.396.322-.582.691-.56 1.108l.005.03h1.143a.62.62 0 01.24-.504c.159-.13.374-.195.644-.195.303 0 .535.078.698.234.163.157.244.373.244.65v.464h-.923c-.732 0-1.3.142-1.704.427-.403.285-.605.683-.605 1.194 0 .495.147.884.442 1.167.294.283.717.425 1.267.425zm.239-.953c-.244 0-.432-.059-.564-.178a.615.615 0 01-.198-.48c0-.232.098-.433.293-.604.196-.17.466-.256.81-.256h.943v.781c-.078.192-.237.363-.476.513-.24.15-.509.224-.808.224zm4.993.85v-3.833a1.243 1.243 0 011.07-.576c.334 0 .584.084.748.251.165.168.247.45.247.847V40h1.187v-3.32c0-.707-.154-1.227-.462-1.56-.308-.334-.736-.5-1.287-.5a1.74 1.74 0 00-.886.226 1.89 1.89 0 00-.652.633l-.068-.762h-1.084V40h1.187zm9.79.103c.77 0 1.393-.175 1.867-.525.474-.35.71-.821.71-1.414 0-.56-.198-1.02-.595-1.382-.397-.361-.978-.644-1.743-.85-.583-.159-1-.328-1.253-.507-.252-.18-.378-.404-.378-.674a.9.9 0 01.349-.732c.233-.19.566-.284.998-.284.46 0 .813.113 1.06.34.247.226.371.521.371.886h1.138l.01-.03c.016-.589-.213-1.093-.686-1.513-.474-.42-1.102-.63-1.883-.63-.748 0-1.36.186-1.833.557-.474.37-.71.843-.71 1.416 0 .556.213 1.006.641 1.35.428.343 1.04.62 1.834.827.557.15.945.32 1.164.508.22.19.33.432.33.728a.844.844 0 01-.366.72c-.244.177-.586.266-1.026.266-.478 0-.867-.106-1.167-.32-.3-.213-.449-.536-.449-.969h-1.142l-.01.03c-.016.683.255 1.22.815 1.613.56.392 1.211.589 1.953.589zm5.466 0c.15 0 .294-.016.434-.047.14-.03.26-.074.362-.13l-.127-.868a1.157 1.157 0 01-.367.063.513.513 0 01-.376-.14c-.094-.092-.141-.247-.141-.465v-2.92h.947v-.88h-.947v-1.283h-1.182v1.284h-.806v.879h.806v2.92c0 .547.124.948.371 1.203.248.256.59.384 1.026.384zm3.371 0c.329 0 .626-.084.891-.252.266-.168.48-.375.642-.622.01.126.029.253.056.38.028.127.063.258.105.391h1.202a3.332 3.332 0 01-.142-.588c-.03-.2-.044-.41-.044-.628v-2.348c0-.586-.189-1.036-.566-1.348-.378-.313-.874-.469-1.49-.469-.634 0-1.15.161-1.545.484-.396.322-.582.691-.56 1.108l.006.03h1.142a.62.62 0 01.24-.504c.16-.13.374-.195.644-.195.303 0 .536.078.698.234.163.157.245.373.245.65v.464h-.923c-.733 0-1.3.142-1.704.427-.404.285-.606.683-.606 1.194 0 .495.147.884.442 1.167.295.283.717.425 1.267.425zm.24-.953c-.245 0-.433-.059-.565-.178a.615.615 0 01-.197-.48c0-.232.097-.433.293-.604.195-.17.465-.256.81-.256h.943v.781c-.079.192-.237.363-.477.513-.239.15-.508.224-.808.224zm5.002.85v-3.672a.965.965 0 01.359-.415c.154-.098.347-.146.578-.146l.508.02.142-1.11a1.462 1.462 0 00-.171-.04 1.106 1.106 0 00-.2-.018 1.2 1.2 0 00-.726.23c-.21.153-.381.364-.515.634l-.078-.766h-1.084V40h1.187zm4.167.103c.15 0 .295-.016.435-.047.14-.03.26-.074.361-.13l-.127-.868a1.157 1.157 0 01-.366.063.513.513 0 01-.376-.14c-.095-.092-.142-.247-.142-.465v-2.92h.948v-.88h-.948v-1.283h-1.181v1.284h-.806v.879h.806v2.92c0 .547.123.948.37 1.203.248.256.59.384 1.026.384zm3.074 1.928v-2.563c.166.208.364.366.595.473.232.108.497.162.796.162.645 0 1.148-.236 1.51-.708.36-.472.541-1.093.541-1.86v-.103c0-.843-.181-1.523-.544-2.039-.363-.516-.87-.774-1.521-.774-.316 0-.594.065-.833.195-.24.13-.443.32-.613.567l-.117-.664h-1v7.314h1.186zm1.054-2.876c-.253 0-.467-.05-.64-.149-.172-.099-.31-.241-.414-.427v-2.388c.104-.188.242-.336.415-.441.172-.106.382-.16.63-.16.403 0 .707.173.91.516.204.343.305.785.305 1.326v.102c0 .485-.1.877-.3 1.174-.2.298-.502.447-.906.447zm5.008.948c.328 0 .625-.084.89-.252.266-.168.48-.375.643-.622.01.126.028.253.056.38s.063.258.105.391h1.201a3.332 3.332 0 01-.141-.588c-.03-.2-.044-.41-.044-.628v-2.348c0-.586-.19-1.036-.567-1.348-.377-.313-.874-.469-1.49-.469-.634 0-1.149.161-1.544.484-.396.322-.582.691-.56 1.108l.005.03h1.143a.62.62 0 01.24-.504c.159-.13.374-.195.644-.195.302 0 .535.078.698.234.163.157.244.373.244.65v.464h-.923c-.732 0-1.3.142-1.704.427-.404.285-.605.683-.605 1.194 0 .495.147.884.442 1.167.294.283.717.425 1.267.425zm.239-.953c-.244 0-.432-.059-.564-.178a.615.615 0 01-.198-.48c0-.232.098-.433.293-.604.195-.17.466-.256.81-.256h.943v.781c-.078.192-.237.363-.476.513-.24.15-.509.224-.808.224zm5.813 2.984c.771 0 1.367-.186 1.787-.557.42-.37.63-.897.63-1.577v-5.283h-.987l-.117.688a1.76 1.76 0 00-.608-.583 1.664 1.664 0 00-.832-.203c-.654 0-1.166.259-1.533.777-.368.517-.552 1.196-.552 2.036v.102c0 .768.184 1.389.552 1.86.367.473.875.709 1.523.709.293 0 .553-.055.779-.164a1.66 1.66 0 00.588-.481V40c0 .38-.099.663-.298.847-.198.184-.512.276-.942.276a3.1 3.1 0 01-.73-.085 2.872 2.872 0 01-.647-.237l-.254.932c.241.12.51.218.808.29.298.074.576.11.833.11zm.166-2.998c-.407 0-.707-.146-.901-.437-.194-.292-.29-.68-.29-1.165v-.102c0-.544.098-.987.295-1.328.197-.342.499-.513.906-.513.244 0 .453.054.627.163.174.11.317.26.427.452v2.315c-.107.198-.248.35-.422.456a1.216 1.216 0 01-.642.159zm4.865-5.713v-1.04h-1.186v1.04h1.186zm0 6.577v-5.283h-1.186V40h1.186zm2.605 0v-3.833a1.243 1.243 0 011.07-.576c.335 0 .585.084.75.251.164.168.246.45.246.847V40h1.186v-3.32c0-.707-.154-1.227-.461-1.56-.308-.334-.737-.5-1.287-.5a1.74 1.74 0 00-.886.226 1.89 1.89 0 00-.652.633l-.068-.762h-1.084V40h1.186zm6.072.103c.329 0 .626-.084.891-.252.265-.168.48-.375.642-.622.01.126.029.253.056.38.028.127.063.258.105.391h1.201a3.332 3.332 0 01-.141-.588c-.03-.2-.044-.41-.044-.628v-2.348c0-.586-.189-1.036-.566-1.348-.378-.313-.874-.469-1.49-.469-.634 0-1.15.161-1.545.484-.396.322-.582.691-.56 1.108l.006.03h1.142a.62.62 0 01.24-.504c.159-.13.374-.195.644-.195.303 0 .536.078.698.234.163.157.244.373.244.65v.464h-.922c-.733 0-1.3.142-1.705.427-.403.285-.605.683-.605 1.194 0 .495.147.884.442 1.167.294.283.717.425 1.267.425zm.24-.953c-.245 0-.433-.059-.565-.178a.615.615 0 01-.197-.48c0-.232.097-.433.292-.604.196-.17.466-.256.811-.256h.942v.781c-.078.192-.236.363-.476.513-.239.15-.508.224-.808.224z" fill="#B3B3B3" fill-rule="nonzero"/><g fill-rule="nonzero"><path d="M13.585.674c-1.28.007-2.553.185-3.785.53A13.558 13.558 0 00.14 16.163 13.556 13.556 0 0013.623 27.79a14.333 14.333 0 003.784-.531 12.989 12.989 0 002.954-1.282l6.055 1.627-1.695-5.678a13.56 13.56 0 00.845-13.989A13.555 13.555 0 0013.585.674z" fill="#FFF"/><path d="M17.397 21.748c-1.185.326-2.41.48-3.638.457-5.56 0-6.581-2.721-6.581-7.865 0-2.643.185-6.352 3.004-7.56a9.738 9.738 0 013.577-.514 25.6 25.6 0 013.413.152c.56.08 1.166.113 1.166.796v.79c0 .724-.073 1.102-.863 1.102-1.087 0-2.18-.192-3.229-.192a7.177 7.177 0 00-2.516.339c-1.615.683-1.39 3.67-1.39 5.081 0 1.813-.152 4.574 2.14 5.031.568.122 1.148.17 1.727.147a5.16 5.16 0 001.088-.147v-4.308H13.12c-1.015 0-.976-.638-.976-1.395 0-.756.225-1.129.976-1.129h4.243c.673 0 .975.305.975.988v7.058c.05.717-.263.982-.941 1.169zM30.72 22.207c-3.774 0-5.199-2.288-5.199-5.967s1.403-5.996 5.198-5.996c3.796 0 5.17 2.289 5.17 5.996 0 3.707-1.374 5.967-5.17 5.967zm1.84-8.702c-.406-.778-1.096-.755-1.852-.755s-1.446 0-1.851.755a6.636 6.636 0 00-.422 2.758 6.576 6.576 0 00.433 2.735c.405.755 1.095.732 1.851.732s1.446 0 1.851-.732a6.62 6.62 0 00.406-2.735 6.601 6.601 0 00-.416-2.758zM47.66 17.206h-5.63v.332c0 1.716.394 2.356 2.156 2.356.95-.02 1.893-.147 2.815-.377.265-.088.539-.144.816-.166.648 0 .67 1.064.67 1.51 0 .664-.185.898-.833 1.041-1.156.219-2.331.32-3.507.304-4.178 0-5.067-2.003-5.067-5.898 0-3.799.743-6.064 4.949-6.064 3.828 0 4.616 2.008 4.616 5.526.011.915.085 1.436-.985 1.436zm-1.858-2.523c0-1.464-.208-2.076-1.785-2.076-1.886 0-1.987.823-1.987 2.51h3.806l-.034-.434zM54.051 9.194h-.92c-.878 0-1.29-.12-1.29-1.067v-.826c0-.758.318-1.044 1.072-1.044h1.138a.974.974 0 01.73.306.92.92 0 01.243.738v.826c0 .66-.218 1.067-.973 1.067zm0 13.013h-.92c-.878 0-1.29-.12-1.29-1.067v-9.226c0-.757.318-1.044 1.072-1.044h1.138a.974.974 0 01.73.307.92.92 0 01.243.737v9.226c0 .666-.218 1.067-.973 1.067zM66.033 17.206h-5.661v.332c0 1.716.394 2.356 2.16 2.356a12.815 12.815 0 002.814-.377c.263-.089.535-.145.81-.166.648 0 .676 1.064.676 1.51 0 .664-.186.898-.839 1.041-1.156.219-2.33.32-3.505.303-4.176 0-5.065-2.002-5.065-5.897 0-3.799.743-6.064 4.946-6.064 3.827 0 4.615 2.008 4.615 5.526.022.915.095 1.436-.951 1.436zm-1.857-2.523c0-1.464-.208-2.076-1.784-2.076-1.902 0-2.02.823-2.02 2.522h3.804v-.446zM82.758 7.586l-4.935 13.53c-.478 1.33-1.272 1.07-2.549 1.07-.84 0-1.132-.31-1.418-1.07L68.682 7.35a1.043 1.043 0 01-.093-.357c0-.524.385-.714.863-.714h1.47a1.054 1.054 0 011.167.83l3.797 10.806 3.722-10.663c.245-.685.461-.996 1.254-.996h1.167c.478 0 .916 0 .916.576-.027.259-.09.513-.187.754zM90.842 13.032a4.949 4.949 0 00-3.2.978v7.118c0 .712-.236 1.08-.948 1.08h-.902c-.827 0-1.252-.102-1.252-1.08v-9.561c0-.76.304-1.056 1.04-1.056h1.114c.575 0 .758.344.873.86a6.097 6.097 0 013.108-1.127c1.15 0 1.04.736 1.04 1.66 0 .665-.144 1.128-.873 1.128zM102.765 21.916h-1.289c-.53 0-.67-.354-.67-.85a6.14 6.14 0 01-3.403 1.141c-2.232 0-3.293-1.244-3.293-3.504 0-2.569 1.496-3.425 3.756-3.699a20.663 20.663 0 012.918-.188c0-.936.14-2.283-1.15-2.283a14.41 14.41 0 00-3.314.49c-.182.048-.37.073-.558.075-.803 0-.664-.828-.664-1.415a.862.862 0 01.642-.988 15.561 15.561 0 013.778-.45c1.116 0 2.505.188 3.287 1.084.92 1.039.876 2.494.876 3.812v5.708c.005.736-.224 1.067-.916 1.067zm-1.958-4.965a14.867 14.867 0 00-1.116-.052 9.436 9.436 0 00-1.446.074c-.97.137-1.361.468-1.361 1.484 0 .571.095 1.576.854 1.576a5.193 5.193 0 003.08-1.176l-.011-1.906zM114.729 21.916h-1.29c-.557 0-.669-.354-.669-.85a6.156 6.156 0 01-3.404 1.141c-2.232 0-3.292-1.244-3.292-3.504 0-2.569 1.495-3.425 3.75-3.699a20.74 20.74 0 012.924-.188c0-.936.14-2.283-1.15-2.283a14.41 14.41 0 00-3.315.49c-.182.048-.37.073-.558.075-.803 0-.67-.828-.67-1.415a.867.867 0 01.648-.988 15.518 15.518 0 013.772-.45c1.116 0 2.511.188 3.293 1.084.92 1.039.876 2.494.876 3.812v5.708c.005.736-.229 1.067-.915 1.067zm-1.959-4.965a14.867 14.867 0 00-1.116-.052 9.506 9.506 0 00-1.451.074c-.965.137-1.356.468-1.356 1.484 0 .571.09 1.576.854 1.576a5.193 5.193 0 003.08-1.176l-.011-1.906zM128.686 25.22c-.965 1.392-2.818 1.77-4.438 1.77a19.141 19.141 0 01-4.507-.452.965.965 0 01-.72-1.079c0-.52.047-1.53.796-1.53a2.8 2.8 0 01.584.114c1.31.313 2.652.472 4 .474 1.811 0 1.689-1.108 1.689-2.523v-.115a15.85 15.85 0 01-2.795.303c-3.742 0-4.46-2.472-4.46-5.646 0-1.582.216-3.557 1.297-4.808 1.28-1.455 2.923-1.484 4.777-1.484 1.087 0 2.216 0 3.303.097.772.069.965.331.965 1.062v11.555a3.522 3.522 0 01-.491 2.261zm-2.579-12.43c-.625 0-1.28-.045-1.906-.045-.748 0-1.397 0-1.754.73a8.056 8.056 0 00-.456 2.94c0 .624.049 1.246.147 1.862.14 1.085.286 1.553 1.49 1.553a9.033 9.033 0 002.485-.4l-.006-6.64z" fill="#030304"/><path d="M13.585 2.487a11.775 11.775 0 019.686 18.422 1.859 1.859 0 00-.266 1.548l.746 2.57-2.948-.79a1.852 1.852 0 00-.458-.08 1.97 1.97 0 00-.91.226 10.73 10.73 0 01-2.569 1.13c-1.072.302-2.18.454-3.293.452A11.754 11.754 0 011.98 15.868a11.756 11.756 0 018.312-12.935 13.993 13.993 0 013.293-.446m0-1.813c-1.28.007-2.553.185-3.785.53A13.558 13.558 0 00.14 16.163 13.556 13.556 0 0013.623 27.79a14.333 14.333 0 003.784-.531 12.989 12.989 0 002.954-1.283l6.055 1.627-1.695-5.677a13.56 13.56 0 00.845-13.989A13.555 13.555 0 0013.585.674z" fill="#4F87AE"/><path d="M17.397 21.748c-1.185.326-2.41.48-3.638.457-5.56 0-6.581-2.721-6.581-7.865 0-2.643.185-6.352 3.004-7.56a9.738 9.738 0 013.577-.514 25.6 25.6 0 013.413.152c.56.08 1.166.113 1.166.796v.79c0 .724-.073 1.102-.863 1.102-1.087 0-2.18-.192-3.229-.192a7.177 7.177 0 00-2.516.339c-1.615.683-1.39 3.67-1.39 5.081 0 1.813-.152 4.574 2.14 5.031.568.122 1.148.17 1.727.147a5.16 5.16 0 001.088-.147v-4.308H13.12c-1.015 0-.976-.638-.976-1.395 0-.756.225-1.129.976-1.129h4.243c.673 0 .975.305.975.988v7.058c.05.717-.263.982-.941 1.169z" fill="#030304"/></g></g></svg> </a> <p class="text-center text-xs text-on-body-light sm+:text-left sm+:text-sm"> &copy; 2024 Startpagina Goeievraag B.V. <br /> Startpagina.nl - onderdeel van Startpagina Goeievraag B.V. </p> </div> <div class="stack-y space-y-2 sm+:stack-x sm+:space-x-2 sm+:space-y-0 sm+:items-end"> <div class="flex justify-center"> <span class="text-xs text-on-body-light sm+:text-sm"> Volg ons op: </span> </div> <div class="stack-x space-x-2 justify-center sm+:justify-start"> <a href="https://www.facebook.com/GoeieVraag/" target="_blank"> <span class="sr-only">Visit Goeievraag on Facebook</span> <span aria-hidden="true" class="icon inline-block w-10 h-10 -mb-4 text-primary sm+:!ml-4" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" xml:space="preserve" viewBox="0 0 500 500"><path fill="currentColor" d="M250 0C111.9 0 0 111.9 0 250s111.9 250 250 250 250-111.9 250-250S388.1 0 250 0zm78.3 151.7H300c-21.7 0-26.7 10-26.7 25V210H325l-6.7 53.3h-45v135H220v-135h-45V210h45v-38.3c0-45 28.3-70 68.3-70 18.3 0 35 1.7 40 1.7v48.3z"/></svg> </span> </a> <a href="https://www.instagram.com/goeievraag/" target="_blank"> <span class="sr-only">Visit Goeievraag on Instagram</span> <span aria-hidden="true" class="icon inline-block w-10 h-10 -mb-4 text-primary" > <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24" height="24" viewBox="0 0 500 500"><path d="M249.713 0a250.01 249.99 44.217 0 0-6.647.096A250.01 249.99 44.217 0 0 .096 256.912a250.01 249.99 44.217 0 0 256.838 242.992 250.01 249.99 44.217 0 0 242.97-256.816A250.01 249.99 44.217 0 0 249.713 0Zm1.035 124.865c31.888 0 35.89.147 48.424.768 42.68 2.106 66.37 27.654 68.287 73.504.568 13.479.705 17.774.705 52.093 0 34.32-.137 38.627-.715 52.106-1.927 45.934-25.685 71.398-68.287 73.504-12.524.61-16.526.758-48.414.758s-35.88-.147-48.414-.758c-42.68-2.106-66.338-27.612-68.295-73.504-.567-13.48-.705-17.787-.705-52.106s.138-38.613.715-52.103c1.957-45.934 25.654-71.398 68.295-73.504 12.524-.61 16.516-.758 48.404-.758zm0 22.778c-31.35 0-35.058.126-47.445.726-31.849 1.559-46.671 17.817-48.13 51.799-.557 13.332-.685 17.323-.685 51.062 0 33.75.118 37.742.686 51.063 1.448 33.919 16.231 50.241 48.129 51.81 12.377.611 16.095.739 47.445.739 31.37 0 35.068-.128 47.455-.738 31.849-1.559 46.673-17.838 48.131-51.8.558-13.32.676-17.311.676-51.062 0-33.74-.109-37.741-.676-51.062-1.448-33.993-16.311-50.243-48.13-51.801-12.388-.61-16.106-.736-47.456-.736zm62.68 20.976c7.778 0 14.08 6.792 14.08 15.164s-6.302 15.164-14.08 15.164c-7.789 0-14.1-6.792-14.1-15.164s6.311-15.164 14.1-15.164zm-62.68 17.723c33.297 0 60.293 29.053 60.293 64.888 0 35.846-26.996 64.9-60.293 64.9s-60.293-29.064-60.293-64.9c0-35.835 26.996-64.888 60.293-64.888zm0 22.767c-21.614 0-39.139 18.86-39.139 42.121 0 23.273 17.525 42.124 39.14 42.124 21.613 0 39.138-18.851 39.138-42.124 0-23.261-17.525-42.12-39.139-42.12z" style="fill:currentColor"/></svg> </span> </a> <a href="https://nl.pinterest.com/goeievraags/_created/ " target="_blank"> <span class="sr-only">Visit Goeievraag on Pinterest</span> <span aria-hidden="true" class="icon inline-block w-10 h-10 -mb-4 text-primary" > <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24" height="24" viewBox="0 0 500 500"><path fill="currentColor" d="M250 0C111.9 0 0 111.9 0 250s111.9 250 250 250 250-111.9 250-250S388.1 0 250 0zm20.2 334.8c-18.9-1.5-26.8-10.8-41.7-19.8-8.1 42.7-18.1 83.7-47.6 105.1-9.1-64.6 13.4-113.1 23.8-164.6-17.8-29.9 2.1-90.2 39.7-75.4 46.2 18.3-40 111.4 17.9 123 60.4 12.1 85-104.8 47.6-142.8-54.1-54.9-157.5-1.2-144.8 77.4 3.1 19.2 23 25 7.9 51.6-34.6-7.7-45-35-43.6-71.4 2.1-59.6 53.6-101.3 105.1-107.1 65.2-7.3 126.4 23.9 134.9 85.3 9.5 69.1-29.5 144.1-99.2 138.7z"/></svg> </span> </a> </div> </div> </div> <div class="flex flex-wrap gap-8 justify-center sm+:justify-start | text-xs text-primary sm+:text-sm"> <ul class="block sm+:stack-x space-x-0 sm+:space-x-8 | w-full item-dividers text-center sm+:w-auto sm+:no-item-dividers sm+:text-left"> <li class="inline-block"> <a href="https://www.startpagina.nl/privacy-en-cookiebeleid" target="_blank" class=" hover:underline cursor-pointer" > Privacy- en cookiebeleid </a> </li> <li class="inline-block"> <a href="#" onclick=" googlefc.callbackQueue.push ({&#39;CONSENT_DATA_READY&#39;: () =&gt; googlefc.showRevocationMessage()}); " class=" hover:underline cursor-pointer" > Cookie-instellingen wijzigen </a> </li> <li class="inline-block"> <a href="/v/copyright" target="_blank" class=" hover:underline cursor-pointer" > Copyright </a> </li> <li class="inline-block"> <a href="/v/disclaimer" target="_blank" class=" hover:underline cursor-pointer" > Disclaimer </a> </li> </ul> </div> </div> </footer> <div class="toast toast-template fade hide stack-x | relative max-w-lg p-3 text-white border-0 drop-shadow-sm rounded pointer-events-auto" role="alert" aria-live="assertive" aria-atomic="true" > <div class="toast-body p-0 pr-6 break-words"> <span class="toast-text text-sm"> </span> </div> <button type="button" class="absolute flex items-center top-2/4 right-2 -translate-y-2/4 text-on-error hover:cursor-pointer hover:opacity-90 active:opacity-80 p-1 pl-2" data-bs-dismiss="toast" aria-label="Close" > <span aria-hidden="true" class="icon inline-block w-4 h-4" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg> </span> </button> </div> <div class="mobile-menu block z-40 fixed bottom-0 w-full h-16 bg-gray-800 sm:hidden" x-data="MobileMenu" @more-menu-for-mobile-toggled.window="handleMoreMenuToggled()" > <div class="w-full h-full bg-gray-500 relative z-20"></div> <form id="mobileSearchForm" action="/v/zoeken/" class="z-10 fixed w-full flex items-center margin-bottom-safe-area bg-gray-50 border-t bottom-0 transition-bottom duration-500" :class="isSearchOpen ? 'bottom-16' : ''" target="_blank" x-ref="form" > <div class="input-wrapper flex items-center relative w-full"> <input type="text" class="search-input border border-gray-400 rounded flex-1 leading-normal m-2 p-2 focus-visible:default-focus-border" name="q" placeholder="Zoeken naar vragen " x-validate.silent="required" x-ref="searchInput" @keydown.enter.prevent="submitSearch" /> <button type="button" title="Zoeken naar vragen " class="submit-icon absolute right-4 h-full -mr-3 px-3 pt-2 bg-transparent border-none cursor-pointer focus-visible:default-focus-border" @click.prevent="submitSearch" > <span aria-hidden="true" class="icon inline-block text-gray-400 w-6 h-6" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M15.5 15h-.79l-.28-.27A6.471 6.471 0 0 0 16 10.5 6.5 6.5 0 1 0 9.5 17c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 20zm-6 0C7.01 15 5 12.99 5 10.5S7.01 6 9.5 6 14 8.01 14 10.5 11.99 15 9.5 15Z"/></svg> </span> </button> </div> </form> <nav class="z-30 fixed bottom-0 flex margin-bottom-safe-area h-16 w-full bg-gray-800 select-none"> <a href="/v/" class=" flex-1 flex flex-col justify-center items-center p-1 text-gray-400 text-xs truncate" > <span aria-hidden="true" class="icon inline-block block mt-0.5 mb-2 h-6 w-6" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="currentColor"><path d="M12.02 1.605a10.422 10.422 0 0 1 8.573 16.305c-.277.4-.363.9-.235 1.37l.66 2.275-2.61-.7a1.64 1.64 0 0 0-.404-.07c-.28 0-.557.07-.805.2a9.497 9.497 0 0 1-2.274 1c-.949.267-1.93.401-2.915.4A10.405 10.405 0 0 1 9.107 2c.952-.247 1.93-.38 2.914-.395m0-1.605a12.68 12.68 0 0 0-3.349.47 12 12 0 0 0-8.55 13.239 11.998 11.998 0 0 0 11.934 10.29 12.686 12.686 0 0 0 3.35-.47 11.488 11.488 0 0 0 2.614-1.134l5.36 1.44-1.5-5.025A12.002 12.002 0 0 0 12.02 0z"/><path d="M15.08 18.015c-1 .262-2.033.386-3.07.368-4.69 0-5.55-2.192-5.55-6.334 0-2.129.155-5.116 2.533-6.09a8.578 8.578 0 0 1 3.018-.413c.962-.02 1.924.02 2.88.123.473.063.984.09.984.641v.637c0 .582-.062.886-.729.886-.917 0-1.84-.154-2.724-.154a6.324 6.324 0 0 0-2.123.273c-1.362.55-1.173 2.955-1.173 4.092 0 1.46-.128 3.683 1.806 4.052.48.098.968.137 1.457.118a4.55 4.55 0 0 0 .918-.118v-3.47h-1.835c-.856 0-.823-.514-.823-1.123 0-.61.19-.91.823-.91h3.58c.567 0 .823.246.823.796v5.684c.042.578-.223.791-.795.942z"/></g></svg> </span> <span class="hidden w-30em:block"> Home </span> <span class="block w-30em:hidden"> Home </span> </a> <a href="/v/vraag/stellen/" class=" flex-1 flex flex-col justify-center items-center p-1 text-gray-400 text-xs truncate" > <span aria-hidden="true" class="icon inline-block block mt-0.5 mb-2 h-6 w-6" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="currentColor"><path d="M12.02 1.605a10.422 10.422 0 0 1 8.573 16.305c-.277.4-.363.9-.235 1.37l.66 2.275-2.61-.7a1.64 1.64 0 0 0-.404-.07c-.28 0-.557.07-.805.2a9.497 9.497 0 0 1-2.274 1c-.949.267-1.93.401-2.915.4A10.405 10.405 0 0 1 9.107 2c.952-.247 1.93-.38 2.914-.395m0-1.605a12.68 12.68 0 0 0-3.349.47 12 12 0 0 0-8.55 13.239 11.998 11.998 0 0 0 11.934 10.29 12.686 12.686 0 0 0 3.35-.47 11.488 11.488 0 0 0 2.614-1.134l5.36 1.44-1.5-5.025A12.002 12.002 0 0 0 12.02 0z"/><path d="m12.456 14.27.09-1.98c.012-.336.084-.588.216-.756.132-.168.45-.435.954-.801a5.308 5.308 0 0 0 1.233-1.224c.318-.45.477-1.068.477-1.854s-.258-1.425-.774-1.917S13.353 5 12.303 5c-1.05 0-2.151.276-3.303.828v2.466l1.836.126v-.954c0-.192.021-.336.063-.432.042-.096.183-.177.423-.243a2.91 2.91 0 0 1 .774-.099c.828 0 1.242.378 1.242 1.134 0 .3-.042.54-.126.72-.06.096-.12.195-.18.297-.06.102-.288.297-.684.585-.732.528-1.206.984-1.422 1.368-.192.348-.288.786-.288 1.314v.27l.09 1.89h1.728zm-.864 3.546c.384 0 .687-.12.909-.36.222-.24.333-.528.333-.864a1.12 1.12 0 0 0-.342-.837c-.228-.222-.525-.333-.891-.333s-.663.117-.891.351a1.18 1.18 0 0 0-.342.855c0 .336.111.618.333.846.222.228.519.342.891.342z"/></g></svg> </span> <span class="hidden w-30em:block"> Vraag stellen </span> <span class="block w-30em:hidden"> Vraag stellen </span> </a> <a href="#" class="find-question flex-1 flex flex-col justify-center items-center p-1 text-gray-400 text-xs truncate" :class="isSearchOpen ? 'text-gray-100' : ''" @click.prevent="isSearchOpen = !isSearchOpen" > <span aria-hidden="true" class="icon inline-block block mt-0.5 mb-2 h-6 w-6" > <svg xmlns="http://www.w3.org/2000/svg" stroke-width="2" style="fill:none;stroke:currentColor" width="24" height="24" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0z"/></svg> </span> <span class="hidden w-30em:block"> Vraag zoeken </span> <span class="block w-30em:hidden"> Zoeken </span> </a> <a href="/v/ranglijsten/meest_populaire_vragen/" class=" flex-1 flex flex-col justify-center items-center p-1 text-gray-400 text-xs truncate" > <span aria-hidden="true" class="icon inline-block block mt-0.5 mb-2 h-6 w-6" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="currentColor" fill-rule="evenodd"><path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2z"/><path fill-rule="nonzero" d="m17.703 9.027-3.102-.35-1.275-2.827A1.428 1.428 0 0 0 12 5c-.575 0-1.076.325-1.326.85L9.4 8.677l-3.102.35c-.575.075-1.05.45-1.225 1a1.456 1.456 0 0 0 .4 1.526l2.301 2.101-.625 3.052c-.125.575.1 1.125.575 1.475.475.35 1.075.375 1.576.075l2.7-1.575 2.701 1.55c.225.125.476.2.726.2.3 0 .6-.1.85-.275.475-.35.675-.9.575-1.475l-.625-3.052 2.301-2.1c.425-.401.575-.976.4-1.527-.2-.55-.65-.925-1.225-.975zM15.1 12.579c-.325.3-.475.775-.4 1.225l.626 3.052-2.702-1.551c-.2-.1-.425-.175-.65-.175-.225 0-.45.05-.65.175l-2.702 1.55.626-3.05c.1-.451-.05-.901-.4-1.226l-2.302-2.101 3.102-.35c.45-.05.85-.35 1.025-.75L12 6.55l1.276 2.851c.175.425.575.7 1.025.75l3.102.35L15.1 12.58z"/></g></svg> </span> <span class="hidden w-30em:block"> Populaire vragen </span> <span class="block w-30em:hidden"> Populair </span> </a> <a href="#" class=" flex-1 flex flex-col justify-center items-center p-1 text-gray-400 text-xs truncate" @click="toggleMoreMenu" :class="isMoreMenuOpen ? 'text-gray-100' : ''" > <span aria-hidden="true" class="icon inline-block block mt-0.5 mb-2 h-6 w-6" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 25 25"><g fill="none" fill-rule="evenodd"><circle cx="12.5" cy="12.5" r="11.5" stroke="currentColor" stroke-width="2"/><g fill="currentColor" transform="translate(5 11)"><circle cx="1.5" cy="1.5" r="1.5"/><circle cx="7.5" cy="1.5" r="1.5"/><circle cx="13.5" cy="1.5" r="1.5"/></g></g></svg> </span> <span class="hidden w-30em:block"> Meer </span> <span class="block w-30em:hidden"> Meer </span> </a> </nav> </div> <script type="text/javascript" async="async" src="//widgets.outbrain.com/outbrain.js"></script> </body> </html>