Responsive Profile Card Ui Using Html Css

Responsive profile card design with a hover effect using only html and css only is a design element that displays a brief summary of a person or organization's information when hovered over with a mouse on card. It typically includes a person's image, name, work, and social media handles or contact information. The hover effect adds an interactive element to the design, causing the card to change in some way when the user moves their cursor over it. This can be achieved through the use of css transitions or other javascript styling techniques. Overall, a profile card design with a hover effect can be a visually appealing and user-friendly way to present information on a website or application. This profile card design is responsive so it work well in all device like desktop, mobile table. For more card animations you can follow the card playlist.

You can read more about web development from this playlist.

01. HTML
02. CSS
03. Output
04. Youtube Video
05. Source Code

Read Also:

HTML:

Let's start with the boilerplate of html document which you can see below.

<!DOCTYPE html>
<html>
<head>
 <title>Responsive Profile Card Ui Using Html Css | Rustcode</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>

Body Content 

</body>
</html>

Basic html structure and all dependencies are included in html document, It's time to write html code which is given below.

<!DOCTYPE html>
<html>
   <head>
      <title>Responsive Profile Card Design With Hover Effect | Rustcode</title>
      <link href="https://fonts.googleapis.com/css?family=Montserrat:500,700,900|Work+Sans:300" rel="stylesheet">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <div class="container">
         <div class="card card01">
            <div class="border">
               <h2>Tom Cruise</h2>
               <div class="icons">
                  <i class="fa fa-github" aria-hidden="true"></i>
                  <i class="fa fa-codepen" aria-hidden="true"></i>
                  <i class="fa fa-twitter" aria-hidden="true"></i>
                  <i class="fa fa-instagram" aria-hidden="true"></i>
                  <i class="fa fa-facebook" aria-hidden="true"></i>
               </div>
            </div>
         </div>
         <div class="card card02">
            <div class="border">
               <h2>Chris Evans</h2>
               <div class="icons">
                  <i class="fa fa-github" aria-hidden="true"></i>
                  <i class="fa fa-codepen" aria-hidden="true"></i>
                  <i class="fa fa-twitter" aria-hidden="true"></i>
                  <i class="fa fa-instagram" aria-hidden="true"></i>
                  <i class="fa fa-facebook" aria-hidden="true"></i>
               </div>
            </div>
         </div>
         <div class="card card03">
            <div class="border">
               <h2>Chris Hemsworth</h2>
               <div class="icons">
                  <i class="fa fa-github" aria-hidden="true"></i>
                  <i class="fa fa-codepen" aria-hidden="true"></i>
                  <i class="fa fa-twitter" aria-hidden="true"></i>
                  <i class="fa fa-instagram" aria-hidden="true"></i>
                  <i class="fa fa-facebook" aria-hidden="true"></i>
               </div>
            </div>
         </div>
         <div class="card card04">
            <div class="border">
               <h2>Keanu Reeves</h2>
               <div class="icons">
                  <i class="fa fa-github" aria-hidden="true"></i>
                  <i class="fa fa-codepen" aria-hidden="true"></i>
                  <i class="fa fa-twitter" aria-hidden="true"></i>
                  <i class="fa fa-instagram" aria-hidden="true"></i>
                  <i class="fa fa-facebook" aria-hidden="true"></i>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

font-family cdn link.

	<link href="https://fonts.googleapis.com/css?family=Montserrat:500,700,900|Work+Sans:300" rel="stylesheet">

font-awesome cdn link.

	
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

This code is a simple html document that creates a responsive profile card design with hover effect. The document begins by declaring the HTML5 doctype and creating the basic structure of an HTML document with the opening and closing <html>, <head>, and <body> tags.

In the head of the document, the title of the webpage is set, and two external font styles are linked, Montserrat and Work Sans. Also, it links to a font-awesome library to use icons and a style.css file for styling.

The body of the document contains a main container called "container" which holds four different cards. Each card is defined by a "card" class and an additional class that indicates the specific card (card01, card02, card03, and card04). Each card has a "border" class that wraps a heading "h2" and a "icons" class that wraps some icons. The names of the cards are Tom Cruise, Chris Evans, Chris Hemsworth and Keanu Reeves.

The CSS file will be responsible for styling the HTML elements and making the card responsive and adding hover effects. The icons are from font-awesome library and are used as social media links.

Output:

Read Also:

CSS:

* {
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
}

body {
   min-height: 100vh;
   width: 100vw;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #E5E5E5;
}

.container {
   display: flex;
   justify-content: space-around;
   align-items: center;
   margin: 10px auto;
   flex-wrap: wrap;
}

.border {
   height: 369px;
   width: 290px;
   background: transparent;
   border-radius: 10px;
   transition: border 1s;
   position: relative;
}

.border:hover {
   border: 1px solid #FFF;
}

.card {
   height: 379px;
   width: 300px;
   background: #808080;
   border-radius: 10px;
   overflow: hidden;
   box-shadow: 0 70px 63px -60px #000;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   cursor: pointer;
   margin: 1vw;
   transition: background 0.8s;
}

.card01 {
   background: url('hero01.jpg') center center no-repeat;
   background-size: 300px;
}

.card01:hover {
   background: url('hero01.jpg') left center no-repeat;
   background-size: 600px;
}

.card01:hover h2 {
   opacity: 1;
}

.card01:hover .fa {
   opacity: 1;
}

.card02 {
   background: url('hero02.jpg') center center no-repeat;
   background-size: 300px;
}

.card02:hover {
   background: url('hero02.jpg') left center no-repeat;
   background-size: 600px;
}

.card02:hover h2 {
   opacity: 1;
}

.card02:hover .fa {
   opacity: 1;
}

.card03 {
   background: url('hero03.jpg') center center no-repeat;
   background-size: 300px;
}

.card03:hover {
   background: url('hero03.jpg') left center no-repeat;
   background-size: 600px;
}

.card03:hover h2 {
   opacity: 1;
}

.card03:hover .fa {
   opacity: 1;
}

.card04 {
   background: url('hero04.jpg') center center no-repeat;
   background-size: 300px;
}

.card04:hover {
   background: url('hero04.jpg') left center no-repeat;
   background-size: 600px;
}

.card04:hover h2 {
   opacity: 1;
}

.card04:hover .fa {
   opacity: 1;
}

h2 {
   font-family: "Montserrat", sans-serif;
   color: #FFF;
   margin: 20px;
   opacity: 0;
   transition: opacity 1s;
}

.fa {
   opacity: 0;
   transition: opacity 1s;
}

.icons {
   position: absolute;
   fill: #FFF;
   color: #FFF;
   height: 130px;
   top: 266px;
   width: 50px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
}

This is css stylesheet code that styles an HTML document that creates a responsive profile card design with hover effect. The code begins by resetting all margins, padding, and box-sizing properties to 0 and set box-sizing to border-box, so that the width and height properties of an element include any padding and border.

The body of the document is set to fill the entire viewport with a minimum height of 100vh and a width of 100vw. The display is set to flex, align-items to center, and justify-content to center, so that the content is centered both vertically and horizontally. The background color is set to a light gray.

The container class is set to have a display of flex, justify-content of space-around and align-items of center, so that the cards are evenly spaced and centered within the container. The container also has a margin of 10px auto and a flex-wrap of wrap, so that the cards will wrap to the next line when the viewport becomes too narrow.

The card class is set to have a height of 379px, a width of 300px, a background color of gray, a border-radius of 10px, and overflow is hidden, so that any content that extends beyond the border of the card is hidden. It also has a box-shadow to create a 3D effect and a cursor of pointer to indicate to the user that it's clickable.

Each card has a specific class to define the background image. For example, the card01 class has a background image of "hero01.jpg" and it is centered, and when the user hovers over the card, the background image expands to 600px and the heading "h2" and the icons (social media links) become visible. This is achieved by setting the opacity to 0 and transition to 1s.

The h2 class is set to have a font-family of Montserrat, color of white, and a margin of 20px. The icons class is set to have a position of absolute, fill of white, and color of white. The top is set to 266px, width is set to 50px and the display is set to flex, so that the icons are vertically aligned.

Output:

Read Also:

Output:

Read Also:

Youtube Video:

A video tutorial for "Social Media Buttons with Hover Effect Using Html Css" is also available on YouTube. If you are interested in watching it and learning every step of this design, you can access it there.

Source Code:

Before downloading the source code, it is recommended that you first try writing the code yourself. Once you have done that, you can then compare it with the reference code.

Read Also:

Archive

Responsive Profile Card Ui | Html And Css

Responsive Profile Card Ui Using Html Css

Table Of Contents

HTML:

CSS:

Output:

Youtube Video:

Source Code:

Comments

Post a Comment