I'm most proud that I wrote the root names and data first, that way when writing my css I knew I could just use a var to add a defined root
What challenges did you encounter, and how did you overcome them?/** Colors **/ --Slate-900: rgb(31, 49, 79); --Slate-500: rgb(104, 119, 141); --Slate-300: rgb(213, 225, 239); --White: rgb(255, 255, 255); /** Spacing **/ --spacing-500: 40px; --spacing-300: 24px; --spacing-200: 16px; /** Font Preset 1 **/ --text-preset-1-font-family: 'Outfit', sans-serif; --text-preset-1-font-size: 22px; --text-preset-1-line-height: 120%; --text-preset-1-letter-spacing: 0px; --text-preset-1-font-weight: bold; /** Font Preset 2 **/ --text-preset-2-font-family: 'Outfit', sans-serif; --text-preset-2-font-size: 15px; --text-preset-2-line-height: 140%; --text-preset-2-letter-spacing: 0.2px; --text-preset-2-font-weight: normal; /** Content Start **/ /** Content Main End **/ .text-preset-1 { font-family: var(--text-preset-1-font-family); font-size: var(--text-preset-1-font-size); line-height: var(--text-preset-1-line-height); letter-spacing: var(--text-preset-1-letter-spacing); font-weight: var(--text-preset-1-font-weight); color: var(--Slate-900); } .text-preset-2 { font-family: var(--text-preset-2-font-family); font-size: var(--text-preset-2-font-size); line-height: var(--text-preset-2-line-height); letter-spacing: var(--text-preset-2-letter-spacing); font-weight: var(--text-preset-2-font-weight); color: var(--Slate-500); }
My main challenge was adjusting size boxes correctly with flex, margin, and padding. Along with getting colors/background-colors correct, knowing body background color was its color is better to know than just to see where I went wrong elsewhere
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: var(--Slate-300);
}
.frame-main-container {
display: flex;
flex-direction: column;
align-items: center;
width: 320px;
height: 499px;
background-color: var(--White);
padding: 16px 16px 40px 16px;
border-radius: 20px;
overflow: hidden;
gap: 24px;
}
p {
text-align: center;
width: 100%;
display: flex;
flex-direction: column;
gap: 20px;
padding: 0 16px;
}
.image-qr-code {
width: 100%;
height: 100%;
margin: 0%;
padding: 0%;
border-radius: 10px;
object-fit: contain;
}
What specific areas of your project would you like help with?
Specifically, not really, but any tips and tricks for both efficiency and learning for alignment/sizing/flexing would be greatly appreciated.