html {
scroll-behavior: smooth;
}
.sp-page {
position: relative;
max-width: 900px;
margin: 0 auto;
font-family: ‘Segoe UI’, Arial, sans-serif;
line-height: 1.5;
color: #222;
}
.sp-left-nav {
position: sticky;
top: 90px;
width: 220px;
margin-left: -260px;
float: left;
border-left: 2px solid #1F3D2B;
padding-left: 14px;
}
.sp-left-nav p {
margin: 0 0 6px 0;
}
.sp-left-nav a {
color: #1F3D2B;
text-decoration: none;
font-weight: 600;
font-size: 15px;
}
.sp-heading {
color: #1F3D2B;
margin: 22px 0 8px 0;
}
.sp-divider {
margin: 24px 0;
border: none;
border-top: 1px solid #e2e2e2;
}
.sp-callout {
margin: 22px 0;
padding: 16px 18px;
background: #f6f6f3;
border-left: 3px solid #1F3D2B;
max-width: 600px;
}
.sp-button {
display: inline-block;
background: #1F3D2B;
color: #ffffff;
padding: 12px 24px;
text-decoration: none;
font-size: 15px;
font-weight: 600;
border: 2px solid #1F3D2B;
}
This is an example of a professionally structured long-form page using sticky navigation, smooth scrolling, organized sections, and styled callout areas.
Page Overview
This layout improves readability and navigation for long content pages.
Section One
Content for the first section goes here. Add text, lists, images, or additional content blocks as needed.
Section Two
- First item
- Second item
- Third item
Section Three
Use this section for additional structured content and supporting details.
Section Four
Additional long-form content can continue here while the left navigation remains visible during scrolling.
Begin Your Service Request
Requests are reviewed before acceptance. Scope, timing, and deliverables are confirmed in writing.
Submit Request
StillPoint Documentation Services 