Creating a Card Layout

Hello there i have got the idea for which i was previously asking help from your side the solution is CARD LAYOUT instead of DIV tag but i am getting little of the doubt. For example if there are 50 users using my website so how will i manage each of them inside the card layout structure please help me.

If you are asking about layout, that’s a different subject altogether.
Maybe another topic in html & css would be appropriate for that aspect of your project.

Hello there as i was in the trouble to make some of DIV tag i was literally confused what to do but it can be only possible only with ANGULAR.JS and i haven’t work on it any more and i am not getting any of the way to do it Heres the link of the page to insert the tags and here’s the link to get it https://material.angularjs.org/latest/demo/card. and i have try a lot but i am getting nothing and i cannot see any of the changes in my files and here’s the image of the card layout like which my card should look like so please help me to solve this. I have spent a lot of time regarding this but not getting any of the solution.

What is it that you think can only be done using Angular?

Not true, a card layout can easily be done with just html & css.
Using inline-block is simplest, or use flex box for a more advanced layout.

I have some examples of card layouts here:-

Hey SamA74 can you please give me any of the little code in HTML AND CSS so i can implement it on my website

Why not look at the source code of the site?

Yes, the code source is all there to see.
And since you did not specify exactly which example you wish to emulate…

Hey there thank you for the suggestion but i am still not getting any of the correct card layout. I just want to set 8 card layouts in front page of my website you can also see in fiverr.com so i request you to send code for the 8 layout. I want to make the card layout exactly like this so please please help me

What html and css code do have so far in your attempt at this?
Post that so we can move forward from where you are.
Did you look at the examples in the linked post?

2 Likes

Something like this:-

I want the exact layout of the image which i have uploaded recently have any one idea about that so please help me or send me the code for that it will be a greatful to you so please help me. I have work on this for more than 2 days but not getting exactly like that so please help me.

Hey SamA74 i am not getting it perfect as i want it

What have you tried? Sam has come up with code that is so close to what you wanted. Where are you experiencing problems modifying it?

No I think sam’s idea is some more different than that i want. I want the card layout same as the image i have uploaded above

Show us your code. Show us the code that created your image.

Hello ronpat this is the code which i have inserted pls copy the html content 3 times so you will be able to see the images in proper order and pls try to make it as like as the layout i want

<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head>


</head>
<style>
.card2 {
height: 80px;
width: 450px;

}
.card1 {
height: 500px;
width: 450px;

}
.card3 {
height: 100px;
width: 450x;

}
</style>
<style>
.card2 {float:left; padding:10px;}
.card1 {float:right; padding:10px;}
.card3 {float:auto; padding:10px;}

</style>
<body>
  <div class="card1">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="12.jpg">
    </div>
    <div class="card-content">
      <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
      <p><a href="#"></a></p>
<!-- LikeBtn.com BEGIN -->
<span class="likebtn-wrapper" data-identifier="item_1"></span>
<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
<!-- LikeBtn.com END -->	  <i class="fa fa-heart" aria-hidden="true"></i>
    </div>
    <div class="card-reveal">
      <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
      <p></p>
    </div>
  </div>
  
      <div class="card2">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="12.jpg">
    </div>
    <div class="card-content">
      <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
      <p><a href="#">This is a link</a></p>
    </div>
    <div class="card-reveal">
      <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
      <p></p>
    </div>
  </div>
      <div class="card3">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="12.jpg">
    </div>
    <div class="card-content">
      <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
      <p><a href="#">This is a link</a></p>
    </div>
    <div class="card-reveal">
      <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
      <p></p>
    </div>
  </div>
  
        
            
</body>
</html>

Thank you for posting the code.

This is a screen shot showing what the code renders on my computer.

I cannot create three boxes inline when you have not sent me the code that created the box in the image that you posted. I need the CSS for all of the classes and I need the size of the image so I can use a placeholder. You should be able to set that up before you post the code so I see what you see.

Please send more code. or a link to your test site, if you have one.

When you post code, begin with three backticks on one line by themselves, then paste your code, then close with three backticks on a line by themselves again. Like this:

```
your code here
```

OR

paste your code on the page, then highlight it with your mouse, then click the </> button in the menu bar. That will format the code, too.

Thank you for helping us help you.

1 Like

Hello there i have tryed the same code in my another file to test it but it was working all fine i cannot see any of the error or any of the missing query here is the screen short of the page

1 Like