Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Unikalny kontakt z administracją by Mentor

HTML  Założony przez  Limitowany.

12.08.2019, 13:51
#1
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")

<div class="box">

<center><span style="color:#bf060d"><i class="fa fa-briefcase"></i><span class="effect founder"><strong>&nbsp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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>&nbsp;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&amp;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&amp;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&amp;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>&nbsp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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)
.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
12.08.2019, 14:55 (Ten post był ostatnio modyfikowany: 12.08.2019, 15:00 przez tyraNt.)
#2
Taki sobie.

I czy ja wiem czy można go nazwać unikalnym :thinking:
12.08.2019, 17:09 (Ten post był ostatnio modyfikowany: 12.08.2019, 17:10 przez b360.)
#3
Skoro używasz arkuszów CSS, to po co atrybut [style]?
Znaczników center już się nie używa.
Dodatkowo używasz span jak paragrafów co jest błędem. Po zmianie na p ma to więcej sensu. Idąc dalej, nie będziesz potrzebować znacznika br.
Ikony też nie powinny być jako i, bo niepotrzebnie podbijasz semantycznie coś co ma zerową wartość semantyczną.

Także podany powyżej kod, to tragedia.
12.08.2019, 18:09
#4
Dobra, Panowie, nie będę się burzyć bo krytykę trzeba przyjmować. No ale weźcie po uwagę, to, że nie jestem proffesionalnym koderem :P

@tyraNt unikalny chodzi mi o to, że nie widziałem jeszcze żadnego takiego tudzież podobnego na żadnej stronie :p

pomimo wszystko dzięki z opinie, postaram się nie robić takiego syfu w kodzie haha .

Ważne że działa
12.08.2019, 22:37
#5
Widziałem go już na forum goldendeagle ;))
13.08.2019, 00:19
#6
(12.08.2019, 22:37)amurek123 napisał(a): Widziałem go już na forum goldendeagle ;))

Bo był robiony przeze mnie - pozdrawiam właściciel goldendeagle czyli twój ukochany Łukaszek <3
14.08.2019, 11:58 (Ten post był ostatnio modyfikowany: 14.08.2019, 12:04 przez myCreedo.)
#7
Fajnie, że się starasz i próbujesz zrobić coś swojego, niż korzystać z gotowca. Dobrze też, że udostępniasz swój kod, by ktoś bardziej doświadczony mógł Cię nakierować na być może lepsze rozwiązania ;)

Tak jak napisali wyżej, fajnie byłoby, gdybyś zrezygnował ze znaczników i atrybutów, których już się nie używa. W wyłapaniu błędów w HTML'u może pomóc Ci to: https://validator.w3.org/#validate_by_input / https://validator.nu/

Kolejnym krokiem może być zrezygnowanie z hosingu obrazków (które i tak znikną za jakiś czas), na rzecz paczki z grafikami, którą można wrzucić na swój serwer. Dodatkowo zastanowiłbym się nad zrezygnowaniem ze statusu GG na rzecz Discorda ;)
„Lecz biorę całą odpowiedzialność na siebie. Być może się pomyliłem. Ale przecież mylić się jest rzeczą ludzką.”
12.01.2021, 14:48 (Ten post był ostatnio modyfikowany: 12.01.2021, 16:16 przez Batu786.)
#8
Całkiem spoko, ale u mnie nie rozsuwa się tylko jest stałe okienko. Ale i tak leci + dla ciebie :)

Pozdrawiam!

EDIT: Sorki poprawiłem CSS i wszystko dział jak ta lala, dzięki :D
13.02.2021, 12:55
#9
(12.01.2021, 14:48)Batu786 napisał(a): Całkiem spoko, ale u mnie nie rozsuwa się tylko jest stałe okienko. Ale i tak leci + dla ciebie :)

Pozdrawiam!

EDIT: Sorki poprawiłem CSS i wszystko dział jak ta lala, dzięki :D

Żeby się rozsuwał potrzebujesz kodu animacji z JavaScriptu.



Użytkownicy przeglądający ten wątek:

3 gości