Creating card with html and css

Hii Everyone,

Today we are going to code the card to showcase our project on our portfolio, Let's start.

Html code: -

<div class="project-card card-small">
     <div class="thumbnail">
         <img src="project1-thumbnail.jpg" alt="Project 1">
     </div>
     <div class="details">
         <h3>Data Science - Stock Market Analysis of Tesla Stock (09/2022 - 12/2022)</h3>
         <p>Utilized linear regression, LSTM (Long Short-Term Memory), and
            random forest algorithms to forecast and analyze stock trends. Gathered and processed relevant financial data, performed
            feature engineering, and conducted thorough data analysis.
          </p>
          <a href="#" class="btn">Download</a>
      </div>
</div>

This HTML code for the project card

1) We will create a div with the classes project-card and card-small, which will contain your whole card.

2) div of class thumbnail will contain the picture of of your project.

3) div class details is where your project title and description goes.

4) and a small download button download to source code and all the required file for the project.

now let's dive into the CSS for this HTML code.

  .project-card {
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    transition: transform 0.3s ease;
    margin-bottom: 20px;
}

.card-small {
    height: 300px;
    width: 800px;
    margin: 1em;
}

.thumbnail {
    flex: 1;
    overflow: hidden;
    border-radius: 8px 0 0 8px;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.details {
    flex: 2;
    padding: 1.5em;
}

h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5em;
    color: #333;
}

p {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #666;
}

.btn {
    display: inline-block;
    padding: 8px 12px;
    background-color: #1875D0;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #145fba;
}

.project-card:hover {
    transform: translateY(-5px);
}

all the styling is done for the card over here, you can copy-paste this code and try styling it your way remember to link the CSS file in the HTML if you are using CSS externally and file subscribe for more such content about design, frontend/backend coding quantum computing, etc.
you can also follow my Instagram:- inkandsyntax to get more content about programming and stuff.

Coding a card Design to showcase your Project