Internet Technologies

Tasks studies - laboratory

---

Project maintained by dawidolko Hosted on GitHub Pages — Theme by dawidolko

EXAM gr I

1. Create an index.html file and save all tasks there.

2. Remember to format the entire page content with CSS.

3. Page attributes: yellow background, top and bottom margin 10px, right and left margin 5px.

4. Create a table

5. Create a list

A. First position

B. Second position

7. First position

8. Second position

a. First position

b. Second position

C. Third position

6. Create a form

Task 7.

Create a gallery.html document that has the same navigation bar as the main document. The home page link should lead to this document, and the gallery document should have a level 2 header Gallery. Then, place gal1-gal10.jpg photos in the document.

Task 8.

Create an external style sheet called main_style.css, which you then correctly attach to the main HTML document. Then:

• set all elements to a box model using the universal selector that includes their padding and border in their size.

• set the link styling so that they consist only of text without any additional elements links in such a way that they consist only of text, without any

• additional elements such as underlining.

• using flex, set the links in the navigation panel horizontally, which are spread out parallel in the continent

• hide the links, Category 1 - Category 3, so that they are not shown by default, but only when the mouse is hovered over the Category link.

• Using CSS, add a border to the table in the Table section. Make it solid, black, and one pixel wide.

• For the form button, define the following appearance:
• Color: #4b1a78

Rounded edges: 50%

Content spacing from the left and right borders: 15px

Spacing from the top and bottom borders: 10px

No border

• Style the form so that it arranges the content as flex columns.

• Create a class called form-control, which you will then assign to the element (choose the most suitable one), which you will then label with the corresponding input element. Let this class arrange content as

• flex row and align the position of elements vertically (i.e. they are placed on one line.)

• Set all sub-form elements to a margin equal to half the font size of the main element (root).

Task 9.

In the gallery.html file, add an internal CSS style that

• arranges photos using a two-column grid, using as many rows as needed
• sets the distance between columns to 10px
• sets the section padding to 120x
• centers the photos arranged using the grid
• centers the header
• sets the maximum photo size to 400px (width) to 300px (height).
• when you hover the mouse over the photo, it plays an animation that enlarges the photos by 130%, lasts 2s and repeats an infinite number of times.

Task 10.

Add a so-called hamburger menu to the navigation bar, i.e. an element that is invisible by default (on larger screens), but will be visible on mobile devices and will collapse/expand the menu when clicked with the mouse. Use an appropriately made checkbox for this purpose. The checkbox should be invisible there, only its label, which contains the ☰ sign, is visible.

Add a media query to the internal style in the previous task, which for screens below 400px.

• changes the grid layout to a single-column one.

• sets the maximum image size to 300px (width) to 200px (height)

• introduces a mechanism in which the links in the navigation bar are collapsed, and after clicking the checkbox they will be expanded and presented not horizontally, but vertically.