Responsive user profile card with social media and contact Form

RH Suman
June 20, 2022

36

A responsive and colorful Profile Card concept. The card has a nice material design with some gradients textures on background. It is structured with HTML, styled with CSS and makes use of JavaScript for controlling the actions on buttons.
Responsive user profile card with social media and contact Form

First I use Bootstrap for basic CSS stracture and Fontawesome for icon

<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="dist/css/fontawesome.css">

HTML Code:

<div class="main-content ">
    <!-- Page content -->
    <div class="container-fluid pb-5 pt-7">
      <div class="col-xl-4 mb-5 mx-auto">
        <div class="card card-profile shadow">
          <div class="row justify-content-center">
            <div class="col-lg-3">
              <div class="card-profile-image">
                <a href="#">
                  <img src="https://www.ysm.ca/wp-content/uploads/2020/02/default-avatar.jpg" class="rounded-circle">
                </a>
              </div>
            </div>
          </div>
          <div class="card-header text-center border-0 ">
            <div class="d-flex justify-content-end">
              <a href="#" class="btn btn-sm btn-primary " id="socials_btn" onClick="showSocials()"
                style="display: none;">Socials</a>
              <a href="#" class="btn btn-sm btn-info float-right" id="contact_btn" onClick="showContact()">Contact</a>
            </div>
          </div>
          <div class="card-body pt-0 pt-md-4 mt-md-5">
            <div class=" pt-2 text-center">
              <h3 class="display-5">
                RH SUMAN<span class="font-weight-light"></span>
              </h3>
              <div class="h5 font-weight-300">
                <i class="fas fa-map-marker-alt mr-2"></i>DHAKA, BD
              </div>
              <div class="h6 mt-4 fw-bold">
                Web Developer | Designer | Graphics Designer
              </div>
              <hr class="my-4" />
            </div>
            <div class="profile-card-social pb-3" id="socials_section">
              <a href="#" class="item facebook" target="_blank">
                <i class="fab fa-facebook-f icon"></i> Facebook
              </a>
              <a href="#" class="item twitter" target="_blank">
                <i class="fab fa-twitter icon"></i> Twitter
              </a>
              <a href="#" class="item instagram" target="_blank">
                <i class="fab fa-instagram icon"></i> Instagram
              </a>
              <a href="#" class="item behance" target="_blank">
                <i class="fab fa-behance icon"></i> Behance
              </a>
              <a href="#" class="item github" target="_blank">
                <i class="fab fa-github icon"></i>
                GitHub
              </a>
              <a href="#" class="item codepen" target="_blank">
                <i class="fab fa-codepen icon"></i>
                CodePen
              </a>
              <a href="#" class="item link" target="_blank">
                <i class="fas fa-link icon"></i>
                Custom Link
              </a>
            </div>
            <div class="contact-section" id="contact_section">
              <h4 class="text-center">Contact </h4>
              <div class="text-center text-muted mb-4">
                <p>Fill out the form and we'll be in touch as soon as possible.</p>
              </div>
              <form role="form">
                <div class="form-group">
                  <div class="input-group input-group-alternative mb-3">
                    <input class="form-control" placeholder="Name" type="text">
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-group input-group-alternative mb-3">

                    <input class="form-control" placeholder="Email" type="email">
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-group input-group-alternative mb-3">
                    <textarea class="form-control" placeholder="Message" rows="4"></textarea>
                  </div>
                </div>
                <div class="text-center mb-3">
                  <button type="button" class="btn btn-info pl-4 pr-4">Submit</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS Code:

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@-ms-viewport {
  width: device-width;
}

body {
  font-family: Open Sans, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin: 0;
  color: #525f7f;
  background: rgb(2,0,36);
  background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 24%, rgba(0,212,255,1) 100%);
  background: #314755;  /* fallback for old browsers */
    background: -webkit-linear-gradient(180deg, #26a0da, #314755);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(180deg, #26a0da, #314755); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    /* background-image: url(""); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

a,
a:hover {
  text-decoration: none !important;
}

.main-content {
  position: relative;
  min-height: 100vh;
}


.btn:hover {
  outline: 0;
  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
  transition: all 0.15s;
}

/* Card Profile */
.card-profile {
  background-color: #f7fafc;
}

.card-profile-image {
  position: relative;
}
.card-profile-image img {
  position: absolute;
  left: 50%;
  max-width: 180px;
  transition: all 0.15s ease;
  transform: translate(-50%, -30%);
  border-radius: 0.375rem;
  box-shadow: 0px 5px 50px 0px #c3c3c3, 0px 0px 0px 5px rgba(255, 255, 255);
}

.card-profile-image img:hover {
  transform: translate(-50%, -33%);
}

@media (max-width: 675px) {
  .card-profile-image img {
    max-width: 130px;
  }
}

/* Socials */
.profile-card-social {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  transition: all 0.5 ease;
}

.item {
  display: inline-flex;
  width: 100%;
  height: 50px;
  margin: 15px;
  margin-bottom: 0;
  border-radius: 5em;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #405de6;
  box-shadow: 0px 7px 30px rgb(43 98 169 / 50%);
  position: relative;
  font-size: 21px;
  flex-shrink: 0;
  transition: all 0.3s;
}

item:hover {
  transform: scale(1.04);
  color: white;
}

.item.facebook {
  background: linear-gradient(45deg, #3b5998, #0078d7);
  box-shadow: 0px 4px 30px rgb(43 98 169 / 50%);
}

.item.twitter {
  background: linear-gradient(45deg, #1da1f2, #0e71c8);
  box-shadow: 0px 4px 30px rgb(19 127 212 / 70%);
}

.item.instagram {
  background: linear-gradient(
    45deg,
    #405de6,
    #5851db,
    #833ab4,
    #c13584,
    #e1306c,
    #fd1d1d
  );
  box-shadow: 0px 4px 30px rgb(120 64 190 / 60%);
}

.item.behance {
  background: linear-gradient(45deg, #1769ff, #213fca);
  box-shadow: 0px 4px 30px rgb(27 86 231 / 70%);
}

.item.github {
  background: linear-gradient(45deg, #333333, #626b73);
  box-shadow: 0px 4px 30px rgb(63 65 67 / 60%);
}

.item.codepen {
  background: linear-gradient(45deg, #324e63, #414447);
  box-shadow: 0px 4px 30px rgb(55 75 90 / 60%);
}

.item.link {
  background: linear-gradient(45deg, #d5135a, #f05924);
  box-shadow: 0px 4px 30px rgb(223 45 70 / 60%);
}

.icon {
  font-size: 1.5rem;
  padding-right: 10px;
  position: absolute;
  left: 10%;
}

.pt-7,
.py-7 {
  padding-top: 6rem !important;
}

/* Contact Form */

.contact-section {
  display: none;
  transition: all 0.5s ease;
}

/* Fade In Animation */
.animate {
  animation: fadeIn 1s;
  -webkit-animation: fadeIn 1s;
  -moz-animation: fadeIn 1s;
  -o-animation: fadeIn 1s;
  -ms-animation: fadeIn 1s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

JavaScript Code:

    const contact_btn = document.getElementById("contact_btn");
    const socials_btn = document.getElementById("socials_btn");
    const contact_section = document.getElementById("contact_section");
    const socials_section = document.getElementById("socials_section");

    function showContact() {
        contact_btn.style.display = "none";
        socials_btn.style.display = "block";

        socials_section.style.display = "none";
        contact_section.style.display = "block";
        contact_section.classList.add("animate");

        setTimeout(function () {
        contact_section.classList.remove("animate");
      }, 500); // 500 is the same time as the CSS animation
    }

    function showSocials() {
        contact_btn.style.display = "block";
        socials_btn.style.display = "none";

        socials_section.style.display = "flex";
        contact_section.style.display = "none";
        socials_section.classList.add("animate");

        setTimeout(function () {
        socials_section.classList.remove("animate");
      }, 500); // 500 is the same time as the CSS animation
    }

Preview:

Tags

Responsive User profile HTML CSS JS JavaScript Animated

Subscribe

Get Updates

Subscribe our newsletter to get the last update into your inbox!

Please insert email address.

Recommended Posts