My CSS is bad, I need help to make it look like the pic but i dont know how

Here is my code :

$*\{$

margin: $0$;

padding: $0$;

font$-$family: 'Poppins', sans$-$serif; bangalore

$270$

Bengaluru

e search icon it

$=30\%$

$5\mathrm{.}66k\frac{m}{h}$

Harmalty

windspaca

$58$: Enter City Name

$22C$

New York

$50\%$

$50\%$

Humidity

Wind Speed

box$-$sizing: border$-$box;

$\}$

body $\{$

background$-$color: #eec$0$c$8$;

$\}$

$.$card $\{$

width: $90\%$;

max$-$width: $470$px;

background: linear$-$gradient$(135$deg, #e$66465,$ #$5$b$548$a$)$;

color: #fff;

margin: $100$px auto $0$;

border$-$radius: $20$px;

padding: $40$px $35$px;

text$-$align: center;

$\}$

$.$search$\{$

width: $100\%$;

display: flex;

align$-$items: center;

justify$-$content: space$-$between;

$\}$

$.$search input $\{$

padding: $10$px $25$px;

outline: $0$;

background: #ebfffc;

color: #$555$;

height: $60$px;

flex: $1$;

margin$-$right: $16$px;

border: $0$;

border$-$radius: $30$px;

font$-$size: $18$px;

$\}$

$.$search button $\{$

background: #ebfffc;

border: $0$;

outline: $0$;

border$-$radius: $50\%$;

width: $60$px;

height: $60$px;

cursor: pointer;

$\}$

$.$search button img $\{$

width: $16$px;

$\}$

$.$weather$-$icon$\{$

width: $170$px;

margin$-$top: $30$px;

$\}$

$.$weather h$1\{$

font$-$size: $45$px;

font$-$weight: $500$;

$\}$

$.$weather h$2\{$

font$-$size: $45$px;

font$-$weight: $400$px;

margin$-$top: $-10$px;

$\}$

$.$details$\{$

display: flex;

align$-$items: center;

justify$-$content: space$-$between;

padding: $020$px;

margin$-$top: $50$px;

$\}$

$.$col$\{$

display: flex;

align$-$items: center;

text$-$align: left;

$\}$

$.$col img$\{$

width: $40$px;

margin$-$right: $10$px;

$\}$

$.$humidity $.$wind $\{$

font$-$size: $28$px;

margin$-$top: $-6$px;

$\}$

$.$weather$\{$

display: none;

$\}$

$.$error$\{$

text$-$align: left;

margin$-$left: $10$px;

font$-$size: $14$px;

margin$-$top: $10$px;

display: none;

$\}$