Information architecture
Separate destination pages create an understandable structure for visitors browsing different European countries.
Educational Website · Travel & Tourism
Discover Europe.
A Bootstrap student travel website with eight destination pages and a detailed, structured inquiry form for prospective travellers.
This case study documents the original project and its visual direction; the external student website is preserved as originally published.
Discover Europe
Travel website project
Travel website project
Project overview
One travel concept, multiple destinations.
The student website organizes travel-related information for visitors considering a European trip. Its navigation includes England, France, Germany, Ireland, Italy, Scotland, Spain, and Sweden, alongside a contact page.
Editorial content
The homepage introduces trip planning, travel agents, lodging, transport, activities, and destination knowledge.
Bootstrap contact form
The dedicated contact page combines a responsive two-column form layout, text inputs, select menus, date pickers and a comments field to collect travel preferences in an organized way.
Featured design element · Bootstrap
A structured travel inquiry form.
The contact page is a key part of this student project. Built with Bootstrap's grid and form styling, it uses paired fields to make a detailed travel inquiry easier to scan, with a wider comments area and prominent submit action. The form below is a visual, non-submitting representation of the original interface.
CONTACT US
First Name
Last Name
Telephone
Email address
Under age 26?
Choose… ⌄
Are you a student?
Choose… ⌄
What country do you want to visit?
Choose… ⌄
What are your interests?
Choose… ⌄
Ideal Departure Date
yyyy-mm-dd ▦
Ideal Return Date
yyyy-mm-dd ▦
Ideal Departure Airport
Comments
Visual mockup only — no information is collected or sent.
Form elements and design choices
Bootstrap grid
Paired fields are organized in two columns on larger screens to make good use of the available width.
Text inputs
First and last name, telephone, email address, and departure airport collect essential contact and trip details.
Select menus
Age, student status, preferred country, and travel interests are gathered through consistent dropdown controls.
Date controls
Departure and return date fields allow travellers to specify their preferred schedule.
Comments and submission
View Original Contact Page ↗
A full-width multiline comments area provides room for additional details, followed by a clearly visible Submit button.
Bootstrap form validation
Clear feedback when a field needs attention.
The original contact form demonstrates Bootstrap-style validation. When a required field is missing, a red border, warning icon, and specific message identify what needs to be completed. A field with valid input can display a green outline and checkmark. This example reproduces the states visible in the student website screenshot, without submitting any information.
Validation states · Contact Us
First Name Please enter your first name.
Last Name
Looks good!
Telephone
Please enter your telephone number.
Email address
Please enter your email address.
Under age 26?
Choose…
Are you a student?
Choose…
What country do you want to visit?
Choose…
What are your interests?
Choose…
Ideal Departure Date
yyyy-mm-dd
Please enter your ideal departure date.Ideal Return Date
yyyy-mm-dd
Please enter your ideal return date.Ideal Departure Airport
Please enter your ideal departure airport.
Static visual demonstration of the original form's validation appearance. Green dropdown styling is shown as it appeared in the screenshot; it does not establish that a meaningful option was selected.
How the feedback works
Red: missing required information
Invalid fields receive a red outline, alert symbol, and field-specific instruction directly beneath the input.
Green: accepted input
The Last Name field displays a green border, checkmark, and the confirmation “Looks good!”
Dates and travel details
The validation highlights unanswered departure and return dates and the preferred departure airport, helping users correct omissions.
Immediate visual distinction
Colour, icons, and short text work together so visitors can quickly distinguish accepted entries from fields needing correction.
Validation vs. submission
See the Original Form ↗
The visual states demonstrate front-end feedback; they do not by themselves prove that the form sends data to a working booking system.
Visual exploration
Mood board
A retrospective presentation inspired by the existing travel theme, rather than a claim that these were the original planning materials.
Creative direction
Exploration, culture and discovery.A travel-oriented identity supported by country navigation and accessible introductory content.
Discover Europe
Suggested colour story
Navy, coastal teal, sea glass and parchment — an interpretive palette for this presentation.
Typography
A journey awaits
Editorial serif headings complemented by readable sans-serif text in this case study.
Travel imagery
Destination photographs and travel-related visuals help distinguish locations and build curiosity.
Destinations
EnglandFranceGermanyIrelandItalyScotlandSpainSweden
Content structure
Homepage wireframe
A simplified full-page reconstruction of the original homepage's information hierarchy, based on the published content.
DISCOVER EUROPE LOGO
WELCOME TO DISCOVER EUROPE
TRAVEL HERO / BRAND GRAPHIC
OUR AGENTS
SPECIALTIES
DESTINATION GUIDANCE
TRAVEL PLANNING
TOURS & LODGING
CONTACT / HOURS
Retrospective illustration, not an original pre-production wireframe. Some content blocks are grouped for clarity.
Original educational website
Visit Discover Europe.
Explore the original multi-page student project, including its individual country pages. It opens in a new tab so you can easily return to the portfolio.