Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sachin2398/travelopia

travelopia
https://github.com/sachin2398/travelopia

css html javascript

Last synced: 2 days ago
JSON representation

travelopia

Host: GitHub
URL: https://github.com/sachin2398/travelopia
Owner: sachin2398
Created: 2024-02-15T10:58:07.000Z (11 months ago)
Default Branch: main
Last Pushed: 2024-02-15T11:55:55.000Z (11 months ago)
Last Synced: 2024-11-11T07:45:44.392Z (2 months ago)
Topics: css, html, javascript
Language: CSS
Homepage: https://travelopia-sand.vercel.app
Size: 1.39 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# travelopia
travelopia

## Screenshots
> ## Frame 1
| Small Screen | Large Screen |
| ---------------------- | ---------------------- |
| ![homepage](https://github.com/sachin2398/travelopia/assets/113828281/386d46b3-9ed7-4817-8274-ad5d13e29834)| ![homepage](https://github.com/sachin2398/travelopia/assets/113828281/ff580255-2f79-46a9-859d-83f567889af5)|

# Full Page Component

This repository contains code for a full-page component featuring a background image with an overlay, a title, and a button that triggers a custom alert. The component is designed to be responsive and visually appealing.

## Usage

To use this component, simply include the provided HTML, CSS, and JavaScript files in your project. Customize the content and styling as needed to fit your application.

## File Structure

- **index.html**: Contains the HTML markup for the full-page component.
- **style.css**: Contains the CSS styles for the component, including base styles and responsive design.
- **script.js**: Contains the JavaScript code for showing and hiding the custom alert.

## HTML Structure

- **Container**: The main container for the component.
- **Header**: The header section, displaying the title of the page.
- **Content**: The content section containing the background image, overlay, title, and button.
- **Background Image**: The image displayed as the background of the content section.
- **Overlay**: A semi-transparent overlay over the background image.
- **Title**: The title displayed over the background image.
- **Button**: The button triggering the custom alert.
- **Footer**: The footer section, displaying the creator's name.

## CSS Styles

The CSS file contains styles for the overall layout, including base styles for HTML and body elements, as well as specific styles for the header, content, button, and custom alert.

## JavaScript Functionality

The JavaScript file includes two functions:
- `showCustomAlert()`: Displays the custom alert when called.
- `hideCustomAlert()`: Hides the custom alert when called.

## Design Decisions

- **Responsive Design**: The component is designed to be responsive and adapt to different screen sizes using flexbox and media queries.
- **Custom Alert**: Instead of using the default browser alert, a custom alert is implemented for a more visually appealing user experience.
- **Styling**: The component utilizes modern CSS techniques such as gradients, box shadows, and transitions to enhance its visual appeal.