<div class="card" data-lang="English">
  <div class="card__heading">
    <h3>City Lights in New York</h3>
  </div>
  <div class="card__body">
    <p>New York, the largest city in the U.S., is an architectural marvel with plenty of historic monuments, magnificent buildings and countless dazzling skyscrapers.</p>
  </div>
</div>

<div class="card" data-lang="Arabic">
  <div class="card__heading">
    <h3>أضواء المدينة في نيويورك</h3>
  </div>
  <div class="card__body">
    <p>نيويورك ، أكبر مدينة في الولايات المتحدة ، هي أعجوبة معمارية مع الكثير من المعالم التاريخية والمباني الرائعة وناطحات السحاب الرائعة التي لا تعد ولا تحصى.</p>
  </div>
</div>

<div class="card" data-lang="Japanese">
  <div class="card__heading">
    <h3>ニューヨークの街の灯</h3>
  </div>
  <div class="card__body">
    <p>アメリカで最大の都市であるニューヨークは、数多くの歴史的建造物、壮大な建物、無数の見事な超高層ビルが建ち並ぶ建築の驚異です。</p>
  </div>
</div>

<div class="card" data-lang="Mongolian">
  <div class="card__heading">
    <h3>Нью Йорк дахь хотын гэрлүүд</h3>
  </div>
  <div class="card__body">
    <p>АНУ-ын хамгийн том хот болох Нью Йорк бол олон тооны түүхийн дурсгалт газрууд, гайхамшигтай барилга байгууламж, тоолж баршгүй олон тооны тэнгэр баганадсан барилга бүхий архитектурын гайхамшиг юм.</p>
  </div>
</div>
@import url("https://fonts.googleapis.com/css?family=Gochi+Hand");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #291642;
  font-family: "Gochi Hand", sans-serif;
  font-size: 130%;
  letter-spacing: 0.1rem;
  color: #fff;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5vh;
  padding: 5vh;
}

.card {
  background-color: #fff;
  background: linear-gradient(#f8f8f8, #fff);
  box-shadow: 0 8px 16px -8px rgba(0,0,0,0.4);
  border-radius: 6px;
  min-width: calc((100vw - 25vh) / 4)
}

.card__heading {
  background: linear-gradient(#dE685E, #EE786E);
  transition: width 0.4s;
  border-radius: 6px 6px 0 0;
  padding: 10px 15px;
  min-height: 20vh;
  display: flex;
  align-items: center;
}

.card__body {
  padding: 10px 15px;
  color: #444;
  line-height: 1.5;
  overflow: hidden;
}

[data-lang="English"] {
  writing-mode: lr-tb;
  direction: ltr;
}

[data-lang="Arabic"] {
  writing-mode: rl-tb;
  direction: rtl;
}

[data-lang="Arabic"] .card__heading {
  background: linear-gradient(#92bCa6, #A2CCB6);
}

[data-lang="Japanese"] {
  writing-mode: vertical-rl;
}

[data-lang="Japanese"] .card__heading{
  background: linear-gradient(#4094bc, #2783b9);
  border-radius: 0 6px 6px 0;
}

[data-lang="Mongolian"] {
  writing-mode: vertical-lr;
}

[data-lang="Mongolian"] .card__heading{
  background: linear-gradient(#673AB7, #8d59e9);
  border-radius: 6px 0 0 6px
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.