Git Product home page Git Product logo

yash19sinha / coffee-bean Goto Github PK

View Code? Open in Web Editor NEW
22.0 22.0 53.0 899 KB

Welcome to the "Coffee-Bean" Coffee Shop project! We're on a quest to blend coffee and code like never before. Join us for a latte-tude of coding fun. All skill levels are welcome to make this project as espresso-nal as it can be! Grab your digital mugs and join us.

Home Page: https://coffee-bean-peach.vercel.app/

JavaScript 7.21% CSS 27.12% HTML 65.67%
coffee coffee-shop css hacktoberfest hacktoberfest-accepted hacktoberfest2023 html javascript website

coffee-bean's Introduction

๐Ÿ’ซ About Me:

๐Ÿ”ญ Iโ€™m a web developer from India
๐ŸŽ“ Currently Pursuing B.E in Computer Engineering

yash19sinha

๐ŸŒ Socials:

Instagram LinkedIn Twitter

Coding

๐Ÿ’ป Tech Stack:

C C++ CSS3 JavaScript Java HTML5 Python PHP Netlify AWS Vercel Angular.js Bootstrap Next JS NodeJS React TailwindCSS MySQL MongoDB Flask React Native Express.js

๐Ÿ“Š GitHub Stats:



coffee-bean's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

coffee-bean's Issues

missing scrolling feature

I've noticed the website doesn't have a scroll to top type of button on the bottom and it's scrolling is static, not smoother. I can fix it.

Fix : data interval of the dynamically changing testimonial caraousel

The data interval of the dynamically changing testimonial caraousel is less than 2 second which makes it hard to read .

So we need to modify the data interval so that it would be more easier to read and also increases the user-friendliness.

I would like to work on this issue , So please assign me.

UI Changes - Hacktoberfest

Hey there I would like to work on your repo to change and enhance the color and fonts and even add more content. Please assign this issue under hacktoberfest

Thank You :)

Improve the footer

Hi, this website looks cool but the footer can be improved. I want to work on it. Please assign me this issue.

About login page

Screenshot (28)

i think the two buttons cancel and send are not user friendly so i will make it user friendly and more interactive by changing the positions and add will hover effect in it

Menu section improvement

A slight hovering effect on menu section will beautify the website.
A slight animation effect on the same section will also do the same. etc

A random quote, just for aesthetics.

To make this static website more engaging, we can have a random coffee quote every time a user loads up the page. I can work on it if given the chance! ๐Ÿ˜„

Useless popup of Success Payment even without entering data

Before filling the essential credentials of the payment gateway, it pops the Success Payment in the credit card option alongwith the popup of "Please fill out this field" . The screenshot of the problem has been attached below :

image

Bugs to be fixed in the code so that it only shows the "Please fill out this field" when anything is blank.

Please assign to fix the bugs

Improved Navbar

The navbar can be improved for Mobile View
I can work on that, kindly assign me this issue under hacktoberfest label.

Non-uniform Starbucks and Costa-coffee logos

Issue

The Starbucks logo is not proper; it has lesser width and the logo looks too compressed from the sides. It is also not the original Starbucks logo (there is no black colour).
Additionally, while all the other three logos have a white background, the Costa-coffee logo does not, which makes it look non-uniform.

Logos originally:
image

Fix

Updated the photos to make them look uniform.

small UI error

The yellow and green dots are aligned properly, but the red dot is not.

image

image

Hover effect

Adding hovering effect in buttons and CAFE photos

assign me with this , i wanna work in this >>

Updating carousel buttons

Screenshot 2023-10-10 at 18-54-11 Coffee-Bean
I think the buttons of carousel is lil bit close to the frame, we can make them more interesting and beautiful.

Update Navbar links

In the project, the navbar links are not working
Like : If I click on the Contact button, I should go to the Contact page, similarly for other buttons also
I have implemented it, If u assign the project to me I will be able to go for the PR

@maitri-vv

Improve Responsiveness - Make NavBar responsive

As we can see navbar is not looking good on screen with smaller width (small than 1000px). So we can make navbar and other things more responsive. I am ready to work on it. please assign me (under hacktober fest).
Thank You.
image

feat: make social anchors accessible on footer โœจ

Description

  • The feature is about to improve the accessibility of Coffee Bean Website's Footer section

  • I'm going to add important attributes like aria-label for social anchors (links like Github) which are placed on Social media section.

  • it is important to note that we want to add the title attribute also. This is because the title attribute is intended to provide additional information to screen reader users.

  • The aria-label attribute is a way more important for providing accessibility information to screen reader users. The aria-label attribute is an Accessible Rich Internet Applications (ARIA) attribute that can be used to provide a label for an element. This label is then read aloud by screen readers, providing additional information about the element to the user.

  • In general, the aria-label & title attributes are preferred for providing accessibility information to screen reader users.

  • You can consider to assign this issue to me to make the site accessible for screen readers

Screenshots (Changes are going to made for these elements)

image

Additional context

  • I'm a Hacktoberfest23 Contributor

Design Enhancements: Alignment and Title Height

Issue Summary:

I'd like to propose two design improvements to enhance the project's visual appeal and user experience.

1. Alignment of .nav-item:

  • Currently, the .nav-item elements in the navigation bar are not aligned with the .navbar-brand. This misalignment affects the overall aesthetics. Aligning them could create a more polished appearance.

2. Setting Title Height:

  • To make the project's title more prominent and visually appealing, we could consider adjusting the title's height. This change may give it a significant presence on the page and provide a more visually engaging introduction.

These design enhancements are meant to enhance the project's overall look and feel.

Request:

I kindly request to review these proposed design improvements and consider assigning the task to me for implementation.

Thank you!!

Adding a better alert popup!!!

I want to add a better alert system which looks much more beautiful than the old default javascript when we click the buttons. Please assign me this issue.

Website Enhancement and Issue Report

Description:

Issue 1: Small Gap between Title and Feature Sections

There is a minor gap between the title section and the feature section on different screen heights due to not defining a heights.

Issue 2: Poor Text-Background Color Contrast:

The contrast ratio between text and background colors seems to be inadequate, with a score of 2.11 on coolors.com.

Issue 3: Semantic Errors and Deprecated Elements

  • The following semantic and markup issues have been identified:

  • The h3 element should not be placed inside a span.

  • The lang attribute is missing, which is important for language specification.

  • Some sections lack proper headings for improved accessibility.

  • Incorrect values for width and height have been used in img tags.

  • The center element is deprecated and should not be used.

  • Meta tags for responsive web design and specifying compatibility with the latest Internet Explorer version are missing.

  • anchor element in the footer should be enclosed within a ul for better structure.

  • Media queries are not properly defined, affecting responsiveness.

Issue 4: JavaScript Variable Declaration

The JavaScript code is using the var keyword for variable declaration, which can lead to scope-related issues and is considered outdated. Consider using let and const for variable declarations to enhance code quality and avoid potential bugs.

##You can assign me the issues under Hactoberfest Tag.

Overflow of heading of card in the pricing section.

image

A small bug as you can clearly see in the image shown above, between the width of 1000px to 1300px overflow of heading is happening.
I am working on this please assign it to me under hactober fest label (2023).
Thank You

bug : image allignment issue

I think the image alignment in the menu card items is a bit wrong. I think it will be centre-aligned or cover the entire width properly like standard menu items.

image

You can assign it to me in accordance with Hacktoberfest ! I'll find a fix.

No facicon icon on the website

I noticed that the coffee website currently lacks a favicon. A favicon is a small but essential element for a website, as it helps with branding and improves user experience. @yash19sinha

ASSIGN ME THIS ISSUE UNDER HACTOBERFEST TAG.

WhatsApp Image 2023-10-06 at 20 30 25_c4993cee

Dull Color Combination in Navigation bar

image
The color combination of the text in the navigation bar is very dull. The text is not visible. As a graphic designer I suggest to change the color that will suit the background and easily readable

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.