How to Create a Grid of User Cards with HTML and CSS
0
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.
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.
Post a Comment
Thank you
Learning robo team