Overlapping font styles

First time coder here...

How do you get this kind of overlap? I've been trying to figure it out! 

Saw this example on another question on a different topic, and it's exacty what I'm looking for - although both words will be different.

Thank you!

I think you can add 2 text, then we will give the code to make them overlap together

I would like it to say: Meet Stephen

Would like to do "Meet" in the darker sans serif font.

And add "Stephen" in script over the top of "Meet," but a bit further down.

So, so grateful!

On 12/13/2021 at 3:18 AM, Poppyseeds said:

I would like it to say: Meet Stephen

Would like to do "Meet" in the darker sans serif font.

And add "Stephen" in script over the top of "Meet," but a bit further down.

So, so grateful!

 

The text will be paragraph or heading 1, heading 2,..?

You can use Markdown Block with this syntax

<span style="font-family:monospace;color:dark;">Meet</span><span style="position:relative;top:-50px;">Stev</span>

3 hours ago, tuanphan said:

The text will be paragraph or heading 1, heading 2,..?

You can use Markdown Block with this syntax

<span style="font-family:monospace;color:dark;">Meet</span><span style="position:relative;top:-50px;">Stev</span>

 

Hello Tuan!

I inserted the above into a Markdown Box, and put in my specifics:

<h1><span style="catamaran:monospace;color:dark;">Meet</span></h1><span style="position:relative;top:-55px;">Steve</span></span>

I'm still not doing something correctly. The "Meet" looks good, but the "Steve" is not sitting directly below the "Meet."

And I'm not sure how to change "Meet" my custom font, entitled Blue Pen.

I have to vary the color and weight, too, but I'll try to figure that out on my own.

 😛

Help...

On 12/14/2021 at 11:51 PM, Poppyseeds said:

 

Hello Tuan!

I inserted the above into a Markdown Box, and put in my specifics:

 

<h1><span style="catamaran:monospace;color:dark;">Meet</span></h1><span style="position:relative;top:-55px;">Steve</span></span>

 

I'm still not doing something correctly. The "Meet" looks good, but the "Steve" is not sitting directly below the "Meet."

And I'm not sure how to change "Meet" my custom font, entitled Blue Pen.

I have to vary the color and weight, too, but I'll try to figure that out on my own.

 😛

Help...

 

 

Can you share link to page where you added Markdown? We can check easier

5 hours ago, tuanphan said:

Can you share link to page where you added Markdown? We can check easier

Well, I removed "Meet Steve," however, a similar issue has arrived in the re-do.

I would like to put the red block behind the text; additionally, there will be more elements in this area. I researched stacking. I don't understand it yet. I tried.

Site: https://cardioid-roadrunner-wfzr.squarespace.com/config/

PWD: stacking

Thank you, again, for your time and expertise!

On 12/18/2021 at 1:44 AM, Poppyseeds said:

Well, I removed "Meet Steve," however, a similar issue has arrived in the re-do.

I would like to put the red block behind the text; additionally, there will be more elements in this area. I researched stacking. I don't understand it yet. I tried.

Site: https://cardioid-roadrunner-wfzr.squarespace.com/config/

PWD: stacking

Thank you, again, for your time and expertise!

FIrst, h8 doesn't exist, you can use h1, h2, h3, h4, h5, h6

Next, change this

<h8><center>America's Call-First Plumber!</center><h8></h8></h8>

to this

<h2 class="text-red"><center>America's Call-First Plumber!</center></h2>

Next, add this to Design > Custom CSS

h2.text-red {
    font-family: Thankfully;
    font-size: 100px !important;
    font-weight: 400;
    color: blue !important;
    letter-spacing: 2.2pt !important;
    line-height: 0em !important;
}
h2.text-red:after {
    background-color: #9e0003;
    content: "";
    height: 50px;
    width: 70%;
    display: block;
    margin: 0 auto;
}

Next, remove your font-face code (the code is invalid), add this new code

@font-face {
        font-family: Thankfully;
    src: url(https://static1.squarespace.com/static/61bcd157b473301415403cf2/t/61bcd15fb473301415403ea3/1639421750583/Thankfully.ttf)
}

17 hours ago, tuanphan said:

FIrst, h8 doesn't exist, you can use h1, h2, h3, h4, h5, h6

Next, change this

<h8><center>America's Call-First Plumber!</center><h8></h8></h8>

to this

<h2 class="text-red"><center>America's Call-First Plumber!</center></h2>

Next, add this to Design > Custom CSS

h2.text-red {
    font-family: Thankfully;
    font-size: 100px !important;
    font-weight: 400;
    color: blue !important;
    letter-spacing: 2.2pt !important;
    line-height: 0em !important;
}
h2.text-red:after {
    background-color: #9e0003;
    content: "";
    height: 50px;
    width: 70%;
    display: block;
    margin: 0 auto;
}

Next, remove your font-face code (the code is invalid), add this new code

@font-face {
        font-family: Thankfully;
    src: url(https://static1.squarespace.com/static/61bcd157b473301415403cf2/t/61bcd15fb473301415403ea3/1639421750583/Thankfully.ttf)
}

You are a genius. I NEVER would have gotten that right. 

So, I thought I could create further font options over and above what's available. I thought wrong!

I'm trying to use this same idea on another site, but cannot get it to work. The underline is still on top. 😔

Now I'm off to decipher what you did and see if I can find my mistake.

Quote

Why does the "red" mean in the "h2 text-red" code line when the font is blue?

The .text-red part of h2.text-red is a class name. Its only function is to tell where something is located in a document. It's just a label really. Kind of like a street address or phone number. It doesn't actually control color. That is done by the color : blue; property/value pair.

If you want you can change the red to blue but you have to make sure you make the change everywhere that class name appears.

7 minutes ago, creedon said:

The .text-red part of h2.text-red is a class name. Its only function is to tell where something is located in a document. It's just a label really. Kind of like a street address or phone number. It doesn't actually control color. That is done by the color : blue; property/value pair.

If you want you can change the red to blue but you have to make sure you make the change everywhere that class name appears.

Thanks!

I truly have to get the hang of the lingo; I saw "text-red" and "h2" and thought it was color of headline 2 font.

Now I'm tearing my hair out. The coding works on the site for which I was inquiring, but not the other for which I was hoping to simply modify. Was hoping it would be that easy.

Quote

I truly have to get the hang of the lingo; I saw "text-red" and "h2" and thought it was color of headline 2 font.

One place to start W3Schools - CSS Tutorial.

Quote

Now I'm tearing my hair out. The coding works on the site for which I was inquiring, but not the other for which I was hoping to simply modify. Was hoping it would be that easy.

Computers are very exacting. If something has not been done in exactly the same way in two places then the CSS will fail.