<template>
<el-row>
  <div class="hello">
    <img src="@/assets/manim.jpg" />
<el-col :span="8" :offset="5">
    <h1>{{ msg }}</h1>
</el-col>
<el-col :span="8" :offset="5">
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a href="https://github.com/cai-hust/manim-tutorial-CN" target="_blank">
          official_document
        </a>
      </li>
      <li>
        <a href="https://manim.ml/" target="_blank"> Document Type Tutorial </a>
      </li>
      <li>
        <a
          href="https://www.bilibili.com/video/BV1W4411Z7Zt?from=search&seid=6580109186460276345"
          target="_blank"
        >
          Video tutorial
        </a>
      </li>
    </ul>
    </el-col>
  </div>
  </el-row>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to The Manim's Web Design",
    };
  },
};
</script>

<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
img {
  float: left;
  width: 300px;
  height: 120px;
}
</style>
