I've been coding for awhile now and I was wondering what I could do to be more efficient when it comes to coding or any advice of what I'm doing incorrect. I think the things I can probably point out right off the bat is my misuse of width on majority of the tags. I also remember reading something that I should be using input instead of button but am not exactly sure. Thanks for taking your time reviewing my code! Photo of my coding
<!DOCTYPE html>
<html>
<head>
<style>
.list-of-friends {
display: block;
border: solid;
width: 300px;
padding-left:30px;
margin-left: 30px;
}
.profile-picture {
display: inline-block;
}
.profile-picture, .user-name, follow-button {
vertical-align: middle;
}
p, button {
font-family: Arial;
}
.oliver-profile, .mimi-profile, .rex-profile {
width: 300px;
height: 100px;
margin-bottom: 20px;
}
.photo {
border-radius: 50%;
width: 60px;
height: 60px;
}
.info {
display: inline-block;
width: 225px;
}
.user-name {
display: inline-block;
font-size: 14px;
line-height: 8px;
width: 70px;
}
.name, .follow {
font-weight: bold;
font-size: 15px;
}
.description, .rating {
color: rgb(96, 96, 96);
}
.follow-button {
display: inline-block;
margin-left: 60px;
}
button {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 7px;
padding-right: 7px;
background-color: rgb(2, 158, 255);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: 0.3s;
}
button:hover {
opacity: 0.7;
}
button:active {
opacity: 0.5;
}
</style>
</head>
<body>
<div class="list-of-friends">
<div class="oliver-profile">
<div class="profile-picture">
<img class="photo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6DE-7qYRuIujluCF1GJzR5V-bGATSDTqtzw&usqp=CAU">
</div>
<div class="info">
<div class="user-name">
<p class="name">Oliver</p>
<p class="description">The Cat</p>
<p class="rating">Popular</p>
</div>
<div class="follow-button">
<button class="follow">Follow</button>
</div>
</div>
</div>
<div class="mimi-profile">
<div class="profile-picture">
<img class="photo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcr6E-AL2FTIOZmGKYOcs3sUDHA_CPqVhr3w&usqp=CAU">
</div>
<div class="info">
<div class="user-name">
<p class="name">Mimi</p>
<p class="description">Sleepy Cat</p>
<p class="rating">Popular</p>
</div>
<div class="follow-button">
<button class="follow">Follow</button>
</div>
</div>
</div>
<div class="rex-profile">
<div class="profile-picture">
<img class="photo" src="https://d2zp5xs5cp8zlg.cloudfront.net/image-53920-800.jpg">
</div>
<div class="info">
<div class="user-name">
<p class="name">Rex</p>
<p class="description">Happy Cat</p>
<p class="rating">Popular</p>
</div>
<div class="follow-button">
<button class="follow">Follow</button>
</div>
</div>
</div>
</div>
</body>
</html>```