Untitled
<body> <button class="social">🚀</button> <section id="one"> <h2 class="red">Header one</h2> </section> <section id="two"> <h2 class="bisq">Header two</h2> </section> <section id="three"> <h2 class="orange">Header three</h2> </section> <footer> <a href="#one">one</a> <a href="#two">two</a> <a href="#three">three</a> </footer> </body> section{ width: 100vw; height: 100vh; text-align: center; position: sticky; top: 0; } .red{background-color: red; } .bisq{background-color: bisque; } .orange{background-color: orange; } .social { position: fixed; top: 50vh; z-index: 1; font-size: 1.5rem; padding: 0.7rem; background-color: lightblue; border: none; border-radius: 0 0.75rem 0.75rem 0; } footer { position: fixed; bottom: 0; }
Leave a Comment