Html - Website - How to style text on background image to look GOOD [closed]

I am creating a website for my girl friend (we're not together). I wan't this to look very good, but I am caught in a trap. I could spend 100hours styiling those titles and still may think that they look bad, wich they are now.

The programming part is not a problem. The problem is I don't know what to do to make it look good, I dont have art in myself, so that is what I need, a direction or something.

I am trying to style 2 main titles on background image(red arrows on photo), but they dont look modern or creative or nice right now they just look. I want people to feel that this page looks very nice and have a positive reaction about it.

What I thought that maybe would be good to do :

• Blurr image on the sides or something,
• Design a graphic art - but what colors and style would play well with this photo?
• Give a div a black semi transparent background - Tried it, she said it looks bad..

I would really appreciate if some creative soul could tell me what can I do to make those titles look amazing and really nice. I just don't see it, what technique to use ? What colors? What to do?

Ps. She preferably wanted to have those titles in right-up corner and left-down corner.

I have uploaded all files in zip here (if that's wrong im sorry but I didn't want to spam all the code and styles and images in this post : https://ufile.io/6abomz6w

All kinds of help and tips will be very much appreciated.

        <section id="home-slider">
            <div id="slider" class="sl-slider-wrapper" alt="psycholog sportu Karolina Woźniczka, mindfulness">
                <div class="sl-slider">
                    <div class="sl-slide"  data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
                        <div class="bg-img bg-img-1"  style="background-size: cover;"></div>
                        <div class="slide-caption">
                            <div class="caption-content">
                                <div class="row">
                                    <div class="col-md-5"  style="text-align: center; float:right; margin-right: 0%;padding-top: 3%;">
                                        <div class="offer10">Sport Psychologist</div>
                                        <div class="offer10">Caroline Bucharestas</div>
                                </div>

                                <div class="divoffer">
                                    <div class="offer1" style="display: inline-block;">
                                        Would you like to set up a meeting?
                                        <hr class=".sec-title" style="border-bottom: 3px">
                                        <div class="offer2">
                                            Have any questions?
                                        </div>
                                        <div>
                                            <a href="#contact" class="btn btn-blue btn-effect" style="margin: 20px">Contact me !</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

.offer10 {
    font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
    font-size: 39px;
    font-weight: 600;
    line-height: 1.05em;
    color: rgb(197, 225, 235)
}
.offer1{
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.05em;
    text-align: left;
    padding-right: 60%;
    color:white;
}

.offer2{
    font-family: "Poppins", sans-serif;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.05em;
    text-align: left;
    color: white;
}
.divoffer{
    position: absolute;
    top: 70%;
    width: 84%;
    padding: 5px;
    margin-bottom: min(10px, 5%);
}