In this blog, I showed how to use HTML and CSS to make attractive cards with colored borders and vector pictures. You may design cards that will make your website seem amazing and more user-friendly by following the steps provided in this article. You may also utilize the included source code to make your custom cards and experiment with different colors and vector pictures to give your website a unique look.
Cards are a common design pattern used in online and mobile applications to show information in a succinct and aesthetically attractive manner. In this post, we’ll look at how to use HTML, CSS, and JavaScript to make aesthetically appealing cards with colored borders and vector graphics.
Designing the Cards:
To create visually appealing cards, I will first design the card layout. We’ll arrange the cards in a plus sign shape, with a colorful border at the top of each , a headline, a text, and a little vector graphic on each. The card structure will be created in HTML, and the cards will be styled with CSS. We will also include responsive design to ensure that the cards appear excellent on a variety of screen sizes.
Adding Colorful Borders:
The first step in improving the visual appearance of our cards is to add colored borders. We will use CSS to construct a border for each card and apply a background color to make it more visually attractive. To achieve the pictured appearance, we will also utilize CSS to change the border size and color.
Creating Vector Images:
Vector pictures will be used to give visual appeal to our cards. Vector pictures are visuals that can be resized without sacrificing quality since they are made using mathematical calculations. We’ll utilize photos for our vector graphics and demonstrate how to make them using Adobe Illustrator or other vector graphics applications.
Source Code For Cards Design using HTML and CSS:
You have to create two files, one is html file and other is css file. You can download the images which i used in these cards from last section of this blog.
First: Create an HTML file name as index.html with the extension .html in the root folder.
<!DOCTYPE html>
<html lang="en">
<!-- By Hassan Ali | Hassanrao.com -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
<title>Cards Design | Hassanrao.com</title>
</head>
<body>
<div class="container">
<div class="card-container">
<div class="card border-top-cyan">
<h4>Supervisor</h4>
<p>Monitors activity to identify project roadblocks</p>
<img src="images/icon-supervisor.svg" alt="" class="icon" />
</div>
<div class="card border-top-red">
<h4>Team Builder</h4>
<p>
Scans our talent network to create the optimal team for your project
</p>
<img src="images/icon-team-builder.svg" alt="" class="icon" />
</div>
<div class="card border-top-blue">
<h4>Calculator</h4>
<p>
Uses data from past projects to provide better delivery estimates
</p>
<img src="images/icon-calculator.svg" alt="" class="icon" />
</div>
<div class="card border-top-yellow">
<h4>Karma</h4>
<p>Regularly evaluates our talent to ensure quality</p>
<img src="images/icon-karma.svg" alt="" class="icon" />
</div>
</div>
</div>
</body>
</html>
Second: Create a CSS name as a style.css file with the extension .css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
.container {
max-width: 1100px;
width: 100%;
height: 100vh;
margin: 0 auto;
padding: 4rem 0;
display: flex;
justify-content: center;
flex-direction: column;
}
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
width: 330px;
background-color: #fff;
margin: 10px;
padding: 26px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.1);
border-radius: 5px;
}
.card h4 {
font-size: 1.3rem;
color: hsl(234, 12%, 34%);
}
.card p {
line-height: 1.8;
}
img {
display: block;
margin-left: auto;
}
.border-top-cyan {
border-top: 5px solid hsl(180, 62%, 55%);
}
.border-top-red {
border-top: 5px solid hsl(0, 78%, 62%);
}
.border-top-yellow {
border-top: 5px solid hsl(34, 97%, 64%);
}
.border-top-blue {
border-top: 5px solid hsl(212, 86%, 64%);
}
.card:nth-child(1), .card:nth-child(3) {
transform: translateY(50%);
}
@media screen and (max-width:768px) {
.card:nth-child(1), .card:nth-child(3) {
transform: translateY(0%);
}
}
Images Download
That’s All; We have successfully created a good and attractive-looking responsive card design with simple HTML and CSS. I am a Website Developer. I build Simple Projects Using HTML CSS JS and PHP to help beginners for a quick start.
View This Post On Hassanrao.com for free source Files download Link.
Top comments (0)