Figma'da bir tane giriş paneli tasarladım ve bunu internette bulduğum plugin ile koda çevirmeye çalıştım. Bana verdiği kodlar aşağıda.
Bunu Visual Studio Code'da çalıştırdığımda yazılar, kutucuklar farklı yerlerde idi. Figma'daki tasarımımı hatasız koda çevirmemin yolu var mı?
Verdiği kod:
Yaptığım tasarım:
Bunu Visual Studio Code'da çalıştırdığımda yazılar, kutucuklar farklı yerlerde idi. Figma'daki tasarımımı hatasız koda çevirmemin yolu var mı?
Verdiği kod:
Kod:
<!DOCTYPE html><html><head><link href="https://fonts.googleapis.com/css?family=Jua&display=swap" rel="stylesheet" /></head><body><div class="v9_5"><div class="v9_6"><div class="v9_7"></div></div><div class="v9_8"><div class="v9_9"></div><div class="v9_10"></div><div class="v9_11"></div></div><div class="v9_12"><span class="v9_13">login</span><span class="v9_14">submit</span><span class="v9_15">e posta or username</span><span class="v9_16">password</span></div></div></body></html> <br/><br/> <style>* {
box-sizing: border-box;
}
body {
font-size: 14px;
}
.v9_5 {
width: 100%;
height: 920px;
background: rgba(0,0,0,0.3199999928474426);
padding: 210px 443px;
margin: 10px;
opacity: 1;
position: relative;
top: 0px;
left: 0px;
overflow: hidden;
}
.v9_6 {
width: 500px;
height: 500px;
background: url("../images/v9_6.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 210px;
left: 443px;
overflow: hidden;
}
.v9_7 {
width: 500px;
height: 500px;
background: rgba(255,255,255,0.3100000023841858);
opacity: 1;
position: relative;
top: 0px;
left: 0px;
border-top-left-radius: 28px;
border-top-right-radius: 28px;
border-bottom-left-radius: 28px;
border-bottom-right-radius: 28px;
overflow: hidden;
}
.v9_8 {
width: 297px;
height: 216px;
background: url("../images/v9_8.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 385px;
left: 545px;
overflow: hidden;
}
.v9_9 {
width: 138px;
height: 50px;
background: rgba(217,217,217,1);
opacity: 1;
position: absolute;
top: 166px;
left: 80px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
overflow: hidden;
}
.v9_10 {
width: 297px;
height: 50px;
background: rgba(217,217,217,1);
opacity: 1;
position: absolute;
top: 88px;
left: 0px;
border-top-left-radius: 13px;
border-top-right-radius: 13px;
border-bottom-left-radius: 13px;
border-bottom-right-radius: 13px;
overflow: hidden;
}
.v9_11 {
width: 297px;
height: 50px;
background: rgba(217,217,217,1);
opacity: 1;
position: relative;
top: 0px;
left: 0px;
border-top-left-radius: 13px;
border-top-right-radius: 13px;
border-bottom-left-radius: 13px;
border-bottom-right-radius: 13px;
overflow: hidden;
}
.v9_12 {
width: 297px;
height: 347px;
background: url("../images/v9_12.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 254px;
left: 545px;
overflow: hidden;
}
.v9_13 {
width: 150px;
color: rgba(255,255,255,1);
position: absolute;
top: 0px;
left: 74px;
font-family: Jua;
font-weight: Regular;
font-size: 64px;
opacity: 1;
text-align: center;
}
.v9_14 {
width: 138px;
color: rgba(110,110,110,1);
position: absolute;
top: 298px;
left: 80px;
font-family: Jua;
font-weight: Regular;
font-size: 21px;
opacity: 1;
text-align: center;
}
.v9_15 {
width: 297px;
color: rgba(110,110,110,1);
position: absolute;
top: 131px;
left: 0px;
font-family: Jua;
font-weight: Regular;
font-size: 21px;
opacity: 1;
text-align: center;
}
.v9_16 {
width: 297px;
color: rgba(110,110,110,1);
position: absolute;
top: 219px;
left: 0px;
font-family: Jua;
font-weight: Regular;
font-size: 21px;
opacity: 1;
text-align: center;
}
</style>Yaptığım tasarım: