Strona internetowa - Jak ostylowac tytuły na zdjeciach aby wygladaly profesjonalnie

Question

Witam, robie strone internetowa dla kolezanki. Mam problem z ostylowaniem tytulow na glownej stronie na zdjeciu ( oznaczone czerwona strzalka ). Chcialbym zeby ladnie wygladaly i aby ludzie mieli pozytywna reakcje po wejsciu na strone.

Co myslalem zeby mozna zrobic :
- Zblurrowac obraz - moze chociaz troche po bokach,
- Uzyc jakiejs grafiki, tylko jakie kolory wybrac aby dopasowac do strony .. - z tym jest problem
- Dac czarne w polowie przezroczyste obramowanie diva - powiedziala ze nie podoba jej sie..
- Wyciemnic zdjecie - powiedziala ze nie chce, bo to przesyla zla wiadomosc - moze chociaz po bokach?

Bardzo bym prosil o pomoc co mam zrobic, zeby to bardzo ladnie wygladalo, problem nie jest w programowaniu, nie wiem co by ladnie pasowalo, ktos kto sie na tym zna moze by rzucil pare pomysłów. Potrzebuje kogos kto mi powie jak to zrobic zeby dobrze wygladalo a tak zrobie.

Bede wdzieczny za kazda pomoc.

html :

 <section id="home-slider">
            <div id="slider" class="sl-slider-wrapper">
                <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>

Css : 

 

.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%);
}

 

Answer 1

Nie styluj inline. Czy kolor tekstu na slajderze jest nie do ruszenia? W przypadku lewego dolnego rogu nic nie widać i nawet zblurowanie po bokach nic tu nie da. Chyba jedynym rozwiązaniem jest wybór innej grafiki, ponieważ nawet wyciemnienie po bokach nie uwidoczni całego tekstu z lewego dolnego rogu (może go złamać?),

Answer 2

Ja bym te elementy dała w ramkę i zrobiła taki efekt jak jest w tym filmie https://www.youtube.com/watch?v=1u8qTcFeQzk&t=161s

lub ewentualnie w tym flmie https://www.youtube.com/watch?v=X9Eh7_FUYzw&t=388s (ramka logowania, tylko nie taka ciemna, mogłaby być w opacity navbaru ale bardziej niebieska). Tak na moje oko.

Comments

Dziekuje, ten filmik z blurrem jest naprawde swietny

---

Nie ma za co ;)