Profil - Instagram

instagramprofilenick

instagramprofilenick Przykładowy komentarz

2 dni 7 polubień Odpowiedz

instagramprofilenick Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

3 dni 2 polubienia Odpowiedz

instagramprofilenick Lorem ipsum dolor sit amet, consectetur adipiscing elit

4 dni 9 polubień Odpowiedz

instagramprofilenick Lorem ipsum dolor sit amet, consectetur adipiscing elit

6 dni 1 polubienie Odpowiedz

instagramprofilenick Lorem ipsum dolor sit amet, consectetur adipiscing elit

7 dni 10 polubień Odpowiedz

instagramprofilenick Lorem ipsum dolor sit amet, consectetur adipiscing elit

8 dni 12 polubień Odpowiedz

instagramprofilenick Lorem ipsum dolor sit amet, consectetur adipiscing elit

8 dni 14 polubień Odpowiedz

Liczba polubień: 196 034

Tu może być na przykład podpis odautorski. Albo inny komentarz. Wsadź tu co chcesz, tutaj jest suwak. Trust me on that. Albo sprawdź sam/a, jeśli nie wierzysz.

KOD DO EFEKTU:

<div class="profile">
<img src="LINK DO ZDJĘCIA GŁÓWNEGO" />
</div>
<div class="commentblock">
<div class="pasek">
<span id="profileavatar">
<img src="LINK DO AWATARA PROFILOWEGO" /></span>
</div>
<span id="profilenick">
TWÓJ NICK
</span>


<div class="comment">
<span id="profileavatar">
<img src="LINK DO AWATARA KOMENTUJĄCEGO" /></span>
<div class="komentarz">
<span id="profilenick1">
NICK KOMENTUJĄCY
</span>
TREŚĆ KOMENTARZA
<div id="dzien">
2 dni
<span style="font-weight: bold; padding: 0px 5px;">
7 polubień
</span>
<span style="font-weight: bold; padding: 0px 5px;">
Odpowiedz
</span>
</div>
</div>

<span id="profileavatar">
<img src="LINK DO AWATARA KOMENTUJĄCEGO" /></span>
<div class="komentarz">
<span id="profilenick1">
NICK KOMENTUJĄCY
</span>
TREŚĆ KOMENTARZA
<div id="dzien">
3 dni
<span style="font-weight: bold; padding: 0px 5px;">
2 polubienia
</span>
<span style="font-weight: bold; padding: 0px 5px;">
Odpowiedz
</span>
</div>
</div>

<span id="profileavatar">
<img src="LINK DO AWATARA KOMENTUJĄCEGO" /></span>
<div class="komentarz">
<span id="profilenick1">
NICK KOMENTUJĄCY
</span>
TREŚĆ KOMENTARZA
<div id="dzien">
4 dni
<span style="font-weight: bold; padding: 0px 5px;">
9 polubień
</span>
<span style="font-weight: bold; padding: 0px 5px;">
Odpowiedz
</span>
</div>
</div>

<span id="profileavatar">
<img src="LINK DO AWATARA KOMENTUJĄCEGO" /></span>
<div class="komentarz">
<span id="profilenick1">
NICK KOMENTUJĄCY
</span>
TREŚĆ KOMENTARZA
<div id="dzien">
6 dni
<span style="font-weight: bold; padding: 0px 5px;">
1 polubienie
</span>
<span style="font-weight: bold; padding: 0px 5px;">
Odpowiedz
</span>
</div>
</div>

<span id="profileavatar">
<img src="LINK DO AWATARA KOMENTUJĄCEGO" /></span>
<div class="komentarz">
<span id="profilenick1">
NICK KOMENTUJĄCY
</span>
TREŚĆ KOMENTARZA
<div id="dzien">
7 dni
<span style="font-weight: bold; padding: 0px 5px;">
10 polubień
</span>
<span style="font-weight: bold; padding: 0px 5px;">
Odpowiedz
</span>
</div>
</div>

<span id="profileavatar">
<img src="LINK DO AWATARA KOMENTUJĄCEGO" /></span>
<div class="komentarz">
<span id="profilenick1">
NICK KOMENTUJĄCY
</span>
TREŚĆ KOMENTARZA
<div id="dzien">
8 dni
<span style="font-weight: bold; padding: 0px 5px;">
12 polubień
</span>
<span style="font-weight: bold; padding: 0px 5px;">
Odpowiedz
</span>
</div>
</div>

<span id="profileavatar">
<img src="LINK DO AWATARA KOMENTUJĄCEGO" /></span>
<div class="komentarz">
<span id="profilenick1">
NICK KOMENTUJĄCY
</span>
TREŚĆ KOMENTARZA
<div id="dzien">
8 dni
<span style="font-weight: bold; padding: 0px 5px;">
14 polubień
</span>
<span style="font-weight: bold; padding: 0px 5px;">
Odpowiedz
</span>
</div>
</div>

</div>


<div style="padding: 5px 13px;">
<span style="font-size: 23px; letter-spacing: 3px;">
<a href="TWÓJ LINK"><i class="far fa-comment"></i></a>
<a href="TWÓJ LINK"><i class="far fa-heart"></i></a>
<a href="TWÓJ LINK"><i class="far fa-paper-plane"></i></a>
</span>
<div style="font-family: 'Ubuntu', sans-serif; font-weight: bold;">
Liczba polubień: 196 034
</div>
</div>

<div class="podpisek">
Tu może być na przykład podpis odautorski
</div>

</div>




<style>
.podpisek {
border-top: 1px solid #e6ecf0;
padding: 5px;
font-family: 'Ubuntu', sans-serif;
overflow: scroll;
height: 40px;
font-size: 12px;
border-bottom: 1px solid #e6ecf0;

}

.podpisek::-webkit-scrollbar { width: 0px; height: 0px; background: #0d0d0d;}
.podpisek::-webkit-scrollbar-thumb:vertical {background: #920518;}

.dzien {
font-family: 'Ubuntu', sans-serif; 
font-size: 11px;
color: #657786;
margin-top: 5px;
}

.komentarz {
margin-bottom: 20px;
margin-left: 57px;
margin-right: 5px;
margin-top: -32px;
font-family: 'Ubuntu', sans-serif;
font-size: 12px;
}

#profilenick1 {
font-family: 'Ubuntu', sans-serif;
color: #14171a;
font-weight: bold;
font-size: 14px;
letter-spacing: -1px;

}

.comment {
width: 260px;
height: 370px;
background: #fff;
overflow: scroll;
margin-top: -19px;
padding-bottom: 3px;
border-bottom: 1px solid #e6ecf0;
}

.comment::-webkit-scrollbar {
width: 7px;
height: 1px;
}
.comment::-webkit-scrollbar { width: 0px; height: 0px; background: #0d0d0d;}
.comment::-webkit-scrollbar-thumb:vertical {background: #920518;}

#profilenick {
font-family: 'Ubuntu', sans-serif;
color: #14171a;
font-weight: bold;
font-size: 14px;
letter-spacing: -1px;
position: relative;
top: -40px;
left: 57px;
}

#profileavatar img {
padding: 0px;
width: 35px;
border-radius: 50px;
}

#profileavatar {
position: relative;
top: 10px;
left: 10px;
}

.pasek {
width: 260px;
height: 58px;
border-bottom: 1px solid #e6ecf0;
}

.commentblock {
background: #fff;
width: 260px;
height: 545px;
position: absolute;
margin-top: -551px;
margin-left: 380px;
}

.profile img {
padding: 0px;
width: 420px;
height: 545px;
}

.profile {
margin-left: -41px;
margin-top: -41px;
}

.post-body {
height: 465px;
background: #fff;
margin-top: -16px;
margin-bottom: -20px;}
</style>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">

▪ Wartości, które możesz edytować zaznaczone są kolorem.
▪ Zdjęcie główne musi mieć wymiary 420x545px.
▪ Zdjęcie awatarów musi być kwadratowe (dowolnego rozmiaru).
▪ Szablon karty dostosowany jest do szablonu American Gods.