I recently started using Figma to design webpages. After I finished designing a page, I exported all the SVG files and added them to my HTML document. I went to copy the CSS styling from Figma, but everything was out of size resulting in everything being out of place.
I tried redesigning it with a bigger height/width but the same issue occurred.
Do I create the Figma canvas the size of my monitor resolution?
codepen: https://codepen.io/HasanTheSyrian_/pen/BaKLrrO
Figma Library: https://www.figma.com/file/DXbkUoTm9W1uCJpwipeVCQ/MyFormWebsite?node-id=16%3A0
(the upper panel is the redesign attempted at trying to make the SVG elements the size of the browser the lower panels are the first panels that I thought fit)
Couldn't post the rest code here because it exceeded the limit of 3000 characters thanks to one of the SVG's 1000+ character count.
index.css
body {
font-family: 'Alata', sans-serif;
background-color: #E5E5E5;
}
header {
display: flex;
position: absolute;
width: 100%;
height: 63px;
left: 0px;
top: 0px;
background: #009ABC;
box-shadow: 0px 4px 22px 4px rgba(0, 0, 0, 0.32);
}
.logo {
width: 347px;
height: 195px;
left: -136px;
top: -66px;
position: absolute;
}
.upperTextContainer {
position: absolute;
width: 563px;
height: 86px;
left: 74px;
top: 261px;
font-size: 62px;
outline: none;
}
.lowerTextContainer {
position: absolute;
width: 780px;
height: 82px;
left: 74px;
top: 359px;
margin: 24px 0px 24px 0px;
font-family: Alata;
font-style: normal;
font-weight: normal;
font-size: 30px;
line-height: 41px;
color: #000000;
}
.coderIllustration {
position: absolute;
width: 594px;
height: 451px;
left: 170px;
top: 509px;
}
.wave1 {
position: absolute;
width: 2191px;
height: 854px;
left: -34px;
top: 106px;
}
.wave2 {
position: absolute;
width: 2191px;
height: 854px;
left: -34px;
top: 167px;
}
.wave3 {
position: absolute;
width: 2191px;
height: 854px;
left: -34px;
top: 247px;
}
