Given text
Песенка про елочку В лесу родилась ёлочка, В лесу она росла. Зимой и летом стройная, Зелёная была. Метель ей пела песенку: - «Спи, ёлочка, бай-бай!» Мороз снежком укутывал: - «Смотри, не замерзай!» Теперь я умею Использовать заголовочные теги h1, h2 etc. Выделять цвет жирным шрифтом через strong Выделять цвет наклонным шрифтом через em Использовать разрывы строк br и абзацы p
layout it as in the picture [added a few clarifications to make it easier]
Find a text with three paragraphs. And format it as follows.
Something like this (basically, the trashier, the better =)
Replace styles with classes to make it easier to understand the following task
Add a mouseover reaction, as desired
Layout as shown in the picture
Layout it like this
If necessary, there are three lines here, and each column in the line has a fixed width and height, i.e. we do not set flex-grow for the columns.
Using Bootstrap, lay out as shown in the image.
Or, if you feel more confident, lay out the blocks to create a pixel icon.
Complete task 6 using the Boostrap framework.
Design a card for a character that is as close as possible to the original, for example:
The main thing here is not to get confused in the structure of the flexes: which ones are horizontal and which ones are vertical. On the left is a diagram of the nesting of containers.
The task is to lay out a template. I am considering the following example [https://www.figma.com/community/file/993910904620677970/travel-website-landing-page?searchSessionId=lt11zgxl-jairvf1kutb] (https://www.figma.com/community/file/993910904620677970/travel-website-landing-page?searchSessionId=lt11zgxl-jairvf1kutb)
You need to find your own template, but first agree it with me.
Дополнительное
Реализовать адапитвность для вашего шаблона из 10-го задания
Create a folder somewhere to store your work.
Now launch Visual Studio Code, click Open Folder…
and select the folder
If you are asked whether you trust the folder, feel free to click Yes
Something like this will open
Let’s create an HTML file and name it test01.html
Essentially, we have created a plain text file, which is currently empty. You can open the folder in Explorer and see that the file has appeared there:
Now let’s try to run it in a browser.
I don’t really like working in a dark theme, especially when it’s sunny, so I’ll switch themes. It’s very easy to do this in Visual Studio Code. Just click on the cog at the bottom.
A drop-down menu will open at the top, and you can select the theme you like:
Now let’s try writing something. Open the file
Leaf Fall
right in the file
Press Ctrl+S to save the file and reload the page in your browser
We see
you can write a sentence
Autumn leaf fall
you can write it in two lines
Autumn
leaf fall
oh, something’s wrong. We wrote it in two lines, but it was displayed in one. How come?
The thing is that html, or to be more precise, the browser, ignores line breaks. And if you want to make a line break, you have to explicitly tell it to do so. This is done as follows:
Autumn<br>
leaf fall
Since it’s tedious to write angle brackets, you can use the Emmet plugin built into Visual Studio Code. Just write what you want inside the brackets and press ENTER or TAB.
Now everything is clear.
Since constantly clicking on refresh is not very fun, it makes sense to install a special plugin that will automatically do this for us every time we save a file. The plugin is called Live Server. Go to plugins:
Wait for it to install
and return to the project section, where you will see all the files in our folder:
Now, to activate the plugin’s features, right-click on the file in Explorer and select:
A link like this will open in your default browser http://127.0.0.1:5500/test01.html
If you need to open it in another browser, you can simply copy this link there.
Also, a message will pop up in the studio at the bottom right:
The thing is, our code is not entirely valid. Ideally, everything we write should be written inside the basic HTML markup. But we don’t have any basic markup yet.
But that’s okay. It’s very easy to add it. Write an exclamation mark and press TAB. Then insert everything we’ve already written between <body> and </body> like this
and now check the auto-reload. Just to be sure, right-click on the file name again and select Open with Live Server from the menu. And in the browser where the link http://127.0.0.1:5500/test01.html was opened, reload it just in case
Let’s check how it works:
I just clicked Save in Visual Studio Code and it updated the browser itself! Awesome! =)
By the way, in addition to line breaks, HTML ignores more than one space, which means you can do
Autumn<br>
leaf fall in September
it will still be displayed as
In cases where you really want more than one space, use special constructs beginning with the ampersand &
Autumn<br>
leaf fall in September
is an explicit instruction to ‘insert a space’ (No-Break Space). Here, I inserted four of them.
However, it is not recommended to do this in nature, and people who do so are generally not very well liked… but sometimes it comes in handy =)
In general, there are other ways to add spaces, but more on that later.
This thing that looks like <br> is called a tag. Most tags come in pairs.
That is, there is an opening tag, tag content, and a closing tag. For example, I can explicitly highlight a piece of text in bold:
Autumn<br>
leaf fall <strong>in September</strong>
So
<strong> – opening tag</strong> – closing tag, looks like an opening tag but with a forward slash before the nameNo one forbids inserting tags inside other tags. That is, for example, I can highlight the entire text in bold and leave a line break inside
<strong>Autumn<br>
leaf fall in September</strong>
It is much nicer to write it like this:
<strong>
Autumn<br>
leaf fall in September
</strong>
We get this:
In general, there is a gentleman’s set of tags for formatting code that everyone should know.
But in reality, they are only used when there is no time to bother with styles. Plus, sometimes for semantic layout. Here they are:
<h1>First level heading</h1>
<h2>Second level</h2>
<h3>Third</h3>
<h4>Fourth</h4>
<h5>Fifth (I don't think anyone uses these)</h5>
<h6>Pfff, sixth...</h6>
Try writing the tags yourself, like typing h1, pressing TAB, and writing something inside.
This is a combined tag. It has an opening tag ol (from ordered list), inside which nested li tags (from list item) are written.
<ol>
<li>First menu item</li>
<li>Second menu item</li>
<li>Third menu item</li>
</ol>
It adds the numbers itself:
Same as above, but without numbers, and the tag is called ul (unordered list)
<ul>
<li>I can't figure out which menu item I am, maybe the second one?</li>
<li>And I'm probably the fourth one</li>
<li>Well, I'm definitely the first one</li>
</ul>
draws dots instead of numbers
<strong>I was just sitting in self-isolation</strong>
<br>
<em>Help, I'm falling LLC</em>
<br>
<u>I'm walking on rails</u>
<br>
<strike>I changed my mind about writing something here</strike>
Note that I am inserting br tags here so that each element is on a new line.
By the way, the p tag is often used instead of br.
If br is a line break, then p is the beginning of a new paragraph
<strong>I was just sitting in self-isolation</strong>
<p>
<em>Help, I'm falling LLC</em>
<p>
<u>I'm walking on the rails</u>
<p>
<strike>I changed my mind about writing something here</strike>
The paragraph has stronger indents at the top and bottom.
So, we already have the basis for writing something. Now try to complete the task.
Let’s start with the following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
It was boiling. Flabby shorks<br>
Pecked at the hay,<br>
And grunted like pigs,<br>
Like mumsies in a movie.<br>
</body>
</html>
From now on, I will only write what is in the body.
So, modern HTML code consists of about 95% combinations of the div tag, which we have not mentioned yet for some reason.
Unlike the tags we looked at in the previous task, this tag does not affect the layout in any way, which is why it is an ideal candidate as a kind of shell for content.
Let’s try wrapping the code in a div tag
<div>
It was boiling. Flabby shorks<br>
They scratched at the roof,<br>
And the pigs grunted,<br>
Like mumsies in a movie.<br>
</div>
Everything looks exactly the same
Why do we need it? To specify styles for each block.
For example, I want the text to be centred. How do I do that?
This is where the so-called attributes come in handy. Let’s add an attribute to specify the style
and write in it the style that will indicate that we want to align the text in the centre (text-align style)
Let’s check
We can specify several styles. For example, I can specify that all text should be bold (font-weight style):
In general, any style has the following form:
name: value;
Accordingly, if there are several styles, we write
name1: value1; name2: value2; ...
In essence, the div tag is a generalised tag that allows for more precise customisation of text display.
I can use as many div tags as I want
<div style="text-align: centre; font-weight: bold;">
It was boiling. Flabby shorks
</div>
<div style="text-align: right; text-decoration: underline;">
They were peering through the canopy,
</div>
<div style="text-align: left; text-decoration: line-through;">
And the pigs grunted,
</div>
<div style="text-align: centre; font-style: italic;">
Like mumsies in mov.
</div>
plus there is no need to use a line break tag, since div by default occupies the entire line and does not allow other divs to be on the same line.
In general, you need to understand the behaviour of the div block.
It occupies the entire distance from the left to the right edge and expands in height depending on the content.
Let’s add a border to our block. To do this, we use the border style
<div style="text-align: centre; border: 1px solid black;">
It was boiling. Flabby shorks
</div>
The result will be as follows
The format of the border style is as follows:
And if you cram in more text, it will start to expand the area vertically
<div style="text-align: centre; border: 1px solid black;">
One spring day, at the hour of an unusually hot sunset, in Moscow,
at the Patriarch's Ponds, two citizens appeared.
The first of them, dressed in a grey summer suit,
was short, well-fed, bald, carrying his respectable hat
in his hand like a pie, and on his clean-shaven face sat
supernatural-sized glasses in black horn-rimmed frames.
The second was a broad-shouldered, reddish-haired, curly-haired young man in
a checked cap tilted back on his head, wearing a cowboy hat,
chewed white trousers and black slippers.
</div>
<div style="text-align: right; text-decoration: underline;">
They peered through the canopy,
</div>
<div style="text-align: left; text-decoration: line-through;">
And the pigs grunted,
</div>
<div style="text-align: centre; font-style: italic;">
Like mumsies in a mov.
</div>
By the way, another interesting point is that despite hyphenation in the text, it is ignored in HTML, but nevertheless, the browser automatically hyphenates the text and expands the area so that the text fits on the page.
Another very important style that is often used is padding. Roughly speaking, this is the distance from the text to the border of the block. It can be set in three different ways:
<div style="text-align: centre; padding: 8px 16px; border: 1px solid black;">
One spring day, at the hour of an unusually hot sunset, two citizens appeared in Moscow,
at the Patriarch's Ponds.
The first of them, dressed in a grey summer suit,
was short, well-fed, bald, carrying his respectable hat
in his hand like a pie, and on his clean-shaven face sat
supernatural-sized glasses in black horn-rimmed frames.
The second was a broad-shouldered, reddish-haired, curly-haired young man in
a checked cap tilted back on his head, wearing a cowboy hat,
chewed white trousers and black slippers.
</div>
This is also used regularly. Let me add frames to all divs:
<div style="text-align: centre; padding: 8px 16px; border: 1px solid black;">
<!-- this is a comment, no need to copy it, I put it here so as not to copy the entire text ... -->
</div>
<div style="text-align: right; border: 1px solid black; text-decoration: underline;">
They peered through the canopy,
</div>
<div style="text-align: left; border: 1px solid black; text-decoration: line-through;">
And the pigs grunted,
</div>
<div style="text-align: centre; border: 1px solid black; font-style: italic;">
Like mumsies in mov.
</div>
It all looks stuck together:
So, outer borders allow you to remove this stickiness. The format is the same as for padding
add:
<div style="margin: 8px 0; text-align: centre; padding: 8px 16px; border: 1px solid black;">
<!-- ... -->
</div>
<div style="margin: 8px 0; text-align: right; border: 1px solid black; text-decoration: underline;">
They peered through the canopy,
</div>
<div style="margin: 8px 0; text-align: left; border: 1px solid black; text-decoration: line-through;">
And the pigs grunted,
</div>
<div style="margin: 8px 0; text-align: centre; border: 1px solid black; font-style: italic;">
Like mumsies in a movie.
</div>
Now that’s beautiful:
Often you want to highlight or colour a block. To do this, use the background style. It has many different forms, but we will look at two: for filling with a single colour or for filling with a gradient
<div style="background: #a6ff00; text-align: centre; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
<!-- ... -->
</div>
To adjust the colour, simply hover your mouse over the colour and wait a moment:
The result will look something like this:
The gradient is created like this
<div style="background: linear-gradient(90deg, #00aeff, #ffa6f3); text-align: right; margin: 8px 0; border: 1px solid black; text-decoration: underline;">
They were peering through the canopy,
</div>
and it looks like this:
Sometimes you really want to limit the size of a block. This is where the width property comes in handy. The format is simple:
<div style="width: 300px; background: #a6ff00; text-align: centre; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
<!-- ... -->
</div>
It is not necessary to specify the size in px; you can specify it in percentages, for example, 50%:
<div style="width: 50%; background: #a6ff00; text-align: centre; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
<!-- ... -->
</div>
However, it will still not take up 50 per cent. In reality, only the text itself will occupy 50%, and there will also be padding, margin, and even border width
To correct this behaviour, you need to add the property box-sizing: border-box;, like this:
<div style="box-sizing: border-box; width: 50%; background: #a6ff00 ; text-align: centre; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
<!-- ... -->
</div>
Then everything will be clear.
Don’t be alarmed that we are writing so much in this unfortunate style attribute. In the next task, we will learn how to create classes, and writing will become much more comfortable.
In addition to controlling the appearance of the blocks themselves, you can also control the appearance of individual parts of the text.
The span tag is used for this. It is also used as a text wrapper.
The main difference from div is that it does not add line breaks.
This means that I can select a single word and, for example, change the background colour of the text:
<div style="...">
One spring day, at the hour of an unusually hot sunset, in <span style="background: red;">Moscow</span>,
at the Patriarch's Ponds, two citizens appeared.
The first of them, dressed in a grey summer suit,
was short, well-fed, bald, carrying his respectable hat
in his hand like a pie, and on his clean-shaven face sat
supernatural-sized glasses in black horn-rimmed frames.
The second was a broad-shouldered, reddish-haired, curly-haired young man in
a checked cap tilted back on his head, wearing a cowboy hat,
chewed white trousers and black slippers.
</div>
It will look like this:
I can add padding:
<div style="width: 50%; box-sizing: border-box; background: #a6ff00 ; text-align: centre; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
Once upon a time in spring, at the hour of an unusually hot sunset, in <span style="padding: 8px; background: red;">Moscow</span>,
<!-- ... -->
</div>
It looks strange, doesn’t it?
The thing is, span tries not to mess with line spacing and the standard logic of how text behaves.
But often you want to really highlight a word. To do this, you add a special style display: inline-block;, like this:
<div style="width: 50%; box-sizing: border-box; background: #a6ff00 ; text-align: centre; margin: 8px 0; padding: 8px 16px; border: 1px solid black;">
Once upon a time in spring, at an unusually hot sunset, in <span style="display: inline-block; padding: 8px; background: red;">Moscow</span>,
<!-- ... -->
</div>
then it looks normal
that’s how it is =)
Well, I think that’s enough for now, now I can do my homework
So we struggled with these styles. It was probably especially tedious to write out the highlighting for adjectives.
Now imagine that someone comes to you and says that all adjectives must be highlighted in grey-brown-crimson with a border.
So you go into the document and edit every span. Of course, you could use a replacement, but what if you highlighted not only adjectives in yellow, but also all sorts of other words? In that case, you’d still have to check everything manually.
To avoid this problem, classes were invented.
A class is a named set of attributes. It can be linked to a tag via the class attribute.
I will use this file, and you can use yours
<div style="background:#cceb92 ;text-align: centre;font-weight: bold; padding: 8px 16px ;border: 2px solid rgb(230, 139, 21)"">
Once upon a time in spring, at the hour of an unusually <span style="background: yellow;">hot </span> sunset, in <span style="display: inline-block; padding: 8px; background: red;">Moscow,</span>
at the Patriarch's Ponds, two citizens appeared.
The first of them, dressed in a <span style="background: yellow;">light grey summer suit</span> ,
was <span style="background: yellow;">short</span> in stature, well-fed, bald, carrying his <span style="background: yellow;">decent</span> hat
in his hand, and on his well-shaven face were
<span style="background: yellow;">supernatural</span> glasses in <span style="background: yellow;">black horn-rimmed</span> frames.
The second was a broad-shouldered, reddish-haired, curly-haired young man in
a checked cap tilted back on his head, was wearing a cowboy hat,
<span style="background: yellow;">chewed white</span> trousers and <span style="background: yellow;">black</span> slippers.
</div>
<br>
<div style="text-align: right; width: 500px; background:linear-gradient(90deg, #9bd8f5, #e97f84 ); padding: 8px 16px; border: 4px solid rgb(17, 0, 255);">
The first was none other than <span style="display:inline-block; padding: 6px; background: linear-gradient(80deg, yellow , red); ">Mikhail Alexandrovich Berlioz</span>,
chairman of the board of one of the <span style="background: yellow;">largest Moscow literary</span> associations, abbreviated as MASSOLIT, and editor of a <span style="background: yellow;">thick art</span>
magazine, and <span style="background: yellow;">his young companion, the poet</span>
<span style="display: inline-block; padding: 8px; background: wheat;">Ivan Nikolaevich Ponyrev</span>, writing under the
pseudonym <span style="display: inline-block; padding: 5px; background: yellow;">Homeless</span>
</div>
<br>
<div style="text-align: left; width: 50%; background: linear-gradient(50deg, white, red); padding: 8px 16px; border: 10px solid green;">
Finding themselves in the shade of slightly <span style="background: yellow; border: 1px solid black;">green</span> lime trees, the writers
rushed to <span style="background: yellow;">a colourfully painted </span>
booth with the inscription ‘Beer and Water’
</div>
All adjectives are highlighted as follows, with (almost) the same style attribute for all of them.
<span style="background: yellow;">colourfully painted </span>
To add a class, you need to insert a special paired tag <style> into the code markup, for example, right after all divs.
<div style="background:#cceb92 ;text-align: centre;font-weight: bold; padding: 8px 16px ;border: 2px solid rgb(230, 139, 21)"">
<!-- ... -->
booth with the inscription ‘Beer and water’
</div>
<style>
/* comments inside style are written like this */
/* now we will create a class here */
</style>
add a class inside style. The name of the class inside the style tag must be written with a dot, like this
<style>
.adjective {
}
</style>
Inside the curly brackets, we will list the styles. We have one style, so we added it
<style>
.adjective {
background: yellow;
}
</style>
Now we will remove the style attribute from all adjectives and add the class attribute, that is
<span style="background: yellow;">colourfully painted </span>
Replace with
<span class="adjective">colourfully painted </span>
Please note that we write the name without a full stop in the attribute.
Next, we do the same with all the adjectives. Since they look the same, we can use the multi-cursor and replace them all at once.
To do this, we select one style with the style, like this
and then start pressing Ctrl+D until all elements with the same content are selected:
and write in all places at once
visually, nothing should change
Now all adjectives are linked to the adjective class.
The coolest thing is that now we can change their colour by changing just one line, like this:
<style>
.adjective {
background: yellowgreen;
}
</style>
We can add a border
.adjective {
background: yellowgreen;
border: 2px dashed black;
}
Let’s add some cool styles:
.adjective {
background: yellowgreen;
border: 2px dashed black;
display: inline-block; /* we already know this, just so that the adjectives are like blocks */
margin: 2px; /* margins on all sides */
padding: 0 4px; /* margins inside the border */
border-radius: 8px; /* round the borders */
box-shadow: 0 0 8px grey; /* add a shadow, 0 0 is its offset relative to the block, 8px is the shadow radius, and so on */
}
It looks more interesting now:
By the way, we have one adjective with a border that we forgot to add a class to, which is why it stands out from the overall style.
In fact, we can attach it to the class and still keep the style. That is, we will add a class to
<span style="background: yellow; border: 1px solid black;">green</span>
and it will look like this
<span class="adjective" style="background: yellow; border: 1px solid black;">green</span>
and it looks like this
In fact, some very important things happened here. Namely, the styles from style overrode those in the adjective class. That is, yellow is used for the background instead of green from adjective, and the border is thin and without gaps. This is standard behaviour. In other words, the style is always more important than what is in the class.
Although in reality we can make the class style more important than the tag style, to do this we need to add the word !important. For example, if I want the frame from the class to override the style, I would do this:
.adjective {
background: yellowgreen;
border: 2px dashed black !important; /* added !important at the end */
/* ... */
}
tydish:
As a special twist, we can basically put !important inside the style, and then it will become more important than what is in the class:
<span class="adjective" style="background: yellow; border: 1px solid black !important;">
back to top
But in general, people who use !important are very disliked and may even be beaten up. So never use !important.
Another feature that classes add is the ability to react to mouse hover. This is done using so-called pseudo-classes.
When you hover your mouse over a tag, the :hover class is implicitly added to it, and we can change how the block is displayed by adding a new class, like this
<style>
.adjective {
/* … */
}
.adjective:hover {
/* now let's add something here */
}
</style>
For example, let’s add a background change, like this:
.adjective:hover {
background: skyblue;
}
As you can see, the styles from .adjective:hover overwrite the class values. You can also add some styles that are not present in the base class. For example, I can make the cursor turn into a pointing finger
.adjective:hover {
background: skyblue;
cursor: pointer;
}
Like this
By the way, ‘greening’ does not react to the colour change because there is an !important attribute there.
You may have noticed that the colour change is very abrupt.
We can add so-called transitions between parameters, i.e. one colour will smoothly transition into another. To do this, simply add the following style to the base class
.adjective {
/* ... */
transition: all 0.3s; /* all means that we smooth all transitions, 0.3s is the transition speed in seconds */
}
/* we don't touch this */
.adjective:hover {
background: skyblue;
cursor: pointer;
}
now everything changes very smoothly
if you play around with styles, you can achieve some very unusual effects
.adjective:hover {
background: skyblue;
cursor: pointer;
border-width: 4px; /* change the border width, but you can only specify the width */
padding: 6px; /* change the padding from the border */
box-shadow: 0 0 30px white; /* make the shadow white and larger, creating the illusion of glow */
}
But of course, it’s better not to overuse sizes and indents.
Now you can start working on the task =)
Now let’s talk about class combinations
In addition to describing a specific class within the <style> tag, we can also define a class hierarchy.
Let’s say I want all adjectives in the first paragraph to be white, but I don’t want to change the adjective class. Instead, I can create a new combined hierarchical style like this:
<style>
.paragraph1 {/* ... */}
.paragraph2 {/* ... */}
.paragraph3 { /* ... */ }
.adjective {/* ... */}
.adjective:hover { /* ... */ }
/* added a new style, the space between class names is mandatory */
.paragraph1 .adjective {
background: white;
}
</style>
Since the combined style has a higher priority than the simple style, the colour from the .adjective class will be overwritten and we will get:
In general, by creating different combinations, you can achieve very interesting effects. For example, I can change the colour of all adjectives when hovering over a paragraph. To do this, I add a style with a pseudo-class:
<style>
/* ... */
.paragraph1 .adjective {
background: white;
}
/* now when you hover over a paragraph, the colour of all adjectives will change */
.paragraph1:hover .adjective {
background: red;
}
</style>
The result will be as follows
However, if I want the adjectives to change colour when hovering inside the first paragraph, I will need to add another style
.paragraph1:hover .adjective:hover {
background: yellow;
}
So far, we have only specified one class for each tag. It is possible to specify multiple classes. This is especially common in plug-in libraries with styles, which we will try later.
This is used for decomposition purposes. For example, I want to create a separate style for a block with a frame.
To do this, I split the adjective class into two, like this:
.adjective {
/* here I left only the colour and activation of smooth transitions */
background: yellowgreen;
transition: all 0.3s;
}
.bordered {
/* in this new style I put everything related to the block and frame */
border: 2px dashed black;
display: inline-block;
margin: 2px;
padding: 0 4px;
border-radius: 8px;
box-shadow: 0 0 8px grey;
}
Because of this, all my borders will naturally disappear
But now I can add frames to all tags as I wish without having to create a new class.
For example, I can add a paragraph by adding a second class to the class attribute with a space:
<div class="paragraph1 bordered">
<!-- ... -->
</div>
The result will be as follows:
Here, my indents have been lost, so I can add a clarifying class that will take into account the behaviour of the paragraph in combination with the bordered class. To do this, I define the combined style as follows:
/* we don't put a space here, we just glue the class names together */
.paragraph1.bordered {
margin: 16px 0;
border-width: 6px;
}
The result will be as follows
Well, now we can do the task
Previously, we worked with blocks separately. Now, let’s try working with the overall structure.
In general, any website consists of a set of rows and columns. We already know how to create rows, i.e. whatever div we insert, it occupies the entire row:
<div class="block"></div>
<style>
.block {
border: 1px solid black;
height: 1rem; /* explicitly specified the height of the block in rem units, which is equal to the standard height of one row */
margin-bottom: 0.5rem; /* bottom margin */
}
</style>
and if I add three blocks, they will all occupy one line
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
And here the question arises: what if I want them to be displayed not line by line, but all together in one line?
To do this, we will use the capabilities of a special set of styles called flex.
First, let’s wrap all three of our blocks in a single div and assign it the row class:
<div class="row">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
Visually, nothing will change.
Now let’s write the styles for the row class.
<style>
.block { /* ... */ }
.row {
display: flex;
}
</style>
And immediately all our blocks will collapse into a row, and only the borders will remain visible
And now, most importantly, we will specify how much relative space our blocks should occupy in the row. To do this, we use the flex-grow property. Let’s add it to the block class
<style>
.block {
border: 1px solid black;
height: 1rem;
margin-bottom: 0.5rem;
flex-grow: 1; /* added */
}
.row {
display: flex;
}
</style>
And now all the blocks are stretched across the row, and since they all have the same flex-grow, each one takes up an equal share of 1:
I can make any block twice as large as the others. To do this, I will simply add a style to it and specify the value flex-grow: 2
<div class="row">
<div class="block"></div>
<div class="block" style="flex-grow: 2;"></div>
<div class="block"></div>
</div>
Now the second block takes up two shares, and the rest take up one each.
However, all this starts to behave very interestingly when we don’t just have empty blocks, but also add some content to them.
To make it more fun, I will use icons along with the text.
There is a wonderful library of icons called fontawesome with a huge number of icons for every colour and taste.
To start using it in your file, you need to add a link to its styles. This is done slightly differently for each library.
For fontawesome, do the following. At the top of the file, where
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
add a link somewhere inside the head tag, like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" />
</head>
Now select a category. I will add animals
Then I click on a cat, for example
and copy the tag with the class
Now I insert it into my blocks
<div class="row">
<div class="block">
This is where the dog lives
<i class="fas fa-dog"></i>
</div>
<div class="block" style="flex-grow: 2;">
<i class="fas fa-cat"></i>
<i class="fas fa-cat"></i>
<i class="fas fa-cat"></i>
</div>
<div class="block">
<i class="fas fa-kiwi-bird"></i>
kiwi house
</div>
</div>
It will look something like this:
The icons seem very small, so I will add the fa-2x class built into the library, which allows you to increase the size of the icons.
Okay, everything has crawled out of the blocks… Ah, that’s because we clearly specified the height of the block in the class, so let’s remove the height style there.
<style>
.block {
border: 1px solid black;
/* removed height: 1rem; */
margin-bottom: 0.5rem;
flex-grow: 1;
}
/* ... */
</style>
Let’s add some white space to them
<style>
.block {
border: 1px solid black;
margin-bottom: 0.5rem;
ma
## Connecting a third-party library
To make it more fun, I will use icons along with the text.
There is a wonderful library of icons called [fontawesome](https://fontawesome.com/icons?d=gallery&m=free) with a ton of icons for every colour and taste.
To start using it in your file, you need to add a link to its styles. This is done slightly differently for each library.
For fontawesome, do the following. At the top of the file, where
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
add a link somewhere inside the head tag, like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" />
</head>
Now select a category. I will add animals
Then I click on a cat, for example
and copy the tag with the class
Now I insert it into my blocks
<div class="row">
<div class="block">
This is where the dog lives
<i class="fas fa-dog"></i>
</div>
<div class="block" style="flex-grow: 2;">
<i class="fas fa-cat"></i>
<i class="fas fa-cat"></i>
<i class="fas fa-cat"></i>
</div>
<div class="block">
<i class="fas fa-kiwi-bird"></i>
kiwi house
</div>
</div>
It will look something like this:
The icons appear to be quite small, so I will add the fa-2x class built into the library, which allows you to increase the size of the icons.
Okay, something has crawled out of the blocks… Ah, that’s because we clearly specified the block height in the class, so let’s remove the height style there.
<style>
.block {
border: 1px solid black;
/* removed height: 1rem; */
margin-bottom: 0.5rem;
flex-grow: 1;
}
/* ... */
</style>
Let’s add some white space to them
<style>
.block {
border: 1px solid black;
margin-bottom: 0.5rem;
margin: 0.25rem; /* margins around blocks */
padding: 0.5rem; /* padding inside blocks */
flex-grow: 1;
}
/* ... */
</style>
Everything looks fine now.
By the way, I wanted the second block to be twice as wide as the others, but it turns out to be almost smaller than the first block, plus the first and last blocks should be equal.
How is this possible, since we specified flex-grow: 1; there? The thing is, flex-grow tries to distribute the empty space in the blocks without taking into account the space occupied by the content.
The size of the content is determined by the flex-basis style, which by default tries to fit all content into a single line.
To make flex-grow take the content into account, you need to write the property flex-basis: 0
.block {
border: 1px solid black;
margin-bottom: 0.5rem;
margin: 0.25em;
padding: 0.5em;
flex-grow: 1;
flex-basis: 0; /* added */
}
From now on, everything is as specified in flex-grow, the first and last are equal, the second is twice as large
Now we have a flexible layout
but sometimes we want a block not to respond to stretching. For example, I want the kiwi house to always be a fixed size.
To do this, I can set the flex-grow property to zero. Grow means expand, and if we set it to 0, we are saying don’t expand. Let’s add this style directly to the block
<div class="row">
<!-- ... -->
<div class="block" style="flex-grow: 0;">
<i class="fas fa-2x fa-kiwi-bird"></i>
kiwi house
</div>
</div>
Hmm, that kiwi looks really squashed
It’s actually quite interesting here, because the dog and cats are in the correct proportions, but the kiwi is squashed as much as possible so that the cats and dogs take up the maximum possible space.
How can we make things easier for the poor bird? Remember, we specified the flex-basis: 0 property for all blocks so that the stretching would be proportional. So, using this property, we can specify a specific block width, which is essentially the same as width but for flex layout. For example, I’ll put 250px there
<div class="row">
<!-- ... -->
<div class="block" style="flex-grow: 0; flex-basis: 250px;">
<i class="fas fa-2x fa-kiwi-bird"></i>
kiwi house
</div>
</div>
And that’s it, now the bird is cooler than everyone else:
But of course, this is overkill. If you just want the bird not to be squashed, simply set the value to auto
<div class="row">
<!-- ... -->
<div class="block" style="flex-grow: 0; flex-basis: auto;">
<i class="fas fa-2x fa-kiwi-bird"></i>
kiwi house
</div>
</div>
and then the block will take up exactly as much space as it needs:
In general, we can now add as many rows as we want and prescribe unique behaviour for each block
<div class="row">
<!-- ... -->
</div>
<!-- added a second row -->
<div class="row">
<div class="block" style="flex-grow: 3; text-align: centre;">
<i class="fas fa-2x fa-dog"></i>
<i class="fas fa-2x fa-dog"></i>
<i class="fas fa-2x fa-dog"></i>
</div>
<div class="block" style="flex-grow: 1; ">
<i class="fas fa-2x fa-horse"></i>
horse
</div>
</div>
That’s how it is.
Today we will learn how to format text in columns. We already know how to format text in lines.
How do we usually format text in lines? For example, like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
</head>
<body>
<div class="row">
<div class="block">
This is where the dog lives
<i class="fas fa-2x fa-dog"></i>
</div>
<div class="block">
<i class="fas fa-2x fa-cat"></i>
</div>
<div class="block">
<i class="fas fa-2x fa-kiwi-bird"></i>
</div>
</div>
<style>
.row {
display: flex;
}
.block {
border: 1px solid black;
margin: 0.25em;
padding: 0.5em;
}
</style>
</body>
</html>
By default, all animals take up exactly as much space as they need.
If I want each one to take up a specific amount of space, I add the property flex-grow: 1.
<div class="row">
<div class="block" style="flex-grow: 1;">
this is where the dog lives
<i class="fas fa-2x fa-dog"></i>
</div>
<div class="block" style="flex-grow: 1;">
<i class="fas fa-2x fa-cat"></i>
</div>
<div class="block" style="flex-grow: 1;">
<i class="fas fa-2x fa-kiwi-bird"></i>
</div>
</div>
In this case, as you remember, there is an even distribution of empty space.
That is, if I want the sizes to be even, I add flex-basis: 0.
<div class="row">
<div class="block" style="flex-basis: 0; flex-grow: 1;">
This is where the dog lives.
<i class="fas fa-2x fa-dog"></i>
</div>
<div class="block" style="flex-basis: 0; flex-grow: 1;">
<i class="fas fa-2x fa-cat"></i>
</div>
<div class="block" style="flex-basis: 0; flex-grow: 1;">
<i class="fas fa-2x fa-kiwi-bird"></i>
</div>
</div>
and everything lines up nicely:
Now let’s see how it all works when I do a column layout.
To do a column layout, you need to add the flex-direction: column property, like this
<style>
.block {
/* ... */
}
.column { /* renamed to column, don't forget to rename above, where class="row" */
display: flex;
flex-direction: column; /* added */
}
</style>
and immediately everything turns into a column
Let me try to make the cat take up twice as much space:
<div class="column">
<div class="block" style="flex-basis: 0; flex-grow: 1;">
this is where the dog lives
<i class="fas fa-2x fa-dog"></i>
</div>
<div class="block" style="flex-basis: 0; flex-grow: 2;"> <!-- replaced here with flex-grow: 2; -->
<i class="fas fa-2x fa-cat"></i>
</div>
<div class="block" style="flex-basis: 0; flex-grow: 1;">
<i class="fas fa-2x fa-kiwi-bird"></i>
</div>
</div>
Let’s check:
Hmm, what’s going on here?
The thing is, vertical layout has a minor problem, which is that the browser doesn’t really have a clear concept of height.
That is, 100% width is always clear, from the left edge to the right. But 100% height is not clear how to calculate. Is it from the top of the visible part of the page to the bottom of the visible part of the page, or to the bottom if you scroll, or something else? It’s unclear in general.
Therefore, when laying out vertically, it is always important to specify the height of the column. For example, I will specify that the height of my column is 300px
<div class="column" style="height: 300px"> <!-- added height: 300px -->
<div class="block" style="flex-basis: 0; flex-grow: 1;">
a dog lives here
<i class="fas fa-2x fa-dog"></i>
</div>
<div class="block" style="flex-basis: 0; flex-grow: 2;">
<i class="fas fa-2x fa-cat"></i>
</div>
<div class="block" style="flex-basis: 0; flex-grow: 1;">
<i class="fas fa-2x fa-kiwi-bird"></i>
</div>
</div>
Oh, and everything worked right away
flex-basis: 0; behaves exactly the same as in horizontal layout, i.e. without it, there will be an attempt to distribute empty space:
The difference is not very noticeable here, but it is there.
In reality, vertical rubber blocks are not often needed. Right now, we have a dog, a cat, and a kiwi all in rubber blocks. But the rubber is very conditional, since the height of the parent block is fixed
Let me remove flex-grow and flex-basis from the blocks and add colour to the column
<div class="column" style="height:300px; background-colour: rgb(167, 242, 255);">
<div class="block" style="">
this is where the dog lives
<i class="fas fa-2x fa-dog"></i>
</div>
<div class="block" style="">
<i class="fas fa-2x fa-cat"></i>
</div>
<div class="block" style="">
<i class="fas fa-2x fa-kiwi-bird"></i>
</div>
</div>
The result will be as follows
And now I will take advantage of the incredible opportunity to align the content within the block. To do this, there is a property called align-items, which determines how blocks are aligned horizontally within a column block.
By default, it has a value of stretch
.column {
align-items: stretch; /* added, specified the default value*/
display: flex;
flex-direction: column;
}
and by changing it, I can change how the blocks are aligned horizontally inside:
For example, align-items: flex-start;
or align-items: centre;
or at the end if I want to drive them align-items: flex-end;
But the best part is that we can control the position of blocks not only horizontally, but also vertically. To do this, we use the justify-content property. By default, it has the value flex-start, which means aligning at the top of the block
.column {
justify-content: flex-start; /* added */
align-items: flex-end;
display: flex;
flex-direction: column;
}
But I can also ask it to align to the centre
.column {
justify-content: centre; /* changed to centre */
align-items: flex-end;
display: flex;
flex-direction: column;
}
and if you also do align-items: centre;:
you can also move it down
.column {
justify-content: flex-end; /* changed to flex-end */
align-items: centre;
/* ... */
}
There is also an interesting mode that evenly distributes the distance between blocks, almost like flex-grow, except that the blocks take up exactly as much space as they need:
.column {
justify-content: space-between; /* changed to space-between */
align-items: centre;
/* ... */
}
There is also this:
.column {
justify-content: space-around; /* changed to space-around */
align-items: centre;
/* ... */
}
and this one:
.column {
justify-content: space-evenly; /* changed to space-evenly */
align-items: centre;
/* ... */
}
![] (https://i.imgur.com/WtDf6Xd.png)
Using these properties, you can quickly and beautifully align the content of any block.
Of course, a single column is not very interesting, and it is much more interesting to combine columns into rows. Using the horizontal flex we are already familiar with.
Let’s say I want three columns in a row. First, I’ll just copy the block with the column three times:
<div class="column" style="height:300px; background-colour: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="height:300px; background-colour: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="height:300px; background-colour: rgb(167, 242, 255); ">
<!-- ... -->
</div>
it will put all three columns into one mega column (i.e. each column will be below the next one), because this is the standard behaviour of div blocks, and in fact I will get a column three times higher.
To put the columns in a row, I’ll wrap everything in a regular flex block, like this
<div style="display: flex;">
<div class="column" style="height:300px; background-colour: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="height:300px; background-colour: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="height:300px; background-colour: rgb(167, 242, 255);">
<!-- ... -->
</div>
</div>
And hurray, now there are three columns in a row:
I can specify how to place blocks in each column
<div style="display: flex;">
<div class="column" style="justify-content: flex-start; height:300px; background-colour: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="align-items: stretch; justify-content: space-evenly; height:300px; background-colour: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="align-items: flex-end; justify-content: flex-end; height:300px; background-colour: rgb(167, 242, 255);">
<!-- ... -->
</div>
</div>
This is how it will look
On a large screen, they will most likely not take up the entire line
If you want them to stretch across the entire width, just add the property flex-grow: 1 to each column. I also changed the colour of each one here to make it easier to see
<div style="display: flex;">
<div class="column" style="flex-grow:1; justify-content: flex-start; height:300px; background-colour: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="flex-grow:1; align-items: stretch; justify-content: space-evenly; height:300px; background-colour: rgb(126, 171, 255);">
<!-- ... -->
</div>
<div class="column" style="flex-grow:1; align-items: flex-end; justify-content: flex-end; height:300px; background-colour: rgb(171, 147, 255);">
<!-- ... -->
</div>
</div>
Columns behave the same way as regular blocks. That is, I can ask the second column to be twice as thick as the others if I specify flex-grow: 2 for it.
<div style="display: flex;">
<div class="column" style="...">
<!-- ... -->
</div>
<div class="column" style="flex-grow:2; align-items: stretch; justify-content: space-evenly; height:300px; background-colour: rgb(126, 171, 255); ">
<!-- ... -->
</div>
<div class="column" style="...">
<!-- ... -->
</div>
</div>
Here again, empty space will be distributed. If you want it to be clear, add flex-basis: 0
<div style="display: flex;">
<div class="column" style="flex-basis: 0; ...">
<!-- ... -->
</div>
<div class="column" style="flex-basis: 0; flex-grow:2; ...">
<!-- ... -->
</div>
<div class="column" style="flex-basis: 0; ...">
<!-- ... -->
</div>
</div>
If you want specific sizes, specify them in pixels in the flex-basis property, while removing flex-grow:
<div style="display: flex;">
<div class="column" style="flex-basis: 100px; justify-content: flex-start; height:300px; background-colour: rgb(167, 242, 255);">
<!-- ... -->
</div>
<div class="column" style="...">
<!-- ... -->
</div>
<div class="column" style="...">
<!-- ... -->
</div>
</div>
In general, everything is as usual, just like in the previous task. Well, you can start working on the task =)
So, today we’re going to look at Bootstrap.
This is a so-called UI framework, i.e. a set of classes with styles + a small number of scripts. It allows you to quickly create a decent-looking interface or make a layout skeleton and then fine-tune the styles to suit your needs.
Available here: https://getbootstrap.com
You don’t need to install anything to start using Bootstrap. Like Font Awesome, it is simply a file that connects to your file.
Let’s create an empty document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Go here https://getbootstrap.com/docs/5.0/getting-started/introduction/
copy the path to the style file:
and paste it into the head
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity=‘sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC’ crossorigin="anonymous">
</head>
<body>
</body>
</html>
Next, copy the path with the scripts. They will not affect anything visually, but they will add interactive functionality.
Scripts are usually placed at the end of the page, like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity=‘sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC’ crossorigin="anonymous">
</head>
<body>
<!-- I WILL WRITE THE REST OF THE CODE HERE -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity=‘sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM’ crossorigin="anonymous"></script>
</body>
</html>
The development of the interface on Bootstrap is based on placing objects on a grid. The grid is implemented using the very flexes that we struggled with in previous tasks. However, everything has already been written for us, and all we have to do is use the classes.
The first thing we do is create a container block, which is a clever wrapper that makes the width of the blocks inside it somewhat elastic. Since I also use Bootstrap myself, I can immediately show you how it works with a real example, something like this:
That is, the content inside the block is not stretched across the entire width of the screen but always has small indents on the right, which are either larger or smaller depending on the width of the screen. These sizes were carefully selected by specialists in secret laboratories. The essence of them is simply to make reading more comfortable.
Let’s start by creating a line with three columns. Since all the styles have already been written for us, we want to write the code quickly. For such cases, Visual Studio Code has a built-in plugin that simplifies the creation of blocks with a single class. To do this, simply write a period, then the class name, and then press Tab. This is how you can quickly add everything:
The result will be as follows:
<div class="container">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
</div>
Visually, it looks like this:
I’ll add a little style to our columns to make it easier to see what’s going on. I’ll add a little tricky style: I want all blocks whose class name starts with col to have a border, background colour, and padding:
<style>
[class^=col] {
padding-top: .75rem;
padding-bottom: .75rem;
background-colour: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}
</style>
I took the style from the documentation to make it easier to navigate. This is how it should look:
We have three columns and one row. You can add another row, for example, and write more columns in it:
<div class="container">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
<div class="row">
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
</div>
</div>
If, for example, you want to add indentation to a line, you can add a style like this:
<div class="container">
<div class="row" style="margin-bottom: 8px;">
<!-- ... -->
</div>
<div class="row">
<!-- ... -->
</div>
</div>
The result will be as follows:
However, Bootstrap has built-in styles for quickly adding indents, which look like this:
In general, the following will work for our option:
<div class="container">
<div class="row mb-2">
<!-- ... -->
</div>
<div class="row">
<!-- ... -->
</div>
</div>
For example, you can add indents on all sides to the column with two:
<div class="container">
<div class="row mb-2">
<div class="col">1</div>
<div class="col m-2">2</div>
<div class="col">3</div>
</div>
<div class="row">
<!-- ... -->
</div>
</div>
The result will be as follows:
More details can be found here https://getbootstrap.com/docs/5.0/utilities/spacing/
Remember that in Flexbox we had the flex-grow property, where we could specify the relative size of a cell in a row.
In Bootstrap, it is accepted that a row can contain up to 12 cells, and by adding another column to the row, we can specify what fraction of the 12 cells it occupies. This is done by adding a number to the col class:
col-1 – occupies one twelfth of the rowcol-2 – occupies 2/12 of the rowcol-3 – occupies 3/12 of the rowcol-10 – occupies 10/12 of the rowcol-11 – occupies 11/12 of the rowcol-12 – occupies the entire rowLet’s try tweaking the code:
<div class="container">
<div class="row mb-2">
<div class="col-2">2 of 12</div>
<div class="col-8">8 of 12</div><!-- here we must remove m-2 -->
<div class="col-2">2 of 12</div>
</div>
<div class="row">
<div class="col-1">1 of 12</div>
<div class="col-2">2 of 12</div>
<div class="col-3">3 of 12</div>
<div class="col">all remaining space</div>
</div>
</div>
The result will be as follows:
That is, everything is strict and clear.
If you want to centre align the content, you can use the text-center class:
<div class="container">
<div class="row mb-2">
<div class="col-2">2 of 12</div>
<div class="col-8 text-centre" style="background-colour: rgb(255, 185, 32);">8 of 12</div><!-- added class and coloured -->
<div class="col-2">2 of 12</div>
</div>
<div class="row">
<!-- ... -->
</div>
</div>
The result will be as follows:
If you want the alignment to be not only horizontal but also vertical, you will need to specify that the column is also a flex block. Fortunately, this is also very easy to do. Just add the d-flex class, which is equivalent to adding the display: flex property.
<div class="container">
<div class="row mb-2">
<!-- ... -->
</div>
<div class="row">
<div class="col-1">1 of 12</div>
<div class="col-2">2 of 12</div>
<!-- added class and coloured -->
<div class="col-3 d-flex" style="background-colour: rgb(255, 32, 188);">3 of 12</div>
<div class="col">all remaining space</div>
</div>
</div>
looks like this:
and now, to specify both vertical and horizontal alignment, we add the following instead of the style
align-items: centre – class align-items-centrejustify-content: centre – class justify-content-centreThe result is as follows:
<div class="col-3 d-flex justify-content-centre align-items-centre" style="background-colour: rgb(255, 32, 188);">3 of 12</div>
beauty:
more details about this can be found here https://getbootstrap.com/docs/5.0/utilities/flex/
In addition to placing objects strictly on the grid, you can also make indents using styles such as offset-*. Where instead of an asterisk, a number from 1 to 12 is substituted, showing how many cells to use as an indent.
For example, I will remove the block 3 of 12
<div class="container">
<div class="row mb-2">
<div class="col-2">2 of 12</div>
<div class="col-8 text-center" style="background-colour: rgb(255, 185, 32);">8 of 12</div>
<div class="col-2">2 of 12</div>
</div>
<div class="row">
<div class="col-1">1 of 12</div>
<div class="col-2">2 of 12</div>
<!-- removed -->
<div class="col">all remaining space</div>
</div>
</div>
I can insert empty space in place of this block if I add the following div:
<div class="container">
<div class="row mb-2">
<!-- ... -->
</div>
<div class="row">
<div class="col-1">1 of 12</div>
<div class="col-2">2 of 12</div>
<div class="offset-3"></div> <!-- added -->
<div class="col">all remaining space</div>
</div>
</div>
Let’s check:
It is true that you cannot add indentation to a certain number of cells to the right of the border, but in these cases you can simply limit the borders of the outer block. For example, if I want to have an indentation of 3 cells on the right, I need to calculate how many cells I already have occupied.
The result is 1 + 2 + 3 (which is the offset) = 6.
The maximum is 12 cells, which means that the last block must be three cells long. We do this:
```html
First, I will demonstrate how to create a flex column. I essentially demonstrated this in the previous task, but I will reiterate it here. Let us begin with the basics:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity=‘sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l’ crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin=‘anonymous’></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity=‘sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns’
crossorigin="anonymous"></script>
</body>
</html>
I’ll put the base in the body
<div class="container">
<div class="row">
</div>
</div>
that is, the container and the row. Now I’ll add a column to the row
<div class="container">
<div class="row">
<div class="col">
</div>
</div>
</div>
I’ll write in the column
<div class="container">
<div class="row">
<div class="col">
<div>I<br>picture</div>
<div>And I caption</div>
</div>
</div>
</div>
The result will be quite modest:
Now let’s add a border to the column to better understand what is happening. Again, everything is great, we already have the border class, we just need to add it:
<div class="col border">
<div>I<br>picture</div>
<div>And I am the caption</div>
</div>
As you remember, the column stretches across the entire width by default. There are several ways to limit it:
<div class="col-3 border">
<div>I am a<br>picture</div>
<div>And I am a caption</div>
</div>
<div class="col-auto border">
<div>I am a<br>picture</div>
<div>And I am a caption</div>
</div>
This is better suited for the task.
Now let’s see how to align the content inside. The easiest way is to simply add text-centre:
<div class="col-auto text-center border">
<div>Me<br>picture</div>
<div>And me caption</div>
</div>
This method is basically reliable and can be used. But it only works for simple situations.
An alternative way to turn a column into a flex column:
<div class="col-auto d-flex flex-column border">
<div>I am<br>image</div>
<div>And I am caption</div>
</div>
and align using the align-items-center class
<div class="col-auto d-flex align-items-center flex-column border">
<div>I<br>picture</div>
<div>And I caption</div>
</div>
And immediately notice that the alignment worked completely differently here: the block with the text ‘I am a picture’ was aligned, but the text inside it remained aligned to the left. Here’s how you can highlight it, for example:
<div class="row">
<div class="col-auto d-flex align-items-center flex-column border">
<div class="border border-danger">I<br>am a picture</div>
<div>And I am a caption</div>
</div>
</div>
border-danger is the border colour (you can see the full list here https://getbootstrap.com/docs/4.6/utilities/borders/#border-color)
It looks like this
If I want to add a margin below the image, I will add the mb-* style (i.e. margin-bottom), like this:
<div class="col-auto d-flex align-items-center flex-column border">
<div class="border border-danger mb-3">I<br>image</div>
<div>And I am the caption</div>
</div>
Well, now I can copy and paste blocks:
<div class="container">
<div class="row">
<div class="col-auto d-flex align-items-center flex-column border">
<div class="border border-danger mb-3">I am<br>a picture</div>
<div>And I am a caption</div>
</div>
<div class="col-auto d-flex align-items-center flex-column border">
<div class="border border-danger mb-3">I am<br>picture</div>
<div>And I am caption</div>
</div>
<div class="col-auto d-flex align-items-center flex-column border">
<div class="border border-danger mb-3">I am<br>picture</div>
<div>And I am caption</div>
</div>
<div class="col-auto d-flex align-items-center flex-column border">
<div class="border border-danger mb-3">I am<br>picture</div>
<div>And I am the caption</div>
</div>
<div class="col-auto d-flex align-items-center flex-column border">
<div class="border border-danger mb-3">I am<br>image</div>
<div>And I am the caption</div>
</div>
</div>
</div>
and get something like this:
An image is inserted using the img tag, like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="" alt="">
</body>
</html>
Actually, it has one main property, src, into which you can insert a link to any image.
You can easily get the link in your browser by clicking on any image and selecting
and then pasting the copied value into the src attribute
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Haanja_2010_01_1.jpg/1200px-Haanja_2010_01_1.jpg" alt="">
However, it will immediately take up exactly as much space as it needs:
Therefore, it is better to limit the size of images using the same styles. For example, I can specify that the height of the image should be exactly 250px
<img style="height: 250px" src="..." alt="">
and the result will be like this
since an image is an ordinary block, it can be styled as desired, for example, by adding a shadow or border
<img class="main-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Haanja_2010_01_1.jpg/1200px-Haanja_2010_01_1.jpg" alt="">
<style>
.main-image {
height: 250px;
border: 1px solid silver;
margin: 8px;
box-shadow: 0 0 16px silver;
border-radius: 16px;
}
</style>
In general, to make a square image, ideally the source should also be square. You can, of course, try setting the width property equal to the height like this
<style>
.main-image {
height: 250px;
width: 250px;
border: 1px solid silver;
margin: 8px;
box-shadow: 0 0 16px silver;
border-radius: 16px;
}
</style>
but then the image proportions will be distorted
In general, the most universal method, which works for both square and rectangular images, is to place the image in a square block:
<div class="main-image-wrapper"> <!-- wrapped in a block -->
<img class="main-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Haanja_2010_01_1.jpg/1200px-Haanja_2010_01_1.jpg" alt="">
</div>
<style>
/* moved all properties from main-image to the block */
.main-image-wrapper {
width: 250px;
height: 250px;
border: 1px solid silver;
margin: 8px;
box-shadow: 0 0 16px silver;
border-radius: 16px;
}
.main-image {
height: 100%; /* this property was added so that the height of the image would be equal to the height of the wrapper */
}
</style>
It doesn’t work… if you look closely, you can see that a square shadow has appeared in the background, but the image is still not square.
The problem here is that the image extends beyond the boundaries of the block, and the block does not restrict it in any way.
To prevent anything from extending beyond the boundaries, there is a magic property called overflow: hidden, which disables the rendering of parts of images (and not only images) that extend beyond the boundaries.
<style>
.main-image-wrapper {
width: 250px;
height: 250px;
border: 1px solid silver;
margin: 8px;
box-shadow: 0 0 16px silver;
border-radius: 16px;
overflow: hidden; /* added */
}
.main-image {
height: 100%;
}
</style>
To make a round image, it must be square or inside a square block. We already have that ready.
There is a property called border-radius, which specifies the radius of the block’s rounded corners. So far, we have only used pixel sizes, but if we set the value to 50%, the radius will be equal to half the side of the square, resulting in a circle, like this:
<style>
.main-image-wrapper {
width: 250px;
height: 250px;
border: 1px solid silver;
margin: 8px;
box-shadow: 0 0 16px silver;
border-radius: 50%; /* set to 50% */
overflow: hidden;
}
.main-image {
height: 100%;
}
</style>
All of this can be wrapped in flex and you will get something beautiful
<div style="display: flex; justify-content: centre;">
<div style="display: flex; flex-direction: column; align-items: centre;">
<div class="main-image-wrapper">
<img class="main-image" src="..." alt="">
</div>
<div style="font-size: 2em;">Winter</div>
<div style="font-size: 1em;">is coming</div>
</div>
</div>
That’s all there is to it)
Fontawesome has built-in support for spinning icons. You can read more about it here: [https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons] (https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons) In general, if you want to add a spinning icon, do it like this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... -->
<!-- Added a link to font-awesome, as it was not there -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
</head>
<body>
<div style="display: flex; justify-content: centre;">
<div style="display: flex; flex-direction: column; align-items: centre;">
<div class="main-image-wrapper">
<img class="main-image" src="..." alt="">
</div>
<!-- inserted an icon and added the fa-spin class to it so that it spins -->
<div style="font-size: 2em;">Winter <i class="fas fa-cog fa-spin"></i></div>
<div >close </div>
</div>
</div>
