How to Create a Grid of User Cards with HTML and CSS






Hello developers, In this code, we will investigate an HTML fragment that creates a grid of user cards. A div with the "grid" class is created. Within, there are divs with a "card" class that contain an image, a heading, and a paragraph. The image is sourced from a URL, while the heading and paragraph are hardcoded. The CSS styles the HTML elements. The body background has a gradient effect using CSS linear-gradient function with three colours. The "card" elements have a fixed height and width with a margin of 10 pixels. The background of the cards also has a gradient effect using CSS linear-gradient function. The border-radius property gives the cards rounded corners, and the box-shadow property adds a shadow effect. The image within the "card" elements is a circle with a shadow effect. The "h2" element has a font size of 14 pixels.The code below can be used to create a grid of user cards on a website or web application. It may be altered to suit the developer's specifications. For example, the heading and paragraph may be replaced with data dynamically generated from a database, and the background colours of the gradient may be altered to match the branding of the website.

Creating a Responsive Beautiful Menu Card Using HTML and CSS [Source Code]

To make this website, you would like to make three files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <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>Grid of User Cards</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="grid"> <div class="card"> <img src="https://cdn.pixabay.com/photo/2017/11/10/04/47/user-2935373__480.png" alt="User Image"> <h2>User 1</h2> <p>user1@example.com</p> </div> <div class="card"> <img src="https://cdn.pixabay.com/photo/2017/11/10/04/47/user-2935373__480.png" alt="User Image"> <h2>User 2</h2> <p>user2@example.com</p> </div> <div class="card"> <img src="https://cdn.pixabay.com/photo/2017/11/10/04/47/user-2935373__480.png" alt="User Image"> <h2>User 3</h2> <p>user3@example.com</p> </div> <div class="card"> <img src="https://cdn.pixabay.com/photo/2017/11/10/04/47/user-2935373__480.png" alt="User Image"> <h2>User 4</h2> <p>user4@example.com</p> </div> <div class="card"> <img src="https://cdn.pixabay.com/photo/2017/11/10/04/47/user-2935373__480.png" alt="User Image"> <h2>User 5</h2> <p>user5@example.com</p> </div> <div class="card"> <img src="https://cdn.pixabay.com/photo/2017/11/10/04/47/user-2935373__480.png" alt="User Image"> <h2>User 6</h2> <p>user6@example.com</p> </div> <div class="card"> <img src="https://cdn.pixabay.com/photo/2017/11/10/04/47/user-2935373__480.png" alt="User Image"> <h2>User 7</h2> <p>user7@example.com</p> </div> <div class="card"> <img src="https://cdn.pixabay.com/photo/2017/11/10/04/47/user-2935373__480.png" alt="User Image"> <h2>User 8</h2> <p>user8@example.com</p> </div> <div class="card"> <img src="https://cdn.pixabay.com/photo/2017/11/10/04/47/user-2935373__480.png" alt="User Image"> <h2>User 9</h2> <p>user9@example.com</p> </div> </div> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </span>by<a href="https://www.learningrobo.com/"> Learning Robo</a></div> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension.


body {
    font-family: Arial, sans-serif;
    padding: 20px;
    background: #12c2e9;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  html, body {
    height: 100%;
  }
.card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    margin: 10px;
    padding: 20px;
    background: #000000; 
    background: -webkit-linear-gradient(to right, #434343, #000000);
    background: linear-gradient(to right, #434343, #000000); 
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  
  .card img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  .card h2 {
    font-size: 14px;
    font-weight: bold;
    background-image: linear-gradient(to right, #ee00ff 0%, #fbff00 100%);
    color: transparent;
    -webkit-background-clip: text;
  }
  
  .card p {
    font-size: 18px;
    color: #fff;
  }
  
  .grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .credit a {
    text-decoration: none;
    color: #fff;
    font-weight: 800;
  }
  
  .credit {
      color: #fff;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
  }
We hope you would like this Create a Grid of User Cards with HTML and CSS.

Thank you for reading our blog. If you face any problem in creating this Create a Grid of User Cards with HTML and CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

code developed by our student SUBHASRI K

Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome