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">
<head>
    <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">
</head>
<body>
    <div class="container">
      <h2 class="title">Employee Name</h2>
      <img src="https://www.assignmenthippo.com/images/html-and-css/simple-card-user.png" 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="https://www.assignmenthippo.com/">Learn More</a>
    </div>
  </body>
</html>
    

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


      @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;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.