Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/187jjay187/huble-section

Last synced: 15 days ago
JSON representation

Host: GitHub
URL: https://github.com/187jjay187/huble-section
Owner: 187jjay187
Created: 2023-10-14T21:53:18.000Z (about 1 year ago)
Default Branch: Dev
Last Pushed: 2023-10-26T10:12:02.000Z (about 1 year ago)
Last Synced: 2024-10-20T12:59:53.398Z (2 months ago)
Language: CSS
Homepage: https://monolithheroslider.vercel.app
Size: 859 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

Huble Assessment - Monolith Hero Logo Slider

# 📗 Table of Contents

- 📖 About the Project(#about-project)
- 🛠 Built With(#built-with)
- Tech Stack(#tech-stack)
- Key Features(#key-features)
- 🚀 Live Demo([MonolithHeroSlider](https://monolithheroslider.vercel.app/))
- 💻 Getting Started(#getting-started)
- Setup(#setup)
- Prerequisites(#prerequisites)
- Install(#install)
- Usage(#usage)
- Run tests(#run-tests)
- Deployment(#triangular_flag_on_post-deployment)
- 👥 Authors(#authors)
- 🔭 Future Features(#future-features)
- 🤝 Contributing(#contributing)
- ⭐️ Show your support(#support)
- 🙏 Acknowledgements(#acknowledgements)
- ❓ FAQ(#faq)
- 📝 License(#license)

# 📖 Monolith Hero Logo Slider

**Monolith Hero Logo Slider** created a hero section logo slider using basic UI design/wireframes

## 🛠 Built With
- HTML
- CSS
- TailwindCSS
- Javascript (ES6)
- React
- React-slick slider(framework)

### Tech Stack

- HTML
- CSS
- JavaScript
- React

### Key Features

- **infinity scroll effect that pauses on hover as requested**
- **button hover effect as requested**
- **Space between Call To Action Buttons brought closer together as requested**

(back to top)

## 🚀 Live Demo

- Live Demo Link([MonolithHeroSlider](https://monolithheroslider.vercel.app/))

## 🚀 Project Update Details

### in this update i've added:
- an infinity scroll effect using react-slick slider with functionality effects that pauses on hover as requested
- Call To Action button hover effects as requested
- Space between Call To Action Buttons brought closer together as requested

(back to top)

## 💻 Getting Started

> To get a local copy up and running, follow these steps.

### Prerequisites

In order to run this project you need:

- Have a local version control like Git. Which is a open source distributed version control system designed for source code management
- A text editor (e.g Visual Studio Code, Vim, Atom & Sublime.)
- A web browser (e.g Chrome, Safari, Mozilla Firefox.)
- Live Server which is a web extension that helps you to live reload feature for dynamic content (PHP, Node.js, ASPNET)
- Download waves to check project accessibility

### Setup

Clone this repository to your desired folder:

To get a local copy up and running follow these simple example steps.

- npm
```sh
npm install npm@latest -g
```

### Install

Install this project with:

1. Clone the repo by running the command
```sh
git clone https://github.com/187jjay187/huble-section.git
```
2. Open the directory of the project
```sh
cd huble-section
```
3. Open the directory of the src
```sh
cd src
```
4. Please install the node module by running this command on the terminal
```sh
npm install
```
5. Please run the following to render on the browser
```sh
npm start
```

### Usage

To run the project, execute the following command:

1. Please run the following to render on the browser
```sh
npm start
```

(back to top)

👤 **Jerome Jay**

- GitHub: @githubhandle(https://github.com/187jjay187)
- Twitter: @twitterhandle(https://twitter.com/187jjay187)
- LinkedIn: LinkedIn(https://linkedin.com/in/jerome-osman-137605a4)

(back to top)

## 🔭 Future Features

- **Responsive Design breakpoints for different devices**

(back to top)

## 🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page(https://github.com/187jjay187/huble-section.git/issues).