How can I modify this HTML code to change image presentation?

Solved

How can I modify this HTML code to change image presentation?

Modico
Explorer
50 3 12

Hey Everyone

 

I have a quick question about a html-code, I want to transform the first picture into the second picture. I have added the html code down belown.

1.

d826522d-cc12-484d-8648-7fca7b178cfd.jpg

 

2.

53db560e-ef2c-42d0-97e1-4b7e7ddebcdf.jpg

 

Code: 

<p style="text-align: center; "><span style="font-size: 12pt; text-transform: uppercase;"><strong>our standards</strong></span></p>
<hr>

Thanks in advance!

Accepted Solution (1)

Modico
Explorer
50 3 12

This is an accepted solution.

Hey Everyone

Here's the solution for anyone who needs it (btw. ChatGPT fixed this issue for me):

 

 

 

<p class="trennlinie-text">
  <span class="trennlinie"></span>
  <span style="font-size: 20px;">OUR STANDARDS</span>
  <span class="trennlinie"></span>
</p>

<style>

.trennlinie-text {
  position: relative;
}

.trennlinie-text::before {
  content: "";
  position: absolute;
  right: 0;
  width: 42%;
  height: 1px;
  background-color: black;
}

.trennlinie-text::after {
  content: "";
  position: absolute;
  left: 0;
  width: 42%;
  height: 0.5px;
  background-color: black;
}

.trennlinie-text::before {
  top: 16px;
}

.trennlinie-text::after {
  bottom: 16px;
}

</style>

 

 

View solution in original post

Reply 1 (1)

Modico
Explorer
50 3 12

This is an accepted solution.

Hey Everyone

Here's the solution for anyone who needs it (btw. ChatGPT fixed this issue for me):

 

 

 

<p class="trennlinie-text">
  <span class="trennlinie"></span>
  <span style="font-size: 20px;">OUR STANDARDS</span>
  <span class="trennlinie"></span>
</p>

<style>

.trennlinie-text {
  position: relative;
}

.trennlinie-text::before {
  content: "";
  position: absolute;
  right: 0;
  width: 42%;
  height: 1px;
  background-color: black;
}

.trennlinie-text::after {
  content: "";
  position: absolute;
  left: 0;
  width: 42%;
  height: 0.5px;
  background-color: black;
}

.trennlinie-text::before {
  top: 16px;
}

.trennlinie-text::after {
  bottom: 16px;
}

</style>