A long, tall, SINGLE-COLUMN SCROLLING web page — the rendered web page itself, as if you are scrolling straight down it from top to bottom — for a real, live, full-width responsive website for Pizzeria Portofino, a riverfront Italian pizzeria in Chicago, in the visual world of a modern eastern-Mediterranean restaurant & hookah lounge, every section a full-bleed photograph with the type laid over it with warm editorial food photography with brass-and-tile styling imagery and ornament. Show ONLY the web page content, edge-to-edge: NO browser window, NO browser chrome, NO address bar, NO tabs, NO URL bar, NO window frame, NO device or mockup frame. The page is FULL-BLEED: edge-to-edge across the full width with NO outer margins, NO borders, NO rounded corners, NO canvas colour around or between the content — a real website, not a design comp, not floating cards. Do NOT label, number, or badge the sections; there are no visible section numbers.
STRUCTURE — read the page as one long vertical SCROLL with 7 parts in this order from top to bottom: a thin navigation bar pinned flush to the very top, then a hero area, then a story, then a menu, then a gallery, then a visit area, and a thin footer pinned to the very bottom. EVERY part fills the ENTIRE width of the page, and the parts are arranged strictly one above another straight down the page — only one part at each level. They are NEVER placed two-across, NEVER in side-by-side columns, NEVER in a grid of sections. The hero is wide and SHORT (much WIDER than it is tall — NOT tall); no single area dominates. (This describes PLACEMENT only — how the parts blend together or divide visually is set entirely by the AESTHETIC line below; columns WITHIN one part, like text beside an image or an item grid, are fine.) EXACTLY ONCE — every part, and every line of text in it, appears ONE TIME ONLY. Do NOT repeat, echo, mirror or re-draw a navigation bar, logo, headline, button or any other element a second time, and do NOT restate a section further down. If the content does not fill the canvas, let the remaining space be background, imagery or generous whitespace — NEVER a second copy of what you have already drawn.
AESTHETIC — keep ONE single continuous background the whole way down, and set the sections apart ONLY with generous empty BREATHING ROOM between them — open negative space marks each break, with no lines and no change of background colour; just calm, airy spacing separating one section from the next.
DENSITY — a clean, airy, minimal look: generous whitespace and breathing room around every element, restrained imagery (fewer and smaller images), sparse ornament, calm and uncluttered.
RENDER-FIDELITY CONSTRAINTS — this exact page will be rebuilt as real, reflowing, responsive HTML by a deterministic renderer, so it MUST stay inside what that renderer reproduces faithfully. (1) BACKGROUND IMAGERY EVERYWHERE: every section — nav, hero, story, menu, gallery, visit and footer alike — has its OWN full-bleed warm editorial food photography with brass-and-tile styling background image filling that band edge to edge, and the section's content sits ON TOP of it. NO section is a flat colour fill, and no picture is confined to a bounded panel beside the text. (2) MIX THE TEXT TREATMENTS so the sections do not all read alike — use all three across the page: type set DIRECTLY on the background image over a calmer part of the picture; type inside a TRANSLUCENT tinted panel the image still shows through; and type inside a SOLID OPAQUE card or bar in a flat palette colour laid over the image. A section may combine them — an opaque menu card over the image with that section's heading directly on the picture above it. (3) RESTRAINED ORNAMENT: decoration is limited to repeatable motifs a CSS border can carry — thin rules, matching corner flourishes, small standalone spot illustrations — never dense layered ornament fused into the type. (4) REAL TYPE: every headline, label, menu name, price and paragraph is crisp Cormorant Garamond / Montserrat web-font type set OVER the imagery — never hand-lettered, warped, outlined, 3-D, or word-art lettering painted into the artwork. (5) RECTANGULAR LAYOUT: sections are upright rectangular bands stacked straight down — no diagonal, tilted, overlapping, torn or collaged panels. (6) PALETTE: keep the imagery and every panel within #6E4A6E, #C08A2E, #2A2320, #F4ECDD. (7) LEGIBLE OVER IMAGERY: every line must read at full strength against whatever is behind it — darken, lighten or blur the picture beneath the type as much as the design needs. The SMALLEST text anywhere (fact labels, captions, fine print, footer) is at least 1/70th of the page width tall, never shrunk into cramped chips, with generous letter- and line-spacing so glyphs never touch, and related text (menu prices, form fields) aligned in clean rows/columns.
Across the very top, a thin navigation bar: a logo in Cormorant Garamond reading exactly "Pizzeria Portofino"; a nav-link in Montserrat reading exactly "Menu"; a nav-link in Montserrat reading exactly "About"; a nav-link in Montserrat reading exactly "Reserve"; a nav-link in Montserrat reading exactly "Visit"; a cta in Montserrat reading exactly "Reserve".
Directly below it, the hero area, wider than tall: the headline, subhead and buttons sit on a FLAT SOLID area of the palette (a plain colour field or solid band), and any hero illustration is a bounded panel to ONE SIDE of that text — the hero text is NEVER laid over a photograph, busy scene or detailed image, so the words always sit on a clean solid background: a eyebrow in Montserrat reading exactly "River North · Chicago Riverfront"; a headline in Cormorant Garamond reading exactly "Welcome to the Italian Riviera in Chicago"; a subhead in Montserrat reading exactly "A sun-drenched casual pizzeria on the Chicago riverfront."; a cta in Montserrat reading exactly "Reserve a Table"; a cta in Montserrat reading exactly "See the Menu"; a warm editorial food photography with brass-and-tile styling hero-illustration of a sun-drenched riverfront patio with a striped awning, colorful umbrellas and the Chicago skyline.
Then the story: Lay it out as two side-by-side panels: on the LEFT a text column with the eyebrow, the headline, and the body paragraph; on the RIGHT a single warm editorial food photography with brass-and-tile styling supporting illustration filling its panel height and running to the right edge. Then, spanning the FULL page width BELOW both panels, place the fact labels as one evenly-spaced row — each label on its OWN single line, set at the SAME comfortable size as the body paragraph text, generously spaced and NEVER shrunk into small chips. a eyebrow in Montserrat reading exactly "Our Story"; a headline in Cormorant Garamond reading exactly "A taste of la dolce vita"; a body in Montserrat reading exactly "Pizzeria Portofino brings the spirit of the Italian Riviera to the Chicago River. Our menu features wood-fired pizzas, coastal Italian fare, and refreshing spritzes, all served in a vibrant, sun-soaked setting. We believe in good food, great company, and the art of la dolce vita. Join us for a taste of the Mediterranean, right here in the city."; a row of all 4 fact labels in Montserrat: "Wood-fired pizzas", "Coastal Italian fare", "Riverfront patio", "Aperitivo & spritzes"; a warm editorial food photography with brass-and-tile styling supporting-illustration of a couple toasting spritzes at a riverfront patio table with potted olive trees.
Then the menu: Lay the menu as ONE full-width section spanning the entire page width — a centered eyebrow, headline and any legend across the top, then the items below as a grid of SEPARATE cells with clear gaps between them, in the EXACT number of rows and columns given with the item list below — every cell wide enough for its text at the same comfortable size as the body text; inside each cell the name is on its OWN line, the details stack on the line(s) directly below the name, and the price sits on its own line or aligned in the cell — the name, details and price of an item are NEVER packed inline on a single running row. a eyebrow in Montserrat reading exactly "The Menu"; a headline in Cormorant Garamond reading exactly "Wood-Fired Pizzas"; a legend in Montserrat reading exactly "Classics & Specialties · Vegetarian options available"; a menu of these 6 items set in Montserrat, laid out as a grid of EXACTLY 2 rows of 3 cells; inside EACH cell the item name is on its OWN line, the details stack on the line(s) directly BELOW the name, and the price is on its own line or aligned within the cell — the name, details and price are NEVER run together inline on a single row, and each cell sits on the section's flat fill. Draw EXACTLY 6 cells, one per item, no more: "MARGHERITA" (San Marzano tomato, mozzarella di bufala, fresh basil) $18; "DIAVOLA" (San Marzano tomato, pepperoni, spicy salami, honey) $20; "FUNGHI" (wild mushrooms, taleggio, truffle oil, fresh herbs) $22; "RIVIERA" (Gulf shrimp, sun-dried tomatoes, arugula, chili oil) $24; "PORTOFINO" (prosciutto, burrata, fig jam, aged balsamic, pistachios) $23; "VEGETARIANA" (seasonal vegetables, fior di latte, pesto, parmesan) $21.
Then the gallery: Lay the gallery as ONE full-width section spanning the entire page width — a short eyebrow and headline at the top, then the photos below as a single edge-to-edge horizontal row of images filling the full width. a eyebrow in Montserrat reading exactly "The Place"; a headline in Cormorant Garamond reading exactly "Sun, spritzes, and the skyline"; a subhead in Montserrat reading exactly "The patio, the pizzas, and golden hour on the river."; a warm editorial food photography with brass-and-tile styling photo of a wood-fired margherita pizza on a marble table; a warm editorial food photography with brass-and-tile styling photo of an Aperol spritz with sunglasses beside it in the sun; a warm editorial food photography with brass-and-tile styling photo of the Chicago river at golden hour from the patio.
Then the visit section: Lay the visit area as ONE full-width section spanning the entire page width — on the LEFT the eyebrow, the headline, then the fact labels EACH ON ITS OWN LINE at the same comfortable size as body text (address, phone and hours are never squeezed onto one cramped line or shrunk to fit), then a short contact form; on the RIGHT the map; together the two halves fill the one full-width section. a eyebrow in Montserrat reading exactly "Visit"; a headline in Cormorant Garamond reading exactly "Find us on the river"; a row of all 3 fact labels in Montserrat: "317 N. Clark St., Chicago, IL 60654", "(312) 555-0100", "Mon–Thu 11am–10pm · Fri–Sat 11am–11pm · Sun 10am–9pm"; a form-label in Montserrat reading exactly "Name"; a form-label in Montserrat reading exactly "Email"; a form-label in Montserrat reading exactly "Party size"; a cta in Montserrat reading exactly "Request a Table"; a warm editorial food photography with brass-and-tile styling map-illustration of a simple street map of the River North neighborhood in Chicago.
At the very bottom, a footer band TALL ENOUGH that every footer string sits on its own clear line or slot at the SAME comfortable size as body text — footer text is never miniaturized to make the band thin: a logo in Cormorant Garamond reading exactly "Pizzeria Portofino"; a tagline in Montserrat reading exactly "La dolce vita on the river."; a row of all 2 fact labels in Montserrat: "317 N. Clark St., Chicago · (312) 555-0100", "Open daily · River North"; a legal in Montserrat reading exactly "© 2026 Pizzeria Portofino".
Only the imagery, backgrounds, ornament and styling are in the style of a modern eastern-Mediterranean restaurant & hookah lounge, every section a full-bleed photograph with the type laid over it, warm editorial food photography with brass-and-tile styling — never the text. ALL TEXT is clean, reproducible web-font type — every string is a real web font, letterforms as if set in CSS, matching the authentic Cormorant Garamond (logo + headlines) and Montserrat (everything else) typefaces exactly, not word art. Spell every word exactly as written. Palette: #6E4A6E, #C08A2E, #2A2320, #F4ECDD.