• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS HTML Coding Help: Photos in coding

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!



Screen_Shot_2020-05-21_at_10.03.54_PM.png

Code:
</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>
 
Last edited:

Tealk

Active Coder
Verified
Jun 5, 2019
375
94
28
SysAdmin
Anzah.Tools
I would advise you to validate your code:
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.