Download "Адаптивная HTML CSS верстка сайта из Figma c нуля для новичков. Пошагово и подробно. Советы от профи"
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FEyJ-KRKkrVQ%252Fmaxresdefault.webp&w=1139&q=75)
Please wait. We're preparing links for easy ad-free video watching and downloading.
Table of contents
Similar videos from our catalog
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252F9un-Q9OWxxY%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252Fc3kgbhCWlF4%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252Fsohdv21BVNI%252Fmaxresdefault.jpg&w=1139&q=75)
Video tags
Subtitles
Russian
00:00:01
Krichevsky school web to Dima and in this00:00:04
video we are with you from scratch from start to finish00:00:07
for beginners, let's make up like this00:00:10
wonderful layout which is in00:00:12
We will type out the film using html and css00:00:16
We are completing desktop and mobile versions00:00:19
that is, all this will be done with00:00:21
adaptive that's why join us and00:00:26
Let's start with the layout with you in passing00:00:30
we met basically like this00:00:32
wonderful landing page there is a top one00:00:34
the navigation panel has a header like this00:00:37
at the top of the card is a section with00:00:42
video blog with content and footer layout00:00:46
I will be with explanations for beginners then00:00:49
there we will go step by step from and to and00:00:51
so starting also completely from empty00:00:55
project I have this folder00:00:57
olive html project which is absolutely00:00:59
empty at the moment and00:01:03
so I open the visual code editor00:01:06
studio code and I’m going straight step by step from and00:01:10
dot I'm dropping this folder here, let's00:01:14
Let's immediately create a subfolder here inside00:01:16
image under the pictures further also at the root00:01:20
let's make a css folder00:01:21
under style and and in the root file index point00:01:26
html next let's create a starting page00:01:31
page layout structure! press00:01:35
ap m from it all unfolds like this00:01:37
let's write it in the starting blank here00:01:40
Tytel and Olivia are looking for his project00:01:43
let's call our project this way00:01:46
create a file with styles in a css file00:01:51
I create a new file and call it main.00:01:54
css that is our file with the main styles00:01:59
here I offer it as this video00:02:02
educational and so that we can00:02:04
It’s more convenient for me to work like this00:02:08
it is more convenient to work in the future when00:02:10
you will study preprocessors very much00:02:13
convenient to separate files more accurate to separate00:02:16
style in a separate file, that is00:02:18
Of course, you can write all the code in00:02:21
main css file and in the end it’s just like that00:02:23
should be in one file, but so that00:02:26
we should delineate our responsibilities00:02:29
there will be some styles responsible for the reset00:02:31
style for the first section for the second for00:02:34
hats for the basement here and to make it more convenient00:02:36
work with all this and don’t jump around00:02:38
one file per thousand lines up and down00:02:41
I still suggest creating a separate one00:02:44
file and so let's create another one00:02:45
the file I'll call rosette css is this00:02:49
it will be useful00:02:52
then while we have it, we'll see further here00:02:55
And00:02:56
let's connect them to the page, let's even00:03:00
let's make them like we do00:03:02
separate files then I will do this bass00:03:05
bass css like this let it be for now00:03:09
yandex xml go here write tek link00:03:14
tab e and f add css rosette css and00:03:19
Let's also connect the bass if so, I'll be quick00:03:23
I copy just by holding shift and alt and00:03:25
pressing the down arrow happens00:03:27
fast copying00:03:29
the selected line smells like resort &00:03:34
bass connected now let's write00:03:38
basic styles for reset open the file00:03:41
and z and what will happen here we will reset the indentation00:03:45
and sizes of fonts and elements on00:03:48
page because during the layout process00:03:51
when we will type up with you well00:03:55
for example headings when we will00:03:56
tag h1 and h2 and so on for them00:04:00
there will be stupas from above from below they will have00:04:02
specific font thickness fund weight00:04:05
which we may not need00:04:07
they will have a certain size and we will have00:04:10
he will obviously be different that's why these00:04:12
resets are also necessary we will do00:04:15
I’ll reset the TFP because I’m also about the stupa00:04:18
paragraphs are not always in the layout00:04:22
always as given by the browser00:04:24
standard maybe somewhere we will be00:04:26
use lists and00:04:28
list for example is often used for00:04:30
navigation and lists always too00:04:34
remove padding and00:04:37
shootouts these are the markers that00:04:40
stand to the left of the list elements no no00:04:42
are needed when we, for example, layout00:04:44
navigation, that's what resets are for, and I00:04:47
I recommend doing a full reset00:04:49
to zero you can use the library00:04:51
css cutter you can write reset00:04:54
yourself to better understand00:04:55
In general, what did we reset? Why am I now?00:04:58
I just put the codes and comment that he00:05:01
does and so what we do we wrote00:05:04
This is the selector, that is, they choose00:05:06
Absolutely all elements are separated by an asterisk00:05:08
on the page and then I select the same00:05:09
absolutely everything before everything author that is and00:05:12
pseudo-elements too and like this00:05:14
way to go through anything at all00:05:16
maybe we kill and remove for money00:05:19
marjan and setting them to zero we make a border00:05:22
but he wouldn’t exist either, that is00:05:25
form elements, if they occur, then00:05:27
often the design still needs them00:05:29
set your own frame in your own way and sometimes00:05:32
it's missing that's why it's better00:05:34
reset immediately and set the value00:05:36
Bogside on the border God stands for something00:05:39
the width and height that we will write down00:05:41
there was already a final one for the element, that is00:05:45
it already included both rank and00:05:47
money and content, that is, it is very convenient00:05:50
there is a nuance there is a moment maybe someone00:05:53
he will say yes, but is it possible like this?00:05:55
just brothers highlight it all through00:05:58
Why not highlight the asterisk separately?00:06:00
each element is basically possible00:06:02
highlight each element and describe it in terms of00:06:04
selector and reset only where needed00:06:06
but in fact nothing00:06:09
there’s nothing scary about this, that is, not00:06:11
there is some kind of drop in performance00:06:13
or something else happens to you?00:06:16
eat you all from working fine00:06:18
standard is good, that's why you're afraid00:06:20
we need to reset it like this00:06:23
what else will we have here I choose00:06:25
links and visited links say that00:06:27
their color will be in-grid, that is, they00:06:30
do not stand out in any way by color inherits00:06:32
the color that will be in the body tag then00:06:34
yes it will be black all links will be00:06:36
just black because often00:06:38
We also work with them separately and remove them.00:06:41
underline display online block in00:06:44
basically let's not write00:06:46
further on hover and you can also write00:06:51
which is also the color injured text decoration00:06:54
but he doesn’t mean anything anywhere00:06:57
can also be added by focus00:07:01
remove link behavior and focus and asset00:07:04
that is, when the link is usually active00:07:06
browser adds focus and but quite00:07:10
often it is very different from that00:07:12
what is by design so I would like to00:07:13
I also did the same in the following blocks00:07:17
by the way, what we will have by the way is00:07:21
links here I have this comment00:07:22
like links that we work with links00:07:26
then a comment on the commands and there are some00:07:28
general things, let me describe and explain them00:07:31
here we select all tags00:07:34
from which we again put semantic tags00:07:37
for them the display unit is basically for00:07:39
modern browsers this is already00:07:41
no need because they already know everything00:07:44
these tags are basically correct with them00:07:46
working up to if some old friend00:07:48
the browser will know how to do it00:07:50
display display as blocks like this00:07:52
In general, this instruction can be00:07:53
omit further reset and dimensions for00:07:58
headings and paragraphs, select all tags00:08:01
title, etc. and say function00:08:04
synclit, that is, the same as in the body, then00:08:06
there it will be 16, which means it’s also 16 fund00:08:09
weight is the same as it would be from the standard one00:08:11
low-fat Fanta and 400 is usually what it is00:08:14
he inherits Ingrid that means00:08:16
inherit but it follows in this00:08:18
case he will inherit from that00:08:19
the block in which it is located, that is00:08:22
If00:08:24
this text will be located in the block where00:08:27
background site 20 then it will have the same funds00:08:30
20 that's how it works and line hit00:08:33
ingrid that is, also on we follow further and00:08:36
what else does this not quite apply to?00:08:39
reset given nevertheless she is here for me00:08:41
will be p + p marjan top 1 m what is it00:08:44
such that is, we choose etc. paragraph and00:08:47
look at the paragraph that comes after it00:08:49
that is, this is any paragraph except 1 2 3 4 500:08:53
and we indent the top in the 1st 1 m is00:08:58
relative units of magnitude that is00:09:00
if the fund says this paragraph had 1600:09:03
then the top indentation will be 16 if00:09:06
The font size for this paragraph was 2000:09:09
that means the indentation at the top will be 20, that is00:09:11
so we already prescribe00:09:14
correct indentation between paragraphs is00:09:16
very important because layout is not00:09:19
printing yes it’s not something static00:09:22
what kind of design did we print everything there?00:09:24
before layout this is a live layout that is00:09:28
it can be corrected to add content00:09:30
clean accordingly wherever there is00:09:32
some text video paragraphs it can00:09:34
become more it may become less00:09:36
therefore it is extremely important to always have the text in the form00:09:39
paragraphs should be placed exactly in etc. They00:09:42
just throw them into divas like that00:09:45
provide for the option that is in place00:09:47
where you have one paragraph can appear 200:09:49
3 may appear like this00:09:51
we provided for this, of course00:09:53
we will even typesetting correctly further that00:09:56
we will do more for the tag yu l we will do00:09:59
did it stand, that is, let’s reset the same ones00:10:01
circles markers y t g l I don’t reset00:10:04
them for the tag o l because o l is an order00:10:07
glue there is a list that has00:10:10
sequences 1 2 3 4 5 and so on00:10:13
and the name itself says what it is00:10:17
oh l that is a list with numbers00:10:21
and why reset them but if we need00:10:23
numbers we will use o.l. If00:10:25
we need some other numbers00:10:27
Roman numerals ladies then through with from it00:10:29
let's stylize but here's Yula and he's on the ice sheet00:10:33
just used for lists in00:10:35
navigation for any other listings00:10:37
which are not a text list on00:10:40
but we make layouts like enumeration00:10:42
so here we are dropping a stone00:10:44
margin and padding have already been reset00:10:46
because we did margin here and00:10:49
padding 0 pixels00:10:51
great we'll do it again00:10:54
then I select the tags image and svg then00:10:59
there is our graphics saying vertical line00:11:01
top that is, it is necessary for the image because00:11:05
that by default it has something like this00:11:07
let's say the indentation below is small00:11:11
a bug that is, it is always present everywhere00:11:13
one or feature here and for this00:11:16
there was no extra ledge needed to be set00:11:18
vertical line top you can fight this00:11:21
through the task display block but then if00:11:25
you will need a picture somewhere like00:11:27
online element that is somewhere in the line00:11:29
then you will have to do an override00:11:32
in this case there is no need to do it00:11:34
will be and I also set the max view one hundred00:11:36
percent, that is, this is also like that00:11:38
setting is optional, that is, necessary00:11:40
think before you give it and I give it00:11:44
it’s not convenient for them to do so00:11:47
so that the picture does not go out of size00:11:49
container, that is, well, suddenly yes00:11:51
it turns out that somewhere we are big00:11:52
the picture was posted and asked to be large00:11:54
size but here she comes right out00:11:56
container in which it is located00:11:58
horizontal scroll appears and so00:12:00
further, yes, thanks to this property00:12:02
this won't happen, that is, he has00:12:03
the maximum width will be according to the container00:12:05
sometimes of course you need a picture00:12:08
it just went beyond the limits, well then we00:12:09
we can cancel this, but this is the property I00:12:11
I prescribe it, I always know that I have it00:12:14
there is and I would rely on him I know this00:12:17
peculiarity00:12:18
further, more resets for forms specifically in00:12:22
in this layout we will not have forms but00:12:26
until we started this reserve00:12:28
let's write it in full by the word00:12:31
Below the video there will be a link to this entire file00:12:35
and for css, that is, you can basically00:12:37
go in and this is like a code snippet like00:12:40
simply take the blank, copy it and00:12:44
use and that is, I don’t type00:12:46
input textarea bath and select phone 700:12:49
link with fans Aisin Harit in general for00:12:51
form elements by default they are not00:12:53
inherit the font-family, they have their own but00:12:56
often they must be different too00:12:58
so we will write this property so that00:13:01
inherited the input to them with claire display but00:13:03
he's on Internet Explorer when we do something00:13:05
enter input, a cross like this appears00:13:07
here it is given by the browser itself so as not to00:13:10
it was we will also throw it down further the loaf and00:13:14
input type submit that is, these are ours00:13:17
buttons what we do we do display00:13:20
inline block thousand so that they can be00:13:22
it was easy to finish up and they began to00:13:24
one line was displayed as online blocks00:13:26
cursor pointer is very important, that is, so that00:13:29
our cursor reacted to them and appeared00:13:31
index finger and user00:13:33
I understood that it was possible with them00:13:34
interact and also reset00:13:37
background we make the background color transparent and00:13:39
reset the book hee do borders we already have00:13:43
everything is reset to an asterisk, what is this for?00:13:46
was made for buttons yes for that00:13:48
to completely cancel any00:13:50
standard button styling00:13:53
gives the browser because often everything00:13:55
they also look different in design00:13:57
then we also work with buttons with all00:14:01
input amiibo tones reset outline00:14:03
because often he again does not00:14:05
fits into the design and is needed00:14:08
It’s better to prescribe it yourself00:14:10
register yourself therefore00:14:11
reset further mozilla00:14:15
can also add certain ones there00:14:18
money and borders it can be reset through00:14:20
bridge focus inner then select labels00:14:24
that is, the label is also elements of forms and00:14:26
often our labels are good00:14:29
must always be associated with elements00:14:31
forms, that is, there is some kind of input and00:14:34
name to name enter name and input and00:14:37
there should always be an opportunity here we are00:14:39
click on enter the name and we will immediately00:14:42
input has been activated and we can enter00:14:44
that is, you always need to bind input and00:14:46
more precisely labels with in puts to which they00:14:50
usually belong this way either inside00:14:54
placed or tied up because of this00:14:56
what will we have when we click on the label?00:14:58
actions take place therefore the cursor is here00:15:00
I’ll also change it using enter, there’s also something like this00:15:03
because form like legends and also for00:15:06
the ease of working with it is better00:15:07
translate a block like this into the display00:15:10
Rosette us turned out to be a date here as it were00:15:12
and resets and additions of some styles00:15:15
here is such a useful file on c00:15:18
you now have00:15:19
[music]00:15:20
[applause]00:15:21
I don’t want much important information right now00:15:24
invite everyone interested to our00:15:26
course of the profession of a revered layout designer if00:15:28
Are you thinking about remote work?00:15:30
to become a freelancer for layout designers00:15:33
make up websites remotely and make money00:15:35
make money from this or get a job in00:15:37
web studio or go to a company like00:15:40
website layout designer and start your journey00:15:43
IT programmer and beyond00:15:45
grow and develop in the front-end field00:15:47
development of a profession than he is a delivery man00:15:50
sites this is an excellent course from which00:15:53
you should start coming to it, you can00:15:56
absolutely from scratch or with some already00:15:59
we have zero basic knowledge here00:16:02
Let's start learning everything we need to know00:16:04
layout designer and go through everything00:16:05
the main topics are html css layout00:16:09
graphic editors preprocessors00:16:11
framework smoky ming basics of languages00:16:14
mobile programming programming00:16:16
adaptation work with cms wordpress per course00:16:20
We do three projects for your portfolio00:16:22
and master all the necessary programs00:16:25
which you will need in the future for00:16:28
work I am a teacher at this00:16:30
course, that is, all lessons are recorded00:16:32
directly by me and teaching00:16:35
webinars during training00:16:38
during the course we will cover quite a lot00:16:41
program we have a course version00:16:44
standard 8 weeks and more extended00:16:47
12 week version let's do it like I already did00:16:49
said three projects for the portfolio00:16:52
multi-page forex travel website is00:16:54
landing unit and this is your personal website00:16:57
portfolio that you will make for premium00:17:00
program, the course is completely online00:17:03
with checking homework by curators with00:17:07
answers to questions in a chat with calls from00:17:09
curators and teachers in order to00:17:11
to understand the issues that00:17:13
will arise with webinars at the end00:17:16
every week00:17:17
this course starts very soon00:17:21
so you can follow the link in00:17:24
description view program00:17:26
familiarize yourself with the format of participation with00:17:28
conditions and join the training00:17:32
if you have any questions, please00:17:34
You can always fill out the course page00:17:36
online consultation form00:17:39
and we will advise you personally00:17:42
We'll tell you what it's worth, what it's worth00:17:46
pay attention to which path of training00:17:48
you choose if you want to start00:17:50
enter the sphere want to start on00:17:52
freelancing and you are interested in development00:17:55
websites and web development thank you all for00:17:57
attention, well, we’re going back to layout00:17:59
project00:18:00
[music]00:18:02
go to bass to the base and right here00:18:06
we will already write basic styles00:18:07
our page that is, we can body00:18:09
we can contact you to indicate the families00:18:13
font that we will have on the page00:18:14
its size thickness and so on but also for00:18:17
this I'm going into the film I'll say that00:18:20
You can also download this layout from00:18:22
links in the description, let's go to it00:18:25
here and see what fonts are here00:18:28
used to quickly00:18:29
understand what fonts are here00:18:31
Well, you can click them manually, you can00:18:34
just enable the chamfer foundation plugin and that's it00:18:37
will show if we want to click then in00:18:39
in the right panel we select the design and then00:18:42
here is the arrow element while holding down control00:18:45
hold down control, I can call right away00:18:48
the required element that is, if I am by00:18:50
others will click on the elements00:18:52
first select a group and then00:18:55
double click there is another group00:18:57
subgroup in this case component and00:18:59
only then some element through control00:19:02
clicks I can immediately reach what I need00:19:04
In general, I can text everything like this00:19:06
click and look here in00:19:08
in the right panel on the design tab we see00:19:11
text here we see george bolt 65 we00:19:14
we see lothar jaguar mixed and so on00:19:16
that is, we can look at all fonts either in00:19:19
movie I will launch a plugin that00:19:21
it's called a chamfer foundation, here it is, you can use it00:19:24
install the movie and it will immediately give you00:19:26
list of fonts that you00:19:28
used here we have used00:19:30
the following Lotta Rieger fonts themselves00:19:33
bolted we go and george bolted and region00:19:36
font paid non-standard it is needed00:19:39
connect as a web font georgia font00:19:41
is considered standard, that is, it is available00:19:43
default in windows but in others00:19:46
operating systems do not have it, but they do exist00:19:48
some analogues are very close in replacement00:19:51
here but if we00:19:54
we're making the mark, that is, if I'm making the mark00:19:56
the designer drew this layout00:19:58
I thought of exactly these fonts here, but00:20:01
I'm like a layout designer, we're just but I'm just00:20:03
I have to make sure it’s this one00:20:06
the user's font is yes00:20:07
try your best so george00:20:10
we’ll also connect it as a web font here00:20:13
this way great now let's00:20:16
let's move with you00:20:18
shift and we'll go with you to the google.com fund00:20:23
well, but yeah, from here I won't do anything00:20:26
download I just came here to show00:20:28
that there is a board font here but we don’t need it00:20:30
fits00:20:32
or come let's see son of light00:20:36
regular bolt yes son light regular and bolt00:20:40
but what we use we have00:20:43
7 and bolt and we have a medium that is in00:20:46
design and that is, but there is no google background00:20:49
these styles, yes that’s exactly why00:20:52
this option will not suit us and we will00:20:55
search for a web font to find00:20:58
web font I’m just going to Yandex in a hurry00:21:01
lats are in the fund at the moment00:21:04
such a site as a fund. about where everything comes from00:21:07
you can download it great here00:21:09
go here find here sheriff fee00:21:12
let's see what's here00:21:15
show all styles everything is here00:21:17
the styles we need are medium00:21:20
there are balls themselves, that is, yes, everything is fine00:21:22
here we click download armor zip then it00:21:26
invites us to make a donation we can00:21:28
I don’t want to click here00:21:29
it's hard to download a lotta zip and such00:21:33
This way this archive will be downloaded from us00:21:36
plus we also have George's shift and on00:21:39
You can also download it from this site00:21:41
so let's00:21:43
let's go back to Yandex and write00:21:49
georgie web fund we also find us too00:21:53
phones. let's move on to Georgia00:21:56
please also click and download george00:21:58
click the link that we don’t want00:22:01
donate00:22:02
[music]00:22:03
so we download it, but in general, of course00:22:06
you can ask them the project is good yes00:22:09
but also on every font download00:22:11
excellent the required font and we downloaded it00:22:14
let's now add them to the project then00:22:17
yes, I now have an archive of Georgia00:22:19
and armor00:22:21
accordingly I open the folder with00:22:24
project and00:22:26
in this folder we00:22:29
let's unzip them let's go with in00:22:32
css folder and create a fonts folder because00:22:35
that our font and they are basically through00:22:38
test how basically this is part of the whole garden00:22:41
not part of the css but we connect our hearts00:22:43
so the reasonable ones should be placed here00:22:46
Now let's take George's folder so here we have00:22:49
Vlad's files go straight away and so do they00:22:53
they go right away so basically I can these two00:22:55
drop the folders here and00:22:58
unzip them00:23:00
in the current folder00:23:05
I did it a little wrong00:23:13
I will delete and00:23:15
unzip each archive into a separate one00:23:18
folder00:23:19
this is how all the archives are perfect00:23:22
no need there are two folders of george and lott00:23:25
and I will leave their name as it is00:23:29
in them we see the files we need00:23:33
next what I propose to do and now00:23:36
they need to be connected to00:23:38
but we will not include all styles00:23:42
yes because look in the tray for example00:23:44
we have quite a lot of files, that is, here00:23:46
really all the style of this font and00:23:49
if we connect it all with you and me00:23:52
it will be no more or less than 28 megabytes00:23:56
up quite a lot that's why we00:24:00
Of course this is not necessary, we will connect it00:24:02
only those styles that we need00:24:04
that's why what I did I'll copy00:24:08
for example older than css but it’s possible00:24:10
copy just for yourself in case00:24:12
if suddenly you need the style code00:24:13
will be needed if you are doing something00:24:15
big project and and yes suddenly it00:24:17
outline will be needed can be done00:24:20
This is how I installed the shield, now I’ll show it here00:24:24
such a shield would be taken out by capsis, that is, for00:24:26
Lotta and for George why am I doing this00:24:29
because I then from that file which00:24:31
we will connect I will delete everything here I am00:24:34
I will delete all styles except those that00:24:36
we need it, we can do it in00:24:39
in principle, as you can see, it’s not difficult, that’s all00:24:41
That's why you can download it again too00:24:44
don't bother and let's move on to00:24:46
Yandex honor l and connect everything00:24:49
required fonts00:24:50
write tek link press tab. flash00:24:54
select the folder css fund though george and00:24:58
find the style.css file here00:25:01
I copy this line00:25:04
I erase part of it and then connect with00:25:07
phones lotta older css excellent00:25:10
connected now let's open the font style00:25:14
Georgia de ses file where it happens00:25:18
connection00:25:19
let's see what styles we need00:25:22
need george bolt and regular then00:25:24
there is everything else we don't need so00:25:26
for example bold italic it’s simple00:25:28
I delete further, I just delete italic too00:25:31
George Bolt we need and the region is here00:25:35
we have a bolt we have a regular one that is00:25:38
implied region not specified here00:25:40
fund weight normal background style normal all00:25:43
there is nothing else like this here00:25:44
way we left to connect00:25:47
just what we need00:25:51
excellent and00:25:53
we do the same with the lotta shift00:25:56
control click font lasso00:26:00
Now00:26:01
look at the regional style here00:26:05
medium and this one in increasing order then ourselves00:26:08
bolt and all region medium and bolt themselves 300:26:14
drawings here is a lot of payment here00:26:17
styles so I will leave only that00:26:20
what we need hairline remove heavy00:26:23
delete heavy a little delete00:26:26
region leave the highlight delete sammy bold00:26:32
italic vitalik we don't need black italic either00:26:35
no again italic medium italic son00:26:40
italic just son doesn't need media either00:26:43
we need that is medium feeder medium and00:26:46
we just remove the ball ourselves and just a little bit00:26:49
the bolt background ourselves became normal, we00:26:51
we leave everything, everything next I twist and00:26:54
I'm deleting because we have00:26:56
in the design there are only three styles which00:26:59
we have already connected the medium region ourselves00:27:03
bolt let's check yes it's so good acid00:27:08
we connected great too00:27:09
now let's set body she here00:27:14
in general, we have all the text here simply00:27:16
regular text typed to us using lott00:27:19
let's see here here here in00:27:21
buttons there and so on so this00:27:24
there will be a font that00:27:26
basic and that is it00:27:29
used on the page in the body tag00:27:31
it is set as the main one00:27:33
copy font-family lotta go to00:27:37
let's close here, go to bass and00:27:40
in the body I will indicate the font-family I will write Lotta00:27:43
a comma and add sans-serif that is00:27:46
sans serif families just in case00:27:49
suddenly for some reason the file is not00:27:51
will load with the font to send serif00:27:54
then there was also a straight font00:27:56
great what else will we add to the bodysuit00:27:59
for the body we will still have a fund of 400 then00:28:04
By default we have a font without thickness00:28:07
that is, but it’s kind of normal and the size00:28:10
we have 20 pixels of text, that is, here00:28:12
if I click here we see 20 further here00:28:16
here it's just just ordinary00:28:17
text, not headings, not navigation, but00:28:21
just the text as it is on the page00:28:22
basically it's 20 pixels that's why00:28:24
you can immediately specify the background site 20 for the body00:28:28
so that then for each element00:28:30
permanently it is not duplicate it is in00:28:32
default base is 20 excellent00:28:36
done further we have even more00:28:39
Georgia but we’ll turn to him later00:28:41
that's when we'll type up the headlines on00:28:44
and we will need to apply this font00:28:47
then we'll go see what it's like00:28:49
him fund million tons just Georgia then00:28:51
we use00:28:54
great, now let's move on to the base and so that00:28:59
in the database I would also add let's add00:29:02
such utility, that is, utilitarian classes00:29:04
which are useful something we will during00:29:07
development uses something from us00:29:09
will remain in the layout there is a class like00:29:11
but he who will just do00:29:13
the display is new and cannot be imported00:29:15
was to interrupt so that he has priority00:29:18
I was taller and I see what Alekhine is00:29:20
visually hidden it makes the element00:29:21
hidden on the page that is the element00:29:24
still remains in the markup of it00:29:27
still read different00:29:29
devices00:29:31
which screen leaders are up to the device00:29:35
that ensure website accessibility00:29:40
for people with disabilities00:29:41
there and so on, that is, search engines00:29:44
systems will also see this because this00:29:46
the text is as if it exists but we have it00:29:48
visually hide this for us in00:29:50
will be useful later00:29:52
then let's have some more basic ones00:29:56
grid styles well, that is, a grid but this00:29:59
this is not meant in the sense of css grid but in00:30:02
meaning the grid elements on the page are00:30:05
here we are getting a little closer00:30:06
We’re starting to get a little closer to the layout00:30:09
So first of all, let's define00:30:11
here is the width of the containers, that is, we see00:30:13
that our content is on here for example in00:30:15
header that is, here's the navigation if we00:30:17
let's look at the content and she has it too00:30:20
indentation both left and right but this is not00:30:23
left and right indentation is just him00:30:24
located inside the container there is something like this00:30:26
the concept of mountainous as a container which00:30:28
has a limited width located00:30:30
in the center here we see the width is 1369 but00:30:34
it turns out 1370 if we practice00:30:37
then other elements, for example00:30:38
here in this section but there are already 1413 but00:30:42
pay attention here we see on00:30:43
got out carelessly in this case00:30:46
here it’s better to choose for example yes we see00:30:51
139100:30:52
that is, here you get a container00:30:55
more but00:30:56
let's select the first second column and00:31:01
somehow I want to choose00:31:04
I want to choose carefully like this00:31:08
I'll choose group 29 on that's how it goes00:31:11
at least this one at least this block is bigger00:31:13
let's do this group 29 and 1 and 2 here00:31:17
1368 that is also 1370 yes we will see here00:31:21
at least here the text comes out a little00:31:23
outside the picture but here for example he is00:31:25
doesn't come out much here, he's almost00:31:27
in the picture, that is, sometimes in design too00:31:29
there are some nuances like this00:31:31
when a designer is not really something00:31:33
done carefully yes as we see here00:31:36
text and00:31:38
What was just visible is no longer visible00:31:41
as you clicked it was clear that what text00:31:46
that's what he goes to but a little to the left than00:31:49
picture although everything is done here00:31:52
carefully we see they go one by one00:31:54
lines and here one at a time, that is, like this00:31:56
there are artifacts in design00:31:58
designers are people too, not always everything is right00:32:01
line up perfectly but we have to00:32:03
understand you see fix it along the way here00:32:06
that is, what was the point?00:32:08
the size of this container is here00:32:10
our next one here it is also 368 then00:32:13
there is also 370 pixels, we will have this00:32:17
there is this our container on pages00:32:19
which00:32:21
wraps the content so let's00:32:23
Let's write a style for the container.00:32:25
container and00:32:27
we will indicate here the following values:00:32:30
we will make you adaptive but it will be00:32:33
the next step, that is, I usually always00:32:36
first mile your desktop then00:32:39
I'm switching to the adapter that's why now in00:32:43
In this case, we set for the container00:32:44
fixed width00:32:46
thousand 400 pixels why 1400 but00:32:49
look, we have determined that he00:32:51
1370 but the container will have fields according to00:32:56
15 pixels so that the content is not adjacent to00:32:58
edges of the screen, that is, when the screen00:33:01
maximum also size 1370 and00:33:06
content another 370 it will be adjacent to00:33:08
edges it don't be it's ugly it's00:33:10
bad so we will have 1 year 15 and00:33:13
padding wright 15 paddings left right by00:33:15
15 respectively for content already00:33:18
less space it should be 1370 so00:33:21
we increase the width by 30 pixels00:33:23
we get 1400 and that’s naturally marjan00:33:27
lift arjan right out00:33:29
line up the container in the center excellent00:33:33
this was done by such basic styles for now00:33:36
the container was prescribed and now00:33:38
we can definitely move on to layout and let’s begin00:33:41
we are with you00:33:42
convolution navigation top of the header to the word00:33:46
I will also note that as we progress00:33:48
maybe we will have some content00:33:50
take up more space than00:33:53
standard container yes that is us00:33:55
did you see that the content is at the top here?00:33:59
this section at 1370 but for example in the section00:34:03
about sex with stories we see width 150000:34:06
it's okay, we'll create it00:34:09
additional class container white then00:34:11
there is such a wide version of the container00:34:13
which will be larger in size here's another00:34:16
maybe yes, there is such a version00:34:20
like a fluid container, that is, here00:34:22
strappy it is also available in other frameworks00:34:24
that is, a container that just goes to00:34:26
one hundred percent of the entire screen or section00:34:28
where is it located yes it's back to there00:34:31
where in men but in our case it is00:34:32
always 1370 and only in one block00:34:35
we have a container that's really just a little bit00:34:37
there will be more white container here ok00:34:39
ok now let's move on to the top navigation00:34:42
here it is, that is, navigation, aka the header00:34:45
here's us Olivia00:34:47
logo title and buttons00:34:50
[music]00:34:53
in general what are we doing let's write00:34:55
starting markup for this section00:34:57
let's go to God and to body I will write00:35:01
next next tags I write like this header00:35:06
press about unfold it week00:35:08
Fyodor hurried. header that is and00:35:11
we style everything by class, this is good00:35:13
practice is very convenient and00:35:15
We always do all styles according to classes and00:35:19
then we can hang any class on00:35:21
any and our style will work, but what if00:35:23
we style by tag there along the ore and00:35:25
so on then wherever we have this00:35:28
tag will stretch these styles which once00:35:30
that's why we wrote to him somewhere00:35:32
it's impractical to create a header with a class00:35:36
internal header create a container00:35:40
Well, inside the container we create a row for00:35:44
to align elements in a row and00:35:47
let's fill the elements here let me00:35:49
I'll probably go back to the layout a little before00:35:51
Let's make such an explanatory note then00:35:53
there is something and how it will happen with us00:35:55
here we see the design, I’ll click00:35:58
printscreen and00:35:59
I'll draw a few of these here00:36:02
rectangles so that we can better00:36:06
you decided what will happen with us00:36:08
located means we first create with00:36:11
by you because the header is like this00:36:14
which contains this entire section here00:36:16
first further internal we define00:36:19
container let's draw it blue here00:36:21
he is a container, that is, at the container00:36:24
Fedora's task is to indicate what it is00:36:26
header maybe give a white background there00:36:29
frame below we see there is such a00:36:31
strip give a frame from below further container00:36:33
the container has its own task to limit00:36:36
width00:36:37
line up in the center further inside00:36:40
container, we need to arrange the elements in00:36:42
in principle we could hang one row00:36:44
this flex there for example for a container00:36:48
but it's still a different responsibility00:36:50
It’s better to differentiate this and it’s worth it00:36:52
differentiate because somewhere in00:36:54
container there needs flex in a row somewhere in00:36:57
column yes it's all different that's why00:36:59
here the principle is so separate00:37:01
responsibility container he plays00:37:03
we only need our role inside00:37:05
line up let me take it again00:37:07
red color and we make another div00:37:10
which will line up a row of pav leks00:37:13
let's call it a header roll further inside00:37:17
of this row we will already place cells00:37:20
for the elements of our header, that is, the first00:37:23
this is our logo, so let's00:37:26
for example, I’ll draw it in green, here’s an example00:37:30
so first we will have a cell under00:37:32
logo it will be logo then it will be div00:37:35
under navigation it will be texts and there00:37:39
will there be links00:37:41
list for navigation and there will be another one00:37:44
this is the block of code for the login button00:37:48
will be located on the right, that is, like this00:37:50
here we will do it with you but already inside00:37:52
there will be a picture with the logo here00:37:54
did you eat the links?00:37:56
but there will be one link and one button00:37:58
Here we are implementing the act00:38:01
So let’s move on and now we’ll write00:38:04
marking on when indicated what and how00:38:07
will happen I'm creating a series here00:38:09
header hyphen roll here in this lesson I00:38:15
I won't use bay wing for that00:38:17
so as not to complicate it, that is00:38:20
This is our light simple version00:38:23
while the homeless are minga I believe that00:38:25
first you should learn layout in general00:38:28
understand this how why he needs a subscription00:38:31
there will simply be a number of specific ones00:38:33
concepts of rules, this is a methodology yes00:38:36
where is the blog where is the element how is this correct00:38:39
write I know that newbies often you there00:38:41
confused therefore in this layout we00:38:43
let's omit the naming of the smokeless minga00:38:46
you can also make it pretty clear00:38:48
cool and that's what we'll actually see00:38:51
this layout has a header and a container00:38:53
there is a roll move and we create further inside00:38:55
blocks means what kind of blocks I will have00:38:58
there will be a logo block for me here again yes I am00:39:01
I can do something like this like a header logo00:39:04
let's do that, that is, a logo00:39:06
which we have in the header00:39:09
here next at00:39:11
we will be going next block with00:39:14
Let's make the navigation like this with a header hyphen00:39:17
on00:39:18
more precisely, I write. header on you press up00:39:22
and all this unfolds like this for us and00:39:25
there will be a login block. header login00:39:30
great, let's write it like this here00:39:32
for example logo on and00:39:36
we’ll put the natural lagin here later00:39:38
what is needed but for now let’s work here00:39:40
with what we have we got it with you00:39:43
these are the classes let's do it now00:39:44
finish to see the results later00:39:46
let's go further into the next one00:39:48
we will do sections naturally00:39:50
faster because we'll already accelerate in this00:39:53
yeah, well, that is, I’m just explaining00:39:57
steps what and how is happening with us but00:39:58
when will we do it for the second time?00:40:00
containers row of course we are so on it00:40:02
We won’t be distracted and so on throughout the sessions, yes00:40:05
as I said, that is, I will do this00:40:06
directly separate00:40:08
separate files for each section from00:40:12
so let's in the folder with00:40:14
I'll create a blogs folder I think it will be like this00:40:18
convenient and will already be in the blogs folder00:40:20
create css progress files here again00:40:24
this is purely an educational topic so that we can00:40:26
you distributed the code before but in fact00:40:29
then when is it going at all?00:40:31
fully finished website with all css code00:40:34
collected into one file with another name00:40:35
fixed so that it is generally less there00:40:37
took place but for the current academic00:40:41
lesson, we don’t need this, on the contrary, we do it ourselves00:40:44
convenience is important so that we00:40:45
understood that where we have it written they00:40:48
jumped one file per thousand00:40:49
lines that's why we created the file header00:40:52
css, the only thing you need to do is include it00:40:54
here you can by the way00:40:56
comments make what we have like00:40:58
rosettes here we have font font and and before00:41:03
fonts and did so blocks action then00:41:06
there are sections blocks that are not the point, we write tickling00:41:09
evenings hear css blogs feed rss here00:41:14
connected the file00:41:15
Further00:41:17
we transfer all these classes during css I then00:41:21
there you can just like this like this00:41:22
transfer there classes, etc. at least once00:41:25
wrote yes I will use the plugin00:41:28
I have a tractor in a minute if you need any instructions00:41:30
on it there is a channel for this I00:41:32
I just select it all and click it00:41:34
kontrol shift x it's quick for me00:41:36
copies control v here and we see before00:41:39
that all the necessary style I got here00:41:42
here is the container we have registered with you in00:41:44
database so I delete it, we already have it00:41:46
described from here I remove everything else00:41:49
We are now stylizing and so on along the way00:41:51
let's see what he has00:41:54
here the meaning means the header will have00:41:57
according to money, indentations above and below that is00:41:59
we see the content does not fit to the edges00:42:01
there is some indentation and we choose the most00:42:03
the big element in our case is this00:42:06
button highest look indent00:42:08
up and down 17 pixels fine00:42:11
that means you and I are doing 1 each at Fedor’s00:42:14
tab 1700:42:15
ipv17 1 bot 17 great next00:42:19
Fedora also has a frame, that is, here you are00:42:22
you see such a gray frame is drawn00:42:23
let's control backslash again00:42:26
including all the panels here he is god here he is00:42:30
de veider is in layers and00:42:32
cockroach to then but my video is not strong00:42:35
overlaps there is a line panel then00:42:38
There is00:42:39
drawn stroke and we see the thickness00:42:43
1 pixel color in general we will write this00:42:48
border will be written here00:42:50
border bot one pixel solid00:42:55
grille and this color let's go and check00:42:59
I haven't even opened our site yet00:43:03
let's go to Yandex, it's still small right00:43:06
click inside yandex xml or on the file00:43:08
select open drove their server is a plugin00:43:12
which should be installed visual00:43:13
studio code if there is a lesson on weight code00:43:16
also on the channel that's what we are with you00:43:18
got it yes we got the hat let's00:43:20
press f12, that is, panel tools00:43:23
developer let's do it this way I'll do it00:43:26
I will close it anyway00:43:29
yes only if the vodka is like this00:43:32
non-standard option but here myself even00:43:34
uncomfortable00:43:35
that's why I make my video00:43:40
smaller, that is, I'm still here with you00:43:42
but so that we can observe the style here00:43:46
we see the header we see the money from above00:43:48
and below and border nerd yes that is00:43:50
great it is so wide yes we have it00:43:54
the container here gives a width of 140000:43:58
[music]00:44:00
correct from 100000:44:03
up to 1370 up to 1400 well then like this00:44:08
really yeah that's it00:44:12
in short, so yes, okay00:44:16
we work here then00:44:19
so how to make everything happen00:44:23
apparently this is how they can do it before leaving00:44:25
from the situation00:44:28
this is how we would compose the form00:44:33
that is, I'll leave the camera and and00:44:36
here the code will also be visible perfectly here00:44:39
we see the container we see its dimensions there00:44:41
width we see the header what00:44:43
We've styled it, now we're arranging the elements00:44:46
in line that is the header roll for which00:44:49
we set the display to flex so that the elements00:44:51
lined up here they are00:44:53
are lined up left by default00:44:55
side and there is one more point that is worth00:44:58
register that is, here we have00:45:00
the elements will be different heights but so that00:45:03
they were all equally on the same level00:45:05
beautiful they should also pass the line oh00:45:09
there with the center that is vertical00:45:10
alignment but this is along the transverse axis along00:45:13
in the center like this, an excellent header00:45:18
we wrote the row in the same way for x gifts00:45:23
I would pass 6 fi content space between then00:45:26
there are elements to be scattered around the edges first00:45:29
first last last but because00:45:31
logo first last element in00:45:33
in the end, well, here is this element for example00:45:36
that is, here if the indentation is uneven00:45:38
but it can be asked, or you can00:45:40
leave it evenly like this00:45:44
let's move on and look at what happened00:45:47
Now let’s actually style it further00:45:50
logo click on the logo here we have it00:45:53
such a vector element that is, we have it00:45:55
export as svg element here for00:45:58
this00:45:59
I select it here I selected the layer on the tab00:46:03
design export it will close you00:46:06
click on the plus sign here and select the format00:46:08
svg you can click on the preview to see00:46:11
what will be exported and click00:46:13
export logo so he asks where everything is00:46:17
this is export here is my folder00:46:18
of our project and into the image folder let's00:46:23
I'll call the head like this, I'll just call it logo00:46:27
we will still have a logo in the basement but00:46:28
it will be a little different, I’ll call it logo00:46:31
so the svg there, in theory, will stretch when00:46:34
saving here logo.svg is excellent00:46:37
go to index.htm of this dialog00:46:38
write this image tab source grid00:46:42
more precisely . hear the image logo.svg here too00:46:46
viola let's write logo great logo00:46:50
we are ready next00:46:52
navigation erase nav and write markup00:46:55
under navigation means it will catch up on but00:46:58
Well, look, that is, we are kind of creating00:47:00
so on the car then we do ate and create00:47:04
link and some link text like this00:47:07
it looks like link here but like with us00:47:09
you basically have a div here and nafta here00:47:13
this can be combined can be done here00:47:15
so on on and then there is this div with00:47:19
class header on the background and it will be on you here00:47:21
that is, one less wrapper00:47:24
was00:47:25
this is how you and I do it00:47:27
further here are our navigation links like this00:47:31
it will look natural where they stand00:47:34
by copying from the layout like this00:47:38
carry00:47:42
control of the film is just enough00:47:44
control click on the text layer kontrol00:47:47
ts and it is quickly copied like this00:47:51
insert perfectly, then some approach00:47:54
yes we can give additional ones here00:47:57
classes but not additional but classes then00:47:59
Yes, I can add a header class here00:48:01
on the blist you can only throw a header on00:48:04
sheet oh there on the links give a header on in00:48:08
Lenka Dorn famously in wrestling, well, in short00:48:10
saying we can hang these00:48:12
additional classes but00:48:14
that's how it is in this case, yes if this is the menu00:48:17
we have a single level, there won’t be 2 here00:48:19
drop-down menu level something else but00:48:22
this makes no sense not that it makes no sense00:48:25
and this can be neglected, let’s say so00:48:29
there we can just style it there by00:48:30
cascade there hader nov y.l. well along the chain00:48:34
header on whether header on and that is, we can00:48:37
just choose because we know00:48:39
what is the structure of this navigation?00:48:41
so simple one-level and it doesn’t00:48:43
will change so we are quite00:48:46
we can do this so in the header here00:48:49
header on fm and this is how we00:48:51
let's work, go to the markup and look00:48:54
to the text inside cholera your Olivia00:48:56
look at the size00:48:58
2020 is basically standard for us00:49:01
size medium and weight medium that is00:49:03
this is a little different this is the fund 500 this00:49:05
not 400 further color we see fund 2929 here00:49:09
By the way, also an interesting point about the color00:49:12
text sometimes this often happens that in00:49:15
in the layout the text is not black but slightly different00:49:18
that is, if we click here on00:49:20
text visible 48 48 here 42 42 42 42 42 4200:49:26
he's not black yes he is 48 48 so what00:49:31
here a designer there 42 there 48 it’s a matter though00:49:34
my00:49:35
there’s not much difference, that’s what 48 is, what’s 4200:49:40
it's even00:49:41
within special00:49:44
there is no general idea of what we are in00:49:48
select the base color of the text on the page00:49:51
that's exactly the text on no headings00:49:53
text navigation here 42 I copy it and00:49:56
we set it to the database, that is, bss where we are00:50:00
properties were prescribed in the body, here we write00:50:03
color so that then it’s ten again00:50:05
just don't indicate, just indicated everything00:50:07
basic text like this 424000:50:10
but here in the navigation we see that after all00:50:13
another 2929 so this needs to be taken then00:50:17
it's already there but it's really strong00:50:18
differs by year, so it’s better here before00:50:21
such a moment if you don’t get flowers00:50:23
it’s much better to just follow the layout00:50:25
that is, yes, don’t don’t do something like that00:50:28
there plus minus black banged everywhere00:50:31
black no, don't do that, that's better00:50:33
still look, but in general I copied00:50:35
the color that we have navigation here for00:50:37
feeder and set it here color here 2900:50:43
29 29 next what else are we from navigation here00:50:48
we can pull it out but then look for yourself00:50:51
Yu.L. We have already canceled everything from him00:50:54
what is possible yes that is if00:50:56
we'll see, we'll reveal the hader on here Yu.L.00:51:00
he has everything canceled, everything possible00:51:01
the only elements we need00:51:03
internal line up that is00:51:05
again we'll give him flex boxing00:51:06
display flex and or the LEDs will become one00:51:08
line so let's do that for00:51:11
this00:51:12
header on entered like this, select the header on00:51:16
eat the spacebar and make the display flex here00:51:19
now the elements will line up in one line00:51:24
then there should be a space between them00:51:27
some to make it all beautiful00:51:29
carefully look at the space between them here00:51:32
we see00:51:33
7270 172 well, in short, it’s a little different in00:51:37
In general, in this case we round up to 7000:51:42
give indentation and how it can be done00:51:44
we can tell the header whether it was yes or00:51:48
just khadyr navle that is, this is also only00:51:50
there will be others here leshik no we can00:51:53
ask Margie likes 70 but it will be00:51:56
for all elements and for the last but00:52:00
the last ledge on the right should not be00:52:02
that is, only to 1 skeleton right 2 3 but00:52:06
the last one is just not that he is in the way00:52:08
that is, he asks just don’t retreat but00:52:11
it shouldn't be here so it's needed00:52:13
you can cancel it without setting it right away00:52:16
can be canceled that is, can be canceled00:52:19
write a header like this00:52:22
: last child is one of the options00:52:27
indicate Marjane Wright 0 that is, we00:52:29
we choose the last one we talk about knocking00:52:31
zero on the right let's go check it out00:52:33
there is no ledge on the right, this is an option00:52:35
can be done at the moment when we00:52:38
we ask to write here: notes and laz child00:52:43
that is, how would we set for everyone00:52:45
elements but except for the eyes chile and even then00:52:48
we don't have to write here00:52:50
additional this palace selector to the child00:52:51
that is, we immediately combined it here00:52:54
for everyone except the last one they set the rules00:52:57
the right is valid in all except00:52:58
the latter can be done like this or00:53:01
Is it possible to do it like this plus?00:53:05
I mean, we choose too much and then00:53:08
the one following it, that is, the one on the right00:53:11
and make marjan lift 70 that is00:53:15
second third fourth fifth will be00:53:18
access to the left to from the previous one but at00:53:20
the first one won't happen because the first one00:53:22
no, the neighbor on the left can write here00:53:24
such a combination00:53:25
here it is even cleaner and neater in my opinion00:53:29
look than not love child so look00:53:33
how does it work? 1 doesn’t have a stupa.00:53:35
second indentation from the left for 3 4 for each00:53:38
the next one which has a neighbor on the left00:53:40
there will be access at the first ledge there will not be00:53:43
this is how we did it00:53:47
great here by the way you can also think00:53:51
how the links will look on hover00:53:53
yeah, so maybe they would react somehow00:53:55
I can change their color by clicking on the title00:53:58
to copy its green color00:54:00
It seems like such a branded color for this layout00:54:02
And00:54:03
we will indicate it for references, that is, we00:54:07
we'll write it down with you, let me remove the unnecessary stuff00:54:10
I will write hodor hodor on the space and this00:54:15
the link that lies inside x darn and00:54:17
when will it be in the hover power to call00:54:22
or it will change to green color00:54:25
again we are also variables here00:54:27
we won't use I mean with with00:54:30
variable because that's what we have00:54:31
entry level lesson so they don't00:54:33
get distracted and here, in principle, the layout is not00:54:36
so big that everything is right there00:54:38
output variable so we will do00:54:41
so I take the groin color will change and00:54:44
so that it changes smoothly, that is, now00:54:46
it will change so quite dramatically then00:54:49
is new then we point it 1 time00:54:52
so I would like to reset this selection here00:54:56
the inscription changes dramatically00:54:59
to make it smoother it will be a little00:55:01
more beautiful for this I need initially00:55:04
select links and00:55:06
to say that there will be no transition, that is,00:55:09
there will be a smooth transition for color but00:55:12
for the color property two tenths00:55:14
seconds00:55:15
from the time function will be for example and00:55:18
the bottom is so smooth, non-linear, that’s great00:55:22
Now they change their color so nicely00:55:25
great, now let's make buttons00:55:27
we see login from sign in and stars trial00:55:31
let me copy the texts right away and go ahead00:55:35
to Yandex html and write for them00:55:38
necessary layout here it is header login00:55:40
content we have the following sign in and00:55:44
start real here are the markings for them00:55:48
the following that is, despite the fact that she00:55:50
looks like a link and the second one looks like a button00:55:53
it all depends on what actions are not00:55:55
commit in principle can be completed00:55:57
links to most sites and you will find00:56:00
you will find that the buttons also have links00:56:02
it's used normally like this00:56:04
common yes but in general semantics00:56:07
link is the element that us00:56:09
he's leading us somewhere, he's leading us to another00:56:12
page or does he lead us by anchor to00:56:15
another page or scrolls00:56:16
some section of this page specifically to00:56:18
anchor link00:56:20
if we are talking about buttons so loaf then00:56:23
this is the one that launches some00:56:25
mechanism on the page we clicked modal there00:56:27
to opened00:56:30
probably this is modal so I opened up more00:56:32
I can't think of anything for this button00:56:34
yes, well, that is, within the framework of this00:56:36
page we remain something starts00:56:38
some blocks have disappeared00:56:40
others showed up and so on, but00:56:44
that is, it can even look like a button00:56:47
but in fact it can be a link, say00:56:49
so in our case these will be both links00:56:51
that is, let them lead us somewhere to00:56:53
other pages, that is, the site itself and us00:56:56
leads somewhere and starts real us somewhere00:56:58
leads therefore it will be 2 2 t g l00:57:03
like this like this again if00:57:05
correctly write css styles for classes00:57:08
then you can change the tags and all that00:57:10
will work great too00:57:13
made a header login and here I am00:57:17
I'll add the loaf class I'll use00:57:20
abbreviated name for abbot, that is00:57:22
can you write the whole loaf in general I00:57:25
against cuts and not worth it at all00:57:27
reduce classes that are not clear00:57:29
why did you shorten them, that is, there is no need00:57:32
write l instead of logo, no need to write h00:57:35
instead of header this is a bad abbreviation00:57:39
but as for btn this is already so00:57:41
common in many frameworks00:57:44
sex from frameworks is used by btn as00:57:46
loaf that's why it's like this00:57:49
common abbreviation00:57:52
ok to use well written00:57:54
with you header login now let's00:57:56
let's style what's here, choose00:57:58
control shift x go to the header and00:58:01
Well, yes, in fact, only login moves00:58:03
loaf we have means that we have new ones00:58:07
cores login to tus text inside what is it00:58:10
must be let's see what he looks like00:58:12
same as in navigation lotta medium 20 then00:58:16
here too although not here region here00:58:18
lotara jaguar 20 that is, essentially it00:58:21
standard standard text and even it00:58:24
I can’t correct you in any way, the only thing is that00:58:26
header login hey link to so she doesn't00:58:29
was00:58:30
although it won't be blue because we have00:58:32
all links to should be light on the page00:58:36
the color we have here is zero zero here is black00:58:39
yes unexpectedly00:58:42
probably the only moment where we have00:58:44
black present00:58:47
well then I won’t leave00:58:50
let's say then from this00:58:52
then I’ll do the design in color black, but that’s it00:58:57
Here00:58:58
and for links it was written00:59:00
so what else can you do to00:59:03
this link is some kind of hover00:59:04
it was interesting, I’ll duplicate this00:59:07
header selector login hey yes I'm writing here00:59:09
hover that's the color I'll put in green00:59:13
which we had00:59:14
itransition I’m also copying for her00:59:17
header login hey transition color two00:59:19
tenths of seconds00:59:22
Great00:59:23
let's go and watch the sign in great00:59:26
and now they're putting on a trial, we'll give it to him00:59:29
let's style it as a button for this00:59:34
returning from s here is our button means00:59:37
what do we have the button does it have00:59:39
green background for money left and right for00:59:42
50 is the height00:59:45
50 pixels00:59:47
So let's go and do it for the button00:59:50
stylization by the way here for the button I00:59:52
I will write the following styles for the loaf class, and00:59:56
link with class loaf because link00:59:59
can also give some of his own01:00:00
additional stylization is given that is01:00:03
we say that this is for and links01:00:05
which for the button we also have them here01:00:08
stylize01:00:10
forced by all the styles that are here01:00:12
there are references to hanging01:00:14
there was no redefinition that means01:00:18
backgroundcolor is copied from the company, here you go01:00:22
All you have to do is choose the file here01:00:24
inspect go and you can take it from here01:00:26
colors or here inside scroll here01:00:29
would be grown too copy here color copy01:00:32
to clipboard01:00:33
clipart copied and indicate01:00:36
backgroundcolor01:00:38
lattice and this color is further what else01:00:41
there will be because there will be a height of hate 5101:00:46
pixel and pixel01:00:47
there are paddings ft-1 wright 50 each01:00:51
text color white button next background says01:00:57
let's indicate 20 well, in principle, yes it’s like01:00:59
standard here but I'll point it out anyway01:01:01
why before I note that it is not simple01:01:04
those are still a button then an element01:01:05
interface and the button can be located01:01:08
inside different blocks, that is, it can01:01:10
be wearing a hat in the basement anywhere and in01:01:13
different blocks may have their own functions but01:01:15
button she is like such an independent blog01:01:18
as an independent component so here01:01:20
it is worth specifying the background says fund weight this01:01:22
everything needs to be written down next to this button01:01:24
there is a rounding of corners border-radius01:01:26
four pixels that is, if we choose01:01:29
well, either here on the tab01:01:32
inspect we will find the bard's radius with you01:01:35
4 either in the design here is the radius01:01:38
rounding 4 it is and01:01:40
what else will I ask transition opacity 0 201:01:44
seconds, that is, we will change our faith01:01:46
opacity we will write the loaf with you like this01:01:49
hover opacity 08 that is some kind of effect01:01:52
when we hover over something01:01:54
the plan went smoothly01:01:57
transparency go away that's it01:02:00
but we see that something is needed01:02:02
improve what needs to be done height01:02:04
you need to set at least 51 it didn’t work01:02:08
because the default links are this01:02:10
online elements for n elements well not01:02:12
we can ask for money there and so on01:02:14
then height and so on that's why01:02:17
we can give display inline here01:02:20
the block is that it will be displayed01:02:23
how is the online dock now the height will work and01:02:25
for money there is good further similar we01:02:28
we see that something is happening with the text01:02:31
yes it turns green why because01:02:34
what should hawera follow the links from01:02:36
the sign in block in which it is located then01:02:39
yes, but from the login header block01:02:42
that's why this doesn't happen01:02:45
that is, for the chorus button it’s also worth it01:02:48
it is correct to indicate the color01:02:50
should be that is, it remains white01:02:52
this seems like it might be redundant, but01:02:55
this will save you from possible mistakes well01:02:59
or from possible edits in the future so that01:03:02
then don’t go back to your layout01:03:04
edit that's why it's normal01:03:05
write straight to the maximum and well01:03:07
that we are now faced with this01:03:10
so loaf hover so and01:03:13
hey loaf hover that's it yes that is we don't01:03:18
we can simply rely on those properties01:03:19
blocks in which our button is located01:03:22
yes because suddenly you wrote something01:03:24
there's definitely that's how we have it here before01:03:26
following the links inside this block but on01:03:28
this shouldn't have any effect on the button01:03:30
that's why we've gone into so much detail01:03:32
we register and now you and I have01:03:34
the task is to build this text start real01:03:36
start royal in the center of the button one of01:03:40
ways when we have a button height but01:03:43
always fixed and no second line01:03:45
text do it like this that is01:03:48
look we set the height to 51 and give line01:03:51
at least 51 that is, thus the height01:03:53
line is equal to the height of the button this is01:03:57
simple lightweight universal option01:03:59
when you just have01:04:01
one line, well, it’s not provided01:04:04
that there will be a lot of text there01:04:07
this is how it all works beautifully01:04:09
do this and how to do it differently01:04:12
that is, this first option we can01:04:14
the button is easy to align everything I have it01:04:16
I use it quite often and in many places01:04:18
the second option is the following and also set01:04:20
height but we line up the text according to01:04:24
yes, we can set the height even like this01:04:26
make a min hyde that is, as it were01:04:28
minimal type of what if it happens01:04:30
there is a lot of content then the height may increase01:04:32
so we can convert the button to flex in01:04:36
Affleck xbox and align internal01:04:38
content is centered as well as horizontally01:04:41
and vertically jesty file content01:04:45
center and line and this is the center, that is01:04:47
it will turn out like this and the height, that is01:04:50
we also see in the center, although not quite01:04:52
for a long time it's still going down a little bit01:04:54
displacement until moment01:04:57
line Hyde I would give one01:05:01
although it doesn't have much effect01:05:05
Well, now, for example, we can01:05:11
add more text here but here here01:05:15
God bless01:05:16
here we have enough size up to but if01:05:19
there will be limited width01:05:21
more text it is even on the second line01:05:23
there is a button to grow, that is, but somehow01:05:25
there will be a button, but there is also this one01:05:27
option we can do01:05:30
ok we stylized the button01:05:33
gave the truth with this option we see01:05:34
sign in jumped up why because01:05:36
we now have01:05:39
online element this online element01:05:41
and these are flexx elements they are already so different01:05:44
under a friend 2 online or inline01:05:46
inline block would be in a row, here we have them01:05:48
now we also need to line up for01:05:50
We will write this in the login header01:05:53
flex display so we needed a header01:05:56
whose login we deleted more precisely01:05:58
Perry was sent into exile, but here he is01:06:00
we return it and write displays lex then01:06:03
yes let's go check perfectly in a row01:06:06
lined up but we need it vertically01:06:08
so that they also stand neatly line oh01:06:11
there we go from the center and check it out01:06:13
we need to set a space between them, let's01:06:17
let's see what it is equal to, it is equal to 3501:06:19
pixels we will write it as follows01:06:23
So let's do Phaedra's login01:06:25
then I access the element which01:06:29
lies inside him and his right neighbor and01:06:33
I give martin f-35 that is what I did I01:06:36
said that the elements that lie on01:06:38
the first level inside the header lagina then01:06:41
there is a first level this year01:06:43
directly inside that is if01:06:45
here, for example, there would be some tex01:06:47
sir, this also happens there01:06:49
highlight this word yes I don’t want it01:06:52
engage therefore wrote sign01:06:54
more less that is only the first01:06:56
level but the asterisk means any01:06:58
element, that is, we will not select any element01:07:00
but at the first level that is, he will choose01:07:03
the first link and the second but it doesn’t span01:07:05
choose here and give it, I say and choose here01:07:08
any element and then the neighbor to the right of01:07:10
him and indent to the left until that is again01:07:13
we won’t be the first to get out because01:07:15
he has no neighbor on the left and daimon stupa01:07:17
on the left thus you and I01:07:20
the situation has turned out that we can01:07:22
add as many links here as you like01:07:25
buttons and there will be indents between them01:07:28
there look here we have sign in I'm here01:07:30
I'm inserting beauty yes oops why is that so01:07:34
it turned out I just pasted one link01:07:36
in another, this is this moment01:07:39
it turned out because here I am in one link01:07:41
inserted another so no need, I can button01:07:44
once again about copying here is a copy yes01:07:47
and please, no matter how long we have here01:07:48
there were always no elements between them01:07:50
the indentations will be beautiful but from the last01:07:52
there will be no excess to the right what is to the left01:07:54
goes all 1 on the left, too, there will be no extra01:07:57
it was implemented perfectly01:08:01
ready by the way01:08:03
so here are the elements I'm here heathrow let's go01:08:08
this center is so excellent in01:08:10
In general, you and I have everything ready01:08:13
beautiful layout the only one from01:08:15
the moment is that I am now elements01:08:19
in the header there are 6 file contents lined up in a row01:08:23
space between well, that is, 1 at the beginning01:08:25
the last one at the end and the one that01:08:27
in the middle he's just in the middle that is01:08:29
he has the same access as for when01:08:31
logo and up to this sign block01:08:34
in but if you look more precisely at01:08:37
design, of course, it’s still not so here01:08:39
there we will see here from logo 17201:08:42
and from sign in 283 that’s why if there is01:08:46
the desire to do it anyway and like this01:08:48
correct yes then like you and me01:08:51
we'll do it, we'll line everything up on the left side01:08:53
and go away login let's set marjan left out a01:08:57
and thus he goes to the right, that is, to01:08:59
end that is, I will find the row header01:09:03
ear firewood I will remove justify the content that is01:09:07
when I remove it it will be equivalent01:09:09
flex start because it already works01:09:12
default flex start that's why I01:09:14
Let’s even comment it out, that is, it’s there01:09:16
in view of the axis at first everything goes here we are01:09:19
we see01:09:21
everything was at first axes now the last01:09:25
header element login I need it01:09:27
went to the right so I login to the feeder01:09:29
I'll hang the morjim left out but he left01:09:33
to the right I added that in the inspector now01:09:35
let's move it here, go rlogin01:09:39
marjan left out a and01:09:42
I need the correct indentation from01:09:46
navigation water logo here we see from01:09:49
logo on the right 172 yes that is01:09:52
some content if it comes from the logo01:09:54
then it works out01:09:57
17201:09:58
but in principle, since we work here in01:10:02
within the cap where we have naf naf naf01:10:05
header on you can just give margin lev 17201:10:09
not really inventing anything here01:10:11
yes there is navigation left indentation01:10:13
772 but there is no logo header indentation01:10:17
there's no way left for you and me yet01:10:18
are involved so I will delete it so that01:10:22
the empty selector didn't interfere here yes01:10:24
now this is right even by design01:10:26
great on this we have a hat ready we01:10:30
move on to the next section01:10:32
[music]01:10:34
the next section is like this01:10:38
promo block like this is also its header01:10:41
I really want to call it a header, but it’s not01:10:43
Fedor yes because the hat is here01:10:46
therefore it can be called a promo block01:10:48
it's true that I was faced with the fact that01:10:52
ad blockers01:10:54
block content called it01:10:56
over time and and the words proma in mine01:10:59
in practice also fell under this block01:11:02
so I try not to use those01:11:04
class names from hard promo01:11:07
so that these blocks are not blocked by01:11:10
users and so that they completely01:11:13
saw the site they are circumcised01:11:16
so I'll call this block home well then01:11:19
there is how you know this before home this01:11:21
there was a home page on the home site01:11:23
page in our case this is such a hall01:11:25
block that's why not let's move on to01:11:28
for this block we layout it and so the index01:11:31
system01:11:33
collapse the header01:11:35
By the way, here you can do something like this01:11:37
main structure that is the main content01:11:40
pages and after when we have01:11:42
footer make footer for 2 and that's it01:11:45
inside the main tag we can create01:11:47
sections from action and each section01:11:50
like this section of our landing page you01:11:53
I made it with an action with the home class, let's do it01:11:57
Let's also go through this section, that is01:12:00
let's draw and and in the form of a rectangle such01:12:04
elements to understand figure out what and01:12:06
how will this happen again?01:12:09
screenshot here it is01:12:11
let's move on to this section, here it is01:12:15
ok so let's select the figures first01:12:18
we'll make a big section like this01:12:22
for the entire width, then the internal ones will have01:12:25
we have a container placed which is everything01:12:28
also contains a lot of content01:12:30
container next, do we need to make a row01:12:34
in this case, basically no, well then01:12:36
yes, we can do the same by analogy01:12:38
row and then a block with content but01:12:41
there are no two elements here at least to01:12:43
make a series of them therefore in principle01:12:45
you can immediately in the container bypassing the row at once01:12:49
create a block like this block for this01:12:52
content one already inside it will go01:12:55
the title will then go to a div for tags01:12:59
p that is, we also provide for the period01:13:02
that could be several paragraphs yes01:13:04
because text is such an entity01:13:06
which can be one paragraph maybe01:13:07
be a few there are of course01:13:10
there are nuances when we go by design01:13:13
we understand that there is more than one paragraph01:13:15
definitely won’t happen, but based on your01:13:18
experience of how landing pages generally work and how they work01:13:20
customers often rule here01:13:23
is decreasing I want a whole footcloth there01:13:26
shove the text so that at least he doesn’t01:13:27
too poorly displayed not too01:13:29
it's terrible, so we'll do it like that01:13:32
blank for several paragraphs and a button01:13:35
in short, here it is01:13:37
we can get the structure here01:13:40
nuance with01:13:41
You can write a picture with a picture01:13:45
background or to prepare01:13:46
for all masks for the site engine for this01:13:50
the picture should be rendered this way01:13:54
to01:13:56
she was registered when she was still young, that is01:13:59
so that if necessary, replace it01:14:02
the picture was displayed by the system or here01:14:04
so we will do this with you too, okay01:14:06
I move on and01:14:08
layout like this: section home section home01:14:12
means first under the content container01:14:17
home section then container then like me01:14:20
and said we are blowing these contents home01:14:24
content and then the content that we01:14:27
seen here, that is, here is the title and01:14:30
now I'm quickly copying the text01:14:33
then we will do everything further here01:14:36
the title goes to us while tag and Chadin have01:14:40
we were nowhere to be found, yes of course they are01:14:42
chadin there, according to semantics, it’s the same for SEOs01:14:44
adjusting and it is desirable that it is straight01:14:46
some important title contained for01:14:49
pages we are not distracted by this we01:14:51
we type it up so that then any title is here01:14:54
you can change 100 g another one of ours 2 or01:14:57
just putting it on or just wearing it, that is01:14:59
then yes, it’s already there during SEO optimization01:15:02
it can be done but for now here I am01:15:04
because one yes that's how it will be white01:15:08
manager and01:15:10
Naturally, we style it according to the class01:15:12
class and we will have it01:15:14
home hedin that is, such a header amx 101:15:19
further text text I will have here01:15:21
be in home text like this01:15:26
way there will be etc. And01:15:28
I copy this text and cut it out here01:15:32
here like this etc. excellent and after01:15:36
this we will have a button to go here01:15:42
actually making a block for the buttons01:15:47
home01:15:49
Bottoms or hum hum btn so moment01:15:54
I'll make an additional wrapper like this01:15:56
home btn and here I already give the button to let you in01:16:00
the same will happen with the bottom class, so01:16:04
here I give a button means why so much01:16:07
wrappers why is this done for tags b i01:16:10
explained why this is necessary and in case01:16:12
tgp there will be more than one between them01:16:14
there will be 11 further hill loaf why this too01:16:17
that is, this is a kind of wrapper for buttons01:16:19
the button itself does not have an external01:16:22
geometry, that is, it has no indents01:16:24
top bottom left right she doesn't care01:16:26
you just need a button and it can01:16:29
be placed anywhere but where01:16:32
she will be placed she will be placed in01:16:34
a specific container that will give her01:16:36
external geometry, that is, the required indentation01:16:39
will give or absolutely from positioning to01:16:41
or something else like this01:16:43
we also distribute responsibility among01:16:45
we have wrappers that pull on us01:16:49
external geometry and there is simply01:16:52
these are the components that can be01:16:55
placed anywhere and simply if01:16:59
I would give this button a marjan top01:17:01
specifically by alarm, it would work on01:17:04
all similar buttons throughout the site are01:17:07
wrong, yes, that is, I would have to01:17:09
somehow dance with a tambourine then01:17:10
cancel something else and what if like this01:17:13
in general, it’s just hard to type everything up01:17:15
things are starting to happen that's why there is01:17:17
such distribution of responsibility in01:17:18
basically it’s so smooth you already know01:17:21
eyeliner boar naming that is, this is it01:17:23
the principles that I say are all based on01:17:25
methodology would be mine, that is, I01:17:27
the only one, well, I don’t seem to have him here01:17:29
I comply fully with the only one I do not01:17:31
I write the name of the classes there with01:17:33
underlining so as not to confuse too much01:17:36
here but when is it from there01:17:38
this is a very convenient approach so01:17:41
you and I wrote so well here we are01:17:43
they themselves completed our section01:17:46
the only thing the question will tell you is the picture01:17:48
how will we do either the background or01:17:51
take a picture and stretch it to full size01:17:55
section of the hill in principle let's01:17:58
let's take for example yes 1 pull it01:18:02
for the whole section ham that's what we are for01:18:05
here we do on let's do01:18:07
div with class home hyphen bg image like this01:18:13
background-image01:18:15
here we’ll put a picture of it, you need it01:18:19
save first means let's move on01:18:21
here we include it like this and01:18:25
Now01:18:27
control click on the picture and see what it is01:18:31
the picture here consists of several01:18:34
layers before there is some layer on top01:18:37
overlay which is a little like this01:18:40
then but it kind of brightens up and then there is01:18:43
the picture itself01:18:45
yes here it is the picture itself there is a mask in01:18:48
in general, all this is in the b.g. group.01:18:50
that's why this group b.g. we are on01:18:53
design tab go down here export01:18:55
plus sign jpeg format01:18:57
you can look at the preview: export of b.g. Here01:19:01
and let's create a folder here that01:19:05
I'll call it home, like the home section01:19:08
so home here and here in the jeep we have her01:19:12
save and then enter this01:19:15
image here source image home by01:19:19
jack white background01:19:22
someone has such a cover for the background yes01:19:26
that is, but we give volt an explanation that01:19:28
this is not some kind of content thing, but simply01:19:31
this background is great but now we have to deal with this01:19:34
we have to do some work ourselves, so let’s do it01:19:36
for now there's a block with a picture and I'll comment on it01:19:40
Bye01:19:41
we stylize these things then we will01:19:43
back to the picture, select this one01:19:46
control shift x section yes but we will01:19:49
writing this also in a separate file means01:19:51
no home css file was created in the bloksi folder01:19:57
we forget to connect it to the Yandex system01:19:59
lu after the header I connect Holmes s.s.01:20:03
Now I’m already selecting this section01:20:06
control shift x home css paste01:20:08
containers are leaving here, we already have them01:20:11
there is a loaf from here, it also leaves here01:20:15
What do we have left? So let’s work01:20:18
stylize01:20:19
look at the design, it means what and how we have01:20:24
here it will be here our blog home inside01:20:27
there is content again there are two approaches01:20:29
the first approach we can ask01:20:31
fixed height for blocks and here we are01:20:34
look, he has a height of 895 we01:20:37
we can say height 895 here we can01:20:42
base the height on the money that is01:20:44
Here we look from the content to the top 175 down01:20:48
336 that is, if there is more content01:20:51
this block will grow by at least one01:20:53
line more he will already grow if he does01:20:56
less then it will also be less, that is01:20:59
yes you can use it purely for padding01:21:02
I would do it this way, that is01:21:03
Well, let's imagine what it's like01:21:06
here the paragraph and buttons are duplicated01:21:09
more, that is, the question is, is it necessary?01:21:11
because of this01:21:13
increase the height of this block that is01:21:16
do it like this more like this more well01:21:19
that's how much content we have now01:21:21
more well, I think no, I think that01:21:23
it will be redundant yes because here01:21:24
It’s like we don’t see enough content here01:21:27
so what I would do is I would ask01:21:28
of course the minimum height is up to 89501:21:32
for example, here’s some money01:21:36
did that is, in general it would be possible01:21:39
expanded if there was a lot of content01:21:40
more but not much that's why it's like this01:21:44
a combined technique is used, that is01:21:46
I'll prescribe groans 895 for the hill let's01:21:50
for now let's write some background color on01:21:52
other than white so that we01:21:57
stylized while the picture has not yet been set01:22:00
background let's now I've selected the text01:22:04
feel color picker01:22:07
and so01:22:08
this is the one you just copied01:22:15
I just want some background here01:22:19
In principle, you can even indicate here01:22:20
choose a disk without some kind of biscuit01:22:24
yes and01:22:25
that's it and it fits perfectly yeah there you go01:22:28
normal, but that is, here we have it01:22:31
height is great yes we see this block01:22:33
we see its size is great and now01:22:36
we work inside, so this block is01:22:38
we have a hill container there is his01:22:41
the work is done we eat the content costs01:22:42
the center is great further what is needed here01:22:45
need to make a width limit for01:22:48
content yes yes that is our content here01:22:51
lies inside the home content and is now at01:22:54
we are right across the entire width and by design01:22:57
we'll see there it's limited, let's see01:23:00
how limited it is is the width is 44001:23:03
that's why we limit it to home01:23:05
content max view 440 I have already started01:23:09
use max view why when we01:23:11
We will adapt it for a smartphone01:23:12
The minimum width of a smartphone is 320 yes01:23:16
and accordingly this block should also01:23:18
will decrease, that is, it should not01:23:20
be fixed 440 he will01:23:23
decrease therefore max vitz that's about01:23:26
container we'll talk later about how to01:23:28
adaptation is a separate issue01:23:31
great they did it checked yes water to01:23:34
decreased from good now let's set by01:23:37
the money I was talking about that is01:23:39
let's look at 1 from above 175 from below 33601:23:44
let's do it this way01:23:47
padding for homo01:23:49
padding top 175 ip one year he is also 17501:23:54
that is, we’ll make the same ones, yeah01:23:57
they can be combined here padding 17501:24:00
pixels top bottom left right 001:24:02
and here01:24:04
that is, in this way we set and type01:24:07
money yes well, I wanted to ask min Hyde01:24:11
Hyde pointed out, we asked for money, we asked01:24:14
min hai that is, let's see what01:24:15
happened01:24:17
according to our markings f12 he is cunning no01:24:22
now here he is with action home yes here he is01:24:26
section hills we see its height at01:24:28
hints are visible 895 as we have written according to01:24:31
money is 175 but the content is at the top01:24:34
access 175 yes that is how we would01:24:37
the height was left and the money was prescribed and01:24:40
we have room to grow content, that is01:24:42
if there is more content01:24:44
that's how there are more tags there01:24:49
at first it doesn’t grow, that is, it won’t01:24:50
grow until the content01:24:53
it reaches the bottom and is served only later01:24:55
will begin to grow, that is, you don’t have one01:24:56
I need something small like this01:24:59
there is a reserve and I think it’s smart01:25:02
Fine01:25:03
great because we always remember what happened01:25:06
layout is not static it’s not like us01:25:08
there's a seal of steel and it's all like that01:25:10
will always be no this site is like alive01:25:13
the body always changes content01:25:15
supplemented today three lines tomorrow01:25:17
there’s nothing at all and here after tomorrow01:25:19
war and peace are published in three volumes and that’s it01:25:23
in this section, of course not, but here you go01:25:25
a few paragraphs we have to do this01:25:28
so it doesn't look terrible later01:25:31
Now let's style what's inside01:25:33
located means title look what01:25:36
this is the light we have here + there’s more01:25:40
Georgia we went to another often everything01:25:43
pass color pass color then look01:25:45
background says Georgia bolt 65 we prescribe01:25:49
fund wade 700 is bolt fund says 65 and01:25:55
Georgie in principle but Georgie everyone01:25:59
known as spelling yes but everything is better01:26:00
double-check yourself with the best01:26:03
copy as if from sources and I do so01:26:05
I’ll also do it, I advise you, that is, let’s go to01:26:07
Georges sticks out control click and let's see01:26:10
what exactly is the chiffon called sam or georja01:26:13
There is01:26:14
copied go to home and for home01:26:17
Hayden we're asking George I here01:26:20
I’ll write more, and serif yes yes that is all01:26:22
just in case if suddenly01:26:24
Georgia will not have windows and although windows01:26:27
7 there is if you won't be on the other one01:26:29
operating system and font file01:26:31
Well, it won't load for some reason01:26:33
but then the serif is all this01:26:36
will be displayed perfectly with this block ready01:26:39
there is still a 30 pixel space from the title01:26:42
down let's write the hill hidden01:26:45
Morjim bot 30 pixels01:26:48
here, too, there is a moment that you can01:26:53
make it so flexible and versatile on01:26:57
that case yes, what if for example in01:27:00
there are no more elements after the header yes01:27:04
here if he is so that's what he is the last yes01:27:06
and so that there is no extra indentation01:27:10
here you can give it a little differently01:27:11
if it's just something super01:27:14
flexibility, he wants versatility01:27:16
you can do it like this home hayden for example plus01:27:19
some element after it and01:27:22
morjim then marjan top 30 but that's me01:27:26
I think this is already redundant and that it is already01:27:28
it went excessively because in01:27:30
specifically in the context of this section where we01:27:33
we do you saw we have stock there01:27:34
She's big so her height must be big01:27:36
be that's why it seems to me already01:27:38
excessive moment but if it’s super01:27:41
you want to get confused like this01:27:43
do that is, so that there is no approach01:27:45
ngam this something will always have an indentation01:27:49
above 30 but at the same time as if01:27:54
you need to understand that we wrote it down01:27:55
now it will work further home01:27:58
text that is the text that is in01:28:01
in the header here it is 20 pixels 48 base up01:28:05
48 we don’t have basic 42 but here 48 well01:28:09
a little different what then crossing01:28:12
Perry let's write color like this it will be 4801:28:15
48 20 we inherit line head not01:28:20
indicated that is, auto01:28:22
so here we are too01:28:25
at least it smells mixed, it’s not confusing01:28:30
yes, the title said in high tautou01:28:32
that's why they didn't tell me anything about this01:28:34
here is the slide mixer, that is, perhaps there01:28:37
somewhere slightly different is indicated so it is necessary01:28:38
click inside select two like this01:28:40
lines or at least like this, a hundred01:28:44
forty-four five percent that's great01:28:46
that is, then we set for the context01:28:48
this is the line guide01:28:51
celine hyde one hundred forty four and five01:28:56
percent that's how we have you01:28:59
Heikin Khariton plan is great01:29:01
will inherit if we look01:29:04
everything will be fine01:29:10
so great01:29:14
great great good here we did01:29:18
let me update yes here is one paragraph further01:29:21
we have a button again from the block with01:29:24
buttons and up to the paragraph we have here01:29:26
such 53 that is, in general it is possible01:29:30
hang it but again yes you can too01:29:33
do that here's a hill text + something01:29:35
further about the stupas from above 53 of a different type if01:29:39
after the text something is posted here01:29:41
53 indentation from above but in principle it is possible if01:29:44
we are already going this way01:29:48
super super super01:29:50
flexible such a sophisticated way though01:29:52
again, yes, and I’m saying it straight01:29:55
often in most layouts this can01:29:57
to be redundant, but if you don’t01:30:00
I'm too lazy, I can do this with the text itself +01:30:03
something further marjan top on there was 5201:30:07
here's 53 even01:30:10
53 pixels ehome loaf basically I the01:30:13
home loaf and01:30:14
created so that this01:30:18
add indentation but now it’s not like01:30:21
I need it, that is, I don’t need anything01:30:24
hang it in terms of style here but here01:30:27
markings I will still leave it in01:30:29
basically he's even here01:30:31
you can call it kind of superfluous, but then01:30:34
is redundant, that is, we only have one01:30:37
we don't have a button here01:30:39
tasks to line up two or three buttons there01:30:41
a row of giving between them about stop if01:30:43
such a task was of course he would be01:30:45
by the way, but since this is not in01:30:47
in principle, that is, you can do it like this for01:30:50
leave the structure yes, that is, we kind of01:30:52
from structured they said here's home01:30:54
text text here's kombat he's here loaf01:30:56
you can leave it but if we remove it like01:30:59
it wouldn't be a big deal either01:31:01
just leave the button like this01:31:04
yeah, let's see how it all is now01:31:07
it displays perfectly the only thing is01:31:09
look here is our button yes it is01:31:11
stretched out why on stretched out on and01:31:14
this is where it happens because01:31:15
we previously gave the buttons a flex display and01:31:18
now he's starting01:31:20
it works like a flex box for01:31:22
internal elements but both externally01:31:25
geometry, yes, it works like a block01:31:28
that is, it stretches to the entire available01:31:29
width now we need something like this01:31:32
of course we can edit that01:31:36
the container in which the hang is located01:31:39
also align with flex01:31:40
this on the left side for example that is to01:31:43
for example, our button is at the top01:31:46
content let us tell him display01:31:48
flex flex direction stake and alayna this01:31:51
slow start we can do it but this01:31:54
I don't really like the idea because01:31:56
Now01:31:57
that's where we have buttons for us01:32:00
you need to remember this that they will be here01:32:01
stretch across the entire width, yes, that is, but here01:32:04
what I said is that it is possible01:32:05
solve the flex direction of the columns like this01:32:08
let's get out the column and now make line01:32:11
oh there it is located along the transverse axis flex01:32:13
start and please like like like01:32:16
the issue is resolved just on the hill content01:32:19
hang these three properties but where01:32:21
now we didn't have this button01:32:23
must always understand that01:32:26
you need to hang it up and that’s what it has to do with it anyway01:32:30
for some reason even scream at the content hill01:32:32
what refers to the button that is inside01:32:33
why should general mind content01:32:35
something to know that there should be something on it01:32:38
hang what if suddenly there is a button01:32:40
well, that is, it’s a little strange, yeah01:32:41
if you still have a desire for this01:32:44
leave button then I would return everything01:32:47
home loaf yes, that is, right here01:32:49
correctly I say that there is such a thing01:32:51
we have a wrapper for buttons, you're a boor01:32:55
the loaf also made a flex display, that is01:32:57
element within it there will be a conflict01:32:59
the site will no longer last the entire01:33:00
width01:33:01
Well, let's go check it out01:33:03
that's it, everything's fine, that's him01:33:07
kombat it just gives flex to the elements01:33:10
internal lines up but also01:33:12
elements are displayed as flex by sites and01:33:14
don’t stretch the entire width just like that01:33:16
that's why this is an option like01:33:19
way out of the situation or01:33:22
work with the button here01:33:24
that is, either leave this option01:33:26
in principle in principle he is normal yes in01:33:29
basically normal because but the buttons01:33:31
after all, they are often there for layout01:33:33
landing pages, they just don’t post them01:33:37
in the middle text like here's text text text01:33:39
and bam button yes, that is, it’s either 1 or01:33:41
a group of buttons they are somehow needed as01:33:43
then it’s unlikely to sometimes line up, that is, not01:33:45
specifically in this layout but in general I01:33:47
I’m talking about the approach, yes, but specifically in this01:33:50
We don’t have anything like this anywhere in our layout01:33:52
two buttons option but in general as an approach01:33:54
that's normal, that's a plus we have01:33:57
even the button is universal for several01:33:59
lines here or then already01:34:01
get out buttons display flex leave01:34:04
just groans fifty-one pixels and01:34:06
make line up fifty one pixel01:34:08
and everything will be fine too ok in general we are01:34:10
the button solved the only problem01:34:12
that it is a little different in size then01:34:15
there is look at this button which01:34:16
was in the loaf class, we had her size01:34:19
51 and background says 20 this button has a fan site01:34:24
20 but size 65 and how much money are they?01:34:29
same 50 to01:34:31
1 each where the same, that is, this is a certain01:34:34
so big01:34:36
enlarged version of the button with a height of 6501:34:40
pixels let's see other buttons01:34:42
here's the same thing, yes, too, 65, also 2001:34:46
here too, also 20, also 65, that is, we are on01:34:51
Based on this we can conclude that01:34:53
our layout has 1 2 3 4 buttons01:34:57
one of them01:34:59
height 51 all others height 65 here01:35:03
that is, we can say that we exist01:35:05
some small button and normal or01:35:07
we can say that we have one01:35:08
normal button date step normal01:35:11
this is this for example and all the rest01:35:13
big ones like this, that is, here with01:35:15
which side to look at that's why01:35:19
just add a modifier that is we01:35:21
add a modifier to the button which01:35:24
will increase its size that's all01:35:26
so I will do this01:35:30
I’ll say that this button is a loaf01:35:33
enlarged buttons although there are more of them01:35:36
I will have these as enlarged buttons01:35:38
these will be buttons with additional01:35:40
big loaf class that's why in the section01:35:44
boor of this button file we01:35:46
add the bath and big modifier and01:35:49
let's write for it in a style that01:35:51
worth adding a big loaf of course01:35:54
we will add them where the starting ones are described01:35:56
buttons, that is, it’s in the header in the header01:36:00
here's a loaf of us here we are adding01:36:04
battenberg add battenberg but again01:36:06
yes, I’ll add it here too, and loaf01:36:12
big and01:36:15
adjust the height to 65 pixels hide like this01:36:21
moment01:36:23
min hai that is the date that is even they01:36:26
can grow 65 pixels, we're all here01:36:30
the only thing that needed to be fixed01:36:32
We've corrected the height and moved on to look01:36:34
here you go yes everything has changed minho01:36:38
65 to now this button is displayed here01:36:41
so according to the file structure, of course, buttons01:36:44
they should be put in a separate place01:36:47
the file, that is, in blocks, should be created01:36:50
loaf01:36:52
css since we have an abbreviated class then01:36:56
I will also make the file name so that01:36:59
it was clear even if we search01:37:01
by name we will find everything related01:37:04
with buttons I transferred from cedar to a loaf with01:37:07
es because the button does not belong01:37:09
only fedora but in many sections01:37:12
there is such a self-sufficient01:37:14
an independent element was brought into01:37:17
separate file and let's connect01:37:20
here somewhere before the fader01:37:21
let's connect the loaf sex with that is the loaf01:37:24
home header is excellent so at this stage01:37:28
the header is ready for you and me except01:37:31
pictures on let's see how01:37:34
the text is transferred white manager Ivan01:37:37
weiss and so on for years that's the only thing01:37:40
that this text should also01:37:44
tolerated yes but we can't reduce01:37:46
content size the system header content01:37:49
I'll reduce the width sooner rather than later01:37:52
we see the title will move to three01:37:54
lines than the text below, that is, when01:37:58
hill the text needs to be edited, that is, here01:37:59
either add tbr or edit home01:38:02
give the text width, that is, give it01:38:04
What width is it if it's 440?01:38:09
tanakh text01:38:11
I will give a max view of 440 pixels01:38:16
decrease until it reaches the desired level01:38:19
water means to me01:38:21
430 for example that years have also passed01:38:24
Yes, let's also give this restriction on01:38:26
hill text this is us holmes with with slice01:38:30
let's make this constraint different01:38:34
great, now we’re working with the picture01:38:37
By the way, at least here I’ll hide it here too01:38:39
I'll hide01:38:40
home we work with the picture and time01:38:43
I am commenting on this block Hambo g image01:38:46
I'll copy from it01:38:48
here are the properties of the combo damage like we have it01:38:54
will work, that is, we will stretch this01:38:57
picture for our entire blocks01:39:01
position it absolutely, stretch it along01:39:03
width by height and write it correctly01:39:05
so the mana scaled correctly01:39:07
let's see what's going on now01:39:09
the picture is just below, I'll be her01:39:13
stretch01:39:14
accordingly we will pull it along01:39:16
the entire home section therefore sections he01:39:18
there should be a latif position, see01:39:21
section home we give the position of realty then01:39:26
there she will be a parent next01:39:29
here we have a show combo gp image we have it01:39:33
let's pull this section, that is, we give01:39:35
his position is absolute01:39:38
elevator 001:39:41
So01:39:43
0 here it is and the width01:39:47
100 percent height one hundred percent then01:39:51
there it is completely stretched out hyde one hundred01:39:54
percent it completely stretches along the block01:39:57
in which lies01:39:58
here the picture should also stretch along01:40:01
he has pictures of when to be a hundred01:40:07
percent is the same as the absolute already01:40:11
it will be possible to give, but now what?01:40:14
I reached out and the picture also stretched01:40:16
here is 100 to 100 that is, here is the hill b.g.01:40:20
image I look at the hint and see01:40:22
clue 1902 to 895 and the picture is like this01:40:26
same 1902 by 895 but the picture can01:40:30
incorrectly scaled yes that is01:40:32
but the screen size may be a little01:40:34
a little different and now we see all of her01:40:37
we already shrank so that this wouldn’t happen01:40:39
We'll give you more pictures01:40:41
background01:40:43
ground says no background01:40:49
here is an object fit firing fit this would be an analogue01:40:53
grounds would be an analogue of grounds only for01:40:56
pictures of firing fit and meaning of someone01:40:58
there is an analogue of a grown says carpet for01:41:00
the background is correct01:41:03
scales completely fills then01:41:06
there is the picture itself01:41:08
as if the background is scaled correctly and01:41:12
completely fills the size of the image tag01:41:14
then you are the picture inside it01:41:16
image that's it as a background that's great01:41:20
done, that is, these are the properties you need01:41:21
let's register, yes, and we still need it01:41:24
make sure our content is at the top01:41:26
our pictures yes that is our container01:41:29
you need to bring forward either the picture01:41:32
take it back01:41:34
this is how we can set it and a picture01:41:37
industrial take back z-index01:41:40
-1 so ass index minus 1 she01:41:43
goes behind she even goes out of the section then01:41:46
there is then this beige background I have it01:41:48
I'll delete it from here and I'll give it to this combo g01:41:53
image that’s why he carries the background for himself01:41:57
related to the picture here it is in sections01:42:00
just like a wrapper, let's move it01:42:03
all these properties mean step by step now01:42:06
Once again I’ll lay out what and how for home we01:42:09
give the positions you liked, go to home01:42:12
find its background, remove it, give positions01:42:16
latif next according to home size we will01:42:20
stretch01:42:21
combo g image def con god image find01:42:25
girls bug image here we have it01:42:28
stretch01:42:30
to size01:42:33
in general, he also needs a background, which means we01:42:36
give position absolute lift 0 top 0 width01:42:41
100 percent height one hundred percent is01:42:44
we positioned it and stretched it out01:42:47
give him some kind of background, yes, that is, if01:42:50
the picture didn't load for some reason01:42:51
such a complementary background is not bad in01:42:54
basically there's white, the picture is light01:42:55
doesn't have to be done but like if we01:42:58
let's ask, it won't make it worse, but then01:43:02
there is a user who will already see some01:43:04
complementary fund bye picture01:43:05
loading here and then we work with01:43:07
picture inside this hambo g image01:43:09
home baby image space image let's persuade01:43:11
at least one hundred percent to be one hundred percent and01:43:16
object fit he burned fit collar excellent01:43:22
let's go check and that's all we need01:43:25
move back, that is, you need the home bug01:43:28
image give it z-index -1 that is we01:43:32
his01:43:33
move01:43:35
index taken01:43:39
minus 1 of mine we push behind the section01:43:42
sections really shouldn't have a background01:43:44
there is so that the picture is on the back01:43:46
great this is the way we are with01:43:49
they did it to you and why it happened01:43:50
bother in order to now01:43:54
now if this layout is restored01:43:56
on 7 of and often what it does01:43:58
layout designers then set it to 7 from well to01:44:01
50 percent of the time this is exactly what it is01:44:04
of course, part of some landing pages at once01:44:07
goes to production to upload to hosting and01:44:09
everyone connects, scripts are needed, but 5001:44:13
percent of cases is no less than this01:44:15
setting to 7 out and then here01:44:18
it will be possible to register some variable01:44:20
yes, that is, there is either a completely variable01:44:23
instead of a picture or instead of a path and through01:44:26
admin can easily change this01:44:28
load and it doesn’t even matter where it is01:44:30
the picture will be found will be located01:44:32
because here is the entire path01:44:35
indicated at least some write here is excellent in01:44:38
in general we made a hill section with you01:44:41
let's go look at these like this01:44:44
everything is beautiful with us by the way so something01:44:48
we happened start real01:44:51
stark trial something happened to him01:44:53
why did he turn dark so well first of all01:44:56
span I still have here01:44:58
this needs to be fixed and secondly the header01:45:02
login and it works, why not?01:45:06
color white works because the header01:45:09
login because more01:45:10
in more detail and this link and on01:45:14
as a result, even the button doesn’t interrupt01:45:18
we'll fix it now01:45:20
let's open01:45:21
let's open the header not here it is header login then01:45:24
there is, well, first of all, you need this spa01:45:26
put away01:45:27
he's extra here for demonstration01:45:30
I added here and secondly we have01:45:33
interrupts header login hey let's01:45:36
let's open the header01:45:39
why did he start interrupting that too?01:45:42
good point he started interrupting01:45:43
because we have01:45:45
because we have a button connected01:45:49
before Fedor and accordingly priority01:45:52
also changed and this too, but not01:45:55
that's right, that is, just look at us01:45:56
the order of connecting classes has changed01:45:59
yes, that is, if only if I described it01:46:01
all in one file with each other when01:46:03
everything is fine but pay attention01:46:06
we just changed the connection order and01:46:09
everything seems to be broken, it’s so bad01:46:14
it shouldn’t be that is, this again too01:46:16
from the minga gang the order of how we are01:46:18
we describe selectors, but it shouldn’t have an effect01:46:20
for their work that's why we'll do it01:46:23
let's header login hey I'm still01:46:26
link here here is Khadra login I am01:46:29
Eliza him so class by class class heda01:46:34
link like this header link order login link01:46:37
that is, here let's go login Linda01:46:39
more specifically, because we have01:46:42
navigation and link here is the header login link01:46:45
and accordingly hader login hey we are this01:46:48
change the login link to the header, that’s all01:46:51
Now we don't touch any links01:46:54
which lie there where then we are01:46:58
with this selector Khadra logging Khaber01:47:01
we specifically stylize only what we need01:47:04
need to01:47:05
that is, yes, those are just the elements01:47:08
of which this class exists now01:47:10
normal, that is, even if our button01:47:12
described earlier or later, it doesn’t matter01:47:15
what order are they all connected in?01:47:17
it works correctly, this is also a sign01:47:19
good correct layout is what is possible01:47:21
make up at random and then well, you never know01:47:25
and I don’t know, it’s just there in the code01:47:28
solve some common elements to the top01:47:29
lifting everything will break simply because01:47:32
that the order of the selectors will change01:47:37
great, move on to the next sections01:47:40
We also have enough of the following sections01:47:42
interesting this is the how it section01:47:43
works which consists of this01:47:46
title and01:47:47
blocks below01:47:49
let's work with her for this01:47:53
but for this we will first draw with you01:47:55
scheme as usual how it will all be01:47:58
happen, that is, look what's here01:47:59
yes, there’s such a big block and then01:48:02
they're running out now I want it all01:48:06
fit like this01:48:07
I also do printscreen now01:48:11
let's draw a little01:48:12
this whole section, yes I will do it01:48:16
treat it as a single section01:48:18
moment at the moment printscreen and extra01:48:22
frame appeared this section I will01:48:25
perceive her as one, that is, her01:48:27
could be perceived in principle01:48:29
two different ones for example like this and like this01:48:32
yes, that is, it’s like two different ones, but essentially01:48:35
this is all one section firstly we are this01:48:36
we see it in the title and we see it too01:48:38
in meaning, we understand with you that this is01:48:42
how it works01:48:43
paragraph and 123 how it works that's why01:48:48
we will have such a large section for01:48:50
block how it works further inside this01:48:53
section we will have a container on this01:48:55
sections will hang on top01:48:57
then there will be a container from below, here it is01:48:59
the container is an idiot purely in terms of content01:49:02
then again, what should I do here?01:49:07
yes we see that there are two sections inside yes01:49:10
this is essentially me for now container 101:49:11
I drew it but inside it’s like this01:49:16
one section inside 2 sub sections you can01:49:18
so to speak, that is, one for the headings01:49:21
2 for 012301:49:23
in principle, one can draw a general01:49:26
container and make two blocks in it01:49:29
on the contrary, you can make di2 under the sections and01:49:32
make a container in each, here are two01:49:35
both options are normal and entitled to01:49:38
existence and actually grow01:49:40
so so here you go01:49:44
option when there are two sub-sections then01:49:47
I like containers because they are straight 201:49:50
the sections are very demarcated, that is01:49:52
I can see that they are separate options with01:49:55
a common container is good because the markup01:49:57
there will be less nesting01:50:00
it will be shorter here01:50:02
yes the humidity will be shorter but how01:50:05
as if something so strong01:50:08
there will no longer be a distinction because01:50:10
inside the container, let's try it01:50:12
like this it’s all in one container01:50:14
memory and place there will be one blue01:50:16
we will have a container inside it01:50:19
there are two blocks like this and here are red ones01:50:23
the first block will be the first row row for01:50:26
headlines or a blog for headlines01:50:28
and he will also perform the functions of a series01:50:31
will arrange elements within itself in01:50:33
row, that is, the first element will be here01:50:35
such a block of code how it works here I am01:50:38
closed and01:50:39
2 heading is green and 2 will be for text01:50:42
and here inside is this red block01:50:45
it will also serve as a series for01:50:48
speakers yes well the speakers will go here01:50:51
that is, the column will be first then01:50:53
there will be column 2 and there will be column 3 we01:50:58
we see these indentations here, that is01:51:00
our column will still go like this01:51:02
to the full height but we can even see 0103 at01:51:05
02 are at different heights especially01:51:08
the speakers will go to full height but01:51:10
they will have padding, that is, the first one does not01:51:12
1 hectare on top; the second one is very large01:51:14
3 has a little less, that’s when it’s needed01:51:17
they will rebuild there in two01:51:19
columns then into one, well, the third one01:51:22
essentially, but essentially it will be the same01:51:23
go to the end you can say but this01:51:27
it’s not so important anymore, that is, well, it’s not like that01:51:30
what matters is whether she will be there or whether she will be here01:51:32
will end is not the point01:51:34
this is the structure we will have01:51:37
This means we are creating a section for a block house01:51:40
forex then create a container and01:51:42
container and create two blocks01:51:43
subtitle and steps01:51:46
these are these 012301:51:49
describe, go to Yandex system01:51:52
so folding everything else like this and into01:51:55
May not create section how to fix it01:52:01
works there is an internal container and so on01:52:06
title and steps means did this how01:52:11
it works01:52:12
here i01:52:14
hold x steps01:52:18
excellent01:52:20
in the header, as we said, there are two blocks for01:52:24
the title itself and for the content01:52:28
Means01:52:31
how the works her01:52:34
foot works01:52:36
will go straight long and it turns out for01:52:39
content content01:52:43
for that one here we have two headings01:52:46
this will certainly be interesting now01:52:49
that is, they will invent us again until01:52:50
some01:52:51
Hayden Header title sip title and lyrics01:52:55
water is running out so01:52:58
let's know how to do it, how it works01:53:02
we'll call the two cores fedora up01:53:07
header fedor01:53:09
in one move01:53:12
inside I'll leave it on the title is up to you01:53:15
how it works her head how to fix it01:53:20
this is how the title will be, here I will omit the header and01:53:25
head yes I'll just go title and samp01:53:29
title01:53:30
become height this is like this and this will be like this01:53:34
these texts how it works that is this01:53:36
as if such an important headline01:53:39
understand and and Angeles is what it is01:53:41
explanation here and by tags means it's01:53:44
I will be out of 2 and let this be 401:53:47
like this01:53:50
ok and the content here it is I copy the content01:53:54
etc.01:53:56
z here is the content, that is, this is the header01:54:00
we got it, that is, here is the general header01:54:03
it will hardly line up01:54:06
first element in a row second element in01:54:07
mind, and in this first element there is one01:54:10
heading 2 and the second paragraph is great01:54:13
We painted the first part of the container01:54:16
let's leave the steps for later and01:54:18
let's stylize what is here again01:54:21
everything will be in a separate file how to rex01:54:23
so we create kontrol inside blocks01:54:26
create blocks how to fix css01:54:30
we forget to connect it in Yandex than01:54:32
here's somewhere after ham01:54:35
so here's how to access with ready let's move on01:54:41
so we first copy into it01:54:43
select the section control shift x paste01:54:47
I'm cleaning the container, you noticed before the speed01:54:50
is already rising a little but because we01:54:52
we repeat the same thing but not the same thing01:54:56
same but different variations but the essence is the same01:54:58
the essence is very similar so we go01:55:01
further and faster so look at the indentations01:55:03
that is, the entire section will be indented and01:55:06
top 169 bottom 5101:55:11
but science 1 tab 169 1 loaf 5101:55:17
can be rounded up to can be rounded up01:55:20
I’m not even sure about this, but look01:55:23
in short, there in principle if from01:55:25
then they will ask for you pixel dog01:55:27
and they will compare it with the design then01:55:30
These numbers are normal, that is01:55:32
ok and the same number, but it’s not 1001:55:34
there to think 10 round there or01:55:36
here, in principle, 169 is not necessary01:55:39
170 especially if you need it later01:55:42
pixel dog if it happens later01:55:43
put it on top01:55:46
then it's better not to bother and not spend01:55:49
time for rounding I'm just earlier but01:55:51
quite often, as it were, rounded up by01:55:53
this is essentially01:55:54
sometimes then it goes sideways01:55:57
pizza, beer, make everything, put everything on01:55:58
it doesn't matter to you to rule therefore it doesn't matter01:56:00
if it is better to write what those values are01:56:03
which we take here01:56:05
how it works header that is, it's like a row01:56:08
for the first two elements that is01:56:09
display flex&g steve and content space01:56:12
between so that they are at the edges because01:56:14
what if we look then they01:56:18
really at the edges, that is, this one01:56:20
block01:56:21
here it is and this one and not around the edges01:56:24
containers well around the edges next to each other is good01:56:27
Next we style the headings01:56:30
so finding head for now I’ll skip the titles01:56:35
sap title title this black one which is on01:56:37
made here it is Lotta themselves bolt 24 15701:56:43
remember we write funds 24 line hyde one hundred01:56:48
fifty seven percent themselves bolt pound01:56:51
weight 600 is the only color I didn't take01:56:55
42 but in my opinion this is the one in the database01:56:58
that's why I don't indent and look down01:57:02
he's not here he's not even here01:57:05
I even have the feeling that he is one two three01:57:11
that is, it is minus 3 pixels, even -3 but01:57:17
give margin here minus 3 in principle01:57:20
this may well make sense then01:57:24
there is when it’s right very tight01:57:25
the elements are designed by the designer yes01:57:27
I did it like this, that is, of course this01:57:30
the line height is also fixed, oh well then01:57:32
no need one hundred and fifty seven percent01:57:34
just give height 1 and it will be01:57:37
nearby but again if then pixel01:57:39
perfect customized, in principle it’s possible like this01:57:41
do01:57:42
great, we stylized the title, that is01:57:45
here's just a black robe rex and here01:57:47
now until we don't constantly01:57:49
scrolling down will be very convenient to hide01:57:52
block on the page that is, we have a block01:57:55
home I give him the new class that we have01:57:57
the display is registered, but even so it01:58:00
will not be displayed and we will always01:58:02
see at the top immediately that block with01:58:05
which we are working on now let's move on to01:58:07
header there's even a stand in Angeles and01:58:09
look Georgia ball 50 15701:58:13
we register it means 157 bolt is 700 fund01:58:21
cs50 and01:58:23
giorgio giorgio giorgio we take01:58:26
I already wrote it down somewhere01:58:29
Well, we can bring George back from here again01:58:34
even the gti georgia remains valid,01:58:38
serif perfectly written by the way yes01:58:42
here are 157 and here and here we can take them out01:58:45
for a hit, for example, you can do this with us01:58:48
anyway, Ingrida inherits everything01:58:50
therefore also like this01:58:55
or not, come on01:59:00
online content hayden harit po01:59:04
computer if we look01:59:09
Yes01:59:11
a little bit wrong01:59:13
let's add line even further01:59:16
one hundred fifty-seven percent, well, that's it01:59:19
there is no other way, so take it out here01:59:21
It won’t work, I’ll return it back specifically01:59:24
here specifically here are indicated excellent01:59:27
so well, somehow or normal01:59:30
understand english it's ok just01:59:34
the width should be larger, here we see01:59:36
width 584 that is, it must01:59:39
be therefore we will ask01:59:43
blockhead containing sap titles01:59:46
we we will set the minimum width to 584 min01:59:50
vitz01:59:52
584 pixels let's go check it out01:59:56
it's ok now by the way the color is green01:59:58
forgot to transfer01:59:59
transfer it to a subtitle like this one02:00:04
soup title it is displayed more but by02:00:07
it still has a semantic meaning for me02:00:09
sap title yes because the title of the how section02:00:12
cottage cheese everything is clear what it’s about and what it’s like02:00:14
subtitle02:00:16
ok everything is fine now you can02:00:19
work with text and set indents02:00:20
between them, that is, we see an indentation of 13602:00:23
Yes02:00:24
here either ledge 136 is set or specified02:00:29
In principle, it’s worth some kind of max to be 67102:00:34
do this that is indicate here02:00:36
max vitz02:00:38
671 pixels yes that is when reduced02:00:41
screen size they will connect and02:00:43
the ledge between them will become02:00:45
less but at some point the sub has everything02:00:47
should still remain and then they will02:00:50
that's why they will decrease02:00:52
here02:00:54
we can we can between them that is02:00:57
between these elements02:01:00
Yes, here’s a question between grandfather and content02:01:04
we can give an indentation of 136 then everything will be fine02:01:06
straight pixel to pixel and always indented02:01:08
it will be big, they will shrink themselves and02:01:10
we can make it a little smaller02:01:13
in principle, their dimensions are set to02:01:16
a certain width on a large one everything is ok02:01:18
and when decreasing02:01:19
first the indentation will decrease and then they02:01:21
will decrease, I think it will be good02:01:25
136 means so now it's curled up02:01:31
up to 136 between them, well, you can leave02:01:35
set margin like 13602:01:38
this is how you can do it02:01:41
Here02:01:43
bouquets and yes yes I told you that I02:01:46
I want to do less, that is, I can02:01:47
give thirty to the example yes02:01:50
so moment02:01:54
no it won’t pass max because it had to be02:01:57
here is max view and here is max view this is a typo02:02:03
Let's check, yeah, it's fine by the way02:02:06
line go here you need to pay attention02:02:08
line at least one hundred and fifty02:02:11
so you need to set a line header for the content02:02:15
150 percent02:02:17
go take a look and now02:02:23
so again, by the way, here are four02:02:26
lines 671 width02:02:30
Here02:02:35
671 width and three lines02:02:39
how is it so interesting02:02:43
drink later02:02:45
70 percent 20 lats 150 medium to medium02:02:51
here the thickness is greater than medium, that is, medium02:02:55
this fund howls 50002:02:58
let's check that it's here now too02:03:01
transfer as it should be great now let's see02:03:03
by vertical alignment, that is02:03:05
here they really are both at the top02:03:07
the line goes or is this still needed02:03:08
move down a little until we see everything02:03:11
you still need to move it down a little02:03:13
I'll select a rectangle and draw it then02:03:15
anything02:03:16
we see everything he is walking on it can be on02:03:19
money can be moved vertical line02:03:21
middle do it seems to me there's padding here02:03:24
it would be more appropriate that is, we see up to 5802:03:28
what did I do? I selected the how it section02:03:32
works02:03:33
hold down control and alt and it will look like02:03:37
from the section they measure from the text I see 58 here02:03:39
so on this text on the content I will give02:03:43
padding top 5802:03:46
this is how I will have an indent02:03:49
and it turns out almost like green02:03:51
the title starts out great top02:03:54
the how to x part is ready, let's move on to the step02:03:58
to steps02:03:59
[music]02:04:01
let's look at the design between02:04:04
there is some indentation in the title and steps02:04:07
so I selected the heading alt pressed and hovered02:04:10
on 0 1 person from the staff from exactly on02:04:14
him because everyone else is strong02:04:16
below and I see an indentation of 52, that is, this02:04:20
says what I need from the title02:04:22
give a ledge down 52 from the header this is02:04:26
from works header yes here from him down 5202:04:31
this could be padding quite well02:04:33
is this a normal option to give padding02:04:36
bot 52 that is, as if for him a little02:04:40
there is room so that he is not very close there02:04:42
stood so that there would be no more there and02:04:44
then let's go step by step02:04:48
Let's look at our diagram which we02:04:50
painted, that is, everything lies in one02:04:52
container under the step we make a wrapper and02:04:54
which will play the role of both a number and02:04:57
we will already create three columns inside02:05:01
that’s why we go and describe it here02:05:04
Yandex system Chill Steps02:05:06
this is where we take our steps02:05:13
how cottage cheese steps that is our steps02:05:19
the steps themselves will be placed inside02:05:23
I’ll just call it step, that is, you can02:05:25
Call it a steppe, of course, and there are three steps02:05:28
these are three blocks of steppe there in principle02:05:30
quite like we say something02:05:32
separate entity02:05:33
you can omit this and often you can02:05:37
meet such a recommendation to omit02:05:39
the name is like oh there it is here02:05:42
already look at the convenience, but then step02:05:46
steps let's take the first step then I02:05:51
I’ll multiply it and then we’ll line them up02:05:53
as we need so step what's inside02:05:56
step we have the name of the staff02:05:59
from it has the number 0 1 we will have it02:06:01
render through date attribute02:06:04
we will write down this attribute and we will02:06:07
describe using a pseudo-element later02:06:09
there is a block with text where the paragraph is text and02:06:12
block with a picture where there is a picture here02:06:15
by the way we need to export these02:06:17
Images02:06:19
here let's get them02:06:23
export, and of course I already02:06:27
I contributed to this layout in my opinion02:06:30
because I exported in advance02:06:32
I think they should still have it here02:06:34
the rounding radius is 8 pixels if I02:06:37
I'm not mistaken02:06:40
yes, in my opinion, it’s all the same here02:06:43
8 pixels each, yes they should be02:06:45
rounded by design we are rounded with02:06:47
we'll do it for you, but before02:06:50
cut out these fillets, remove the dates02:06:52
everything was eight here, I'm turning it down to zero02:06:56
why do we save the image?02:06:58
rectangular but because it doesn’t matter02:07:01
what picture will we have then?02:07:03
can change to absolutely anything02:07:04
another and content manager he should not j02:07:08
even round something else02:07:11
it must be so we loaded any there02:07:14
rectangular picture and02:07:16
cms cut to the required dimensions and02:07:19
we add fillets using css02:07:22
this is how we implement it, therefore02:07:27
now I save three pictures02:07:30
control clip in the first picture I see02:07:33
rectangle I'll actually look at the preview02:07:36
Yes, I really look at the preview02:07:38
necessary, but there are still groups of 55 with, as it were,02:07:42
screen yes that's why02:07:44
0 1 that is, group 55 and rectangle that is02:07:49
like this I’ll select it through shift02:07:51
export plus but it perceives it as two02:07:54
layer but it should all be one layer02:07:57
so I’ll put rectangle here in the group02:07:59
55 like this neatly or you can choose02:08:02
him and group 55 and hit kontrol g then02:08:06
eat again and group to02:08:08
ensure that this is all one group02:08:10
click export, be sure to check it out02:08:12
preview something we need jeepeg02:08:14
format02:08:16
export 56 here image folders let's02:08:20
let's create a new folder and call it steps then02:08:24
there are our step steps and02:08:27
let's save it here as 01 02 03, that is, step02:08:31
010 this step 01 step2 step02:08:36
0102:08:38
save there now control click on 202:08:41
Pictures02:08:42
I'm watching the export already plus jpeg preview02:08:46
that's right02:08:47
save as step 0202:08:50
contracts for 3 pictures are also not here02:08:55
so just look at the picture there is a mask02:08:57
all this lies in groups 29, here we have chosen02:09:00
groups 29 we see the correct sizes02:09:02
export select jpeg watch preview02:09:06
great step 03 good all pictures we02:09:10
saved now let's work with02:09:11
I will be transferred there with the first card for now02:09:14
purely content, that is, inside the step02:09:17
staff of then cat cat in text and02:09:21
then the picture image source02:09:25
image02:09:28
css came in for some reason02:09:30
image02:09:33
step step 01 and viola step image02:09:38
Of course we need something more meaningful but02:09:41
We're not dealing with semantics right now.02:09:43
that's why I'll write it here now02:09:47
necessary classes that is, we are all02:09:49
already stylized, demarcated means this is02:09:53
us header staff and make it02:09:55
tags 4 h2 we had a little higher there02:09:59
I'll do this, we'll four put it here02:10:03
control from the account I will equalize by the way02:10:06
I'll cover the extra ones02:10:08
then on and 4 I will hang the class class equals02:10:13
step hidden that is, the title for the step02:10:18
further I said that this number is 0 1 we02:10:22
we will write it through the pseudo-element a02:10:24
we will take the value from the data attribute then02:10:26
if we can write it here, we would like it02:10:29
equals 0 1 further for text well02:10:33
Naturally, we place the text in etc. Here02:10:36
in general for such cards when02:10:38
often there is always only one block of text02:10:40
that is, well there you go02:10:43
basically that's when the cards are there02:10:45
there the text is cut off and there it is displayed02:10:47
only in one paragraph and therefore in principle02:10:49
there is no need to include two paragraphs here02:10:51
text but if we provide nothing02:10:54
there won't be anything scary about it either, that's why I02:10:57
I'll make a div like stop02:11:00
stop text, that is, text inside the step and02:11:04
then etc. and here is our paragraph like this02:11:07
that's the way02:11:08
ready, that is, why is it still being done?02:11:10
this div is extra yes because02:11:13
between tags we have one indentation02:11:15
him but between the text block and the button and02:11:20
the image and title will be indented02:11:24
completely different not the same02:11:25
in paragraphs it is often more for02:11:28
this is step text and a picture02:11:32
let the picture just lie there02:11:35
picture I picture let's give her class class02:11:38
step image that is, we are also in the class02:11:42
we will stylize this card02:11:44
we got a div with the step class02:11:46
let's add everything here02:11:49
comment that our stack is running out02:11:51
that is, we understand that it begins02:11:53
the way you are with the step class is what it is02:11:55
ends we understand here here02:11:58
this is not some kind of reference but that's it02:12:01
there are no links to new ones on them02:12:03
at least it's not obvious that02:12:06
this is a link this is just a description of how02:12:09
the product works so the link is here02:12:10
we don't do it anywhere02:12:12
that's what we've caught up on let's see02:12:14
this is what it looks like now02:12:17
Let's stylize this whole thing, which means I'm moving on02:12:21
div class step select control shift x02:12:25
again, yes, go to how it works and02:12:29
continue here paste and02:12:32
stylize here by the way02:12:36
I have a hidden thought why they02:12:38
empty no it's filled yes she's just02:12:41
empty here x the Turks have steps that is02:12:44
wrapper let's go stomp stomp hayden step02:12:46
text and step image drove for the most02:12:49
steppe it has a limited width we02:12:52
we see 390, that is, in theory it shouldn’t02:12:54
grow more because02:12:57
because we have a picture although it is possible02:13:01
of course organize that yes but in this02:13:03
In case I won’t do it, I’ll say that02:13:05
him max streets02:13:09
390 pixels that is the maximum width02:13:11
390 then we work on the title first02:13:14
only with this block then 01 we02:13:17
we’ll also do the title itself02:13:19
ice staff here I will go to inspect and02:13:21
here I’ll probably copy the finished ones02:13:24
I’ll insert the properties into hidden and just02:13:27
I'll get rid of the excess here's phone 7 or02:13:30
george it's in quotes, serif background02:13:35
styles and weight bolt02:13:38
730 line at least one hundred and fifty02:13:40
text lines inter no need color black02:13:44
necessary because we are not black02:13:46
default excellent indent down from it 5502:13:50
Well, maybe we’ll change it later, but for now02:13:53
55 m d 55 further in the text02:13:57
here I will also copy from the company immediately02:14:01
a ready-made block in the text means talent02:14:05
normal fund of 500 is also not standard02:14:07
20 is a standard in principle, so be it02:14:10
it will be like you let her have a card02:14:12
yours will be functions elephant 150 color 4202:14:16
but this is essentially also necessary for the standard ones02:14:19
and leave here there is step text and indentation02:14:23
from text to picture 6002:14:26
mb 60 and actually the picture itself for now02:14:32
I don't write anything on it yet02:14:35
look let's move on and that's what happened02:14:37
excellent02:14:39
pictures for the word can also be set02:14:41
specific size that is up to02:14:47
make the correct specific one for her02:14:50
size so that she will always be like this02:14:55
in width let's do that02:14:58
means that we will write the width of the image02:15:01
100 percent, that is, the width always goes02:15:03
on the card we have a large card02:15:06
option02:15:07
39002:15:08
hate all the object faith again then02:15:13
there is, but in case he suddenly comes here02:15:15
some kind of picture is not in the same proportions02:15:17
the object with cover we can do02:15:21
everything will be fine02:15:24
great, now let's work with the title02:15:28
staff from that is so that and there02:15:30
highlight the 01 pseudo we need02:15:33
element means for step hayden we02:15:37
create a step hidden by for and say that02:15:41
in be for we will output02:15:45
our name02:15:48
attribute date this is what it will look like02:15:52
this is how we write count content: and02:15:58
here we indicate from t.r. that is02:16:00
Now02:16:01
hour moment so content content yes if02:16:07
we write in quotation marks then we pass it here02:16:10
the string we want to define but02:16:12
if we access the attributes and immediately02:16:14
access attr attribute and name02:16:16
data on attribute ambergris in our case02:16:19
that is now in front of ours02:16:21
the headings will appear02:16:22
01 here we see 01 appeared perfectly02:16:26
and now this zero one must02:16:28
displayed as it is displayed in02:16:30
design and in the design it is displayed here02:16:33
in this way I click on it and02:16:35
I also copy its properties from the company02:16:39
I transfer them and02:16:41
leave what the functions need or02:16:43
Georgia so where there we already had in02:16:45
basically he's George's family so we have02:16:48
should Aztec hedin so I point out not02:16:51
I'll be normal it's clear pound weight02:16:54
400 so he won't because he will02:16:56
inherit and here there are 150 normal functions02:16:59
line head 150 text and color not needed02:17:04
I need this code, let's get it02:17:06
let's check it turned out good so far but02:17:10
now we see that our text should02:17:12
Actually, I should go to 01 a little02:17:16
drive in this way we see02:17:17
how would he drive then to 8802:17:21
here accordingly02:17:24
how can we do this like this02:17:28
can be achieved we will do the following02:17:30
way that is02:17:32
We02:17:33
Let's place our number 0 1 absolutely02:17:37
here we will place absolutely and all our02:17:41
the title will take up all of this02:17:43
space and it will be indented on the left02:17:46
padding 88 pixels and on top too02:17:50
will be an indent, well, here we see 135 to02:17:54
135 that is, the header has our header02:17:57
it will be02:17:59
like there's such a big block02:18:02
We’ll just make the number transparent in a moment02:18:06
that's it, that's the title02:18:08
a large block containing text02:18:10
ice staff and it is indented to the left02:18:12
and from above, but there is still absolute absolute inside02:18:17
units are registered, that is02:18:22
88 and 135 return to step 1 1 tab02:18:27
135 for 1 elevator 8802:18:32
let's go check it out so this is what happened02:18:36
so let's check, okay now02:18:40
We add one to the absolute, which means step02:18:45
hidden we have position latif position02:18:47
creativity is one, we make it absolute02:18:51
there we are on be for hanging position02:18:55
absolute lift 002:18:59
top02:19:01
0 we almost got what we need02:19:05
very similar I transfer it to be02:19:10
for absolutely f 0 so 0 if we02:19:14
let's look at the design look at the design02:19:15
and we see so we see the letter p and we02:19:19
we see the lower base of the unit like this02:19:22
how it stands next to the letter p yes you can02:19:25
so navigate and that's what we02:19:27
completed here please I will increase yes02:19:31
here we have the same thing02:19:34
the best result02:19:36
great we did it here instep hidden02:19:39
beauty02:19:41
further with text and picture02:19:46
And02:19:47
this is where we have now finished02:19:50
completely this card and I would like more02:19:52
I wanted02:19:53
show how you can place it differently02:19:57
image in case you suddenly02:20:00
we will have different images and different02:20:05
width of the card, but now I’ll explain that is02:20:08
For example02:20:09
if we have a card width02:20:12
vary02:20:14
become larger or smaller and how02:20:17
make sure the image stays on02:20:21
the width is always the same and the same height02:20:24
in the right proportions02:20:26
let's see how to do this02:20:29
interesting technique that maybe I02:20:33
I think it will be useful for you, it will look like02:20:35
as follows for this we need02:20:37
will place the picture in02:20:38
additional div let's say stepa02:20:41
image02:20:43
wrapper for example like this and the picture itself02:20:46
the internal one lies like a stack of images here02:20:49
step image wrapper it will define02:20:52
block size for the picture, that is, itself02:20:56
I'll give her a step image for now02:20:58
display, that is, it is not displayed02:21:00
it doesn’t matter to us for now, that’s how it is02:21:04
I'll roll it up and work with step image wrapper02:21:08
let's give him some background brown02:21:10
color for example this dark green02:21:14
now we'll look at it, you'll see it now02:21:17
can't be seen because it's02:21:20
no it is there but there is no height here it is step02:21:23
image rapper 390 at 0 to but here are the dimensions02:21:26
its width is 390, that is, like a block on02:21:30
the whole card is stretched and now we02:21:33
let's make it have a height02:21:37
proportional to width02:21:39
the same as the proportions of the picture, that is02:21:41
here is our picture size 390 by 49202:21:47
we will do the following02:21:49
let's find out the proportions of the picture02:21:53
height to width that is 492 divided by02:21:59
39002:22:02
1261 that is, we succeed02:22:05
proportion that is, our width is 390 if02:22:09
multiply it by 1202:22:13
6102:22:14
if multiplied by 126102:22:19
That02:22:21
it turns out 49202:22:24
that's02:22:26
now we will give this block02:22:30
padding02:22:33
padding on top or bottom, that is, 1 each02:22:36
from above or below will influence it02:22:38
height but in percentage if you do this then02:22:41
percentages will be calculated from the width02:22:43
yes, that is, we ourselves calculated what if02:22:46
multiply the width, well, if you take02:22:49
width multiplied by 1 and 261 or saying02:22:53
in other words, if you take one hundred and twenty02:22:55
six percent of the width will work out02:22:58
the height of the image is accordingly02:23:01
find this block02:23:03
here they are02:23:05
we need to give its height relative to02:23:08
width that's why we give him this hack02:23:12
but padding top or bottom doesn't matter02:23:15
padding then for example one hundred and twenty02:23:19
six percent that is what happens02:23:21
up to 126 percent where they were from02:23:24
calculated this if we give 1 bot02:23:28
100 then this turns out to be an indent down one hundred02:23:32
percent but one hundred percent comes from02:23:33
width that is, here is the computer if we02:23:35
let's take a look at 1 bot 390 we got02:23:39
on mine we set it 100 percent but02:23:44
this goes 100 percent of the width of this02:23:46
block width 390 by 100 390 so if02:23:51
we give 1 bot each02:23:53
126 then it goes 126 from the width02:23:57
up to 390 this is exactly the proportion of height02:24:00
pictures of that then here are 1 bot each 49102:24:04
if you look at 492, well, there’s a plus02:24:08
minus yes, that's exactly how it is02:24:12
approach we can set such a flexible02:24:16
block for the image, that is, it will be02:24:18
will grow and decrease with02:24:21
the size of the card but its height is always02:24:24
will remain proportional like this02:24:26
the picture should be proportional02:24:29
these size proportions will always be02:24:31
saved therefore02:24:33
we write here 1 bot 126 that is02:24:36
it will now grow proportionally and02:24:38
the picture that is posted in it is02:24:41
will02:24:43
always drawn along it view 100 hyde 10002:24:48
well, everything stretches across the width02:24:50
stretches in height and fires the carpet02:24:53
so that the scaling is correct02:24:55
let's go check it out02:24:58
so right now there is a nuance only in the markup02:25:01
I need to check that everything is correct on my step02:25:03
image wrapper inside and step image02:25:07
step medge rapper inside step image before02:25:11
the picture should be inside it02:25:13
now she's padding and pushing down02:25:15
as if it should be on him before that is, he02:25:18
must be a parent position liked02:25:20
if a picture must be absolute02:25:22
the boss was 0 to 0, well let's move on02:25:27
we check and it’s great, here it is our stack02:25:30
image rapper here it is picture everything02:25:33
beautifully neat and02:25:35
what have we achieved? what effect?02:25:39
what if this card grows then02:25:42
yes, let's take our stack and if02:25:46
its width will be for example there, here I am02:25:49
I increase we see it is growing that is02:25:52
here the text grows and you see it grows02:25:54
image width and height increases02:25:56
proportionally02:25:58
yes, that’s the trick, that’s a plus if they exist02:26:03
other such cards are proportions02:26:05
it is the same everywhere for everyone and even if02:26:07
there the pictures will be of different sizes, well02:26:10
so it happened that we cut different02:26:12
pictures or something like that02:26:13
loaded and they are all different in height02:26:16
anyway, these are the proportions from the design02:26:18
we have already calculated and stored it and02:26:21
they will already be adjusted to it in02:26:23
this is class, this is the trick, and even with02:26:26
decreasing we see everything the same02:26:28
proportionally that's why it's like this02:26:31
This is the approach we used and02:26:33
you can take it on a permanent basis we are excellent02:26:36
made the first card now I can02:26:39
duplicate02:26:41
having done the second and third and then already02:26:43
I'll start aligning them, so here's the step02:26:46
we have one we duplicate02:26:49
23 means we change the text in the second in 3 in02:26:54
the second one is here in Brighton, understand02:26:56
And02:26:58
so now is the moment she jumped somewhere02:27:02
or I didn't copy what I needed kontrol02:27:05
ts02:27:06
here's the first stop, here's the second one, we're writing02:27:09
date number 02 write a different headline02:27:13
I insert another text and02:27:15
another picture step 02 this was the second02:27:19
block and third block date us pain 0302:27:22
Here02:27:24
Same02:27:27
I copy02:27:29
title02:27:31
So02:27:33
And02:27:34
copies text02:27:42
I copy the text02:27:45
that's how step 03 is excellent, let's move on02:27:49
we are checking now while we are02:27:52
only we hardly observe, that is, not in02:27:54
column we see three cards here for us02:27:56
we need to line them up02:27:58
we will use flexo and columns like this02:28:01
such a suitable method here in principle02:28:05
you can use ridges here too02:28:07
fleck with speakers will work great too02:28:10
it will work great too, that's why you can02:28:14
make two options with a reserve for02:28:17
adaptive will do, in principle both will do02:28:21
that is why02:28:23
So this is what it will look like to me02:28:26
probably after all02:28:33
well, let's implement the option on02:28:35
ridges but as if nav lectures he is also here02:28:37
interesting, it means there will be an option on the ridges02:28:41
how do we have a wirex temps account?02:28:44
there will be a grid container and this will already be02:28:46
elements inside the grid here we are inside the grid02:28:49
container we will announce02:28:52
speakers02:28:53
automatic column size, that is, for02:28:56
case for adaptive 390 pixels then02:28:58
there is when they all fit then they all02:29:00
placed when they don't fit they02:29:02
will shrink let's see how02:29:06
steps02:29:08
here are our steps, so we are writing02:29:12
grid display02:29:15
then indicate the columns says the template02:29:18
collapse and here we indicate fastens02:29:22
function ripit that is, we don’t know02:29:24
how many speakers do we actually have?02:29:26
three but under adaptive they will decrease02:29:29
so we are clear and the quantity is not02:29:30
point we say all the feet then02:29:33
there are not saying what quantity all the02:29:34
feet that is, here they are placed automatically02:29:37
How many02:29:38
it will be possible to place only to place02:29:40
so much will be placed and size02:29:43
each column is 390 pixels, that is, I02:29:45
I set it here fixed so that02:29:49
Well, it’s important to me that they all seem to be02:29:51
fixed same size I didn't02:29:54
I want this so that I’m alone already02:29:56
a little 2 no that's why it's the same02:29:59
size for everyone so we need indentation02:30:01
between columns02:30:02
basically here if you look here 9502:30:05
pixels between them so there's a gap between them02:30:10
95 pixels we go to this option02:30:13
check it out great and here they are lined up02:30:16
we see that, well, yes, they are a little uneven, but02:30:19
this is normal actually in general 202:30:21
should be much lower and 3 lower here02:30:24
so we'll do it now and see02:30:26
design yes here we see the first and here we are02:30:30
we see 2 and she is much lower, that is02:30:32
see 1 above 52 2 above 33902:30:38
-5202:30:39
339 -52 287 is the indent of the second02:30:46
switching to design 20002:30:50
287 marjan so we can ask her that02:30:54
we have money there or din 28702:30:58
that is, we choose our second step02:31:02
You can hang it on din, in principle, yes02:31:05
here is the second step02:31:07
padding top 287 pixels here it is02:31:13
went down the second step accordingly02:31:16
this needs to be registered for him, you can on a02:31:18
pseudo-element hang us barely started 202:31:21
you can just add some class02:31:24
and in terms of class it’s no longer the point to give it here02:31:27
I’ll probably pin it on us and the child’s family02:31:30
there will be a step further:02:31:35
2 and02:31:36
1 tab 287 go check excellent02:31:41
3 should also be a little lower so02:31:44
let's go look like this at 102:31:47
52 y 3 10602:31:51
10602:31:54
-100 6 minus 52 54 on and02:31:59
we write 54 just duplicated02:32:02
then it means for 302:32:05
54 1 tab02:32:08
excellent 3 also moved down a little and here we go02:32:11
beauty that's how we have three cards02:32:13
it turned out this is an option on the ridges02:32:15
it’s so simpler than flexor in terms of02:32:17
The entries are basically all from this section02:32:22
we have it ready let's take a look here02:32:24
there’s even some kind of ledge down there, yes, 1 each02:32:28
we'll be 51 until it's still there02:32:30
I registered everything from this section in02:32:33
ok [music]02:32:34
[applause]02:32:35
[music]02:32:36
let's move on to the video section02:32:39
here, again, everything is already structured02:32:43
happy familiar with the shared container shared02:32:46
section container row 2 columns on well02:32:50
let's draw it but I think it's already here02:32:52
everything plus or minus is clear after those blocks02:32:56
which we made, that is, it will be like this02:32:59
large section here it is green green02:33:02
background02:33:04
now the container goes further inside02:33:08
here it is blue, let it also remain further02:33:11
inside the container02:33:13
here is a series of different functions of the container02:33:17
the row has its own function further inside02:33:20
row of blocks let it be black or02:33:23
yellow yellow let under one content and02:33:25
the second under the video like this in02:33:29
in general, let’s move on and layout02:33:32
I navigate in Yandex m.l. I'm folding that one02:33:35
section02:33:36
start the next one I see it's called02:33:39
history will call it history02:33:42
respectively with the action class history02:33:46
next container next store row02:33:53
history road that is our row further02:33:57
inside a series of stories02:33:59
content and video stories02:34:04
so great02:34:08
Now let's fill this whole thing with content02:34:11
I copy02:34:13
So02:34:15
title02:34:18
I copy the text02:34:20
And02:34:23
button02:34:24
get started02:34:27
so for the button02:34:30
I went a little wrong to insert it means02:34:33
inside the content we will have02:34:36
title text and button follow this02:34:39
the same principle, that is, the history of hidden as in02:34:43
we were previously in it heading further02:34:46
there is also a separate store block for content02:34:48
text and there is already a paragraph of history text02:34:52
that's02:34:54
Well, for the button, too, then we have 102:34:57
buttons pav lexom that story02:34:59
battles02:35:01
or the history of loaf and02:35:05
there will already be a button here02:35:08
button this will be a link with02:35:12
class loaf and battenberg because02:35:16
she's big like that, great02:35:19
Now I'm transferring the content from02:35:22
us git status-02:35:25
title and02:35:28
text02:35:30
inside tgp02:35:34
that's how the stories turned out02:35:37
container row then story content02:35:42
opened closed video stories for now02:35:44
empty inside content header texts02:35:47
one text and a button great videos02:35:51
for now I'll just write a video though02:35:53
Can you save the picture for him?02:35:55
let's save the control click like this too02:35:58
here we look where there is something like02:36:02
The picture is related to dota pictures too02:36:04
By the way, I forgot the rounding radius here02:36:06
return rounding radius to 8 pixels02:36:08
before the case pictures 16 means I them first02:36:12
I cancel here too in my opinion yes here it is02:36:18
right away yes now it turned out to be canceled02:36:21
yes, by the way, there is a picture here and above02:36:24
rectangle 9 layer overlay which02:36:26
does02:36:27
darker that's why this moment too02:36:32
you can think about it, look what an idea02:36:34
there is an idea that a video is placed here02:36:36
yes and it is such faith lame is covered but02:36:40
when we press the button02:36:42
then this guy should probably disappear02:36:44
and the video starts playing but then apparently02:36:49
we can point and press pause and he02:36:52
Nold should appear again if straight02:36:53
think about this option so much then02:36:56
I'll just save the picture later02:36:58
maybe I can find some video and02:37:00
save but for now just with a picture02:37:02
let's do it means a02:37:04
here is our picture02:37:06
preview yes that's right jipeg and let's02:37:10
I'll create a history folder here02:37:16
story02:37:18
here we will save this as well as the video02:37:22
does anyone have this cover for the video?02:37:25
video of the carpet here plus the icon itself too02:37:29
need to save this here it is large icon02:37:31
this will already be a swaga format and here for02:37:35
my video is not visible here is the icon02:37:37
export from the horn, this is how white it is or02:37:39
it's visible but it's there and it's play lite02:37:43
basically a normal name02:37:44
great everyone saved this picture02:37:50
well, let’s insert it here and finish it up02:37:52
let's leave this for later first02:37:55
sections let's figure it out means section02:37:57
it's called history but before that I02:37:59
I wish I could round these pictures02:38:01
I forgot to round these ones before02:38:03
pictures we call step image and02:38:06
since I still have it open in02:38:08
block how cottage cheese here it is step image02:38:13
let's round them off bard radius ward02:38:18
the radius is 8 pixels, let's move on02:38:21
let's check02:38:22
they are rounded but the green background remains02:38:25
the block below them has a backgroundcolor02:38:27
remove from the wrapper but now everything is fine02:38:31
ok now block with how the rocks02:38:33
us is completely closed by closing it with css and02:38:37
here is where house is the enemy I add but he02:38:39
now we only work with history in02:38:42
css in blocks create a css history file02:38:48
connect it after how it works02:38:53
heart story with connected02:38:56
we transfer all the styles and classes into it02:39:00
control shift x of this section is inserted02:39:04
here he is02:39:05
history and02:39:06
let's go stylize it myself02:39:11
section background backgroundcolor02:39:15
inserted green, then look at02:39:17
indentation02:39:19
here are our stupas 229 17602:39:24
padding02:39:25
229 on top and02:39:28
17002:39:32
176 below there is further container we already have02:39:36
the row is registered, aligned using flexo 31 but02:39:40
30 this is such a classic option02:39:42
access means display flex well let02:39:47
there will be 6 fi content space between there02:39:49
Let's look at the vertical one next02:39:52
I think alignment is also necessary, that is02:39:54
she walks in the center we see in text like02:39:56
that's why it would be in the center of the picture02:40:00
let's get on with it02:40:02
center space between elements give02:40:05
stories content we'll give a margin right of 30 here02:40:08
in principle, you can hang it on flex02:40:10
stake GP-30 but here we can say that he02:40:13
more02:40:15
there are 5 percent of safari that are his02:40:17
does not support and therefore you can also02:40:21
then not everyone there is a user of iPhones02:40:23
are updated simultaneously or in02:40:26
basically the old ones are updated therefore02:40:27
it’s possible for now, that is, there’s a colon gap here, it’s possible02:40:30
I bet we'll use it in our project02:40:32
or not for flex boxing that's why if02:40:34
no, like this margin wright 30 store02:40:38
there is content02:40:40
Let's see what happened overall02:40:42
not bad by the way one important point like02:40:44
only we set the background color different from02:40:47
white that is dark then right there02:40:50
you need to set the text color to white too, but02:40:53
so let's go here where we set in02:40:56
store and make color02:40:59
three times white text color here and now02:41:03
our text is perfectly readable, we stylize it02:41:06
further content is for the title02:41:09
Georgia ball fifty one hundred fifty02:41:11
seven percent and02:41:13
let's go for the header fan site 5002:41:18
line hait 157 fund weight 70002:41:24
font family02:41:26
here is georgia yes it is in standard02:41:29
list but we have it from the timestream service in02:41:32
in principle it is possible in standard02:41:34
use as normal02:41:35
but this option was already chosen02:41:39
I'm sure we connected it right away02:41:41
so that it is definitely everywhere02:41:44
next we had the header header02:41:48
33 here again, yes, that is, you can do it here like02:41:50
caps too here it is to follow there old man02:41:52
one plus anything marjan top 33 but02:41:56
you can just hang the air down on it02:41:58
33 and that's it, further indentation for text02:42:02
down 5702:42:05
you can do the same thing plus something02:42:08
marjan top 57 according to the text itself02:42:12
25 here is the size, that is, non-standard and02:42:15
and the bolt itself, that is, the fund weight 600 and02:42:19
functions with 25 and02:42:22
line hyde 157 somewhere there she was02:42:25
percent here is an excellent store of text02:42:28
made for buttons for buttons02:42:31
In this case, the button is simple02:42:34
wrapper and02:42:37
yeah, all we can give is a display02:42:40
flex and then everything is ok with the button02:42:45
width restrictions for this block02:42:48
worth giving let's see here02:42:50
580 pixels width restrictions and to02:42:53
content02:42:55
max persons02:42:57
580 pixels02:43:00
580 pixels ready, let's go check02:43:04
that's how beautiful it is02:43:06
now we have a video block left to do02:43:10
his02:43:11
so let's go here battle.net loaf02:43:14
video history and working with it means02:43:17
story video what we will have we will have02:43:20
the video itself02:43:22
then we will have an overlay on top of the video and02:43:26
button02:43:28
So for now I will have a video as a video02:43:30
act picture it will be a picture with02:43:33
history class02:43:36
video02:43:38
annealing I'll call it that because now this02:43:41
picture and then in general this is the idea02:43:42
video must be source02:43:48
image02:43:51
history video cover back alt us video02:43:56
For example02:43:57
next there is a picture then there should be02:44:01
overlay on top which seems to appear02:44:04
and the go-kart and the let's button disappear02:44:08
let's make a loaf button with a class02:44:12
become02:44:14
video02:44:16
dad to the bases here are the stories video battle image02:44:21
picture02:44:23
write here image history plate02:44:28
white svg02:44:29
play02:44:31
like this02:44:33
great further hover from above but I'm it02:44:37
I'll do it here then02:44:39
right away so story video overlay02:44:42
stories video url02:44:46
Now we’ll just style this div02:44:49
it's all about control shift x here's the story02:44:52
We already had a video and will continue to style it02:44:55
so let's see what it all looks like02:44:58
so the picture was placed under by the way02:45:00
the picture has a white background and perhaps this02:45:03
it was so exported that is02:45:05
this could very well be an option02:45:08
let's check it out02:45:11
display open image new02:45:13
tab02:45:16
yes yes yes and here you see on white02:45:19
strip under the picture that is to be02:45:21
shouldn't02:45:22
it happens present when were02:45:24
photoshop layouts photoshop this is generally02:45:26
met very often in the film this is already02:45:29
less often but it still happens02:45:32
This shouldn't happen, so let's02:45:33
let's figure out what's wrong here02:45:36
rectangle it's on top of it's sama02:45:40
picture02:45:41
I'll go to inspect css and then select the view02:45:45
tabular like this and ball file name02:45:49
by clicking image.png02:45:50
he'll open this picture right now and02:45:54
but in theory it's ok02:45:56
but I really don’t understand here02:45:59
open image in new tab02:46:02
white on white02:46:04
yeah it's not clear here02:46:08
that's it02:46:09
[music]02:46:16
but there seems to be order here02:46:19
but for some reason it is exported from02:46:23
look phil image there is something else02:46:26
fil filling02:46:28
jpeg preview02:46:29
[music]02:46:33
maybe it's the filling factor that influences no02:46:36
I don't think so, if I remove this fill02:46:39
I'll try to export again02:46:41
like video of whom02:46:44
just removing the fill02:46:48
no, everything is the same, that is, well, yes02:46:50
orphans are exported that's why02:46:53
in general there is no need to get rid of this line02:46:57
which is not visible here at all02:47:02
895 to 500 1611 this comes up by the way02:47:06
because she has one like this02:47:08
the size you see is 516 and 11 here is someone02:47:12
height let's make it a simple size02:47:15
516 don’t know how best we will press02:47:18
constraint about Porsche us that is02:47:20
maintain proportions and only now I02:47:22
I'll change 516 to just 516, that's all02:47:27
now I save02:47:29
I think from this02:47:32
most likely that's it, that's all the controller02:47:36
it is open to me in the browser we see02:47:39
the white line has gone and gone from here too02:47:41
great, that is, yes we are anyway02:47:43
finalized to the point that everything is in02:47:45
ok02:47:46
such a backup option is straight forward02:47:49
in the forehead it was possible to have this initial one02:47:50
which we opened just save here02:47:53
the picture should be without these02:47:55
white stripes and so on like now02:47:57
great picture there now02:48:01
actually we are working, that is, look02:48:03
We have videos and there are some too02:48:06
the scale of the video also has certain proportions02:48:08
that is, we can do02:48:10
just like with02:48:14
just like with cards you can02:48:16
do the same thing, that is,02:48:19
us proportions up02:48:23
89502:48:25
895 is the block size with video this is the size02:48:28
here is the story of the video that is us tore02:48:30
video i see max vitz02:48:34
895 pixels02:48:36
that's right, it's such a big size02:48:40
hang a max view on it from 895 then it02:48:46
the height will be proportional to the width then02:48:50
there we take it here we call02:48:52
calculator02:48:54
divide 516 by02:48:57
895 we get 0 57 that is, its height is02:49:01
57 percent02:49:03
from at 57 there and 6 to02:49:07
57 percent02:49:09
systems 502:49:12
from width02:49:14
accordingly, we make 1 bot there02:49:17
or top doesn't matter02:49:20
57 and02:49:23
65 percent well, tactics to be more precise02:49:26
it was yes, that is, now he will succeed02:49:28
the height will be the same as the picture in02:49:30
proportions to this width to this to02:49:33
width, that is, 895 by 516, go02:49:36
check here you need all the content from it02:49:39
delete the view until I register 895 yes here it is02:49:42
there's just no content so it's too much02:49:46
the computer turned out to be big because02:49:50
its 57 percent are considered from the block in02:49:52
where he lies from 100 reroll and to me02:49:54
you need internal means yes here you need02:49:56
just create something inside it02:49:59
so this one02:50:01
reception 57 before we need internal02:50:04
wrapper needs to be created internally02:50:07
history video wrapper is what you need02:50:11
internal it do this rapper and on02:50:14
give him 1 tablet, that is, he02:50:17
will stretch one hundred percent of this width02:50:19
about one top will also be from this width02:50:22
like this store wrapper and here02:50:24
some backgroundcolor coral02:50:26
let's see him02:50:30
but I didn’t write it into history02:50:33
wrapper and let's comment this out for now and02:50:37
I'll make a story wrapper like this02:50:40
that's great, that is, this way02:50:45
well then02:50:55
max spring because max vitz is here02:50:57
if vitz was here yes or was02:51:00
some content here02:51:08
this is the order of this story wrapper02:51:11
we got it02:51:13
ok, now fill it up02:51:16
content well here's where in what where in what02:51:22
would02:51:27
to scale everything proportionally02:51:30
this is the case now let's see how it is02:51:31
do02:51:32
Means02:51:35
our picture which will seem to be02:51:38
she will play the role of the video02:51:40
stretch pastor video in rapier then02:51:43
there is a video wrapper for her02:51:44
positions you like02:51:46
the picture we have is a class02:51:50
history of the video firing will be based on it02:51:51
stretch that is position absolute f0 top 002:51:57
width 100 percent height one hundred02:52:00
percent let's go check you can02:52:04
it turned out to be long but02:52:07
a little different from what I would like the story to be02:52:10
video well, the relish of meeting works02:52:14
89502:52:16
ok okay then this is still possible02:52:21
ideas let's give up the history of the video for now let02:52:23
the width will be 895 and in general it’s simple then02:52:28
there will be a proportional picture yes it is02:52:30
there will be 1 video anyway02:52:32
in approximately the same proportion02:52:34
well then there’s no point here, that’s how it is02:52:38
stretch the whole thing then video stories02:52:40
wrapper is also not needed, just yes02:52:43
story video just inside picture02:52:45
which story is already just posted02:52:49
here it is, by the way02:52:54
yes, here it is just posted further02:52:57
rapper video stories do anyway and02:52:59
depressions stomp all not needed button02:53:02
internal overlay02:53:04
I will02:53:06
By the way, the button can be put in an overlay02:53:09
that's02:53:11
when pressed it will disappear but02:53:15
come he will appear like this02:53:17
history video overlay is on top02:53:19
the whole history of the video means here02:53:22
position absolute l0 t0 to02:53:29
we still needed this code but02:53:31
only here we stretch it02:53:33
then look at the overlay on its background then02:53:36
there it is rectangle 9 was disabled this02:53:39
black from 20 percent in principle I am from02:53:42
inspector I will immediately copy rgb02:53:45
like this02:53:47
backgroundcolor02:53:51
here he is the fish02:53:53
great, let's move on, check, yes, but02:53:57
only his parents have a story video02:53:59
overlay rabbi parents should be02:54:02
stories video stories video wrapper02:54:04
we've already been deleted02:54:07
yes great everyone died an icon appeared02:54:10
should be in the center therefore too02:54:12
we center and in general this is the story02:54:15
video loaf position absolute in 5002:54:18
percent top 50 percent transform02:54:21
translate02:54:24
transform02:54:29
transform02:54:30
translate minus 50 percent, minus 5002:54:36
percent moved up and and clearly according02:54:38
in the center here is our button02:54:40
by the way, yes thanks to our reset because02:54:43
that the nerd soap was all dropped like that02:54:45
it's beautiful, neat, that is, it was given to me02:54:47
we didn't have to reset now02:54:49
something from the browser's standard properties02:54:52
buttons like this02:54:54
prepared for the video here is the video in02:54:57
In principle, it will be possible to post it already02:54:59
I think maybe next in the next part02:55:02
When we02:55:04
we will complete it completely later02:55:07
come back here and download the video and put it on02:55:10
for now let's leave it like this, that is, like this02:55:12
workpiece02:55:14
let's move on to the next part02:55:17
this is own product data there is this section02:55:20
I was like this pretty quickly I'm turning around02:55:24
adding a history section to it, but we will02:55:28
make our product section by air section02:55:31
produce that by the way we don’t have wounds here02:55:34
do not go because in sections02:55:36
story02:55:38
the container was wider, that is, here02:55:40
container we see 1506 here I am02:55:43
I used the standard one therefore02:55:45
go back to store and here is the container02:55:47
I need to fix it, that is, I’ll add it here02:55:49
class container container white it will02:55:53
wider it will have the width for the content02:55:56
1506 plus 30 pixels, 15 margins to the left02:55:59
on the right that's why we add it to the old man02:56:03
container class container white next02:56:06
go to bass css where it is described to us02:56:09
container, add a white container and02:56:12
we write for it a width of 1506, this is under02:56:16
content but since there are fields of 1502:56:19
1536 this is how we move on02:56:22
let's check, that's all now02:56:25
similar to only should be in layout02:56:27
here we see the container width 1536 10002:56:32
reroll the row for content we leave with02:56:36
you 1506 that's all right everything inside two02:56:40
blocks are lined up centrally between them02:56:42
indentation everything is fine but now it’s history02:56:45
block story is completed and02:56:48
you can close it here, collapse it02:56:52
add but and move on to next02:56:55
our next block is interesting02:56:59
such a tower product02:57:01
and here in terms of content, content that is02:57:04
look here you have to think danta or02:57:07
although in principle here02:57:09
here's an option to think about02:57:13
think about this option in our02:57:14
in the container there is only this 1309 to02:57:17
or this element is also in the container02:57:20
that is, this element is it02:57:22
it just begs to be02:57:24
placed in absolute terms but we placed it in absolute terms02:57:26
we will post because this02:57:28
card over photo before when02:57:30
the element is placed absolutely then well they02:57:33
go beyond common boundaries, that is, they02:57:35
freely extends beyond the container and so on02:57:37
further and here we need to understand how to02:57:39
decide for yourself, we have it all in one02:57:41
container or well, that is, or a card02:57:44
after all, it goes beyond its limits if02:57:47
look at the sizes along with the potatoes02:57:49
it turns out02:57:50
1370 that is, this is the same as what it had02:57:54
us from above02:57:55
yes yes 1370 1400 by the way, come on bass02:58:03
I'll take a look02:58:04
up to 1400 this is basically the same container02:58:09
1370 so at least he will be an absolute02:58:12
but it will be inside a container like this02:58:14
important point here, well02:58:16
Let’s now draw the structure as a whole here02:58:20
everything is also pretty standard02:58:23
the structure has a large section then inside02:58:27
will go02:58:29
here's a container again a container02:58:31
goes according to the content, that is, like this02:58:33
the card is out for him but we will do it02:58:36
so that on the left it is inside02:58:38
container we can even padding02:58:40
specially register so that she too02:58:42
ended up inside the container, that is, we02:58:44
we’ll do this on purpose later inside02:58:47
there will be a row to line up02:58:50
columns here goes inside a row then goes02:58:54
first column02:58:55
here is the first column here it will be02:58:58
have padding on the left and bottom so that this02:59:00
include the card inside yourself even though it02:59:02
absolute then I wait on the ledge in columns 202:59:05
everything is clear here too02:59:07
header subheader content button02:59:09
this is the structure we got02:59:12
Let's call this block product because02:59:14
our product and move on to its layout and02:59:17
so with action .02:59:20
products next container next02:59:24
product.ru product roll further inside02:59:28
product image you can use it g product02:59:34
image further product hunt and02:59:37
content like this product image here we are02:59:40
put a picture and we will also have02:59:43
cards that's why02:59:47
product image but you need to save it02:59:50
I think it’s also common to sell more content02:59:53
so far there are enough classes written here02:59:55
let's save the desired image then02:59:58
there is click here on the picture picture03:00:02
here is also a composite so we see everything03:00:04
lies in the image 18 rounding radius03:00:07
By the way, I didn’t add it here either03:00:10
the radius of the rounding was also 1803:00:12
pictures and03:00:14
it was worth adding a rounding radius03:00:20
I didn’t add it here, I need it later03:00:22
remember and here he is too 18 we him03:00:25
we reset it to zero first, that is, we save it without03:00:30
radii of roundings but rectangular03:00:32
jpeg export03:00:35
preview so here are my videos I know03:00:38
Now it’s in the way and I still haven’t turned it on03:00:40
yes that's okay03:00:43
Means03:00:45
rectangle rectangle here's another block and here03:00:49
group image to that is, I can choose03:00:51
group image03:00:52
all export with jpeg we see the true background03:00:54
so transparent just so you don’t03:00:56
must03:00:57
rectangle03:01:00
[music]03:01:02
as there03:01:04
although if jetpack I think it’s ok03:01:06
save let's export from jpeg03:01:09
let's create a product folder here03:01:14
product &03:01:16
photo03:01:17
photo photo caste world photo something03:01:20
let's go see what kind of picture it is03:01:23
we got here is our folder with the project03:01:26
image product water is normal, that is, and03:01:29
the one that is needed in principle is here03:01:31
you can see it in the preview03:01:32
yes great03:01:35
this moment exists now I'm back here03:01:38
rounding radius of 18 as it was in03:01:42
the card also has a photo and it03:01:44
seems to be the same but she is different that is03:01:46
you need to save it too, click here03:01:48
here is the image03:01:50
here I will already save the round data03:01:53
how will it be like round but the dpk is ours03:01:56
rectangular robot here you go03:02:00
like we see here it’s directly combined03:02:04
so I won’t play with the design here03:02:06
but still the avatars are all rounded03:02:08
via css here is the image-jpeg that is03:02:11
avatar it should be too03:02:12
rectangular but just rounded03:02:14
via css but there’s just a lot here03:02:16
too having carried out as if also a design03:02:18
workbench he is not a designer to sit on03:02:21
It’s our job to deal with this here03:02:23
provide for non-round pictures03:02:27
you can do the rounding yourself, but so what?03:02:29
we'll keep it, there's nothing wrong with that03:02:31
so I choose the image-jpeg group03:02:33
export and call her avatar03:02:37
excellent that's all in terms of pictures03:02:41
for this block and now I’m working on03:02:43
pictures, that is, but I work based on content03:02:46
so let's probably contain first03:02:49
then we layout the product image because03:02:51
there will be quite a lot of just the card03:02:53
she will be like that too03:02:56
it's a little boring, but there's a lot there03:03:00
small elements let's do it first03:03:02
content means produce content that is here03:03:04
inside haden text there yes and so on in03:03:08
in general everything is as usual product hunt and03:03:10
hiding there or header or title03:03:13
next heading03:03:16
paste here03:03:19
th2 by the way I didn’t give it in the last section03:03:24
flow 2 let's change it for store03:03:27
let's give th2 like this and then according to the text03:03:31
product content text etc.03:03:37
Next we copy03:03:40
insert03:03:44
next for the buttons is the option that we03:03:48
selected requires wrappers for all buttons03:03:50
product content of banknotes is already not very good03:03:54
by the way, the option that ended up being03:03:57
selected until we have any button03:04:00
requires a wrapper for itself, that is, it is already03:04:02
it doesn’t work out on its own, but it does03:04:04
it's not good, that is, it's not good03:04:08
because well, she’s kind of addicted to03:04:11
environment where we put her she should03:04:13
to be independent therefore that option with03:04:15
lex it's not very product content03:04:18
btn better and better be a new way and03:04:21
so on, if we go let's see03:04:24
this is what happened, maybe some03:04:27
styles write let's have sex that's all03:04:31
in a separate file it should be in03:04:33
create a file in blocks03:04:39
so in blocks we create the product file03:04:43
create a product css file03:04:48
now product copying the outline shift x03:04:52
no control shift x control-d close03:04:56
the seller makes up a container roll and03:04:59
let's go for the product indentation at the top 12003:05:04
from below03:05:07
168 1 tab03:05:09
121 then 168 further between cells03:05:15
8663 means between cells but here03:05:19
for example cuffs 86 further product.ru03:05:23
Joseph's flex display and content space03:05:28
between line at emc I suspect neither03:05:33
center at the top so okay we're not03:05:35
touch03:05:37
further03:05:39
product content is just right03:05:41
part that is, but here the size is also yes03:05:44
It’s worth pointing out again while the content03:05:46
I am doing size 584 therefore product03:05:50
hunt and max you x03:05:54
584 pixels further look here UN03:05:59
produce well, in principle it looks like03:06:01
was somewhere before Lotta Sami ball 2503:06:04
157 therefore I prescribe03:06:09
so for coding, listen to your gray hairs03:06:12
here it is double03:06:13
I didn't foresee this option, but here it is03:06:17
there is a title and an esab title so here it is03:06:20
another headline03:06:22
so let's do it03:06:24
let's do 403:06:27
there's also green here03:06:29
like this and he’s talking about where are you black03:06:32
then it goes green but even then it will be03:06:34
the title is similar to what was done before03:06:38
h3 will be itself, this is how I copy twoDescription:
↓↓↓ Макет и ссылка на материалы в описании под видео ↓↓↓ Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. В этом видео уроке я подробную покажу HTML CSS верстку простого макета из FIGMA. Поделюсь полезными приемами как быстро сделать адаптивную верстку, добавить мобильную навигацию и разместить видео на вашем сайте. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3" От установки редактора, до публикации в сети. 👉 Получить уроки, конспекты, макет и код из уроков: https://webcademy.ru/htmlsite/ :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Курс по созданию и верстке сайтов: https://webcademy.ru/htmlstart/ Обучение с наставником, 3 месяца, результат, гарантия. Научим создавать веб-сайты и зарабатывать на этом. Старт обучения: 01 Июля 2024 года. 💻 Курс "Frontend разработчик. JavaScript + React": https://webcademy.ru/jscourse/ Обучение с наставником, 3 месяца, результат, гарантия. Старт обучения: 03 Июня 2024 года. 💻 Курс "Разработка сайтов на PHP + MySQL": https://webcademy.ru/phpcourse/ Создание сайтов с системой управления. Присоединиться к курсу можно прямо сейчас. 🏁 Обучение с нуля 💁♂️ Обучение с наставником 🎯 Доведение с нуля до результата 🏢 Помощь с трудоустройством 💵 Поможем взять первый заказ на фрилансе 💳 возможна рассрочка 💳 если курс не понравится, вернём деньги в первую неделю :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💈 Сайт школы ВебКадеми: https://webcademy.ru/ 💈 Вступайте в группу Вконтакте: https://vk.com/webcademy 💈 Подписывайтесь на Telegram: https://t.me/webcademynews МАТЕРИАЛЫ К УРОКУ: • Макет: https://t.me/joinchat/friZxyBulgNmYjE6 • Код с урока: https://t.me/joinchat/friZxyBulgNmYjE6 • Урок по VS Code: https://www.youtube.com/watch?v=942oq0_v95E • Основы HTML: https://www.youtube.com/watch?v=1OL38vcF-VM&list=PL1NBhQGGj46bA6cFVixqblUDXxso1ctAg • Сброс стилей reset.css: https://webcademy.ru/blog/739/ ТАЙМ КОДЫ: 00:00 Знакомство с макетом и старт проекта 03:38 Сброс стилей 18:02 Базовые стили, контейнер, шрифты 29:57 Контейнер 33:40 Верстка шапки с навигацией 1:10:30 Верстка верхней секции 1:47:35 Секция How It Works - заголовок 2:04:48 Секция How It Works - колонки 2:32:34 Секция Story 2:56:56 Секция Our Product 3:27:54 Подвал 3:34:16 Правка багов 3:37:37 Читкод для отображения десктопной версии на смартфонах 3:41:58 Адаптивная верстка шапки и навигации 3:50:20 Адаптация первой секции 3:56:10 Адаптивная верстка секции How It Works - заголовок 4:00:30 Адаптивная верстка секции How It Works - колонки 4:07:42 Адаптивная верстка Story 4:12:51 Адаптив для секции Product 4:38:05 Адаптив для подвала 4:43:02 Мобильная навигация, скрипты 5:06:24 Видео в секции Story, Скрипты :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Меня зовут Юрий Ключевский. Я занимаюсь разработкой сайтов уже много лет, специализируюсь на front-end разработке и верстке сайтов, JavaScript и PHP программировании. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, JavaScript, jQuery, PHP, MySQL, React, Gulp. На нашем канале https://www.youtube.com/c/WebCademy?sub_confirmation=1 вы найдете много полезных обучающих материалов, а так же сможете поработать со мной лично пройдя мои курсы. :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Сайт школы ВебКадеми: https://webcademy.ru/ Наша группа Вконтакте: https://vk.com/webcademy Telegram канал: https://t.me/webcademynews
Preparing download options
* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."
** — Link intended for online playback in specialized players
Questions about downloading video
How can I download "Адаптивная HTML CSS верстка сайта из Figma c нуля для новичков. Пошагово и подробно. Советы от профи" video?
http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.
Which format of "Адаптивная HTML CSS верстка сайта из Figma c нуля для новичков. Пошагово и подробно. Советы от профи" video should I choose?
The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.
Why does my computer freeze when loading a "Адаптивная HTML CSS верстка сайта из Figma c нуля для новичков. Пошагово и подробно. Советы от профи" video?
The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.
How can I download "Адаптивная HTML CSS верстка сайта из Figma c нуля для новичков. Пошагово и подробно. Советы от профи" video to my phone?
You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.
How can I download an audio track (music) to MP3 "Адаптивная HTML CSS верстка сайта из Figma c нуля для новичков. Пошагово и подробно. Советы от профи"?
The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.
How can I save a frame from a video "Адаптивная HTML CSS верстка сайта из Figma c нуля для новичков. Пошагово и подробно. Советы от профи"?
This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.
What's the price of all this stuff?
It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.