Business card

business-card.markdown

Business card

A prototype of a business card.

A Pen by Uvacoder on CodePen.

License.

index.pug

.card
  .card__inner
    .card__logo
      img(src="https://d33wubrfki0l68.cloudfront.net/c49573367a75156c7f5b3ba59105b902b3d382b1/b5774/gfx/svg/logo.svg", alt="Logo with Silvestar Bistrović's initials.")
      
    h1.card__title 
      span.card__name Silvestar Bistrović
      span.card__prefix MSc in EE
    h2.card__tagline Web Engineer
    ul.card__ul
      li.card__li
        a.card__link(href="https://www.silvestar.codes") www.silvestar.codes
      li
        a.card__link(href="mailto:me@silvestar.codes?Subject=Hello") me@silvestar.codes

style.scss

:root {
  --color-alpha: #e01258;
  --color-beta: #12e09f;
  --color-psi: #1f1f1f;
  --color-omega: #fff;
  --radius: 5px;
  --radius2: 3px;
  --width: 500px;
}

html {
  font-size: 17px;
  line-height: 1.25;
}

body {
  min-height: 98vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  display: flex;
  justify-content: stretch;
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  background-color: var(--color-alpha);
  background-image: linear-gradient(to bottom right, var(--color-alpha), var(--color-beta));
  position: relative;
  border-radius: var(--radius);
  width: var(--width);
  min-height: calc(2 / 3.5 * var(--width));
  max-width: 94%;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
}

.card__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--color-psi);
  border-radius: var(--radius2);
  position: relative;
  margin: var(--radius);
  padding: calc(var(--radius) * 4);
}

.card__logo {
  position: absolute;
  bottom: calc(var(--radius) * 2);
  right: var(--radius);
  
  img {
    display: block;
    max-width: 2rem;
  }
}

.card__title,
.card__tagline {
  margin-top: 0;
  letter-spacing: 0.05em;
}

.card__title {
  display: flex;
  flex-direction: column;
  text-align: right;
  margin-bottom: 2.5rem;
}

.card__prefix {
  color: var(--color-omega);
  font-size: .75rem;
  font-weight: 400;
  margin-bottom: 0;
}

.card__name {
  color: var(--color-beta);
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 2.5rem;
}

.card__tagline {
  color: var(--color-omega);
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.card__ul {
  list-style: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.card__link {
  color: var(--color-beta);
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  letter-spacing: 0.125em;
}

.card__back {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}