HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div class="navbar">
<ul>
<li><a href="#ejemplo1">Ejemplo sin propiedad</a></li>
<li><a href="#ejemplo2">Ejemplo CON propiedad</a></li>
</ul>
</div>
<div class="container">
<div id="ejemplo1">
<h1>Este es el contenido del ejemplo 1 <small></small></h1>
<p class="highlight">En este ejemplo cuando hagamos clic en el link del navbar, este tapará el título porque no estamos utilizando la propiedad <code>scroll-margin-top</code>. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu sem sed enim mollis facilisis. Nullam vitae lectus condimentum, pharetra ante at, vulputate erat. Sed viverra, ante vitae imperdiet tempor, ante metus dictum nibh, at feugiat nulla orci ut orci. Nam a bibendum orci, lobortis tristique orci. Nullam interdum odio justo, accumsan luctus quam suscipit quis. Duis gravida, metus sit amet porta congue, eros diam euismod neque, eget vehicula nunc massa sit amet nulla. Vestibulum accumsan metus a mi iaculis ultrices. Donec et velit diam. Nam eu neque magna. Ut ut metus nec tellus finibus semper. Mauris facilisis ante quis lorem volutpat, nec pulvinar sem viverra. Fusce eget ipsum posuere, consectetur ipsum ut, fringilla mi.</p>
<p>Sed quis libero vitae metus vestibulum elementum. Integer finibus dolor a felis cursus suscipit. Nam commodo porttitor volutpat. Nunc porta viverra fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam pellentesque euismod nunc, ac aliquet quam molestie ultrices. Sed tincidunt at purus vel tincidunt. Phasellus fringilla placerat nulla, sit amet tempus metus malesuada vitae. Nullam ligula lorem, pellentesque et rhoncus nec, auctor et nisl. Curabitur ultrices eleifend ipsum sed suscipit. Vestibulum venenatis laoreet nunc, quis euismod ipsum consectetur quis. Mauris vitae auctor elit. In quis lorem sollicitudin, convallis odio sit amet, laoreet mauris. In ornare sem ex, at vehicula erat rhoncus sit amet. Integer molestie velit mi, sagittis sollicitudin magna iaculis at.</p>
<p>Aenean at volutpat augue, vel sagittis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed nulla erat, egestas eu accumsan eget, condimentum a mauris. Pellentesque viverra luctus dictum. Cras lacinia, nisi a pharetra congue, sem diam bibendum lectus, a efficitur turpis risus quis mi. Ut id arcu mattis dolor dapibus dictum at non libero. Nulla leo enim, rhoncus non efficitur ut, iaculis sed lacus. Quisque viverra metus a vulputate mattis.</p>
<p>Donec convallis turpis ipsum, non auctor massa posuere consectetur. Donec aliquam metus enim, eget tristique eros suscipit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed suscipit erat sem, sit amet iaculis nisl ullamcorper sed. Morbi cursus magna quis velit feugiat faucibus. Duis ornare id nisl et facilisis. Vestibulum id molestie eros.</p>
<p>Duis porttitor leo facilisis, finibus libero a, venenatis ex. Duis tristique iaculis lorem, ac aliquam dui tincidunt quis. Pellentesque ex ipsum, scelerisque et finibus a, euismod et erat. Aenean vitae pharetra nisi. Quisque eget odio ex. Morbi erat ligula, tincidunt sit amet volutpat id, finibus et dolor. Pellentesque elit sem, cursus quis massa vel, ultricies vehicula lectus. Fusce maximus tempor nibh, in mollis eros imperdiet ac. Phasellus et lectus dui. Curabitur nibh arcu, imperdiet nec tortor sed, tempus fermentum tellus. Quisque quis facilisis ligula. Sed mauris risus, efficitur nec erat at, molestie rutrum leo. Sed auctor quis odio non volutpat. In tempor nulla ut orci congue, ac vestibulum lorem pharetra.</p>
<p>Morbi a metus auctor, tempus arcu vitae, laoreet purus. Proin volutpat faucibus velit id molestie. Sed et eros nec tellus molestie tincidunt ac pulvinar eros. Integer elementum, libero et euismod tristique, sapien libero consectetur enim, vel gravida nisl urna a lorem. Nulla vitae consectetur orci. Etiam eleifend pellentesque dictum. In hac habitasse platea dictumst. Curabitur quis lacus a velit egestas cursus. Phasellus malesuada placerat eros mattis pellentesque. Sed tempor justo quis ex fringilla, nec gravida lectus scelerisque. Quisque faucibus dignissim commodo. Vivamus sodales a magna vitae blandit. Aenean velit ante, facilisis vulputate nisi nec, tempor cursus nisl. Mauris placerat efficitur quam, non vulputate quam congue at.</p>
<p>Etiam ac nisl libero. Vestibulum eu eleifend turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque id vulputate nibh. Mauris at porta eros. Suspendisse potenti. Etiam dignissim lectus nec feugiat mattis. Nunc sed dignissim purus, eget gravida dolor. Vestibulum mollis turpis nec ante laoreet lobortis. Proin vitae justo enim. Nunc ex mauris, aliquam eget semper ut, tincidunt id magna. Donec ultrices feugiat odio. Sed id ultricies nisi. In blandit mollis elit ut mattis. Mauris in neque est.</p>
<p>Phasellus felis odio, pulvinar tincidunt ligula a, eleifend porta diam. Nulla non est sit amet magna elementum blandit id non nibh. Aliquam augue ligula, consectetur quis elit feugiat, dictum venenatis mauris. Etiam eleifend ligula nulla, a volutpat elit euismod ut. Etiam sem lacus, pellentesque eleifend enim vel, sagittis mattis metus. Mauris accumsan ante lorem, non euismod erat tristique commodo. Praesent eget hendrerit augue. Maecenas sed nisl et lectus eleifend egestas at eu tellus. Aenean varius sagittis elit, imperdiet feugiat libero placerat in. Mauris egestas lorem orci, vitae eleifend nulla pharetra eget. Praesent sit amet orci facilisis, rutrum neque et, blandit ligula. Donec suscipit dignissim ipsum, vel tincidunt dui pellentesque non. Nullam consequat blandit imperdiet. Proin hendrerit hendrerit ante.</p>
<p>Aenean fermentum sem ut massa tempor, vel pulvinar velit ullamcorper. Etiam gravida enim pulvinar laoreet aliquam. Quisque rutrum, erat a sollicitudin laoreet, turpis nibh vehicula sapien, sit amet consectetur nulla eros vitae ante. Integer sit amet tristique ipsum, ut mollis metus. Morbi commodo justo in nibh viverra, elementum rutrum diam congue. Vestibulum vehicula ex a augue pellentesque, a volutpat urna fringilla. Aenean tempor ligula et arcu condimentum condimentum. Ut vel pellentesque nibh. In aliquam ligula vitae lectus tincidunt gravida.</p>
<p>Quisque a neque in orci volutpat sodales et ut lectus. Quisque consequat diam felis. Nam tincidunt imperdiet odio, ac ultrices dolor. Curabitur faucibus turpis dui, eget sagittis urna tristique vel. Mauris non tempor urna. Maecenas ut magna tempus, elementum ipsum rutrum, elementum elit. Integer sem magna, rhoncus eget mauris sit amet, semper venenatis orci. Curabitur posuere velit ut diam bibendum placerat. Nullam mauris erat, aliquet in odio id, tincidunt ultrices lacus. Aliquam a mi egestas, porta tortor at, tincidunt lorem. Nunc vitae massa mi.</p>
</div>
<div id="ejemplo2">
<h1>Este es el contenido del ejemplo 2</h1>
<p class="highlight">En este ejemplo cuando hagamos clic en el link del navbar, este NO tapará el título porque estamos utilizando la propiedad <code>scroll-margin-top</code> con un valor de 70px, que es más de lo que mide de alto en navbar.
<p> Fusce vel mauris sagittis, facilisis sapien non, scelerisque lectus. Vivamus sit amet enim non sem cursus congue non a mi. Morbi ut ligula sapien. Vestibulum porta magna ut augue consectetur, in euismod augue dapibus. Integer eu urna velit. Duis tempus, enim lacinia tempor bibendum, sem enim rutrum erat, eget bibendum augue sapien vel nisi. Integer tincidunt sem ut nisi placerat facilisis. Suspendisse rutrum, lacus vitae maximus varius, orci est accumsan risus, vel vulputate ligula est at odio. Nulla sed arcu in purus lobortis rhoncus. Proin gravida vitae neque vel tincidunt. Fusce dignissim est vitae arcu iaculis, at suscipit erat cursus. Sed convallis, ante vitae laoreet euismod, turpis magna posuere ligula, a pellentesque tortor magna id nibh. Nulla mattis laoreet massa consectetur efficitur. Donec sed elit convallis sem tempor vulputate. Mauris porttitor, nisl id porttitor faucibus, nunc nulla efficitur tellus, sed lobortis augue leo tincidunt tortor.</p>
<p>Cras ultricies ante ex. Aliquam maximus condimentum euismod. Nam cursus tempus pharetra. Suspendisse semper velit sit amet ante sodales efficitur. Vivamus et ullamcorper sapien. Vivamus at cursus urna, ac aliquam orci. Nullam id convallis dolor. Etiam mollis, turpis eget varius condimentum, massa nunc vulputate elit, eget hendrerit orci lectus nec ipsum. Donec porttitor leo id lorem posuere rutrum. Cras ut arcu sed eros molestie tempor.</p>
<p>Duis iaculis, elit a tempus venenatis, tortor risus efficitur purus, quis ullamcorper magna eros et turpis. Praesent tincidunt commodo eros, at porttitor risus tincidunt sit amet. Vivamus lobortis pretium orci, sagittis pulvinar odio congue et. Suspendisse interdum at leo sit amet condimentum. Nullam vel malesuada urna, id fermentum ligula. Praesent et nunc quis ipsum posuere eleifend. In hac habitasse platea dictumst.</p>
<p>Curabitur eget cursus justo. Phasellus quis luctus nunc, nec vehicula nulla. Aliquam faucibus efficitur bibendum. Suspendisse pellentesque, lacus ac euismod tincidunt, nulla leo dignissim libero, eget venenatis turpis tortor at est. Sed at dignissim metus. Aliquam pretium sit amet augue ac tristique. Praesent posuere velit vel odio tempor, eu posuere nunc consectetur. Nunc id molestie dolor.</p>
<p>Donec pellentesque scelerisque justo at tempor. Curabitur eget scelerisque arcu, nec sagittis nibh. Sed diam enim, congue in gravida vel, congue at sem. Integer eros erat, varius et quam at, vulputate varius magna. Maecenas id magna porttitor, tincidunt mi eu, finibus lorem. Nullam eu egestas libero, in consequat velit. Maecenas ut tellus eu libero gravida pulvinar vel imperdiet nunc. Praesent sit amet rhoncus tortor. Suspendisse potenti. In eu turpis tincidunt felis dictum efficitur a in libero.</p>
<p>Nullam leo nisl, varius et euismod sed, dignissim id lorem. Suspendisse ac sem viverra, sagittis ligula eu, semper mi. Pellentesque scelerisque erat ac nisl suscipit laoreet. Integer rhoncus libero justo, sed bibendum ante dapibus vel. Etiam orci nunc, ornare ac nisi ut, porttitor rhoncus lectus. Nulla vel lobortis enim, sit amet feugiat leo. Maecenas aliquam dolor sapien, egestas pulvinar ligula semper a. Sed luctus velit lacus, non eleifend libero rhoncus eget. Ut quis augue nulla. Nullam ac congue diam. Aenean est elit, mollis eu eleifend id, pellentesque et nibh. Aenean lacinia suscipit neque vitae vestibulum. Nullam non ornare diam. Duis ligula lorem, finibus eu bibendum vel, convallis nec felis. Cras sit amet interdum ipsum. Nam posuere vitae leo at feugiat.</p>
<p>Cras sodales consequat ante, ut pellentesque mauris. Quisque dolor risus, pretium non lorem id, malesuada imperdiet nisl. Suspendisse dictum malesuada purus id lobortis. Cras ac sapien eleifend, tempor ligula et, pretium felis. Nam eleifend libero non nulla vehicula, nec semper nisl molestie. Aenean molestie sem eget elementum posuere. Fusce a massa augue. Praesent pharetra tellus ut felis tincidunt auctor. Vestibulum id sagittis leo, in porttitor metus.</p>
<p>Nunc sollicitudin urna a magna faucibus, non dignissim nulla cursus. Nullam gravida consectetur felis, non mollis urna blandit id. Nulla ut congue ex. Aenean faucibus lacinia metus. Quisque id lacus dignissim, dignissim libero id, tristique quam. In non mauris ac nisl volutpat convallis. Mauris laoreet elit eu nulla maximus aliquam. Integer mollis egestas velit ut dictum. Aenean sed tincidunt neque. Mauris sit amet arcu vel mauris ullamcorper ullamcorper. Sed sit amet dignissim dui. Praesent hendrerit dignissim facilisis. Nunc faucibus orci et nisl pulvinar rutrum. Suspendisse sed accumsan lorem. Aenean a pellentesque leo, vitae finibus nisl. Quisque ullamcorper a urna a feugiat.</p>
<p>Mauris quis massa tempor, elementum arcu a, molestie lorem. Suspendisse dignissim, libero id maximus suscipit, dolor dui blandit urna, eget aliquam dui mi ut sapien. Aenean iaculis rhoncus elit sit amet tincidunt. Phasellus mauris turpis, dapibus ac maximus eu, suscipit nec quam. Maecenas a felis sed tellus mattis pretium. Phasellus quis magna et odio iaculis gravida sagittis at nisi. Vivamus tellus velit, facilisis ut nisi sed, semper sagittis purus.</p>
<p>Aenean non sagittis risus, at lobortis nisi. Nullam nec tellus convallis, rutrum eros at, gravida eros. Vivamus nec cursus odio. Vestibulum laoreet diam id rutrum venenatis. Duis bibendum, erat eu suscipit lobortis, lectus metus maximus tellus, vitae facilisis magna lectus in lorem. Suspendisse ipsum arcu, interdum sodales dui a, posuere facilisis ex. Suspendisse aliquam eleifend lacus, at sagittis quam ultricies volutpat. Phasellus tincidunt eros consectetur sagittis consectetur. Fusce non arcu ut mi imperdiet ultricies. Fusce malesuada quis dui et congue. In hac habitasse platea dictumst. Praesent gravida, nibh nec consequat fermentum, mauris felis pellentesque velit, nec hendrerit ipsum neque at nibh. Nam ultricies, sapien id interdum tincidunt, mi turpis imperdiet dui, eu pretium quam erat quis leo. Sed hendrerit est in ligula tincidunt, vel semper velit tempus.</p>
<p>Cras auctor viverra ex in volutpat. In rutrum dui eget turpis pretium fringilla ut non massa. Pellentesque non mattis est. Ut hendrerit, sem non lobortis placerat, ex diam faucibus ante, sit amet malesuada massa purus vel leo. Morbi accumsan sed erat eget iaculis. Nam fermentum volutpat lectus, venenatis facilisis magna viverra nec. Proin ultricies, est accumsan commodo pulvinar, nisl erat vestibulum mauris, ut malesuada tellus nisi ac nibh. Sed auctor vehicula ligula, non vestibulum urna faucibus sed. Etiam eleifend augue erat, ut venenatis enim dictum condimentum. Phasellus nec consectetur urna, sit amet posuere mi. Nunc id vulputate neque, et tristique nunc. Nunc sapien elit, ultricies mattis diam id, imperdiet tincidunt massa. Ut eu ante laoreet, pharetra purus eu, vehicula nisl.</p>
<p>Integer hendrerit, augue in interdum pretium, urna lorem lobortis leo, quis volutpat ligula dui vehicula diam. Maecenas in nulla elementum, varius lorem eget, ultrices dolor. Fusce at quam tempus, ornare tellus in, venenatis ligula. Ut augue tortor, luctus gravida erat ac, blandit placerat nisl. Aliquam accumsan libero at eros pharetra, eu finibus sapien tincidunt. Nullam sit amet rutrum odio, at viverra enim. Integer purus massa, aliquam in pretium eu, porta sed turpis. Integer sit amet consequat sem, nec aliquam erat. Suspendisse suscipit mollis purus. Donec pulvinar aliquet ullamcorper. Maecenas laoreet efficitur tristique. Quisque consequat ligula id mauris tristique ultricies.</p>
<p>Vivamus tempus nunc vitae augue condimentum aliquam non finibus lacus. Etiam tortor est, dictum eu neque non, hendrerit ullamcorper dolor. Donec ultricies arcu id enim egestas porta. Proin sed lorem at sem faucibus suscipit sit amet in purus. Vivamus porta condimentum posuere. Mauris quam ex, egestas sit amet sem a, tempus blandit odio. Ut finibus sem vitae neque gravida laoreet. Pellentesque elit urna, egestas pretium urna sit amet, malesuada tristique urna.</p>
<p>Nunc porttitor ex velit, nec vestibulum libero lobortis sit amet. Integer ultricies urna vel eros congue, et ullamcorper nisl aliquet. Proin ornare lacus vel placerat ullamcorper. Sed tortor sem, fringilla ac dictum vel, semper sit amet ipsum. In commodo, nulla et dignissim egestas, massa libero commodo nisl, vitae pulvinar mauris eros quis nunc. Ut vitae libero neque. Nunc ullamcorper et magna vel accumsan. Nullam euismod lorem non diam mattis, sed ultricies quam pretium. Sed convallis placerat scelerisque. Cras eu egestas tortor.</p>
<p>Proin ac nibh at nisl dapibus tempor. Aenean aliquet felis vitae est posuere, varius bibendum elit rutrum. Praesent non ligula tincidunt, ultrices erat eu, gravida risus. Nullam dolor ligula, commodo id imperdiet in, congue vel lorem. Curabitur rhoncus gravida sodales. Etiam rutrum suscipit fermentum. Morbi in lacus dignissim, euismod nisi eget, ornare diam. Vivamus sapien enim, cursus eget ex nec, elementum aliquet orci. Phasellus posuere elit eget lorem sagittis, id volutpat nunc maximus.</p>
<p>Ut dolor fringilla, eleifend nunc in, malesuada nulla. Vivamus rutrum quam eget metus sodales, nec auctor quam efficitur. Aliquam eu ligula auctor quam scelerisque consequat. Suspendisse ornare sollicitudin nisl in ornare. Suspendisse pellentesque posuere enim, nec fermentum nisl lacinia vel. Aliquam erat volutpat. Mauris et imperdiet augue. Duis porttitor metus in semper hendrerit. Nulla sem diam, auctor eget augue non, tristique cursus orci.</p>
<p>Aenean eu sem nunc. Integer sed vestibulum tellus. Sed orci lectus, hendrerit ut odio ut, congue ultricies enim. In euismod faucibus ex non euismod. Pellentesque ac fermentum tortor, sollicitudin ullamcorper ante. Praesent in nulla dignissim, scelerisque quam quis, efficitur ex. Vestibulum id iaculis erat. Aenean at augue risus. Nullam sit amet auctor sem. Suspendisse pharetra arcu a nisi facilisis accumsan.</p>
<p>Suspendisse scelerisque massa in sapien vestibulum sodales. Suspendisse at nisl mi. Suspendisse dignissim auctor consectetur. Sed ullamcorper consequat odio eget porta. Duis sed dapibus purus, id volutpat mi. Sed quis sapien bibendum, tempor risus mollis, congue diam. Curabitur interdum pulvinar molestie. Aliquam ut sodales sapien, nec ultrices nisi. Nam a ex interdum, lacinia purus nec, eleifend enim. Fusce ornare egestas faucibus. Etiam vel sodales nisl. Suspendisse ornare sollicitudin tortor, et semper dolor dignissim quis.</p>
<p>In viverra sem vel velit tincidunt blandit. Morbi gravida felis dapibus feugiat pharetra. Integer pharetra eu felis eu euismod. Nunc tempor gravida justo. Maecenas ultricies tincidunt leo, et lacinia augue tincidunt eget. Phasellus rutrum lectus dolor, sit amet sodales odio efficitur eget. Cras quis purus blandit, pretium erat a, mattis neque. Phasellus leo urna, sollicitudin vel rutrum a, fringilla id metus.</p>
<p>Nam luctus ipsum mi, sed malesuada turpis convallis nec. Vestibulum vehicula leo eget purus pellentesque, eget accumsan ipsum tincidunt. Curabitur eleifend vestibulum imperdiet. Aenean interdum convallis mi sed interdum. Praesent bibendum purus in purus tempor, quis rutrum felis pulvinar. Donec in feugiat mi. Nulla finibus ornare urna, ut vestibulum elit sollicitudin nec. Phasellus sed sollicitudin ipsum. Duis eu porta turpis. Pellentesque et ex lectus. Etiam vel est non neque vehicula congue. Phasellus blandit urna a feugiat faucibus. Fusce pellentesque, mi quis tristique sodales, neque libero congue risus, at condimentum lorem sem id nulla.</p>
<p>Nunc id egestas ligula. Phasellus eu aliquet nisl, vel tincidunt diam. Morbi nec lorem orci. Mauris nec velit nulla. Morbi eget pharetra augue. Donec interdum placerat mi. Suspendisse potenti. Mauris ornare nunc ex, sit amet lobortis nisl fermentum sed. Fusce varius ipsum sed orci finibus cursus.</p>
<p>Nulla facilisi. Proin lorem magna, tincidunt ac aliquam ac, pharetra ac ante. Mauris eu varius felis. Aliquam maximus mi in sodales convallis. Suspendisse tempor eros iaculis, scelerisque ipsum pulvinar, bibendum nibh. Sed luctus pulvinar lacus. Quisque rhoncus dictum felis, sit amet venenatis enim aliquam vel. In nec elit et elit porttitor egestas eu suscipit est. Duis ac condimentum purus, vitae feugiat lacus. Curabitur nec nisi ut ex fermentum facilisis. Proin quis eleifend turpis. Morbi tempor semper sem, vitae sodales nisl volutpat id. Sed lacinia lobortis iaculis. In ac sagittis nulla. Ut faucibus sapien sed ante sagittis, in vehicula ex laoreet. Suspendisse ac urna elementum, ultrices lacus sed, dapibus orci.</p>
<p>Suspendisse luctus enim tincidunt elit venenatis lobortis. Nulla porttitor, leo id feugiat lacinia, neque libero malesuada velit, ac porttitor nibh arcu id elit. Aliquam ac convallis quam, in eleifend sem. Vestibulum at consequat enim. Etiam ultricies lacus vel velit lacinia, a venenatis mauris aliquam. Proin sit amet metus neque. Quisque ultrices risus nulla, pulvinar molestie massa consequat sed. Sed ipsum nisi, sodales a ante nec, fringilla elementum mi. Proin dapibus neque non elit facilisis pellentesque. Duis a luctus diam. Phasellus lorem est, lobortis quis tristique vitae, cursus vel odio. Fusce nec scelerisque ex, euismod tempor nisi. Quisque id viverra velit. Nullam sit amet nisl eu massa mattis gravida vitae non orci. Praesent imperdiet posuere nisl sed ullamcorper.</p>
<p>Praesent sodales auctor velit. Aenean et leo sed tortor malesuada imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at lacinia ex. Suspendisse et magna scelerisque, placerat tellus volutpat, congue risus. Nulla dignissim eros eu est fermentum, vitae sagittis justo convallis. Ut vulputate scelerisque diam, sit amet laoreet urna ornare eu. Vestibulum eget tortor ac ipsum pretium ornare. Quisque nulla dui, feugiat a suscipit non, accumsan in ligula. Cras eget sapien dui. Curabitur dignissim mollis dolor, eget maximus lacus finibus sed. Maecenas mattis quis risus non feugiat. Curabitur eget augue a neque pellentesque mattis.</p>
<p>Donec posuere orci sit amet enim feugiat dignissim. Etiam tincidunt nec mi vel varius. Donec at dui sollicitudin, sollicitudin nulla quis, fermentum sem. Fusce sed feugiat nunc. Maecenas sed lectus mattis erat rutrum scelerisque at eu mauris. Integer et placerat diam. Mauris vestibulum pulvinar purus, ac lobortis est dapibus eu. Ut eu sagittis nisl, mollis elementum lorem. Nullam nec nisi tellus.</p>
<p>Quisque nec turpis eget massa semper gravida. Sed rutrum mi ut tincidunt dignissim. Donec sit amet sagittis odio. Aenean ultricies enim sed turpis commodo aliquet. Maecenas nisl elit, sagittis in venenatis id, eleifend sed tellus. Mauris tincidunt, ligula ac sollicitudin posuere, ex lectus consectetur lacus, vel sollicitudin felis ante eu tortor. Aliquam nec nisl vestibulum odio porta sollicitudin. Nam nec erat sed velit semper ultricies non eget nisi. Pellentesque efficitur viverra sagittis. Morbi fermentum dolor id eleifend lobortis.</p>
<p>Ut erat metus, efficitur at accumsan sed, pretium ac tortor. Integer vestibulum leo quis ornare cursus. Donec hendrerit sed tellus quis ullamcorper. Praesent ac nulla sollicitudin, faucibus purus nec, gravida mauris. Nam semper mauris sit amet pretium sollicitudin. Integer orci mauris, luctus at dolor ut, molestie imperdiet dolor. Nulla sagittis elit vel risus interdum eleifend. Duis elementum commodo ligula, quis tempor magna euismod id. Nunc vitae dui ipsum. Fusce imperdiet diam metus, eu sagittis mauris dictum vel. Mauris eu malesuada massa. Duis vel ipsum velit. Donec ligula ante, faucibus vitae tellus non, sollicitudin volutpat quam. Aenean vulputate pellentesque orci non rutrum.</p>
<p>Ut ultricies commodo ante, id lacinia mi rutrum in. Mauris vitae felis ligula. Ut rutrum fermentum est, id tincidunt augue vulputate ac. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus vel convallis mi, quis volutpat nisl. Nulla suscipit libero nisl, at scelerisque urna accumsan pellentesque. Pellentesque blandit dapibus arcu. Duis gravida euismod ullamcorper. Duis pulvinar tortor eget mi dignissim, ac vehicula est auctor. Etiam augue elit, lacinia sed posuere nec, fringilla non libero. Ut quis pharetra erat. Nulla tincidunt, sapien quis viverra laoreet, augue est laoreet ligula, sit amet iaculis tortor tellus quis neque. Aliquam erat volutpat.</p>
<p>Proin pretium ex id dictum fringilla. Donec ultricies facilisis ullamcorper. Nunc mollis vitae velit eu euismod. Nunc lorem sapien, accumsan vel sagittis ut, gravida vitae magna. Proin aliquam nisl at eleifend bibendum. Phasellus non ultricies est. Phasellus eget rhoncus metus, vitae hendrerit erat. Quisque ex leo, auctor id dui et, elementum aliquet lectus.</p>
<p>Aliquam condimentum magna semper metus venenatis lacinia. Vivamus dignissim quam sit amet viverra commodo. In eu viverra magna, sed condimentum massa. Donec nunc purus, aliquam in accumsan sed, cursus sed purus. Ut at ex vitae ante convallis ornare ut et nisi. Donec laoreet eros vel ligula placerat egestas et a nunc. Donec scelerisque nibh convallis leo tempor, eu vestibulum leo pretium. Ut urna metus, fringilla sit amet convallis quis, fermentum in dui.</p>
<p>In ac orci nulla. Vivamus nec ante et velit tincidunt interdum eu nec libero. Pellentesque auctor neque quam, a consectetur mauris elementum in. Donec eros felis, iaculis non nisi id, egestas ultricies arcu. Sed odio nibh, fermentum sed diam quis, vestibulum faucibus sapien. Donec at metus in leo consectetur consectetur. Morbi id ligula erat. Curabitur volutpat erat non erat cursus, eget suscipit nunc accumsan. Nunc porttitor nunc non dapibus venenatis. In nunc urna, hendrerit vitae orci a, congue aliquam erat. Praesent rhoncus egestas tortor sit amet imperdiet. Suspendisse vulputate turpis suscipit, fermentum lacus at, pellentesque arcu. Pellentesque ut suscipit quam. Duis semper enim bibendum erat mattis, id viverra nisi sagittis. Aliquam sollicitudin porta auctor.</p>
<p>Sed pellentesque tempus gravida. Vestibulum sed scelerisque dolor, eget imperdiet est. Phasellus vitae leo congue, pretium leo in, vestibulum nulla. Donec at elementum velit, in facilisis libero. Pellentesque porta dui a nibh elementum maximus. Vestibulum vel est velit. Donec consectetur tortor nisi, eget gravida metus dictum eget. Cras at venenatis odio, et iaculis tellus. Praesent et dapibus velit. Phasellus lobortis leo viverra scelerisque tempus. Pellentesque eu sodales eros.</p>
<p>Suspendisse potenti. Aliquam a ipsum quis tellus accumsan fermentum ut vitae turpis. Phasellus lectus dolor, maximus id ornare non, lobortis sit amet nunc. Phasellus mattis libero turpis, vitae fermentum purus gravida in. Suspendisse facilisis non dui sed ultricies. Nullam porttitor est purus, placerat cursus odio imperdiet at. Aliquam suscipit neque quis nunc egestas, id ullamcorper eros fermentum. Sed gravida, ipsum non congue sagittis, felis eros maximus orci, posuere aliquet metus eros vulputate dui. Morbi vel sodales mi. Proin molestie, odio consequat consectetur posuere, mi metus tristique sem, eget posuere diam neque vel ipsum. Duis tempor turpis at risus tempor pellentesque.</p>
<p>Proin ac leo at lorem placerat tempus a eget mi. Cras molestie ante vitae faucibus ultrices. Curabitur auctor nibh at justo ultricies, auctor aliquam velit eleifend. In eget sapien diam. Donec et pharetra ligula. Maecenas eros orci, posuere sed nulla et, ultrices suscipit ex. Nulla erat metus, lacinia a euismod at, mollis in odio.</p>
<p>Suspendisse non rutrum libero, nec porta ipsum. In vitae imperdiet metus. Aliquam rhoncus consequat urna scelerisque aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur ultricies est id imperdiet tincidunt. Sed sollicitudin, ex lacinia porttitor dictum, libero metus ornare sem, vitae placerat risus nisl ullamcorper leo. Vivamus nec nisi nisi. Nullam et urna facilisis urna eleifend blandit id elementum lorem. Donec fringilla facilisis felis, sit amet dapibus leo posuere eget. Sed accumsan nisi eget enim aliquam tincidunt. Duis fringilla pharetra tortor fermentum lacinia. Pellentesque sodales felis vitae enim malesuada, vitae iaculis lacus tincidunt. Vivamus semper massa purus, vel fermentum mauris tempus sit amet. Morbi euismod vehicula eros a vehicula. Duis pharetra ex ipsum, ut ultrices lacus lacinia quis.</p>
<p>Sed malesuada leo ac metus interdum, in placerat sem volutpat. Pellentesque volutpat leo urna, nec dictum est viverra id. Proin efficitur, eros vel vulputate rhoncus, nunc massa viverra sapien, et tincidunt sem risus sed ante. Sed ac purus finibus, dictum dui id, tempus nulla. Curabitur in quam in risus imperdiet hendrerit in at ipsum. Phasellus venenatis ex sit amet ipsum lacinia, non tristique nisi facilisis. Nunc viverra nunc ipsum, nec dictum nibh finibus at. Sed ac vehicula orci. Integer laoreet dui id rutrum elementum. In hac habitasse platea dictumst. Quisque ultricies aliquam pellentesque. Fusce posuere consequat condimentum.</p>
<p>Integer ut est eu tellus aliquam sodales vel eget nibh. Ut vel elit odio. Sed semper velit sit amet vulputate aliquam. Vivamus consequat, eros nec ultrices tincidunt, elit erat cursus elit, id bibendum neque lacus sed massa. Suspendisse eget velit augue. Nam luctus aliquet magna, ac dapibus ipsum malesuada et. Morbi leo nisi, vulputate eu metus facilisis, hendrerit ultrices erat. Integer aliquam bibendum massa vel semper. In pharetra nulla vitae tincidunt volutpat. Cras ut elementum nulla. Integer vestibulum, lacus a tincidunt consequat, justo mi maximus odio, non interdum eros est laoreet nulla. Vestibulum ac tortor cursus, pretium nisl non, tempus mi. Ut ut metus vitae eros facilisis lobortis. Quisque iaculis orci vitae nibh congue sodales.</p>
</div>
</div>
#ejemplo1{
/** Si queremos probar podemos poner scroll-margin-top
* aquí también para comparar el resultado
*/
}
#ejemplo2{
scroll-margin-top: 65px;
}
/**
*
* Pongo estas propiedades al final del css porque
* para este ejemplo no son importantes.
*
*/
body{
margin: 0;
paddig: 0;
}
ul{
margin: 0;
padding: 15px;
display: flex;
flex-flow: row;
gap: 20px;
list-style-type: none;
}
.navbar{
position: sticky;
width: 100%;
background: #f1f1f1;
top: 0;
}
.container{
max-width: 800px;
padding: 15px;
}
.highlight{
background: gold;
padding:10px;
line-height: 25px;
}
code{
background: #f1f1f1;
padding: 3px 5px;
}
Also see: Tab Triggers