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