CSS手提包卡片UI设计

  <h1>手提包卡片</h1>
  <ul class="ul-cards">
      <li style="--accent-color: #68AFFF">
          <div class="icon"><i class="fa-solid fa-user"></i></div>
          <div class="title">Bi.cool</div>
          <div class="content">一个能够在线编辑/实时预览你的HTML/CSS/JS代码的网站</div>
      </li>
      <li style="--accent-color: #FFA44B">
          <div class="icon"><i class="fa-solid fa-house"></i></div>
          <div class="title">HTML 5</div>
          <div class="content">HTML5是超文本标记语言（HTML）的第五个也是最新的重要版本，它在原有HTML标准的基础上进行了大幅改进和扩展，旨在提供更加强大和灵活的网页制作能力。</div>
      </li>
      <li style="--accent-color: #EF6968">
          <div class="icon"><i class="fa-solid fa-wifi"></i></div>
          <div class="title">CSS 3</div>
          <div class="content">CSS3是层叠样式表技术的升级版，它通过新增的特性如动画、变换、过渡以及更强大的选择器和布局模型，极大地丰富了网页设计的视觉效果和交互能力，同时保持了与早期版本的良好兼容性。</div>
      </li>
      <li style="--accent-color: #0ED2D1">
          <div class="icon"><i class="fa-solid fa-cart-shopping"></i></div>
          <div class="title">Javascript</div>
          <div class="content">JavaScript 是一种广泛用于网页开发的轻量级、解释型或即时编译型的编程语言，它支持面向对象、命令式和声明式风格，具有动态类型、基于原型的特点，并内置了支持常用任务的库。</div>
      </li>
      <li style="--accent-color: #c66fa7">
          <div class="icon"><i class="fa-solid fa-car"></i></div>
          <div class="title">Vue.js</div>
          <div class="content">Vue.js是一款轻量级的渐进式JavaScript框架，用于构建用户界面，以其易用性、灵活性和高效性著称，适用于从简单到复杂的各种规模的Web应用开发。</div>
      </li>
      <li style="--accent-color: #ccb033">
          <div class="icon"><i class="fa-brands fa-codepen"></i></div>
          <div class="title">Github</div>
          <div class="content">GitHub是一个广受欢迎的开源代码托管平台，它让开发者能够轻松共享、协作和版本控制他们的项目，从而推动软件开发的创新与合作。</div>
      </li>

  </ul>