convert figma to html and css - html

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


Try
Builder.io - Figma to HTML, React, and more
TeleportHQ - Figma to Code - Export HTML, CSS, React & Vue


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

Related

Owl Carousel only shows one item and buttons

I'm trying to build a carousel with Owl Carousel, but it doesn't show anything (only circle buttons and one item)
I can't figure it out that what's wrong with the code and why can't I use it properly.
Here is the code:
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"
/>
</head>
<body>
<div class="my-div">
<div class="test owl-theme owl-carousel">
<div class="test-item"
><h4>test</h4>
<p> this is a test </p>
<div>
<img src="https://cv.octascript.com/images/Tooska.jpg" alt="" />
</div>
</div>
<div class="test-item"
><h4>test</h4>
<p> this is a test </p>
<div>
<img src="https://cv.octascript.com/images/Bilit.jpg" alt="" />
</div>
</div>
<div class="test-item"
><h4>test</h4>
<p> this is a test </p>
<div>
<img
src="https://cv.octascript.com/images/ElhamZareei.jpg"
alt=""
/>
</div>
</div>
<div class="test-item"
><h4>test</h4>
<p> this is a test </p>
<div>
<img src="https://cv.octascript.com/images/Tooska.jpg" alt="" />
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<script>
$(".test").owlCarousel({
loop: true,
margin: 20,
responsive: {
0: {
items: 1,
},
600: {
items: 2,
},
1000: {
items: 3,
},
},
});
</script>
</body>
</html>
I tried videos and documents and toturials but couldn't solve it.
And of course I used both CDN and local files but the result was still the same.

end div tag attached to wrong head div tag

The <div id="header"> should end here </div> <!-- End of Header Div -->, but instead it ends here</div> <!-- End of notBar Div-->.
I have the places where my divs are supposed to end in comments. The only div that ends where it is supposed to this div <div id="mySidebar">.
Why are the divs ending at the wrong </div>
tag?
(I am sorry if this is formatted horribly. I don't use this very much, so my formatting and questions are probably horrible.)
<!DOCTYPE html>
<html>
<head>
<title>Caleb Did This</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="Caleb.css">
</head>
<body>
<div id="header">
<div id="mySidebar">
Close <b>X</b>
About
Home
Websites
</div> <!-- End of mySidebar Div -->
<div id="notBar">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACZSURBVGhD7djBCcJAGETh1QpiKzakxViDYCtpwSKUNKIzh9wW/pziuLwP3jFhQgzCNgAAMLijuqq7eoTlTd7mjaWb+oTnjaWn6l2clDeWhnkjB5X8jVyUNwIAsk3qFJY3bXZWi+r9oyb0Vt5YmlXvBkl5Y2mYB/Fre6neDRLytk0/rdXff+wAgJ/ggG7HOKBLiwM6AACQr7UvP+370u9envwAAAAASUVORK5CYII=" alt="Menu Bar" style="width: 35px; height: 40px;" id="menu" onclick="showMenu()">
<center class="center">Caleb Did This</center>
</div> <!-- End of Header Div -->
<img src="https://cdn.pixabay.com/photo/2016/10/25/12/28/iceland-1768744_960_720.jpg" id="Ice">
<footer>
<p class="pmargin"><span class="gray">Created and designed by</span>
<span class="names">Caleb</span></p>
<p><span class="gray">Lots of help from my uncle</span>
<span class="names">Jonathan</span></p>
<p class="icon"><span class="gray">All Icons were made by</span></p>
<span class="names">Icons8</span>
</footer>
</div> <!-- End of notBar Div-->
<script type="text/javascript" src="Caleb.js">
</script>
</body>
</html>

It appears that your "notBar" div is being closed after your footer instead of in your "header" div. Try this:
<div id="header">
<div id="mySidebar">
Close <b>X</b>
About
Home
Websites
</div> <!-- End of mySidebar Div -->
<div id="notBar">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACZSURBVGhD7djBCcJAGETh1QpiKzakxViDYCtpwSKUNKIzh9wW/pziuLwP3jFhQgzCNgAAMLijuqq7eoTlTd7mjaWb+oTnjaWn6l2clDeWhnkjB5X8jVyUNwIAsk3qFJY3bXZWi+r9oyb0Vt5YmlXvBkl5Y2mYB/Fre6neDRLytk0/rdXff+wAgJ/ggG7HOKBLiwM6AACQr7UvP+370u9envwAAAAASUVORK5CYII=" alt="Menu Bar" style="width: 35px; height: 40px;" id="menu" onclick="showMenu()">
<center class="center">Caleb Did This</center>
</div> <!-- End of notBar Div-->
</div> <!-- End of Header Div -->
<img src="https://cdn.pixabay.com/photo/2016/10/25/12/28/iceland-1768744_960_720.jpg" id="Ice">
<footer>
<p class="pmargin"><span class="gray">Created and designed by</span> <span class="names">Caleb</span></p>
<p><span class="gray">Lots of help from my uncle</span> <span class="names">Jonathan</span></p>
<p class="icon"><span class="gray">All Icons were made by</span></p> <span class="names">Icons8</span>
</footer>

this is the structure of your document:
<!DOCTYPE html>
<html>
<head>
<title>Caleb Did This</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="Caleb.css">
</head>
<body>
<div id="header">
<div id="mySidebar">
Close <b>X</b>
About
Home
Websites
</div> <!-- End of mySidebar Div -->
<div id="notBar">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACZSURBVGhD7djBCcJAGETh1QpiKzakxViDYCtpwSKUNKIzh9wW/pziuLwP3jFhQgzCNgAAMLijuqq7eoTlTd7mjaWb+oTnjaWn6l2clDeWhnkjB5X8jVyUNwIAsk3qFJY3bXZWi+r9oyb0Vt5YmlXvBkl5Y2mYB/Fre6neDRLytk0/rdXff+wAgJ/ggG7HOKBLiwM6AACQr7UvP+370u9envwAAAAASUVORK5CYII=" alt="Menu Bar" style="width: 35px; height: 40px;" id="menu" onclick="showMenu()">
<center class="center">Caleb Did This</center>
</div> <!-- End of NotBar -->
<img src="https://cdn.pixabay.com/photo/2016/10/25/12/28/iceland-1768744_960_720.jpg" id="Ice">
<footer>
<p class="pmargin"><span class="gray">Created and designed by</span> <span class="names">Caleb</span></p>
<p><span class="gray">Lots of help from my uncle</span> <span class="names">Jonathan</span></p>
<p class="icon"><span class="gray">All Icons were made by</span></p> <span class="names">Icons8</span>
</footer>
</div> <!-- End of header Div-->
<script type="text/javascript" src="Caleb.js">
</script>
</body>
</html>
I think you want something like this:
<!DOCTYPE html>
<html>
<head>
<title>Caleb Did This</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="Caleb.css">
</head>
<body>
<div id="header">
<div id="mySidebar">
Close <b>X</b>
About
Home
Websites
</div>
<div id="notBar">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACZSURBVGhD7djBCcJAGETh1QpiKzakxViDYCtpwSKUNKIzh9wW/pziuLwP3jFhQgzCNgAAMLijuqq7eoTlTd7mjaWb+oTnjaWn6l2clDeWhnkjB5X8jVyUNwIAsk3qFJY3bXZWi+r9oyb0Vt5YmlXvBkl5Y2mYB/Fre6neDRLytk0/rdXff+wAgJ/ggG7HOKBLiwM6AACQr7UvP+370u9envwAAAAASUVORK5CYII=" alt="Menu Bar" style="width: 35px; height: 40px;" id="menu" onclick="showMenu()">
<center class="center">Caleb Did This</center>
</div>
</div>
<img src="https://cdn.pixabay.com/photo/2016/10/25/12/28/iceland-1768744_960_720.jpg" id="Ice">
<footer>
<p class="pmargin"><span class="gray">Created and designed by</span> <span class="names">Caleb</span></p>
<p><span class="gray">Lots of help from my uncle</span> <span class="names">Jonathan</span></p>
<p class="icon"><span class="gray">All Icons were made by</span></p> <span class="names">Icons8</span>
</footer>
<script type="text/javascript" src="Caleb.js">
</script>
</body>
</html>

I have taken your code and replaced some divs with HTML5 markup that is going to show where things have gone wrong (see my comments in the HTML for details):
<!DOCTYPE html>
<html>
<head>
<title>Caleb Did This</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="Caleb.css">
</head>
<body>
<header> <!-- div class="header" replaced with HTML5 element -->
<aside> <!-- div class="mySidebar" replaced with aside element -->
<!-- WARNING: Header element still open! -->
Close <b>X</b>
About
Home
Websites
</aside> <!-- aside element closed -->
<main> <!-- div class="notBar" replaced with main element -->
<!-- WARNING: Header element still open! -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACZSURBVGhD7djBCcJAGETh1QpiKzakxViDYCtpwSKUNKIzh9wW/pziuLwP3jFhQgzCNgAAMLijuqq7eoTlTd7mjaWb+oTnjaWn6l2clDeWhnkjB5X8jVyUNwIAsk3qFJY3bXZWi+r9oyb0Vt5YmlXvBkl5Y2mYB/Fre6neDRLytk0/rdXff+wAgJ/ggG7HOKBLiwM6AACQr7UvP+370u9envwAAAAASUVORK5CYII=" alt="Menu Bar" style="width: 35px; height: 40px;" id="menu" onclick="showMenu()">
<center class="center">Caleb Did This</center>
</header> <!-- Attempt to close page header with main element open... Oops! -->
<img src="https://cdn.pixabay.com/photo/2016/10/25/12/28/iceland-1768744_960_720.jpg" id="Ice">
<footer>
<p class="pmargin"><span class="gray">Created and designed by</span>
<span class="names">Caleb</span></p>
<p><span class="gray">Lots of help from my uncle</span>
<span class="names">Jonathan</span></p>
<p class="icon"><span class="gray">All Icons were made by</span></p>
<span class="names">Icons8</span>
</footer>
</main> <!-- Attempt to close main element although others have been closed prior to this - Oops...! -->
<script type="text/javascript" src="Caleb.js">
</script>
</body>
</html>
You have actually misplaced the various divs here (especially the closing elements). Replacing them by native HTML5 elements should reveal what's going on - see my comments for problems that are occurring.
You need to clean that up and properly place those elements (you cannot nest an aside or main section in a header element). That requires to rotate various section of your document to their correct places.

nu validator is ok with unclosed tags

Why this code is valid with https://validator.w3.org/nu/#textarea ?
No </html> and </p> at the end of the code.
Is it new ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>xxxx</title>
</head>
<body>
<div class="xxx">xxxxxxxxx</div><br />
<div class="xx">xxxx</div>
<div class="xx">xxxxx</div>
<div class="xx">xxx</div><br />
<div class="xx">xxxxxx</div>
<div class="xx">xxxx ?</div>
<div class="xx">L'xxx</div> <br />
<div class="xx">xxxxxx</div><br />
<div class="xxx">
<img src="fichiers/images/img.png" alt="xxxx" class="xxx">
</div>
<span class="xxxx">xxxx xxxxx</span>
<p>
<img src="xxx/x/xxx.jpg" alt="xxx" class="xxxxx" />
</p>
<div class="xxxx">
<img src="xxx/x/xxxxx.png" alt="xxxx xx" class="xx">
</div>
<p>
</body>

No, it is not new. End tags for those elements have been optional since the first version of HTML. The nu validator has got that part of the spec right for as long as I have been using it (as has the previous, DTD based, validator).

Show footer at the bottom of the page always [duplicate]

This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 6 years ago.
I'm developing an ASP.NET MVC 5 app with Visual Studio 2015, C# and .NET Framework 4.6.1.
I have this _Layout.cshtml page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My product</title>
#Styles.Render("~/Content/css")
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link href="~/css/common.css" rel="stylesheet" type="text/css" media="all" />
#RenderSection("Styles", required: false)
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="header_bg">
<div class="wrap">
<div class="header">
<div class="logo">
<img src="~/images/logo.png" alt="" /><br />
<span>Versión 2.0</span>
</div>
<div class="nav">
¡Hola, #User.Identity.Name!
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<div class="container body-content">
#RenderSection("Body")
<hr />
<footer>
<p style="font-size:20px">© #DateTime.Now.Year - My Company</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
All my pages won't have vertical scrollbar and I want to show <footer> always at the bottom of the page.
How can I do it?

footer{
position:fixed;
bottom:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My product</title>
#Styles.Render("~/Content/css")
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link href="~/css/common.css" rel="stylesheet" type="text/css" media="all" />
#RenderSection("Styles", required: false)
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="header_bg">
<div class="wrap">
<div class="header">
<div class="logo">
<img src="~/images/logo.png" alt="" /><br />
<span>Versión 2.0</span>
</div>
<div class="nav">
¡Hola, #User.Identity.Name!
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<div class="container body-content">
#RenderSection("Body")
<hr />
<footer>
<p style="font-size:20px">© #DateTime.Now.Year - My Company</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>

A footer that stays at the bottom of the page or 'sticky footer' can be achieved with some css. You will have to move the footer outside of the .container body-content.
Here is an example - take a look here https://css-tricks.com/snippets/css/sticky-footer/

HTML5 App should open website. How I can set the background color?

I wrote a very simple HTML app. The app opens a little loading animation and redirects to a website. Im tested this on my windows phone. The background color should be black. It is black at the start, but when I click on something and the IE loads the page the background is white...
How I can set the background color of the IE loading?
My Html app code :
<!DOCTYPE HTML>
<html>
<head>
<title>Die Witze App</title>
<meta http-equiv="refresh" content="1; url=http://witze.reddoit.de/" />
<link href="stylesheet.css" type="text/css" rel="stylesheet">
<meta name="viewport" content="width=device-width, intial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body style="background-color:black">
<!--<p id="ladetext">Die Witze App<p>-->
<div class=ladeanimation>
<div class="windows8">
<div class="wBall" id="wBall_1">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_2">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_3">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_4">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_5">
<div class="wInnerBall">
</div>
</div>
</div>
</div>
</body>
</html>

Take a look at the CSS file, make sure you don't have any background properties in any class or ID selector.
If you dont have any then try adding background-color: #000000; to the ladeanimation class.