-5

This question might be a bit broad. I am trying to create three cards and a bar that is on top of them like this:

enter image description here

Where the orange parts are images and the grey parts are text.

.blue-line {
  height: 100px;
  background-color: lightblue;
  margin-left: 10px;
  margin-right: 10px;
}

.card {
  height: 400px;
  width: 300px;
  background-color: grey;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 20px;
}
<div class="blue-line"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

2
  • Feedback: I downvoted this question because (a) this question featured urgent begging until I edited it out, and (b) I asked you to refrain from this before. Remember, things that are urgent for you are not urgent for anyone else. It is a rude encroachment on the time of a volunteer to assume otherwise.
    – halfer
    Jul 1, 2018 at 17:56
  • 1
    I am extremely sorry @halfer I promise to refrain from this in the future. Thank you for your constructive criticism!
    – Hamza
    Jul 2, 2018 at 17:20

3 Answers 3

5

You should use FlexBox, like this :

.blue-line {
  height: 100px;
  background-color: lightblue;
  margin-left: 10px;
  margin-right: 10px;
}

.card {
  height: 400px;
  width: 300px;
  background-color: grey;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 20px;
}

.card-container {
  margin-left: 10px;
  margin-right: 10px;
  display: flex;
}

.img {
  height: 100px;
  width:100%;
  background: #febe8c;
}
<div class="blue-line"></div>
<div class="card-container">
  <div class="card">
      <div class="img">
      </div>
  </div>
  <div class="card">
      <div class="img">
      </div>
  </div>
  <div class="card">
      <div class="img">
      </div>
  </div>
</div>


Containers and items

Container

Items

Initialize flex box

.container {
  display: flex; /* or inline-flex */
}

Order

Order

.item {
  order: <integer>; /* default is 0 */
}

Flex-grow

Flex-grow

.item {
  flex-grow: <number>; /* default 0 */
}

Learn more about Flex Box on css-tricks.com

Sources

2
  • Thank you very much for your help is there a way to center these cards? Thanks!
    – Hamza
    Jul 2, 2018 at 17:23
  • Yes, juste add justify-content: center; in the container
    – Pol
    Jul 3, 2018 at 10:28
1

The below code should be okay for you to start with. You can either use an img tag or make the image as a background image(whichever that is okay with you)

.blue-line {
  height: 100px;
  background-color: lightblue;
  margin-left: 10px;
  margin-right: 10px;
}

.card {
  height: 400px;
  width: 300px;
  background-color: grey;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 20px;
}

.card-container {
  margin-left: 10px;
  margin-right: 10px;
  display: flex;
}
.img {
  height: 200px;
  width:100%;
  background: orange;
}
<div class="blue-line"></div>
<div class="card-container">
  <div class="card">
    <div class="img">
    </div>
        <h4>You can input your text here</h4>

  </div>
  <div class="card">
    <div class="img">
    </div>
    <h4>You can input your text here</h4>
  </div>
  <div class="card">
    <div class="img">
    </div>
        <h4>You can input your text here</h4>

  </div>
</div>

0

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

.container {
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;

}

.wrapper {
    display: flex;
    flex-direction: row;
    animation: fadein 1s linear;
}

.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
    background-color: #7e57c2;
    color: white;
    margin: 0.3em;
    /* create shadow */
    border-radius: 6px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.card {
    padding: 1em;
    font-family: sans-serif;
}

@media all and (max-width: 786px) {
    .card {
        font-size: 12px;
    }

    .wrapper {
        flex-direction: column;
    }

    .item {
        flex-basis: 100%;
    }

}
 <div class="container">
        <div class="wrapper">
            <div class="item">
                <div class="card">
                    <div class="card-image">
                        <img src="/assets/insta.png" width="50px" height="50px" alt="">
                    </div>
                    <div class="card-content">
                        <h3>Card Title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quidem.</p>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="card">
                    <div class="card-image">
                        <img src="/assets/insta.png" width="50px" height="50px" alt="">
                    </div>
                    <div class="card-content">
                        <h3>Card Title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quidem.</p>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="card">
                    <div class="card-image">
                        <img src="/assets/insta.png" width="50px" height="50px" alt="">
                    </div>
                    <div class="card-content">
                        <h3>Card Title</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quidem.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.