Превратить HTML в эстетический CSS [закрыто] ⇐ Html

[Anonymous]

У меня есть этот текущий HTML -код для страницы профиля с информацией, и я хочу спроектировать его, чтобы выглядеть как это (с моей информацией). Я вообще не хочу прикасаться к навигационной панели. Как я могу придумать это, чтобы выглядеть так. Я не хочу, чтобы страница профиля выглядела как какая -то форма, но что -то аккуратное, современное и профессиональное, как это. (Для длинного баннера любое образцо изображения может быть использовано на данный момент, я заменю его позже). С помощью информации, которая у меня есть сейчас на этой странице, как я могу придумать все, как такая макет, как этот? //i.sstatic.net/mynyczpb.png "/>
Вот мой код:






| MedConnect
[*]


@import url('https://fonts.googleapis.com/css2?famil ... splay=swap');

body {
background-color: #f8d4a4;
font-family: Lora;
}

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

a {
text-decoration: none;
}

li {
list-style: none;
}

.navbar {
display: flex;
align-items: center;
justify-content: space-around;
padding: 20px;
margin-top: 50px;
}

.nav-links h3 {
color: #704a1b;
}

.head {
font-size: 32px;
color: #614124;
margin-top: -20px;
margin-left: 50px;
cursor: pointer;
}

.footer-head {
font-size: 40px;
color: white;
}

.menu {
display: flex;
gap: 1em;
font-size: 18px;
margin-left: 280px;
}

.menu li {
padding: 5px 12px;
cursor: pointer;
}

.profile-btn {
border-radius: 5px;
box-shadow: 0 1px 1px black;
padding: 10px 10px;
margin-top: -10px;
background-color: #60a159;
}

.profile-btn:active {
box-shadow: none;
}

@media screen and (max-width: 1201px) {
.navbar {
flex-direction: column;
align-items: center;
padding: 10px;
}

.navbar h1 {
margin-top: 10px;
font-size: 30px;
}

.menu {
flex-wrap: wrap;
justify-content: center;
margin-top: 30px;
margin-left: 10px;
}

.menu li {
padding: 10px 20px;
}
}

.profile-img-container {
width: 200px; /* Adjust as per your other files */
height: 200px;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background-color: #f3f3f3; /* Placeholder background */
}

.profile-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
border: 2px solid black;
}







MedConnect

• Consult
• Resources
• About
• Records
• Your Profile

[img]

Подробнее здесь: https://stackoverflow.com/questions/794 ... thetic-css