• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
+2 głosów
237 wizyt
pytanie zadane 5 grudnia 2020 w HTML i CSS przez Simonsoft Nowicjusz (140 p.)

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

 

2 odpowiedzi

+1 głos
odpowiedź 5 grudnia 2020 przez SzkolnyAdmin Szeryf (86,280 p.)
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ć?),
+1 głos
odpowiedź 5 grudnia 2020 przez roxy32l Początkujący (470 p.)
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.
komentarz 6 grudnia 2020 przez Simonsoft Nowicjusz (140 p.)
Dziekuje, ten filmik z blurrem jest naprawde swietny
komentarz 8 grudnia 2020 przez roxy32l Początkujący (470 p.)
Nie ma za co ;)

Podobne pytania

0 głosów
1 odpowiedź 901 wizyt
0 głosów
1 odpowiedź 165 wizyt
–1 głos
1 odpowiedź 207 wizyt
pytanie zadane 1 maja 2021 w HTML i CSS przez grewwwew Użytkownik (830 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...