Service card 78 - YarTechnology

Back

Live Code Preview

Code Sections

HTML Code

<article class="card">
  <section class="card__hero">
    <header class="card__hero-header">
      <span>$150/hr</span>
      <div class="card__icon">
        <svg
          height="20"
          width="20"
          stroke="currentColor"
          stroke-width="1.5"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"
            stroke-linejoin="round"
            stroke-linecap="round"
          ></path>
        </svg>
      </div>
    </header>

    <p class="card__job-title">Senior Backend Engineer</p>
  </section>

  <footer class="card__footer">
    <div class="card__job-summary">
      <div class="card__job-icon">
        <svg
          height="35"
          width="28"
          viewBox="0 0 250 250"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill="#4285F4"
            d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
          ></path>
          <path
            fill="#34A853"
            d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
          ></path>
          <path
            fill="#FBBC05"
            d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"
          ></path>
          <path
            fill="#EB4335"
            d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
          ></path>
        </svg>
      </div>
      <div class="card__job">
        <p class="card__job-title">
          Senior Backend <br />
          Engineer
        </p>
      </div>
    </div>

    <button class="card__btn">view</button>
  </footer>
</article>

CSS Code

.card {
  margin: auto;
  width: min(300px, 100%);
  background-color: #fefefe;
  border-radius: 1rem;
  padding: 0.5rem;
  color: #141417;
}
.card__hero {
  background-color: #fef4e2;
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 1.5rem;
  font-size: 0.875rem;
}
.card__hero .card__job-title {
  margin: 2rem 0;
  font-size: 2rem;
  font-weight: 600;
  padding-right: 2rem;
}
.card__hero-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1rem;
  font-weight: 700;
}
.card__footer {
  display: flex;
  justify-content: flex-start;
  align-items: start;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 0.75rem;
  row-gap: 1rem;
  font-weight: 700;
  font-size: 0.875rem;
}
@media (min-width: 340px) {
  .card__footer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
}
.card__job-summary {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.75rem;
}
.card__btn {
  width: 100%;
  font-weight: 400;
  border: none;
  display: block;
  cursor: pointer;
  text-align: center;
  padding: 0.5rem 1.25rem;
  border-radius: 1rem;
  background-color: #141417;
  color: #fff;
  font-size: 1rem;
}
@media (min-width: 340px) {
  .card__btn {
    width: max-content;
  }
}