skip to Main Content

enter image description here

In this screenshot, the title is "Title goes here", the secondary text is "Secondary text", and the body text is "Greyhound divisively hello coldly wonderfully marginally far upon excluding."

The card's root element is a <div> with a class of "card".
The card is 344px wide.
The desert picture is 194px tall.
The padding between the body text and everything else is 16px.
The color of the title text is #000.
The color of the secondary and body texts is #232F34.
The size of the person picture is 40px in diameter.
The size of the body text is 11px.
The size of the title is 22px.
For the padding or margin around any other elements, use your best judgment to make it look like the screenshot.
Transitions:
When a person moves their pointer over a picture card, then the card gets a shadow of rgba(0, 0, 0, .3) with a 0px horizontal offset, 2px vertical offset, and a blur radius of 4px.

I’ve attempted the HTML and CSS portion, but keep running into a wall. Below is the code for both.

.card {
  display: flex;
  flex-direction: column;
  width: 344px;
  padding: 16px;
  color: #232f34;
  font-size: 11px;
}

.card_image {
  height: 194px;
}

.person {
  border-radius: 40px;
  border-radius: 50%;
  height:50px;
}

.card-header {
  display: flex;
  color: #000;
  font-size: 22px;
  text-align: center;
}

.card body {
  display: flex;
  font-size: 22px;
  text-align: center;
  color: #232f34;
}

.footer {
  display: flex;
  font-size: 11px;
  text-align: center;
  color: #232f34;
  padding: 16px;
}

.card card-shadow {
  border: none;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, .3)
}
<div id="container"></div>
<div class="card">
  <div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Arabian_Desert_-_panoramio.jpg/544px-Arabian_Desert_-_panoramio.jpg" alt="" class="card_image">
    <div>
      <img class="person" src="https://png.pngtree.com/png-vector/20220709/ourmid/pngtree-businessman-user-avatar-wearing-suit-with-red-tie-png-image_5809521.png">
      <div class="card-header">Title goes here</div>
      <div class="card body">
        secondary text
      </div>
      <div class="card footer">
        Greyhound divisively hello couldly wonderfully marginally far upon excluding
      </div>
      <div class="card card-shadow"></div>
    </div>
  </div>
</div>

2

Answers


  1. Try it also

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .card {
                display: flex;
                flex-direction: column;
                width: 300px;
                color: #232f34;
                background-color: bisque;
                font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            }
            .card-body{
                padding:10px 15px;
            }
            .card-image img{
                height: 160px;
                width: 100%;
            }   
            .title-row{
                display: flex;
                flex-direction: row;
            }
            .person img {
                height: 40px;
                width: 40px;
                border-radius: 55%;
            }  
            .title{
                padding-left:15px ;
            }
            .title h3{            
                margin: 0px;
            }  
            .card-desc{
                padding-top: 15px;
            }
            .card:hover{
                /* transform: scale(1.1); */
                transition-duration: .3s;
                box-shadow: 0px 2px 4px 6px rgba(0, 0, 0, .3);
            }        
        </style>
    </head>
    
    <body>    
        <div class="card">
            <div class="card-image">
                <img src="data:image/jpeg;base64,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" alt="" >
            </div>
            <div class="card-body">
                <div class="title-row">
                    <div class="person">
                        <img src="data:image/jpeg;base64,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">
                    </div>
                    <div class="title">
                        <h3>Title goes here</h3>
                        <span>secondary text</span>
                    </div>
                </div>
                <div class="card-desc">
                    Greyhound divisively hello couldly wonderfully marginally far upon excluding
                </div>
            </div>
        </div>
    </body>
    </html>
    
    Login or Signup to reply.
  2. .card_container {
      background-color: #E5E5E5;
      padding: 5px;
      
      height: 300px
    }
    .card_box {
      height: 100%;
      border-radius: 4px;
      overflow: hidden;
    }
    .card_img_box {
      height: calc(100% - 124px);
      overflow: hidden
    }
    .card_img_box img {
      width: 100%;
    }
    .card_content_box {
     background-color: #ffffff;
     padding: 15px;
    }
    .user_box {
      display: flex;
      align-items: center;
    }
    .user_profile {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background-color: grey;
      overflow: hidden;
    }
    .user_profile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .user_title {
      flex: 1 1 10px;
      padding-left: 15px;
    }
    .user_main_text {
       font-size: 24px;
       color: #232323;
       font-weight: bold;
    }
    .user_sub_text {
      font-size: 15px;
      color: #686868;
      margin-top: 3px;
    }
    .card_text {
      margin-top: 10px;
      color: #686868;
    }
    <div class="card_container">
      <div class="card_box">
        <div class="card_img_box">
          <img src="https://thumbs.dreamstime.com/z/walk-desert-7831049.jpg" />
        </div>
        <div class="card_content_box">
          <div class="user_box">
            <div class="user_profile">
                <img src="data:image/jpeg;base64,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">
            </div>
            <div class="user_title">
              <div class="user_main_text">Titile Here</div>
              <div class="user_sub_text">Sub text Here</div>
            </div>
          </div>
          <div class="card_text">
            Lorem Ipsum Dolar Saint Lorem Ipsum Dolar Saint Lorem Ipsum Dolar Saint Lorem Ipsum Dolar Saint
          </div>
        </div>
      </div>
    </div>

    Height given to card image box based on the content height

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search