Jak koło fotki zrobić tekst pogrubiony i kolorowy tekst

Dla specjalistów Webmastering
#1

Jak koło fotki zrobić tekst pogrubiony i kolorowy fotka obok.Coś takiego mi chodzi:

#2

Screeny można dodawać bezpośrednio w postach, nie trzeba zewnętrznych wrzutek. (jak piszesz post to wystarczy kliknąć ten mały przycisk…)

Bez tytułu.png946×234 13.8 KB

Popraw swój post używając przycisku edytuj, bo twoje zdjęcie nie ładuje się.

#4

Np. tak:

HTML:

<div class="poziomy">
   <img src="http://via.placeholder.com/150x150" alt="">  
   <div>jakiś tekst <br>
        <b>pogrubioone</b>
    </div>
   <b class="prawo">2000 pln</b>
<div>

:heavy_plus_sign:

CSS:

.poziomy {
    background: cyan;
    height: 200px;
    width: 800px
}
.poziomy img, .poziomy div, .prawo {
    padding: 10px
}
.poziomy img, .poziomy div {
    float: left
}
.poziomy div, .prawo {
    font-size: 20px;
    font-family: sans-serif
}
.prawo {
    float: right
}

efekt:

efekt
podgląd efektu formatowania899×246 6.22 KB

#5

dert
dert.jpg1256×660 158 KB

A jak połączyć css z html5 jaki kod bo z tym też mam problem

A zamieszczam screena i to co zaznaczyłem to jak to zrobić .

#6

Aby dodać coś w prawym dolnym rogu możesz wykorzystać pozycjonowanie dla .poziomy jako relatywne i dla elementu który ma być w rogu (np. .nisko) absolutnie - http://www.kurshtml.edu.pl/css/pozycjonowanie.html, http://webkod.pl/kurs-css/wlasciwosci/wszystkie/position, https://www.w3schools.com/css/css_positioning.asp

HTML:

<div class="poziomy">
   <img src="http://via.placeholder.com/150x150" alt="">  
   <div>jakiś tekst <br>
        <b>pogrubioone</b>
    </div>
   <b class="prawo">2000 pln</b>
   <div class="nisko"> wersja miasto, kontakt</div>
<div>

CSS:

.poziomy {
    background: cyan;
    height: 200px;
    width: 800px;
    position: relative
}
.poziomy img, .poziomy div, .prawo {
    padding: 10px
}
.poziomy img, .poziomy div {
    float: left
}
.poziomy div, .prawo {
    font-size: 20px;
    font-family: sans-serif
}
.prawo {
    float: right
}

.nisko {
   position: absolute; 
   right: 0; 
   bottom: 0;
}

efekt:

efekt
coś w prawym dolnym rogu905×251 10.2 KB

Pewnie można też to zrobić w Flexboxach https://www.w3schools.com/css/css3_flexbox.asp
Co do filtrów / formularza filtrującego to nie pomogę :frowning:

#7

A łączenie css w html5 to

.poziomy { background: cyan; height: 200px; width: 800px; position: relative } .poziomy img, .poziomy div, .prawo { padding: 10px } .poziomy img, .poziomy div { float: left } .poziomy div, .prawo { font-size: 20px; font-family: sans-serif } .prawo { float: right } .nisko { position: absolute; right: 0; bottom: 0; }
#8

Tak w html5

i css tu
#9

Taki mój kod html5

Auto Giełda h1 { text-shadow: 0px 0px 7px rgba(204, 114, 190, 0.75); color: #FF6C00; font-size: 20px; height: 2000px;

Zapraszam na stronie auto gielda i są umieszczone auta używane i jak chcesz wiedzieć na temat auta które już się zdecydowałeś to opis auta jest płatny do pobrania i ceny są od 2 000 PLN do 5 000 PLN.

jakiś tekst
pogrubioone
2000 pln
wersja miasto, kontakt

A css3:
.poziomy {
background: cyan;
height: 200px;
width: 800px;
position: relative
}
.poziomy img, .poziomy div, .prawo {
padding: 10px
}
.poziomy img, .poziomy div {
float: left
}
.poziomy div, .prawo {
font-size: 20px;
font-family: sans-serif
}
.prawo {
float: right
}

.nisko {
position: absolute;
right: 0;
bottom: 0;
}