Как умело использовать сетку или Flexbox, чтобы стилизовать эту форму макета ⇐ Html

[Anonymous]

Код: Выделить всё

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background: #f1f6f5;
}

.context {
font-family: "Sofia Sans", sans-serif;
width: 370px;
position: relative;
right: -120px;
bottom: -150px;
/* line-height: 30px; */
}

.context img {
width: 70px;
margin: 10px;
}

.context h1 {
font-size: 30px;
font-weight: 700;
margin: 10px;
}

.context p {
color: #737373;
font-size: 12px;
font-weight: 400;
line-height: 15px;
}

Вот что я пытаюсь достичь
P>https://i.sstatic.net/9ngnlyjk.png>
/>

Код: Выделить всё

.container {
background: #ffffff;
width: 500px;
height: auto;
position: absolute;
top: 30px;
right: 80px;
border-radius: 6px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);< /code>



First Name



Last Name



Gender


Select Here
Male
Female


Date of Birth



Weight (KG)



Height (CM)



Activity Level


Select Here
Beginner
Intermidiate
Professtional


Password


Resigter
By clicking Register, you agree to our [url=#]Terms of Use[/url]and our [url=#]Privacy Policy[/url]

Это планировка дизайна
http://figma.com/design/urkphphkkwredii ... gbwi0cpw-0^>

Подробнее здесь: https://stackoverflow.com/questions/795 ... ayout-form