dialogue box

/home/resources/

created: 1/8/25

below is code for a dialogue box thing i made. i made this for rpg but you can use it too if you want.

html

<div class="box">
<img src="insert your file path here">
<span class="name">name here</span>
<p>"dialogue here"</p>
</div>

css

.box {
color: white;
border: 2px solid white;
padding: 5px;
background: black;
max-width: 500px;
margin: 5px auto;
min-height: 105px;
}

.box img {
width: 100px;
height: 100px;
vertical-align:middle;
margin-right: 10px;
float:left;
border: 2px solid #444444;
}

.name {
font-weight: bold;
color: white;
margin-bottom:-10px;
}

.box p {
margin: 0 5px 0 5px;
}

preview

USER

"hey bro"

thanks joshdance.com for the html converter