Card by Javierrocadev
#212121
1.card { 2 width: 350px; 3 height: 350px; 4 background: #E8EAEA; 5 border-radius: 15px; 6 display: flex; 7 flex-direction: column; 8 justify-content: space-between; 9} 10 11.title, .more { 12 padding: 10px 15px; 13} 14 15.user { 16 display: flex; 17 flex-direction: row; 18 align-items: center; 19 justify-content: space-between; 20 padding: 10px 15px; 21} 22 23.user__content { 24 display: flex; 25 justify-content: space-between; 26 align-items: center; 27 flex-grow: 1; 28} 29 30.user__container { 31 display: flex; 32 flex-direction: column; 33} 34 35.title { 36 font-weight: 900; 37 font-size: 1.3em; 38} 39 40.name { 41 font-weight: 800; 42} 43 44.username { 45 font-size: .9em; 46 color: #64696e; 47} 48 49.image { 50 width: 60px; 51 height: 60px; 52 background: rgb(22,19,70); 53 background: linear-gradient(295deg, rgba(22,19,70,1) 41%, rgba(89,177,237,1) 100%); 54 border-radius: 50%; 55 margin-right: 15px; 56} 57 58.follow { 59 border: none; 60 border-radius: 25px; 61 background-color: #0f1113; 62 color: white; 63 padding: 8px 15px; 64 font-weight: 700; 65} 66 67.more { 68 display: block; 69 text-decoration: none; 70 color: rgb(29, 155, 240); 71 font-weight: 800; 72} 73 74.user:hover { 75 background-color: #b3b6b6; 76} 77 78.more:hover { 79 background-color: #b3b6b6; 80 border-radius: 0px 0px 15px 15px; 81} 82 83.follow:hover { 84 background-color: #2c3136; 85}
1.1K views
1.1K views
MIT License