Untitled
unknown
plain_text
5 months ago
1.0 kB
2
Indexable
<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