Card by Rodrypaladin
#e8e8e8
1.card { 2 width: 210px; 3 height: 400px; 4 background: black; 5 border-radius: 35px; 6 border: 2px solid rgb(40, 40, 40); 7 padding: 7px; 8 position: relative; 9 box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.486); 10} 11 12.card-int { 13 background-image: linear-gradient(to right bottom, #ff0000, #ff0045, #ff0078, #ea00aa, #b81cd7, #8a3ad6, #5746cf, #004ac2, #003d94, #002e66, #001d3a, #020812); 14 background-size: 200% 200%; 15 background-position: 0% 0%; 16 height: 100%; 17 border-radius: 25px; 18 transition: all 0.6s ease-out; 19 overflow: hidden; 20} 21 22.card:hover .card-int { 23 background-position: 100% 100%; 24} 25 26.top { 27 position: absolute; 28 top: 0px; 29 right: 50%; 30 transform: translate(50%, 0%); 31 width: 35%; 32 height: 18px; 33 background-color: black; 34 border-bottom-left-radius: 10px; 35 border-bottom-right-radius: 10px; 36} 37 38.speaker { 39 position: absolute; 40 top: 2px; 41 right: 50%; 42 transform: translate(50%, 0%); 43 width: 40%; 44 height: 2px; 45 border-radius: 2px; 46 background-color: rgb(20, 20, 20); 47} 48 49.camera { 50 position: absolute; 51 top: 6px; 52 right: 84%; 53 transform: translate(50%, 0%); 54 width: 6px; 55 height: 6px; 56 border-radius: 50%; 57 background-color: rgba(255, 255, 255, 0.048); 58} 59 60.int { 61 position: absolute; 62 width: 3px; 63 height: 3px; 64 border-radius: 50%; 65 top: 50%; 66 right: 50%; 67 transform: translate(50%, -50%); 68 background-color: rgba(0, 0, 255, 0.212); 69} 70 71.btn1, .btn2, .btn3, .btn4 { 72 position: absolute; 73 width: 2px; 74} 75 76.btn1, .btn2, .btn3 { 77 height: 45px; 78 top: 30%; 79 right: -4px; 80 background-image: linear-gradient(to right, #111111, #222222, #333333, #464646, #595959); 81} 82 83.btn2, .btn3 { 84 transform: scale(-1); 85 left: -4px; 86} 87 88.btn2, .btn3 { 89 transform: scale(-1); 90 height: 30px; 91} 92 93.btn2 { 94 top: 26% 95} 96 97.btn3 { 98 top: 36% 99} 100 101.hello { 102 display: flex; 103 flex-flow: column; 104 align-items: center; 105 justify-content: center; 106 color: white; 107 font-size: 2rem; 108 font-weight: bold; 109 text-align: center; 110 line-height: 35px; 111 height: 100%; 112 transition: 0.5s ease-in-out; 113} 114 115.hidden { 116 display: block; 117 opacity: 0; 118 transition: all 0.3s ease-in; 119} 120 121.card:hover .hidden { 122 opacity: 1; 123} 124 125.card:hover .hello { 126 transform: translateY(-20px); 127} 128 129 130
1.2K views
1.2K views
MIT License