Mingdao Event Template 2

by hrsetyono

HTML

<main class="wrapper">
  <div class="inner">
    <article class="body">
      <header class="header">
        <h1>Mahjong Night</h1>
        <ul>
          <li>
            LTL
            <span>Beijing</span>
            <!-- insert city here -->
          </li>
        </ul>
      </header>
      <!-- paste the description here -->
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in
        accumsan est, dapibus suscipit neque. Sed ac nunc tellus. Cras ac est
        tincidunt risus tincidunt efficitur ut eget velit.
      </p>
    </article>
    <figure class="photo">
      <img
        src="https://p1.mingdaoyun.cn/6d427532-a341-4cf9-ac91-caafe15bc455/44f87ab9-25c5-4f01-8e6a-63f984e3ec55/62983410754aa231ad7a54fc/20260705/b43sdZ5W2A0w1U3Zaf0g0a4w363r081faC4ZbF2V0D6x7hfpfN7t9vdB0C3A8Bco.jpg?imageView2/2/w/1280/h/800"
      />
    </figure>
  </div>
</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;
  --mainAlt: #76A8D5;
  --sub: #fdd440;
  --text: #333333;

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

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*, body {
  margin: 0;
  padding: 0;
}

.wrapper {
  position: relative;
  display: flex;
  background-color: var(--main);
  width: 720px;
  min-height: 600px;
  padding: 64px;
  font-family: var(--fontFamily);
  color: var(--text);
}

.wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 240px;
  height: 375px;
  background: url('https://raw.github.com/hrsetyono/cdn/master/ltl-event/decor-top-back.png') no-repeat top right;
  background-size: 100% auto;
}

.wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 240px;
  height: 375px;
  background: url('https://raw.github.com/hrsetyono/cdn/master/ltl-event/decor-bot-back.png') no-repeat top left;
  background-size: 100% auto;
}

.inner {
  display: flex;
  flex-direction: column;
  z-index: 2;
  background-color: white;
}

.inner::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 240px;
  height: 240px;
  background: url('https://raw.github.com/hrsetyono/cdn/master/ltl-event/decor-top.png') no-repeat top right;
  background-size: 100% auto;
}

.inner::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 240px;
  height: 375px;
  background: url('https://raw.github.com/hrsetyono/cdn/master/ltl-event/decor-bot.png') no-repeat bottom left;
  background-size: 100% auto;
}

.header h1 {
  padding-right: 30px;
  font-size: 40px;
  font-weight: 700;
  color: var(--main);
  text-transform: uppercase;
}

.header ul {
  display:...