Uifry Template

This project is a simple, responsive landing page template designed using HTML and CSS. It features a navigation bar, a home section, and a features section. The design is minimalistic and user-friendly, with an emphasis on clarity and ease of use.

Instructions to Run the Project Locally

  1. Clone the Repository:

    git clone https://github.com/yourusername/uifry-template.git
  2. Navigate to the Project Directory:

    cd uifry-template
  3. Open the Project in a Code Editor: Open the project in your preferred code editor (e.g., VSCode).

  4. Open index.html in a Browser: Simply open the index.html file in your web browser to view the template.

Brief Description of the Design Choices and Libraries Used

Design Choices: 1. Minimalistic Design: The template uses a clean and simple design to ensure that the content is the main focus.

  1. Responsive Layout: The layout is designed to be responsive, making it accessible on various devices, including mobile phones and tablets.

  2. Custom Fonts: The template uses custom fonts ("Clash Display" and "Clash Display Bold") for a unique and modern look.

  3. Hover Effects: Subtle hover effects are used on navigation links and buttons to enhance the user experience.

  4. Hierarchical Communication Patterns: Proposed to further ease the burden on the central server, by first leveraging edge servers to aggregate the updates from edge devices and then relying on a cloud server to aggregate updates from edge servers.

  5. Libraries Used: No external libraries were used in this project. The design relies solely on HTML and CSS.

  6. Figma Design Reference: The design for this project was inspired by a Figma design. You can view the Figma design here.

Live Demo

The project is deployed on Vercel. You can view the live demo here.

Folder Structure

uifry-template/
│
├── assets/
│   ├── fonts/
│   │   ├── clash-display/
│   │   │   ├── ClashDisplayRegular.otf
│   │   │   └── ClashDisplayBold.otf
│   ├── images/
│   │   ├── logo_favi.svg
│   │   ├── logo.svg
│   │   ├── arrow.svg
│   │   ├── player_btn.svg
│   │   ├── achievements.svg
│   │   ├── background.svg
│   │   ├── background_rotate.svg
│   │   ├── mobile_screen_home.svg
│   │   ├── feature_mob.svg
│   │   ├── bullet1.svg
│   │   ├── bullet2.svg
│   │   └── bullet3.svg
│
├── index.html
├── styles.css
└── README.md

Contribution

Feel free to fork this project and make your own modifications. Pull requests are welcome!