Create a Simple Card by Using HTML and CSS

simple card design

Creating a card design in HTML and CSS is a common task in web development. Here's a step-by-step guide to create a simple card design:

Step 1: Set Up Your Project Create a new directory for your project and create two files, index.html and styles.css, in that directory.

Step 2: HTML Structure In your index.html file, set up the basic HTML structure for your card:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Create a Simple Card by Using HTML and CSS | Assignment Hippo</title>
    <link rel="stylesheet" href="style.css">
    <div class="container">
      <h2 class="title">Employee Name</h2>
      <img src="" height="150" width="150" alt="user">
      <p class="descrip">Sign up for a free account on our website to start accessing millions of study resources and avail our custom assignment writing service</p>
      <b class="offer">Unlock Instant Answers, and New Knowledge Today!</b>
      <a class="sub-btn" href="">Learn More</a>

Step 3: CSS Styles In your styles.css file, define the styles for your card:

      @import url(';400;500;600;700&display=swap');

      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: 'Open Sans', sans-serif;
      body {
          width: 100%;
          height: 100vh;
          background: #f7eef8;
          display: flex;
          justify-content: center;
          align-items: center;
      .container {
          width: 460px;
          padding: 40px;
          background: #ffffff;
          text-align: center;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
          position: relative;
      .container .title {
          font-size: 2rem;
          color: #333;
      img {
          border-radius: 100%;
          margin-top: 15px;
      .container .descrip {
          color: #3b3b3b;
          font-size: 0.9rem;
          margin: 20px 0 20px;
          text-align: justify;
      .container .offer {
          display: block;
          color: #555;
          font-size: 1rem;
          margin-top: 25px;
      .sub-btn {
          display: inline-block;
          padding: 15px 0;
          background-color: #bc6bff;
          color: #fff;
          text-decoration: none;
          border-radius: 30px;
          font-size: 1.2rem;
          margin-top: 40px;
          width: 100%;
          font-weight: 500;
          transition: 0.2s ease;
      .sub-btn:hover {
          background: #ca4dff;

Step 4: Add Content Replace "image.jpg", "Title", and "Description goes here." in your index.html with your own image URL, title, and description.

Step 5: Preview Open your index.html file in a web browser to preview your card design.

That's it! You've created a basic card design using HTML and CSS. You can further customize the styles and layout to fit your project's requirements.