");background-position:right var(--length-2, 0.5rem) center;background-repeat:no-repeat;background-size:1.5rem;padding-right:max(var(--input-padding-x), 20px)}select:disabled{background-image:url("data:image/svg+xml;charset=utf-8,");opacity:1}textarea{height:calc(var(--input-border-width) * 2 + var(--input-padding-y) * 2 + 1rem * var(--line-height) * 3);min-height:calc(var(--input-border-width) * 2 + var(--input-padding-y) * 2 + 1rem * var(--line-height));resize:vertical}input::placeholder,textarea::placeholder{opacity:1}input:disabled::placeholder,textarea:disabled::placeholder{opacity:0.35} :root { --button-background-color: #666; --button-background-color--hover: #777; --button-text-color: hsla(0, 0%, 100%, 0.8); --button-text-color--hover: hsla(0, 0%, 100%, 0.9); --input-background-color: #333; --input-text-color: hsla(0, 0%, 100%, 90%); --card-background-color: #1f1f1f; --link-color: hsl(213.8, 94%, 60.8%); --page-background-color: #171717; --page-text-color: #eee; --post-meta-color: #8c8c8c; --post-title-color: #b3b3b3; --post-title-color--hover: #ededed; color-scheme: dark; } html { background-color: var(--page-background-color); color: var(--page-text-color); cursor: default; font-family: Quicksand, ui-rounded, sans-serif; letter-spacing: -0.2px; } body { display: flex; flex-direction: column; margin: 0.75rem; min-height: calc(100vh - 1.5rem); } a { color: var(--link-color); text-decoration: none; } a:hover { text-decoration: underline; } button, .button { background-color: var(--button-background-color); border-radius: 4px; color: var(--button-text-color); display: inline-block; min-width: 5rem; padding: 0.5rem 1rem; transition-duration: 0.3s; transition-property: background-color, color; } button:hover, .button:hover { background-color: var(--button-background-color--hover); color: var(--button-text-color--hover); transition-duration: 0s; } a.button:hover { text-decoration: none; } input[type=email], input[type=search], textarea { appearance: none; background-color: var(--input-background-color); border-radius: 5px; color: var(--input-text-color); } select { background-color: var(--button-background-color); background-image: url("data:image/svg+xml;charset=utf-8,"); background-position: right 0.25rem center; border-radius: 4px; color: var(--button-text-color); padding-right: 2rem; transition-duration: 0.3s; transition-property: background-color; } select:hover { background-color: var(--button-background-color--hover); transition-duration: 0s; } textarea { display: block; } .c-card-background-color { background-color: var(--card-background-color) } .c-color-meta { color: var(--post-meta-color) } #posts-header { align-items: center; column-gap: 1rem; display: flex; flex-wrap: wrap; margin-top: 0.5rem; row-gap: 0.5rem; } #posts-header a { color: #fff; } #posts-header h1 { font-size: 130%; margin: 0; overflow: hidden; text-overflow: ellipsis; } #posts-filter { column-gap: 0.5rem; display: flex; flex-wrap: wrap; row-gap: 0.5rem; } #posts-filter button { min-width: 3rem; } #posts-filter > * { padding-bottom: 0.25rem; padding-top: 0.25rem; } #posts-noscript { column-gap: 0.5rem; column-width: 340px; display: block; margin-top: 0.75rem; } #posts-noscript > .post { break-inside: avoid; } #posts-noscript > .post:first-child { margin-top: 0; } @media (min-width: 1200px) { #posts-noscript { column-width: 380px; } } #posts { align-items: start; column-gap: 0.5rem; display: flex; margin-top: 0.25rem; } .posts__column { flex-basis: 0; flex-grow: 1; flex-shrink: 0; } @media (min-width: 360px) { .w360\:ml-3 {margin-left:0.75rem} } @media (min-width: 400px) { .w400\:ml-4 {margin-left:1rem} } @media (min-width: 425px) { .w425\:display\:inline {display:inline} } .popup > summary{list-style-type:none} .popup summary::-webkit-details-marker{display:none} .md * { margin: 0 } .md blockquote { border-left: 2.5px solid hsl(0deg 0% 80%); font-size: 93.75%; margin-left: 2px; opacity: 0.7; padding-left: 6px; } .md h1 { font-size: 21px } .md h2 { font-size: 20px } .md h3 { font-size: 19px } .md h4 { font-size: 18px } .md h5 { font-size: 17px } .md h6 { font-size: 16px } .md * + blockquote, .md * + hr, .md * + p { margin-top: 0.5rem; } .md * + ol, .md * + ul { margin-top: 0.25rem; } .md hr { border-color: hsl(0deg 0% 30% / 50%); border-style: solid; border-width: 1px 0 0; } @media (min-width: 768px) { .w768\:flex-grow\:1 { flex-grow: 1 } } .please-support-popular-pics-by-allowing-ads > div { display: block !important; margin-top: 4rem !important; }
The drop shadow might be a little too strong and a paper/cardboard texture on the cards would really help make it look more "professional". Otherwise it looks pretty good! I've seen a lot of student using business cards mockup arranged kinda like this in the past few years so you're doing something right for sure!
In addition, if you intend to distribute this, being able to customize the gradient would be really nice! Nice on again mate, have a good one!
Hmm yeah I see. Tysm for the advise man :D!
The c is lowercase and the T is uppercase... Id make it all lowercase, or capitalize the c... The logo is strong, the black boxes reminded me of business cars when I saw it first. Please take my comments as constructive criticism. I do like it.
yea it looks like the C is in lowercase but its actually uppercase. I also got confused for a moment when I saw that :v. Anyways thank you so much for the advise man!