In order to convert adobe xd into HTML first, we need to export the shape in
an image OR SVG file format for this I will copy the shape SVG code and paste
it into a file.
Watch Video Tutorial
When I designed this in adobe xd, The shapes I draw using a pen tool were
outside of the artboard so when I will save the shape by right click on it
will save exactly the same. look like this
the shapes are not as good as for use in our template
SVG Result in Browser before Masking
to resolve this issue to make a mask layer by creating another shape like
this.
Now select both shapes and make it to mask by right click on the shape and
select the option mask with shape OR by using shortcut press
Shift+Ctrl+M
Create Mask to trim the outside part of the shape from Artboard
SVG Result in Browser after Masking
Now copy the SVG code of each shape and save it in individual files with
a .svg extension
like this shape1.svg, shape2.svg, shape3.svg
- shape1.svg file should have SVG code of the shape showing above.
- shape2.svg file should have SVG code of the circle shape
- shape3.svg file should have SVG code of the illustration shape
Convert Adobe XD to HTML
Now this is the step where you can easily create this UI design into a web
template, Just create a file named "index.html" and copy-paste the
code into it
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adode XD to HTML Convert</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contacts</a></li>
</ul>
</nav>
<div class="s-text">
<p class="big">S</p>
<div class="small">
<p>ocial</p>
<p>olution</p>
</div>
</div>
<div class="text">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
</div>
<div class="button">
<a href="">Connect</a>
</div>
</div>
</body>
</html>
After putting the above code and create an HTML file, Now create a file
named "style.css" for styling and copy-paste the code into
it
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper{
width: 100vw;
height: 100vh;
background: url(shape3.svg) no-repeat, url(shape1.svg) no-repeat, url(shape2.svg) no-repeat;
background-size: 50%, contain, 35%;
background-position: right bottom, right, 65% bottom;
}
nav{
width: 100%;
padding: 50px;
}
nav ul{
list-style: none;
}
nav ul li{
display: inline-block;
}
nav ul li a{
font-family: Segoe UI;
font-weight: bold;
font-size: 16px;
color: #707070;
text-decoration: none;
padding: 8px 16px;
}
nav ul li a:hover{
text-decoration: underline;
}
.s-text{
width: 50%;
height: 45%;
display: flex;
align-items: center;
padding: 0 60px;
}
.s-text .big{
font-family: Mistral;
font-size: 300px;
color: #FFC727;
}
.s-text .small p{
font-family: Mistral;
font-size: 150px;
color: #455A64;
line-height: 0.7;
letter-spacing: 5px;
position: relative;
top: -15px;
left: 15px;
}
.text, .button{
width: 50%;
padding: 10px 60px;
margin-bottom: 20px;
}
.button a{
font-family: Segoe UI;
font-weight: bold;
font-size: 18px;
color: #ffffff;
text-decoration: none;
padding: 10px 60px;
background: linear-gradient(to bottom, #263238, #6E767A);
border-radius: 44px;
position: relative;
}
.button a:before{
content: "";
width: 100%;
height: 5px;
position: absolute;
left: 0;
bottom: -15px;
background: rgba(0,0,0,0.3);
filter: blur(5px);
border-radius: 50%;
}
.button a:hover{
background: linear-gradient(to top, #263238, #6E767A);
}That's all now you have your own beautiful web template.
For How to design it see the below post
How to Design UI Social Solution Card in Adobe XD
0 Comments