profile card design with gradient background html & css

This project demonstrates a stylish and responsive web designer profile card built using HTML and CSS. The profile card includes essential information about the designer, such as their name, location, role, skills, and contact options.

Project Functionality

  • Technology Usage: HTML5, CSS3
  • External Resources: Font Awesome, Google Fonts
  • Responsive: Yes

Source Code & Live Demo

To use this project source code effectively:

  • Source Code: You can obtain the complete source code by copying the code provided below.
  • Download: You can download the source code by clicking the Source Code button below to get a ZIP file of the project. Extract the contents to your desired directory.
  • Open the Project: Open the project folder using a text editor or an integrated development environment (IDE) like Visual Studio Code.
  • Modify and Experiment: Customize the content, styles, and functionalities to suit your preferences. Experiment with different designs to enhance your learning.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>web designer profile card</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- profile card start -->
    <div class="profile__card">
      <img
        src="https://i.ibb.co/tcQFMcj/designer.png"
        alt=""
        class="profile__img"
      />
      <div class="card__body">
        <h3>mamun hossain</h3>
        <span>dhaka, bangladesh</span>
        <p>user interface designer and frontend web developer</p>
        <div class="btn__box">
          <button class="btn btn__primary">message</button>
          <button class="btn btn__secondary">following</button>
        </div>
      </div>
      <div class="card__footer">
        <span>skills</span>
        <div class="skill__set">
          <span>ui/ux designer</span>
          <span>html</span>
          <span>css</span>
          <span>wordpress</span>
          <span>javascript</span>
          <span>react</span>
        </div>
      </div>
    </div>
    <!-- profile card end -->
  </body>
</html>

@import url("https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Fenix&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
  --bg-color: #293241;
  --white: #ffffff;
  --coral: #ee6c4d;
  --light-gray: #c2bdbd;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  text-transform: capitalize;
}

body {
  min-height: 100vh;
  background-color: var(--bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile__card {
  flex: 0 1 auto;
  display: flex;
  row-gap: 1.5rem;
  flex-direction: column;
  align-items: center;
  padding: 2.2rem 2.5rem;
  background-image: linear-gradient(
    to right top,
    #000000,
    #10060b,
    #180d16,
    #1c1320,
    #1d182c,
    #1b1a32,
    #171d37,
    #10203d,
    #0c1f3d,
    #081e3d,
    #041e3d,
    #001d3d
  );
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.profile__img {
  width: 110px;
  height: 110px;
  border: 2px solid var(--white);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.card__body {
  text-align: center;
}

.card__body h3 {
  font-weight: 800;
  color: var(--white);
  font-size: calc(1rem + 0.8vw);
  margin: 10px 0 0 0;
}

.card__body span {
  display: block;
  color: var(--light-gray);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 20px 0;
}

.card__body p {
  width: 300px;
  margin: 0 auto;
  color: var(--light-gray);
  margin: 0 0 20px 0;
}

.btn__box {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.btn {
  padding: 10px 25px;
  color: var(--white);

  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  border: 1px solid var(--coral);
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.btn__primary {
  background-color: var(--coral);
}

.btn__secondary {
  background-color: transparent;
}

.card__footer > span {
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--coral);
  display: block;
  margin: 20px 0 10px 0;
}

.skill__set {
  width: 300px;
  display: flex;
  gap: 10px;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
}

.skill__set span {
  border: 1px solid var(--light-gray);
  color: var(--light-gray);
  padding: 5px;
  font-size: 0.75rem;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
}

Code & Preview

See the Pen profile card with gradient bg by Mamun Hossain (@Mamun-Hossain-the-bold) on CodePen.

You can download the source code files for free by clicking the Source Code button. Additionally, you can edit and view a live demo by clicking the Code & Preview button below.

Source Code
Code & Preview

Related Posts

Scroll to Top