├── README.md
├── assets
├── css
│ └── styles.css
├── img
│ └── profile.png
└── scss
│ ├── base
│ └── _base.scss
│ ├── components
│ ├── _breakpoints.scss
│ └── _card.scss
│ ├── config
│ └── _variables.scss
│ └── styles.scss
├── index.html
└── preview.png
/README.md:
--------------------------------------------------------------------------------
1 | # Profile Card With Tooltip
2 | ## [Watch it on youtube](https://youtu.be/QN7xPfkfNmA)
3 | ### Profile Card With Tooltip
4 |
5 | - Profile Card With Tooltip Using HTML And CSS
6 | - Contains a profile image with a border.
7 | - Contains a tooltip card.
8 | - Developed first with the Mobile First methodology, then for desktop.
9 | - Compatible with all mobile devices and with a beautiful and pleasant user interface.
10 |
11 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/@Bedimcode)
12 |
13 | 
14 |
--------------------------------------------------------------------------------
/assets/css/styles.css:
--------------------------------------------------------------------------------
1 | /*=============== GOOGLE FONTS ===============*/
2 | @import url("https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600&display=swap");
3 |
4 | /*=============== VARIABLES CSS ===============*/
5 | :root {
6 | /*========== Colors ==========*/
7 | /*Color mode HSL(hue, saturation, lightness)*/
8 | --first-color: hsl(230, 100%, 50%);
9 | --second-color: hsl(150, 100%, 38%);
10 | --title-color: hsl(230, 24%, 12%);
11 | --text-color: hsl(230, 4%, 60%);
12 | --gray-color: hsl(230, 24%, 88%);
13 | --border-color: hsl(230, 4%, 92%);
14 | --body-color: hsl(230, 100%, 98%);
15 | --container-color: hsl(0, 0%, 100%);
16 |
17 | /*========== Font and typography ==========*/
18 | /*.5rem = 8px | 1rem = 16px ...*/
19 | --body-font: "Syne", sans-serif;
20 | --h2-font-size: 1.25rem;
21 | --normal-font-size: 1rem;
22 | }
23 |
24 | /*=============== BASE ===============*/
25 | * {
26 | box-sizing: border-box;
27 | padding: 0;
28 | margin: 0;
29 | }
30 |
31 | body {
32 | font-family: var(--body-font);
33 | font-size: var(--normal-font-size);
34 | background-color: var(--body-color);
35 | color: var(--text-color);
36 | }
37 |
38 | a {
39 | text-decoration: none;
40 | }
41 |
42 | img {
43 | display: block;
44 | max-width: 100%;
45 | height: auto;
46 | }
47 |
48 | /*=============== CARD ===============*/
49 | .container {
50 | height: 100vh;
51 | display: grid;
52 | place-items: center;
53 | margin-inline: 1.5rem;
54 | padding-block: 7rem;
55 | }
56 |
57 | .card__article {
58 | position: relative;
59 | align-self: flex-end;
60 | display: flex;
61 | justify-content: center;
62 | }
63 |
64 | .card__profile,
65 | .card__mask {
66 | width: 100px;
67 | height: 100px;
68 | background-color: var(--gray-color);
69 | border-radius: 50%;
70 | overflow: hidden;
71 | display: flex;
72 | justify-content: center;
73 | align-items: flex-end;
74 | }
75 |
76 | .card__profile img,
77 | .card__mask img {
78 | width: 95px;
79 | }
80 |
81 | .card__profile {
82 | border: 4px solid var(--container-color);
83 | z-index: 5;
84 | transition: opacity .4s, transform .4s;
85 | }
86 |
87 | .card__tooltip {
88 | position: absolute;
89 | bottom: -2rem;
90 | padding-bottom: 5rem;
91 | transition: opacity .4s, bottom .4s cubic-bezier(.6, -.5, .3, 1.5);
92 | pointer-events: none;
93 | opacity: 0;
94 | }
95 |
96 | .card__content {
97 | position: relative;
98 | width: calc(100vw - 3rem);
99 | background-color: var(--container-color);
100 | box-shadow: 0 16px 32px hsla(230, 50%, 20%, .1);
101 | padding: 2rem 1.5rem;
102 | border-radius: 1.5rem;
103 | }
104 |
105 | .card__content::after {
106 | content: "";
107 | width: 32px;
108 | height: 32px;
109 | background-color: var(--container-color);
110 | position: absolute;
111 | left: 0;
112 | right: 0;
113 | bottom: -.75rem;
114 | margin-inline: auto;
115 | border-radius: .25rem;
116 | rotate: 45deg;
117 | }
118 |
119 | .card__header {
120 | display: flex;
121 | justify-content: space-between;
122 | align-items: center;
123 | border-bottom: 1px solid var(--border-color);
124 | padding-bottom: 1.5rem;
125 | margin-bottom: 1.5rem;
126 | }
127 |
128 | .card__header span {
129 | color: var(--title-color);
130 | font-weight: 500;
131 | }
132 |
133 | .card__social {
134 | display: flex;
135 | column-gap: .75rem;
136 | }
137 |
138 | .card__social a {
139 | font-size: 1.25rem;
140 | color: var(--title-color);
141 | }
142 |
143 | .card__image {
144 | width: 100px;
145 | height: 100px;
146 | position: relative;
147 | margin: 0 auto 1rem;
148 | }
149 |
150 | .card__status {
151 | width: 12px;
152 | height: 12px;
153 | background-color: var(--second-color);
154 | position: absolute;
155 | top: .5rem;
156 | right: .75rem;
157 | border-radius: 50%;
158 | border: 2px solid var(--container-color);
159 | }
160 |
161 | .card__data {
162 | text-align: center;
163 | }
164 |
165 | .card__name {
166 | font-size: var(--h2-font-size);
167 | color: var(--title-color);
168 | font-weight: 600;
169 | margin-bottom: .25rem;
170 | }
171 |
172 | .card__profession {
173 | font-size: var(--normal-font-size);
174 | font-weight: 500;
175 | margin-bottom: 2rem;
176 | }
177 |
178 | .card__button {
179 | display: inline-flex;
180 | align-items: center;
181 | column-gap: .5rem;
182 | color: var(--first-color);
183 | font-weight: 500;
184 | }
185 |
186 | .card__button i {
187 | font-size: 1.25rem;
188 | }
189 |
190 | /* Scale profile image */
191 | .card__article:hover .card__profile {
192 | transform: scale(.8);
193 | opacity: .7;
194 | }
195 |
196 | /* Show tooltip card */
197 | .card__article:hover .card__tooltip {
198 | opacity: 1;
199 | pointer-events: initial;
200 | bottom: 4rem;
201 | }
202 |
203 | /*=============== BREAKPOINTS ===============*/
204 | /* For medium devices */
205 | @media screen and (min-width: 540px) {
206 | .card__content {
207 | width: 380px;
208 | padding-inline: 2rem;
209 | }
210 | }
211 |
--------------------------------------------------------------------------------
/assets/img/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/profile-card-with-tooltip/6f067234c0a17fc7b1af266a0a6efc003b24e469/assets/img/profile.png
--------------------------------------------------------------------------------
/assets/scss/base/_base.scss:
--------------------------------------------------------------------------------
1 | /*=============== BASE ===============*/
2 | *{
3 | box-sizing: border-box;
4 | padding: 0;
5 | margin: 0;
6 | }
7 |
8 | body{
9 | font-family: var(--body-font);
10 | font-size: var(--normal-font-size);
11 | background-color: var(--body-color);
12 | color: var(--text-color);
13 | }
14 |
15 | a{
16 | text-decoration: none;
17 | }
18 |
19 | img{
20 | display: block;
21 | max-width: 100%;
22 | height: auto;
23 | }
--------------------------------------------------------------------------------
/assets/scss/components/_breakpoints.scss:
--------------------------------------------------------------------------------
1 | /*=============== BREAKPOINTS ===============*/
2 | /* For medium devices */
3 | @media screen and (min-width: 540px){
4 | .card__content{
5 | width: 380px;
6 | padding-inline: 2rem;
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/assets/scss/components/_card.scss:
--------------------------------------------------------------------------------
1 | /*=============== CARD ===============*/
2 | .container{
3 | height: 100vh;
4 | display: grid;
5 | place-items: center;
6 | margin-inline: 1.5rem;
7 | padding-block: 7rem;
8 | }
9 |
10 | .card{
11 | &__article{
12 | position: relative;
13 | align-self: flex-end;
14 | display: flex;
15 | justify-content: center;
16 | }
17 | &__profile,
18 | &__mask{
19 | width: 100px;
20 | height: 100px;
21 | background-color: var(--gray-color);
22 | border-radius: 50%;
23 | overflow: hidden;
24 | display: flex;
25 | justify-content: center;
26 | align-items: flex-end;
27 |
28 | & img{
29 | width: 95px;
30 | }
31 | }
32 | &__profile{
33 | border: 4px solid var(--container-color);
34 | z-index: 5;
35 | transition: opacity .4s, transform .4s;
36 | }
37 | &__tooltip{
38 | position: absolute;
39 | bottom: -2rem;
40 | padding-bottom: 5rem;
41 | transition: opacity .4s, bottom .4s cubic-bezier(.6, -.5, .3, 1.5);
42 | pointer-events: none;
43 | opacity: 0;
44 | }
45 | &__content{
46 | position: relative;
47 | width: calc(100vw - 3rem);
48 | background-color: var(--container-color);
49 | box-shadow: 0 16px 32px hsla(230, 50%, 20%, .1);
50 | padding: 2rem 1.5rem;
51 | border-radius: 1.5rem;
52 |
53 | &::after{
54 | content: '';
55 | width: 32px;
56 | height: 32px;
57 | background-color: var(--container-color);
58 | position: absolute;
59 | left: 0;
60 | right: 0;
61 | bottom: -.75rem;
62 | margin-inline: auto;
63 | border-radius: .25rem;
64 | rotate: 45deg;
65 | }
66 | }
67 | &__header{
68 | display: flex;
69 | justify-content: space-between;
70 | align-items: center;
71 | border-bottom: 1px solid var(--border-color);
72 | padding-bottom: 1.5rem;
73 | margin-bottom: 1.5rem;
74 |
75 | & span{
76 | color: var(--title-color);
77 | font-weight: 500;
78 | }
79 | }
80 | &__social{
81 | display: flex;
82 | column-gap: .75rem;
83 |
84 | & a{
85 | font-size: 1.25rem;
86 | color: var(--title-color);
87 | }
88 | }
89 | &__image{
90 | width: 100px;
91 | height: 100px;
92 | position: relative;
93 | margin: 0 auto 1rem;
94 | }
95 | &__status{
96 | width: 12px;
97 | height: 12px;
98 | background-color: var(--second-color);
99 | position: absolute;
100 | top: .5rem;
101 | right: .75rem;
102 | border-radius: 50%;
103 | border: 2px solid var(--container-color);
104 | }
105 | &__data{
106 | text-align: center;
107 | }
108 | &__name{
109 | font-size: var(--h2-font-size);
110 | color: var(--title-color);
111 | font-weight: 600;
112 | margin-bottom: .25rem;
113 | }
114 | &__profession{
115 | font-size: var(--normal-font-size);
116 | font-weight: 500;
117 | margin-bottom: 2rem;
118 | }
119 | &__button{
120 | display: inline-flex;
121 | align-items: center;
122 | column-gap: .5rem;
123 | color: var(--first-color);
124 | font-weight: 500;
125 |
126 | & i{
127 | font-size: 1.25rem;
128 | }
129 | }
130 | }
131 |
132 | .card{
133 | // Scale profile image
134 | &__article:hover &__profile{
135 | transform: scale(.8);
136 | opacity: .7;
137 | }
138 | // Show tooltip card
139 | &__article:hover &__tooltip{
140 | opacity: 1;
141 | pointer-events: initial;
142 | bottom: 4rem;
143 | }
144 | }
--------------------------------------------------------------------------------
/assets/scss/config/_variables.scss:
--------------------------------------------------------------------------------
1 | /*=============== GOOGLE FONTS ===============*/
2 | @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600&display=swap');
3 |
4 | /*=============== VARIABLES CSS ===============*/
5 | :root{
6 | /*========== Colors ==========*/
7 | /*Color mode HSL(hue, saturation, lightness)*/
8 | --first-color: hsl(230, 100%, 50%);
9 | --second-color: hsl(150, 100%, 38%);
10 | --title-color: hsl(230, 24%, 12%);
11 | --text-color: hsl(230, 4%, 60%);
12 | --gray-color: hsl(230, 24%, 88%);
13 | --border-color: hsl(230, 4%, 92%);
14 | --body-color: hsl(230, 100%, 98%);
15 | --container-color: hsl(0, 0%, 100%);
16 |
17 | /*========== Font and typography ==========*/
18 | /*.5rem = 8px | 1rem = 16px ...*/
19 | --body-font: 'Syne', sans-serif;
20 |
21 | --h2-font-size: 1.25rem;
22 | --normal-font-size: 1rem;
23 | }
24 |
--------------------------------------------------------------------------------
/assets/scss/styles.scss:
--------------------------------------------------------------------------------
1 | @import 'config/variables';
2 | @import 'base/base';
3 | @import 'components/card';
4 | @import 'components/breakpoints';
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | Profile card with tooltip - Bedimcode
14 |
15 |
16 |
17 |
18 |
19 |
20 |
61 |