From e4321b034e0a353bc0fbac2a071f8257b89d496b Mon Sep 17 00:00:00 2001 From: Balazs Bordas Date: Sat, 19 Sep 2020 14:42:11 +0200 Subject: [PATCH] fixed errors and added all solutions up to the end of 04_css --- 04 CSS3.md | 105 +++++++++--------- exercises/03_html/02_lists/computers80.html | 6 +- .../03_hypermedia/views/commodore64.html | 3 +- .../01_formatting/html/hello-world.html | 24 ---- .../04_css/01_formatting/html/hello.html | 16 --- .../04_css/01_formatting/html/targets.html | 40 ------- .../04_css/01_formatting/public/css/hello.css | 3 +- .../01_formatting/public/css/selectors.css | 2 +- .../01_formatting/public/css/simple.css | 9 -- .../01_formatting/public/css/targetstyles.css | 2 +- .../01_formatting/views/comparison.html | 15 +-- .../04_css/01_formatting/views/csstest.html | 17 ++- .../01_formatting/views/hello-world.html | 24 ---- .../04_css/01_formatting/views/hello.html | 25 ++--- .../04_css/01_formatting/views/selectors.html | 8 +- .../04_css/01_formatting/views/targets.html | 27 ++--- .../02_layout/public/css/floatstyles.css | 10 +- .../02_layout/public/css/menustyles.css | 4 +- .../04_css/02_layout/views/boxmodel.html | 36 +++--- exercises/04_css/02_layout/views/columns.html | 104 +++++++++-------- .../04_css/02_layout/views/floating.html | 85 +++++++------- exercises/04_css/02_layout/views/menu.html | 45 ++++---- solutions/03_html/01_syntax/coventry.html | 3 +- solutions/03_html/02_lists/computers80.html | 6 +- .../03_hypermedia/views/commodore64.html | 6 +- .../03_html/03_hypermedia/views/index.html | 30 ++--- .../03_html/03_hypermedia/views/spectrum.html | 3 +- solutions/04_css/01_formatting/comparison.css | 47 ++++++++ .../04_css/01_formatting}/comparison.html | 18 ++- .../04_css/01_formatting}/csstest.html | 30 +++-- solutions/04_css/01_formatting/selectors.css | 23 ++++ .../04_css/01_formatting}/selectors.html | 14 +-- solutions/04_css/01_formatting/test.css | 60 ++++++++++ solutions/04_css/02_layout/berries.css | 56 ++++++++++ solutions/04_css/02_layout/berries.html | 30 +++++ solutions/04_css/02_layout/boxstyles.css | 25 +++++ solutions/04_css/02_layout/columnstyles.css | 13 +++ solutions/04_css/02_layout/floating.html | 64 +++++++++++ solutions/04_css/02_layout/floatstyles.css | 22 ++++ solutions/04_css/02_layout/menu.html | 54 +++++++++ solutions/04_css/02_layout/menustyles.css | 53 +++++++++ 41 files changed, 731 insertions(+), 436 deletions(-) delete mode 100644 exercises/04_css/01_formatting/html/hello-world.html delete mode 100644 exercises/04_css/01_formatting/html/hello.html delete mode 100644 exercises/04_css/01_formatting/html/targets.html delete mode 100644 exercises/04_css/01_formatting/public/css/simple.css delete mode 100644 exercises/04_css/01_formatting/views/hello-world.html create mode 100644 solutions/04_css/01_formatting/comparison.css rename {exercises/04_css/01_formatting/html => solutions/04_css/01_formatting}/comparison.html (76%) rename {exercises/04_css/01_formatting/html => solutions/04_css/01_formatting}/csstest.html (74%) create mode 100644 solutions/04_css/01_formatting/selectors.css rename {exercises/04_css/01_formatting/html => solutions/04_css/01_formatting}/selectors.html (52%) create mode 100644 solutions/04_css/01_formatting/test.css create mode 100644 solutions/04_css/02_layout/berries.css create mode 100644 solutions/04_css/02_layout/berries.html create mode 100644 solutions/04_css/02_layout/boxstyles.css create mode 100644 solutions/04_css/02_layout/columnstyles.css create mode 100644 solutions/04_css/02_layout/floating.html create mode 100644 solutions/04_css/02_layout/floatstyles.css create mode 100644 solutions/04_css/02_layout/menu.html create mode 100644 solutions/04_css/02_layout/menustyles.css diff --git a/04 CSS3.md b/04 CSS3.md index 4630da37..0c442e20 100644 --- a/04 CSS3.md +++ b/04 CSS3.md @@ -5,7 +5,7 @@ Before you start you need to pull any _upstream changes_. Detailed instructions ## 1 Introduction to CSS3 -The purpose of HTML is to define the structure and contents of a website. It is not intended to contain any representational markups. CSS (Cascaded Style Sheets) is designed for that purpose. +The purpose of HTML is to define the structure and contents of a website. It is not intended to contain any representational markups. CSS (Cascading Style Sheets) is designed for that purpose. > CSS is amazingly powerful. As an example, click to visit [CSS Zen Garden](http://www.csszengarden.com). Different CSS files are applied to a single HTML file by clicking on the navigation links to the right of the screen. There's a book for it as well on [Amazon](http://www.amazon.co.uk/ZEN-CSS-Design-Visual-Enlightenment/dp/0321303474). @@ -14,9 +14,9 @@ This worksheet is split into two sections: 1. The basics of CSS 2. The CSS box model and layouts -In the first part of this lab, you do the following tasks, and it takes approximately 2 hours. +The first part of this lab takes approximately 2 hours, and you'll do the following tasks: -1. Perform basic formatting (colors, fonts, etc.) of your web pages. +1. Perform basic formatting (colours, fonts, etc.) of your web pages. 2. Use CSS classes and identifiers to pick the correct elements 3. Fine-tune your selection by picking nested elements and using pseudo elements. @@ -28,13 +28,6 @@ Start by locating the `exercises/04_css/01_formatting/` directory. This contains > This diagram was created using the `tree` command run inside the `01_formatting/` directory. -1. The `index.js` script is in the root directory and contains the routes served by the Express web server (just like the ones in the previous weeks). -2. The `package.json` includes all the _metadata_ for this project including the packages that need to be installed. To install all the required packages run `npm install`. -3. The HTML files that are served by the routes are stored in a directory called `html/`. -4. Any resources that are linked to the html document need to have their own external URLs and are kept in the `public/` directory. - 1. There are some CSS files which we will be editing. - 2. There are some images loaded by the web pages. - ``` . ├── index.js @@ -48,7 +41,6 @@ Start by locating the `exercises/04_css/01_formatting/` directory. This contains └── public ├── css │   ├── selectors.css - │   ├── simple.css │   └── targetstyles.css └── images ├── comparison.png @@ -56,15 +48,22 @@ Start by locating the `exercises/04_css/01_formatting/` directory. This contains └── tickmark.png ``` +1. The `index.js` script is in the root directory and contains the routes served by the Koa web server (just like the ones in the previous weeks). +2. The `package.json` file includes all the _metadata_ for this project, including the packages that need to be installed. To install all the required packages, run `npm install`. +3. The HTML files that are served by the routes are stored in the `views/` directory. +4. Any resources that are linked to the html document need to have their own external URLs and are kept in the `public/` directory. + 1. There are some CSS files which we will be editing. + 2. There are some images loaded by the web pages. + The purpose of a style sheet is to collect all information on how the pages in a website should be visually rendered, into one place. Ideally, all web pages in a site should be linked to one style sheet (one CSS file) that contains all visual formatting rules for the entire website. -This approach makes a clear separation between content and representation. The approach makes it easy to get a uniform outlook for the entire site. Moreover, one can easily build alternative views that may be strikingly different visually yet they share the same content. +>This approach creates a clear separation between content and representation, and makes it easy to get a uniform outlook for the entire site. Moreover, one can easily build alternative views that may be strikingly different visually yet share the same content. -1. Look at the `index.js` file and locate the base route (`/`). Notice that it loads the contents of the `html/hello.html` file and sends this to the browser. -2. In the `` tags you should see a `` tag which loads the `public/css/hello.css` stylesheet file. Note that the script defines all the files in the `public/` directory as publicly visible which means the contents of this folder are treated as being in the web server root directory. In simple terms we don't need to specify the `public/` directory in the path to the CSS file. -3. Now start the server (if you have not already done so) and view the base url. You will see the heading is coloured in red. +1. Look at the `index.js` file and locate the base route (`/`). Notice that it loads the contents of the `views/hello.html` file and sends this to the browser. +2. In the `` tags you should see a `` tag which loads the `public/css/hello.css` stylesheet file. Note that the script defines all the files in the `public/` directory as publicly visible which means the contents of this folder are treated as being in the web server root directory. In simple terms, we don't need to specify the `public/` directory in the path to the CSS file. +3. Now start the server (if you have not already done so) and view the base URL. You will see the heading is coloured in red. 1. Look at the `hello.css` file and see if you can figure out why this has happened. 2. Change the colour of the heading to a different [named colour](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). 4. Add the following to the css file and see what effect this has on the appearance of the web page. @@ -72,7 +71,7 @@ This approach makes a clear separation between content and representation. The a ```css body { - font-family: Arial, Verdana, sans-serif; + font-family: Arial, Helvetica, sans-serif; } h1, h2 { @@ -83,10 +82,10 @@ h1, h2 { Examine the CSS file and verify that you understand its contents. Pay attention to the following points: -- The file contains two rules. Each rule begins with the list of elements it has an effect on. The first rule is applied to the `body` element whilst the second rule is applied to `h1` and `h2` header elements. +- The file contains two rules. Each rule begins with the list of elements it has an effect on. The first rule is applied to the `body` element, while the second rule is applied to `h1` and `h2` header elements. - Followed by the element names (called selectors), there is a block starting with `{` and ending with `}`. This block contains a list of properties. - The first rule (applicable to the `body` element) contains one property for setting the font. -- The second rule (applicable to major headers) contains two properties, one for setting blue font color and the other for bold text. +- The second rule (applicable to major headers) contains two properties, one for setting blue font colour and the other for bold text. - The rules are automatically in effect in the nested subelements, so the font setting for `body` element applies to all elements in the page, including headers, lists, and paragraphs. - The fonts are given as a list of alternatives. The browser uses the first font in the list that it is capable of. The list should always end in a generic font such as `serif` or `sans-serif`. @@ -94,14 +93,14 @@ Examine the CSS file and verify that you understand its contents. Pay attention 1. View the `/test` url which should display a page about 1980s computers. 2. Create a new stylesheet in the `public/css/` directory called `test.css`. -3. Add a `h1` selector and apply a style to turn the headings _orange_. +3. Add an `h1` selector and apply a style to turn the headings _orange_. 4. Edit the `csstest.html` file and link to the spreadsheet. - 1. If you have done this correctly the heading should be orange when you refresh the browser! + - If you have done this correctly, the heading should be orange when you refresh the browser! 5. Spend time experimenting with different **selectors** and add new **rules** and **properties** to the file and see how they affect the web page. There is a complete list of CSS property names and possible values (among other information) at the [W3C Cascading Stylesheets documentation](http://www.w3.org/TR/CSS/) website. - 1. Add a border to each list and change the color of list items to dark grey. + 1. Add a border to each list and change the colour of list items to dark grey. 2. Indent the paragraphs and lists. 3. Make figure captions smaller and use bold face. - 4. Set a background color for the page. + 4. Set a background colour for the page. 6. Try specifying the page colours: 1. Using named colours ("red", "blue", etc.). 2. Specifying the same colours using RGB decimal values, eg `rgb(65,105,225)`. @@ -111,7 +110,7 @@ Examine the CSS file and verify that you understand its contents. Pay attention 1. Start by specifying the absolute size of the text by using _pixels_ (px) 2. Now change this to use _points_ (pt) 3. What is the change when you define the font sizes in _ems_. - 4. Finally change all font sizes are in percentages. + 4. Finally try font sizes in percentages. | Unit | Type | Meaning | |------|----------|----------------------------------------------------------| @@ -173,7 +172,7 @@ The paragraph element above belongs to two classes: `info` and `urgent`. #### 1.2.2 Identifiers -As seen before, multiple elements can belong to the same class. However, unique identifiers are a better option to generate rules that are applied only once. +As seen before, multiple elements can belong to the same class, however, unique identifiers are a better option to generate rules that are applied only once. This is marked in HTML by the identifier attribute: @@ -205,8 +204,8 @@ In the file, there are five paragraphs (`p`) and one header (`h1`). Verify that - The first and the second paragraphs are regular paragraph elements (start tag `

`). For these paragraphs, standard rules for `p` elements are applied. - The third and the fifth paragraphs are assigned a common class name (start tag `

`). For these paragraphs, standard rules for paragraphs are applied. In addition, rules for all `alert` class elements (`.alert`) are applied as well as those rules that are specific to paragraphs belonging to alert class (`p.alert`). - The fourth paragraph is supposed to have a unique formatting. Thus, it is assigned an identifier (start tag `

`). For this paragraph, standard paragraph rules plus rules specific to this identifier (#unique) apply. -- The header belongs to `alert` class like two of the paragraphs. It is affected by a rule that is targeted to all elements of `alert` class (`.alert`). In addition, all rules for `h1` would be applied but there is none. -- The rule for `body` element is applied to all elements as they are nested elements inside the body element. +- The header belongs to the `alert` class, like two of the paragraphs. It is affected by a rule that is targeted to all elements of the `alert` class (`.alert`). In addition, all rules for `h1` would be applied but there are none. +- The rule for the`body` element is applied to all elements as they are nested elements inside the body element. If a property of an element would be defined in multiple CSS rules, the rule whose selector has the highest specificity wins. For instance, the properties defined in a class-specific rule override the attributes defined in the general rule for the element. @@ -214,7 +213,7 @@ If a property of an element would be defined in multiple CSS rules, the rule who 1. Modify the `selectors.html` and `selectors.css` files so that the first, third, and fifth paragraph appear underlined (in addition to the existing formatting). You should achieve this with a single CSS rule. 2. In `csstest.html` file, add a paragraph about Basic programming to the bottom of the page (Basic was a common language for programming 80's home computers). Below the paragraph, add a sample program as below: - ``` + ```basic 10 PRINT "Hello, World" 20 INPUT "Continue (y/n)?", R$ 30 IF R$="y" THEN GOTO 10 @@ -257,7 +256,7 @@ ul li ul li ul { As the HTML file contains several list elements, nested and unnested, we can't make the correct elements as targets of the rules using a single element as a selector. However, CSS provides a straightforward way to achieve our goal. -- In the first rule, selector `ol > li` matches only those `li` elements that are direct children of the unordered list. +- In the first rule, selector `ol > li` matches only those `li` elements that are direct children of the ordered list. - In the second rule, those unordered lists are selected that appear in list items of a higher-level unordered list. Note that this rule applies to both the second and the third levels of the nested list in the example. - The third rule applies only to the third level (and potential deeper levels) in nested unordered lists. @@ -274,15 +273,15 @@ input[type="submit"] { } ``` -Of course, you can use also the normal selectors for elements like `form`, `legend`, `fieldset`, etc. Unfortunately support for styling form controls is inconsistent across browsers. +>Of course, you can also use the normal selectors for elements like `form`, `legend`, `fieldset`, etc. -Therefore, you should always check that the results are what is expected. +Unfortunately, support for styling form controls is inconsistent across browsers. Therefore, you should always check that the results are what is expected. #### 1.3.3 Nested and Pseudo Elements Pseudoelements allow formatting only certain parts of an element. Using pseudoelements, it is, for instance, possible to pick the first letter or line of a paragraph. -Add the following line into `simple.css` (that is linked to `csstest.html`): +Add the following lines to `test.css` (that is linked to `csstest.html`): ```css p::first-letter { @@ -326,7 +325,7 @@ As these approaches obscure the separation of content and presentation, their us #### 1.3.5 Test your Understanding -You need the aforementioned file `simple.css`. CSS pseudo elements `::before` and `::after` allow inserting content right before or after an element for stylistic purposes. These are normally used in conjunction with `content` property that specifies the content to be included. +You need the aforementioned file `test.css`. CSS pseudo elements `::before` and `::after` allow inserting content right before or after an element for stylistic purposes. These are normally used in conjunction with `content` property that specifies the content to be included. - Add a rule that adds the text `Note!` before each paragraph in `csstest.html`. - Add a rule that prints the image of a tick mark after each paragraph in `csstest.html`. A public domain tick mark image (Author: Kosta Kostov, via http://www.publicdomainpictures.net/) can be found in the lab's `public/images/` directory. @@ -347,7 +346,7 @@ In this section you will be doing the following tasks, it takes approximately 2 ### 2.1 CSS Box Model -First locate the `exercises/04_css/02_layout/` directory, start the Express server and open the `/boxmodel` route. This will display the contents of the `boxmodel.html` file. This will be used to illustrate the CSS box model which is vital for understanding how to set the dimensions, margins and paddings of elements in a web page. Check the contents of the file. You notice that it contains four paragraph elements, each labeled to belong to a different class. +First locate the `exercises/04_css/02_layout/` directory, start the Koa server and open the `/boxmodel` route. This will display the contents of the `boxmodel.html` file. This will be used to illustrate the CSS box model which is vital for understanding how to set the dimensions, margins and paddings of elements in a web page. Check the contents of the file. You notice that it contains four paragraph elements, each labeled to belong to a different class. Create a file called `boxstyles.css` in the correct directory and link it to the HTML file. @@ -384,13 +383,13 @@ Now, add rules for the remaining paragraph classes (two, three, four) to generat - class `two`: same border as for class `one`, no padding, 5em margins except for the top where no should be no margin. - class `three`: a 3-pixel wide solid black border only in the left edge of the paragraph, 1em padding except for the top where no padding is applied, 2em top margin, 8em bottom margin, no left and right margins. -- class `four`: a 5 pixels wide dashed red margin with rounded corners (1em radius). +- class `four`: a 5 pixels wide dashed red border with rounded corners (1em radius). Verify that all four paragraphs are displayed exactly as intended. #### 2.1.1 Developer tools -In Google Chrome browser, there are a built-in Developer Tools for viewing the layout of an individual element. It is an important tool for finding and correcting layout problems. Click options menu to the right of the menu bar, then More Tools ==> Developer Tools to view it. +In Google Chrome browser, there are a built-in Developer Tools for viewing the layout of an individual element. It is an important tool for finding and correcting layout problems. Press `ctrl+shift+i` or click options menu to the right of the menu bar, then More Tools -> Developer Tools to view it. ![](exercises/.images/03_tools.png) @@ -400,7 +399,7 @@ Alternatively, you can simply right-click on an element and select **Inspect**. #### 2.1.2 Test Your Understanding -The file `box_assignment.png` in the lab's `public/images/` directory contains an image of intended appearance for a webpage. Using CSS box model, construct an HTML page and the associated CSS file that reproduce the appearance of the image. +The file `box_assignment.png` in the lab's `public/images/` directory contains an image of intended appearance for a webpage. Using CSS box model, construct an HTML page and the associated CSS file that reproduce the appearance of the image. Don't forget to add the new route to the index.js file. In the lab's `public/images/` directory you also find the public domain image `berries.png` (author Scott Bauer, via http://commons.wikimedia.org) needed for this task. @@ -434,7 +433,7 @@ The HTML file contains one image tag. First, add an identifier for the figure ho ```html

-Onions + Onions
Onions are delicious.
``` @@ -453,12 +452,12 @@ Next, we make a floating fact box that contains multiple elements. Add the follo ```html
-

Did you know?

- +

Did you know?

+
``` @@ -491,11 +490,11 @@ Add the navigation information (using the HTML5 `nav` element) into the bottom o ```html + Nutrition + Recipes + Growing + History + ``` Note that the routes that the links point to do not exist. We could add them later. @@ -519,14 +518,14 @@ Note that the elements positioned using absolute positioning may appear on top o ```css body { - font-family: Arial, Verdana, sans-serif; + font-family: Arial, Helvetica, sans-serif; margin-left: 200px; } ``` #### 2.2.3 Test Your Understanding -1. Open file **columns.html**. Generate a style sheet **columnstyles.css** where the paragraphs are displayed in: +1. Open file **columns.html**. Generate a style sheet **columnstyles.css** (which is already linked to the HTML file) where the paragraphs are displayed in: 1. two columns 2. three columns 3. Search for CSS properties containing the word `column`. Currently, there are browser restrictions and inconsistencies in displaying multi-column content, but the workarounds are well documented. Try to take these into account in your CSS. @@ -536,15 +535,15 @@ body { The next task is to build a navigation menu bar to the website using CSS. Depending on the number of menu items, the menu bar can contain multi-level menus. -A menu bar can be defined as a HTML unordered list. Each menu in a menu bar is a list item. +A menu bar can be defined as an HTML unordered list. Each menu in a menu bar is a list item. The menus can contain submenus. A submenu is coded as a list that is within the parent menu's list item. -Open the `/menu` route and find the appropriate html and css files. +Open the `/menu` route and find the appropriate `.html` and `.css` files. Try the functionality of the two-level menu by hovering the mouse pointer over the **Item 1**, **Item 2**, and **Item 3** texts. The last two have submenus. -Examine, how the hierarchical menu was created using plain CSS. Note that the links are just dummies; they don't lead to any web pages. In the example, the barebones menu bar contains only minimum formatting that is necessary for correct layout. +Examine, how the hierarchical menu was created using plain CSS. Note that the links are just dummies: they don't lead to any web pages. In the example, the barebones menu bar contains only the minimum formatting that is necessary for correct layout. Important things to note: diff --git a/exercises/03_html/02_lists/computers80.html b/exercises/03_html/02_lists/computers80.html index 5c185f87..e4fafc19 100644 --- a/exercises/03_html/02_lists/computers80.html +++ b/exercises/03_html/02_lists/computers80.html @@ -1,11 +1,10 @@ - + 1980s' home computers - + -
A computer with a monitor @@ -28,5 +27,4 @@

The hardware charateristics of a home computer could be defined by its graphics and sound capabilities, CPU, and amount of memory.

- \ No newline at end of file diff --git a/exercises/03_html/03_hypermedia/views/commodore64.html b/exercises/03_html/03_hypermedia/views/commodore64.html index 3315d8a1..a98baa85 100644 --- a/exercises/03_html/03_hypermedia/views/commodore64.html +++ b/exercises/03_html/03_hypermedia/views/commodore64.html @@ -1,10 +1,9 @@ - + Commodore 64 - diff --git a/exercises/04_css/01_formatting/html/hello-world.html b/exercises/04_css/01_formatting/html/hello-world.html deleted file mode 100644 index 32dc15b0..00000000 --- a/exercises/04_css/01_formatting/html/hello-world.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - Document - - - - - - - - - - -
- - \ No newline at end of file diff --git a/exercises/04_css/01_formatting/html/hello.html b/exercises/04_css/01_formatting/html/hello.html deleted file mode 100644 index de2ff46d..00000000 --- a/exercises/04_css/01_formatting/html/hello.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - Let's see CSS at Work - - - - - -

Hello CSS!

-

Use this file to see how CSS can be used to change the appearance of a web page.

- - \ No newline at end of file diff --git a/exercises/04_css/01_formatting/html/targets.html b/exercises/04_css/01_formatting/html/targets.html deleted file mode 100644 index 5738cf46..00000000 --- a/exercises/04_css/01_formatting/html/targets.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - Selecting elements - - - - - -

Element selection demo

- -

The sources of energy are:

-
    -
  1. protein
    2. -
  2. carbohydrates
    3. -
  3. fat
    4. -
- -

Sources of carbohydrates:

- - - - - \ No newline at end of file diff --git a/exercises/04_css/01_formatting/public/css/hello.css b/exercises/04_css/01_formatting/public/css/hello.css index fb0e5d21..4717ad4b 100644 --- a/exercises/04_css/01_formatting/public/css/hello.css +++ b/exercises/04_css/01_formatting/public/css/hello.css @@ -1,4 +1,3 @@ - h1 { - color: red; + color: red; } \ No newline at end of file diff --git a/exercises/04_css/01_formatting/public/css/selectors.css b/exercises/04_css/01_formatting/public/css/selectors.css index 41f8b1cc..8a7ab42d 100644 --- a/exercises/04_css/01_formatting/public/css/selectors.css +++ b/exercises/04_css/01_formatting/public/css/selectors.css @@ -1,5 +1,5 @@ body { - font-family: Arial, Verdana, sans-serif; + font-family: Arial, Helvetica, sans-serif; } p { diff --git a/exercises/04_css/01_formatting/public/css/simple.css b/exercises/04_css/01_formatting/public/css/simple.css deleted file mode 100644 index 061fbf3b..00000000 --- a/exercises/04_css/01_formatting/public/css/simple.css +++ /dev/null @@ -1,9 +0,0 @@ -body { - font-family: Arial, Verdana, sans-serif; -} - -h1, -h2 { - color: blue; - font-weight: bold; -} \ No newline at end of file diff --git a/exercises/04_css/01_formatting/public/css/targetstyles.css b/exercises/04_css/01_formatting/public/css/targetstyles.css index 7cebbae5..8843f31f 100644 --- a/exercises/04_css/01_formatting/public/css/targetstyles.css +++ b/exercises/04_css/01_formatting/public/css/targetstyles.css @@ -1,3 +1,3 @@ body { - font-family: Arial, Verdana, sans-serif; + font-family: Arial, Helvetica, sans-serif; } diff --git a/exercises/04_css/01_formatting/views/comparison.html b/exercises/04_css/01_formatting/views/comparison.html index 42b0dda9..a0e45264 100644 --- a/exercises/04_css/01_formatting/views/comparison.html +++ b/exercises/04_css/01_formatting/views/comparison.html @@ -1,11 +1,10 @@ - + Comparison of three computers - + -

A comparison of technical data of three popular 80's home computers:

@@ -21,28 +20,24 @@ - CPU + CPU MOS Technology 6510 Zilog Z80 MOS Technology 6502 - RAM + RAM 64 kilobytes 16 or 64 kilobytes 5 kilobytes - ROM + ROM 20 kilobytes 16 kilobytes 16 kilobytes - -
- - \ No newline at end of file diff --git a/exercises/04_css/01_formatting/views/csstest.html b/exercises/04_css/01_formatting/views/csstest.html index 0791d1a4..4880a54c 100644 --- a/exercises/04_css/01_formatting/views/csstest.html +++ b/exercises/04_css/01_formatting/views/csstest.html @@ -1,9 +1,9 @@ - - + + Vintage Home Computers - +
@@ -11,8 +11,8 @@

In early 1980's, home computers became mainstream. For the first time, computers could be purchased by an average family household.

- A computer with a monitor -
Photo: Piotr Siedlecki, public domain via http://www.publicdomainpictures.net.
+ A computer with a monitor +
Photo: Piotr Siedlecki, public domain via http://www.publicdomainpictures.net.

Novel uses

The main usage for a home computer was, of course, games. As cool games may not be a valid reason for purchasing an expensive gadget, @@ -47,10 +47,7 @@

- -
+

Disclaimer: All opinions in this page reflect the views of their author(s), not the organization.

- - - + \ No newline at end of file diff --git a/exercises/04_css/01_formatting/views/hello-world.html b/exercises/04_css/01_formatting/views/hello-world.html deleted file mode 100644 index 32dc15b0..00000000 --- a/exercises/04_css/01_formatting/views/hello-world.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - Document - - - - - - - - - - -
- - \ No newline at end of file diff --git a/exercises/04_css/01_formatting/views/hello.html b/exercises/04_css/01_formatting/views/hello.html index de2ff46d..cce2dd6e 100644 --- a/exercises/04_css/01_formatting/views/hello.html +++ b/exercises/04_css/01_formatting/views/hello.html @@ -1,16 +1,15 @@ - - + - - - Let's see CSS at Work - - - - - -

Hello CSS!

-

Use this file to see how CSS can be used to change the appearance of a web page.

- + + Let's see CSS at Work + + + + + + +

Hello CSS!

+

Use this file to see how CSS can be used to change the appearance of a web page.

+ \ No newline at end of file diff --git a/exercises/04_css/01_formatting/views/selectors.html b/exercises/04_css/01_formatting/views/selectors.html index 771ea37f..c06c258b 100644 --- a/exercises/04_css/01_formatting/views/selectors.html +++ b/exercises/04_css/01_formatting/views/selectors.html @@ -1,9 +1,10 @@ - + + Selectors - - + +

Classes and identifiers.

@@ -17,6 +18,5 @@

This paragraph should be uniquely formatted. It is assigned an identifier.

This paragraph is in 'alert' class, too.

- \ No newline at end of file diff --git a/exercises/04_css/01_formatting/views/targets.html b/exercises/04_css/01_formatting/views/targets.html index 5738cf46..001e9655 100644 --- a/exercises/04_css/01_formatting/views/targets.html +++ b/exercises/04_css/01_formatting/views/targets.html @@ -1,40 +1,35 @@ - + + Selecting elements - - + + -

Element selection demo

-

The sources of energy are:

  1. protein
  2. carbohydrates
  3. fat
-

Sources of carbohydrates:

- - \ No newline at end of file diff --git a/exercises/04_css/02_layout/public/css/floatstyles.css b/exercises/04_css/02_layout/public/css/floatstyles.css index 92edd7b0..12f64d84 100644 --- a/exercises/04_css/02_layout/public/css/floatstyles.css +++ b/exercises/04_css/02_layout/public/css/floatstyles.css @@ -1,10 +1,4 @@ - body { - font-family: Arial, Verdana, sans-serif; + font-family: Arial, Helvetica, sans-serif; margin-left: 200px; -} - - - - - +} \ No newline at end of file diff --git a/exercises/04_css/02_layout/public/css/menustyles.css b/exercises/04_css/02_layout/public/css/menustyles.css index 78aadc59..c90a2fcc 100644 --- a/exercises/04_css/02_layout/public/css/menustyles.css +++ b/exercises/04_css/02_layout/public/css/menustyles.css @@ -1,7 +1,5 @@ - - body { - font-family: Arial, Verdana, sans-serif; + font-family: Arial, Helvetica, sans-serif; } nav ul { diff --git a/exercises/04_css/02_layout/views/boxmodel.html b/exercises/04_css/02_layout/views/boxmodel.html index 5f488c4e..93224c08 100644 --- a/exercises/04_css/02_layout/views/boxmodel.html +++ b/exercises/04_css/02_layout/views/boxmodel.html @@ -1,27 +1,25 @@ - + + Illustration of CSS box model - + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in malesuada libero. Etiam consectetur enim enim, id porta neque facilisis non. Proin consequat a sapien eu consectetur. Quisque bibendum lorem tortor, nec facilisis risus venenatis vel. Nullam et nunc varius, elementum mi vitae, mattis lacus. Mauris et lacinia magna. Nam faucibus purus ac felis vulputate suscipit. Sed vitae est egestas, euismod neque eu, molestie leo. +

+ +

+ Fusce viverra enim ante, vel dapibus metus maximus et. Proin ac metus justo. Donec nec scelerisque ante. Vestibulum a lectus nisl. Curabitur dictum a purus non sagittis. Cras semper ipsum ut eros lobortis vestibulum. Aenean eu urna nulla. Quisque mattis ex nec odio sollicitudin, a pulvinar nibh faucibus. Nullam quis rutrum purus, nec condimentum est. Aenean sagittis feugiat ante, sit amet dignissim elit vulputate ac. Aenean nec erat blandit, posuere orci malesuada, aliquam sem. Ut rutrum neque nec sapien consectetur dignissim. +

+ +

+ Nam odio lectus, accumsan vitae dignissim vitae, condimentum eu ipsum. Ut tristique vel leo at condimentum. Quisque tincidunt et tellus ut feugiat. Proin consectetur nulla eu fringilla cursus. Vivamus mi tellus, consectetur vitae commodo vitae, placerat sit amet nisl. Vestibulum et porttitor est. Cras varius quam a enim commodo consequat. Ut egestas dapibus est, a varius enim tincidunt ac. Quisque scelerisque ante quis porta mollis. Mauris nec maximus orci. Nunc ac justo ut nisl euismod vehicula in lacinia ante. Nulla sollicitudin nisi posuere, volutpat lorem nec, sagittis purus. Duis suscipit vulputate purus ac vulputate. Pellentesque suscipit ornare mi, et finibus tortor rutrum eget. +

- -

-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in malesuada libero. Etiam consectetur enim enim, id porta neque facilisis non. Proin consequat a sapien eu consectetur. Quisque bibendum lorem tortor, nec facilisis risus venenatis vel. Nullam et nunc varius, elementum mi vitae, mattis lacus. Mauris et lacinia magna. Nam faucibus purus ac felis vulputate suscipit. Sed vitae est egestas, euismod neque eu, molestie leo. -

- -

-Fusce viverra enim ante, vel dapibus metus maximus et. Proin ac metus justo. Donec nec scelerisque ante. Vestibulum a lectus nisl. Curabitur dictum a purus non sagittis. Cras semper ipsum ut eros lobortis vestibulum. Aenean eu urna nulla. Quisque mattis ex nec odio sollicitudin, a pulvinar nibh faucibus. Nullam quis rutrum purus, nec condimentum est. Aenean sagittis feugiat ante, sit amet dignissim elit vulputate ac. Aenean nec erat blandit, posuere orci malesuada, aliquam sem. Ut rutrum neque nec sapien consectetur dignissim. -

- -

-Nam odio lectus, accumsan vitae dignissim vitae, condimentum eu ipsum. Ut tristique vel leo at condimentum. Quisque tincidunt et tellus ut feugiat. Proin consectetur nulla eu fringilla cursus. Vivamus mi tellus, consectetur vitae commodo vitae, placerat sit amet nisl. Vestibulum et porttitor est. Cras varius quam a enim commodo consequat. Ut egestas dapibus est, a varius enim tincidunt ac. Quisque scelerisque ante quis porta mollis. Mauris nec maximus orci. Nunc ac justo ut nisl euismod vehicula in lacinia ante. Nulla sollicitudin nisi posuere, volutpat lorem nec, sagittis purus. Duis suscipit vulputate purus ac vulputate. Pellentesque suscipit ornare mi, et finibus tortor rutrum eget. -

- -

-In at ipsum id ligula vehicula porttitor. Suspendisse in risus vitae nunc lacinia lacinia. Cras finibus diam odio, vel posuere justo vestibulum tempor. Integer sed pharetra lacus. Integer elit mauris, vehicula ut tortor ut, vehicula iaculis odio. Integer tincidunt tincidunt quam, a laoreet sem mollis porta. Sed consequat sagittis urna quis aliquet. Proin vitae orci ultrices nisi rutrum blandit. -

- +

+ In at ipsum id ligula vehicula porttitor. Suspendisse in risus vitae nunc lacinia lacinia. Cras finibus diam odio, vel posuere justo vestibulum tempor. Integer sed pharetra lacus. Integer elit mauris, vehicula ut tortor ut, vehicula iaculis odio. Integer tincidunt tincidunt quam, a laoreet sem mollis porta. Sed consequat sagittis urna quis aliquet. Proin vitae orci ultrices nisi rutrum blandit. +

\ No newline at end of file diff --git a/exercises/04_css/02_layout/views/columns.html b/exercises/04_css/02_layout/views/columns.html index 7f84098d..012ff8cc 100644 --- a/exercises/04_css/02_layout/views/columns.html +++ b/exercises/04_css/02_layout/views/columns.html @@ -1,61 +1,59 @@ - + + Test file for CSS formatting - + + -

Text to be formatted in columns

- - -

-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris efficitur nisi nulla, condimentum suscipit tellus ullamcorper in. In vulputate leo vitae orci lacinia, at feugiat leo ullamcorper. Morbi malesuada consectetur dolor, et luctus massa lacinia id. Ut interdum egestas luctus. Vivamus ac orci tristique, mattis dui ut, auctor leo. Nulla commodo, ante id blandit tempor, diam ante pellentesque lectus, ac iaculis enim tortor a mi. Morbi orci quam, dictum id nibh eget, mollis ultricies erat. Pellentesque porttitor leo ut laoreet convallis. Praesent porttitor sapien nec lacus ullamcorper, sed euismod risus sagittis. Curabitur non ultricies diam. Suspendisse ac eros in ante fringilla interdum et nec justo. Proin ac massa eleifend, tincidunt purus sit amet, hendrerit leo. Fusce ac nisl tempus, pellentesque lacus eu, mattis quam. Quisque et erat tortor. Sed at egestas erat. -

- -

-Cras pharetra feugiat orci, sed aliquam felis condimentum vel. Quisque id nunc nulla. Aliquam efficitur sagittis pulvinar. In aliquam ac lacus et consequat. In dapibus condimentum vulputate. Aliquam dictum ut sapien nec condimentum. Vestibulum non facilisis nisi. Donec dictum risus et est rutrum consectetur. Integer nec aliquet ex, egestas convallis velit. Sed egestas dolor id suscipit imperdiet. Vestibulum malesuada tincidunt urna, eu rutrum orci luctus ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent iaculis aliquam elit eu porttitor. Phasellus tincidunt massa id sem placerat, nec cursus ipsum porta. Integer diam magna, consequat eget sodales id, placerat in ante. Nam et enim at ipsum sodales commodo. -

- -

-Curabitur faucibus elit in sapien dapibus, vel tristique ligula lacinia. Morbi non ex dapibus, viverra mi eget, efficitur dui. Fusce hendrerit turpis eget justo consequat, in tempus mauris vestibulum. Sed sed rutrum odio. Curabitur eget ipsum imperdiet, accumsan lectus vitae, fermentum justo. Integer quam ex, rhoncus sit amet sem ut, tincidunt fermentum eros. In hac habitasse platea dictumst. Duis posuere lectus nec ex suscipit accumsan. Vivamus lectus ante, porttitor a semper id, ullamcorper et erat. Phasellus sed velit ac risus ultrices porttitor non vel neque. Proin porttitor turpis vitae pretium vehicula. Proin pellentesque urna at iaculis tristique. -

- -

-Fusce suscipit, ex ac pretium pretium, magna mauris condimentum nisi, id porta sapien est ac turpis. Nulla sit amet blandit metus. Morbi a arcu facilisis, consequat dui vitae, dapibus lacus. Etiam vestibulum nisl consequat enim condimentum lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum elementum ac metus ac aliquam. Nulla quis massa venenatis diam convallis sodales. Duis quis lobortis nibh. Sed dolor justo, condimentum non orci sit amet, efficitur maximus est. Sed gravida vulputate condimentum. Maecenas libero ex, condimentum quis blandit quis, tincidunt vitae risus. Morbi ultricies eu arcu nec faucibus. -

- -

-Donec a vehicula neque, ac efficitur augue. In malesuada laoreet fringilla. Proin est massa, mattis at iaculis eu, auctor eu nibh. Sed tempus, felis eget dapibus commodo, enim neque ultricies ex, nec convallis dui nisl quis neque. Suspendisse potenti. Curabitur ac finibus ipsum, sit amet egestas felis. Sed cursus, est faucibus tempor lobortis, nisl ante blandit lectus, sit amet tincidunt justo tortor eget elit. Aliquam erat volutpat. Aenean enim nisl, tincidunt eleifend nisl ut, egestas laoreet massa. -

- -

-Sed vitae venenatis diam. Nulla consectetur nisl justo, vel rutrum diam volutpat eu. Proin dictum mi eu elementum gravida. Nunc tristique, lorem sit amet placerat ornare, libero tortor iaculis nibh, non accumsan turpis nulla nec elit. Nunc sed dui lorem. Quisque velit sem, sagittis eget mauris a, bibendum viverra ligula. Nam posuere tincidunt leo. Aenean a volutpat lacus. Maecenas condimentum, purus sit amet accumsan varius, arcu sem fringilla enim, nec sodales urna odio eu ante. Morbi ut suscipit mi. Ut rutrum urna purus, sit amet tristique diam mattis vel. Nunc pharetra, risus ac rutrum consequat, arcu quam dignissim nibh, eget pretium enim metus cursus felis. Pellentesque purus dui, imperdiet at nulla sed, accumsan posuere diam. Vestibulum varius condimentum ex, vulputate tempus mauris congue id. Sed ullamcorper mauris sed diam convallis dapibus. Vestibulum dictum sit amet mauris eu hendrerit. -

- -

-Vestibulum condimentum dui ac mi accumsan, eu interdum augue sollicitudin. Donec rutrum iaculis turpis et ultrices. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum consequat feugiat elit, sed malesuada tortor tristique eget. Quisque et elementum lacus. Sed nec tincidunt nisl. Curabitur tincidunt lorem a dolor tincidunt mattis. Nullam vehicula vulputate enim, eu lacinia ex imperdiet semper. Cras sollicitudin magna quis orci lacinia facilisis. Vivamus mauris odio, pharetra a est et, tempus congue purus. Mauris urna felis, ornare quis sem blandit, scelerisque molestie nunc. Sed pulvinar sagittis nulla sit amet dapibus. Nunc hendrerit, metus vel rutrum pharetra, tellus magna accumsan felis, quis venenatis dolor dui vel leo. Aliquam erat volutpat. Sed egestas in lorem id malesuada. -

- -

-Cras risus sem, euismod nec porta sagittis, ornare vitae orci. Sed tristique, neque sit amet interdum eleifend, massa augue varius magna, sed tempor neque risus et lacus. Curabitur a ullamcorper lorem, vel gravida eros. Phasellus vitae convallis diam. Proin tempor, diam nec congue aliquet, libero dolor rhoncus magna, at dapibus quam purus nec orci. Proin sed vehicula tortor, id consequat ligula. Maecenas nunc magna, rutrum non malesuada id, facilisis eget tortor. Curabitur quis lacus non lectus interdum dapibus. Donec interdum varius tempus. Nunc convallis suscipit placerat. Integer facilisis sapien ut risus placerat, id vehicula neque pretium. Ut non bibendum risus. -

- -

-Vivamus sagittis augue turpis, quis convallis risus sagittis eu. Donec suscipit pharetra elit, non faucibus purus accumsan a. Suspendisse at tincidunt elit, vel aliquam felis. Curabitur pretium, quam nec volutpat bibendum, purus nisl rhoncus nibh, ut posuere ex odio non orci. Mauris eget lobortis nisl. Mauris sapien justo, tristique vulputate velit mollis, convallis mollis magna. In ante leo, pretium eget nibh at, malesuada scelerisque erat. Vestibulum finibus ultrices sollicitudin. Vivamus odio ex, vestibulum nec commodo sed, sagittis in orci. Donec aliquam arcu varius faucibus mattis. Mauris eleifend eros at volutpat auctor. Aenean vel ligula at velit sodales consectetur in a massa. In vitae rhoncus felis, non fringilla lorem. Maecenas vel pharetra dui, vel sodales est. In sodales nulla orci, id consectetur felis malesuada at. -

- -

-Donec elementum, arcu quis maximus congue, neque ante convallis leo, quis cursus enim augue vitae justo. Nam mattis sed arcu eget ornare. Integer dignissim dui nec egestas tristique. Aliquam erat volutpat. Cras eget tortor diam. In hac habitasse platea dictumst. Integer tempus egestas felis eget mollis. Nam a neque accumsan erat auctor condimentum. Etiam quis venenatis lectus. Praesent sed lacus in massa lacinia tempor. Pellentesque laoreet metus vel augue gravida, in iaculis velit ultricies. Donec porta faucibus volutpat. Vestibulum in risus velit. -

- -

-Aenean lacinia justo efficitur tellus mattis, ac pellentesque elit finibus. Curabitur et diam turpis. Curabitur lobortis nec ipsum nec eleifend. Proin pulvinar, neque eget consectetur ornare, sem eros posuere neque, vel mattis dui risus vitae nisl. Nulla non sollicitudin lacus, sed faucibus ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In fermentum eget elit sed fringilla. Curabitur viverra justo diam, quis vehicula turpis tristique quis. Proin ultrices elit risus. Praesent scelerisque metus ut augue suscipit, id pretium enim consectetur. Ut pulvinar malesuada rutrum. -

- -

-Nunc vel quam consequat, eleifend lectus porttitor, fringilla sapien. Integer id semper arcu, ut luctus nulla. Duis id risus ac erat mollis auctor sed in leo. Mauris dignissim ligula at nulla gravida tempor. Integer fringilla venenatis accumsan. In semper facilisis nisi sit amet commodo. Nulla dapibus nunc eu hendrerit suscipit. -

- +

Text to be formatted in columns

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris efficitur nisi nulla, condimentum suscipit tellus ullamcorper in. In vulputate leo vitae orci lacinia, at feugiat leo ullamcorper. Morbi malesuada consectetur dolor, et luctus massa lacinia id. Ut interdum egestas luctus. Vivamus ac orci tristique, mattis dui ut, auctor leo. Nulla commodo, ante id blandit tempor, diam ante pellentesque lectus, ac iaculis enim tortor a mi. Morbi orci quam, dictum id nibh eget, mollis ultricies erat. Pellentesque porttitor leo ut laoreet convallis. Praesent porttitor sapien nec lacus ullamcorper, sed euismod risus sagittis. Curabitur non ultricies diam. Suspendisse ac eros in ante fringilla interdum et nec justo. Proin ac massa eleifend, tincidunt purus sit amet, hendrerit leo. Fusce ac nisl tempus, pellentesque lacus eu, mattis quam. Quisque et erat tortor. Sed at egestas erat. +

+ +

+ Cras pharetra feugiat orci, sed aliquam felis condimentum vel. Quisque id nunc nulla. Aliquam efficitur sagittis pulvinar. In aliquam ac lacus et consequat. In dapibus condimentum vulputate. Aliquam dictum ut sapien nec condimentum. Vestibulum non facilisis nisi. Donec dictum risus et est rutrum consectetur. Integer nec aliquet ex, egestas convallis velit. Sed egestas dolor id suscipit imperdiet. Vestibulum malesuada tincidunt urna, eu rutrum orci luctus ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent iaculis aliquam elit eu porttitor. Phasellus tincidunt massa id sem placerat, nec cursus ipsum porta. Integer diam magna, consequat eget sodales id, placerat in ante. Nam et enim at ipsum sodales commodo. +

+ +

+ Curabitur faucibus elit in sapien dapibus, vel tristique ligula lacinia. Morbi non ex dapibus, viverra mi eget, efficitur dui. Fusce hendrerit turpis eget justo consequat, in tempus mauris vestibulum. Sed sed rutrum odio. Curabitur eget ipsum imperdiet, accumsan lectus vitae, fermentum justo. Integer quam ex, rhoncus sit amet sem ut, tincidunt fermentum eros. In hac habitasse platea dictumst. Duis posuere lectus nec ex suscipit accumsan. Vivamus lectus ante, porttitor a semper id, ullamcorper et erat. Phasellus sed velit ac risus ultrices porttitor non vel neque. Proin porttitor turpis vitae pretium vehicula. Proin pellentesque urna at iaculis tristique. +

+ +

+ Fusce suscipit, ex ac pretium pretium, magna mauris condimentum nisi, id porta sapien est ac turpis. Nulla sit amet blandit metus. Morbi a arcu facilisis, consequat dui vitae, dapibus lacus. Etiam vestibulum nisl consequat enim condimentum lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum elementum ac metus ac aliquam. Nulla quis massa venenatis diam convallis sodales. Duis quis lobortis nibh. Sed dolor justo, condimentum non orci sit amet, efficitur maximus est. Sed gravida vulputate condimentum. Maecenas libero ex, condimentum quis blandit quis, tincidunt vitae risus. Morbi ultricies eu arcu nec faucibus. +

+ +

+ Donec a vehicula neque, ac efficitur augue. In malesuada laoreet fringilla. Proin est massa, mattis at iaculis eu, auctor eu nibh. Sed tempus, felis eget dapibus commodo, enim neque ultricies ex, nec convallis dui nisl quis neque. Suspendisse potenti. Curabitur ac finibus ipsum, sit amet egestas felis. Sed cursus, est faucibus tempor lobortis, nisl ante blandit lectus, sit amet tincidunt justo tortor eget elit. Aliquam erat volutpat. Aenean enim nisl, tincidunt eleifend nisl ut, egestas laoreet massa. +

+ +

+ Sed vitae venenatis diam. Nulla consectetur nisl justo, vel rutrum diam volutpat eu. Proin dictum mi eu elementum gravida. Nunc tristique, lorem sit amet placerat ornare, libero tortor iaculis nibh, non accumsan turpis nulla nec elit. Nunc sed dui lorem. Quisque velit sem, sagittis eget mauris a, bibendum viverra ligula. Nam posuere tincidunt leo. Aenean a volutpat lacus. Maecenas condimentum, purus sit amet accumsan varius, arcu sem fringilla enim, nec sodales urna odio eu ante. Morbi ut suscipit mi. Ut rutrum urna purus, sit amet tristique diam mattis vel. Nunc pharetra, risus ac rutrum consequat, arcu quam dignissim nibh, eget pretium enim metus cursus felis. Pellentesque purus dui, imperdiet at nulla sed, accumsan posuere diam. Vestibulum varius condimentum ex, vulputate tempus mauris congue id. Sed ullamcorper mauris sed diam convallis dapibus. Vestibulum dictum sit amet mauris eu hendrerit. +

+ +

+ Vestibulum condimentum dui ac mi accumsan, eu interdum augue sollicitudin. Donec rutrum iaculis turpis et ultrices. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum consequat feugiat elit, sed malesuada tortor tristique eget. Quisque et elementum lacus. Sed nec tincidunt nisl. Curabitur tincidunt lorem a dolor tincidunt mattis. Nullam vehicula vulputate enim, eu lacinia ex imperdiet semper. Cras sollicitudin magna quis orci lacinia facilisis. Vivamus mauris odio, pharetra a est et, tempus congue purus. Mauris urna felis, ornare quis sem blandit, scelerisque molestie nunc. Sed pulvinar sagittis nulla sit amet dapibus. Nunc hendrerit, metus vel rutrum pharetra, tellus magna accumsan felis, quis venenatis dolor dui vel leo. Aliquam erat volutpat. Sed egestas in lorem id malesuada. +

+ +

+ Cras risus sem, euismod nec porta sagittis, ornare vitae orci. Sed tristique, neque sit amet interdum eleifend, massa augue varius magna, sed tempor neque risus et lacus. Curabitur a ullamcorper lorem, vel gravida eros. Phasellus vitae convallis diam. Proin tempor, diam nec congue aliquet, libero dolor rhoncus magna, at dapibus quam purus nec orci. Proin sed vehicula tortor, id consequat ligula. Maecenas nunc magna, rutrum non malesuada id, facilisis eget tortor. Curabitur quis lacus non lectus interdum dapibus. Donec interdum varius tempus. Nunc convallis suscipit placerat. Integer facilisis sapien ut risus placerat, id vehicula neque pretium. Ut non bibendum risus. +

+ +

+ Vivamus sagittis augue turpis, quis convallis risus sagittis eu. Donec suscipit pharetra elit, non faucibus purus accumsan a. Suspendisse at tincidunt elit, vel aliquam felis. Curabitur pretium, quam nec volutpat bibendum, purus nisl rhoncus nibh, ut posuere ex odio non orci. Mauris eget lobortis nisl. Mauris sapien justo, tristique vulputate velit mollis, convallis mollis magna. In ante leo, pretium eget nibh at, malesuada scelerisque erat. Vestibulum finibus ultrices sollicitudin. Vivamus odio ex, vestibulum nec commodo sed, sagittis in orci. Donec aliquam arcu varius faucibus mattis. Mauris eleifend eros at volutpat auctor. Aenean vel ligula at velit sodales consectetur in a massa. In vitae rhoncus felis, non fringilla lorem. Maecenas vel pharetra dui, vel sodales est. In sodales nulla orci, id consectetur felis malesuada at. +

+ +

+ Donec elementum, arcu quis maximus congue, neque ante convallis leo, quis cursus enim augue vitae justo. Nam mattis sed arcu eget ornare. Integer dignissim dui nec egestas tristique. Aliquam erat volutpat. Cras eget tortor diam. In hac habitasse platea dictumst. Integer tempus egestas felis eget mollis. Nam a neque accumsan erat auctor condimentum. Etiam quis venenatis lectus. Praesent sed lacus in massa lacinia tempor. Pellentesque laoreet metus vel augue gravida, in iaculis velit ultricies. Donec porta faucibus volutpat. Vestibulum in risus velit. +

+ +

+ Aenean lacinia justo efficitur tellus mattis, ac pellentesque elit finibus. Curabitur et diam turpis. Curabitur lobortis nec ipsum nec eleifend. Proin pulvinar, neque eget consectetur ornare, sem eros posuere neque, vel mattis dui risus vitae nisl. Nulla non sollicitudin lacus, sed faucibus ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In fermentum eget elit sed fringilla. Curabitur viverra justo diam, quis vehicula turpis tristique quis. Proin ultrices elit risus. Praesent scelerisque metus ut augue suscipit, id pretium enim consectetur. Ut pulvinar malesuada rutrum. +

+

+ Nunc vel quam consequat, eleifend lectus porttitor, fringilla sapien. Integer id semper arcu, ut luctus nulla. Duis id risus ac erat mollis auctor sed in leo. Mauris dignissim ligula at nulla gravida tempor. Integer fringilla venenatis accumsan. In semper facilisis nisi sit amet commodo. Nulla dapibus nunc eu hendrerit suscipit. +

\ No newline at end of file diff --git a/exercises/04_css/02_layout/views/floating.html b/exercises/04_css/02_layout/views/floating.html index d45bda94..cfb936a6 100644 --- a/exercises/04_css/02_layout/views/floating.html +++ b/exercises/04_css/02_layout/views/floating.html @@ -1,53 +1,48 @@ - + + Illustration of a floating element - - + + +

Onions

+
+

Onions in cooking

+ +
+ Onions +
Image: Petr Kratochvil, public domain via www.publicdomainpictures.net.
+
+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in malesuada libero. Etiam consectetur enim enim, id porta neque facilisis non. Proin consequat a sapien eu consectetur. Quisque bibendum lorem tortor, nec facilisis risus venenatis vel. Nullam et nunc varius, elementum mi vitae, mattis lacus. Mauris et lacinia magna. Nam faucibus purus ac felis vulputate suscipit. Sed vitae est egestas, euismod neque eu, molestie leo. +

+ +

+ Fusce viverra enim ante, vel dapibus metus maximus et. Proin ac metus justo. Donec nec scelerisque ante. Vestibulum a lectus nisl. Curabitur dictum a purus non sagittis. Cras semper ipsum ut eros lobortis vestibulum. Aenean eu urna nulla. Quisque mattis ex nec odio sollicitudin, a pulvinar nibh faucibus. Nullam quis rutrum purus, nec condimentum est. Aenean sagittis feugiat ante, sit amet dignissim elit vulputate ac. Aenean nec erat blandit, posuere orci malesuada, aliquam sem. Ut rutrum neque nec sapien consectetur dignissim. +

+ +

+ Nam odio lectus, accumsan vitae dignissim vitae, condimentum eu ipsum. Ut tristique vel leo at condimentum. Quisque tincidunt et tellus ut feugiat. Proin consectetur nulla eu fringilla cursus. Vivamus mi tellus, consectetur vitae commodo vitae, placerat sit amet nisl. Vestibulum et porttitor est. Cras varius quam a enim commodo consequat. Ut egestas dapibus est, a varius enim tincidunt ac. Quisque scelerisque ante quis porta mollis. Mauris nec maximus orci. Nunc ac justo ut nisl euismod vehicula in lacinia ante. Nulla sollicitudin nisi posuere, volutpat lorem nec, sagittis purus. Duis suscipit vulputate purus ac vulputate. Pellentesque suscipit ornare mi, et finibus tortor rutrum eget. +

+ +

+ In at ipsum id ligula vehicula porttitor. Suspendisse in risus vitae nunc lacinia lacinia. Cras finibus diam odio, vel posuere justo vestibulum tempor. Integer sed pharetra lacus. Integer elit mauris, vehicula ut tortor ut, vehicula iaculis odio. Integer tincidunt tincidunt quam, a laoreet sem mollis porta. Sed consequat sagittis urna quis aliquet. Proin vitae orci ultrices nisi rutrum blandit. +

+ +

+ Mauris dapibus auctor diam sit amet euismod. Sed in nibh augue. Mauris porttitor consequat egestas. Mauris consectetur commodo blandit. Suspendisse faucibus tristique nulla, in maximus elit feugiat nec. Mauris sagittis orci eu elit mattis lacinia. Donec molestie risus sed urna maximus eleifend. Nunc accumsan facilisis eros et vestibulum. +

+ +

+ Sed dui turpis, pellentesque egestas eleifend eget, accumsan id dolor. Vestibulum suscipit in urna at semper. Curabitur luctus eros et luctus rhoncus. Sed ac ipsum dolor. Integer ex sapien, egestas quis sapien vel, fringilla aliquam libero. In sapien eros, feugiat quis auctor at, facilisis sit amet magna. Fusce leo ex, viverra quis gravida sit amet, faucibus a quam. Cras tempus lorem vitae metus cursus malesuada. +

-

Onions

- -
- -

Onions in cooking

- -
-Onions -
Image: Petr Kratochvil, public domain via www.publicdomainpictures.net.
-
- -

-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in malesuada libero. Etiam consectetur enim enim, id porta neque facilisis non. Proin consequat a sapien eu consectetur. Quisque bibendum lorem tortor, nec facilisis risus venenatis vel. Nullam et nunc varius, elementum mi vitae, mattis lacus. Mauris et lacinia magna. Nam faucibus purus ac felis vulputate suscipit. Sed vitae est egestas, euismod neque eu, molestie leo. -

- -

-Fusce viverra enim ante, vel dapibus metus maximus et. Proin ac metus justo. Donec nec scelerisque ante. Vestibulum a lectus nisl. Curabitur dictum a purus non sagittis. Cras semper ipsum ut eros lobortis vestibulum. Aenean eu urna nulla. Quisque mattis ex nec odio sollicitudin, a pulvinar nibh faucibus. Nullam quis rutrum purus, nec condimentum est. Aenean sagittis feugiat ante, sit amet dignissim elit vulputate ac. Aenean nec erat blandit, posuere orci malesuada, aliquam sem. Ut rutrum neque nec sapien consectetur dignissim. -

- -

-Nam odio lectus, accumsan vitae dignissim vitae, condimentum eu ipsum. Ut tristique vel leo at condimentum. Quisque tincidunt et tellus ut feugiat. Proin consectetur nulla eu fringilla cursus. Vivamus mi tellus, consectetur vitae commodo vitae, placerat sit amet nisl. Vestibulum et porttitor est. Cras varius quam a enim commodo consequat. Ut egestas dapibus est, a varius enim tincidunt ac. Quisque scelerisque ante quis porta mollis. Mauris nec maximus orci. Nunc ac justo ut nisl euismod vehicula in lacinia ante. Nulla sollicitudin nisi posuere, volutpat lorem nec, sagittis purus. Duis suscipit vulputate purus ac vulputate. Pellentesque suscipit ornare mi, et finibus tortor rutrum eget. -

- -

-In at ipsum id ligula vehicula porttitor. Suspendisse in risus vitae nunc lacinia lacinia. Cras finibus diam odio, vel posuere justo vestibulum tempor. Integer sed pharetra lacus. Integer elit mauris, vehicula ut tortor ut, vehicula iaculis odio. Integer tincidunt tincidunt quam, a laoreet sem mollis porta. Sed consequat sagittis urna quis aliquet. Proin vitae orci ultrices nisi rutrum blandit. -

- -

-Mauris dapibus auctor diam sit amet euismod. Sed in nibh augue. Mauris porttitor consequat egestas. Mauris consectetur commodo blandit. Suspendisse faucibus tristique nulla, in maximus elit feugiat nec. Mauris sagittis orci eu elit mattis lacinia. Donec molestie risus sed urna maximus eleifend. Nunc accumsan facilisis eros et vestibulum. -

- -

-Sed dui turpis, pellentesque egestas eleifend eget, accumsan id dolor. Vestibulum suscipit in urna at semper. Curabitur luctus eros et luctus rhoncus. Sed ac ipsum dolor. Integer ex sapien, egestas quis sapien vel, fringilla aliquam libero. In sapien eros, feugiat quis auctor at, facilisis sit amet magna. Fusce leo ex, viverra quis gravida sit amet, faucibus a quam. Cras tempus lorem vitae metus cursus malesuada. -

- -

-Nullam egestas id augue nec eleifend. Curabitur facilisis malesuada orci at venenatis. Duis at porttitor felis, ac varius elit. Sed pellentesque ligula eros, eu sollicitudin dolor placerat quis. Vestibulum suscipit, leo sit amet tristique hendrerit, ante velit congue lorem, sit amet volutpat ante ligula eget ex. Sed at ultrices turpis. Nulla sit amet egestas sapien. Donec sed lacinia mauris. Morbi suscipit erat nec orci vehicula iaculis. Fusce rhoncus at nunc vitae pretium. Nam consectetur luctus est, sit amet rhoncus ex consectetur ac. Nam in pretium nisl. Vivamus ultricies interdum elit a mattis. Phasellus lectus tellus, molestie in ultricies a, volutpat in ipsum. Aenean maximus viverra congue. -

- -
- - +

+ Nullam egestas id augue nec eleifend. Curabitur facilisis malesuada orci at venenatis. Duis at porttitor felis, ac varius elit. Sed pellentesque ligula eros, eu sollicitudin dolor placerat quis. Vestibulum suscipit, leo sit amet tristique hendrerit, ante velit congue lorem, sit amet volutpat ante ligula eget ex. Sed at ultrices turpis. Nulla sit amet egestas sapien. Donec sed lacinia mauris. Morbi suscipit erat nec orci vehicula iaculis. Fusce rhoncus at nunc vitae pretium. Nam consectetur luctus est, sit amet rhoncus ex consectetur ac. Nam in pretium nisl. Vivamus ultricies interdum elit a mattis. Phasellus lectus tellus, molestie in ultricies a, volutpat in ipsum. Aenean maximus viverra congue. +

+
\ No newline at end of file diff --git a/exercises/04_css/02_layout/views/menu.html b/exercises/04_css/02_layout/views/menu.html index 5e1cddd3..518127f9 100644 --- a/exercises/04_css/02_layout/views/menu.html +++ b/exercises/04_css/02_layout/views/menu.html @@ -1,32 +1,33 @@ + HTML Menus - - + + -

HTML/CSS Menu demonstration

- - - + \ No newline at end of file diff --git a/solutions/03_html/01_syntax/coventry.html b/solutions/03_html/01_syntax/coventry.html index 8f9ce227..7174d23c 100644 --- a/solutions/03_html/01_syntax/coventry.html +++ b/solutions/03_html/01_syntax/coventry.html @@ -3,9 +3,8 @@ History of a City: Coventry - + -

History of a City: Coventry

diff --git a/solutions/03_html/02_lists/computers80.html b/solutions/03_html/02_lists/computers80.html index 93706753..2767b833 100644 --- a/solutions/03_html/02_lists/computers80.html +++ b/solutions/03_html/02_lists/computers80.html @@ -1,11 +1,10 @@ - + 1980s' home computers - + -
A computer with a monitor @@ -91,5 +90,4 @@ - \ No newline at end of file diff --git a/solutions/03_html/03_hypermedia/views/commodore64.html b/solutions/03_html/03_hypermedia/views/commodore64.html index 96ee476f..334fd38e 100644 --- a/solutions/03_html/03_hypermedia/views/commodore64.html +++ b/solutions/03_html/03_hypermedia/views/commodore64.html @@ -1,17 +1,15 @@ - + Commodore 64 -
- A commodore 64 computer + A commodore 64 computer
Photo: Bill Bertram, CC via https://commons.wikimedia.org/

Read the Wikipedia article for Retrocomputing.

Back

- \ No newline at end of file diff --git a/solutions/03_html/03_hypermedia/views/index.html b/solutions/03_html/03_hypermedia/views/index.html index 53141651..30a36d96 100644 --- a/solutions/03_html/03_hypermedia/views/index.html +++ b/solutions/03_html/03_hypermedia/views/index.html @@ -1,13 +1,13 @@ - + - - - Retro Computers - - - - + + + Retro Computers + + + +

Retro Computers

  1. Commodore 64
    2. @@ -15,19 +15,19 @@

3.4.1 Test Your Understanding

Embedded local video

Embedded youtube video via iframe

Embedded youtube video via object

- + \ No newline at end of file diff --git a/solutions/03_html/03_hypermedia/views/spectrum.html b/solutions/03_html/03_hypermedia/views/spectrum.html index 22b82ba0..332d19a8 100644 --- a/solutions/03_html/03_hypermedia/views/spectrum.html +++ b/solutions/03_html/03_hypermedia/views/spectrum.html @@ -1,10 +1,9 @@ - + Sinclair ZX Spectrum -

Sinclair ZX Spectrum

diff --git a/solutions/04_css/01_formatting/comparison.css b/solutions/04_css/01_formatting/comparison.css new file mode 100644 index 00000000..995aa2d0 --- /dev/null +++ b/solutions/04_css/01_formatting/comparison.css @@ -0,0 +1,47 @@ +body { + font-family: Arial, Helvetica, sans-serif; +} + +p { + text-align: center; +} + +table { + border: 1px solid black; + border-collapse: collapse; + margin-left: auto; + margin-right: auto; +} + +caption { + text-transform: uppercase; + border: 0.5px solid black; + font-weight: bold; + letter-spacing: 0.2em; +} + +thead { + background-color: red; + color: white; +} + +th { + text-transform: uppercase; + font-weight: bold; + padding-left: 0.5em; + padding-right: 0.5em; +} +th:first-child { + border-right: 1px solid black; + text-align: left; +} + +td { + padding-left: 0.5em; + padding-right: 0.5em; +} + +em { + font-weight: bold; + font-style: normal; +} \ No newline at end of file diff --git a/exercises/04_css/01_formatting/html/comparison.html b/solutions/04_css/01_formatting/comparison.html similarity index 76% rename from exercises/04_css/01_formatting/html/comparison.html rename to solutions/04_css/01_formatting/comparison.html index 42b0dda9..67f01085 100644 --- a/exercises/04_css/01_formatting/html/comparison.html +++ b/solutions/04_css/01_formatting/comparison.html @@ -1,13 +1,13 @@ - + Comparison of three computers - + + - -

A comparison of technical data of three popular 80's home computers:

+

A comparison of technical data of three popular 80's home computers:

@@ -21,28 +21,24 @@ - + - + - +
Technical comparison
CPUCPU MOS Technology 6510 Zilog Z80 MOS Technology 6502
RAMRAM 64 kilobytes 16 or 64 kilobytes 5 kilobytes
ROMROM 20 kilobytes 16 kilobytes 16 kilobytes
- -
- - \ No newline at end of file diff --git a/exercises/04_css/01_formatting/html/csstest.html b/solutions/04_css/01_formatting/csstest.html similarity index 74% rename from exercises/04_css/01_formatting/html/csstest.html rename to solutions/04_css/01_formatting/csstest.html index 0791d1a4..73a04ea9 100644 --- a/exercises/04_css/01_formatting/html/csstest.html +++ b/solutions/04_css/01_formatting/csstest.html @@ -1,18 +1,21 @@ - - + + Vintage Home Computers - + + +

Photo courtesy of Pekka Virtanen.

+

This is different from all the other paragraphs

1980's Home Computers

In early 1980's, home computers became mainstream. For the first time, computers could be purchased by an average family household.

- A computer with a monitor -
Photo: Piotr Siedlecki, public domain via http://www.publicdomainpictures.net.
+ A computer with a monitor +
Photo: Piotr Siedlecki, public domain via http://www.publicdomainpictures.net.

Novel uses

The main usage for a home computer was, of course, games. As cool games may not be a valid reason for purchasing an expensive gadget, @@ -46,11 +49,14 @@

Read-only memory. This was normally smaller in size than RAM and roughly corresponded to the hardware implementation of the operating system.
- - -
-

Disclaimer: All opinions in this page reflect the views of their author(s), not the organization.

- +

Basic programming

+

Basic was a common language for programming 80s' home computers + 


+        10 PRINT "Hello, World"
+        20 INPUT "Continue (y/n)?", R$
+        30 IF R$="y" THEN GOTO 10
+
+
+

Disclaimer: All opinions in this page reflect the views of their author(s), not the organization.

- - + \ No newline at end of file diff --git a/solutions/04_css/01_formatting/selectors.css b/solutions/04_css/01_formatting/selectors.css new file mode 100644 index 00000000..f34d61f7 --- /dev/null +++ b/solutions/04_css/01_formatting/selectors.css @@ -0,0 +1,23 @@ +body { + font-family: Arial, Helvetica, sans-serif; +} + +p { + color: blue; +} + +h1.alert { + font-size: 3em; +} + +.alert { + color: red; +} + +p#unique { + font-size: 0.8em; +} + +.underlined { + text-decoration: underline; +} \ No newline at end of file diff --git a/exercises/04_css/01_formatting/html/selectors.html b/solutions/04_css/01_formatting/selectors.html similarity index 52% rename from exercises/04_css/01_formatting/html/selectors.html rename to solutions/04_css/01_formatting/selectors.html index 771ea37f..a789d4bc 100644 --- a/exercises/04_css/01_formatting/html/selectors.html +++ b/solutions/04_css/01_formatting/selectors.html @@ -1,22 +1,22 @@ - + + Selectors - - + +

Classes and identifiers.

-

This is a regular paragraph.

+

This is a regular paragraph.

This is a regular paragraph, too.

-

This paragraph belongs to a special group of paragraphs. It is a member of 'alert' class.

+

This paragraph belongs to a special group of paragraphs. It is a member of 'alert' class.

This paragraph should be uniquely formatted. It is assigned an identifier.

-

This paragraph is in 'alert' class, too.

- +

This paragraph is in 'alert' class, too.

\ No newline at end of file diff --git a/solutions/04_css/01_formatting/test.css b/solutions/04_css/01_formatting/test.css new file mode 100644 index 00000000..f877a654 --- /dev/null +++ b/solutions/04_css/01_formatting/test.css @@ -0,0 +1,60 @@ +body { + background-color: lightcyan; + color: rgba(65, 105, 225, 0.7); +} + +h1 { + color: orange; +} + +p { + text-indent: 10pt; +} + +ol, ul { + border-style: solid; + border-width: 1pt; + text-indent: 10pt; +} + +li { + color: darkgray; +} + +figcaption { + font-size: smaller; + font-weight: bold; +} + +p.copyright-notice { + font-size: 0.8em; +} + +#special { + font-size: 0.8em; + color: yellowgreen; + font-style: italic; + border-left: 2px solid black; + margin-left: 40px; + padding-left: 10px; +} + +pre { + white-space: pre-wrap; +} + +p::first-letter { + font-size:8em; +} + +p::first-line { + font-weight: bold; +} + +p::before { + content: "Note! "; +} + +p::after { + content: url(/images/tickmark.png); +} \ No newline at end of file diff --git a/solutions/04_css/02_layout/berries.css b/solutions/04_css/02_layout/berries.css new file mode 100644 index 00000000..e8abcd43 --- /dev/null +++ b/solutions/04_css/02_layout/berries.css @@ -0,0 +1,56 @@ +body { + font-family: Arial, Helvetica, sans-serif; + text-align: center; +} + +img { + border: 2px solid lightblue; +} + +figcaption { + font-weight: bold; + margin-top: 1em; + margin-bottom: 3em; +} + +h1, h2, h3 { + padding-top: 0em; + padding-bottom: 0em; + margin: 0em; + font-weight: normal; +} + +h1 { + font-size: 6em; +} + +h2 { + padding-top: 8pt; + font-size: 2em; +} + +h3 { + padding-bottom: 8pt; + font-style: italic; + font-size: 1em; +} + +div { + width: 15em; + margin: auto; +} + +div div { + border-bottom: thin solid black; +} + +div div:first-child { + border-top: thin solid black; + background-color: lightblue; +} +div:last-child { + background-color: pink; +} +div:nth-child(2) { + background-color: beige; +} \ No newline at end of file diff --git a/solutions/04_css/02_layout/berries.html b/solutions/04_css/02_layout/berries.html new file mode 100644 index 00000000..b49c6289 --- /dev/null +++ b/solutions/04_css/02_layout/berries.html @@ -0,0 +1,30 @@ + + + + + Berries + + + + +

Berries

+
+ berries +
Image: Scott Bauer, USDA ARS, public domain
+
+
+
+

Blueberry

+

Vaccinium corymbosum

+
+
+

Cloudberry

+

Rubus chamaemorus

+
+
+

Lingonberry

+

Vaccinium vitis-idaea

+
+
+ + \ No newline at end of file diff --git a/solutions/04_css/02_layout/boxstyles.css b/solutions/04_css/02_layout/boxstyles.css new file mode 100644 index 00000000..92198cb0 --- /dev/null +++ b/solutions/04_css/02_layout/boxstyles.css @@ -0,0 +1,25 @@ +p.one { + border: 1px solid black; + padding: 3em; + margin: 1em; + margin-bottom: 0em; +} + +p.two { + border: 1px solid black; + margin: 5em; + margin-top: 0em; +} + +p.three { + border-left: 3px solid black; + padding: 1em; + padding-top: 0em; + margin-top: 2em; + margin-bottom: 8em; +} + +p.four { + border: 5px dashed red; + border-radius: 1em; +} \ No newline at end of file diff --git a/solutions/04_css/02_layout/columnstyles.css b/solutions/04_css/02_layout/columnstyles.css new file mode 100644 index 00000000..eb5b85d9 --- /dev/null +++ b/solutions/04_css/02_layout/columnstyles.css @@ -0,0 +1,13 @@ +body { + column-count: 3; + /*alternatively: column-width: 15em; */ + column-gap: 2em; + column-rule-style: solid; + column-rule-width: 1px; + column-rule-color: red; + /*alternatively: column-rule: 1px solid red; */ +} + +h1 { + column-span: all; +} \ No newline at end of file diff --git a/solutions/04_css/02_layout/floating.html b/solutions/04_css/02_layout/floating.html new file mode 100644 index 00000000..1f3d8aa8 --- /dev/null +++ b/solutions/04_css/02_layout/floating.html @@ -0,0 +1,64 @@ + + + + + Illustration of a floating element + + + + +

Onions

+ +
+

Did you know?

+
    +
  • The latin name for onion plant is Allium Cepa.
    • +
  • Onions have been used in cooking for thousands of years.
    • +
  • 89% of onions' content is water.
    • +
+
+ +
+

Onions in cooking

+ +
+ Onions +
Image: Petr Kratochvil, public domain via www.publicdomainpictures.net.
+
+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in malesuada libero. Etiam consectetur enim enim, id porta neque facilisis non. Proin consequat a sapien eu consectetur. Quisque bibendum lorem tortor, nec facilisis risus venenatis vel. Nullam et nunc varius, elementum mi vitae, mattis lacus. Mauris et lacinia magna. Nam faucibus purus ac felis vulputate suscipit. Sed vitae est egestas, euismod neque eu, molestie leo. +

+ +

+ Fusce viverra enim ante, vel dapibus metus maximus et. Proin ac metus justo. Donec nec scelerisque ante. Vestibulum a lectus nisl. Curabitur dictum a purus non sagittis. Cras semper ipsum ut eros lobortis vestibulum. Aenean eu urna nulla. Quisque mattis ex nec odio sollicitudin, a pulvinar nibh faucibus. Nullam quis rutrum purus, nec condimentum est. Aenean sagittis feugiat ante, sit amet dignissim elit vulputate ac. Aenean nec erat blandit, posuere orci malesuada, aliquam sem. Ut rutrum neque nec sapien consectetur dignissim. +

+ +

+ Nam odio lectus, accumsan vitae dignissim vitae, condimentum eu ipsum. Ut tristique vel leo at condimentum. Quisque tincidunt et tellus ut feugiat. Proin consectetur nulla eu fringilla cursus. Vivamus mi tellus, consectetur vitae commodo vitae, placerat sit amet nisl. Vestibulum et porttitor est. Cras varius quam a enim commodo consequat. Ut egestas dapibus est, a varius enim tincidunt ac. Quisque scelerisque ante quis porta mollis. Mauris nec maximus orci. Nunc ac justo ut nisl euismod vehicula in lacinia ante. Nulla sollicitudin nisi posuere, volutpat lorem nec, sagittis purus. Duis suscipit vulputate purus ac vulputate. Pellentesque suscipit ornare mi, et finibus tortor rutrum eget. +

+ +

+ In at ipsum id ligula vehicula porttitor. Suspendisse in risus vitae nunc lacinia lacinia. Cras finibus diam odio, vel posuere justo vestibulum tempor. Integer sed pharetra lacus. Integer elit mauris, vehicula ut tortor ut, vehicula iaculis odio. Integer tincidunt tincidunt quam, a laoreet sem mollis porta. Sed consequat sagittis urna quis aliquet. Proin vitae orci ultrices nisi rutrum blandit. +

+ +

+ Mauris dapibus auctor diam sit amet euismod. Sed in nibh augue. Mauris porttitor consequat egestas. Mauris consectetur commodo blandit. Suspendisse faucibus tristique nulla, in maximus elit feugiat nec. Mauris sagittis orci eu elit mattis lacinia. Donec molestie risus sed urna maximus eleifend. Nunc accumsan facilisis eros et vestibulum. +

+ +

+ Sed dui turpis, pellentesque egestas eleifend eget, accumsan id dolor. Vestibulum suscipit in urna at semper. Curabitur luctus eros et luctus rhoncus. Sed ac ipsum dolor. Integer ex sapien, egestas quis sapien vel, fringilla aliquam libero. In sapien eros, feugiat quis auctor at, facilisis sit amet magna. Fusce leo ex, viverra quis gravida sit amet, faucibus a quam. Cras tempus lorem vitae metus cursus malesuada. +

+ +

+ Nullam egestas id augue nec eleifend. Curabitur facilisis malesuada orci at venenatis. Duis at porttitor felis, ac varius elit. Sed pellentesque ligula eros, eu sollicitudin dolor placerat quis. Vestibulum suscipit, leo sit amet tristique hendrerit, ante velit congue lorem, sit amet volutpat ante ligula eget ex. Sed at ultrices turpis. Nulla sit amet egestas sapien. Donec sed lacinia mauris. Morbi suscipit erat nec orci vehicula iaculis. Fusce rhoncus at nunc vitae pretium. Nam consectetur luctus est, sit amet rhoncus ex consectetur ac. Nam in pretium nisl. Vivamus ultricies interdum elit a mattis. Phasellus lectus tellus, molestie in ultricies a, volutpat in ipsum. Aenean maximus viverra congue. +

+
+ + + \ No newline at end of file diff --git a/solutions/04_css/02_layout/floatstyles.css b/solutions/04_css/02_layout/floatstyles.css new file mode 100644 index 00000000..26efd179 --- /dev/null +++ b/solutions/04_css/02_layout/floatstyles.css @@ -0,0 +1,22 @@ +body { + font-family: Arial, Helvetica, sans-serif; + margin-left: 200px; +} + +figure#floating { + float: right; +} + +section#factbox { + float: left; + border: 1px solid black; + margin: 2em; + padding: 1em; +} + +nav { + position: absolute; + top: 120px; + left: 40px; + width: 100px; +} \ No newline at end of file diff --git a/solutions/04_css/02_layout/menu.html b/solutions/04_css/02_layout/menu.html new file mode 100644 index 00000000..32cf35e2 --- /dev/null +++ b/solutions/04_css/02_layout/menu.html @@ -0,0 +1,54 @@ + + + + + HTML Menus + + + + +

HTML/CSS Menu demonstration

+ + + \ No newline at end of file diff --git a/solutions/04_css/02_layout/menustyles.css b/solutions/04_css/02_layout/menustyles.css new file mode 100644 index 00000000..e97b659f --- /dev/null +++ b/solutions/04_css/02_layout/menustyles.css @@ -0,0 +1,53 @@ +body { + font-family: Arial, Helvetica, sans-serif; +} + +nav ul { + list-style: none; + font-size: 16pt; + padding: 0px; +} + +nav > ul > li{ + background-color: green; + font-weight: bold; + padding: 3pt; + float: left; +} + +nav ul li { + width: 100pt; + color: white; +} + +nav ul li ul { + list-style-position: inside; + visibility: hidden; + position: absolute; + border: 2pt solid black; + background-color: white; + font-weight: normal; + color: black; + margin-left: -2pt; +} + +nav > ul > li > ul { + margin-top: 3pt; + border-top: none; +} + +nav ul li:hover > ul { + visibility:visible; +} + +ul li ul li ul { + margin-top: -20.5pt; + margin-left: 100.5pt; +} +nav a { + color: white; + text-decoration: none; +} +nav ul li ul a { + color: black; +} \ No newline at end of file