Create Services Card Design Using HTML & CSS
To create a visually appealing services card design using HTML and CSS, there are several steps you can follow. Firstly, you need to structure the HTML markup for the card. This can be done by creating a container div that will hold all the elements of the card. Inside this container, you can add separate divs for the card title, description, and any other relevant information.
To begin, start by Creating a new file called “index.html” using a text editor or an integrated development environment (IDE). This file will serve as the main entry point for your website. Once the file is created, you can proceed to paste the layout that has been provided to you.
<!DOCTYPE html>
<html lang="en">
<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">
<!-- custom css file link -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="heading">our services</h1>
<div class="box-container-services">
<div class="box-services">
<img src="image/wordpress.png" alt="">
<h3>WordPress</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, commodi?</p>
</div>
<div class="box-services">
<img src="image/react.png" alt="">
<h3>React</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, commodi?</p>
</div>
<div class="box-services">
<img src="image/java.png" alt="">
<h3>Java</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, commodi?</p>
</div>
</div>
</div>
</body>
</html>Create style.css file and past code our layout
Next, focus on styling the individual elements within the card. Apply appropriate font styles, sizes, and colors to the title and description divs. You can also add icons or images to enhance the visual representation of the services being offered. Consider using CSS flexbox or grid to align the elements within the card in a visually pleasing manner.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');
*{
font-family: 'Poppins', sans-serif;
margin:0; padding:0;
box-sizing: border-box;
outline: none; border:none;
text-decoration: none;
text-transform: capitalize;
transition: .2s linear;
}
body {
background-color: #000;
}
.container{
padding:100px 9%;
padding-bottom: 100px;
}
.container .heading {
text-align: center;
padding-bottom: 15px;
color: #fff;
font-size: 50px;
font-weight: 600;
}
.container .box-container-services{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap:15px;
}
.container .box-container-services .box-services {
border-radius: 5px;
background: #fff;
text-align: center;
padding: 30px 20px;
}
.container .box-container-services .box-services img{
height: 80px;
}
.container .box-container-services .box-services h3{
color:#444;
font-size: 22px;
padding:10px 0;
}
.container .box-container-services .box-services p{
color:#777;
font-size: 15px;
line-height: 1.8;
}
.box-services:hover {
border-left: 4px solid #bfa652;
}
@media (max-width:768px){
.container{
padding:20px;
}
}
