3

I'm using Figma to design my web page but when I try to convert it into HTML and CSS the text appears without style, although I tried to embed the CSS with HTML or link it with the external file it doesn't work.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <title>Desktop - 21</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Almarai%3A300%2C400%2C700"/>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro%3A300%2C400%2C700"/>
  <link rel="stylesheet" href="./styles/desktop-21.css"/>
</head>
<body>
<div class="desktop-21-Su8">
  <div class="auto-group-ntce-Q5G">
    <div class="auto-group-4ge6-XQn">
      <div class="auto-group-bez8-T3Y">
        <img class="image-11-NgJ" src="./assets/image-11-4SW.png"/>
        <div class="auto-group-jkh4-gwt">
          <div class="image-2-pHQ">
          </div>
          <p class="item--kRx">الدخول</p>
          <img class="lock-02-SZg" src="./assets/lock-02-zCr.png"/>
        </div>
        <p class="item--n7k">المساعدة والدعم</p>
        <p class="item--Fn2">الاسئلة المتكررة</p>
        <p class="item--YFL">
          <span class="item--YFL-sub-0">
          تعرف على
          <br/>
           
          </span>
          <span class="item--YFL-sub-1">حصيف</span>
        </p>
        <img class="image-10-o4n" src="./assets/image-10-hop.png"/>
      </div>
      <div class="line-6-7rA">
      </div>
      <p class="item--rYr">حصيف</p>
    </div>
    <p class="item--N1Q">الخدمات العدلية الالكترونية</p>
    <div class="auto-group-u3mu-E3c">
      <img class="chevron-left-vx2" src="./assets/chevron-left-wR4.png"/>
      <p class="item--rqg">الدخول</p>
    </div>
  </div>
  <div class="auto-group-nyy8-jea">
    <div class="frame-2-fHL">
      <p class="item--C2N">حصيف</p>
      <p class="item-920072390-79L">920072390</p>
    </div>
    <p class="item-1444-2020--cbt">جميع الحقوق محفوظة لحصيف ,المملكة العربية السعودية 1444 ه -2020 م</p>
    <div class="auto-group-vefu-2fc">
      <p class="item--xZG">مواقع التواصل الاجتماعي</p>
      <div class="auto-group-wyye-EWn">
        <div class="auto-group-m8ae-xhg">
          <img class="image-16-usp" src="./assets/image-16-HBY.png"/>
          <img class="image-15-3z2" src="./assets/image-15-8pS.png"/>
        </div>
        <img class="image-14-PY6" src="./assets/image-14-Mjp.png"/>
      </div>
    </div>
    <p class="item--dSS">
      <span class="item--dSS-sub-0">
      المساعدة والدعم
      <br/>
      
      <br/>
      
      </span>
      <span class="item--dSS-sub-1">
      الاسئلة الشائعة
      <br/>
       
      <br/>
      دليل المسخدم
      <br/>
      
      </span>
    </p>
  </div>
</div>
</body>

I tried using anima and other plugins in Figma but didn't work for me, function12.io helped me with extracting the code but it appears as a text without style

Michael M.
  • 10,486
  • 9
  • 18
  • 34
Bushra
  • 31
  • 2

2 Answers2

0

Try

krishnaacharyaa
  • 14,953
  • 4
  • 49
  • 88
0

In the Function12, once you export the code, you can check the styles over here.

enter image description here

Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
Ensemble50
  • 1