Home / Layout Patterns / Split Screen
Split Screen CSS Template, Free with Live Demo
Free split screen website template for a restaurant. A sticky visual half on the left and a scrolling menu and booking form on the right. Live demo. The example is Salt and Ember, a wood fire restaurant.
What is split screen?
A split screen layout divides the page into two halves. One side holds a strong visual or brand message and stays still, while the other side scrolls with the details.
It gives a small site a premium feel. The fixed half is just position: sticky with the full viewport height, so it needs no JavaScript at all.
Good for
- Restaurants and bars
- Hotels and venues
- Sign up and login pages
- Product pages with one hero image
What you get in this template
- Sticky left panel with a glowing fire made in CSS
- Scrolling menu with dish notes and prices
- Working booking form with a confirm message
- Elegant Cormorant Garamond headings
- Stacks top to bottom on phones
The key CSS
This is the part that makes the split screen look work. Copy it into your own project.
.split {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
}
.left {
position: sticky; top: 0;
height: 100vh;
}
@media (max-width: 860px) {
.split { grid-template-columns: 1fr; }
.left { position: relative; height: 70vh; }
}How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
How do I keep one side fixed in a split screen layout?
Put both halves in a two column grid, then give the left side position: sticky, top: 0 and height: 100vh. The right side scrolls normally.
Is split screen good on mobile?
Not side by side. This template stacks the halves on small screens, with the visual first and the content below.
What content suits a split screen?
Anything with one strong image or message plus a list of details, like a menu, a room list or a sign up form.
More Layout Patterns designs
021. Bento Grid
Orbit, a smartwatch product page
022. Masonry
Frame Club, a photo community
024. Broken Grid
Nomad Linen, a fashion lookbook
025. Scrollytelling
Hilltop Roasters, a bean to cup story
026. Horizontal Scroll
A museum timeline of 100 years of trams
027. Full Bleed
North Atlantic Walks, a hiking tour company
028. Card Carousel
Kiln, a pottery class studio
029. Magazine Layout
Tide and Table, a food and travel magazine