├── LICENSE ├── README.md ├── assets ├── css │ └── styles.css ├── img │ └── profile-img.png ├── js │ └── main.js └── scss │ ├── base │ └── _base.scss │ ├── components │ └── _card.scss │ ├── config │ └── _variables.scss │ └── styles.scss ├── index.html └── preview.png /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Bedimcode 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Profile Card UI Design 2 | ## [Watch it on youtube](https://youtu.be/M_eF5oUzilg) 3 | ### Profile Card UI Design 4 | 5 | - Profile Card UI Design Using HTML CSS & JavaScript 6 | - Animated profile card with social media. 7 | - With a beautiful minimalist interface. 8 | 9 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/c/Bedimcode) 10 | 11 | ![preview img](/preview.png) 12 | -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"); 3 | /*=============== VARIABLES CSS ===============*/ 4 | :root { 5 | /*========== Colors ==========*/ 6 | /*Color mode HSL(hue, saturation, lightness)*/ 7 | --first-color: hsl(29, 80%, 58%); 8 | --first-color-light: hsl(29, 80%, 70%); 9 | --black-color: hsl(29, 16%, 10%); 10 | --text-color: hsl(29, 8%, 65%); 11 | --body-color: hsl(29, 100%, 99%); 12 | /*========== Font and typography ==========*/ 13 | /*.5rem = 8px | 1rem = 16px ...*/ 14 | --body-font: "Poppins", sans-serif; 15 | --h3-font-size: 1.125rem; 16 | --smaller-font-size: .75rem; 17 | } 18 | 19 | /*=============== BASE ===============*/ 20 | * { 21 | box-sizing: border-box; 22 | padding: 0; 23 | margin: 0; 24 | } 25 | 26 | body { 27 | font-family: var(--body-font); 28 | background-color: var(--body-color); 29 | } 30 | 31 | a { 32 | text-decoration: none; 33 | } 34 | 35 | ul { 36 | list-style: none; 37 | } 38 | 39 | img { 40 | max-width: 100%; 41 | height: auto; 42 | } 43 | 44 | /*=============== CARD ===============*/ 45 | .container { 46 | height: 100vh; 47 | margin-inline: 1.5rem; 48 | display: grid; 49 | place-items: center; 50 | } 51 | 52 | .card { 53 | position: relative; 54 | width: 256px; 55 | background-color: var(--black-color); 56 | padding: 1.25rem 2rem 3rem; 57 | border-radius: 1.5rem; 58 | text-align: center; 59 | box-shadow: 0 4px 16px hsla(29, 75%, 8%, 0.2); 60 | } 61 | .card__img { 62 | width: 96px; 63 | border-radius: 50%; 64 | } 65 | .card__border { 66 | width: 110px; 67 | height: 110px; 68 | border: 2px solid var(--first-color); 69 | border-radius: 50%; 70 | display: grid; 71 | place-items: center; 72 | margin: 0 auto 0.75rem; 73 | } 74 | .card__name { 75 | color: var(--first-color); 76 | font-size: var(--h3-font-size); 77 | font-weight: 500; 78 | } 79 | .card__profession { 80 | color: var(--text-color); 81 | font-size: var(--smaller-font-size); 82 | font-weight: 500; 83 | } 84 | .card__social { 85 | width: 200px; 86 | background-color: var(--first-color); 87 | padding: 0.75rem; 88 | border-radius: 3rem; 89 | text-align: initial; 90 | box-shadow: 0 8px 24px hsla(29, 75%, 56%, 0.3); 91 | position: absolute; 92 | left: 0; 93 | right: 0; 94 | bottom: -1.75rem; 95 | margin: 0 auto; 96 | overflow: hidden; 97 | transform-origin: 18px 17px; 98 | } 99 | .card__social-control { 100 | position: relative; 101 | transform-origin: 18px 18px; 102 | transition: transform 0.45s ease; 103 | transform: rotate(0); 104 | } 105 | .card__social-toggle { 106 | display: inline-flex; 107 | background-color: var(--black-color); 108 | color: var(--first-color); 109 | font-size: 1.25rem; 110 | padding: 0.5rem; 111 | border-radius: 50%; 112 | cursor: pointer; 113 | position: relative; 114 | z-index: 10; 115 | } 116 | .card__social-text { 117 | display: block; 118 | color: var(--black-color); 119 | font-size: var(--smaller-font-size); 120 | font-weight: 500; 121 | } 122 | .card__social-list { 123 | display: inline-flex; 124 | column-gap: 0.75rem; 125 | transform: rotate(135deg); 126 | transform-origin: 18px 17px; 127 | } 128 | .card__social-link { 129 | display: inline-flex; 130 | background-color: var(--first-color-light); 131 | color: var(--black-color); 132 | font-size: 1.25rem; 133 | padding: 6px; 134 | border-radius: 50%; 135 | } 136 | .card__social-text, .card__social-list { 137 | position: absolute; 138 | top: 0; 139 | left: 0; 140 | right: 0; 141 | padding-left: 3.1rem; 142 | } 143 | .card__social-text { 144 | top: 0.5rem; 145 | } 146 | 147 | /* Rotate social */ 148 | .animation .card__social-control { 149 | transform: rotate(-135deg); 150 | } 151 | 152 | /* Up animation */ 153 | .card__social.animation { 154 | animation: up-animation 1s ease-in-out forwards; 155 | } 156 | 157 | @keyframes up-animation { 158 | 0%, 100% { 159 | transform: rotate(0); 160 | } 161 | 50%, 60% { 162 | transform: rotate(-3deg); 163 | } 164 | 88% { 165 | transform: rotate(1deg); 166 | } 167 | } 168 | /* Down animation */ 169 | .card__social.down-animation { 170 | animation: down-animation 1s ease-in-out forwards; 171 | } 172 | 173 | @keyframes down-animation { 174 | 0%, 100% { 175 | transform: rotate(0); 176 | } 177 | 50%, 60% { 178 | transform: rotate(6deg); 179 | } 180 | 88% { 181 | transform: rotate(-1deg); 182 | } 183 | } -------------------------------------------------------------------------------- /assets/img/profile-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/profile-card-ui-design/494eb0d75f44cf53701e362fc10d6b36076555a8/assets/img/profile-img.png -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | /*=============== SHOW SOCIAL NETWORKS ===============*/ 2 | const showSocial = (toggleCard, socialCard) =>{ 3 | const toggle = document.getElementById(toggleCard), 4 | social = document.getElementById(socialCard) 5 | 6 | toggle.addEventListener('click', ()=>{ 7 | // If the animation class exists, we add the down-animation class 8 | if(social.classList.contains('animation')){ 9 | social.classList.add('down-animation') 10 | 11 | // We remove the down-animation class 12 | setTimeout(() =>{ 13 | social.classList.remove('down-animation') 14 | }, 1000) 15 | } 16 | 17 | // We add the animation class to the div tag with the card__social class 18 | social.classList.toggle('animation') 19 | }) 20 | } 21 | showSocial('card-toggle','card-social') -------------------------------------------------------------------------------- /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 | background-color: var(--body-color); 11 | } 12 | 13 | a{ 14 | text-decoration: none; 15 | } 16 | 17 | ul{ 18 | list-style: none; 19 | } 20 | 21 | img{ 22 | max-width: 100%; 23 | height: auto; 24 | } -------------------------------------------------------------------------------- /assets/scss/components/_card.scss: -------------------------------------------------------------------------------- 1 | /*=============== CARD ===============*/ 2 | .container{ 3 | height: 100vh; 4 | margin-inline: 1.5rem; 5 | display: grid; 6 | place-items: center; 7 | } 8 | 9 | .card{ 10 | position: relative; 11 | width: 256px; 12 | background-color: var(--black-color); 13 | padding: 1.25rem 2rem 3rem; 14 | border-radius: 1.5rem; 15 | text-align: center; 16 | box-shadow: 0 4px 16px hsla(29, 75%, 8%, .2); 17 | 18 | &__img{ 19 | width: 96px; 20 | border-radius: 50%; 21 | } 22 | &__border{ 23 | width: 110px; 24 | height: 110px; 25 | border: 2px solid var(--first-color); 26 | border-radius: 50%; 27 | display: grid; 28 | place-items: center; 29 | margin: 0 auto .75rem; 30 | } 31 | &__name{ 32 | color: var(--first-color); 33 | font-size: var(--h3-font-size); 34 | font-weight: 500; 35 | } 36 | &__profession{ 37 | color: var(--text-color); 38 | font-size: var(--smaller-font-size); 39 | font-weight: 500; 40 | } 41 | &__social{ 42 | width: 200px; 43 | background-color: var(--first-color); 44 | padding: .75rem; 45 | border-radius: 3rem; 46 | text-align: initial; 47 | box-shadow: 0 8px 24px hsla(29, 75%, 56%, .3); 48 | position: absolute; 49 | left: 0; 50 | right: 0; 51 | bottom: -1.75rem; 52 | margin: 0 auto; 53 | overflow: hidden; 54 | transform-origin: 18px 17px; 55 | 56 | &-control{ 57 | position: relative; 58 | transform-origin: 18px 18px; 59 | transition: transform .45s ease; 60 | transform: rotate(0); 61 | } 62 | 63 | &-toggle{ 64 | display: inline-flex; 65 | background-color: var(--black-color); 66 | color: var(--first-color); 67 | font-size: 1.25rem; 68 | padding: .5rem; 69 | border-radius: 50%; 70 | cursor: pointer; 71 | position: relative; 72 | z-index: 10; 73 | } 74 | &-text{ 75 | display: block; 76 | color: var(--black-color); 77 | font-size: var(--smaller-font-size); 78 | font-weight: 500; 79 | } 80 | &-list{ 81 | display: inline-flex; 82 | column-gap: .75rem; 83 | transform: rotate(135deg); 84 | transform-origin: 18px 17px; 85 | } 86 | &-link { 87 | display: inline-flex; 88 | background-color: var(--first-color-light); 89 | color: var(--black-color); 90 | font-size: 1.25rem; 91 | padding: 6px; 92 | border-radius: 50%; 93 | } 94 | &-text, 95 | &-list{ 96 | position: absolute; 97 | top: 0; 98 | left: 0; 99 | right: 0; 100 | padding-left: 3.1rem; 101 | } 102 | &-text{ 103 | top: .5rem; 104 | } 105 | } 106 | } 107 | /* Rotate social */ 108 | .animation .card__social-control{ 109 | transform: rotate(-135deg); 110 | } 111 | 112 | /* Up animation */ 113 | .card__social.animation{ 114 | animation: up-animation 1s ease-in-out forwards; 115 | } 116 | 117 | @keyframes up-animation { 118 | 0%, 100% { 119 | transform: rotate(0); 120 | } 121 | 50%, 60% { 122 | transform: rotate(-3deg); 123 | } 124 | 88% { 125 | transform: rotate(1deg); 126 | } 127 | } 128 | 129 | /* Down animation */ 130 | .card__social.down-animation{ 131 | animation: down-animation 1s ease-in-out forwards; 132 | } 133 | 134 | @keyframes down-animation { 135 | 0%, 100% { 136 | transform: rotate(0); 137 | } 138 | 50%, 60% { 139 | transform: rotate(6deg); 140 | } 141 | 88% { 142 | transform: rotate(-1deg); 143 | } 144 | } -------------------------------------------------------------------------------- /assets/scss/config/_variables.scss: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap'); 3 | 4 | /*=============== VARIABLES CSS ===============*/ 5 | :root{ 6 | /*========== Colors ==========*/ 7 | /*Color mode HSL(hue, saturation, lightness)*/ 8 | --first-color: hsl(29, 80%, 58%); 9 | --first-color-light: hsl(29, 80%, 70%); 10 | --black-color: hsl(29, 16%, 10%); 11 | --text-color: hsl(29, 8%, 65%); 12 | --body-color: hsl(29, 100%, 99%); 13 | 14 | /*========== Font and typography ==========*/ 15 | /*.5rem = 8px | 1rem = 16px ...*/ 16 | --body-font: 'Poppins', sans-serif; 17 | 18 | --h3-font-size: 1.125rem; 19 | --smaller-font-size: .75rem; 20 | } -------------------------------------------------------------------------------- /assets/scss/styles.scss: -------------------------------------------------------------------------------- 1 | @import 'config/variables'; 2 | @import 'base/base'; 3 | @import 'components/card'; -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Profile card ui design - Bedimcode 14 | 15 | 16 |
17 |
18 |
19 | card image 20 |
21 | 22 |

Emily Jules

23 | UI/UX Designer 24 | 25 | 50 |
51 |
52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/profile-card-ui-design/494eb0d75f44cf53701e362fc10d6b36076555a8/preview.png --------------------------------------------------------------------------------