Frontend Mentor - Order summary card solution

This is a solution to the Order summary card challenge on Frontend Mentor.

Table of contents

• Frontend Mentor - Order summary card solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development

Overview

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshot

Links

• Solution URL: https://github.com/effycoco/order-summary-frontendmentorchallenge
• Live Site URL: https://effycoco.github.io/order-summary-frontendmentorchallenge/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

1. 制作卡片：不同背景色 + box-shadow
2. 利用 flex 使多行字居中

<div class="container">
  <div class="item">
    <h1></h1>
    <p></p>
  </div>
</div>

.container {
  display: flex;
  align-items: center;
}

3. 使用 overflow:hidden 处理圆角容器中的图片

4. CSS variables 用法

:root {
  --pale-blue: hsl(225, 100%, 94%);
  --bright-blue: hsl(245, 75%, 52%);
  --very-pale-blue: hsl(225, 100%, 98%);
  --desaturated-blue: hsl(224, 23%, 55%);
  --dark-blue: hsl(223, 47%, 23%);
}
body {
  background-color: var(--pale-blue);
}

5. repsonsive design 原则：mobile first.

Continued development

需多练习由宏观至微观、由外至内的布局思路