Avatar of finnstone
finnstone
 asked on

turn html + css into just css

i think its called inline but i need these two things combined please!

IE remove the class stuff

html
<div class="speechBubble">
    <div class="pointer"></div>
    <div class="bubble">
        <div class="topLine">PAY WITH A</div>
        <div class="botLine">TWEET</div>
    </div>
</div>

css

.speechBubble {
    position:relative
}
.pointer {
    width: 0;
      height: 0;
      border-top: 25px solid rgb(16,125,195);
      border-left: 25px solid transparent;
    float:left;
    margin-top:50px
}
.bubble {
    width:300px;
    height:110px;
    border-radius:15px;
    background-color:rgb(16,125,195);
    margin-left:25px;
    text-align:center;
    padding:20px 0;
    color:rgb(23,178,136);
    font-family:arial;
}
.topLine {
    font-size:2.8em;
      line-height:1em  
}
.botLine {
    font-size:4.6em;
    font-weight:bold;
      line-height:.8em
}
HTMLCSS

Avatar of undefined
Last Comment
finnstone

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Tom Beck

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
finnstone

ASKER
thanks!
finnstone

ASKER
can you help out with my new one? here is the file where i tried to add your code

https://www.dropbox.com/s/726fheax4m4wp3w/hmmm.html?dl=0
Tom Beck

Just add text-decoration:none to the anchor tag. Don't forget the closing > on the anchor tag:

<a style="position: relative; text-decoration: none;" > <div="" href="mini.EDITEDOUT.co">

...
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
finnstone

ASKER
can you include the first few lines cant reconcile that..
finnstone

ASKER
where does the closing </a go?
finnstone

ASKER
this part doesnt seem right

<div="" href="mini.xxx.co">
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Tom Beck

You are right, that's a complete mess too. Here's the markup you posted to Dropbox.
<td style="text-align:center;"><a href="mini.EDITEDOUT.co"<div style="position:relative">
    <div style="width: 0;height: 0;	border-top:30px solid rgb(16,125,195); border-left:30px solid transparent;    float:left; margin-top:50px"></div>
    <div style="width:337px;height:114px;border-radius:15px;   background-color:rgb(16,125,195);margin-left:30px;text-align:center;padding:33px 0;color:rgb(23,178,136);font-family:arial;">
        <div style="font-size:3.4em;line-height:.7em">PAY WITH A</div>
        <div style="font-size:5.5em;font-weight:bold;line-height:1em">TWEET</div>
    </div>
</div></a></td>

Open in new window

And here is how the browser is interpreting the markup.
<td style="text-align:center;"><a style="position:relative" <div="" href="mini.EDITEDOUT.co">
    <div style="width: 0;height: 0;	border-top:30px solid rgb(16,125,195); border-left:30px solid transparent;    float:left; margin-top:50px"></div>
    <div style="width:337px;height:114px;border-radius:15px;   background-color:rgb(16,125,195);margin-left:30px;text-align:center;padding:33px 0;color:rgb(23,178,136);font-family:arial;">
        <div style="font-size:3.4em;line-height:.7em">PAY WITH A</div>
        <div style="font-size:5.5em;font-weight:bold;line-height:1em">TWEET</div>
    </div>
</a></td>

Open in new window

That's where I got this piece:
<div="" href="mini.EDITEDOUT.co">

The missing > in the anchor tag is in the first code block posted.

<a href="mini.EDITEDOUT.co"
finnstone

ASKER
can you tell me how to make the button that link ? sorry. if you can fix that code, much appreciated!
Tom Beck

Add the stuff in bold to your markup.

<a href="mini.EDITEDOUT.co" style="text-decoration:none">
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
finnstone

ASKER
thank!
finnstone

ASKER
thx