Merhaba, sizin için kodladım. Kullandığınız temaya göre düzenleme yapmanız gerekebilir.



CSS kodları :

.back {
    width: 100%;
    background: white;
    height: 110px;
    padding: 15px;
    box-sizing: border-box;
}

.facebook {
    height: 100%;
    width: 50%;
    float:left;
}

.facebookbox {
    background: #3b5998;
    display:flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 30px;
    height: 100%;
    width: 98%;
    text-align:center;
    float:left;
}

.facebookbox i{
    font-size: 35px;
    margin-right: 20px;
}

.instagram {
    height: 100%;
    width: 50%;
    float:left;
}

.instagrambox {
    background: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    display:flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 30px;
    height: 100%;
    width: 98%;
    text-align:center;
    float: right;
}

.instagrambox i{
    font-size: 35px;
    margin-right: 20px;
}

HTML Kodları :

        <div class="back">
            <div class="facebook">
                <a href="http://www.facebook.com">
                <div class="facebookbox">
                    <i class="fab fa-facebook-f"></i>umutcanra
                </div>
                </a>
            </div>
            <div class="instagram">
                <a href="http://www.instagram.com">
                <div class="instagrambox">
                    <i class="fab fa-instagram"></i>umutcanra    
                </div>
                </a>
            </div>
        </div>

HTML kodlarındaki instagram ve facebook linklerini kendi sayfanıza göre düzenleyebilirsiniz. Yazı olarak ne yazmasını istiyorsanız da şu kısımları değiştirmeniz gerekiyor " umutcanra ".