Solmira — Boutique Beach Resort Website

Create a complete, production-quality, visually exceptional boutique beach resort website called Solmira using only vanilla HTML, CSS, and JavaScript.

The finished website must look like a real luxury resort website created by a professional hospitality design agency.

This is NOT a generic hotel template.

The visual experience should communicate:

• Calm
• Escape
• Nature
• Hospitality
• Tropical elegance
• Privacy
• Warmth
• Premium travel

Avoid generic booking-template layouts, repetitive cards, excessive gradients, huge rounded containers, generic blue travel themes, and unnecessary animation.

The final website should be convincing enough that a real boutique resort could replace the sample information and publish the design professionally.

---

1. REQUIRED FILE STRUCTURE

Create exactly:

• index.html
• style.css
• script.js

Keep all HTML inside index.html.

Keep all CSS inside style.css.

Keep all JavaScript inside script.js.

Correctly link all files.

The website must work immediately when the three files are placed in the same directory.

No installation, compilation, package manager, framework, or development server should be required.

---

2. TECHNOLOGY RESTRICTIONS

Use ONLY:

• HTML5
• CSS3
• Vanilla JavaScript

Do NOT use:

• React
• Vue
• Angular
• Svelte
• Next.js
• Nuxt
• Tailwind CSS
• Bootstrap
• jQuery
• GSAP
• npm
• external JavaScript libraries
• backend code
• databases
• build tools

Use lightweight inline SVG icons where appropriate.

This must remain a true static website.

---

3. BRAND IDENTITY

Brand:

SOLMIRA

Tagline:

Stay close to the horizon.

Solmira is a fictional boutique beachfront resort located on a quiet tropical coast.

Build a complete visual identity around the idea of:

• Sun
• Sea
• Calm
• Natural materials
• Slow travel
• Personal hospitality
• Intimate luxury

The resort should feel premium but relaxed.

Do not make it feel like a huge corporate hotel chain.

---

4. VISUAL DIRECTION

Create a refined tropical editorial aesthetic.

Suggested palette:

• Warm sand
• Soft ivory
• Deep ocean green
• Muted blue
• Charcoal
• Sun-washed terracotta accent
• Natural wood tones

Use color with restraint.

Avoid bright tropical gradients.

Luxury should come from:

• Photography
• Typography
• Whitespace
• Editorial composition
• Fine details
• Natural textures

---

5. TYPOGRAPHY

Use elegant editorial display typography for:

• Hero headline
• Section titles
• Quotes
• Room names

Use a clean modern sans-serif style for:

• Body text
• Navigation
• Booking controls
• Metadata
• Buttons

Use responsive clamp() sizing.

Keep paragraphs concise and airy.

---

6. NAVIGATION

Create a refined transparent navigation over the hero.

Include:

• SOLMIRA wordmark
• Stay
• Experiences
• Dining
• Wellness
• Gallery
• Location

Add a primary CTA:

Book Your Stay

After scrolling, transition the nav into a solid or lightly translucent state.

Use subtle blur only where appropriate.

---

7. MOBILE NAVIGATION

Create a premium mobile menu.

Include:

• Brand
• Main navigation
• Book Your Stay CTA
• Resort phone/email placeholders
• Small location text

Requirements:

• Accessible menu button
• Smooth open/close transition
• Escape key closes
• Selecting a link closes
• Background scroll lock
• Correct ARIA state
• Large touch targets

---

8. HERO SECTION

Create a cinematic full-height hero.

Use a high-quality image showing:

• Private tropical beach
• Oceanfront villa
• Infinity pool
• Palm-framed coastline

Add a controlled dark overlay.

Small label:

BOUTIQUE BEACH RESORT · CAMBODIA

Main headline:

A slower rhythm by the sea.

Supporting copy:

“Private villas, quiet beaches, thoughtful dining, and days shaped entirely around you.”

Primary CTA:

Explore Solmira

Secondary CTA:

Book Your Stay

Add a subtle availability/search panel near the bottom of the hero.

---

9. BOOKING SEARCH PANEL

Create a polished booking-search interface.

Fields:

• Check-in
• Check-out
• Guests
• Accommodation

Accommodation options:

• Any Stay
• Garden Suite
• Ocean Suite
• Pool Villa
• Beachfront Villa

Button:

Check Availability

This is frontend-only.

Validate that:

• Check-in is selected
• Check-out is selected
• Check-out is after check-in
• Guest count is valid

After valid submission, show a tasteful demo message:

“Availability search is ready. This demo is not connected to a live booking engine.”

Do not pretend rooms are actually available.

---

10. INTRODUCTION STATEMENT

Create a typography-led section.

Small label:

WELCOME TO SOLMIRA

Large statement:

Some places are designed to be visited. Others are designed to be felt.

Add concise supporting text describing a quiet beachfront retreat surrounded by tropical landscape.

Keep this section simple and spacious.

---

11. RESORT STORY

Create:

Our Place

Heading:

Between tropical gardens and the sea.

Write realistic hospitality copy explaining:

• Intimate resort scale
• Natural surroundings
• Local materials
• Relaxed service
• Thoughtful design
• Connection with the coast

Use an asymmetrical layout with:

• Large resort photograph
• Smaller architectural detail image
• Text
• Small location note

---

12. ACCOMMODATION SECTION

Create:

Stay Your Way

Show four accommodation types.

Garden Suite

Private terrace surrounded by tropical gardens.

2 Guests 1 King Bed 48 m²

Ocean Suite

Elevated sea views with a private balcony.

2 Guests 1 King Bed 58 m²

Pool Villa

Private pool, outdoor lounge and garden privacy.

2 Guests 1 King Bed 95 m²

Beachfront Villa

Direct beach access with generous indoor-outdoor living.

2–4 Guests 1 King Bed 130 m²

Use large photography.

Do NOT create cramped hotel cards.

---

13. ROOM DETAILS

Each room/villa should include:

• Large image
• Name
• Short description
• Guest capacity
• Bed type
• Size
• Key amenities
• Starting nightly price
• Explore CTA
• Book CTA

Use clearly fictional pricing.

Example:

From $220 / night

Keep layout elegant.

---

14. ACCOMMODATION FILTER

Create frontend filters:

• All
• Suites
• Villas
• Private Pool
• Beachfront

Implement using vanilla JavaScript.

Use subtle transitions.

---

15. ROOM QUICK VIEW

Create an accessible room quick-view modal.

Include:

• Image gallery
• Room name
• Description
• Capacity
• Size
• Bed
• Amenities
• Price
• Book This Stay CTA

Requirements:

• Escape closes
• Outside click closes
• Focus handling where practical
• Background scroll lock
• Keyboard-accessible controls

No external modal library.

---

16. SIGNATURE EXPERIENCE

Create a large visual section:

The Solmira Day

Present a sample day at the resort.

Example timeline:

7:00 AM Sunrise swim

8:30 AM Breakfast overlooking the garden

11:00 AM Private island excursion

3:00 PM Spa ritual

6:00 PM Sunset drinks

7:30 PM Dinner by the sea

Use editorial storytelling rather than cards.

---

17. EXPERIENCES

Create:

Experiences Beyond the Room

Include:

Island Escape

Private boat journey to nearby islands.

Sunset Sailing

A calm evening on the water.

Coastal Kayaking

Explore quiet sections of the coast.

Local Discovery

Guided cultural and food experiences.

Private Picnic

Beach or garden picnic prepared by the resort.

Sunrise Yoga

Morning movement overlooking the sea.

Each experience should include:

• Image
• Title
• Short description
• Duration
• Explore link

Use varied layout sizes.

---

18. DINING

Create:

Dining at Solmira

Heading:

Simple ingredients. Somewhere unforgettable.

Introduce a fictional restaurant:

SORA

Describe coastal dining using:

• Local seafood
• Seasonal produce
• Cambodian flavors
• Fresh herbs
• Tropical ingredients

Include large food imagery.

---

19. DINING EXPERIENCES

Show:

Breakfast at Sora

Fresh tropical breakfast served in the restaurant or villa.

Sunset Table

Private dining near the beach.

Chef's Table

Small tasting experience inspired by local ingredients.

In-Villa Dining

Quiet meals in the privacy of the guest's villa.

Use an editorial arrangement.

---

20. SAMPLE MENU

Create a compact sample menu.

Categories:

• Morning
• Lunch
• Dinner
• Drinks

Use JavaScript tabs.

Example items:

Tropical Fruit & Coconut Yogurt Seasonal fruit · toasted coconut · local honey

Charred Reef Fish Green mango · herbs · lime

Kampot Pepper Beef Local greens · smoked eggplant

Coconut & Palm Sugar Roasted banana · sea salt

Use fictional pricing.

---

21. WELLNESS

Create:

Solmira Wellness

Heading:

Return to your own pace.

Describe a small wellness offering focused on:

• Massage
• Body rituals
• Facial treatments
• Yoga
• Meditation

Avoid medical claims.

Use calm photography and softer layout treatment.

---

22. SPA TREATMENTS

Include 4 sample treatments:

Solmira Ritual

90 min

Full-body treatment inspired by tropical botanicals.

Deep Release Massage

60 / 90 min

Focused massage for relaxation and recovery.

Coconut Glow

75 min

Gentle body treatment and hydration ritual.

Sunset Reset

60 min

Massage followed by quiet tea overlooking the garden.

Use clearly fictional descriptions and pricing.

---

23. POOL & BEACH SECTION

Create a full-width visual section focused on:

• Infinity pool
• Private beach
• Lounging
• Tropical landscape

Heading:

Nowhere you need to be.

Keep text minimal.

Let photography dominate.

---

24. GALLERY

Create an immersive resort gallery.

Categories:

• All
• Stay
• Beach
• Dining
• Wellness
• Experiences

Use a masonry-inspired CSS Grid.

Clicking an image opens an accessible lightbox.

Lightbox must support:

• Previous
• Next
• Close
• Escape
• Keyboard navigation
• Background scroll lock

Do not use an external library.

---

25. GUEST REVIEWS

Create a refined testimonial section.

Use 4 fictional guest reviews.

Example:

“The kind of place where we stopped checking the time after the first day.”

— Mia & Daniel, Singapore

Keep reviews concise and believable.

Add a vanilla JavaScript slider.

---

26. RESORT STATISTICS

Create a compact section with demo values:

24 Suites & Villas

1 Private Beach

2 Dining Experiences

6 Curated Activities

Keep presentation subtle.

Do not over-animate.

---

27. SUSTAINABILITY / LOCAL CONNECTION

Create a carefully worded section:

Thoughtful by nature.

Mention practices such as:

• Local sourcing where possible
• Reduced single-use plastics
• Refillable guest amenities
• Native landscaping
• Collaboration with local producers

Do not claim certifications that do not exist.

Do not use exaggerated environmental claims.

---

28. DESTINATION SECTION

Create:

Beyond Solmira

Introduce the surrounding destination.

Use fictional/general Cambodia coastal context.

Include:

• Nearby islands
• Local fishing communities
• Markets
• Nature
• Coastal drives

Avoid claiming exact travel times unless clearly marked as sample content.

---

29. LOCATION

Create a visual location section.

Heading:

Closer than it feels.

Location:

Cambodian Coast

Use a fictional resort address/placeholder.

Include:

• Nearest airport placeholder
• Transfer option
• Private car transfer
• Boat transfer where appropriate

Create a map-style visual without requiring Google Maps API.

---

30. SPECIAL OFFER

Create a tasteful offer section:

Stay a little longer.

Example:

Stay 4 nights and enjoy a complimentary private sunset experience.

Clearly label this as demo promotional content if appropriate.

CTA:

View Offer

Do not make it look like a cheap discount banner.

---

31. BOOKING SECTION

Create a polished final booking section.

Heading:

Your quiet escape begins here.

Fields:

• Full Name
• Email
• Phone
• Check-in
• Check-out
• Guests
• Preferred Stay
• Airport Transfer
• Special Requests

Validate all required fields.

If dates are invalid, explain clearly.

After valid submission, show:

“Your stay request is ready. This demonstration form is not connected to a live booking system.”

Do not claim a real reservation.

---

32. CONTACT

Include:

• Resort name
• Fictional location
• Phone placeholder
• Email placeholder
• Reservation email placeholder

Add:

Speak With Reservations

CTA.

---

33. INSTAGRAM-STYLE GALLERY

Create a compact visual section:

@solmiraresort

Display six photographs.

Include a:

Follow the Journey

button.

No real API connection required.

Do not copy Instagram UI exactly.

---

34. FOOTER

Create a premium hospitality footer.

Include:

SOLMIRA

Tagline:

Stay close to the horizon.

Columns:

Stay

• Suites
• Villas
• Offers

Experience

• Dining
• Wellness
• Activities

Resort

• Our Story
• Gallery
• Location
• Contact

Information

• Reservations
• Privacy
• Terms

Add social links:

• Instagram
• Facebook
• TikTok

Generate the current year dynamically.

Add back-to-top control.

---

35. JAVASCRIPT FUNCTIONALITY

Implement:

• Mobile navigation
• Scrolled navbar
• Smooth scrolling
• Active navigation state
• Hero booking validation
• Accommodation filters
• Room quick-view modal
• Menu tabs
• Gallery filtering
• Gallery lightbox
• Guest review slider
• Final booking-form validation
• Scroll reveal
• Back-to-top
• Dynamic year

Use IntersectionObserver where appropriate.

---

36. IMAGE DIRECTION

Photography is critical.

Use high-quality remote placeholder imagery showing:

• Tropical boutique resort architecture
• Private beach
• Ocean villas
• Infinity pool
• Tropical gardens
• Elegant rooms
• Fine dining
• Spa treatments
• Sailing
• Kayaking
• Sunset

Avoid:

• Massive high-rise hotels
• Crowded public beaches
• Generic business hotels
• Snowy destinations
• Unrelated travel imagery

Maintain consistent warm, natural, editorial photography.

Use meaningful alt text.

Lazy-load below-the-fold images.

Preserve aspect ratios.

---

37. MOTION DIRECTION

Use gentle hospitality-focused motion.

Appropriate effects:

• Slow image reveal
• Soft fade-up
• Subtle text reveal
• Small image scale on hover
• Smooth menu/gallery transitions

Avoid:

• Bouncing
• Spinning
• Heavy parallax
• Fast animation
• Particle effects
• Constant moving backgrounds

Respect prefers-reduced-motion.

---

38. RESPONSIVE DESIGN

Design intentionally for:

• 320px phones
• 375px phones
• 430px phones
• Tablet
• Laptop
• Desktop
• Large desktop

On mobile:

• Simplify the hero layout
• Stack booking fields
• Keep room images prominent
• Keep prices/details readable
• Simplify editorial overlaps
• Make filters usable
• Keep modals within viewport
• Make forms touch-friendly
• Maintain generous but practical spacing

No horizontal overflow.

---

39. ACCESSIBILITY

Use semantic HTML5.

Ensure:

• One H1
• Logical heading hierarchy
• Alt text
• Form labels
• Accessible menu
• Accessible filters
• Accessible modal
• Accessible menu tabs
• Accessible lightbox
• Accessible review controls
• Visible focus states
• Good contrast
• Proper ARIA where necessary

Use real buttons for interactive controls.

---

40. SEO

Create professional hotel/resort SEO metadata.

Include:

• Page title
• Meta description
• Canonical placeholder
• Open Graph title
• Open Graph description
• Open Graph image placeholder
• Twitter card
• Theme color

Add Hotel structured data with JSON-LD.

Use clearly fictional/demo information for:

• Address
• Contact
• Price range

Do not invent star ratings, awards, or certifications.

---

41. PERFORMANCE

Keep the site lightweight.

Requirements:

• No frameworks
• No external JavaScript libraries
• No background video
• Lazy-loaded images
• Stable image containers
• Efficient JavaScript
• Minimal layout shifts
• No unnecessary animation loops
• Efficient event handling

The site should feel fast on mobile connections.

---

42. CODE QUALITY

Organize CSS logically:

1. Variables
2. Reset
3. Base
4. Typography
5. Layout
6. Navigation
7. Hero
8. Booking controls
9. Accommodation
10. Experiences
11. Dining
12. Wellness
13. Gallery
14. Forms
15. Footer
16. Animations
17. Responsive rules
18. Reduced motion

Use:

• CSS variables
• Grid
• Flexbox
• clamp()
• aspect-ratio
• Modern responsive CSS

Avoid excessive !important.

Keep JavaScript clean with:

• Clear function names
• Reusable helpers
• Missing-element guards
• Minimal global state

There must be no console errors.

---

43. CONTENT QUALITY

Do not use Lorem Ipsum.

Write believable hospitality copy specifically for Solmira.

Avoid repetitive phrases such as:

• Unforgettable escape
• Paradise awaits
• Luxury redefined
• Once-in-a-lifetime
• World-class experience

Use calm, specific, human language.

---

44. VISUAL RHYTHM

Do NOT create:

Hero

→ Cards

→ Cards

→ Cards

→ Cards

→ Footer

Create an intentional journey:

Cinematic hero

→ Brand statement

→ Resort story

→ Accommodation

→ Full-width image

→ Signature day

→ Experiences

→ Dining

→ Wellness

→ Beach/pool moment

→ Gallery

→ Reviews

→ Destination

→ Booking

→ Footer

The experience should feel like browsing a premium travel magazine.

---

45. FINAL QUALITY CHECK

Before returning the code, verify:

• All three files connect correctly
• Mobile menu works
• Hero booking validation works
• Accommodation filters work
• Room modal works
• Menu tabs work
• Gallery filters work
• Lightbox works
• Review slider works
• Final booking validation works
• Navigation anchors exist
• No undefined variables
• No console errors
• No horizontal overflow
• Mobile layout is polished
• Images have alt text
• Forms have labels
• Keyboard interactions work
• Reduced-motion support works
• No prohibited dependencies are included

Fix all identified problems before returning the code.

---

46. FINAL OUTPUT FORMAT

Return exactly three complete code sections:

index.html

Provide the entire HTML.

style.css

Provide the entire CSS.

script.js

Provide the entire JavaScript.

Do NOT return:

“remaining code”

“continue here”

“add more rooms”

“same pattern”

Do not return pseudo-code.

Do not omit implementation to save response length.

Everything must be complete and immediately usable.

The final Solmira website should feel calm, premium, tropical, cinematic, responsive, accessible, distinctive, and screenshot-worthy enough to look like a real boutique beach resort brand.