HTML & CSS HTML Coding Help: Photos in coding

[lilforceghost]

Hello!

I'm fairly okay with coding but I am not a master by any means. I have a template I've been working on and I would like to be able to post a photo next to it.It's a text bubble and I cannot seem to code in a photo next to the text bubble as if it's the profile pic. I won't go into details because showing you will make more sense. There's a pic below as well as my coding. When I try to code image stuff in, it doesn't work.. I've tried the normal HTML code but it won't resize and I can't figure out how to get it along the text bubbles. (Seel below for code and photo.)

Thanks in advance!

</html>
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:300,400,400i,500,500i,600,600i,700,700i|Josefin+Sans:400,400i,600,600i,700,700i|Martel+Sans:300,400,600,700,800,900&display=swap" rel="stylesheet">
<style>

.mysteries {
position: relative;
background: #2a2a2a;
margin: 20px auto 0;
width: 450px;
overflow: hidden;
}

.mysteries-image-hold {
position: relative;
}

.mysteries img {
width: 450px;
height: 350px;
object-fit: cover;
filter: grayscale(10%) contrast(60%);
}

.mysteries-image-hold:before {
content:"";
background: rgb(61,2,2);
background: linear-gradient(180deg, rgb(255, 77, 77) 8%, rgb(102, 163, 255) 20%, rgba(0,212,255,0) 100%);
position: absolute;
width: 450px;
height: 350px;
z-index: 1;
mix-blend-mode: multiply;
}


.mysteries-image-hold:after {
background: rgb(42,42,42);
background: linear-gradient(0deg, rgba(42,42,42,1) 0%, rgba(0,212,255,0) 100%);
content:"";
position: absolute;
bottom: 0px;
height: 400px;
width: 450px;
left: 0px;
}

.mysteries-inner {
padding: 60px;
color: #ccc;
font-family: martel sans;
font-size: 11px;
text-align: justify;
line-height: 180%;
}

.mysteries-lyrics {
position: absolute;
padding: 0 30px;
font-family: martel sans;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 300;
margin-top: -70px;
z-index: 2;
color: #eee;
}

.mysteries-lyrics b, .mysteries-lyrics-bottom b  {
font-weight: 900;
letter-spacing: 3px;
color: #fff;
}

.mysteries-lyrics span {
position: absolute;
font-size: 100px;
z-index: 1;
color: #ccc;
top: -22px;
width: 450px;
font-weight: 700;
letter-spacing: 0px;
line-height: 80%;
opacity: 0.2;
text-align: left;
left: -2px;
}

.mysteries-lyrics-bottom {
position: relative;
font-family: martel sans;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 300;
z-index: 2;
color:  #ffffff;
text-align: right;
   display: inline-block;
   margin-bottom: 30px;
   margin-right: 30px;
   float: right;
}

.mysteries-inner::first-letter {
float: left;
font-size: 80px;
display: inline-block;
padding: 10px;
padding-top: 40px;
color: #fff;
}

</style>

<div class="mysteries">
<div class="mysteries-image-hold">
   <img src="https://i.imgur.com/wBh15DG.gif">
</div>

<div class="mysteries-lyrics">

Ms<b> Marvel</b>
   <span>Kamala Khan</span>

</div>

<div class="mysteries-inner">
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elementum posuere suscipit. Phasellus eu rutrum ipsum, at volutpat quam. Phasellus porta laoreet congue. Fusce magna tortor, sodales non dolor at, accumsan dapibus mi. Duis ut vulputate felis. Suspendisse nunc velit, porttitor non magna id, fermentum efficitur ante. Praesent quis sagittis ipsum. Morbi non pellentesque neque. Donec at dapibus tellus, sit amet sollicitudin mi. Fusce convallis ut lacus quis fermentum. In at lectus varius, condimentum lectus et, ullamcorper tellus. Ut convallis libero vel ipsum tincidunt sollicitudin.

<style type="text/css">
    .bubbleright {
        position:relative;
        padding: 10px;
        background: #EE9CB4;
        margin: 5px 5px;
        max-width: 250px;
        left: 60px;
    }


    .bubbleleft{
        position:relative;
        left: 20px;
        padding: 10px;
        background: #1a8cff;
        margin: 5px 5px;
        max-width: 250px;
    }

    .bubbleleft:before{
        position:absolute;
        content: "";
        top:15px;left:-10px;
        border-width: 10px 15px 10px 0px;
        border-color: transparent  #1a8cff;
        border-style: solid;
    }

</style>
<right>
<!DOCTYPE html>
<left<html>
<body>

<p style="text-align:right; <p style=font-family:Abel;font-size:20px;" style="font-size:20px"">STRETCH⚡</p>

</body>
</html>

<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet'>
<style>
body {
    font-family: ' Abel';font-size: 80px;
}
</style>
</head>
<body>

</body>
</html>
</right>



<div class="bubbleleft">
Phasellus eu rutrum ipsum, at volutpat quam. Morbi non pellentesque neque. Donec at dapibus tellus, sit amet sollicitudin mi.
</div>

Duis ut vulputate felis. Suspendisse nunc velit, porttitor non magna id, fermentum efficitur ante. Praesent quis sagittis ipsum. Morbi non pellentesque neque. Donec at dapibus tellus, sit amet sollicitudin mi. Fusce convallis ut lacus quis fermentum. In at lectus varius, condimentum lectus et, ullamcorper tellus. Ut convallis libero vel ipsum tincidunt sollicitudin.


<!DOCTYPE html>
<left<html>
<body>

<!DOCTYPE html>
<left<html>
<body>

<p style="font-family:Archivo Black ; font-size:20px"  style="font-size:20px">WEB HEAD </p>

</body>
</html>

<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Archivo Black' rel='stylesheet'>
<style>
body {
    font-family: 'Archivo Black';font-size: 30px;
}
</style>
</head>
<body>

</body>
</html>

</body>
</html>

<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Archivo Black rel='stylesheet'>
<style>
body {
    font-family: 'Archivo Black';font-size: 19px;
}
</style>
</head>
<body>

</body>
</html>

<style type="text/css">
    .bubbleright {
        position:relative;
        padding: 10px;
        background: #e60000;
        margin: 5px 5px;
        max-width: 250px;
        left: 60px;
    }

    .bubbleright:after{
        position:absolute;
        content: "";
        top:15px;right:-10px;
        border-width: 10px 0 10px 15px;
        border-color: transparent  #e60000;
        border-style: solid;
     }

   

</style>

<div class="bubbleright">
Phasellus eu rutrum ipsum, at volutpat quam. Morbi non pellentesque neque. Donec at dapibus tellus, sit amet sollicitudin mi.
</div>

Duis ut vulputate felis. Suspendisse nunc velit, porttitor non magna id, fermentum efficitur ante. Praesent quis sagittis ipsum. Morbi non pellentesque neque. Donec at dapibus tellus, sit amet sollicitudin mi. Fusce convallis ut lacus quis fermentum. In at lectus varius, condimentum lectus et, ullamcorper tellus. Ut convallis libero vel ipsum tincidunt sollicitudin.

 
</div>

<div class="mysteries-lyrics-bottom">
   Good is not a thing you are, <b>it's a thing you do</b>
</div>

</div>
<center><a href="http://cttw.jcink.net/index.php?showuser=18033" style="color:#ffffff;font-size:7px;letter-spacing:5px;">MONTY</a></center>

 

[Tealk]

I would advise you to validate your code:

Ready to check - Nu Html Checker

validator.w3.org

Because several body, html and style tags alone would be a massive source of errors

Insert the image and a float: right; should solve your problem, but probably only after you have corrected everything else.

 

[Malcolm]

Insert the image and a float: right; should solve your problem, but probably only after you have corrected everything else.

This.

Use <img> tag to insert your image, then use the float on image and bubbles and I believe it should work.

And, remember you should only have one <html></html> and <body></body>. The body tag should be within the <html> tag. My personal recommendation is to separate your CSS into a .css file and is standard practice. Then again, that's up to you.

The <style> should be within your <head> tags.