diff --git a/README.md b/README.md index 3a2d9de..849102e 100644 --- a/README.md +++ b/README.md @@ -1,84 +1,88 @@ -

HackYourFuture Belgium

+

Week3 Project

+

Please follow the link below to see the final version of my Week3 project

+ +Replicated DuckDuckGo Website Using Branches

+ +

Week2 Project

+ + + +

Captain COOK: Build An HTML5 Website With A Responsive Layout

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Stepsindex.htmlabout.htmlservices.htmlCSS
Step-1 Create an empty HTML template, requiring CSS file, title tag(doesn't exist yet!)(doesn't exist yet!)create an empty CSS file
Step-2 Write HTML File (header, showcase, newsletter, form, boxes and footer)(doesn't exist yet!)(doesn't exist yet!)Not CSS styling yet!
Step-3HTML File (header, showcase, newsletter, form, boxes and footer)(doesn't exist yet!)(doesn't exist yet!)Style the HTML5 file with CSS3!
Step-4HTML File (header, showcase, newsletter, form, boxes and footer)Write About.html file and link to Index.html!(doesn't exist yet!)Style the About.html file!
Step-5HTML File (header, showcase, newsletter, form, boxes and footer)About.htmlWrite Services.html file and link to Index.html!Style the Services.html file!
Step-6HTML File (header, showcase, newsletter, form, boxes and footer)About.htmlServices.htmlMake all the pages responsive
+ + +

Links to project week1

+0-Blank Page
+1-head-and-header
+2-rules-of-the-game
+3-unplayable-board
+4-playable-board
+5-up-to-you

-
- - - -
-# Getting started - -> Welcome to your first training at HYF. Please read completely this file and make sure you understand everything. -Happy learning 😁 - -This repo contains all the materials for the module 1: `HTML, CSS`. The homework, exercises, and study code are in the main repository for you to fork and complete, all the lesson plans and weekly information are [in the wiki](https://github.com/be-hacking-hyf/HTML-CSS-GitHub/wiki) and the slides from class are [right here](https://be-hacking-hyf.github.io/HTML-CSS-GitHub/slides/). - -While this module is called "HTML & CSS", it's important to remember that you also need to learn how to Fork & Pull Request on GitHub, to Push and Pull your work between GitHub and your computer, and to develop locally on your computer using a browser+DevTools and a specialized text editor. - -In the first weeks it's very likely that you'll spend as much time figuring out how to publish and turn in your projects as you will spend building them. _This is totally normal and OK!_ Working like a developer takes time and practice to get good at, and at this point in your learning it's even more important than mastering HTML & CSS! - -So on days when you find yourself spending a couple hours trying to push your homework or send a PR for your coach to look over your homework, remind yourself that it's all time well spent. Mastering these skills _now_ will free your time _later_ to focus on studying the more interesting and challenging skills in this course. - -### Your mission - -- Prepare each class by reading the [wiki](https://github.com/be-hacking-hyf/HTML-CSS-GitHub/wiki) preparation work called [Prep Work (for week 1)](https://github.com/be-hacking-hyf/HTML-CSS-GitHub/wiki/Prep-Work-wk-1) -- During class, be focus, ask questions as much as you can, help your teammates when they are struggling. - ---- - -## It's not finished... yet! - -If only four hours a week were enough to learn web development! But sadly it's not :( Along side coming to class, you will have homework assignments. - -There are three types of homework: -* [__Weekly Projects__](#weekly-projects): The goal of these projects is for you to practice integrating all of your skills into one live web site. These assignments are due each Thursday. -* [__Module Exercises__](#module-exercises): The module exercises are a chance for you to focus in on some of the trickier or more important new skills without having to think about an entire project. These exercises are due at the end of the module with the third week's project. -* [__Suggested Study__](#suggested-study): The goal of Suggested Studies is to help you review old skills and prepare for new ones by providing you with small exercises that don't always result in a finished product but are always worth your time. If you ever find yourself with some time to study but not enough to dig into the Projects or Exercises, Suggested Studies are there for you! We won't be checking that you do these exercises, but you'll feel it later on if you don't :) - -### Weekly Projects - -Each week you will be required to complete a small project that integrates everything you've learned so far (HTML, CSS, GitHub, working locally, incremental development). The goal of these projects is to practice planning and building projects in a methodical and structured way, and to write the cleanest and most correct code possible. The goal of these projects _is not_ to build the fanciest most beautiful website, to use all the latest CSS tricks, or to use cool libraries and API's. - -Here's a short list of do's and don't's that can help you stay on track: - -__DO__ -* ... use only plain HTML & CSS (no CSS frameworks like Bootstrap or Material!) -* ... completely finish one step of the project before moving on to the next -* ... be very careful about your CSS classes, selectors and id's -* ... Properly indent your code -* ... find the simplest solution to each step of the project -* ... start each step of the project by copy-pasting the last step - -__Don't__ -* ... think that your site can be pretty enough to make up for messy code -* ... use any CSS libraries or frameworks -* ... make the any steps of your project do less _or more_ than is assigned -* ... move on to the next step before the previous one is finished -* ... include any JavaScript - -Take a look at the completed example to study to get an idea what's expected of you: -* [the live example](https://be-hacking-hyf.github.io/HTML-CSS-GitHub/study-code/example-project-feedback-form/) -* [it's source code](https://github.com/be-hacking-hyf/HTML-CSS-GitHub/tree/master/study-code/example-project-feedback-form). - -You can also preview the assignments here: -1. [human-intelligence TicTacToe board](./homework/week-1-project) -1. [responsive Web Designer site](./homework/week-3-project) -1. [replicate DuckDuckGo](./homework/week-3-project) - -### Module Exercises - -Along side Sunday classes and weekly projects which focus on integrating your skills, you'll be expected to complete a set of exercises to focus in and practice certain skills in isolation. While the project teaches how to integrate your skills, the exercises will focus on strengthening individual skills. This module's exercises can be found [in the exercise folder](./homework/module-exercises). - -Exercises are all due at the end of the Module, we won't be checking your exercises each week (unless you have some questions of course!). We also won't accept any homework for JavaScript 1 until you have submitted your exercises from HTML & CSS. - -So be organized about this! It's a lot easier to finish these exercises if you study them an hour a day than if you cram it all into the last weekend, and you'll learn a whole lot more along the way. - - -### Suggested Study - -You can find our study suggestions in each week's ```Homework``` page from the wiki. - - ---- ---- -### Hack Your Future: Belgium diff --git a/homework/module-exercices/add-a-text-alternative-to-images-for-visually-impaired-accessibility.json b/homework/module-exercices/add-a-text-alternative-to-images-for-visually-impaired-accessibility.json new file mode 100644 index 0000000..9de9455 --- /dev/null +++ b/homework/module-exercices/add-a-text-alternative-to-images-for-visually-impaired-accessibility.json @@ -0,0 +1 @@ +{"index.html":"\"The"} \ No newline at end of file diff --git a/homework/module-exercices/add-an-accessible-date-picker.json b/homework/module-exercices/add-an-accessible-date-picker.json new file mode 100644 index 0000000..be5222c --- /dev/null +++ b/homework/module-exercices/add-an-accessible-date-picker.json @@ -0,0 +1 @@ +{"index.html":"\n
\n

Tournaments

\n
\n
\n
\n

Mortal Kombat Tournament Survey

\n
\n

Tell us the best date for the competition

\n \n \n \n \n \n \n \n \n \n
\n
\n
\n \n"} \ No newline at end of file diff --git a/homework/module-exercices/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.json b/homework/module-exercices/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.json new file mode 100644 index 0000000..6b18763 --- /dev/null +++ b/homework/module-exercices/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.json @@ -0,0 +1 @@ +{"index.html":"\n \n\n\n
\n

Danger!

\n
\n \n"} \ No newline at end of file diff --git a/homework/module-exercices/avoid-colorblindness-issues-by-using-sufficient-contrast.json b/homework/module-exercices/avoid-colorblindness-issues-by-using-sufficient-contrast.json new file mode 100644 index 0000000..36b4c9a --- /dev/null +++ b/homework/module-exercices/avoid-colorblindness-issues-by-using-sufficient-contrast.json @@ -0,0 +1 @@ +{"index.html":"\n \n\n\n
\n

Deep Thoughts with Master Camper Cat

\n
\n
\n

A Word on the Recent Catnip Doping Scandal

\n

The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.

\n

As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.

\n
\n"} \ No newline at end of file diff --git a/homework/module-exercices/give-links-meaning-by-using-descriptive-link-text.json b/homework/module-exercices/give-links-meaning-by-using-descriptive-link-text.json new file mode 100644 index 0000000..bf05a0c --- /dev/null +++ b/homework/module-exercices/give-links-meaning-by-using-descriptive-link-text.json @@ -0,0 +1 @@ +{"index.html":"\n
\n

Deep Thoughts with Master Camper Cat

\n
\n
\n

Defeating your Foe: the Red Dot is Ours!

\n

Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near.Click here for information about batteries

\n
\n"} \ No newline at end of file diff --git a/homework/module-exercices/improve-accessibility-of-audio-content-with-the-audio-element.json b/homework/module-exercices/improve-accessibility-of-audio-content-with-the-audio-element.json new file mode 100644 index 0000000..6d7739f --- /dev/null +++ b/homework/module-exercices/improve-accessibility-of-audio-content-with-the-audio-element.json @@ -0,0 +1 @@ +{"index.html":"\n
\n

Real Coding Ninjas

\n
\n
\n

A sound clip of Zersiax's screen reader in action.

\n
\n"} \ No newline at end of file diff --git a/homework/module-exercices/improve-chart-accessibility-with-the-figure-element.json b/homework/module-exercices/improve-chart-accessibility-with-the-figure-element.json new file mode 100644 index 0000000..13ae351 --- /dev/null +++ b/homework/module-exercices/improve-chart-accessibility-with-the-figure-element.json @@ -0,0 +1 @@ +{"index.html":"\n
\n

Training

\n \n
\n
\n
\n \n \n
\n \n
\n
Breakdown per week of time to spend training in stealth, combat, and weapons.
\n
\n \n \n
\n
\n

Stealth & Agility Training

\n

Climb foliage quickly using a minimum spanning tree approach

\n

No training is NP-complete without parkour

\n
\n
\n

Combat Training

\n

Dispatch multiple enemies with multithreaded tactics

\n

Goodbye world: 5 proven ways to knock out an opponent

\n
\n
\n

Weapons Training

\n

Swords: the best tool to literally divide and conquer

\n

Breadth-first or depth-first in multi-weapon training?

\n
\n
\n \n"} \ No newline at end of file diff --git a/homework/module-exercices/improve-form-field-accessibility-with-the-label-element.json b/homework/module-exercices/improve-form-field-accessibility-with-the-label-element.json new file mode 100644 index 0000000..16928b2 --- /dev/null +++ b/homework/module-exercices/improve-form-field-accessibility-with-the-label-element.json @@ -0,0 +1 @@ +{"index.html":"\n
\n

Deep Thoughts with Master Camper Cat

\n
\n
\n
\n

Sign up to receive Camper Cat's blog posts by email here!

\n \n \n \n \n \n \n
\n
\n
\n

The Garfield Files: Lasagna as Training Fuel?

\n

The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...

\n
\n \"\"\n
\n

Defeating your Foe: the Red Dot is Ours!

\n

Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...

\n
\n \"\"\n
\n

Is Chuck Norris a Cat Person?

\n

Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...

\n
\n \n"} \ No newline at end of file diff --git a/homework/module-exercices/improve-readability-with-high-contrast-text.json b/homework/module-exercices/improve-readability-with-high-contrast-text.json new file mode 100644 index 0000000..b0f2d59 --- /dev/null +++ b/homework/module-exercices/improve-readability-with-high-contrast-text.json @@ -0,0 +1 @@ +{"index.html":"\n \n\n\n
\n

Deep Thoughts with Master Camper Cat

\n
\n
\n

A Word on the Recent Catnip Doping Scandal

\n

The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.

\n

As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.

\n
\n"} \ No newline at end of file diff --git a/homework/module-exercices/jump-straight-to-the-content-using-the-main-element.json b/homework/module-exercices/jump-straight-to-the-content-using-the-main-element.json new file mode 100644 index 0000000..d35cb49 --- /dev/null +++ b/homework/module-exercices/jump-straight-to-the-content-using-the-main-element.json @@ -0,0 +1 @@ +{"index.html":"
\n

Weapons of the Ninja

\n
\n
\n\n\n"} \ No newline at end of file diff --git a/homework/module-exercices/know-when-alt-text-should-be-left-blank.json b/homework/module-exercices/know-when-alt-text-should-be-left-blank.json new file mode 100644 index 0000000..71ac64b --- /dev/null +++ b/homework/module-exercices/know-when-alt-text-should-be-left-blank.json @@ -0,0 +1 @@ +{"index.html":"

Deep Thoughts with Master Camper Cat

\n
\n

Defeating your Foe: the Red Dot is Ours!

\n

To Come...

\n
\n\n\"\"\n\n
\n

Is Chuck Norris a Cat Person?

\n

To Come...

\n
"} \ No newline at end of file diff --git a/homework/module-exercices/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.json b/homework/module-exercices/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.json new file mode 100644 index 0000000..3b2cb42 --- /dev/null +++ b/homework/module-exercices/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.json @@ -0,0 +1 @@ +{"index.html":"\n \n\n\n
\n

Training

\n \n
\n
\n

Master Camper Cat's Beginner Three Week Training Program

\n
\n \n

[Stacked bar chart]

\n
\n
Breakdown per week of time to spend training in stealth, combat, and weapons.
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Hours of Weekly Training in Stealth, Combat, and Weapons
Stealth & AgilityCombatWeaponsTotal
Week One35210
Week Two45312
Week Three46313
\n
\n
\n

Stealth & Agility Training

\n

Climb foliage quickly using a minimum spanning tree approach

\n

No training is NP-complete without parkour

\n
\n
\n

Combat Training

\n

Dispatch multiple enemies with multithreaded tactics

\n

Goodbye, world: 5 proven ways to knock out an opponent

\n
\n
\n

Weapons Training

\n

Swords: the best tool to literally divide and conquer

\n

Breadth-first or depth-first in multi-weapon training?

\n
\n \n"} \ No newline at end of file diff --git a/homework/module-exercices/make-links-navigatable-with-html-access-keys.json b/homework/module-exercices/make-links-navigatable-with-html-access-keys.json new file mode 100644 index 0000000..872d6f5 --- /dev/null +++ b/homework/module-exercices/make-links-navigatable-with-html-access-keys.json @@ -0,0 +1 @@ +{"index.html":"\n
\n

Deep Thoughts with Master Camper Cat

\n
\n
\n \n \n

The Garfield Files: Lasagna as Training Fuel?

\n \n \n

The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...

\n
\n
\n \n \n

Is Chuck Norris a Cat Person?

\n \n \n

Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...

\n
\n \n"} \ No newline at end of file diff --git a/homework/module-exercices/make-screen-reader-navigation-easier-with-the-footer-landmark.json b/homework/module-exercices/make-screen-reader-navigation-easier-with-the-footer-landmark.json new file mode 100644 index 0000000..364c5c5 --- /dev/null +++ b/homework/module-exercices/make-screen-reader-navigation-easier-with-the-footer-landmark.json @@ -0,0 +1 @@ +{"index.html":"\n
\n

Training

\n \n
\n
\n
\n

Stealth & Agility Training

\n

Climb foliage quickly using a minimum spanning tree approach

\n

No training is NP-complete without parkour

\n
\n
\n

Combat Training

\n

Dispatch multiple enemies with multithreaded tactics

\n

Goodbye world: 5 proven ways to knock out an opponent

\n
\n
\n

Weapons Training

\n

Swords: the best tool to literally divide and conquer

\n

Breadth-first or depth-first in multi-weapon training?

\n
\n
\n\n\n \n\n\n"} \ No newline at end of file diff --git a/homework/module-exercices/make-screen-reader-navigation-easier-with-the-header-landmark.json b/homework/module-exercices/make-screen-reader-navigation-easier-with-the-header-landmark.json new file mode 100644 index 0000000..986cc04 --- /dev/null +++ b/homework/module-exercices/make-screen-reader-navigation-easier-with-the-header-landmark.json @@ -0,0 +1 @@ +{"index.html":"\n\n
\n

Training with Camper Cat

\n
\n\n\n
\n
\n

Stealth & Agility Training

\n

Climb foliage quickly using a minimum spanning tree approach

\n

No training is NP-complete without parkour

\n
\n
\n

Combat Training

\n

Dispatch multiple enemies with multithreaded tactics

\n

Goodbye world: 5 proven ways to knock out an opponent

\n
\n
\n

Weapons Training

\n

Swords: the best tool to literally divide and conquer

\n

Breadth-first or depth-first in multi-weapon training?

\n
\n
\n"} \ No newline at end of file diff --git a/homework/module-exercices/make-screen-reader-navigation-easier-with-the-nav-landmark.json b/homework/module-exercices/make-screen-reader-navigation-easier-with-the-nav-landmark.json new file mode 100644 index 0000000..46dac05 --- /dev/null +++ b/homework/module-exercices/make-screen-reader-navigation-easier-with-the-nav-landmark.json @@ -0,0 +1 @@ +{"index.html":"\n
\n

Training with Camper Cat

\n\n \n\n
\n
\n
\n

Stealth & Agility Training

\n

Climb foliage quickly using a minimum spanning tree approach

\n

No training is NP-complete without parkour

\n
\n
\n

Combat Training

\n

Dispatch multiple enemies with multithreaded tactics

\n

Goodbye world: 5 proven ways to knock out an opponent

\n
\n
\n

Weapons Training

\n

Swords: the best tool to literally divide and conquer

\n

Breadth-first or depth-first in multi-weapon training?

\n
\n
\n"} \ No newline at end of file diff --git a/homework/module-exercices/standardize-times-with-the-html5-datetime-attribute.json b/homework/module-exercices/standardize-times-with-the-html5-datetime-attribute.json new file mode 100644 index 0000000..ae9a720 --- /dev/null +++ b/homework/module-exercices/standardize-times-with-the-html5-datetime-attribute.json @@ -0,0 +1 @@ +{"index.html":"\n
\n

Tournaments

\n
\n
\n

Mortal Kombat Tournament Survey Results

\n \n \n \n

Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is . May the best ninja win!

\n \n \n \n
\n

Comments:

\n
\n

Posted by: Sub-Zero on

\n

Johnny Cage better be there, I'll finish him!

\n
\n
\n

Posted by: Doge on

\n

Wow, much combat, so mortal.

\n
\n
\n

Posted by: The Grim Reaper on

\n

Looks like I'll be busy that day.

\n
\n
\n
\n \n"} \ No newline at end of file diff --git a/homework/module-exercices/use-headings-to-show-hierarchical-relationships-of-content.json b/homework/module-exercices/use-headings-to-show-hierarchical-relationships-of-content.json new file mode 100644 index 0000000..845fd7f --- /dev/null +++ b/homework/module-exercices/use-headings-to-show-hierarchical-relationships-of-content.json @@ -0,0 +1 @@ +{"index.html":"

How to Become a Ninja

\n
\n

Learn the Art of Moving Stealthily

\n

How to Hide in Plain Sight

\n

How to Climb a Wall

\n\n

Learn the Art of Battle

\n

How to Strengthen your Body

\n

How to Fight like a Ninja

\n\n

Learn the Art of Living with Honor

\n

How to Breathe Properly

\n

How to Simplify your Life

\n
"} \ No newline at end of file diff --git a/homework/module-exercices/use-tabindex-to-add-keyboard-focus-to-an-element.json b/homework/module-exercices/use-tabindex-to-add-keyboard-focus-to-an-element.json new file mode 100644 index 0000000..f1fc896 --- /dev/null +++ b/homework/module-exercices/use-tabindex-to-add-keyboard-focus-to-an-element.json @@ -0,0 +1 @@ +{"index.html":"\n \n\n\n
\n

Ninja Survey

\n
\n
\n
\n \n \n

Instructions: Fill in ALL your information then click Submit

\n \n \n \n
\n
\n What level ninja are you?\n \n
\n \n
\n \n \n
\n
\n
\n Select your favorite weapons:\n \n
\n \n
\n \n
\n \n \n
\n
\n \n

\n
\n \n"} \ No newline at end of file diff --git a/homework/module-exercices/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.json b/homework/module-exercices/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.json new file mode 100644 index 0000000..8f57201 --- /dev/null +++ b/homework/module-exercices/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.json @@ -0,0 +1 @@ +{"index.html":"\n
\n

Even Deeper Thoughts with Master Camper Cat

\n \n
\n
\n \n \n \n \n \n \n \n
\n

Inspirational Quotes

\n
\n

“There's no Theory of Evolution, just a list of creatures I've allowed to live.”
\n - Chuck Norris

\n
\n
\n

“Wise men say forgiveness is divine, but never pay full price for late pizza.”
\n - TMNT

\n
\n \n"} \ No newline at end of file diff --git a/homework/module-exercices/wrap-content-in-the-article-element.json b/homework/module-exercices/wrap-content-in-the-article-element.json new file mode 100644 index 0000000..cab3f16 --- /dev/null +++ b/homework/module-exercices/wrap-content-in-the-article-element.json @@ -0,0 +1 @@ +{"index.html":"

Deep Thoughts with Master Camper Cat

\n
\n
\n

The Garfield Files: Lasagna as Training Fuel?

\n

The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...

\n
\n\n \"\"\n\n
\n

Defeating your Foe: the Red Dot is Ours!

\n

Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...

\n
\n\n \"\"\n\n
\n

Is Chuck Norris a Cat Person?

\n

Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...

\n
\n
"} \ No newline at end of file diff --git a/homework/module-exercices/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.json b/homework/module-exercices/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.json new file mode 100644 index 0000000..9644527 --- /dev/null +++ b/homework/module-exercices/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.json @@ -0,0 +1 @@ +{"index.html":"\n
\n

Deep Thoughts with Master Camper Cat

\n
\n
\n
\n

Sign up to receive Camper Cat's blog posts by email here!

\n \n \n \n \n \n
\n What level ninja are you?\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n
\n

The Garfield Files: Lasagna as Training Fuel?

\n

The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...

\n
\n \"\"\n
\n

Defeating your Foe: the Red Dot is Ours!

\n

Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...

\n
\n \"\"\n
\n

Is Chuck Norris a Cat Person?

\n

Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...

\n
\n \n"} \ No newline at end of file diff --git a/homework/week-1-project/0-blank-page-setup/index.html b/homework/week-1-project/0-blank-page-setup/index.html index 7ab86ff..cb09dc9 100644 --- a/homework/week-1-project/0-blank-page-setup/index.html +++ b/homework/week-1-project/0-blank-page-setup/index.html @@ -1,15 +1,13 @@ - - - - - + + + + + - - + - - + \ No newline at end of file diff --git a/homework/week-1-project/1-head-and-header/index.html b/homework/week-1-project/1-head-and-header/index.html index e69de29..853d798 100644 --- a/homework/week-1-project/1-head-and-header/index.html +++ b/homework/week-1-project/1-head-and-header/index.html @@ -0,0 +1,23 @@ + + + + + + + Tic Tac Toe + + + +
+

Let's Play Tic Tac Toe!

+ The Picture of Tic-Tac-Toe Game Board +

Tic-tac-toe (American English), noughts and crosses + (British English), or Xs and Os is a paper-and-pencil game for two + players, X and O, who take turns marking the spaces in a 3×3 + grid. The player who succeeds in placing three of their marks + in a horizontal, vertical, or diagonal row wins the game.

+
+ + + + \ No newline at end of file diff --git a/homework/week-1-project/1-head-and-header/style.css b/homework/week-1-project/1-head-and-header/style.css index e69de29..22a2655 100644 --- a/homework/week-1-project/1-head-and-header/style.css +++ b/homework/week-1-project/1-head-and-header/style.css @@ -0,0 +1,28 @@ +body{ +font-style: cursuve; +} +h1 { +background-color: aliceblue; +font-size: 30px; +text-align: center; +} + +img { + width: 20%; + height: 20%; + float: left; +} + +.description { + font-family: cursive; + font-size: 30px; + text-align: justify; + float: right; + width: 75%; + margin-top:5%; + background-color:brown;} + + + + + diff --git a/homework/week-1-project/2-rules-of-the-game/index.html b/homework/week-1-project/2-rules-of-the-game/index.html index e69de29..d4eea32 100644 --- a/homework/week-1-project/2-rules-of-the-game/index.html +++ b/homework/week-1-project/2-rules-of-the-game/index.html @@ -0,0 +1,26 @@ + + + + + + + Tic Tac Toe + + + +
+

Let's Play Tic-Tac-Toe!

+ The Picture of Tic-Tac-Toe Game Board +

Tic-tac-toe (American English), noughts and crosses + (British English), or Xs and Os is a paper-and-pencil game for two + players, X and O, who take turns marking the spaces in a 3×3 + grid. The player who succeeds in placing three of their marks + in a horizontal, vertical, or diagonal row wins the game.

+
+
+ +
+ + + + \ No newline at end of file diff --git a/homework/week-1-project/2-rules-of-the-game/rules.html b/homework/week-1-project/2-rules-of-the-game/rules.html new file mode 100644 index 0000000..e0e8e9e --- /dev/null +++ b/homework/week-1-project/2-rules-of-the-game/rules.html @@ -0,0 +1,38 @@ + + + + + + + Rules of Tic Tac Toe + + + + +
+

The Rules of Tic Tac Toe

+
+ + +
+ + \ No newline at end of file diff --git a/homework/week-1-project/2-rules-of-the-game/style.css b/homework/week-1-project/2-rules-of-the-game/style.css index e69de29..d61a9c0 100644 --- a/homework/week-1-project/2-rules-of-the-game/style.css +++ b/homework/week-1-project/2-rules-of-the-game/style.css @@ -0,0 +1,48 @@ +body{ + font-style: cursive; + } + +h1 { + background-color: aliceblue; + color:brown; + font-size: 30px; + text-align: center; + } + +img { + width: 20%; + height: 10%; + } + +.description { + font-family: cursive; + font-size:150%; + text-align: justify; + float: right; + width: 74%; + margin-top:5%; + margin-right:4%; + } + + input.MyButton { + width: 10%; + margin-left: 5%; + margin-top:2%; + position: absolute; + padding: 1%; + cursor: pointer; + font-weight: bold; + font-size: 100%; + background:black; + color: #fff; + border: 1% solid #3366cc; + border-radius: 8%; + + } + + input.MyButton:hover { + color: #fff; + background:brown; + border: 1% solid #fff; + } + diff --git a/homework/week-1-project/3-unplayable-board/index.html b/homework/week-1-project/3-unplayable-board/index.html index e69de29..2e0904a 100644 --- a/homework/week-1-project/3-unplayable-board/index.html +++ b/homework/week-1-project/3-unplayable-board/index.html @@ -0,0 +1,37 @@ + + + + + + + Tic Tac Toe + + + +
+

Let's Play Tic-Tac-Toe!

+ The Picture of Tic-Tac-Toe Game Board +

Tic-tac-toe (American English), noughts and crosses + (British English), or Xs and Os is a paper-and-pencil game for two + players, X and O, who take turns marking the spaces in a 3×3 + grid. The player who succeeds in placing three of their marks + in a horizontal, vertical, or diagonal row wins the game.

+
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/homework/week-1-project/3-unplayable-board/rules.html b/homework/week-1-project/3-unplayable-board/rules.html new file mode 100644 index 0000000..d3af65a --- /dev/null +++ b/homework/week-1-project/3-unplayable-board/rules.html @@ -0,0 +1,20 @@ + + + + + + + Rules of Tic Tac Toe + + +
+

The Rules of Tic Tac Toe

+ +
+ + \ No newline at end of file diff --git a/homework/week-1-project/3-unplayable-board/style.css b/homework/week-1-project/3-unplayable-board/style.css index e69de29..579070f 100644 --- a/homework/week-1-project/3-unplayable-board/style.css +++ b/homework/week-1-project/3-unplayable-board/style.css @@ -0,0 +1,67 @@ +body{ + font-style: cursive; + } + +h1 { + background-color: aliceblue; + color:brown; + font-size: 30px; + text-align: center; + } + +img { + width: 20%; + height: 10%; + } + +.description { + font-family: cursive; + font-size:150%; + text-align: justify; + float: right; + width: 74%; + margin-top:5%; + margin-right:4%; + } + + input.MyButton { + width: 10%; + margin-left: 5%; + margin-top:2%; + position: absolute; + padding: 1%; + cursor: pointer; + font-weight: bold; + font-size: 100%; + background:black; + color: #fff; + border: 1% solid #111213; + border-radius: 8%; + + } + + input.MyButton:hover { + color: #fff; + background:brown; + border: 1% solid #fff; + } + + .grid-container { + display: grid; + height: 30%; + width: 30%; + margin-left:35%; + margin-top: 0; + align-content: center; + grid-template-columns: auto auto auto; + grid-gap: 1%; + background-color: #111213;; + padding: 2%; + } + + .grid-container > div { + background-color: white; + text-align: center; + padding: 50%; + font-size: 400%; + } \ No newline at end of file diff --git a/homework/week-1-project/4-playable-board/index.html b/homework/week-1-project/4-playable-board/index.html index e69de29..c65008f 100644 --- a/homework/week-1-project/4-playable-board/index.html +++ b/homework/week-1-project/4-playable-board/index.html @@ -0,0 +1,37 @@ + + + + + + + Tic Tac Toe + + + +
+

Let's Play Tic-Tac-Toe!

+ The Picture of Tic-Tac-Toe Game Board +

Tic-tac-toe (American English), noughts and crosses + (British English), or Xs and Os is a paper-and-pencil game for two + players, X and O, who take turns marking the spaces in a 3×3 + grid. The player who succeeds in placing three of their marks + in a horizontal, vertical, or diagonal row wins the game.

+
+
+ +
+ +
+
X
+
O
+
O
+
O
+
O
+
X
+
X
+
X
+
X
+
+ + + \ No newline at end of file diff --git a/homework/week-1-project/4-playable-board/rules.html b/homework/week-1-project/4-playable-board/rules.html new file mode 100644 index 0000000..d3af65a --- /dev/null +++ b/homework/week-1-project/4-playable-board/rules.html @@ -0,0 +1,20 @@ + + + + + + + Rules of Tic Tac Toe + + +
+

The Rules of Tic Tac Toe

+ +
+ + \ No newline at end of file diff --git a/homework/week-1-project/4-playable-board/style.css b/homework/week-1-project/4-playable-board/style.css index e69de29..0be095d 100644 --- a/homework/week-1-project/4-playable-board/style.css +++ b/homework/week-1-project/4-playable-board/style.css @@ -0,0 +1,73 @@ +body{ + font-family: cursive, "Helvetica Neue", helvetica, arial, sans-serif; + } + +h1 { + background-color: aliceblue; + color:brown; + font-size: 30px; + text-align: center; + font-family: cursive, "Helvetica Neue", helvetica, arial, sans-serif; + } + +img { + width: 20%; + height: 10%; + } + +.description { + font-family: cursive, "Helvetica Neue", helvetica, arial, sans-serif; + font-size:150%; + text-align: justify; + float: right; + width: 74%; + margin-top:5%; + margin-right:4%; + } + + input.rules { + width: 10%; + margin-left: 5%; + margin-top:2%; + position: absolute; + padding: 1%; + cursor: pointer; + font-weight: bold; + font-size: 100%; + background:black; + color: #fff; + border: 1% solid #111213; + border-radius: 8%; + + } + + input.rules:hover { + color: #fff; + background:brown; + border: 1% solid #fff; + } + + .grid-container { + display: grid; + height: 25%; + width: 35%; + margin-left:35%; + margin-top: 0; + align-content: center; + grid-template-columns: auto auto auto; + grid-gap: 1%; + background-color: #111213;; + padding: 1%; + z-index:1; + + } + + .grid-container > div { + background-color: white; + text-align: center; + padding: 40%; + font-size: 250%; + } + + + \ No newline at end of file diff --git a/homework/week-1-project/5-up-to-you/index.html b/homework/week-1-project/5-up-to-you/index.html index e69de29..1bf1cb2 100644 --- a/homework/week-1-project/5-up-to-you/index.html +++ b/homework/week-1-project/5-up-to-you/index.html @@ -0,0 +1,37 @@ + + + + + + + Tic Tac Toe + + + +
+

Let's Play Tic-Tac-Toe!

+ The Picture of Tic-Tac-Toe Game Board +

Tic-tac-toe (American English), noughts and crosses + (British English), or Xs and Os is a paper-and-pencil game for two + players, X and O, who take turns marking the spaces in a 3×3 + grid. The player who succeeds in placing three of their marks + in a horizontal, vertical, or diagonal row wins the game.

+
+
+ +
+ +
+
X?O?
+
X?O?
+
X?O?
+
X?O?
+
X?O?
+
X?O?
+
X?O?
+
X?O?
+
X?O?
+
+ + + \ No newline at end of file diff --git a/homework/week-1-project/5-up-to-you/rules.html b/homework/week-1-project/5-up-to-you/rules.html new file mode 100644 index 0000000..48662eb --- /dev/null +++ b/homework/week-1-project/5-up-to-you/rules.html @@ -0,0 +1,37 @@ + + + + + + + Rules of Tic Tac Toe + + + + +
+

The Rules of Tic Tac Toe

+
+ + +
+ + \ No newline at end of file diff --git a/homework/week-1-project/5-up-to-you/style.css b/homework/week-1-project/5-up-to-you/style.css index e69de29..5898693 100644 --- a/homework/week-1-project/5-up-to-you/style.css +++ b/homework/week-1-project/5-up-to-you/style.css @@ -0,0 +1,79 @@ +body{ + font-family: cursive, "Helvetica Neue", helvetica, arial, sans-serif; + } + +h1 { + background-color: aliceblue; + color:brown; + font-size: 30px; + text-align: center; + font-family: cursive, "Helvetica Neue", helvetica, arial, sans-serif; + } + +img { + width: 20%; + height: 10%; + } + +.description { + font-family: cursive, "Helvetica Neue", helvetica, arial, sans-serif; + font-size:150%; + text-align: justify; + float: right; + width: 74%; + margin-top:5%; + margin-right:4%; + } + + input.MyButton { + width: 10%; + margin-left: 5%; + margin-top:2%; + position: absolute; + padding: 1%; + cursor: pointer; + font-weight: bold; + font-size: 100%; + background:black; + color: #fff; + border: 1% solid #111213; + border-radius: 8%; + + } + + input.MyButton:hover { + color: #fff; + background:brown; + border: 1% solid #fff; + } + + .grid-container { + display: grid; + height: 25%; + width: 40%; + margin-left:35%; + margin-top: 0; + align-content:center; + grid-template-columns: auto auto auto; + grid-gap: 1%; + background-color: #111213;; + padding: 1%; + } + + .grid-container > div { + background-color: white; + text-align: center; + padding: 25%; + font-size: 30px; + } + + .box { + background-color: white; + text-align: center; + } + .box:hover { + background-color:black; + } + .boxcolor { + color: #fff; + } \ No newline at end of file diff --git a/homework/week-2-project/0-blank-page-setup/index.html b/homework/week-2-project/0-blank-page-setup/index.html deleted file mode 100644 index 7ab86ff..0000000 --- a/homework/week-2-project/0-blank-page-setup/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/homework/week-2-project/0-blank-page-setup/style.css b/homework/week-2-project/Step1/CSS/style.css similarity index 100% rename from homework/week-2-project/0-blank-page-setup/style.css rename to homework/week-2-project/Step1/CSS/style.css diff --git a/homework/week-2-project/Step1/home.html b/homework/week-2-project/Step1/home.html new file mode 100644 index 0000000..ecbc72a --- /dev/null +++ b/homework/week-2-project/Step1/home.html @@ -0,0 +1,12 @@ + + + + + + + + + + Captain Cook | Welcome + + diff --git a/homework/week-2-project/Step2/CSS/style.css b/homework/week-2-project/Step2/CSS/style.css new file mode 100644 index 0000000..e69de29 diff --git a/homework/week-2-project/Step2/IMG/africa.png b/homework/week-2-project/Step2/IMG/africa.png new file mode 100644 index 0000000..518cd5b Binary files /dev/null and b/homework/week-2-project/Step2/IMG/africa.png differ diff --git a/homework/week-2-project/Step2/IMG/asian.jpeg b/homework/week-2-project/Step2/IMG/asian.jpeg new file mode 100644 index 0000000..bc54641 Binary files /dev/null and b/homework/week-2-project/Step2/IMG/asian.jpeg differ diff --git a/homework/week-2-project/Step2/IMG/mediterranean.jpeg b/homework/week-2-project/Step2/IMG/mediterranean.jpeg new file mode 100644 index 0000000..cb5c66d Binary files /dev/null and b/homework/week-2-project/Step2/IMG/mediterranean.jpeg differ diff --git a/homework/week-2-project/Step2/IMG/showcase.jpg b/homework/week-2-project/Step2/IMG/showcase.jpg new file mode 100644 index 0000000..e3a8113 Binary files /dev/null and b/homework/week-2-project/Step2/IMG/showcase.jpg differ diff --git a/homework/week-2-project/Step2/home.html b/homework/week-2-project/Step2/home.html new file mode 100644 index 0000000..30e244c --- /dev/null +++ b/homework/week-2-project/Step2/home.html @@ -0,0 +1,70 @@ + + + + + + + + + + Captain Cook | Welcome + + + +
+
+
+

Captain COOK

+
+ +
+
+ +
+
+

Taste The World With Us!

+

Ut ultrices, enim quis luctus vehicula, dolor felis viverra urna, sit amet ultricies nunc mi vel purus. Nulla facilisi. Nullam convallis fermentum vestibulum. Aliquam fringilla ligula ipsum, in sollicitudin sapien scelerisque tempor. Curabitur tristique blandit ligula suscipit porttitor.

+
+
+ +
+
+

Subscribe To Our Latest Recipes

+
+ + +
+
+
+ +
+
+
+ Mediterranean Cuisine logo +

Mediterranean Cuisine

+

Ut ultrices, enim quis luctus vehicula, dolor felis viverra urna, sit amet ultricies nunc mi vel purus. Nulla facilisi. Nullam convallis fermentum vestibulum.

+
+
+ Asian Cuisine logo +

Asian Cuisine

+

Ut ultrices, enim quis luctus vehicula, dolor felis viverra urna, sit amet ultricies nunc mi vel purus. Nulla facilisi. Nullam convallis fermentum vestibulum.

+
+
+ African Cuisine logo +

African Cuisine

+

Ut ultrices, enim quis luctus vehicula, dolor felis viverra urna, sit amet ultricies nunc mi vel purus. Nulla facilisi. Nullam convallis fermentum vestibulum.

+
+
+
+ + + + diff --git a/homework/week-2-project/Step3/CSS/style.css b/homework/week-2-project/Step3/CSS/style.css new file mode 100644 index 0000000..dda7280 --- /dev/null +++ b/homework/week-2-project/Step3/CSS/style.css @@ -0,0 +1,151 @@ +body { + font-family: cursive, Arial, Helvetica, sans-serif; + font-size:15px; + line-height: 1.5; + padding: 0; + margin: 0; + background-color: #f4f4f4; +} + +/*global*/ +.container { + width:80%; /*responsive*/ + margin:auto; + overflow: hidden; +} + +ul { + margin:0; + padding:0; +} + +.button_1{ + height: 38px; + background:#f70000; + border:0; + padding-right: 20px; + padding-left: 20px; + color:#ffffff; +} + +/*header*/ +header { + background:#35424a; + color:#ffffff; + padding-top:30px; + min-height: 70px; /*responsive*/ + border-bottom: #f70000 3px solid; +} + +header a { + color:#ffffff; + text-decoration: none; /*removes underline*/ + text-transform: uppercase; + font-size: 16px; +} + +header li { + float:left; + display:inline; + padding: 0 20px 0 20px; +} + +header #branding { + float:left; +} + +header #branding h1 { + margin:0; + margin-left:100px; +} + +header nav { + float:right; + margin-top:10px; +} + +header .highlight, header .current a { + color:#f70000; + font-weight:bold; +} + +header a:hover { + color:#cccccc; + font-weight: bold; +} + +/*showcase*/ + +#showcase { + min-height: 600px; /*responsive*/ + background: url('../IMG/showcase.jpg') no-repeat 100% -10px; + +} + +#showcase .container { + float: left; + width: 40%; + text-align: center; + margin-top: 0; + padding-left: 5%; +} + +#showcase h1 { + font-size:50px; +} + +#showcase p { + font-size:20px; +} + +.box img { +width: 200px; +height: 200px; +} + +/*newsletter*/ + +#newsletter { + padding:15px; + color:#ffffff; + background: #35424a ; + } + +#newsletter h1 { + float:left +} + +#newsletter form { + float:right; + margin-top:20px; +} + +#newsletter input[type="email"] { + padding: 4px; + height:25px; + width: 250px; +} + +/*boxes*/ + +#boxes { + margin-top: 30px; +} + +#boxes .box { + float: left; + text-align: center; + width:30%; + padding: 10px; +} + + +footer { + padding: 20px; + margin-top:20px; + color:#ffffff; + background-color:#003000; + text-align: center; + opacity: 0.9; +} + diff --git a/homework/week-2-project/Step3/IMG/africa.png b/homework/week-2-project/Step3/IMG/africa.png new file mode 100644 index 0000000..518cd5b Binary files /dev/null and b/homework/week-2-project/Step3/IMG/africa.png differ diff --git a/homework/week-2-project/Step3/IMG/asian.jpeg b/homework/week-2-project/Step3/IMG/asian.jpeg new file mode 100644 index 0000000..bc54641 Binary files /dev/null and b/homework/week-2-project/Step3/IMG/asian.jpeg differ diff --git a/homework/week-2-project/Step3/IMG/mediterranean.jpeg b/homework/week-2-project/Step3/IMG/mediterranean.jpeg new file mode 100644 index 0000000..cb5c66d Binary files /dev/null and b/homework/week-2-project/Step3/IMG/mediterranean.jpeg differ diff --git a/homework/week-2-project/Step3/IMG/showcase.jpg b/homework/week-2-project/Step3/IMG/showcase.jpg new file mode 100644 index 0000000..e3a8113 Binary files /dev/null and b/homework/week-2-project/Step3/IMG/showcase.jpg differ diff --git a/homework/week-2-project/Step3/home.html b/homework/week-2-project/Step3/home.html new file mode 100644 index 0000000..cd8cdd5 --- /dev/null +++ b/homework/week-2-project/Step3/home.html @@ -0,0 +1,70 @@ + + + + + + + + + + Captain Cook | Welcome + + + +
+
+
+

Captain COOK

+
+ +
+
+ +
+
+

Taste The World With Us!

+

Ut ultrices, enim quis luctus vehicula, dolor felis viverra urna, sit amet ultricies nunc mi vel purus. Nulla facilisi. Nullam convallis fermentum vestibulum. Aliquam fringilla ligula ipsum, in sollicitudin sapien scelerisque tempor. Curabitur tristique blandit ligula suscipit porttitor.

+
+
+ +
+
+

Subscribe To Our Latest Recipes

+
+ + +
+
+
+ +
+
+
+ Mediterranean Cuisine logo +

Mediterranean Cuisine

+

Ut ultrices, enim quis luctus vehicula, dolor felis viverra urna, sit amet ultricies nunc mi vel purus. Nulla facilisi. Nullam convallis fermentum vestibulum.

+
+
+ Asian Cuisine logo +

Asian Cuisine

+

Ut ultrices, enim quis luctus vehicula, dolor felis viverra urna, sit amet ultricies nunc mi vel purus. Nulla facilisi. Nullam convallis fermentum vestibulum.

+
+
+ African Cuisine logo +

African Cuisine

+

Ut ultrices, enim quis luctus vehicula, dolor felis viverra urna, sit amet ultricies nunc mi vel purus. Nulla facilisi. Nullam convallis fermentum vestibulum.

+
+
+
+ + + + diff --git a/homework/week-2-project/Step4/CSS/style.css b/homework/week-2-project/Step4/CSS/style.css new file mode 100644 index 0000000..c8f2fc6 --- /dev/null +++ b/homework/week-2-project/Step4/CSS/style.css @@ -0,0 +1,174 @@ +body { + font-family: cursive, Arial, Helvetica, sans-serif; + font-size:15px; + line-height: 1.5; + padding: 0; + margin: 0; + background-color: #f4f4f4; +} + +/*global*/ +.container { + width:80%; /*responsive*/ + margin:auto; + overflow: hidden; +} + +ul { + margin:0; + padding:0; +} + +.button_1{ + height: 38px; + background:#f70000; + border:0; + padding-right: 20px; + padding-left: 20px; + color:#ffffff; +} + +.dark { + padding: 15px; + background:#35424a; + color:#ffffff; + margin-top:10px; + margin-bottom:10px; +} + +/*header*/ +header { + background:#35424a; + color:#ffffff; + padding-top:30px; + min-height: 70px; /*responsive*/ + border-bottom: #f70000 3px solid; +} + +header a { + color:#ffffff; + text-decoration: none; /*removes underline*/ + text-transform: uppercase; + font-size: 16px; +} + +header li { + float:left; + display:inline; + padding: 0 20px 0 20px; +} + +header #branding { + float:left; +} + +header #branding h1 { + margin:0; + margin-left:100px; +} + +header nav { + float:right; + margin-top:10px; +} + +header .highlight, header .current a { + color:#f70000; + font-weight:bold; +} + +header a:hover { + color:#cccccc; + font-weight: bold; +} + +/*showcase*/ + +#showcase { + min-height: 600px; /*responsive*/ + background: url('../IMG/showcase.jpg') no-repeat 100% -10px; + +} + +#showcase .container { + float: left; + width: 40%; + text-align: center; + margin-top: 0; + padding-left: 5%; +} + +#showcase h1 { + font-size:50px; +} + +#showcase p { + font-size:20px; +} + +.box img { +width: 200px; +height: 200px; +} + +/*newsletter*/ + +#newsletter { + padding:15px; + color:#ffffff; + background: #35424a ; + } + +#newsletter h1 { + float:left +} + +#newsletter form { + float:right; + margin-top:20px; +} + +#newsletter input[type="email"] { + padding: 4px; + height:25px; + width: 250px; +} + +/*boxes*/ + +#boxes { + margin-top: 30px; +} + +#boxes .box { + float: left; + text-align: center; + width:30%; + padding: 10px; +} + + +footer { + padding: 20px; + margin-top:20px; + color:#ffffff; + background-color:#003000; + text-align: center; + opacity: 0.9; +} + +/*article*/ +article#main-col { + float:left; + width:65%; + margin-top:10px; + text-align:justify; +} + +/*sidebar*/ +aside#sidebar { + float: right; + width: 30%; + margin-top: 10px; + text-align:justify; +} diff --git a/homework/week-2-project/Step4/IMG/africa.png b/homework/week-2-project/Step4/IMG/africa.png new file mode 100644 index 0000000..518cd5b Binary files /dev/null and b/homework/week-2-project/Step4/IMG/africa.png differ diff --git a/homework/week-2-project/Step4/IMG/asian.jpeg b/homework/week-2-project/Step4/IMG/asian.jpeg new file mode 100644 index 0000000..bc54641 Binary files /dev/null and b/homework/week-2-project/Step4/IMG/asian.jpeg differ diff --git a/homework/week-2-project/Step4/IMG/mediterranean.jpeg b/homework/week-2-project/Step4/IMG/mediterranean.jpeg new file mode 100644 index 0000000..cb5c66d Binary files /dev/null and b/homework/week-2-project/Step4/IMG/mediterranean.jpeg differ diff --git a/homework/week-2-project/Step4/IMG/showcase.jpg b/homework/week-2-project/Step4/IMG/showcase.jpg new file mode 100644 index 0000000..e3a8113 Binary files /dev/null and b/homework/week-2-project/Step4/IMG/showcase.jpg differ diff --git a/homework/week-2-project/Step4/about.html b/homework/week-2-project/Step4/about.html new file mode 100644 index 0000000..957d6c9 --- /dev/null +++ b/homework/week-2-project/Step4/about.html @@ -0,0 +1,65 @@ + + + + + + + + + + Captain Cook | Welcome + + + +
+
+
+

Captain COOK

+
+ +
+
+ +
+
+

Subscribe To Our Latest Recipes

+
+ + +
+
+
+ +
+
+
+

About Us

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut urna at elit eleifend lacinia. Morbi aliquet lacus tempus ante tristique, vestibulum tempus lectus pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas ultrices dolor sed massa pellentesque consectetur. Duis varius risus justo, sit amet feugiat eros tempus a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vulputate consectetur vehicula. Sed vel massa vel mauris lacinia lobortis. Sed tellus mi, viverra in lacinia vitae, dapibus id elit. Morbi malesuada sem ut massa facilisis gravida. Praesent ac dolor et sapien imperdiet imperdiet. Aenean libero lorem, tincidunt sit amet vehicula in, molestie a erat. Integer condimentum purus sit amet commodo pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. +

+

+ In posuere lacinia iaculis. Sed sed tincidunt odio. Suspendisse eu malesuada neque. In sit amet erat id orci auctor vehicula. Vestibulum eu nulla mi. Nulla elementum lectus a placerat finibus. Nam accumsan vehicula lacus ac ultricies. Nullam dignissim, mi in pulvinar venenatis, urna massa elementum nisi, sed pretium dui nulla non lectus. Nullam vitae maximus massa, eget pulvinar enim. Fusce eleifend nibh a fringilla gravida. +

+
+ +
+
+ + + + diff --git a/homework/week-2-project/Step4/home.html b/homework/week-2-project/Step4/home.html new file mode 100644 index 0000000..1b39627 --- /dev/null +++ b/homework/week-2-project/Step4/home.html @@ -0,0 +1,70 @@ + + + + + + + + + + Captain Cook | Welcome + + + +
+
+
+

Captain COOK

+
+ +
+
+ +
+
+

Taste The World With Us!

+

Ut ultrices, enim quis luctus vehicula, dolor felis viverra urna, sit amet ultricies nunc mi vel purus. Nulla facilisi. Nullam convallis fermentum vestibulum. Aliquam fringilla ligula ipsum, in sollicitudin sapien scelerisque tempor. Curabitur tristique blandit ligula suscipit porttitor.

+
+
+ +
+
+

Subscribe To Our Latest Recipes

+
+ + +
+
+
+ +
+
+
+ Mediterranean Cuisine logo +

Mediterranean Cuisine

+

Ut ultrices, enim quis luctus vehicula, dolor felis viverra urna, sit amet ultricies nunc mi vel purus. Nulla facilisi. Nullam convallis fermentum vestibulum.

+
+
+ Asian Cuisine logo +

Asian Cuisine

+

Ut ultrices, enim quis luctus vehicula, dolor felis viverra urna, sit amet ultricies nunc mi vel purus. Nulla facilisi. Nullam convallis fermentum vestibulum.

+
+
+ African Cuisine logo +

African Cuisine

+

Ut ultrices, enim quis luctus vehicula, dolor felis viverra urna, sit amet ultricies nunc mi vel purus. Nulla facilisi. Nullam convallis fermentum vestibulum.

+
+
+
+ + + + diff --git a/homework/week-2-project/Step5/CSS/style.css b/homework/week-2-project/Step5/CSS/style.css new file mode 100644 index 0000000..c649596 --- /dev/null +++ b/homework/week-2-project/Step5/CSS/style.css @@ -0,0 +1,191 @@ +body { + font-family: cursive, Arial, Helvetica, sans-serif; + font-size:15px; + line-height: 1.5; + padding: 0; + margin: 0; + background-color: #f4f4f4; +} + +/*global*/ + +.container { + width:80%; /*responsive*/ + margin:auto; + overflow: hidden; +} + +ul { + margin:0; + padding:0; +} + +.button_1{ + height: 38px; + background:#f70000; + border:0; + padding-right: 20px; + padding-left: 20px; + color:#ffffff; +} + +.dark { + padding: 15px; + background:#35424a; + color:#ffffff; + margin-top:10px; + margin-bottom:10px; +} + +/*header*/ +header { + background:#35424a; + color:#ffffff; + padding-top:30px; + min-height: 70px; /*responsive*/ + border-bottom: #f70000 3px solid; +} + +header a { + color:#ffffff; + text-decoration: none; /*removes underline*/ + text-transform: uppercase; + font-size: 16px; +} + +header li { + float:left; + display:inline; + padding: 0 20px 0 20px; +} + +header #branding { + float:left; +} + +header #branding h1 { + margin:0; + margin-left:100px; +} + +header nav { + float:right; + margin-top:10px; +} + +header .highlight, header .current a { + color:#f70000; + font-weight:bold; +} + +header a:hover { + color:#cccccc; + font-weight: bold; +} + +/*showcase*/ + +#showcase { + min-height: 600px; /*responsive*/ + background: url('../IMG/showcase.jpg') no-repeat 100% -10px; + +} + +#showcase .container { + float: left; + width: 40%; + text-align: center; + margin-top: 0; + padding-left: 5%; +} + +#showcase h1 { + font-size:49px; +} + +#showcase p { + font-size:20px; +} + +.box img { +width: 200px; +height: 200px; +} + +/*newsletter*/ + +#newsletter { + padding:15px; + color:#ffffff; + background: #35424a ; + } + +#newsletter h1 { + float:left +} + +#newsletter form { + float:right; + margin-top:20px; +} + +#newsletter input[type="email"] { + padding: 4px; + height:25px; + width: 250px; +} + +/*boxes*/ + +#boxes { + margin-top: 30px; +} + +#boxes .box { + float: left; + text-align: center; + width:30%; + padding: 10px; +} + + +footer { + padding: 20px; + margin-top:20px; + color:#ffffff; + background-color:#003000; + text-align: center; + opacity: 0.9; +} + +/*article*/ +article#main-col { + float:left; + width:65%; + margin-top:10px; + text-align:justify; +} + +/*sidebar*/ +aside#sidebar { + float: right; + width: 30%; + margin-top: 10px; + text-align:justify; +} + +aside#sidebar .quote input, aside#sidebar .quote textarea { + width: 90%; + padding: 5px; +} + +/*services*/ + +ul#services li{ +list-style: none; +padding:20px; +border:#cccccc solid 1px; +margin-bottom: 5px; +background: #e6e6e6; +text-align:justify; +} diff --git a/homework/week-2-project/Step5/IMG/africa.png b/homework/week-2-project/Step5/IMG/africa.png new file mode 100644 index 0000000..518cd5b Binary files /dev/null and b/homework/week-2-project/Step5/IMG/africa.png differ diff --git a/homework/week-2-project/Step5/IMG/asian.jpeg b/homework/week-2-project/Step5/IMG/asian.jpeg new file mode 100644 index 0000000..bc54641 Binary files /dev/null and b/homework/week-2-project/Step5/IMG/asian.jpeg differ diff --git a/homework/week-2-project/Step5/IMG/mediterranean.jpeg b/homework/week-2-project/Step5/IMG/mediterranean.jpeg new file mode 100644 index 0000000..cb5c66d Binary files /dev/null and b/homework/week-2-project/Step5/IMG/mediterranean.jpeg differ diff --git a/homework/week-2-project/Step5/IMG/showcase.jpg b/homework/week-2-project/Step5/IMG/showcase.jpg new file mode 100644 index 0000000..e3a8113 Binary files /dev/null and b/homework/week-2-project/Step5/IMG/showcase.jpg differ diff --git a/homework/week-2-project/Step5/about.html b/homework/week-2-project/Step5/about.html new file mode 100644 index 0000000..e9a225b --- /dev/null +++ b/homework/week-2-project/Step5/about.html @@ -0,0 +1,65 @@ + + + + + + + + + + Captain Cook | Welcome + + + +
+
+
+

Captain COOK

+
+ +
+
+ +
+
+

Subscribe To Our Latest Recipes

+
+ + +
+
+
+ +
+
+
+

About Us

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut urna at elit eleifend lacinia. Morbi aliquet lacus tempus ante tristique, vestibulum tempus lectus pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas ultrices dolor sed massa pellentesque consectetur. Duis varius risus justo, sit amet feugiat eros tempus a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vulputate consectetur vehicula. Sed vel massa vel mauris lacinia lobortis. Sed tellus mi, viverra in lacinia vitae, dapibus id elit. Morbi malesuada sem ut massa facilisis gravida. Praesent ac dolor et sapien imperdiet imperdiet. Aenean libero lorem, tincidunt sit amet vehicula in, molestie a erat. Integer condimentum purus sit amet commodo pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. +

+

+ In posuere lacinia iaculis. Sed sed tincidunt odio. Suspendisse eu malesuada neque. In sit amet erat id orci auctor vehicula. Vestibulum eu nulla mi. Nulla elementum lectus a placerat finibus. Nam accumsan vehicula lacus ac ultricies. Nullam dignissim, mi in pulvinar venenatis, urna massa elementum nisi, sed pretium dui nulla non lectus. Nullam vitae maximus massa, eget pulvinar enim. Fusce eleifend nibh a fringilla gravida. +

+
+ +
+
+ + + + diff --git a/homework/week-2-project/Step5/home.html b/homework/week-2-project/Step5/home.html new file mode 100644 index 0000000..ba58eda --- /dev/null +++ b/homework/week-2-project/Step5/home.html @@ -0,0 +1,70 @@ + + + + + + + + + + Captain Cook | Welcome + + + +
+
+
+

Captain COOK

+
+ +
+
+ +
+
+

Taste The World With Us!

+

Ut ultrices, enim quis luctus vehicula, dolor felis viverra urna, sit amet ultricies nunc mi vel purus. Nulla facilisi. Nullam convallis fermentum vestibulum. Aliquam fringilla ligula ipsum, in sollicitudin sapien scelerisque tempor. Curabitur tristique blandit ligula suscipit porttitor.

+
+
+ +
+
+

Subscribe To Our Latest Recipes

+
+ + +
+
+
+ +
+
+
+ Mediterranean Cuisine logo +

Mediterranean Cuisine

+

Ut ultrices, enim quis luctus vehicula, dolor felis viverra urna, sit amet ultricies nunc mi vel purus. Nulla facilisi. Nullam convallis fermentum vestibulum.

+
+
+ Asian Cuisine logo +

Asian Cuisine

+

Ut ultrices, enim quis luctus vehicula, dolor felis viverra urna, sit amet ultricies nunc mi vel purus. Nulla facilisi. Nullam convallis fermentum vestibulum.

+
+
+ African Cuisine logo +

African Cuisine

+

Ut ultrices, enim quis luctus vehicula, dolor felis viverra urna, sit amet ultricies nunc mi vel purus. Nulla facilisi. Nullam convallis fermentum vestibulum.

+
+
+
+ + + + diff --git a/homework/week-2-project/Step5/services.html b/homework/week-2-project/Step5/services.html new file mode 100644 index 0000000..7566340 --- /dev/null +++ b/homework/week-2-project/Step5/services.html @@ -0,0 +1,103 @@ + + + + + + + + + + Captain Cook | Welcome + + + +
+
+
+

Captain COOK

+
+ +
+
+ +
+
+

Subscribe To Our Latest Recipes

+
+ + +
+
+
+ +
+
+
+

Services

+
    +
  • +

    Mediterrenean Cuisine

    +

    Suspendisse a massa vel erat porttitor mollis. In congue egestas libero sit amet varius. Nam diam enim, venenatis vel augue sit amet, ullamcorper iaculis justo. Etiam mollis, erat eget tempus posuere, sapien erat fermentum sapien, id cursus enim nisl a tellus. In a magna est. Etiam quis vulputate nisi. Integer ut dictum erat.

    +

    Pricing:

    +
      +
    • 1 package: 15 Euros
    • +
    • Organization Package (100-200 orders) : 10 Euros per package
    • +
    • Get the quote for more than 200 orders!
    • +
    +
  • +
  • +

    Asian Cuisine

    +

    Suspendisse a massa vel erat porttitor mollis. In congue egestas libero sit amet varius. Nam diam enim, venenatis vel augue sit amet, ullamcorper iaculis justo. Etiam mollis, erat eget tempus posuere, sapien erat fermentum sapien, id cursus enim nisl a tellus. In a magna est. Etiam quis vulputate nisi. Integer ut dictum erat.

    +

    Pricing:

    +
      +
    • 1 package: 12 Euros
    • +
    • Organization Package (100-200 orders) : 8 Euros per package
    • +
    • Get the quote for more than 200 orders!
    • +
    +
  • +
  • +

    African Cuisine

    +

    Suspendisse a massa vel erat porttitor mollis. In congue egestas libero sit amet varius. Nam diam enim, venenatis vel augue sit amet, ullamcorper iaculis justo. Etiam mollis, erat eget tempus posuere, sapien erat fermentum sapien, id cursus enim nisl a tellus. In a magna est. Etiam quis vulputate nisi. Integer ut dictum erat.

    +

    Pricing:

    +
      +
    • 1 package: 10 Euros
    • +
    • Organization Package (100-200 orders) : 7 Euros per package
    • +
    • Get the quote for more than 200 orders!
    • +
    +
  • +
+
+ +
+
+ + + + diff --git a/homework/week-2-project/Step6/CSS/style.css b/homework/week-2-project/Step6/CSS/style.css new file mode 100644 index 0000000..b7eee08 --- /dev/null +++ b/homework/week-2-project/Step6/CSS/style.css @@ -0,0 +1,237 @@ +body { + font-family: cursive, Arial, Helvetica, sans-serif; + font-size:15px; + line-height: 1.5; + padding: 0; + margin: 0; + background-color: #f4f4f4; +} + +/*global*/ + +.container { + width:100%; /*responsive*/ + margin:auto; + overflow: hidden; +} + +ul { + margin:0; + padding:0; +} + +.button_1{ + height: 38px; + background:#f70000; + border:0; + padding-right: 20px; + padding-left: 20px; + color:#ffffff; +} + +.dark { + padding: 15px; + background:#35424a; + color:#ffffff; + margin-top:10px; + margin-bottom:10px; +} + +/*header*/ +header { + background:#35424a; + color:#ffffff; + padding-top:30px; + min-height: 70px; /*responsive*/ + border-bottom: #f70000 3px solid; +} + +header a { + color:#ffffff; + text-decoration: none; /*removes underline*/ + text-transform: uppercase; + font-size: 16px; +} + +header li { + /* float:left; */ + display:inline; + padding: 0 20px 0 20px; +} + +header #branding { + float:left; + text-align: center; + margin:auto; + /* display:inline-block; */ +} + +header #branding h1 { + margin:0; + margin-left:10px; +} + +header nav { + float:right; + /* margin-top:10px; */ + margin:10px auto +} + +header .highlight, header .current a { + color:#f70000; + font-weight:bold; +} + +header a:hover { + color:#cccccc; + font-weight: bold; +} + +/*showcase*/ + +#showcase { + min-height: 600px; /*responsive*/ + background: url('../IMG/showcase.jpg') no-repeat 100% -10px; + background-position: center; + color:white; + text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; +} + +#showcase .container { + /* float: left; */ + width: 40%; + text-align: center; + margin-top: 0; + /* padding-left: 5%; */ +} + +#showcase h1 { + font-size:50px; +} + +#showcase p { + font-size:20px; + +} + +#boxes .box img{ + width:90px; + } + +/*newsletter*/ + +#newsletter { + padding:15px; + color:#ffffff; + background: #35424a ; + } + +#newsletter h1 { + float:left +} + +#newsletter form { + float:right; + margin-top:20px; +} + +#newsletter input[type="email"] { + padding: 4px; + height:25px; + width: 200px; +} + +/*boxes*/ + +#boxes { + margin-top: 30px; +} + +#boxes .box { + float: left; + text-align: center; + width:30%; + padding: 10px; +} + +/*article*/ +article#main-col { + float:left; + width:65%; + margin-top:10px; + text-align: justify; +} + +/*sidebar*/ +aside#sidebar { + float: right; + width: 30%; + margin-top: 10px; + text-align: justify; +} + +aside#sidebar .quote input, aside#sidebar .quote textarea { + width: 90%; + padding: 5px; +} + +/*services*/ + +ul#services li{ +list-style: none; +padding:20px; +border:#cccccc solid 1px; +margin-bottom: 5px; +background: #e6e6e6; +text-align: justify; +} + +footer { + padding: 20px; + margin-top:20px; + color:#ffffff; + background-color:#003000; + text-align: center; + opacity: 0.9; +} + + + +/*media queries-step5*/ + +@media (max-width:768px){ + header #branding, + header nav, + header nav li, + #newsletter h1, + #newsletter form, + #boxes .box, + article#main-col, + aside#sidebar{ + float:none; + text-align: center; + width:100%; + } + + header { + padding-bottom:20px; + } + + #showcase h1{ + margin-top:40px; + /* text-align:center; */ + } + + #newsletter button, .quote button{ + display: block; + width:100%; + } + + #newsletter form input [type="email"], .quote input, .quote textarea + + { + width:100%; + margin-bottom:5px; + } + + } diff --git a/homework/week-2-project/Step6/IMG/africa.png b/homework/week-2-project/Step6/IMG/africa.png new file mode 100644 index 0000000..cb97143 Binary files /dev/null and b/homework/week-2-project/Step6/IMG/africa.png differ diff --git a/homework/week-2-project/Step6/IMG/asian.jpeg b/homework/week-2-project/Step6/IMG/asian.jpeg new file mode 100644 index 0000000..bc54641 Binary files /dev/null and b/homework/week-2-project/Step6/IMG/asian.jpeg differ diff --git a/homework/week-2-project/Step6/IMG/mediterranean.jpeg b/homework/week-2-project/Step6/IMG/mediterranean.jpeg new file mode 100644 index 0000000..cb5c66d Binary files /dev/null and b/homework/week-2-project/Step6/IMG/mediterranean.jpeg differ diff --git a/homework/week-2-project/Step6/IMG/showcase.jpg b/homework/week-2-project/Step6/IMG/showcase.jpg new file mode 100644 index 0000000..e3a8113 Binary files /dev/null and b/homework/week-2-project/Step6/IMG/showcase.jpg differ diff --git a/homework/week-2-project/Step6/about.html b/homework/week-2-project/Step6/about.html new file mode 100644 index 0000000..6feef1e --- /dev/null +++ b/homework/week-2-project/Step6/about.html @@ -0,0 +1,65 @@ + + + + + + + + + + Captain Cook | Welcome + + + +
+
+
+

Captain COOK

+
+ +
+
+ +
+
+

Subscribe To Our Latest Recipes

+
+ + +
+
+
+ +
+
+
+

About Us

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut urna at elit eleifend lacinia. Morbi aliquet lacus tempus ante tristique, vestibulum tempus lectus pulvinar. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas ultrices dolor sed massa pellentesque consectetur. Duis varius risus justo, sit amet feugiat eros tempus a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vulputate consectetur vehicula. Sed vel massa vel mauris lacinia lobortis. Sed tellus mi, viverra in lacinia vitae, dapibus id elit. Morbi malesuada sem ut massa facilisis gravida. Praesent ac dolor et sapien imperdiet imperdiet. Aenean libero lorem, tincidunt sit amet vehicula in, molestie a erat. Integer condimentum purus sit amet commodo pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. +

+

+ In posuere lacinia iaculis. Sed sed tincidunt odio. Suspendisse eu malesuada neque. In sit amet erat id orci auctor vehicula. Vestibulum eu nulla mi. Nulla elementum lectus a placerat finibus. Nam accumsan vehicula lacus ac ultricies. Nullam dignissim, mi in pulvinar venenatis, urna massa elementum nisi, sed pretium dui nulla non lectus. Nullam vitae maximus massa, eget pulvinar enim. Fusce eleifend nibh a fringilla gravida. +

+
+ +
+
+ + + + diff --git a/homework/week-2-project/Step6/home.html b/homework/week-2-project/Step6/home.html new file mode 100644 index 0000000..57b7b20 --- /dev/null +++ b/homework/week-2-project/Step6/home.html @@ -0,0 +1,70 @@ + + + + + + + + + + Captain Cook | Welcome + + + +
+
+
+

Captain COOK

+
+ +
+
+ +
+
+

Taste The World With Us!

+

Ut ultrices, enim quis luctus vehicula, dolor felis viverra urna, sit amet ultricies nunc mi vel purus. Nulla facilisi. Nullam convallis fermentum vestibulum. Aliquam fringilla ligula ipsum, in sollicitudin sapien scelerisque tempor. Curabitur tristique blandit ligula suscipit porttitor.

+
+
+ +
+
+

Subscribe To Our Latest Recipes

+
+ + +
+
+
+ +
+
+
+ Mediterranean Cuisine logo +

Mediterranean Cuisine

+

Ut ultrices, enim quis luctus vehicula, dolor felis viverra urna, sit amet ultricies nunc mi vel purus. Nulla facilisi. Nullam convallis fermentum vestibulum.

+
+
+ Asian Cuisine logo +

Asian Cuisine

+

Ut ultrices, enim quis luctus vehicula, dolor felis viverra urna, sit amet ultricies nunc mi vel purus. Nulla facilisi. Nullam convallis fermentum vestibulum.

+
+
+ African Cuisine logo +

African Cuisine

+

Ut ultrices, enim quis luctus vehicula, dolor felis viverra urna, sit amet ultricies nunc mi vel purus. Nulla facilisi. Nullam convallis fermentum vestibulum.

+
+
+
+ + + + diff --git a/homework/week-2-project/Step6/services.html b/homework/week-2-project/Step6/services.html new file mode 100644 index 0000000..b1a18bc --- /dev/null +++ b/homework/week-2-project/Step6/services.html @@ -0,0 +1,103 @@ + + + + + + + + + + Captain Cook | Welcome + + + +
+
+
+

Captain COOK

+
+ +
+
+ +
+
+

Subscribe To Our Latest Recipes

+
+ + +
+
+
+ +
+
+
+

Services

+
    +
  • +

    Mediterrenean Cuisine

    +

    Suspendisse a massa vel erat porttitor mollis. In congue egestas libero sit amet varius. Nam diam enim, venenatis vel augue sit amet, ullamcorper iaculis justo. Etiam mollis, erat eget tempus posuere, sapien erat fermentum sapien, id cursus enim nisl a tellus. In a magna est. Etiam quis vulputate nisi. Integer ut dictum erat.

    +

    Pricing:

    +
      +
    • 1 package: 15 Euros
    • +
    • Organization Package (100-200 orders) : 10 Euros per package
    • +
    • Get the quote for more than 200 orders!
    • +
    +
  • +
  • +

    Asian Cuisine

    +

    Suspendisse a massa vel erat porttitor mollis. In congue egestas libero sit amet varius. Nam diam enim, venenatis vel augue sit amet, ullamcorper iaculis justo. Etiam mollis, erat eget tempus posuere, sapien erat fermentum sapien, id cursus enim nisl a tellus. In a magna est. Etiam quis vulputate nisi. Integer ut dictum erat.

    +

    Pricing:

    +
      +
    • 1 package: 12 Euros
    • +
    • Organization Package (100-200 orders) : 8 Euros per package
    • +
    • Get the quote for more than 200 orders!
    • +
    +
  • +
  • +

    African Cuisine

    +

    Suspendisse a massa vel erat porttitor mollis. In congue egestas libero sit amet varius. Nam diam enim, venenatis vel augue sit amet, ullamcorper iaculis justo. Etiam mollis, erat eget tempus posuere, sapien erat fermentum sapien, id cursus enim nisl a tellus. In a magna est. Etiam quis vulputate nisi. Integer ut dictum erat.

    +

    Pricing:

    +
      +
    • 1 package: 10 Euros
    • +
    • Organization Package (100-200 orders) : 7 Euros per package
    • +
    • Get the quote for more than 200 orders!
    • +
    +
  • +
+
+ +
+
+ + + + diff --git a/homework/week-2-project/index.html b/homework/week-2-project/index.html index 879ec9b..d3d54fa 100644 --- a/homework/week-2-project/index.html +++ b/homework/week-2-project/index.html @@ -9,7 +9,7 @@ -

Traversy Media: Build An HTML5 Website With A Responsive Layout

+

Captain COOK: Build An HTML5 Website With A Responsive Layout

@@ -18,7 +18,7 @@

Traversy Media: Build An HTML5 Website With A Responsive Layout

- + @@ -27,13 +27,61 @@

Traversy Media: Build An HTML5 Website With A Responsive Layout

- - + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
a user can ...Steps index.html about.html services.html
... open a website empty HTML template, requiring CSS file, title tagStep-1 Create an empty HTML template, requiring CSS file, title tag (doesn't exist yet!) (doesn't exist yet!)empty CSS filecreate an empty CSS file
Step-2 Write HTML File (header, showcase, newsletter, form, boxes and footer)(doesn't exist yet!)(doesn't exist yet!)Not CSS styling yet!
Step-3HTML File (header, showcase, newsletter, form, boxes and footer)(doesn't exist yet!)(doesn't exist yet!)Style the HTML5 file with CSS3!
Step-4HTML File (header, showcase, newsletter, form, boxes and footer)Write About.html file and link to Index.html!(doesn't exist yet!)Style the About.html file!
Step-5HTML File (header, showcase, newsletter, form, boxes and footer)About.htmlWrite Services.html file and link to Index.html!Style the Services.html file!
Step-6HTML File (header, showcase, newsletter, form, boxes and footer)About.htmlServices.htmlMake all the pages responsive
diff --git a/homework/week-3-project/CSS/style.css b/homework/week-3-project/CSS/style.css new file mode 100644 index 0000000..e366f6f --- /dev/null +++ b/homework/week-3-project/CSS/style.css @@ -0,0 +1,493 @@ +body { + background-color: #f7f7f7; + font-family: "Montserrat", "sans-serif"; + color: #9a9a9a; + height: auto; + +} + +/* Header */ + +.nav { + display: block; + margin: 22px auto auto 16px; + margin-top: 22px; + height: 44px; + right: 7px; + position: absolute; + bottom: 0; + top: 0; + /* z-index: 199; */ + } + +ul { + list-style-type: none; + align-items: center; + justify-content: end; + margin: 20px; +} + +li { + float: right; + margin-left: 20px; + font-size: 100%; + } +#privacy:hover, #privacy:focus { + + color: #6d6d6d; +} +#privacy { + + cursor: pointer; + font-size: 12px; + margin:3px 0 0 20px; +} +#menu { + background-image: url("../IMG/Menu.png"); + background-repeat: no-repeat; + background-size: 40px; + margin-top: -10px; + width: 40px; + height: 40px; + background-color: aqua; +} +#menu:hover { + background-image: url("../IMG/Menu_hover.png"); + border-radius: 3px; +} +#twitter { + background-image: url("../IMG/Tweeter.png"); + background-repeat: no-repeat; + background-size: 40px; + margin-top: -10px; + width: 40px; + height: 40px; + background-color: aqua; +} +#twitter:hover { + background-image: url("../IMG/Tweeter_hover.png"); + border-radius: 3px; +} + + +/* homepage */ + +/* searchbar */ + +.logo { + margin-top: 10%; + /* background-color: #6d6d6d; */ + display: flex; + justify-content: space-around; + } + +.search_input { + display: flex; + /* background-color: aqua; */ + justify-content: center; + flex-direction: row; + position: relative; + margin-top: 20px; +} +#input_box { + width: 600px; + height: 40px; + /* border-style: none; */ + border-width: 1px; + border-color: #f7f7f7; +} +#search_icon { + background-image:url("../IMG/Search_icon.png"); + background-position: center center; + background-repeat: no-repeat; + background-size: 100%; + height: 46px; + width: 45px; + +} + +#search_icon:hover { + background-image: url("../IMG/Search_hover.png"); + height: 46px; + width: 45px; +} + +.homepage_text { + /* background-color: royalblue; */ + text-align: center; + +} + +/* Homepage Footer Logo */ + +.footer_logo { + display: flex; + margin-top: 70px; + justify-content: space-around; + /* background-color: aqua; */ +} + +#image_footer { + height: 84px; + width: 100px; + opacity: 0.85; + transition: opacity .25s ease; + } + +#image_footer:hover { +opacity:1; +} + +#arrow { + height: 28px; + width: 28px; + top: 83%; + left: 50%; + margin:-10px; + position: absolute; + background-color: black; + border-radius: 100%; +} + +/* Second Page */ + +.secondpage { + height: 50%; + width: 100%; + border: 1px solid steelblue; + margin: 0 auto; + background-color: #58b792; + text-align: center; + position: relative; + font: inherit; + font-size: 14px; + font-weight: 400; + vertical-align: baseline; + margin-top: 10%; +} + +.secondpage h1 { + + width: 50%; + display: block; + margin: 25px auto; + margin-top: 100px; + /* border: 1px solid red; */ + height: 100px; + font-size: 40px; + line-height: 50px; + text-align: center; + font-weight: 700; + color: #fff; + text-shadow: 0 1px 4px rgba(0,0,0,0.1); + +} +.secondpage p { + width: 50%; + height: 70px; + /* border: 1px solid darkmagenta; */ + margin: 10px auto; + text-align: center; + font-size: 22px; + line-height: 30px; + padding-top: .25em; + padding-bottom: .25em; + color: rgb(255, 255, 255); + text-shadow: 0 1px 4px rgba(0,0,0,0.25); +} + +#secondpage_area{ + width: 20%; + margin: 5px auto 0; + color:#fff; + background: rgba(0,0,0,0.4) !important; + font-size: 18px; + display: inline-block; + border-radius: 4px; + text-align: center; + position: relative; + text-shadow: 0 1px 1px rgba(255,255,255,0.1); + cursor: pointer; + white-space: nowrap; + padding: 12px 16px; + font-weight: 600; + box-sizing: content-box; + transition: all 0.5s ease-in-out; +} +#secondpage-area:hover{ + background: rgba(0,0,0,0.6) !important; +} +#secondpage_image img { + position: relative; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; + height: 100%; + width: 50%; +} + +/* Third Page */ + +.thirdpage { + height: 50%; + width: 100%; + border: 1px solid steelblue; + margin: 0 auto; + background-color: #f5a339; + text-align: center; + position: relative; + font: inherit; + font-size: 14px; + font-weight: 400; + vertical-align: baseline; + /* margin-top: 10%; */ +} + +.thirdpage h1 { + + width: 50%; + display: block; + margin: 25px auto; + margin-top: 100px; + /* border: 1px solid red; */ + height: 100px; + font-size: 40px; + line-height: 50px; + text-align: center; + font-weight: 700; + color: #fff; + text-shadow: 0 1px 4px rgba(0,0,0,0.1); + +} +.thirdpage p { + width: 50%; + height: 70px; + /* border: 1px solid darkmagenta; */ + margin: 10px auto; + text-align: center; + font-size: 22px; + line-height: 30px; + padding-top: .25em; + padding-bottom: .25em; + color: rgb(255, 255, 255); + text-shadow: 0 1px 4px rgba(0,0,0,0.25); +} + +#thirdpage_area{ + width: 20%; + margin: 5px auto 0; + color:#fff; + background: rgba(0,0,0,0.4) !important; + font-size: 18px; + display: inline-block; + border-radius: 4px; + text-align: center; + position: relative; + text-shadow: 0 1px 1px rgba(255,255,255,0.1); + cursor: pointer; + white-space: nowrap; + padding: 12px 16px; + font-weight: 600; + box-sizing: content-box; + transition: all 0.5s ease-in-out; +} +#thirdpage-area:hover{ + background: rgba(0,0,0,0.6) !important; +} +#thirdpage_image img { + position: relative; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; + height: 100%; + width: 50%; +} + +/* Fourth Page */ + +.fourthpage { + height: 50%; + width: 100%; + border: 1px solid steelblue; + margin: 0 auto; + background-color: #5f63bd; + text-align: center; + position: relative; + font: inherit; + font-size: 14px; + font-weight: 400; + vertical-align: baseline; + /* margin-top: 10%; */ +} + +.fourthpage h1 { + + width: 50%; + display: block; + margin: 25px auto; + margin-top: 100px; + /* border: 1px solid red; */ + height: 100px; + font-size: 40px; + line-height: 50px; + text-align: center; + font-weight: 700; + color: #fff; + text-shadow: 0 1px 4px rgba(0,0,0,0.1); + +} +.fourthpage p { + width: 50%; + height: 70px; + /* border: 1px solid darkmagenta; */ + margin: 10px auto; + text-align: center; + font-size: 22px; + line-height: 30px; + padding-top: .25em; + padding-bottom: .25em; + color: rgb(255, 255, 255); + text-shadow: 0 1px 4px rgba(0,0,0,0.25); +} + +#fourthpage_area{ + width: 20%; + margin: 5px auto 0; + color:#fff; + background: rgba(0,0,0,0.4) !important; + font-size: 18px; + display: inline-block; + border-radius: 4px; + text-align: center; + position: relative; + text-shadow: 0 1px 1px rgba(255,255,255,0.1); + cursor: pointer; + white-space: nowrap; + padding: 12px 16px; + font-weight: 600; + box-sizing: content-box; + transition: all 0.5s ease-in-out; +} +#fourthpage-area:hover{ + background: rgba(0,0,0,0.6) !important; +} +#fourthpage_image img { + position: relative; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; + height: 100%; + width: 50%; +} + +/* Fifth Page */ + +.fifthpage { + height: 60%; + width: 100%; + border: 1px solid steelblue; + margin: 0 auto; + background-color: #87cef5; + text-align: center; + position: relative; + font: inherit; + font-size: 14px; + font-weight: 400; + vertical-align: baseline; + /* margin-top: 10%; */ +} + +.fifthpage h1 { + + width: 50%; + display: block; + margin: 25px auto; + margin-top: 100px; + /* border: 1px solid red; */ + height: 100px; + font-size: 40px; + line-height: 50px; + text-align: center; + font-weight: 700; + color: #365374; + text-shadow: 0 1px 4px rgba(0,0,0,0.1); + +} +.fifthpage p { + width: 50%; + height: 70px; + /* border: 1px solid darkmagenta; */ + margin: 10px auto; + text-align: center; + font-size: 22px; + line-height: 30px; + padding-top: .25em; + padding-bottom: .25em; + color:#365374; + text-shadow: 0 1px 4px rgba(0,0,0,0.25); +} + +#fifthpage_area{ + width: 20%; + margin: 5px auto 0; + color:#fff; + background: rgba(0,0,0,0.4) !important; + font-size: 18px; + display: inline-block; + border-radius: 4px; + text-align: center; + position: relative; + text-shadow: 0 1px 1px rgba(255,255,255,0.1); + cursor: pointer; + white-space: nowrap; + padding: 12px 16px; + font-weight: 600; + box-sizing: content-box; + transition: all 0.5s ease-in-out; +} +#fifthpage-area:hover{ + background: rgba(0,0,0,0.6) !important; +} +#fifthpage_image img { + position: relative; + bottom: 0; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; + height: 100%; + width: 50%; +} + +.nav_page5 { + display: contents; + margin: 22px auto auto 16px; + margin-top: 22px; + height: 44px; + right: 7px; + bottom: 0; + top: 0; + } + + #page5list1 { + font-weight: 700; + color: #365374; + } + + #page5list2 { + color:#365374 +} \ No newline at end of file diff --git a/homework/week-3-project/IMG/DuckDuckGoLogo.png b/homework/week-3-project/IMG/DuckDuckGoLogo.png new file mode 100644 index 0000000..6505b21 Binary files /dev/null and b/homework/week-3-project/IMG/DuckDuckGoLogo.png differ diff --git a/homework/week-3-project/IMG/DuckLogo.png b/homework/week-3-project/IMG/DuckLogo.png new file mode 100644 index 0000000..d6dbd55 Binary files /dev/null and b/homework/week-3-project/IMG/DuckLogo.png differ diff --git a/homework/week-3-project/IMG/Menu.png b/homework/week-3-project/IMG/Menu.png new file mode 100644 index 0000000..bc39fc2 Binary files /dev/null and b/homework/week-3-project/IMG/Menu.png differ diff --git a/homework/week-3-project/IMG/Menu_hover.png b/homework/week-3-project/IMG/Menu_hover.png new file mode 100644 index 0000000..a0d9b10 Binary files /dev/null and b/homework/week-3-project/IMG/Menu_hover.png differ diff --git a/homework/week-3-project/IMG/Search_hover.png b/homework/week-3-project/IMG/Search_hover.png new file mode 100644 index 0000000..271eb27 Binary files /dev/null and b/homework/week-3-project/IMG/Search_hover.png differ diff --git a/homework/week-3-project/IMG/Search_icon.png b/homework/week-3-project/IMG/Search_icon.png new file mode 100644 index 0000000..b2a8f9a Binary files /dev/null and b/homework/week-3-project/IMG/Search_icon.png differ diff --git a/homework/week-3-project/IMG/Tweeter.png b/homework/week-3-project/IMG/Tweeter.png new file mode 100644 index 0000000..36b22e6 Binary files /dev/null and b/homework/week-3-project/IMG/Tweeter.png differ diff --git a/homework/week-3-project/IMG/Tweeter_hover.png b/homework/week-3-project/IMG/Tweeter_hover.png new file mode 100644 index 0000000..e31bcaf Binary files /dev/null and b/homework/week-3-project/IMG/Tweeter_hover.png differ diff --git a/homework/week-3-project/IMG/arrow.svg b/homework/week-3-project/IMG/arrow.svg new file mode 100644 index 0000000..3dee7ad --- /dev/null +++ b/homework/week-3-project/IMG/arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/homework/week-3-project/IMG/homepage_footer_logo.png b/homework/week-3-project/IMG/homepage_footer_logo.png new file mode 100644 index 0000000..424c2c6 Binary files /dev/null and b/homework/week-3-project/IMG/homepage_footer_logo.png differ diff --git a/homework/week-3-project/IMG/twitter-color.svg b/homework/week-3-project/IMG/twitter-color.svg new file mode 100644 index 0000000..0d3aa73 --- /dev/null +++ b/homework/week-3-project/IMG/twitter-color.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/homework/week-3-project/home.html b/homework/week-3-project/home.html new file mode 100644 index 0000000..5c29242 --- /dev/null +++ b/homework/week-3-project/home.html @@ -0,0 +1,123 @@ + + + + + + + DuckDuckGo + + + +
+
+ +
+
+ + + +
+
+ +
+
+ +
+ +
+ +
+
+

The search engine that doesn't track you. + + Help Spread DuckDuckGo! + +

+
+ + + +
+
+

We don’t store your
personal information. Ever.

+

Our privacy policy is simple: we don’t collect
+ or share any of your personal information.

+ + +
Add DuckDuckGo to Chrome
+
+
+ +
+
+
+ +
+
+

We don’t follow you
around with ads.

+

We don’t store your search history. We therefore have nothing
+ to sell to advertisers that track you across the Internet.

+ + +
Add DuckDuckGo to Chrome
+
+
+ + +
+
+
+ +
+
+

We don’t track you in or out
of private browsing mode.

+

Other search engines track your searches even when you’re
+ in private browsing mode. We don’t track you — period.

+ + +
Add DuckDuckGo to Chrome
+
+
+ + +
+
+
+ +
+ +
+ +
+
+ +