Can someone make this in html for me please

HTML & CSS
61

This is your code:

<!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>

This is my code:

<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#70CBD2; margin:0 2px 0 7px;"></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>
62

Are you talking about this?

.blue span {background-color:#36B8F0;}
.green span {background-color:#61BE50;}
.pink span {background-color:#C9235C;}
.grey span {background-color:#595B60;}
63

This is already part of my code.

    width:.75em;
    height:.75em;
    border-radius:3px;
    margin-right:2px;
    margin-left:7px;
64

Can you show what you mean?

65

This? If this is it, I don’t know what I’m supposed to do with it.

<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>
66

I don’t understand at all, really, I don’t.

67

This is already part of my code.

It’s the same exact margin. 2&7

68

You can honestly tell I’m struggling with this.

69

I don’t know what you mean by humor, but I’m clearly struggling here with this.

70 
<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>
72

Did you mean this?

<span style="display:inline-block;"><span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#36B8F0; ;"></span></span><span class="blue"><span></span><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></span><span class="green"><span></span><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></span><span class="pink"><span></span><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></span><span class="grey"><span></span><span>Grey</span>
73

Is this still unlisted, am I still receiving help with it?

74

I don’t think this is what you meant cause the text and the color still wraps, separately

75

It’s not unlisted. That was simply a message which carried over when I merged the two topics, and which I’ve now deleted.

76

ok. Maybe you can help me to understand what @ronpat is wanting me to do with the code cause I don’t.

post 55 of his.

77

I’m trying to get the color box and the color word to wrap together, not separately, using no css. @ronpat says he gave me instructions on how to do this, but I don’t understand it.

I don’t understand what he’s wanting me to do with the code.

78

If I don’t understand how to do a code, I don’t understand how to do it.

79

@asasass, this is at the root of why people are getting frustrated trying to assist you. That statement gives the impression that you have taken no notice at all of the many, many posts here explaining the very basics to you.

As I explained yesterday, HTML is the series of tags which give structure and semantic meaning to the page. See this list: https://developer.mozilla.org/en-US/docs/Web/HTML/Element. If it isn’t here, it isn’t HTML.

CSS is used for styling. It can be written as an external stylesheet (usually the best method), within <style></style> tags in the <head> section of the page, or inline (generally a very poor choice, and should only rarely be required). If you are using anything from this reference https://tympanus.net/codrops/css_reference/ , then you are using CSS, no matter whether you place it inline, in the header or in a separate stylesheet.

Please at least take the time to learn the basic teminology so that you can ask intelligent questions, which in turn are far more likely to produce the solution you want, because there will be less room for ambiguity and misunderstanding.

2 Likes
80

I’m surprised at just how much patience others have. I didn’t realize just how long it’s been - This from June 2016

3 Likes
81

This is the code, I’m supposed to do something to it, but I don’t understand what. And what @ronpat said to do, I don’t understand it.

This is 90% inline, I’m supposed to add the other 10% to it but I don’t understand how.

<span style="display:inline-block; width:12px; height:12px; border-radius:3px; background-color:#70CBD2; margin:0 2px 0 7px;"></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>