About markup

<section id="about" class="bg_secondary py-100">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="about-content mt-4">
                        <div class="section-title text-center text-lg-left mb-5">
                            <h2>About Me</h2> <br>
                            <p class="text-muted">All you need to know about me.</p>
                        </div>
                        <p>For instance, whenever I go back to the guest house during the morning to copy out the
                            contract, these gentlemen are always still sitting there eating their breakfasts. I ought to
                            just try that witht my boss; I'd get kicked out on the spot.</p>

                        <div class="about-contacts py-2">
                            <div class="row">
                                <div class="col-md-6">
                                    <p><i class="fas fa-map-marker-alt"></i> Location<span>: New York, USA</span></p>
                                    <p><i class="fas fa-phone-alt"></i> Phone<span>:
                                            831-597-3740</span></p>
                                </div>
                                <div class="col-md-6 pl-md-5">
                                    <p><i class="far fa-calendar-alt"></i> Age<span>: 30</span></p>
                                    <p><i class="far fa-envelope"></i> Mail<span>:
                                            about@elijah.com</span></p>
                                </div>
                            </div>
                        </div>
                        <div class="social-link mt-5">
                            Find Me :
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-github"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-1"></div>
                <div class="col-lg-5">
                    <div class="about-image text-center">
                        <img class="img-fluid" src="assets/images/about/about.jpg" alt="image">
                    </div>
                </div>
            </div>
        </div>
    </section>
.section-title h2{
    position: relative;
    margin-bottom: 0 !important;
    z-index: 5;
    display: inline-block;
}
.section-title h2::first-letter{
    color: #E24727;
    font-weight: bold;
    font-size: 50px;
}
.section-title h2:after{
    content: '';
    position: absolute;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    background: #E24727;
    right: -18px;
    bottom: 30%;
    z-index: 1;
    opacity: .6;
    animation: title 3s ease-in-out infinite;
}

@keyframes title{
    0%{
        transform: translateX(5px);
    }
    
    50%{
        transform: translateX(0px);
        transform: scale(1.2);
    }
    
    100%{
        transform: translateX(5px);
    }
} 

 .section-title p{
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    position: relative;
    margin-left: 7px;
    margin-bottom: 0 !important;
    display: inline-block;
}
.section-title p::before{
    content: '';
    position: absolute;
    height: 60%;
    width: 2px;
    bottom: 5px;
    background: var(--special-color);
    left: -7px;
}
.about-contacts i{
    color:var(--special-color);
}
.social-link a{
    padding-right: 8px;
    padding-left: 8px;
    
}
.social-link a i{
    color: var(--primary-text-color);
    transition: color .2s ease;
}
.social-link a:hover i{
    color:var(--special-color)
}


.about-image img{
    display: inline;
    border-radius: 68% 68% 2% 68% / 35% 50% 0 38%;
    animation: morph 2s ease-in-out infinite both alternate;
}
@keyframes morph{
    0%{
        border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    }
    100%{
        border-radius: 2% 68% 68% / 35% 50% 0 35%;
    }
}

Leave a Reply

Your email address will not be published. Required fields are marked *