profile.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card {
    box-shadow: 0 0.8vh 0.9vw 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width:20%;
    border-radius: 0.5vw;
    background:#FFB775;
    padding: 1.5vw;
}

.card:hover {
    box-shadow: 0 0.8vw 1.6vw 0 rgba(0,0,0,0.2);
}

img {
    border-radius: 0.5vw 0.5vh 0 0;
}

.container {
    padding: 0.2vw 1.6vh;
}
input{
width:90%;
}
textarea{
width:90%;
}
h4{
  margin: 0.4vw;
}
</style>
</head>
<body>

<div class="card">
  <h2>My Profile</h2>
  <img src="https://www.w3schools.com/howto/img_avatar2.png" width="300" alt="Avatar">
  <div class="container">
    <h4 id="name"><b>Name:</b></h4>
      <div><input type="text"><div>
    <h4 id="interest">Interests:</h4>
    <textarea></textarea>
  </div>
</div>

</body>
</html>