Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
whoami.scss 1.93 KiB
Newer Older
peter_rabbit's avatar
peter_rabbit committed
#whoami {
    padding: 20px 0 50px;
    .page-contents-center {
        padding: 40px;
        @include flex-center-col;
        h2 {
            text-align: center;
            background-color: $medium_grey;
            @include flex-center-col;
            width: 220px;
            height: 220px;
            border-radius: 100%;
            padding: 30px;
            margin: 40px 0;
            color: $blue_3;
        }
        .presentation-card {
            .header {
                display: grid;
                grid-template-columns: auto 1fr;
                gap: 30px;
                padding: 50px 0;
                .pic {
                    @include flex-center-col;
                    img {
                        width: 150px;
                        height: auto;
                        border-radius: 100%;
                    }
                }
                .header-text {
                    h3 {
                        font-size: 22px;
                        color: $light_1;
                        margin: 0;
                    }
                    h4 {
                        font-size: 18px;
                    }
                    strong,
                    h4 {
                        color: $light_1;
                    }
                }
            }
            .body {
                p {
                    font-size: 18px;
                    font-style: italic;
                    font-family: serif;
                    color: $dark_3;
                    *:not(blue, a) {
                        color: $dark_3;
                    }
                }
            }
        }
    }
    @media screen and (max-width: $screen_s) {
        .page-contents-center {
            .presentation-card {
                .header {
                    @include flex-center-col;
                    .header-text {
                        text-align: center;
                    }
                }
            }
        }
    }
}