Hoàn thiện các thuộc tính CSS Card Component trong Courses Section

<div class="card__side card__side--front">
<div class="card__picture card__picture--1">
&nbsp;   <!--- KÍ TỰ RỖNG TRONG HTML -->
</div>
<h4 class="card__heading">
<span class="card__heading-span card__heading-span--1">
Control <br> your time
</span>

</h4>
<div class="card__details">
<ul>
<li>3 hours</li>
<li>1000 students</li>
<li>5 star rated</li>
</ul>

</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="card__side card__side--front">
<div class="card__picture card__picture--2">
&nbsp;
</div>
<h4 class="card__heading">
<span class="card__heading-span card__heading-span--2">
make <br> mindmap
</span>

</h4>
<div class="card__details">
<ul>
<li>10 hours</li>
<li>5000 students</li>
<li>5 star rated</li>
</ul>

</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="card__side card__side--front">
<div class="card__picture card__picture--3">
&nbsp;
</div>
<h4 class="card__heading">
<span class="card__heading-span card__heading-span--3">
make<br> your target
</span>

</h4>
<div class="card__details">
<ul>
<li>15 hours</li>
<li>5000 students</li>
<li>5 star rated</li>
</ul>

</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//abstracts/_variables.scss
$color-secondary-light: #ffb900; //Màu Cam
$color-secondary-dark: #ff7730;

$color-tertiary-light:#55c57a; // Màu xanh lá cây
$color-tertiary-dark:#28b485;
1
2
3
4
5
6
7

&--front {
            background-color: $color-white;
        }
1
2
3
4

&__picture {
&--1 {
background-image:
linear-gradient(to right, $color-secondary-light, $color-secondary-dark),
url('../img/involve1.jpg');
}

&--2 {
background-image:
linear-gradient(to right, $color-primary-light, $color-primary-dark),
url('../img/involve2.jpg');
}

&--3 {
background-image:
linear-gradient(to right, $color-tertiary-light, $color-tertiary-dark),
url('../img/involve3.jpg');
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

&__picture{
        background-size: cover;
        background-blend-mode: screen;
        height: 23rem;
    }
1
2
3
4
5
6

&__side{
    border-radius: 5rem;
    box-shadow: 0 1.5rem 4rem rgba($color-black, .15);
}
1
2
3
4
5

clip-path: ellipse(80% 70% at 50% 30%);
1

&__heading {
        font-size: 2.8rem;
        font-weight: 300;
        text-align: right;
        text-transform: uppercase;
        color: $color-white;
        
        top: 12rem;
        right: 2rem;
        width: 75%;
    }

    &__heading-span{
        &--1 {
            background-image: linear-gradient(to right bottom,
                rgba($color-secondary-light, .85),
                rgba($color-secondary-dark, .85))
        }
        &--2 {
            background-image: linear-gradient(to right bottom,
                rgba($color-primary-light, .85),
                rgba($color-primary-dark, .85))
        }
        &--3 {
            background-image: linear-gradient(to right bottom,
                rgba($color-tertiary-light, .85),
                rgba($color-tertiary-dark, .85))
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

border-radius: 5rem;
padding: 1rem 1.5rem;
1
2
3

-webkit-box-decoration-break: clone;
1

&__heading{
        font-size: 2.8rem;
        font-weight: 300;
        text-align: right;
        text-transform: uppercase;
        
        top: 12rem;
        right: 2rem;
        width: 75%;
    }
1
2
3
4
5
6
7
8
9
10
11

&__details {
        padding: 3rem;
        color: $color-grey;


        ul {
            list-style: none;
            width: 70%;
            margin: 0 auto;

            li {
                text-align: center;
                font-size: 1.5rem;
                padding: 1rem;

                &:not(:last-child) {
                    border-bottom: 1px solid #dbdbdb;
                }
            }
        }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// components/_card.scss
.card {
    perspective: 150rem;
    
    height: 45rem;

    &__side {
        backface-visibility: hidden;
        width: 100%;
        
        top: 0;
        left: 0;
        cursor: pointer;
        color: white;
        font-size: 2rem;
        height: 45rem;
        transition: all .8s ease;
        border-radius: 5rem;
        overflow: hidden;
        box-shadow: 0 1.5rem 4rem rgba($color-black, .15);

        &--front {
            background-color: $color-white;
        }

        &--back {
            background-color: green;
            transform: rotateY(180deg);
        }
    }

    &:hover &__side--front {
        transform: rotateY(-180deg);
    }

    &:hover &__side--back {
        transform: rotateY(0);
    }

    &__picture {

        background-size: cover;
        background-blend-mode: screen;
        height: 23rem;
        clip-path: ellipse(80% 70% at 50% 30%);

        &--1 {
            background-image:
                linear-gradient(to right, $color-secondary-light, $color-secondary-dark),
                url('../img/involve1.jpg');
        }

        &--2 {
            background-image:
                linear-gradient(to right, $color-primary-light, $color-primary-dark),
                url('../img/involve2.jpg');
        }

        &--3 {
            background-image:
                linear-gradient(to right, $color-tertiary-light, $color-tertiary-dark),
                url('../img/involve3.jpg');
        }
    }

    &__heading{
        font-size: 2.8rem;
        font-weight: 300;
        text-align: right;
        text-transform: uppercase;
        
        top: 12rem;
        right: 2rem;
        width: 75%;
    }

    &__heading-span{

        border-radius: 5rem;
        padding: 1rem 1.5rem;
        -webkit-box-decoration-break: clone;

        &--1 {
            background-image: linear-gradient(to right bottom,
                rgba($color-secondary-light, .85),
                rgba($color-secondary-dark, .85))
        }
        &--2 {
            background-image: linear-gradient(to right bottom,
                rgba($color-primary-light, .85),
                rgba($color-primary-dark, .85))
        }
        &--3 {
            background-image: linear-gradient(to right bottom,
                rgba($color-tertiary-light, .85),
                rgba($color-tertiary-dark, .85))
        }
    }

    &__details {
        padding: 3rem;
        color: $color-grey;

        ul {
            list-style: none;
            width: 70%;
            margin: 0 auto;

            li {
                text-align: center;
                font-size: 1.5rem;
                padding: 1rem;

                &:not(:last-child) {
                    border-bottom: 1px solid #dbdbdb;
                }
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121