Could you create the following webpage using html$/$css

Provided code:

:root $\{$

$--$element$-$spacing: $14$px;

$\}$

body $\{$

background$-$color: var$(--$color$-$neutral$-050)$;

font$-$family: 'Roboto', sans$-$serif;

font$-$weight: $400$;

font$-$size: $16$px;

display: grid;

grid$-$template$-$columns: $1$fr $1$fr;

$\}$

section.login $\{$

color: var$(--$color$-$primary$-1-800)$;

width: calc$($var$(--$element$-$spacing$)*30)$;

margin: $0$ auto;

$\}$

section h$1\{$

margin$-$top: calc$($var$(--$element$-$spacing$)*3)$;

font$-$weight: $500$;

text$-$align: center;

$\}$

:root $\{$

$/*$ Primaries: Blue, Vivid Yellow $*/$

$--$color$-$primary$-1-050$: #DCEEFB;

$--$color$-$primary$-1-100$: #B$6$E$0$FE;

$--$color$-$primary$-1-200$: #$84$C$5$F$4$;

$--$color$-$primary$-1-300$: #$62$B$0$E$8$;

$--$color$-$primary$-1-400$: #$4098$D$7$;

$--$color$-$primary$-1-500$: #$2680$C$2$;

$--$color$-$primary$-1-600$: #$186$FAF;

$--$color$-$primary$-1-700$: #$0$F$609$B;

$--$color$-$primary$-1-800$: #$0$A$558$C;

$--$color$-$primary$-1-900$: #$003$E$6$B;

$--$color$-$primary$-2-050$: #FFFBEA;

$--$color$-$primary$-2-100$: #FFF$3$C$4$;

$--$color$-$primary$-2-200$: #FCE$588$;

$--$color$-$primary$-2-300$: #FADB$5$F;

$--$color$-$primary$-2-400$: #F$7$C$948$;

$--$color$-$primary$-2-500$: #F$0$B$429$;

$--$color$-$primary$-2-600$: #DE$911$D;

$--$color$-$primary$-2-700$: #CB$6$E$17$;

$--$color$-$primary$-2-800$: #B$44$D$12$;

$--$color$-$primary$-2-900$: #$8$D$2$B$0$B;

$/*$ neutral: grey $*/$

$--$color$-$neutral$-050$: #F$0$F$4$F$8$;

$--$color$-$neutral$-100$: #D$9$E$2$EC;

$--$color$-$neutral$-200$: #BCCCDC;

$--$color$-$neutral$-300$: #$9$FB$3$C$8$;

$--$color$-$neutral$-400$: #$829$AB$1$;

$--$color$-$neutral$-500$: #$627$D$98$;

$--$color$-$neutral$-600$: #$486581$;

$--$color$-$neutral$-700$: #$334$E$68$;

$--$color$-$neutral$-800$: #$243$B$53$;

$--$color$-$neutral$-900$: #$102$A$43$;

$/*$ Supporting: Cyan, Red, $*/$

$--$color$-$support$-1-050$: #E$0$FCFF;

$--$color$-$support$-1-100$: #BEF$8$FD;

$--$color$-$support$-1-200$: #$87$EAF$2$;

$--$color$-$support$-1-300$: #$54$D$1$DB;

$--$color$-$support$-1-400$: #$38$BEC$9$;

$--$color$-$support$-1-500$: #$2$CB$1$BC;

$--$color$-$support$-1-600$: #$14919$B;

$--$color$-$support$-1-700$: #$0$E$7$C$86$;

$--$color$-$support$-1-800$: #$0$A$6$C$74$;

$--$color$-$support$-1-900$: #$044$E$54$;

$--$color$-$support$-2-050$: #FFEEEE;

$--$color$-$support$-2-100$: #FACDCD;

$--$color$-$support$-2-200$: #F$29$B$9$B;

$--$color$-$support$-2-300$: #E$66$A$6$A;

$--$color$-$support$-2-400$: #D$64545$;

$--$color$-$support$-2-500$: #BA$2525$;

$--$color$-$support$-2-600$: #A$61$B$1$B;

$--$color$-$support$-2-700$: #$911111$;

$--$color$-$support$-2-800$: #$780$A$0$A;

$--$color$-$support$-2-900$: #$610404$;

$\}$

$/*$ add your styles here $*/$