How do i create a header box in a bigger box? - html

Question

I am trying to create a header box in a bigger box like the one in the image but only have an image to go on.
Any code snippets would be appreciated.

Answer 1

.parent {
border: 1px solid #ddd;
background: #fff;
}
.heading {
padding: 10px;
background-color: #0A7CDD;
color: #fff;
margin-top: 0;
}
p {
color: #333;
font-size: 16px;
padding: 0 10px;
}
<div class="parent">
<h3 class="heading">Other terms</h3>
<p>your text1 will go here,put all the text here.</p>
<p>your text2 will go here,put all the text here.</p>
</div>
Although This is wrong way to ask question, You have to try something yourself, but I was just free so here it is for you.

Answer 2

I offer this help because it looks like you are struggling to get started but you really should take note and analyse the code below and try to understand what each element is doing.
Remember StackOverflow is not a coding service and you will struggle to get help if you don't have a basic knowledge of what you are trying to achieve.
.Box {
display: flex;
flex-direction: column;
}
.Head {
background: #0a7cdd;
color: #fff;
padding: 10px;
}
.Body {
border: 1px solid #ddd;
padding: 10px;
}
<div class="Box">
<div class="Head">
<h2>Other Terms</h2>
</div>
<div class="Body">
<p>My credits must remain intact at the bottom of the auction template.</p>
<p>Please email me with any questions or if you need help with template installation.</p>
</div>
</div>
Key html elements you should look at are:
div
h2
p
Here is a good place to start:
https://www.w3schools.com/tags/tag_div.asp

Answer 3

Not an 100% solution to your "problem", where you straigt up get the solution to your problem, but more of a tip on how you can help yourself solve it.
What I tend to do when translating visuals into code is to "think out loud" what I see and try and transcribe it as well as I can into code. In your case you clearly see a blue header-section and below it a text-section. They are both wrapped inside a box with a border.
By defining these different parts it is fairly easy to get an idea as of how to structure it in code:
<div class="box">
<div class="header-section">
<h1> Header Text </h1>
</div>
<div class="text-section">
<p> Heres some text </p>
</div>
</div>
And then you go ahead and style it as you like.