前端--健康管理面板

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css">
    <title>健康管理面板</title>
</head>
<body>
    <div class="container">
        <div class="bg1">
            <h2>16 <span>| 24</span></h2>
            <p>完成目标数</p>
        </div>
        <div class="bg1">
            <h2><i class="fas fa-battery-three-quarters"></i></h2>
            <p>呼吸</p>
          </div>
          <div class="bg2">
            <h2><i class="fas fa-running"></i></h2>
            <p>公里</p>
          </div>
          <div class="bg1">
            <h2>36 &deg;</h2>
            <p>温度</p>
          </div>
          <div class="bg1">
            <h2><i class="fas fa-bed"></i></h2>
            <p>睡眠质量</p>
          </div>
          <div class="bg2">
            <h2>98 <span>bpm</span></h2>
            <p>心率</p>
          </div>
          <div class="bg1">
            <h2>50 <span>kg</span></h2>
            <p>体重</p>
          </div>
          <div class="bg1">
            <h2>20 <span>%</span></h2>
            <p>体脂率</p>
          </div>
          <div class="bg2">
            <h2>108 <span>mgdl</span></h2>
            <p>血糖</p>
          </div>
          <div class="bg2">
            <h2>680 <span>kcal</span></h2>
            <p>平均消耗</p>
          </div>
          <div class="bg2">
            <h2><i class="fas fa-dumbbell"></i></h2>
            <p>锻炼</p>
          </div>
          <div class="bg2">
            <h2>85 <span>%</span></h2>
            <p>身体含水量</p>
          </div>
    </div>
</body>
</html>

*{
    
    
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    
    
    background-color: #333;
    color: #fff;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

h2{
    
    
    font-size: 45px;
    font-weight: 300;
    margin: 10px;
}

h2 span{
    
    
    font-size: 30px;
}

p{
    
    
    font-size: 20px;
}

.container{
    
    
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap:10px;
    height: 100vh;
}

.container > div {
    
    
    cursor: pointer;
    background-size: cover;
    background-attachment: fixed;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.5s ease-in;
}
.container > div:hover{
    
    
    opacity: 0.7;
    transform: scale(0.98);
}

.container > div:nth-of-type(1){
    
    
    grid-column: 1 / 3;
}

.container > div:nth-of-type(6){
    
    
    grid-column: 3 / 5;
}

.container > div:nth-of-type(9){
    
    
    grid-column: 3 / 5;
}

.container > div:nth-of-type(10){
    
    
    grid-column: 1 / 3;
}

.bg1{
    
    
    background-image: url('./img/bg1.jpg');
}

.bg2{
    
    
    background-image: url('./img/bg2.jpg');
    color: #333;
}

前端--健康管理面板

猜你喜欢