Practial work 4.
FlexBox. Working with the layout.
Background of a separate block
You can set a color or gradient as a block background using the background property.
A raster image can also serve as a background.
.header{
background-image: url("picture.jpg"); // connect the image file
background-size: cover; // Now the image is automatically scaled to
fit the block size
}
Working with icons
To work with icons, you can use the site
https://fontawesome.ru/.
Font Awesome contains scalable vector icons that can be changed in size, color, shadow, and
all with CSS
1. To work you need to download Font Awesome 4.
2. Copy the downloaded folder to your project. This folder contains the file font-
awesome.min.css.
3. Connect icons by specifying the path to this file
Example:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
If the necessary icons are not in the Font Awesome font and are vector images, then
they can be saved in separate svg files (Photoshop allows). Then connect to the html or CSS
file. You can also download icons in svg format from the website https://www.flaticon.com/.
Working with a layout in PHOTOSHOP
Working with a layout in PHOTOSHOP
(Описание + видеоролик)
https://tpverstak.ru/photoshop-dlya-verstaka/
Working with plug-in fonts
To connect additional fonts use https://fonts.google.com/. Select the required font, for example, Roboto
Select the required font thickness (several are possible).
You can include several different fonts in one package.
The panel on the right displays your selected fonts.
To connect the selected fonts, click the “Embed” tab. And copy the generated <link> tag along with the
attributes into your html document and insert the internal <head> tag (in the same place as the styles)
If the fonts are not found, you can contact sites such as:
https://bestfonts.pro/
https://fontstorage.com/
It is more convenient to find a font for which a CSS file with all font options has already been registered.
Application link Photoshop Portable
https://cloud.mail.ru/public/4mJe/FgRYyxNno
Link to layouts https://cloud.mail.ru/public/7VBA/3H7ULedQP
Task 1 (using the Flexbox specification)
Develop an adaptive, responsive (responsive means that when the size is reduced, the content is
smoothly compressed) website layout using the flexbox specification (when creating menus and
individual blocks) according to the layout in accordance with the option. Minimum width (min-width)
320px. Adaptive layout must contain at least two breakpoints (for example, for width max-
width=1100px and max-width=600px). When a breakpoint is reached, the content must be rearranged
(Move some blocks to the next line or arrange them vertically, change the size of large headings, disable
unimportant page elements).
№ Last name, first name Template name
Emanuel
1 Deliver Website
Yunus
2 Dart Service Manager
Azer
3 Flaby
