Skip to content

Menu Updates #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ervinCodes wants to merge 9 commits into
base: gh-pages
Choose a base branch
from
Open

Menu Updates #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6668762
Update README.md
ervinCodes Jun 22, 2022
5b5a440
Update README.md
ervinCodes Jun 22, 2022
4ddcd8b
Update menu.html
ervinCodes Jun 27, 2022
995820f
Update about.html
ervinCodes Jun 27, 2022
8cbc981
Added screen shot of site for README file
ervinCodes Jul 25, 2022
6080ffd
Update README.md
ervinCodes Jul 25, 2022
092a716
Update README.md
ervinCodes Jul 25, 2022
53d9c92
Update README.md
ervinCodes Jul 25, 2022
36e2a2f
Update README.md
ervinCodes Aug 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 80 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,80 @@
# The-Daily-Grind
# The Daily Grind - Cafe Business Site

A site created using Bootstrap and Javascript for a client that owns a Cafe business.

## Table of contents

- [Overview](#overview)
- [Table of contents](#table-of-contents)
- [Project Details](#project-details)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Links to my other projects](#links-to-my-other-projects)

## Overview

### Project Details

Users should be able to:

- View the optimal layout for the site depending on their device's screen size.
- View cafe contact information and location, allow them to browse their menu, choose items and add to a cart.
- If interested, there is also a contact form should they like to join a weekly newsletter.

### Screenshot

![](https://media.giphy.com/media/oHVwHtlRpTr43O4ik8/giphy.gif)

### Links

- [Code Source](https://github.com/ervn12/The-Daily-Grind)
- [Live Site](https://the-dailygrind.netlify.app/)

## My process

### Built with

- Bootstrap
- Desktop-first workflow
- Javascript

### What I learned

This was my very first real project and I learned alot. I was able to familiarize myself with Bootstrap and it taught me how to tackle a business site project. I understood the needs and wants of a cafe business and made it accessible to its users by creating an easy to navigate website. I went in depth with the menu and created a Modal that allows users to add items to a cart. Lastly, creating this site gave me practice in making a Bootstrap contact form that throws out errors if anything is left blank.

### Continued development

When I revisit this project, I would like to add a checkout page that shows all items in the users cart and create a payment verification so they can purchase the items and have it notify the Cafe.

## Links to my other projects

<table bordercolor="#66b2b2">

<tr>
<td width="33.3%" style="align:center;" valign="top">
<a target="_blank" href="https://github.com/ervn12/myPortfolio">Personal Portfolio</a>
<br />
<a target="_blank" href="https://github.com/ervn12/myPortfolio">
<img src="https://media.giphy.com/media/bLQ6ITkWJPVQxrOrJ1/giphy.gif" width="100%" alt="My Portfolio"/>
</a>
</td>
<td width="33.3%" valign="top">
<a target="_blank" href="https://github.com/ervn12/star-trek-CLIENT"> Star Trek - Field Guide to Aliens</a>
<br />
<a target="_blank" href="https://github.com/ervn12/star-trek-CLIENT">
<img src="https://media.giphy.com/media/txG49WSDMlTnZ0QXYe/giphy.gif" width="100%" alt="Matching Card Game"/>
</a>
</td>
<td width="33.3%" valign="top">
<a target="_blank" href="https://github.com/ervn12/preferredAutoSpa2">Preferred Auto Spa</a>
<br />
<a target="_blank" href="https://github.com/ervn12/preferredAutoSpa2">
<img src="https://media.giphy.com/media/kk17SqHqmfytgvZqSN/giphy.gif" width="100%" alt="Portfolio"/>
</a>
</td>
</tr>
</table>
6 changes: 4 additions & 2 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,9 @@ <h1 class="display-4">The Daily Grind</h1>
<h2 class="text-center">About the Cafe</h2>
<hr>
<br>
<p class="text-center font-italic">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus reprehenderit iste sint in totam! Quos magni mollitia pariatur itaque sit blanditiis, eius, tenetur dolor, facilis similique laboriosam id modi dolore? Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur deleniti at perspiciatis nulla consectetur enim ipsam voluptate necessitatibus unde temporibus, molestiae aliquid voluptatum quae dolorem esse quidem amet officia? Ut. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem veniam laudantium dolorum repellendus ad voluptas corrupti obcaecati pariatur non ipsa, quisquam vero expedita dignissimos eveniet suscipit accusantium, nisi quaerat inventore!</p>
<p class="text-center font-italic">We have two obsessions: coffee and food. We’re passionate about sharing both with you, which is why we created The Daily Grind. Here is a place to eat, drink, meet friends, and enjoy an atmosphere away from the hassles of everyday life. Our menu changes on a monthly basis, to reflect the changing seasons, and to ensure that there’s something new for you to enjoy each time you visit. Be sure to speak to one of us about the daily specials.

If you’ve never visited The Daily Grind before, you’re in for a treat. We source the best coffee beans and freshest ingredients for a phenomenal eating and drinking experience. Are you looking to run an event? We’ve got plenty of space to hire out for intimate music, lecture, or group events. We also offer catering if you’re planning a meal elsewhere. Let us know what you need, and we’ll help you out. </p>
<img src="images/coffeeShop.jpg" class="img-fluid img-thumbnail" id="inside-coffee">
</div>
</div>
Expand Down Expand Up @@ -107,4 +109,4 @@ <h5>Social</h5>
<script src="js/javascript.js"></script>
<!-- endbuild -->
</body>
</html>
</html>
Binary file added images/theDailyGrind.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
74 changes: 37 additions & 37 deletions menu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,26 +174,26 @@ <h2 class="coffee-title">Coffee</h2>
<img class="card-img-top " src="images/coffeeDrink.jpg" alt="Coffee Cup">
<div class="card-body">
<h5 class="card-title">Regular Coffee</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p><strong>$1.75-$2.50</strong></p>
<!-- <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> -->
<p><strong>$4.00 - $5.50</strong></p>
</div>
</div>
<!-- Card #2 -->
<div class="card border border-dark">
<img class="card-img-top" src="images/cappuccino.jpg" alt="cappuccino">
<div class="card-body">
<h5 class="card-title">Cappuccino</h5>
<p class="card-text">Quibusdam aut maxime magni rem numquam ut.</p>
<p><strong>$2.20-$3.00</strong></p>
<!-- <p class="card-text">Quibusdam aut maxime magni rem numquam ut.</p> -->
<p><strong>$4.00 - $5.00</strong></p>
</div>
</div>
<!-- Card #3 -->
<div class="card border border-dark">
<img class="card-img-top" src="images/mocca.jpg" alt="Mocha">
<div class="card-body">
<h5 class="card-title">Mocha</h5>
<p class="card-text">Dolor iusto distinctio earum, illum.</p>
<p><strong>$2.00-$2.90</strong></p>
<!-- <p class="card-text">Dolor iusto distinctio earum, illum.</p> -->
<p><strong>$3.50 - $4.50</strong></p>
</div>
</div>
</div>
Expand All @@ -207,26 +207,26 @@ <h5 class="card-title">Mocha</h5>
<img class="card-img-top" src="images/icedCoffee.jpg" alt="Iced Coffee">
<div class="card-body">
<h5 class="card-title">Iced Coffee</h5>
<p class="card-text">Hic in vero officiis libero, nisi ipsum.</p>
<p><strong>$2.50-$$3.50</strong></p>
<!-- <p class="card-text">Hic in vero officiis libero, nisi ipsum.</p> -->
<p><strong>$4.50 - $6.00</strong></p>
</div>
</div>
<!-- Card #5 -->
<div class="card border border-dark">
<img class="card-img-top" src="images/latte.jpg" alt="Latte">
<div class="card-body">
<h5 class="card-title">Latte</h5>
<p class="card-text">Doloremque dolore consequatur.</p>
<p><strong>$1.75-$2.80</strong></p>
<!-- <p class="card-text">Doloremque dolore consequatur.</p> -->
<p><strong>$3.50 - $4.50</strong></p>
</div>
</div>
<!-- Card #6 -->
<div class="card border border-dark">
<img class="card-img-top" src="images/espresso.jpg" alt="Espresso">
<div class="card-body">
<h5 class="card-title">Espresso</h5>
<p class="card-text">Amet consectetur adipisicing optio.</p>
<p><strong>$2.00-$2.50</strong></p>
<!-- <p class="card-text">Amet consectetur adipisicing optio.</p> -->
<p><strong>$2.50 - $3.50</strong></p>
</div>
</div>
</div>
Expand All @@ -247,16 +247,16 @@ <h2 class="coffee-title">Pastries</h2>
<img class="card-img-top" src="images/baguette.jpg" alt="Baguette">
<div class="card-body">
<h5 class="card-title">Baguette</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p><strong>$2.50</strong></p>
<!-- <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> -->
<p><strong>$5.00</strong></p>
</div>
</div>
<!-- Card #8 -->
<div class="card border border-dark">
<img class="card-img-top" src="images/cookies.jpg" alt="Cookies">
<div class="card-body">
<h5 class="card-title">Cookies</h5>
<p class="card-text">Quibusdam aut maxime magni rem numquam ut.</p>
<!-- <p class="card-text">Quibusdam aut maxime magni rem numquam ut.</p> -->
<p><strong>$1.50</strong></p>
</div>
</div>
Expand All @@ -265,8 +265,8 @@ <h5 class="card-title">Cookies</h5>
<img class="card-img-top" src="images/cinnamonRoll.jpg" alt="Cinnamon Roll">
<div class="card-body">
<h5 class="card-title">Cinnamon Roll</h5>
<p class="card-text">Dolor iusto distinctio earum, illum.</p>
<p><strong>$2.90</strong></p>
<!-- <p class="card-text">Dolor iusto distinctio earum, illum.</p> -->
<p><strong>$4.00</strong></p>
</div>
</div>
</div>
Expand All @@ -280,25 +280,25 @@ <h5 class="card-title">Cinnamon Roll</h5>
<img class="card-img-top" src="images/donuts.jpg" alt="Donuts">
<div class="card-body">
<h5 class="card-title">Donuts</h5>
<p class="card-text">Hic in vero officiis libero, nisi ipsum.</p>
<p><strong>$2.00</strong></p>
<!-- <p class="card-text">Hic in vero officiis libero, nisi ipsum.</p> -->
<p><strong>$3.00</strong></p>
</div>
</div>
<!-- Card #11 -->
<div class="card border border-dark">
<img class="card-img-top" src="images/croissant.jpg" alt="Croissant">
<div class="card-body">
<h5 class="card-title">Croissant</h5>
<p class="card-text">Doloremque dolore consequatur.</p>
<p><strong>$1.75</strong></p>
<!-- <p class="card-text">Doloremque dolore consequatur.</p> -->
<p><strong>$4.00</strong></p>
</div>
</div>
<!-- Card #12 -->
<div class="card border border-dark">
<img class="card-img-top" src="images/macaroons.jpg" alt="Macaroons">
<div class="card-body">
<h5 class="card-title">Macaroons</h5>
<p class="card-text">Amet consectetur adipisicing optio.</p>
<h5 class="card-title">Macaroons (1)</h5>
<!-- <p class="card-text">Amet consectetur adipisicing optio.</p> -->
<p><strong>$2.50</strong></p>
</div>
</div>
Expand All @@ -320,26 +320,26 @@ <h2 class="coffee-title">Breakfast</h2>
<img class="card-img-top" src="images/eggs.jpg" alt="Eggs">
<div class="card-body">
<h5 class="card-title">Eggs & Toast</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p><strong>$5.00</strong></p>
<!-- <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> -->
<p><strong>$8.00</strong></p>
</div>
</div>
<!-- Card #14 -->
<div class="card border border-dark">
<img class="card-img-top" src="images/oatmeal.jpg" alt="Oatmeal">
<div class="card-body">
<h5 class="card-title">Oatmeal</h5>
<p class="card-text">Quibusdam aut maxime magni rem numquam ut.</p>
<p><strong>$4.50</strong></p>
<!-- <p class="card-text">Quibusdam aut maxime magni rem numquam ut.</p> -->
<p><strong>$6.50</strong></p>
</div>
</div>
<!-- Card #15 -->
<div class="card border border-dark">
<img class="card-img-top" src="images/yogurt.jpg" alt="Yogurt and Fruits">
<div class="card-body">
<h5 class="card-title">Yogurt w/Fresh Fruits</h5>
<p class="card-text">Dolor iusto distinctio earum, illum.</p>
<p><strong>$3.50</strong></p>
<!-- <p class="card-text">Dolor iusto distinctio earum, illum.</p> -->
<p><strong>$7.50</strong></p>
</div>
</div>
</div>
Expand All @@ -352,27 +352,27 @@ <h5 class="card-title">Yogurt w/Fresh Fruits</h5>
<div class="card border border-dark">
<img class="card-img-top" src="images/pancakes.jpg" alt="Pancakes">
<div class="card-body">
<h5 class="card-title">Pancakes</h5>
<p class="card-text">Hic in vero officiis libero, nisi ipsum.</p>
<p><strong>$4.75</strong></p>
<h5 class="card-title">Pancakes (3)</h5>
<!-- <p class="card-text">Hic in vero officiis libero, nisi ipsum.</p> -->
<p><strong>$7.75</strong></p>
</div>
</div>
<!-- Card #17 -->
<div class="card border border-dark">
<img class="card-img-top" src="images/croissantSandwhich.jpg" alt="Croissant Sandwhich">
<div class="card-body">
<h5 class="card-title">Croissant Sandwhich</h5>
<p class="card-text">Doloremque dolore consequatur.</p>
<p><strong>$6.25</strong></p>
<!-- <p class="card-text">Doloremque dolore consequatur.</p> -->
<p><strong>$9.00</strong></p>
</div>
</div>
<!-- Card #18 -->
<div class="card border border-dark">
<img class="card-img-top" src="images/bagelSandwhich.jpg" alt="Bagel Sandwhich">
<div class="card-body">
<h5 class="card-title">Bagel Sandwhich</h5>
<p class="card-text">Amet consectetur adipisicing optio.</p>
<p><strong>$5.50</strong></p>
<!-- <p class="card-text">Amet consectetur adipisicing optio.</p> -->
<p><strong>$8.50</strong></p>
</div>
</div>
</div>
Expand Down Expand Up @@ -432,4 +432,4 @@ <h5>Social</h5>
<script src="js/javascript.js"></script>
<!-- endbuild -->
</body>
</html>
</html>