'How can I sign my outlook email with html code

I read several topic on this but I don't understand. I wrote my email signature in html and I want now to add this to outlook. How can I do ? Have I to add code in my html ?

Here is my code :

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>

<style>
  span,
  a {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: black;
  }
  
  #name {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
  }
</style>

<body style="padding: 0; margin: 0;">
  <section style="padding: 40px 0px 60px 40px; display: flex; flex-direction: row; justify-content: space-around; width: 600px; height: 150px; background-color: #f6f7f7;">
    <img src="Image2.png" id="picture" style="height: 110%;" />
    <div style="display: flex; flex-direction: column; justify-content: space-between; height: 110%; width: 60%;">
      <div style="display: flex; flex-direction: column; justify-content: space-between; height: 20%;">
        <span id="name" style="font-size: 25px;"> Laura Bossy </span>
        <span id="job" style="font-size: 11px; color: lightgray;"> Développeuse </span>
      </div>
      <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: center; height: 60%; width : 100%;">
        <img src="pictos_signature mail.png" id="picto" style="height: 100%;" />
        <div id="contact" style="display: flex; flex-direction: column; justify-content: space-between; height: 93%; margin-left: 10px;">
          <span id="street"> 27 Cr Mirabeau Marignane - 13700 </span>
          <a href="tel:0695679535" style="text-decoration: none;"> 06 95 67 95 35 </a>
          <span id="sites" style="display: flex; flex-direction: row; justify-content: space-between; width: 80%;">
                            <a href="https://www.nosoft.io/fr/" style="text-decoration: none;"> nosoft.io </a>
                        </span>
        </div>
      </div>
    </div>
  </section>
</body>

And the picture of this enter image description here

htmlcssoutlookhtml-emailemail-templates


Solution 1:[1]

Outlook uses Word for rendering message bodies. You can read about supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Eugene Astafiev

Related Questions