Co i jak? Cz.2

11. Po zajęciu się postem czas było zająć się autorem, datą i linkiem do komentarzy:
szerokością, kolorem czcionką, pozycją, tłem
.post-author {
width: 200px;
color:rgba(155,216,140,0.8);
background:black;
position: absolute;
top: -20px;
right: -270px;
padding: 3px;
padding-left: 15px;
font-size:11px;
font:verdana;
letter-spacing: 1px;
transtion: 0.7s;
}
h2.date-header span{width: 150px;
color:rgba(155,216,140,0.8);
background:black;
position: absolute;
top: 20px;
right: -218px;
padding: 3px;
padding-left: 0x;
font-size:11px;
font: verdana;
letter-spacing: 1px;
transtion: 0.7s;
}

.comment-link{
width: 130px;
color:rgba(155,216,140,0.8);
background:black;
position: absolute;
top: 38px;
right: -200px;
padding: 3px;
padding-left: 15px;
font-size:11px;
font: verdana;
letter-spacing: 1px;
transtion: 0.7s;
}

12. Następnie dodałam kod css na tytuł posta:
wyśrodkowałam tekst, zmieniłam rozmiar czcionki, wysokość pola oraz kolor tekstu
.post-title{
text-align: center;
position: relative;
font-size: 30px;
height: 25px;
color:#9BD88C!important;
transition:1s;
}

13. Z obrazami też trzeba było coś zrobić, dlatego usunęłam ramkę i kolor tła i zaokrągliłam rogi
.post img{
border-none;
background-color:none;
border-radius: 100px 20px;
}

14. Następnym elementem wymagającym zmiany był cytat, który wyśrodkowałam, dodałam kolor tła oraz czcionki, powiększyłam marginesy, dodałam dolną ramkę, zmieniłam rozmiar tekstu i czcionkę.
.post blockquote{
text-align: center;
background-color:black;
padding:20px;
border-bottom: solid 4px #9BD88C;
border-radius:50px 20px;
color:rgba(155,216,140,0.8);
font-size:11px;
font-family:verdana;
}

15.Jeśli chodzi o linki "Strona Główna", "Nowszy Post" i "Starszy Post", to dodałam tutaj kolor tła, marginesy, ramkę. zaokrąglone rogi, czcionkę, rozmiar tekstu, wielkie litery.
a.home-link, a.blog-pager-older-link, a.blog-pager-newer-link{
background-color:black!important;
padding-left:10px;
padding-right:10px;
padding-bottom:3px;
padding-top:3px;
border-bottom:solid 2px;
border-radius:50px 20px;
font-size:10px;
font-family:verdana;
text-transform: uppercase;
transition: 2s;
}
a.home-link a:hover, a.blog-pager-older-link a:hover, a.blog-pager-newer-link a:hover{
border-top:solid #9BD88C 2px!important;
border-bottom: none!important;
transition: 2s;
}

16. Po tym wszystkim nadszedł czas na komentarze:
Test: "Brak komentarzy" < tu zmieniłam czcionkę i wielkość tekstu, który wyśrodkowałam
.comments h4{
font-family:'Berkshire Swash';
font-size: 25px;
text-align: center;
}
Avatary < tu dodałam ramkę, zaokrągliłam rogi, zmieniłam nieco położenie.
.comments .avatar-image-container{
border-bottom: solid 10px #9BD88C;
opacity: 1;
border-radius:50px 20px;
position:relative;
top:5px;
right:-35px;
z-index:2;
}
Pole komentarza < tutaj dodałam kolor tła, kolor tekstu, ramkę, zaokrąglenie
.comment p {
background-color:black;
padding: 20px;
color:#C3C3C3;
border-bottom: #9BD88C solid 5px;
border-radius:50px 20px;
z-index:1535;
}
Wyśrodkowałam nagłówek komentarza:
.comments-content .comment-header {
text-align:center;
}

Wynik: