diff --git a/Affogato.html b/Affogato.html new file mode 100644 index 0000000..8115c7c --- /dev/null +++ b/Affogato.html @@ -0,0 +1,106 @@ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+
+
+
+

Affogato

+
+ +
+
+ resonsive image +
+
+ +
+
+
+


What is a Affogato Knight

+


How daring! Ice cream in your coffee? This means + you’re playful, spontaneous, experimental and supportive of your friends.

+
+
+
+ + +
+
+
+

What is Affogato coffee

+


An affogato is an Italian coffee-based dessert. It usually takes the form + of a scoop of vanilla gelato or ice cream topped or "drowned" with a shot of hot espresso. + Some variations also include a shot of amaretto, Bicerin, or other liqueur.

+ +

The affogato is extra delish served over a brownie and can be enjoyed at any + time of the year (our opinion).

+
+
+
+
+ + + \ No newline at end of file diff --git a/README.md b/README.md index ba2a07f..68c1e42 100644 --- a/README.md +++ b/README.md @@ -1,28 +1,31 @@ # AD - SBA - HTML/CSS/JavaScript +## webite link: https://jruz9.github.io/sba.javascript_3-page-website/ +## My Github Respositories +>https://github.com/Jruz9?tab=repositories +## WebSite Overview +This is a website called coffee warriors. The website is about helping people know more about the different types of coffees why gameifying the experience. We call users knights and lead them toward choosing a clan to help start them on their journey to learning about coffee. -### Description -* In this Skill-based Assessment, you will be creating a small website and you get to pick what is the website about. The main purpose of this SBA is to test your skills in implementing a clean HTML structure that follows the methodologies of visual design, and styling your site so that it is user-friendly. -* You have the entire day for this SBA. Make sure to check in with your instructor for approval of your idea. Your work will be graded based on the below technical requirements. Also, creativity always works in your favor. +## index.html -* Since this is your first time creating a 3 page website, keep it simple. Keeping it simple is very important. It ensures that you can complete this project within the given time and also gives you a better idea of what can you get done in the given time if you were to do it again with more requirements. +This is the home page and contains general infomation about the website the test +![index.html](/css/indexHtml.png) -* Once you got your idea, think in the user’s perspective when creating the website.  You like your users to have a good experience when interacting with your site. This gives you a better chance of users trusting your site and coming back for more. For this SBA, don’t worry too much about the content. There are many places you can get free content to display on your site. Concentrate more on the web site's structure and grid system. +## black.html +This is a website with information about black coffee and what it means to be a black coffee knight. +![black.html](/css/blackPage.png) -* Some resources for free content: - * Photos: `https://www.pexels.com/search/template/` - * Text: `https://www.lipsum.com/` - * GIFs: `https://www.motionelements.com/stock-image-10116013-business-and-startup-4k` +## Expresso.html -* Useful API sites: - * https://rapidapi.com/ (Links to an external site.) - * https://any-api.com/ (Links to an external site.) - * https://github.com/toddmotto/public-apis#public-apis- (Links to an external site.) - * https://apilist.fun/ +This is a website with information about Espresso coffee and what it means to be a espresso knight. +![Expresso.html](/css/espressoPage.png) + +## latte.html +======= ### Deliverable: * A theme for your site that you feel comfortable with * Complete all technical requirements for HTML, CSS, and Javascript @@ -32,75 +35,24 @@ * Submit the project in a ZIP file +This is a website with information about latte coffee and what it means to be a latte knight. +![latte.html](/css/lattePage.png) -## Technical requirements - -* HTML - * Have at least 3 pages, keep the grid system consistent as much as possible - * Use at least 10 different HTML tags - * Use HTML tables - * Implement at least two uses for forms - * Dropped Down Menu - * Use web fonts - * Use different types of content in the form of text, images, videos, and GIFs - * Use regex validation - -* CSS - * Inline, internal, and external styling - * Use five different CSS selectors - * Don’t use too many fonts - * Use colors that complement each other - * Use Flexbox (Optional) - * Use SASS/SCSS (Optional) - * Use animations (Optional) - -* Javascript - * External scripts - * Use variables, if statements, loops, at least one form of collections, functions/call back, and events - * Use AJAX (Optional) - * Use JSON or XML (Optional) - * Use JQuery (Optional) - - - -## How to Download - -#### Part 1 - Forking the Project -* To _fork_ the project, click the `Fork` button located at the top right of the project. - - -#### Part 2 - Navigating to _forked_ Repository -* Navigate to your github profile to find the _newly forked repository_. -* Copy the URL of the project to the clipboard. - -#### Part 3 - Cloning _forked_ repository -* Clone the repository from **your account** into the `~/dev` directory. - * if you do not have a `~/dev` directory, make one by executing the following command: - * * `mkdir ~/dev` - * navigate to the `~/dev` directory by executing the following command: - * * `cd ~/dev` - * clone the project by executing the following command: - * * `git clone https://github.com/${MYUSERNAME}/${NAMEOFPROJECT}` +## Affogato.html +This is a website with information about affogato coffee and what it means to be a affogato knight. +![Affogato.html](/css/affogatoPage.png) +## takeTest.html +This is a random knight generator page that chooses the reader "true" coffee knight persona and allows the user to play and learn. -## How to Submit +![takeTest.html](/css/testPage.png) -#### Part 1 - _Pushing_ local changes to remote repository -* from a _terminal_ navigate to the root directory of the _cloned_ project. -* from the root directory of the project, execute the following commands: - * * add all changes - * * `git add .` - * * commit changes to be pushed - * * `git commit -m 'I have added changes'` - * * push changes to your repository - * * `git push -u origin master` +## signUpPage.html +This is a simple sign up that page that appears when the user submits their email for Coffee Warrior Updates. -#### Part 2 - Submitting assignment -* from the browser, navigate to the _forked_ project from **your** github account. -* click the `Pull Requests` tab. -* select `New Pull Request` +![signUpPage.html](/css/signUpPage.png) \ No newline at end of file diff --git a/black.html b/black.html new file mode 100644 index 0000000..87d6a49 --- /dev/null +++ b/black.html @@ -0,0 +1,104 @@ + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+
+
+
+

Black

+
+ +
+
+ resonsive image +
+
+
+
+
+


What is a black Knight

+


You prefer to keep things simple. You are old school, patient, sometimes quiet, + efficient and set in your ways.

+
+
+
+ + + +
+
+
+


What is black Coffee

+


Black coffee is simply coffee that is normally brewed without the addition of + additives such as sugar + , milk, cream or added flavours.

+ +

If you want to sound fancy, you can call black coffee by its proper name: cafe + noir.

+
+
+
+
+ + + + \ No newline at end of file diff --git a/css/affogatoPage.png b/css/affogatoPage.png new file mode 100644 index 0000000..248534f Binary files /dev/null and b/css/affogatoPage.png differ diff --git a/css/blackPage.png b/css/blackPage.png new file mode 100644 index 0000000..4931139 Binary files /dev/null and b/css/blackPage.png differ diff --git a/css/espressoPage.png b/css/espressoPage.png new file mode 100644 index 0000000..37674fb Binary files /dev/null and b/css/espressoPage.png differ diff --git a/css/indexHtml.png b/css/indexHtml.png new file mode 100644 index 0000000..992d37b Binary files /dev/null and b/css/indexHtml.png differ diff --git a/css/lattePage.png b/css/lattePage.png new file mode 100644 index 0000000..8147bd7 Binary files /dev/null and b/css/lattePage.png differ diff --git a/css/signUpPage.png b/css/signUpPage.png new file mode 100644 index 0000000..e3d0ff4 Binary files /dev/null and b/css/signUpPage.png differ diff --git a/css/style.css b/css/style.css index d17d83a..2ab9f97 100644 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,31 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); +/*font-family: 'Roboto', sans-serif; */ + +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap'); + + + + body { - background-color: navy; + background-color: #f5f5dc; } +h1{ + font-family: 'Roboto', sans-serif; + color: rgb(0, 0, 0); + /* text-align: center; + position:relative; + left:800px; + top:320px; + font-size: 30px; */ +} +h2{ + + font-family: 'Noto Sans JP', sans-serif; + + color: black; + /* text-align: left; + text-underline-position: below; */ -object { - height: 100vh; - width: 100vh; } + diff --git a/css/testPage.png b/css/testPage.png new file mode 100644 index 0000000..17e5983 Binary files /dev/null and b/css/testPage.png differ diff --git a/expresso.html b/expresso.html new file mode 100644 index 0000000..f536580 --- /dev/null +++ b/expresso.html @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+
+
+
+

Espresso

+
+ +
+
+ resonsive image +
+
+
+
+
+


What is a Espresso Knight

+


You are a natural born leader that knows how to get things done. You get straight + to the point, + are always on the go and live for the deadlines. Guess that’s why you order the double shot!.

+
+
+
+ +
+
+
+

What is Espresso Coffee

+


Espresso is a coffee-making method of Italian origin, in which a small amount of + nearly + boiling water is forced under pressure through finely-ground coffee beans.

+ +

Can be served solo or used as the foundation of most coffee drinks, like lattes and + macchiatos.

+
+
+
+
+ + + \ No newline at end of file diff --git a/img/Affogato-Coffee-Dessert-8.jpg b/img/Affogato-Coffee-Dessert-8.jpg new file mode 100644 index 0000000..ce423d7 Binary files /dev/null and b/img/Affogato-Coffee-Dessert-8.jpg differ diff --git a/img/beverage-blue-breakfast-brown-414551.jpg b/img/beverage-blue-breakfast-brown-414551.jpg new file mode 100644 index 0000000..f51f292 Binary files /dev/null and b/img/beverage-blue-breakfast-brown-414551.jpg differ diff --git a/img/caffeine-cappuccino-coffee-coffee-shop-2396220.jpg b/img/caffeine-cappuccino-coffee-coffee-shop-2396220.jpg new file mode 100644 index 0000000..a18a9d4 Binary files /dev/null and b/img/caffeine-cappuccino-coffee-coffee-shop-2396220.jpg differ diff --git a/img/cup-of-coffee-spilled-on-black-table-1235717.jpg b/img/cup-of-coffee-spilled-on-black-table-1235717.jpg new file mode 100644 index 0000000..f99b2dd Binary files /dev/null and b/img/cup-of-coffee-spilled-on-black-table-1235717.jpg differ diff --git a/img/horse-chest-piece-on-chess-board-1660753.jpg b/img/horse-chest-piece-on-chess-board-1660753.jpg new file mode 100644 index 0000000..a7e3b9c Binary files /dev/null and b/img/horse-chest-piece-on-chess-board-1660753.jpg differ diff --git a/img/person-sitting-near-table-with-teacups-and-plates-2074130.jpg b/img/person-sitting-near-table-with-teacups-and-plates-2074130.jpg new file mode 100644 index 0000000..b846558 Binary files /dev/null and b/img/person-sitting-near-table-with-teacups-and-plates-2074130.jpg differ diff --git a/img/selective-focus-photography-of-a-cup-of-black-coffee-1233528.jpg b/img/selective-focus-photography-of-a-cup-of-black-coffee-1233528.jpg new file mode 100644 index 0000000..e0d2591 Binary files /dev/null and b/img/selective-focus-photography-of-a-cup-of-black-coffee-1233528.jpg differ diff --git a/index.html b/index.html index 4dc0c72..a7cc7f0 100644 --- a/index.html +++ b/index.html @@ -1,57 +1,159 @@ - - - - + + - + - - - - - - - - - - - - - - + + + + + - - - - - - - - The quickest of brown foxes. - - - - - - + + + + + + + + + + +
+ +
+ +
+ +
+
+
+
+
+
+

Where coffee Warriors unite!!

+

We are a guide that is dedicated to making everyone understand the vast world of coffee.
Come join a + community deicated in teaching everyone the art of the coffee warrior.

+
+
+
+ +


+ resonsive image + +
+
+
+ + +
+
+
+

From Squire to Knight

+

Learn the skills needed to slay any coffee monster!!.
Begin with joining your real Coffee + clan!!.
What 😱!!!

+
+
+
+ + + resonsive image + +
+
+
+ +
+
+ +
+

Take the test

+

We are not all the same,sorry not sorry 💥.Take the coffee warrior test to begin learning what + coffee warrior you really are!! +

+

Enlighten those those are lost 🙏, click the tab above that + says "Take the test".

+

Onward, let this be the first step to the next thousand you'll complete paladin. ⚔

+
+
+
+ +


+ resonsive image + +
+
+
+ +
+

Sign up for updates to the Coffee Warrior Foundation

+
+
+
+ + + JOIN THE MOVEMENT NOW!! + +
+ +
+
+
+
- - + - - - \ No newline at end of file diff --git a/latte.html b/latte.html new file mode 100644 index 0000000..6799a23 --- /dev/null +++ b/latte.html @@ -0,0 +1,106 @@ +latte + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+
+
+
+

Latte

+
+ +
+
+ resonsive image +
+
+
+
+
+


What is a Latte Knight

+


You like to soften the bitterness of life. You are laid back, + dependable, realistic, + You enjoy the simple comforts of life. It’s possible you own a cat.

+
+
+
+ + + +
+
+
+

What is a latte?

+


As the most popular coffee drink out there, the latte is comprised of a + shot of espresso and steamed milk with + just a touch of foam.

+

It can be ordered plain or with a flavor shot of anything from vanilla to + pumpkin spice.

+

The word comes from the Italian caffè e latte, caffelatte or caffellatte, + which means "coffee & milk"

+
+
+
+
+ + + \ No newline at end of file diff --git a/signUpPage.html b/signUpPage.html new file mode 100644 index 0000000..9a0ff37 --- /dev/null +++ b/signUpPage.html @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+

Thank you sir

+
+
+ https://media.giphy.com/media/yCAoGdVUCW5LW/giphy.gif +
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/takeTest.html b/takeTest.html new file mode 100644 index 0000000..2d0872b --- /dev/null +++ b/takeTest.html @@ -0,0 +1,185 @@ +signUpPage + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+
+
+

Take the test and start your journey

+
+
+

A table of possible choices

+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Coffee TypeWhat it means
Black knight?
Espresso knight?
Latte knight?
Affogato knight?
+
+
+
+ +
+
+
+

The time has come for you to know your true coffee knight

+ +
+
+ + +

!!!Are You ready!!!

+
+
+
+
+
+
+ + + + + + + \ No newline at end of file