Can someone make this in html for me please

HTML & CSS
21

I did and both the box and font get larger when I do that.

1 Like
22

I can’t tell what other code may be affecting the boxes. You will have to use your developer’s tools to figure that out.

23

It’s not code, I screen shot it.

24

Somebody’s code caused the browser to display the color boxes and text, didn’t it? So that counts.

25

What are your thoughts on using rem units, and do you ever use them, and if so, for what?

26

Blogger says: Your HTML cannot be accepted: Closing tag has no matching opening tag: SPAN

<span style="display:inline-block; width:12px;; height:12px; border-radius:3px; background-color:#36B8F0; margin-right:2px;"></span>blue,</span>
<span style="display:inline-block; width:12px;; height:12px; border-radius:3px; background-color:#61BE50; margin:0 2px 0 7px;"></span>green,</span>
<span style="display:inline-block; width:12px;; height:12px; border-radius:3px; background-color:#C9235C; margin:0 2px 0 7px;"></span>pink,</span>
<span style="display:inline-block; width:12px;; height:12px; border-radius:3px; background-color:#595B60; margin:0 2px 0 7px;"></span>grey,</span>
27

fixed:

<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#36B8F0; margin-right:2px;"></span><span>blue,</span>
<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#61BE50; margin:0 2px 0 7px;"></span><span>green,</span>
<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#C9235C; margin:0 2px 0 7px;"></span><span>pink,</span>
<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#595B60; margin:0 2px 0 7px;"></span><span>grey,</span>
28

That is not what I had in mind…

29

Why not?

All I did was this?

All it was missing was a <span> tag.

<span>blue,</span>
<span>green,</span>
<span>pink,</span>
<span>grey,</span>

before it was.


blue,</span>
green,</span>
pink,</span>
grey,</span>
30

What would you have done?

31

Because the colored square and the color word go together, I would have kept them in the same parent container. The first <span> goes around both the square and the word. Threrefore, they both wrap together.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/can-someone-make-this-in-html-for-me-please/252439/26
-->
    <style type="text/css">
span {
    display:inline-block;
}
span > span {
    width:.75em;
    height:.75em;
    border-radius:3px;
    margin-right:2px;
    margin-left:7px;
}
.blue span {background-color:#36B8F0;}
.green span {background-color:#61BE50;}
.pink span {background-color:#C9235C;}
.grey span {background-color:#595B60;}
    </style>
</head>
<body>

<span style="display:inline-block;"><span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#36B8F0; margin-right:2px;"></span>blue,</span>
<span style="display:inline-block;"><span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#61BE50; margin:0 2px 0 7px;"></span>green,</span>
<span style="display:inline-block;"><span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#C9235C; margin:0 2px 0 7px;"></span>pink,</span>
<span style="display:inline-block;"><span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#595B60; margin:0 2px 0 7px;"></span>grey,</span>

<span class="blue"><span></span>Blue,</span>
<span class="green"><span></span>Green,</span>
<span class="pink"><span></span>Pink,</span>
<span class="grey"><span></span>Grey</span>

</body>
</html>
32

That won’t work cause I’m only using inline, I’m not using any CSS.

I’m only using the body portion of the code.

33

You need to be more observant.

The top group of HTML is styled inline.

The lower group of HTML uses the CSS.

34

What does this only use?

<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#70CBD2; margin-right:2px;"></span><span>blue,</span>
<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#9BCD13; margin:0 2px 0 7px;"></span><span>green,</span>
<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#C40F89; margin:0 2px 0 7px;"></span><span>pink,</span>
<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#818085; margin:0 2px 0 7px;"></span><span>grey</span>
35

It uses distinctly separate inline elements. Look at the open and close <span> and see how they are grouped.

You have to look at the code to tell how things are different. That’s what we have to do, too.

If you will copy your HTML and my HTML on a page and compare them as the page narrows, you will see that my color square and color word wrap together as one unit, whereas your color square and color word wrap separately.

36

I see it wrapping on here.

How do I prevent it from wrapping?

37

Isn’t it Good if it wraps?

38

Yes. But it’s better if the color square and color word wrap together as a unit than if they wrap independently of one another.

I don’t know how else to express it.

39

It wraps this much then gets messed up.


I’m sure there are no phones that tiny.

40

I see what you mean now.