CSS Dificuldades em colocar texto super e alinhar imagem

[Impts]

 

 

Primeira dúvida, estou tentando colocar o texto "bronze" como super, igual aqueles TM de empresa, na parte superior direita de uma palavra, porém não está funcionando.

 

<p class="backservice"><a href="#" class="link-service"></a></p>
        <p><h1>Serviço</h1><span class="variant-bronze">Bronze</span></p>
        <p><h2>O melhor de todos.</h2></p>
        <p><a href="link-saibaservice">Saiba mais</a></p>

 

.variant-bronze {font-size: 12px; vertical-align: super;}
.backservice {background-color:gold;}
.link-service {
    background: url('alm.png');
    display: block;
    background-position: center;
   /* background-color: #E34140;*/
    height: 250px;
   /* align-items: center;
    align-items: justify;*/
    background-repeat: no-repeat;
    background-size: 200px;
  
    

 

 

A outra dúvida, é como colocar a imagem alinhada para direita > e o texto no meio para esquerda <, so que o texto com uma certa distancia da imagem?

 

<p class="img"><img src="foto.jpg">
        <h1>Titulo da foto</h1>
        <h2>Descrição da foto.</h2>
        <a href="link-sif">Clique para baixar</a></p>

.img {text-align: right;}

 

[thefill]

Bom dia Sr. @Impts

 

Em relação a sua primeira pergunta eu devo dizer que não entendi exatamente o que você quis dizer, você poderia adicionar imagens sobre isso?

 

Já em relação a sua segunda pergunta eu tentei fazer aqui, seria dessa forma?

 

Se for assim, eu posso disponibiliza o código depois.

[Impts]

@thefill Em relação a parte da imagem, sim, é isso mesmo! Só que sem esse retângulo azul de baixo, se for possível.

 

Sobre a primeira dúvida, é isso que eu quis dizer, em anexo:

 

 

 

[thefill]

Certo!

O primeiro eu fiz assim:

 

---HTML---

<div class="imgBox">
      <div>
        <h1>Titulo da foto</h1>
        <h2>Descrição da foto.</h2>
        <a href="link-sif">Clique para baixar</a>
      </div>
      <img
        src="https://images.unsplash.com/photo-1638026902706-5fce0ca77f8f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80"
      />
</div>

 

---CSS---

.imgBox {
  padding: 20px 50px;
  background-color: #fff;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.imgBox h1 {
  font-size: 2.3em;
}
.imgBox h2 {
  font-size: 1.6em;
}
.imgBox img {
  width: 400px;
  height: 400px;
  object-fit: cover;
  object-position: center;
}

 

E o segundo eu consegui fazer assim:

 

---HTML---

<div>
      <h1>Serviço</h1>
      <span>Bronze</span>
</div>

 

---CSS---

div {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
h1 {
  font-size: 8em;
}
span {
  font-size: 1.6em;
  top: 0;
  right: 0;
}