Code Skills section cho website Landing Page

<section class="section-skills">
            <div class="row">
                <div class="col-1-of-4">
                    <div class="skill-box">
                        <i class=" skill-bo_icon fas fa-globe-americas"></i>
                        <h3 class="heading-tertiary u-margin-bottom-small">global skill</h3>
                        <div class="skill-bo_text">
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit, Neque, quas
                            doloribus corporis debitis soluta atque.
                        </div>
                    </div>
                </div>
                <div class="col-1-of-4">
                    <div class="skill-box">
                        <i class=" skill-bo_icon fas fa-book-open"></i>
                        <h3 class="heading-tertiary u-margin-bottom-small">google's knowledge</h3>
                        <div class="skill-bo_text">
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit, Neque, quas
                            doloribus corporis debitis soluta atque.
                        </div>
                    </div>
                </div>
                <div class="col-1-of-4">
                    <div class="skill-box">
                        <i class=" skill-bo_icon fas fa-users"></i>
                        <h3 class="heading-tertiary u-margin-bottom-small">leader of your life</h3>
                        <div class="skill-bo_text">
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit, Neque, quas
                            doloribus corporis debitis soluta atque.
                        </div>
                    </div>
                </div>
                <div class="col-1-of-4">
                    <div class="skill-box">
                        <i class=" skill-bo_icon fas fa-hourglass-half"></i>
                        <h3 class="heading-tertiary u-margin-bottom-small">saving your time</h3>
                        <div class="skill-bo_text">
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit, Neque, quas
                            doloribus corporis debitis soluta atque.
                        </div>
                    </div>
                </div>
            </div>
        </section>
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

// pages/_home.scss
.section-skills{
    padding: 20rem 0;
    background-image: linear-gradient(to right bottom,
    rgba($color-primary-light, .8),
    rgba($color-primary-dark, .8)),
    url("../img/background2.jpg");
    background-size: cover;
    
    clip-path: ellipse(70% 50% at 50% 50%);
}
1
2
3
4
5
6
7
8
9
10
11
12

.section-skills{
    margin-top: -20rem;
}
1
2
3
4

// pages/_home.scss
.section-skills{
    padding: 20rem 0;
    background-image: linear-gradient(to right bottom,
    rgba($color-primary-light, .8),
    rgba($color-primary-dark, .8)),
    url("../img/background2.jpg");
    background-size: cover;
    
    clip-path: ellipse(70% 50% at 50% 50%);
    margin-top: -20rem;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

// main.scss
@import './components/skill-box';
1
2
3

.skill-box{
    background-color: rgba($color-white, .8);
    font-size: 1.5rem;
    padding: 2.5rem 2.5rem 5rem 2.5rem;
    text-align: center;
    border-radius: 5rem;
    box-shadow: 0 1.5rem 4rem rgba($color-black, .15);
}
1
2
3
4
5
6
7
8
9

&__icon{
        font-size: 6rem;
        margin-bottom: 1.5rem;
        display: inline-block;
        background-image: linear-gradient(to right, $color-primary-light, $color-primary-dark);
        -webkit-background-clip: text;
        color: transparent;
    }
1
2
3
4
5
6
7
8
9

&:hover{
        cursor: pointer;
        transform: translateY(-1.5rem) scale(1.03);
    }
1
2
3
4
5

transition: all .3s;
1

// components/_skill-box.scss
.skill-box{
    background-color: rgba($color-white, .8);
    font-size: 1.5rem;
    padding: 2.5rem 2.5rem 5rem 2.5rem;
    text-align: center;
    border-radius: 5rem;
    box-shadow: 0 1.5rem 4rem rgba($color-black, .15);
  transition: all .3s;


    &__icon{
        font-size: 6rem;
        margin-bottom: 1.5rem;
        display: inline-block;
        background-image: linear-gradient(to right, $color-primary-light, $color-primary-dark);
        -webkit-background-clip: text;
        color: transparent;
    }

    &:hover{
        cursor: pointer;
        transform: translateY(-1.5rem) scale(1.03);
    }
}
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