12.08.2019, 13:51
Witam chciałem przedstawić Wam unikalny kontakt z administracją stworzony przeze mnie.
Udzielam zgodę na użytkowanie natomiast zabraniam rozpowszechniania go na inne strony.
Film prezentujący kontakt: https://www.youtube.com/watch?v=HPSVli_C57I
HTML: (wklejmy w indeks pod klasa "sidebar")
CSS: (wklejmy do global.css bądź tworzymy nowy zbiór css o nazwie kontakt.css)
Pozdrawiam Mentor
Udzielam zgodę na użytkowanie natomiast zabraniam rozpowszechniania go na inne strony.
Film prezentujący kontakt: https://www.youtube.com/watch?v=HPSVli_C57I
HTML: (wklejmy w indeks pod klasa "sidebar")
Kod:
<div class="box">
<center><span style="color:#bf060d"><i class="fa fa-briefcase"></i><span class="effect founder"><strong> Developer</center></strong></span><br>
<div class="zawartosc">
<div class="ranga">
<img src="https://i.imgur.com/1dJTA7C.png" alt="" style="border: 1px solid #444;
padding: 1px;float: left;width:60px; height:60px;margin-right: 5px;">
<span style="float: left;">
<a href="http://onfrags.pl/member.php?action=profile&uid=1">
<span style="color:#bf060d"><i class="fa fa-briefcase"></i><span class="effect founder"><strong>Limitowany</strong></span></a>
</span>
<br>
<span style=" float:left; ">
<img src="http://zajefajna.com/pics/35e8060053c340ce14c5d00ea2c5d66b.png">
<a href="http://onfrags.pl/private.php?action=send&uid=1"> <b>Wyślij Wiadomość</b></a>
<br>
<span style=" float:left; ">
<img alt="Steam" src="http://skilluje.pl/grafika/steam5.png" ;="" margin-left:="" 1px=""><a href="https://steamcommunity.com/profiles/76561198448371614/"> <b>HEADSHOTPLAYER</b> </a> <br>
<img src="http://status.gadu-gadu.pl/users/status.asp?id=47904630&styl=1" alt="GG: 63313201"> <b><font color="white">63313201</font></b> <br>
</span>
</span>
</div>
<div class="ranga">
<img src="https://i.imgur.com/n4hcTo8.png" alt="" style="border: 1px solid #444;
padding: 1px;float: left;width:60px; height:60px;margin-right: 5px;">
<span style="float: left;">
<a href="http://onfrags.pl/member.php?action=profile&uid=2">
<span style="color:#bf060d"><i class="fa fa-briefcase"></i><span class="effect founder"><strong>Ann</strong></span></a>
</span>
<br>
<span style=" float:left; ">
<img src="http://zajefajna.com/pics/35e8060053c340ce14c5d00ea2c5d66b.png">
<a href="http://onfrags.pl/private.php?action=send&uid=2"> <b>Wyślij Wiadomość</b></a>
<br>
<span style=" float:left; ">
<img alt="Steam" src="http://skilluje.pl/grafika/steam5.png" ;="" margin-left:="" 1px=""><a href="#"> <b>Brak</b> </a> <br>
<img src="http://status.gadu-gadu.pl/users/status.asp?id=47904630&styl=1" alt="GG: #"> <b><font color="white">BRAK</font></b> <br>
</span>
</span>
</div>
</div>
</div>
<div class="box">
<center><span style="color:#ff4e50"><i class="fa fa-fire"></i><span class="effect adm"><strong> Administrator</center></strong></a><br>
<div class="zawartosc">
<div class="ranga">
<img src="https://i.imgur.com/1dJTA7C.png" alt="" style="border: 1px solid #444;
padding: 1px;float: left;width:60px; height:60px;margin-right: 5px;">
<span style="float: left;">
<a href="http://onfrags.pl/member.php?action=profile&uid=8">
<span style="color:#ff4e50"><i class="fa fa-fire"></i><span class="effect adm"><strong>Psycho</strong></a>
</span>
<br>
<span style=" float:left; ">
<img src="http://zajefajna.com/pics/35e8060053c340ce14c5d00ea2c5d66b.png">
<a href="http://onfrags.pl/private.php?action=send&uid=8"> <b>Wyślij Wiadomość</b></a>
<br>
<span style=" float:left; ">
<img alt="Steam" src="http://skilluje.pl/grafika/steam5.png" ;="" margin-left:="" 1px=""><a href="https://steamcommunity.com/profiles/76561198448371614/"> <b>-----</b> </a> <br>
<img src="http://status.gadu-gadu.pl/users/status.asp?id=47904630&styl=1" alt="GG: 63313201"> <b><font color="white">----</font></b> <br>
</span>
</span>
</div>
</div>
</div>
<div class="box">
<center><span style="color:#ffad33"><i class="fa fa-star" aria-hidden="true"></i><span class="glm"><strong> Starszy Moderator</center></strong></span><br>
<div class="zawartosc">
<div class="ranga">
<img src="https://i.imgur.com/1dJTA7C.png" alt="" style="border: 1px solid #444;
padding: 1px;float: left;width:60px; height:60px;margin-right: 5px;">
<span style="float: left;">
<a href="http://onfrags.pl/member.php?action=profile&uid=3">
<span style="color:#ffad33"><i class="fa fa-star" aria-hidden="true"></i><span class="glm"><strong>GeT_RiGhT</strong></span></a>
</span>
<br>
<span style=" float:left; ">
<img src="http://zajefajna.com/pics/35e8060053c340ce14c5d00ea2c5d66b.png">
<a href="http://onfrags.pl/private.php?action=send&uid=3"> <b>Wyślij Wiadomość</b></a>
<br>
<span style=" float:left; ">
<img alt="Steam" src="http://skilluje.pl/grafika/steam5.png" ;="" margin-left:="" 1px=""><a href="https://steamcommunity.com/profiles/76561198448371614/"> <b>-------</b> </a> <br>
<img src="http://status.gadu-gadu.pl/users/status.asp?id=47904630&styl=1" alt="GG: 63313201"> <b><font color="white">--------</font></b> <br>
</span>
</span>
</div>
<div class="ranga">
<img src="https://i.imgur.com/n4hcTo8.png" alt="" style="border: 1px solid #444;
padding: 1px;float: left;width:60px; height:60px;margin-right: 5px;">
<span style="float: left;">
<a href="http://onfrags.pl/member.php?action=profile&uid=7">
<span style="color:#ffad33"><i class="fa fa-star" aria-hidden="true"></i><span class="glm"><strong>ksi3ciunio</strong></span></a>
</span>
<br>
<span style=" float:left; ">
<img src="http://zajefajna.com/pics/35e8060053c340ce14c5d00ea2c5d66b.png">
<a href="http://onfrags.pl/private.php?action=send&uid=7"> <b>Wyślij Wiadomość</b></a>
<br>
<span style=" float:left; ">
<img alt="Steam" src="http://skilluje.pl/grafika/steam5.png" ;="" margin-left:="" 1px=""><a href="#"> <b>------</b> </a> <br>
<img src="http://status.gadu-gadu.pl/users/status.asp?id=47904630&styl=1" alt="GG: #"> <b><font color="white">------</font></b> <br>
</span>
</span>
</div>
</div>
</div>
CSS: (wklejmy do global.css bądź tworzymy nowy zbiór css o nazwie kontakt.css)
Kod:
.box {
background: rgba(255, 255, 255, 0.01);
transition: 2.0s;
border: 3px ridge #630502;
margin: 10px auto;
width: 100%;
overflow: hidden;
padding: 20px;
}
.box:hover {
border: 3px solid #630502;
}
.zawartosc {
display: none;
}
.box:hover .zawartosc {
display: block;
}
.box .ranga {
overflow: hidden;
width: 100%;
margin-bottom: 10px;
}
Pozdrawiam Mentor