LTL Summer Camp Nametag Beihai

by hrsetyono

HTML

<main class="wrapper">
<figure class="logo">
  <img src="https://raw.github.com/hrsetyono/cdn/master/ltl-nametag/logo-text2.png">
</figure>
<header class="header">
  <h1>Lucas Gasquet</h1>
  <h3>卢卡斯・加斯奎特</h3>
</header>
<article class="content">
  <ul class="allergies">
    <li>
      <strong>ALLERGIES</strong>
      <br> peanuts, shrimp
    </li>
    <li>
      <strong>过敏</strong>
      <br> 花生、虾
    </li>
  </ul>
  <p>
    <strong>
      EMERGENCY 紧急电话
     </strong>
    <br> <b>+86(0)07-7938-3324</b>
  </p>
</article>
<footer class="footer">
  <address class="footer__address">
    <h6>LTL SCHOOL BEIHAI</h6>
    <p>
      No. 0510, City Plaza, No. 183 Beihai Ave. Haicheng
      <br> 北海市海城区北海大道183号城市购物广场 0510号
    </p>
    <p>
      <strong>TEL:</strong> +86 (0) 07 7938 3324
      <br> www.ltl-school.com
    </p>
  </address>
  <figure class="footer__qr">
    <img class="footer__lex" src="https://raw.github.com/hrsetyono/cdn/master/ltl-nametag/lex-peeking.png">
    <!-- Generate QR here and download as PNG: https://new.express.adobe.com/tools/generate-qr-code -->
    <img src="https://raw.github.com/hrsetyono/cdn/master/ltl-nametag/qr-beihai-baidumap.png">
    <figcaption>BAIDU MAP</figcaption>
  </figure>
</footer>
</main>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:[email protected]&display=swap" rel="stylesheet">

CSS

:root {
  --main: #1070b6;
  --mainLight: #C8E0F6;
  --sub: #fdd440;

  --nameFontSize: 2rem;
  --hanziFontSize: 2.5rem;
  --pinyinFontSize: 1rem;
  --descriptionFontSize: 1rem;
  
  --fontFamily: "Noto Sans SC", sans-serif;
}

.wrapper {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--main);
  width: 450px;
  height: 620px;
  padding: 1.5rem;
  font-family: var(--fontFamily);
  color: #ffffff;
}

.logo {
  position: relative;
  margin: -1.5rem -1.5rem 0;
  padding: 0.75rem 1.25rem;
  background-color: var(--sub);
}
.logo::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0%;
  border-style: solid;
  border-color: transparent;
  border-width: 1.25rem 0 0 1.25rem;
  border-left-color: var(--main)
}
.logo img {
  max-width: 70%;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 80%;
  margin: auto auto 0;
  text-align: center;
}

.header h1 {
  margin-bottom: 1rem;
  font-size: 2.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--sub)
}

.content {
  margin-top: 1.25rem;
  font-size: 1.125rem;
}
.content ul {
  display: flex;
  column-gap: 1.25rem;
  row-gap: 1.25rem;
  padding: 0;
  list-style-type: none;
}
.content li {
  width: calc(50% - 0.625rem);
  margin-bottom: 0;
}
.content li:nth-child(odd) {
  text-align: left;
}
.content li:nth-child(even) {
  text-align: right;
}
.content strong {
  font-weight: 700;
  font-size: 1rem;
  color: var(--sub);
  letter-spacing: 0.075em;
}
.content b {
  font-size: 1.5rem;
  font-weight: 400;
}

.footer {
  display: flex;
  align-items: flex-end;
  margin-top: auto;
  font-size: 0.875rem;
}

.footer__address {
  flex: 4;
  margin-bottom: 0;
}
.footer__address h6 {
  margin-bottom: 0;
  color: var(--sub);
 ...