diff --git a/README.md b/README.md index 3a2d9de..1959587 100644 --- a/README.md +++ b/README.md @@ -1,84 +1,113 @@ -

HackYourFuture Belgium

- -
- - - -
- -# 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 +## HTML-CSS-GitHub - Elif Sancak + +## Week 3 Project + + + + + + + + + + +DuckDuckGo Website and Branches
+## HTML-CSS-GitHub - Elif Sancak + +## Week 2 Project + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
a user can ...index.htmlabout.htmlservices.htmlCSS
(0-blank-page) empty HTML template, requiring CSS file, title tag(doesn't exist yet!)(doesn't exist yet!)empty CSS file
1-HTML(title) HTML adding
(title, link and meta tag)		(doesn't exist yet!)(doesn't exist yet!)css page created(body css added)
(2-HEADER)HTML adding
(HEADER (div, h, span tag))		(doesn't exist yet!)(doesn't exist yet!)css adding (header id/class)
(3-NAV)HTML adding
(NAV (div, list, tag))		about page createdservices page createdcss adding (header a/ul/li/nav/a:hover)
(4-SECTION)HTML adding (SECTION (div, h, p, form, img tag))empty about pageempty services pagecss adding (class,id,h,href,form,p,input)
(5-FOOTER)HTML adding
(FOOTER (p tag))		empty about pageempty services pagecss adding (footer style changed)
(6-ARTICLE)HTML(home)pageAbout page adding (ARTICLE)(id,class,p,h)tag)Services page adding (ARTICLE)(id,class,p,h)tag)css adding (article style changed)
(7-ASIDE)(about.html)
+ (7-ASIDE)(services.html)		HTML(home)pageAbout page adding (ASIDE)(id,class,p,h)tag)Services page adding (ASIDE)(id,class,p,h,ul,form,button)tag)css adding (aside style changed)+(@media css code)
+ +## HTML-CSS-GitHub - Elif Sancak + +## Week 1 Project + + + + + + + + + + + + + + + + +
0-blank-page-setup
1-head-and-header
2-rules-of-the-game
3-unplayable-board
4-playable-board
5-up-to-you
+ + + + + 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..da96c2f 100644 --- a/homework/week-1-project/0-blank-page-setup/index.html +++ b/homework/week-1-project/0-blank-page-setup/index.html @@ -5,7 +5,7 @@ - + diff --git a/homework/week-1-project/0-blank-page-setup/style.css b/homework/week-1-project/0-blank-page-setup/style.css index e69de29..4fe1d10 100644 --- a/homework/week-1-project/0-blank-page-setup/style.css +++ b/homework/week-1-project/0-blank-page-setup/style.css @@ -0,0 +1,3 @@ +body { + background-color: white; +} \ 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..5352b41 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,17 @@ + + + + + + + + TICTACTOE + + + +
+

Tic Tac Toe

+
+ + + \ 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..8e92613 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,6 @@ +body { + background-color: white; +} +h1 { + text-align: center; +} 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..6379b3e 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,33 @@ + + + + + + + + TICTACTOE + + + +
+

Tic Tac Toe

+
+ +
+ + Rules For TICTACTOE + + +
+ + \ 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..8e92613 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,6 @@ +body { + background-color: white; +} +h1 { + text-align: center; +} diff --git a/homework/week-1-project/3-unplayable-board/index.html b/homework/week-1-project/3-unplayable-board/index.html index e69de29..e9d7859 100644 --- a/homework/week-1-project/3-unplayable-board/index.html +++ b/homework/week-1-project/3-unplayable-board/index.html @@ -0,0 +1,113 @@ + + + + + + + + TICTACTOE + + + +
+

Tic Tac Toe

+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
+ + Rules For TICTACTOE + + +
+ + \ 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..c18d8e4 100644 --- a/homework/week-1-project/3-unplayable-board/style.css +++ b/homework/week-1-project/3-unplayable-board/style.css @@ -0,0 +1,35 @@ +body { + background-color: white; +} +h1 { + text-align: center; +} +.form__item { + + display: grid; + grid-gap: 1rem; + grid-template-columns: 1fr; + width: 100px; + height: 100px; + } +.form__input { + text-align: left; + font-size: 20px; + color: red; + border: 1px solid gray; + padding: 0.5rem; + } +#board { + border: 2px solid black; + margin-bottom: 30px; + } +table { + border-collapse: collapse; + + } +td { + border: 2px solid black; + width: 100px; + height: 100px; +} + \ 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..fda9e80 100644 --- a/homework/week-1-project/4-playable-board/index.html +++ b/homework/week-1-project/4-playable-board/index.html @@ -0,0 +1,122 @@ + + + + + + + + TICTACTOE + + + +
+

Tic Tac Toe

+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
+ + Rules For TICTACTOE + + +
+ + +
+

You can either choose to play X or O

+
+ X Player + O Player +
+
+ + \ 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..37c3d1f 100644 --- a/homework/week-1-project/4-playable-board/style.css +++ b/homework/week-1-project/4-playable-board/style.css @@ -0,0 +1,39 @@ +body { + background-color: white; +} +h1 { + text-align: center; +} + +.class1{ + color: black; + + } +.form__item { + + display: grid; + grid-gap: 1rem; + grid-template-columns: 1fr; + width: 100px; + height: 100px; + } +.form__input { + text-align: left; + font-size: 20px; + color: red; + border: 1px solid gray; + padding: 0.5rem; + } +#board { + border: 2px solid black; + margin-bottom: 30px; + } +table { + border-collapse: collapse; + + } +td { + border: 2px solid black; + width: 100px; + height: 100px; + } 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..fda9e80 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,122 @@ + + + + + + + + TICTACTOE + + + +
+

Tic Tac Toe

+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
+ + Rules For TICTACTOE + + +
+ + +
+

You can either choose to play X or O

+
+ X Player + O Player +
+
+ + \ 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..37c3d1f 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,39 @@ +body { + background-color: white; +} +h1 { + text-align: center; +} + +.class1{ + color: black; + + } +.form__item { + + display: grid; + grid-gap: 1rem; + grid-template-columns: 1fr; + width: 100px; + height: 100px; + } +.form__input { + text-align: left; + font-size: 20px; + color: red; + border: 1px solid gray; + padding: 0.5rem; + } +#board { + border: 2px solid black; + margin-bottom: 30px; + } +table { + border-collapse: collapse; + + } +td { + border: 2px solid black; + width: 100px; + height: 100px; + } diff --git a/homework/week-2-project/0-blank-page-setup/index.html b/homework/week-2-project/0-blank-page-setup/index.html index 7ab86ff..097ee77 100644 --- a/homework/week-2-project/0-blank-page-setup/index.html +++ b/homework/week-2-project/0-blank-page-setup/index.html @@ -5,7 +5,7 @@ - + diff --git a/homework/week-2-project/1-HTML(title)/index.html b/homework/week-2-project/1-HTML(title)/index.html new file mode 100644 index 0000000..5570770 --- /dev/null +++ b/homework/week-2-project/1-HTML(title)/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + + Elif's Web Design Page / Welcome + + + + + + + \ No newline at end of file diff --git a/homework/week-2-project/1-HTML(title)/style.css b/homework/week-2-project/1-HTML(title)/style.css new file mode 100644 index 0000000..d95c07c --- /dev/null +++ b/homework/week-2-project/1-HTML(title)/style.css @@ -0,0 +1,8 @@ +body { + font-family: Arial, Helvetica, sans-serif; + font-size: 15px; + line-height: 1.5; + padding: 0; + margin: 0; + background-color: #e0c5c5; +} \ No newline at end of file diff --git a/homework/week-2-project/2-HEADER/index.html b/homework/week-2-project/2-HEADER/index.html new file mode 100644 index 0000000..2d53776 --- /dev/null +++ b/homework/week-2-project/2-HEADER/index.html @@ -0,0 +1,28 @@ + + + + + + + + + + + + + Elif's Web Design Page / Welcome + + + +
+
+
+

Elif's Web Design Page

+
+ + +
+
+ + + \ No newline at end of file diff --git a/homework/week-2-project/2-HEADER/style.css b/homework/week-2-project/2-HEADER/style.css new file mode 100644 index 0000000..715a1a4 --- /dev/null +++ b/homework/week-2-project/2-HEADER/style.css @@ -0,0 +1,32 @@ +body { + font-family: Arial, Helvetica, sans-serif; + font-size: 15px; + line-height: 1.5; + padding: 0; + margin: 0; + background-color: #e0c5c5; +} +.container { + width:80%; + margin: auto; + overflow: hidden; +} +header { + background: #1b1818; + color: #ffffff; + padding-top: 30px; + min-height: 70px; + border-bottom: #e44a4a 3px solid; +} + +header #branding { + float: left; +} +header #branding h1 { + margin: 0; +} + +header .highlight, header .current { + color: #e44a4a; + font-weight: bold; +} \ No newline at end of file diff --git a/homework/week-2-project/3-NAV/about.html b/homework/week-2-project/3-NAV/about.html new file mode 100644 index 0000000..e1308cc --- /dev/null +++ b/homework/week-2-project/3-NAV/about.html @@ -0,0 +1,40 @@ + + + + + + + + + + + + + Elif's Web Design Page / About + + + +
+
+
+

Elif's Web Design Page

+
+ +
+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/homework/week-2-project/3-NAV/index.html b/homework/week-2-project/3-NAV/index.html new file mode 100644 index 0000000..de6426d --- /dev/null +++ b/homework/week-2-project/3-NAV/index.html @@ -0,0 +1,35 @@ + + + + + + + + + + + + + Elif's Web Design Page / Welcome + + + +
+
+
+

Elif's Web Design Page

+
+ +
+
+ + + + + \ No newline at end of file diff --git a/homework/week-2-project/3-NAV/services.html b/homework/week-2-project/3-NAV/services.html new file mode 100644 index 0000000..ae43f48 --- /dev/null +++ b/homework/week-2-project/3-NAV/services.html @@ -0,0 +1,40 @@ + + + + + + + + + + + + + Elif's Web Design Page / Services + + + +
+
+
+

Elif's Web Design Page

+
+ +
+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/homework/week-2-project/3-NAV/style.css b/homework/week-2-project/3-NAV/style.css new file mode 100644 index 0000000..73a4066 --- /dev/null +++ b/homework/week-2-project/3-NAV/style.css @@ -0,0 +1,55 @@ +body { + font-family: Arial, Helvetica, sans-serif; + font-size: 15px; + line-height: 1.5; + padding: 0; + margin: 0; + background-color: #e0c5c5; +} +.container { + width:80%; + margin: auto; + overflow: hidden; +} +header { + background: #1b1818; + color: #ffffff; + padding-top: 30px; + min-height: 70px; + border-bottom: #e44a4a 3px solid; +} + +header #branding { + float: left; +} +header #branding h1 { + margin: 0; +} + +header .highlight, header .current { + color: #e44a4a; + font-weight: bold; +} +header nav { + float: right; + margin-top: 10px; +} +header a{ + color: #ffffff; + font-size: 16px; + text-decoration: none; + text-transform: uppercase; +} +ul{ + margin: 0; + padding: 0; +} +header li { + float: left; + display: inline; + padding: 0 20px 0 20px; +} +header a:hover { + color:#e71f1f; + font-weight: bold; +} \ No newline at end of file diff --git a/homework/week-2-project/4-SECTION/about.html b/homework/week-2-project/4-SECTION/about.html new file mode 100644 index 0000000..e1308cc --- /dev/null +++ b/homework/week-2-project/4-SECTION/about.html @@ -0,0 +1,40 @@ + + + + + + + + + + + + + Elif's Web Design Page / About + + + +
+
+
+

Elif's Web Design Page

+
+ +
+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/homework/week-2-project/4-SECTION/index.html b/homework/week-2-project/4-SECTION/index.html new file mode 100644 index 0000000..324453f --- /dev/null +++ b/homework/week-2-project/4-SECTION/index.html @@ -0,0 +1,85 @@ + + + + + + + + + + + + + Elif's Web Design Page / Welcome + + + +
+
+
+

Elif's Web Design Page

+
+ +
+
+ +
+
+
+

Elif's Web Design Adventure

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Donec nec odio in libero volutpat blandit a a velit. + Maecenas efficitur, neque a convallis consectetur

+
+
+
+
+
+
+

Subscribe to my E-mail

+
+ + +
+
+
+
+
+
+
+ +

History of Elif

+

I was born on October 3, 1990 in Bursa. + I was always a working and good student during my school life. + I studied computer and instructional technologies at bahcesehir university in istanbul. + then I got a masters degree in information technology. + I also worked for 2 years.

+
+
+ +

Now of Elif

+

I came to Belgium with my family 1,5 years ago. + I live in Sint-Katelijne-Waver. + I go to the nederlands course and the integration course. + I also started hyf course. + In my other free time I do homework and spend time with my daughter.

+
+
+ +

Future of Elif

+

I want a peaceful life with my family. + I want to find a job in the computer field. + I want to improve myself in my language and software sector.

+
+
+
+ + + + \ No newline at end of file diff --git a/homework/week-2-project/4-SECTION/services.html b/homework/week-2-project/4-SECTION/services.html new file mode 100644 index 0000000..ae43f48 --- /dev/null +++ b/homework/week-2-project/4-SECTION/services.html @@ -0,0 +1,40 @@ + + + + + + + + + + + + + Elif's Web Design Page / Services + + + +
+
+
+

Elif's Web Design Page

+
+ +
+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/homework/week-2-project/4-SECTION/style.css b/homework/week-2-project/4-SECTION/style.css new file mode 100644 index 0000000..0cbd21d --- /dev/null +++ b/homework/week-2-project/4-SECTION/style.css @@ -0,0 +1,109 @@ +body { + font-family: Arial, Helvetica, sans-serif; + font-size: 15px; + line-height: 1.5; + padding: 0; + margin: 0; + background-color: #e0c5c5; +} +.container { + width:80%; + margin: auto; + overflow: hidden; +} +header { + background: #1b1818; + color: #ffffff; + padding-top: 30px; + min-height: 70px; + border-bottom: #e44a4a 3px solid; +} +header a{ + color: #ffffff; + font-size: 16px; + text-decoration: none; + text-transform: uppercase; +} +ul{ + margin: 0; + padding: 0; +} + +.emailbutton { + height: 38px; + background: #e71f1f; + border: 0; + padding-left: 20px; + padding-right: 20px; + color: #ffffff; + font-weight: bold; +} +header li { + float: left; + display: inline; + padding: 0 20px 0 20px; +} +header #branding { + float: left; +} +header #branding h1 { + margin: 0; +} +header nav { + float: right; + margin-top: 10px; +} +header .highlight, header .current { + color: #e44a4a; + font-weight: bold; +} +header a:hover{ + color:#e71f1f; + font-weight: bold; +} +#showcase { + min-height: 350px; + background: #a71010; + text-align: center; + color:#ffffff; +} +#showcase h1 { + margin-top: 100px; + font-size: 55px; + margin-bottom: 10px; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} +#showcase p{ + font-size: 20px; +} +#newsletter{ + padding: 10px; + color: #ffffff; + background: #272525; + border-bottom: 3px solid #e44a4a; + border-top: 1px solid #e44a4a; +} +#newsletter h1{ + float: left; +} +#newsletter form{ + float: right; + margin-top: 15px; +} +#newsletter input[type="email"]{ + padding: 4px; + height: 25px; + width: 250px; +} +#boxes { + margin-top: 20px; +} +#boxes .box{ + float: left; + width: 30%; + padding: 10px; + text-align: center; +} +#boxes .box img{ + width: 90px; +} \ No newline at end of file diff --git a/homework/week-2-project/5-FOOTER/about.html b/homework/week-2-project/5-FOOTER/about.html new file mode 100644 index 0000000..57ede15 --- /dev/null +++ b/homework/week-2-project/5-FOOTER/about.html @@ -0,0 +1,39 @@ + + + + + + + + + + + + + Elif's Web Design Page / About + + + +
+
+
+

Elif's Web Design Page

+
+ +
+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/homework/week-2-project/5-FOOTER/index.html b/homework/week-2-project/5-FOOTER/index.html new file mode 100644 index 0000000..7ef3aba --- /dev/null +++ b/homework/week-2-project/5-FOOTER/index.html @@ -0,0 +1,87 @@ + + + + + + + + + + + + + Elif's Web Design Page / Welcome + + + +
+
+
+

Elif's Web Design Page

+
+ +
+
+ +
+
+
+

Elif's Web Design Adventure

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Donec nec odio in libero volutpat blandit a a velit. + Maecenas efficitur, neque a convallis consectetur

+
+
+
+
+
+
+

Subscribe to my E-mail

+
+ + +
+
+
+
+
+
+
+ +

History of Elif

+

I was born on October 3, 1990 in Bursa. + I was always a working and good student during my school life. + I studied computer and instructional technologies at bahcesehir university in istanbul. + then I got a masters degree in information technology. + I also worked for 2 years.

+
+
+ +

Now of Elif

+

I came to Belgium with my family 1,5 years ago. + I live in Sint-Katelijne-Waver. + I go to the nederlands course and the integration course. + I also started hyf course. + In my other free time I do homework and spend time with my daughter.

+
+
+ +

Future of Elif

+

I want a peaceful life with my family. + I want to find a job in the computer field. + I want to improve myself in my language and software sector.

+
+
+
+ + + + \ No newline at end of file diff --git a/homework/week-2-project/5-FOOTER/services.html b/homework/week-2-project/5-FOOTER/services.html new file mode 100644 index 0000000..a579537 --- /dev/null +++ b/homework/week-2-project/5-FOOTER/services.html @@ -0,0 +1,39 @@ + + + + + + + + + + + + + Elif's Web Design Page / Services + + + +
+
+
+

Elif's Web Design Page

+
+ +
+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/homework/week-2-project/5-FOOTER/style.css b/homework/week-2-project/5-FOOTER/style.css new file mode 100644 index 0000000..a20b728 --- /dev/null +++ b/homework/week-2-project/5-FOOTER/style.css @@ -0,0 +1,118 @@ +body { + font-family: Arial, Helvetica, sans-serif; + font-size: 15px; + line-height: 1.5; + padding: 0; + margin: 0; + background-color: #e0c5c5; +} +.container { + width:80%; + margin: auto; + overflow: hidden; +} +header { + background: #1b1818; + color: #ffffff; + padding-top: 30px; + min-height: 70px; + border-bottom: #e44a4a 3px solid; +} +header a{ + color: #ffffff; + font-size: 16px; + text-decoration: none; + text-transform: uppercase; +} +ul{ + margin: 0; + padding: 0; +} + +.emailbutton { + height: 38px; + background: #e71f1f; + border: 0; + padding-left: 20px; + padding-right: 20px; + color: #ffffff; + font-weight: bold; +} +header li { + + display: inline; + padding: 0 20px 0 20px; +} +header #branding { + float: left; +} +header #branding h1 { + margin: 0; +} +header nav { + float: right; + margin-top: 10px; +} +header .highlight, header .current { + color: #e44a4a; + font-weight: bold; +} +header a:hover{ + color:#e71f1f; + font-weight: bold; +} +#showcase { + min-height: 350px; + background: #a71010; + text-align: center; + color:#ffffff; +} +#showcase h1 { + margin-top: 100px; + font-size: 55px; + margin-bottom: 10px; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} +#showcase p{ + font-size: 20px; +} +#newsletter{ + padding: 10px; + color: #ffffff; + background: #272525; + border-bottom: 3px solid #e44a4a; + border-top: 1px solid #e44a4a; +} +#newsletter h1{ + float: left; +} +#newsletter form{ + float: right; + margin-top: 15px; +} +#newsletter input[type="email"]{ + padding: 4px; + height: 25px; + width: 250px; +} +#boxes { + margin-top: 20px; +} +#boxes .box{ + float: left; + width: 30%; + padding: 10px; + text-align: center; +} +#boxes .box img{ + width: 90px; +} +footer { + padding: 20px; + margin-top: 20px; + color: #ffffff; + background-color: #e71f1f; + text-align: center; + border-top: 2px solid #272525; + border-bottom: 1px solid #272525; +} \ No newline at end of file diff --git a/homework/week-2-project/6-ARTICLE/about.html b/homework/week-2-project/6-ARTICLE/about.html new file mode 100644 index 0000000..c771050 --- /dev/null +++ b/homework/week-2-project/6-ARTICLE/about.html @@ -0,0 +1,67 @@ + + + + + + + + + + + + + Elif's Web Design Page / About + + + +
+
+
+

Elif's Web Design Page

+
+ +
+
+ + + +
+
+

Subscribe to my E-mail

+
+ + +
+
+ +
+ +
+
+
+

About Me

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam non interdum nulla, sed hendrerit nisl. + Donec aliquet lorem a congue vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam non interdum nulla, sed hendrerit nisl. + Donec aliquet lorem a congue vestibulum.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam non interdum nulla, sed hendrerit nisl. + Donec aliquet lorem a congue vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam non interdum nulla, sed hendrerit nisl. + Donec aliquet lorem a congue vestibulum.

+
+
+
+ + + + \ No newline at end of file diff --git a/homework/week-2-project/6-ARTICLE/index.html b/homework/week-2-project/6-ARTICLE/index.html new file mode 100644 index 0000000..7ef3aba --- /dev/null +++ b/homework/week-2-project/6-ARTICLE/index.html @@ -0,0 +1,87 @@ + + + + + + + + + + + + + Elif's Web Design Page / Welcome + + + +
+
+
+

Elif's Web Design Page

+
+ +
+
+ +
+
+
+

Elif's Web Design Adventure

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Donec nec odio in libero volutpat blandit a a velit. + Maecenas efficitur, neque a convallis consectetur

+
+
+
+
+
+
+

Subscribe to my E-mail

+
+ + +
+
+
+
+
+
+
+ +

History of Elif

+

I was born on October 3, 1990 in Bursa. + I was always a working and good student during my school life. + I studied computer and instructional technologies at bahcesehir university in istanbul. + then I got a masters degree in information technology. + I also worked for 2 years.

+
+
+ +

Now of Elif

+

I came to Belgium with my family 1,5 years ago. + I live in Sint-Katelijne-Waver. + I go to the nederlands course and the integration course. + I also started hyf course. + In my other free time I do homework and spend time with my daughter.

+
+
+ +

Future of Elif

+

I want a peaceful life with my family. + I want to find a job in the computer field. + I want to improve myself in my language and software sector.

+
+
+
+ + + + \ No newline at end of file diff --git a/homework/week-2-project/6-ARTICLE/services.html b/homework/week-2-project/6-ARTICLE/services.html new file mode 100644 index 0000000..5edb7f6 --- /dev/null +++ b/homework/week-2-project/6-ARTICLE/services.html @@ -0,0 +1,67 @@ + + + + + + + + + + + + + Elif's Web Design Page / Services + + + +
+
+
+

Elif's Web Design Page

+
+ +
+
+ +
+
+

Subscribe to my E-mail

+
+ + +
+
+ +
+ +
+
+
+

Services

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam non interdum nulla, sed hendrerit nisl. + Donec aliquet lorem a congue vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam non interdum nulla, sed hendrerit nisl. + Donec aliquet lorem a congue vestibulum.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam non interdum nulla, sed hendrerit nisl. + Donec aliquet lorem a congue vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam non interdum nulla, sed hendrerit nisl. + Donec aliquet lorem a congue vestibulum.

+
+
+
+ + + + + + \ No newline at end of file diff --git a/homework/week-2-project/6-ARTICLE/style.css b/homework/week-2-project/6-ARTICLE/style.css new file mode 100644 index 0000000..d50950b --- /dev/null +++ b/homework/week-2-project/6-ARTICLE/style.css @@ -0,0 +1,125 @@ +body { + font-family: Arial, Helvetica, sans-serif; + font-size: 15px; + line-height: 1.5; + padding: 0; + margin: 0; + background-color: #e0c5c5; +} +.container { + width:80%; + margin: auto; + overflow: hidden; +} +header { + background: #1b1818; + color: #ffffff; + padding-top: 30px; + min-height: 70px; + border-bottom: #e44a4a 3px solid; +} + +header #branding { + float: left; +} +header #branding h1 { + margin: 0; +} + +header .highlight, header .current { + color: #e44a4a; + font-weight: bold; +} +header nav { + float: right; + margin-top: 10px; +} +header a{ + color: #ffffff; + font-size: 16px; + text-decoration: none; + text-transform: uppercase; +} +ul{ + margin: 0; + padding: 0; +} +.emailbutton { + height: 38px; + background: #e71f1f; + border: 0; + padding-left: 20px; + padding-right: 20px; + color: #ffffff; + font-weight: bold; +} +header li { + + display: inline; + padding: 0 20px 0 20px; +} +header a:hover { + color:#e71f1f; + font-weight: bold; +} +#showcase { + min-height: 350px; + background: #a71010; + text-align: center; + color:#ffffff; +} +#showcase h1 { + margin-top: 100px; + font-size: 55px; + margin-bottom: 10px; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} +#showcase p{ + font-size: 20px; +} +#newsletter{ + padding: 10px; + color: #ffffff; + background: #272525; + border-bottom: 3px solid #e44a4a; + border-top: 1px solid #e44a4a; +} +#newsletter h1{ + float: left; +} +#newsletter form{ + float: right; + margin-top: 15px; +} +#newsletter input[type="email"]{ + padding: 4px; + height: 25px; + width: 250px; +} +#boxes { + margin-top: 20px; +} +#boxes .box{ + float: left; + width: 30%; + padding: 10px; + text-align: center; +} +#boxes .box img{ + width: 90px; +} + + +article#main-col{ + float: left; + width: 65%; +} +footer { + padding: 20px; + margin-top: 20px; + color: #ffffff; + background-color: #e71f1f; + text-align: center; + border-top: 2px solid #272525; + border-bottom: 1px solid #272525; +} \ No newline at end of file diff --git a/homework/week-2-project/7-ASIDE/about.html b/homework/week-2-project/7-ASIDE/about.html new file mode 100644 index 0000000..aa1ac65 --- /dev/null +++ b/homework/week-2-project/7-ASIDE/about.html @@ -0,0 +1,78 @@ + + + + + + + + + + + + + Elif's Web Design Page / About + + + +
+
+
+

Elif's Web Design Page

+
+ +
+
+ + + +
+
+

Subscribe to my E-mail

+
+ + +
+
+ +
+ +
+
+
+

About Me

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam non interdum nulla, sed hendrerit nisl. + Donec aliquet lorem a congue vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam non interdum nulla, sed hendrerit nisl. + Donec aliquet lorem a congue vestibulum.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam non interdum nulla, sed hendrerit nisl. + Donec aliquet lorem a congue vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam non interdum nulla, sed hendrerit nisl. + Donec aliquet lorem a congue vestibulum.

+
+ +
+
+ + + + \ No newline at end of file diff --git a/homework/week-2-project/7-ASIDE/index.html b/homework/week-2-project/7-ASIDE/index.html new file mode 100644 index 0000000..7ef3aba --- /dev/null +++ b/homework/week-2-project/7-ASIDE/index.html @@ -0,0 +1,87 @@ + + + + + + + + + + + + + Elif's Web Design Page / Welcome + + + +
+
+
+

Elif's Web Design Page

+
+ +
+
+ +
+
+
+

Elif's Web Design Adventure

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Donec nec odio in libero volutpat blandit a a velit. + Maecenas efficitur, neque a convallis consectetur

+
+
+
+
+
+
+

Subscribe to my E-mail

+
+ + +
+
+
+
+
+
+
+ +

History of Elif

+

I was born on October 3, 1990 in Bursa. + I was always a working and good student during my school life. + I studied computer and instructional technologies at bahcesehir university in istanbul. + then I got a masters degree in information technology. + I also worked for 2 years.

+
+
+ +

Now of Elif

+

I came to Belgium with my family 1,5 years ago. + I live in Sint-Katelijne-Waver. + I go to the nederlands course and the integration course. + I also started hyf course. + In my other free time I do homework and spend time with my daughter.

+
+
+ +

Future of Elif

+

I want a peaceful life with my family. + I want to find a job in the computer field. + I want to improve myself in my language and software sector.

+
+
+
+ + + + \ No newline at end of file diff --git a/homework/week-2-project/7-ASIDE/services.html b/homework/week-2-project/7-ASIDE/services.html new file mode 100644 index 0000000..a9bbd26 --- /dev/null +++ b/homework/week-2-project/7-ASIDE/services.html @@ -0,0 +1,103 @@ + + + + + + + + + + + + + Elif's Web Design Page / Services + + + +
+
+
+

Elif's Web Design Page

+
+ +
+
+ +
+
+

Subscribe to my E-mail

+
+ + +
+
+ +
+ +
+
+
+

Services

+ +
    +
  • +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam non interdum nulla, sed hendrerit nisl. + Donec aliquet lorem a congue vestibulum. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + Etiam non interdum nulla, sed hendrerit nisl.

    +
    • +
  • +

    Lorem ipsum dolor

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam non interdum nulla, sed hendrerit nisl. + Donec aliquet lorem a congue vestibulum. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + Etiam non interdum nulla, sed hendrerit nisl.

    +
    • +
  • +

    Lorem ipsum dolor

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Etiam non interdum nulla, sed hendrerit nisl. + Donec aliquet lorem a congue vestibulum. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + Etiam non interdum nulla, sed hendrerit nisl.

    +
    • +
+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/homework/week-2-project/7-ASIDE/style.css b/homework/week-2-project/7-ASIDE/style.css new file mode 100644 index 0000000..2f06a28 --- /dev/null +++ b/homework/week-2-project/7-ASIDE/style.css @@ -0,0 +1,175 @@ +body { + font-family: Arial, Helvetica, sans-serif; + font-size: 15px; + line-height: 1.5; + padding: 0; + margin: 0; + background-color: #e0c5c5; +} +.container { + width:80%; + margin: auto; + overflow: hidden; +} +header { + background: #1b1818; + color: #ffffff; + padding-top: 30px; + min-height: 70px; + border-bottom: #e44a4a 3px solid; +} + +header #branding { + float: left; +} +header #branding h1 { + margin: 0; +} + +header .highlight, header .current { + color: #e44a4a; + font-weight: bold; +} +header nav { + float: right; + margin-top: 10px; +} +header a{ + color: #ffffff; + font-size: 16px; + text-decoration: none; + text-transform: uppercase; +} +ul{ + margin: 0; + padding: 0; +} +.emailbutton { + height: 38px; + background: #e71f1f; + border: 0; + padding-left: 20px; + padding-right: 20px; + color: #ffffff; + font-weight: bold; +} +header li { + + display: inline; + padding: 0 20px 0 20px; +} +header a:hover { + color:#e71f1f; + font-weight: bold; +} +#showcase { + min-height: 350px; + background: #a71010; + text-align: center; + color:#ffffff; +} +#showcase h1 { + margin-top: 100px; + font-size: 55px; + margin-bottom: 10px; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} +#showcase p{ + font-size: 20px; +} +#newsletter{ + padding: 10px; + color: #ffffff; + background: #272525; + border-bottom: 3px solid #e44a4a; + border-top: 1px solid #e44a4a; +} +#newsletter h1{ + float: left; +} +#newsletter form{ + float: right; + margin-top: 15px; +} +#newsletter input[type="email"]{ + padding: 4px; + height: 25px; + width: 250px; +} +#boxes { + margin-top: 20px; +} +#boxes .box{ + float: left; + width: 30%; + padding: 10px; + text-align: center; +} +#boxes .box img{ + width: 90px; +} + +article#main-col{ + float: left; + width: 65%; +} +aside#sidebar{ + float: right; + width: 30%; + margin-top: 10px; +} +.dark{ + padding: 15px; + background: #272525; + color: #ffffff; + margin-top: 10px; + margin-bottom: 10px; +} +ul#services li{ + list-style: none; + padding: 20px; + border: 2px solid #cccccc; + margin-bottom: 5px; + background: #e4e3e3; +} +aside#sidebar .quote input, aside#sidebar .quote textarea{ + width: 90%; + padding: 5px; +} +footer { + padding: 20px; + margin-top: 20px; + color: #ffffff; + background-color: #e71f1f; + text-align: center; + border-top: 2px solid #272525; + border-bottom: 1px solid #272525; +} +@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; + } + #newsletter button, .quote button{ + display: block; + width: 100%; + } + #newsletter form input[type="email"], .quote input, .quote textarea{ + width: 100%; + margin-bottom: 5px; + } +} \ No newline at end of file diff --git a/homework/week-2-project/README.md b/homework/week-2-project/README.md index ed64c46..b8f197a 100644 --- a/homework/week-2-project/README.md +++ b/homework/week-2-project/README.md @@ -9,7 +9,6 @@ We still expect your Week 3 project to be broken down into working steps with a You'll get a chance in class next Sunday to discuss the different ways this project an be broken down into user stories. > Pay attention to how he uses HTML5 Semantic Tags to structure his web pages! - --- --- ### Hack Your Future: Belgium diff --git a/homework/week-2-project/index.html b/homework/week-2-project/index.html deleted file mode 100644 index 879ec9b..0000000 --- a/homework/week-2-project/index.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - - - - - HTML/CSS Week 2 Project Table - - - -

Traversy Media: Build An HTML5 Website With A Responsive Layout

-

- -

- - - - - - - - - - - - - - - - - - - - - -
a user can ...index.htmlabout.htmlservices.htmlCSS
... open a website empty HTML template, requiring CSS file, title tag(doesn't exist yet!)(doesn't exist yet!)empty CSS file
- - - diff --git a/homework/week-2-project/table.html b/homework/week-2-project/table.html new file mode 100644 index 0000000..44cf9c7 --- /dev/null +++ b/homework/week-2-project/table.html @@ -0,0 +1,90 @@ + + + + + + + + HTML/CSS Week 2 Project Table + + + +

Traversy Media: Build An HTML5 Website With A Responsive Layout

+

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
a user can ...index.htmlabout.htmlservices.htmlCSS
... (0-blank-page)open a website empty HTML template, requiring CSS file, title tag(doesn't exist yet!)(doesn't exist yet!)empty CSS file
... (1-HTML(title))know what the site is about HTML adding (title, link and meta tag)(doesn't exist yet!)(doesn't exist yet!)css page created(body css added)
... (2-HEADER)title, banner title, HTML adding (HEADER (div, h, span tag))(doesn't exist yet!)(doesn't exist yet!)css adding (class-(all), header, (header id/class) for banner)
... (3-NAV)menu(css)/ pages createdHTML adding (NAV (div, list, tag))about page createdservices page createdcss adding ((header a/ul/li/nav/a:hover) for menu)
... (4-SECTION)banner title+brief description, subsection title+brief desc., email-button addedHTML adding (SECTION (div, h, p, form, img tag))empty about pageempty services pagecss adding (class,id,h,href,form,p,input) and style changed(id/class) for title+brief desc., email-button and subsection
... (5-FOOTER)title of web design, date added HTML adding (FOOTER (p tag))empty about pageempty services pagecss adding (footer style changed)
... (6-ARTICLE)information added in article HTML(home)pageAbout page adding (ARTICLE)(id,class,p,h)tag)Services page adding (ARTICLE)(id,class,p,h)tag)css adding (article style changed)
... (7-ASIDE)information added in aside(about.html)
+ ... (7-ASIDE)information added in aside(services.html)		HTML(home)pageAbout page adding (ASIDE)(id,class,p,h)tag)Services page adding (ASIDE)(id,class,p,h,ul,form,button)tag)css adding (aside style changed)+(@media css code)
+ + + diff --git a/homework/week-3-project/1-fifth-section/style.css b/homework/week-3-project/1-fifth-section/style.css new file mode 100644 index 0000000..815d784 --- /dev/null +++ b/homework/week-3-project/1-fifth-section/style.css @@ -0,0 +1,103 @@ +body { + font-family: "DDG_ProximaNova", "DDG_ProximaNova_UI_0", "DDG_ProximaNova_UI_1", + "DDG_ProximaNova_UI_2", "DDG_ProximaNova_UI_3", "DDG_ProximaNova_UI_4", "DDG_ProximaNova_UI_5", + "DDG_ProximaNova_UI_6", "Proxima Nova", "Helvetica Neue", "Helvetica", "Segoe UI", "Nimbus Sans L", + "Liberation Sans", "Open Sans", FreeSans, Arial, sans-serif; + + + padding: 0; + margin: 0; + +} +.turkuazpage { + background-color: rgb(135, 206, 245); + height: 563px; + line-height: 23.0333px; + color: #365374; + font-size: 16px; +} + +form{ + + margin-top: 15px; + vertical-align: baseline; +} +input[type="search"]{ + padding: 4px; + height: 35px; + width: 350px; +} +.searchbuttonturkuaz { + height: 45px; + width: 300px; + background: rgba(34, 34, 34, 0.5); + padding-left: 10px; + padding-right: 10px; + color: rgb(255, 255, 255); + font-size: 18px; + border: none; +} +.containerturkuaz { + width:80%; + margin: auto; + overflow: hidden; + text-align: center; +} + +#duckimageturkuaz { + width: 600px; + height: 250px; + margin-left: 250px; + +} +.textturkuaz{ + padding-top: 120px; + color: #365374; +} +button:hover { + color: rgb(255, 255, 255); + background: rgba(34, 34, 34, 0.8); +} +button:link { + color: rgb(255, 255, 255); + text-decoration: none; + +} +button:visited, a:active { + color: rgb(255, 255, 255); + text-decoration: none; + +} +tr { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + color: #365374; +} + +td { + float: right; + +} + +td a { + display: block; + text-decoration: none; + text-align: center; +} + +#line { + padding-right: 10px; + padding-left: 10px; +} +#menuturkuaz{ + margin-left:auto; + margin-right:auto; + height: 30px; + width: 260px; + padding-right: 0px; + padding-left: 0px; + padding-top: 20px; + text-align: center; +} diff --git a/homework/week-3-project/1-fifth-section/turkuaz.html b/homework/week-3-project/1-fifth-section/turkuaz.html new file mode 100644 index 0000000..26daf9a --- /dev/null +++ b/homework/week-3-project/1-fifth-section/turkuaz.html @@ -0,0 +1,56 @@ + + + + + + + + + + + + DUCKDUCKGO + + +
+
+ + +
+ +
+ +
+

Switch to DuckDuckGo and take back your privacy!

+

No tracking, no ad targeting, just searching. +

+
+ + +
man2
+
+ + + +
+ + + +
+ +
+
+ + + \ No newline at end of file diff --git a/homework/week-3-project/1-first-section/grey.html b/homework/week-3-project/1-first-section/grey.html new file mode 100644 index 0000000..1282e77 --- /dev/null +++ b/homework/week-3-project/1-first-section/grey.html @@ -0,0 +1,46 @@ + + + + + + + + + + + + DUCKDUCKGO + + +
+
+ + +
+ +
+
duck
+
DuckDuckGo
+
+ + +

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

+
+
+
+ + + +
+ + + diff --git a/homework/week-3-project/1-first-section/style.css b/homework/week-3-project/1-first-section/style.css new file mode 100644 index 0000000..85bb306 --- /dev/null +++ b/homework/week-3-project/1-first-section/style.css @@ -0,0 +1,89 @@ +body { + font-family: "DDG_ProximaNova", "DDG_ProximaNova_UI_0", "DDG_ProximaNova_UI_1", + "DDG_ProximaNova_UI_2", "DDG_ProximaNova_UI_3", "DDG_ProximaNova_UI_4", "DDG_ProximaNova_UI_5", + "DDG_ProximaNova_UI_6", "Proxima Nova", "Helvetica Neue", "Helvetica", "Segoe UI", "Nimbus Sans L", + "Liberation Sans", "Open Sans", FreeSans, Arial, sans-serif; + + + padding: 0; + margin: 0; + +} +.graypage { + background-color: #f7f7f7; + height: 563px; + width: auto; + color: #aaaaaa; + font-size: 18px; + line-height: 23.0333px; + +} +ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; +} + +li { + float: right; +} + +li a { + display: block; + color: #aaaaaa; + text-align: center; + padding: 14px 16px; + text-decoration: none; +} +form{ + + margin-top: 15px; + vertical-align: baseline; +} +input[type="search"]{ + padding: 4px; + height: 35px; + width: 350px; +} +.searchbutton { + height: 35px; + width: 20px; + padding-left: 20px; + padding-right: 20px; +} +.container { + width:80%; + margin: auto; + overflow: hidden; + text-align: center; +} +#duck{ + font-size: 26px; + color: rgb(34, 34, 34); +} +#duckimage { + border: #e71f1f; +} +#spread { + color: #4fb6ad; +} +span a:hover { + color: #4fb6ad; + +} +span a:link { + color: #4fb6ad; + text-decoration: none; + +} +span a:visited, a:active { + color: #4fb6ad; + text-decoration: none; + +} +.privacy { + font-size: 14.4px; + padding-top: 20px; + padding-right: 10px; +} \ No newline at end of file diff --git a/homework/week-3-project/1-fourth-section/blue.html b/homework/week-3-project/1-fourth-section/blue.html new file mode 100644 index 0000000..aa00f13 --- /dev/null +++ b/homework/week-3-project/1-fourth-section/blue.html @@ -0,0 +1,47 @@ + + + + + + + + + + + + DUCKDUCKGO + + +
+
+ + +
+ +
+ +
+

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. +

+
+ + +
man
+
+ + + +
+ + + +
+ +
+
+ + + \ No newline at end of file diff --git a/homework/week-3-project/1-fourth-section/style.css b/homework/week-3-project/1-fourth-section/style.css new file mode 100644 index 0000000..aebb454 --- /dev/null +++ b/homework/week-3-project/1-fourth-section/style.css @@ -0,0 +1,70 @@ +body { + font-family: "DDG_ProximaNova", "DDG_ProximaNova_UI_0", "DDG_ProximaNova_UI_1", + "DDG_ProximaNova_UI_2", "DDG_ProximaNova_UI_3", "DDG_ProximaNova_UI_4", "DDG_ProximaNova_UI_5", + "DDG_ProximaNova_UI_6", "Proxima Nova", "Helvetica Neue", "Helvetica", "Segoe UI", "Nimbus Sans L", + "Liberation Sans", "Open Sans", FreeSans, Arial, sans-serif; + + + padding: 0; + margin: 0; + +} +.bluepage { + background-color: rgb(95, 99, 189); + height: 563px; + line-height: 23.0333px; + color: rgb(255, 255, 255); + font-size: 16px; +} + +form{ + + margin-top: 15px; + vertical-align: baseline; +} +input[type="search"]{ + padding: 4px; + height: 35px; + width: 350px; +} +.searchbuttonblue { + height: 45px; + width: 300px; + background: rgba(34, 34, 34, 0.5); + padding-left: 10px; + padding-right: 10px; + color: rgb(255, 255, 255); + font-size: 18px; + border: none; +} +.containerblue { + width:80%; + margin: auto; + overflow: hidden; + text-align: center; +} + +#duckimageblue { + width: 600px; + height: 250px; + margin-left: 250px; + +} +.textblue{ + padding-top: 120px; + color: rgb(255, 255, 255); +} +button:hover { + color: rgb(255, 255, 255); + background: rgba(34, 34, 34, 0.8); +} +button:link { + color: rgb(255, 255, 255); + text-decoration: none; + +} +button:visited, a:active { + color: rgb(255, 255, 255); + text-decoration: none; + +} \ No newline at end of file diff --git a/homework/week-3-project/1-second-section/green.html b/homework/week-3-project/1-second-section/green.html new file mode 100644 index 0000000..cb6ff71 --- /dev/null +++ b/homework/week-3-project/1-second-section/green.html @@ -0,0 +1,46 @@ + + + + + + + + + + + + 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.

+
+ + +
woman
+
+ + + +
+ + + +
+ +
+
+ + + \ No newline at end of file diff --git a/homework/week-3-project/1-second-section/style.css b/homework/week-3-project/1-second-section/style.css new file mode 100644 index 0000000..70e9ff0 --- /dev/null +++ b/homework/week-3-project/1-second-section/style.css @@ -0,0 +1,70 @@ +body { + font-family: "DDG_ProximaNova", "DDG_ProximaNova_UI_0", "DDG_ProximaNova_UI_1", + "DDG_ProximaNova_UI_2", "DDG_ProximaNova_UI_3", "DDG_ProximaNova_UI_4", "DDG_ProximaNova_UI_5", + "DDG_ProximaNova_UI_6", "Proxima Nova", "Helvetica Neue", "Helvetica", "Segoe UI", "Nimbus Sans L", + "Liberation Sans", "Open Sans", FreeSans, Arial, sans-serif; + + + padding: 0; + margin: 0; + +} +.greenpage { + background-color: rgb(88, 183, 146); + height: 563px; + line-height: 23.0333px; + color: rgb(255, 255, 255); + font-size: 14.4px; +} + +form{ + + margin-top: 15px; + vertical-align: baseline; +} +input[type="search"]{ + padding: 4px; + height: 35px; + width: 350px; +} +.searchbuttongreen { + height: 45px; + width: 300px; + background: rgba(34, 34, 34, 0.5); + padding-left: 10px; + padding-right: 10px; + color: rgb(255, 255, 255); + font-size: 18px; + border: none; +} +.containergreen { + width:80%; + margin: auto; + overflow: hidden; + text-align: center; +} + +#duckimagegreen { + width: 600px; + height: 250px; + margin-left: 250px; + +} +.textgreen{ + padding-top: 120px; + color: rgb(255, 255, 255); +} +button:hover { + color: rgb(255, 255, 255); + background: rgba(34, 34, 34, 0.8); +} +button:link { + color: rgb(255, 255, 255); + text-decoration: none; + +} +button:visited, a:active { + color: rgb(255, 255, 255); + text-decoration: none; + +} \ No newline at end of file diff --git a/homework/week-3-project/1-third-section/orange.html b/homework/week-3-project/1-third-section/orange.html new file mode 100644 index 0000000..ddd183a --- /dev/null +++ b/homework/week-3-project/1-third-section/orange.html @@ -0,0 +1,47 @@ + + + + + + + + + + + + DUCKDUCKGO + + +
+
+ + +
+ +
+ +
+

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. +

+
+ + +
woman2
+
+ + + +
+ + + +
+ +
+
+ + + \ No newline at end of file diff --git a/homework/week-3-project/1-third-section/style.css b/homework/week-3-project/1-third-section/style.css new file mode 100644 index 0000000..8beed93 --- /dev/null +++ b/homework/week-3-project/1-third-section/style.css @@ -0,0 +1,70 @@ +body { + font-family: "DDG_ProximaNova", "DDG_ProximaNova_UI_0", "DDG_ProximaNova_UI_1", + "DDG_ProximaNova_UI_2", "DDG_ProximaNova_UI_3", "DDG_ProximaNova_UI_4", "DDG_ProximaNova_UI_5", + "DDG_ProximaNova_UI_6", "Proxima Nova", "Helvetica Neue", "Helvetica", "Segoe UI", "Nimbus Sans L", + "Liberation Sans", "Open Sans", FreeSans, Arial, sans-serif; + + + padding: 0; + margin: 0; + +} +.orangepage { + background-color: rgb(245, 163, 57); + height: 563px; + line-height: 23.0333px; + color: rgb(255, 255, 255); + font-size: 16px; +} + +form{ + + margin-top: 15px; + vertical-align: baseline; +} +input[type="search"]{ + padding: 4px; + height: 35px; + width: 350px; +} +.searchbuttonorange { + height: 45px; + width: 300px; + background: rgba(34, 34, 34, 0.5); + padding-left: 10px; + padding-right: 10px; + color: rgb(255, 255, 255); + font-size: 18px; + border: none; +} +.containerorange { + width:80%; + margin: auto; + overflow: hidden; + text-align: center; +} + +#duckimageorange { + width: 600px; + height: 250px; + margin-left: 250px; + +} +.textorange{ + padding-top: 120px; + color: rgb(255, 255, 255); +} +button:hover { + color: rgb(255, 255, 255); + background: rgba(34, 34, 34, 0.8); +} +button:link { + color: rgb(255, 255, 255); + text-decoration: none; + +} +button:visited, a:active { + color: rgb(255, 255, 255); + text-decoration: none; + +} \ No newline at end of file diff --git a/homework/week-3-project/README.md b/homework/week-3-project/README.md index 7588cfe..631c6b0 100644 --- a/homework/week-3-project/README.md +++ b/homework/week-3-project/README.md @@ -1 +1,2 @@ See the assignment [live on GitHub Pages](https://be-hacking-hyf.github.io/html-css-github/week-3-project) + diff --git a/homework/week-3-project/The_DuckDuckGo_Duck.png b/homework/week-3-project/The_DuckDuckGo_Duck.png new file mode 100644 index 0000000..d56d3ac Binary files /dev/null and b/homework/week-3-project/The_DuckDuckGo_Duck.png differ diff --git a/homework/week-3-project/images.jpeg b/homework/week-3-project/images.jpeg new file mode 100644 index 0000000..c002ed8 Binary files /dev/null and b/homework/week-3-project/images.jpeg differ diff --git a/homework/week-3-project/index.html b/homework/week-3-project/index.html index 8c60329..37049ae 100644 --- a/homework/week-3-project/index.html +++ b/homework/week-3-project/index.html @@ -1,70 +1,166 @@ - - + - - - - - HTML/CSS Week 3 Project Table - - + + + + + + + + + + DUCKDUCKGO + -

DuckDuckGo

-

- Replicate DuckDuckGo using just HTML & CSS. Users should be - able to type into the search bar, but nothing needs to happen when they hit "enter".

-

- -

Be sure to use the same colors, the same images, and the same - font as DuckDuckGo. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
a user can ...HTMLCSS
... open a website empty HTML template, requiring CSS file, title tagempty CSS file
... type into the search bara section structured like the top of DuckDuckGosome styling to make it visually match DuckDuckGo
... know DuckDuckGo doesn't store personal dataa section based off the second section of DuckDuckGosome styling to make it visually match DuckDuckGo
... be assured they won't be targeted for adsa section based off the third section of DuckDuckGosome styling to make it visually match DuckDuckGo
... be assured they won't be trackeda section based off the fourth section of DuckDuckGosome styling to make it visually match DuckDuckGo
... read the call to actiona section based off the fifth section of DuckDuckGosome styling to make it visually match DuckDuckGo
+
+
+ + +
+ +
+
duck
+
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.

+
+ + +
woman
+
+ + + +
+ + + +
+ +
+
+ + +
+ +
+ +
+

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. +

+
+ + +
woman2
+
+ + + +
+ + + +
+ +
+
+ + +
+ +
+ +
+

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. +

+
+ + +
man
+
+ + + +
+ + + +
+ +
+
+ + +
+ +
+ +
+

Switch to DuckDuckGo and take back your privacy!

+

No tracking, no ad targeting, just searching. +

+
+ + +
man2
+
+ + + +
+ + + +
+ +
- + diff --git a/homework/week-3-project/style.css b/homework/week-3-project/style.css new file mode 100644 index 0000000..54a406a --- /dev/null +++ b/homework/week-3-project/style.css @@ -0,0 +1,272 @@ +body { + font-family: "DDG_ProximaNova", "DDG_ProximaNova_UI_0", "DDG_ProximaNova_UI_1", + "DDG_ProximaNova_UI_2", "DDG_ProximaNova_UI_3", "DDG_ProximaNova_UI_4", "DDG_ProximaNova_UI_5", + "DDG_ProximaNova_UI_6", "Proxima Nova", "Helvetica Neue", "Helvetica", "Segoe UI", "Nimbus Sans L", + "Liberation Sans", "Open Sans", FreeSans, Arial, sans-serif; + + + padding: 0; + margin: 0; + +} +.graypage { + background-color: #f7f7f7; + height: 563px; + width: auto; + color: #aaaaaa; + font-size: 18px; + line-height: 23.0333px; + +} +ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; +} + +li { + float: right; +} + +li a { + display: block; + color: #aaaaaa; + text-align: center; + padding: 14px 16px; + text-decoration: none; +} +form{ + + margin-top: 15px; + vertical-align: baseline; +} +input[type="search"]{ + padding: 4px; + height: 35px; + width: 350px; +} +.searchbutton { + height: 35px; + width: 20px; + padding-left: 20px; + padding-right: 20px; +} +.container { + width:80%; + margin: auto; + overflow: hidden; + text-align: center; +} +#duck{ + font-size: 26px; + color: rgb(34, 34, 34); +} +#duckimage { + border: #e71f1f; +} +#spread { + color: #4fb6ad; +} +span a:hover { + color: #4fb6ad; + +} +span a:link { + color: #4fb6ad; + text-decoration: none; + +} +span a:visited, a:active { + color: #4fb6ad; + text-decoration: none; + +} +.privacy { + font-size: 14.4px; + padding-top: 20px; + padding-right: 10px; +} +.greenpage { + background-color: rgb(88, 183, 146); + height: 563px; + line-height: 23.0333px; + color: rgb(255, 255, 255); + font-size: 14.4px; +} +.searchbuttongreen { + height: 45px; + width: 300px; + background: rgba(34, 34, 34, 0.5); + padding-left: 10px; + padding-right: 10px; + color: rgb(255, 255, 255); + font-size: 18px; + border: none; +} +.containergreen { + width:80%; + margin: auto; + overflow: hidden; + text-align: center; +} + +#duckimagegreen { + width: 600px; + height: 250px; + margin-left: 250px; + +} +.textgreen{ + padding-top: 120px; + color: rgb(255, 255, 255); +} +button:hover { + color: rgb(255, 255, 255); + background: rgba(34, 34, 34, 0.8); +} +button:link { + color: rgb(255, 255, 255); + text-decoration: none; + +} +button:visited, a:active { + color: rgb(255, 255, 255); + text-decoration: none; + +} +.orangepage { + background-color: rgb(245, 163, 57); + height: 563px; + line-height: 23.0333px; + color: rgb(255, 255, 255); + font-size: 16px; +} +.searchbuttonorange { + height: 45px; + width: 300px; + background: rgba(34, 34, 34, 0.5); + padding-left: 10px; + padding-right: 10px; + color: rgb(255, 255, 255); + font-size: 18px; + border: none; +} +.containerorange { + width:80%; + margin: auto; + overflow: hidden; + text-align: center; +} + +#duckimageorange { + width: 600px; + height: 250px; + margin-left: 250px; + +} +.textorange{ + padding-top: 120px; + color: rgb(255, 255, 255); +} +.bluepage { + background-color: rgb(95, 99, 189); + height: 563px; + line-height: 23.0333px; + color: rgb(255, 255, 255); + font-size: 16px; +} +.searchbuttonblue { + height: 45px; + width: 300px; + background: rgba(34, 34, 34, 0.5); + padding-left: 10px; + padding-right: 10px; + color: rgb(255, 255, 255); + font-size: 18px; + border: none; +} +.containerblue { + width:80%; + margin: auto; + overflow: hidden; + text-align: center; +} + +#duckimageblue { + width: 600px; + height: 250px; + margin-left: 250px; + +} +.textblue{ + padding-top: 120px; + color: rgb(255, 255, 255); +} +.turkuazpage { + background-color: rgb(135, 206, 245); + height: 563px; + line-height: 23.0333px; + color: #365374; + font-size: 16px; +} +.searchbuttonturkuaz { + height: 45px; + width: 300px; + background: rgba(34, 34, 34, 0.5); + padding-left: 10px; + padding-right: 10px; + color: rgb(255, 255, 255); + font-size: 18px; + border: none; +} +.containerturkuaz { + width:80%; + margin: auto; + overflow: hidden; + text-align: center; +} + +#duckimageturkuaz { + width: 600px; + height: 250px; + margin-left: 250px; + +} +.textturkuaz{ + padding-top: 120px; + color: #365374; +} +tr { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + color: #365374; +} + +td { + float: right; + +} + +td a { + display: block; + text-decoration: none; + text-align: center; +} + +#line { + padding-right: 10px; + padding-left: 10px; +} +#menuturkuaz{ + margin-left:auto; + margin-right:auto; + height: 30px; + width: 260px; + padding-right: 0px; + padding-left: 0px; + padding-top: 20px; + text-align: center; +} diff --git a/homework/week-3-project/table.html b/homework/week-3-project/table.html new file mode 100644 index 0000000..8c60329 --- /dev/null +++ b/homework/week-3-project/table.html @@ -0,0 +1,70 @@ + + + + + + + + HTML/CSS Week 3 Project Table + + + +

DuckDuckGo

+

+ Replicate DuckDuckGo using just HTML & CSS. Users should be + able to type into the search bar, but nothing needs to happen when they hit "enter".

+

+ +

Be sure to use the same colors, the same images, and the same + font as DuckDuckGo. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
a user can ...HTMLCSS
... open a website empty HTML template, requiring CSS file, title tagempty CSS file
... type into the search bara section structured like the top of DuckDuckGosome styling to make it visually match DuckDuckGo
... know DuckDuckGo doesn't store personal dataa section based off the second section of DuckDuckGosome styling to make it visually match DuckDuckGo
... be assured they won't be targeted for adsa section based off the third section of DuckDuckGosome styling to make it visually match DuckDuckGo
... be assured they won't be trackeda section based off the fourth section of DuckDuckGosome styling to make it visually match DuckDuckGo
... read the call to actiona section based off the fifth section of DuckDuckGosome styling to make it visually match DuckDuckGo
+ + +