To enhance the layout of your content, it is recommended to include two containers that wrap your image and other elements separately. These containers should have the parent element set to display: flex and flex-direction: row, with some added gap for spacing. Additionally, removing unnecessary a tags wrapping block elements can prevent unexpected behavior and ensure semantic correctness. For a better understanding, please refer to the full-page snippet provided below. Keep in mind that adjustments may be needed for smaller screens.
/* Updated Project Section Styles */
.project-item {
border-radius: 15px;
transition: .5s ease;
padding: 5%;
height: auto;
display: flex;
flex-direction: row; /* Updated to display items in a row */
gap: 20px;
align-items: flex-start;
}
.project-item:hover {
background: #6b6b6b3f;
}
.project-item .project-tag {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 2px;
}
.project-item .project-tag span {
background: #fff;
color: #000;
border-radius: 25px;
padding: 5px;
white-space: nowrap;
}
.wrapper a {
text-decoration: none;
color: #fff;
}
.grid-project .project-item h3 {
font-size: 24px;
text-align: left;
margin-bottom: 5px; /* Adjusted margin for spacing */
}
.grid-project .project-item p {
font-size: 16px;
line-height: 1.5;
}
.grid-project .project-item .project-logo {
height: 70px;
width: 70px;
border-radius: 15px;
}
<div class="wrapper">
<a href="https://dsc.gg/accumen" target="_blank">Click me</a>
<div class="project-item">
<div class="left-side">
<img src="https://picsum.photos/50/50" class="project-logo">
</div>
<div class="right-side">
<h3>Accumen</h3>
<h4 class="project-info">
<a href="https://github.com/infinotiver/accumen">View Github Repository </a>
</h4>
<div class="project-tag">
<span>Python</span>
<span>Discord Bot</span>
<span>Education based</span>
<span> AI </span>
</div>
</div>
</div>
</div>