Card by Kagamiie
#212121
1.project-info { 2 padding: 100px 40px; 3 display: flex; 4 flex-direction: column; 5 gap: 20px; 6 position: relative; 7 top: -50px; 8} 9 10.project-title { 11 font-weight: 500; 12 font-size: 1.5em; 13 overflow: hidden; 14 text-overflow: ellipsis; 15 white-space: nowrap; 16 color: black; 17} 18 19.lighter { 20 font-size: 0.9em; 21} 22 23.flex { 24 display: flex; 25 justify-content: space-between; 26 align-items: center; 27} 28 29.tag { 30 font-weight: lighter; 31 color: grey; 32} 33 34/*DELETE THIS TWO LINE*/ 35.delete { 36 background-color: #b2b2fd; 37} 38 39.card-img div { 40 width: 90%; 41} 42/*IF USING IMAGES*/ 43 44.card { 45 background-color: white; 46 color: black; 47 width: 300px; 48 max-height: 330px; 49 border-radius: 8px; 50 box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, 51 rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; 52} 53 54.card-img { 55 position: relative; 56 top: -20px; 57 height: 100px; 58 display: flex; 59 justify-content: center; 60} 61 62/* Change the .card-img div to .card-img img to use img*/ 63.card-img a, 64.card-img div { 65 height: 150px; 66 width: 90%; 67 /* Change this width here to change the width of the color/image */ 68 object-fit: cover; 69 border-radius: 8px; 70 box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 71} 72 73.card-imgs { 74 transition: all 0.5s; 75} 76
1.3K views
1.3K views
MIT License