<body>
<header> This is a header </header>
<main>
<button> Click here to suscribe </button>
<p>Hello there I am the main </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis numquam sapiente veniam fugiat. Harum voluptatum est ab similique incidunt, omnis ut voluptatem dolores nemo eaque reprehenderit ad ullam, odit obcaecati ratione sint! Veniam nostrum, nobis provident enim dolor, ad quae est impedit accusantium tenetur quia culpa eligendi similique doloremque assumenda? Quae, amet rem. Minima vitae, accusantium corrupti dolorem perferendis qui magnam delectus tenetur, incidunt facere rem. Debitis ipsam perferendis dolore molestiae. Quasi praesentium eum laudantium. Vel distinctio labore eligendi quibusdam eos ipsa est mollitia repudiandae dolore consectetur ipsam tempora quia, a nulla similique officia error quidem ex fugit fuga dignissimos sint sapiente voluptatum. Officia, excepturi error. Quibusdam magni facere earum minus beatae fugit debitis. Libero, id laborum. Blanditiis voluptates est exercitationem reiciendis fugiat molestias eaque, obcaecati nisi dolore ut et optio quam odio impedit voluptatum quasi sit incidunt expedita laudantium corporis provident vel deleniti, iste vero! Odit similique tenetur repudiandae sequi! A porro temporibus doloremque? Blanditiis nulla saepe voluptatibus fugiat suscipit omnis ipsum. Vitae aliquam dolorum laborum odio adipisci quae facere nobis suscipit inventore perferendis laudantium accusantium nulla, repellendus non, in explicabo commodi architecto rem sapiente nostrum cumque. Officiis at laboriosam, autem veritatis quis minima in! Eligendi voluptas, porro facilis voluptatibus tempora sequi alias, sapiente possimus nobis eveniet officiis totam quisquam reiciendis, minus eaque! Mollitia saepe, vel commodi eveniet molestias ratione in tempore, alias quisquam eaque, nisi deserunt. Aut doloremque culpa quia, fugit asperiores, dolorem consequatur recusandae deserunt corrupti impedit voluptate! Ex, doloremque. Rem consequatur numquam deleniti mollitia sint iure neque nostrum quo sequi temporibus repellendus velit consectetur ea praesentium possimus quas, molestias vel sunt. Libero deleniti fuga natus illum. Magni consectetur iusto similique dicta quas quibusdam fugiat, dolores non quasi. Fugit similique facilis, harum officia dolor quas omnis explicabo ea quam? Nisi modi dolorem consequuntur. Veritatis doloribus ad beatae, ducimus placeat aliquid fugiat iusto quos minus omnis eaque nam cum nesciunt aut adipisci illo unde nihil quis odit dolores id, ullam quam at! Exercitationem officia, adipisci ad quis quidem totam numquam omnis in libero ex incidunt fuga esse a iusto non nemo repudiandae ducimus reiciendis, recusandae repellendus laborum delectus itaque. Dolore itaque consectetur sapiente sed ea reiciendis magnam qui perferendis laudantium nobis error optio eum vero nisi, impedit alias! Id, deleniti et sed est animi voluptates hic recusandae officia ut possimus quam, atque praesentium dolor libero perferendis. Dolor dicta maiores autem quisquam voluptas quasi voluptatibus labore laboriosam ab aut animi, tempore molestias officiis quas iusto facilis aliquam quod ipsam recusandae numquam? Libero, mollitia necessitatibus explicabo temporibus voluptates, maiores ducimus quas laboriosam a minus illum deleniti sed ipsa, voluptas magnam magni alias laudantium unde similique eaque eum odio? Cumque optio, provident officiis molestias ex suscipit neque explicabo animi officia enim, aperiam necessitatibus dolorum cupiditate dolorem quidem, similique veritatis earum perferendis praesentium maxime aliquid nemo! Explicabo, temporibus eos perferendis in laudantium saepe fuga velit voluptatibus ad pariatur repellat dolorum natus possimus alias nisi necessitatibus maxime, error nesciunt. Autem nisi dicta cumque praesentium, laudantium maiores id consectetur ea porro deserunt dolores accusamus placeat excepturi numquam exercitationem omnis nesciunt odio a facilis. Eveniet voluptates optio magnam expedita odit, nesciunt quibusdam, ad ipsa deserunt accusantium reiciendis, corporis provident tenetur. Ducimus ipsam aliquam natus eius ipsa labore nisi ab accusantium repellendus, soluta at quaerat iure voluptatem, possimus fugit animi maiores nihil quasi quas itaque praesentium! Quibusdam consequatur laboriosam aliquid quae, ea voluptas! Quisquam minus amet iste autem molestiae neque vel, doloremque dolorem, esse dicta voluptatibus corrupti provident dignissimos quo distinctio doloribus veritatis aperiam suscipit laboriosam? Saepe doloribus eligendi ex repudiandae fugiat voluptatibus tempore accusantium illum deserunt quis laboriosam totam odio ab, necessitatibus rerum eius ipsa id aut delectus quas doloremque pariatur! Soluta nemo velit doloribus harum dolorem? Dolore ipsam natus laudantium maxime praesentium similique magni reiciendis quos facere obcaecati. Iure aspernatur fugit perspiciatis rem a recusandae impedit, nostrum, officiis necessitatibus optio labore quis debitis ab fugiat nesciunt exercitationem voluptates qui molestiae animi illum est, accusantium eveniet. Dicta, deleniti maxime, officiis labore odio praesentium quasi veritatis consequatur architecto iste aut in cupiditate doloribus placeat repudiandae eos tempore? Repellendus earum laboriosam aut magni dolor amet vitae maxime velit deleniti facere. Iste facere ab deserunt minus numquam ipsam consequuntur autem eaque reprehenderit quaerat, consequatur dicta odio voluptatum sunt nostrum alias dignissimos est dolor ad dolorum quia? Voluptatem dolore laudantium facilis perferendis sunt quisquam voluptatibus nihil error adipisci perspiciatis corrupti ipsam totam eius odio nobis ut ab fugiat, veniam ipsum voluptates quos facere vitae quibusdam. Sint architecto quasi enim. Numquam, dicta quas aliquam asperiores quaerat similique excepturi, debitis odio voluptas ipsum ullam animi ad nisi nam ab alias mollitia minus facere quidem. Dolor at amet ducimus quaerat, a perferendis dicta? Illo, deleniti facilis! Suscipit inventore esse, ullam excepturi voluptas quaerat fugiat eum porro nisi aspernatur repellat nesciunt, alias provident. At, nostrum hic ea libero quis vel aut modi distinctio, eveniet culpa iste vitae repudiandae consequatur adipisci, ex labore itaque rem architecto voluptatem. Impedit corrupti optio inventore repellat! Autem nulla debitis fugit magni. Blanditiis, quaerat quis. Culpa aut aspernatur nostrum ex? Amet nemo repellendus repudiandae distinctio ut dolore tempora sunt, et assumenda obcaecati dignissimos, delectus eum inventore, consectetur perferendis repellat quia fugiat dolores facilis blanditiis cupiditate vitae. Debitis enim quisquam facere impedit similique quos culpa quam quo laboriosam blanditiis doloribus sunt corrupti dignissimos saepe neque inventore commodi nam aut cupiditate placeat eius, voluptatibus dolor! Pariatur iure assumenda vero beatae nesciunt fugit explicabo, praesentium cumque iste at. Necessitatibus mollitia eius placeat soluta? Laboriosam eveniet quibusdam consectetur distinctio quos necessitatibus! Quis, atque asperiores? Soluta enim accusantium alias. Laborum voluptas amet, doloremque et impedit illum veritatis molestias nostrum nulla nobis. Illum mollitia, esse explicabo blanditiis enim neque ad consectetur cupiditate possimus nam. Earum nemo molestias ad modi necessitatibus, dolorem vitae, quis, consequuntur aliquam recusandae perspiciatis facere expedita magni id esse ullam culpa! Eum quam corporis suscipit, soluta fugiat aut laboriosam asperiores quia, tempora repellat necessitatibus magnam? Nam, veritatis natus corporis repellat laborum dolore necessitatibus illum atque ipsam distinctio perspiciatis dignissimos fugit debitis doloribus eligendi iste ab suscipit nemo, voluptatibus eveniet! Recusandae, impedit quos?</p>
</main>
</body>@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200..900&display=swap');
body{
font-family: 'Mulish', sans-serif;
}
header {
background-color: hotpink;
text-align: center;
padding: 30px;
position: sticky;
top: 0;
z-index: 2;
}
main {
text-align: center;
background-color: blue;
color: white;
padding: 30px;
position: relative;
min-height: 100vh;
position: relative;
z-index: 1;
}
button {
border: none;
text-align: center;
padding: 8px;
background: white;
box-shadow: 1px 2px 8px hsl(0deg 0% 0% / 0.25);
border-radius: 6px;
position: sticky;
top: 0;
right: 20px;
margin-left: 100rem;
z-index: 2;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.