blanken

Fox, strona będzie miała update'y tj. Będzie ona w przyszłości "dłuższa". Co do buttonów, na razie je zostawię aczkolwiek jest szansa, że przy update je zmienię :)

[quote]"Strona w budowanie" jest za bardzo po lewo. [/quote]Fakt, przez te sociale sie przesunelo. Poprawione [quote]Animacja jest do kitu... nie podoba mi się kompletnie. [/quote]Kwestia gustu. Mi sie podoba bo odchodzi od "typowosci", cos sie dzieje przez chwile na stronie

<b>////update////</b> [code]-Stworzenie wersji responsywnej strony (nie na wszystkie urzadzenia - na wiekszosc) beda poprawki -Zmienienie przyciskow social media (oraz przycisku scrolltotop) -Zmiana animacji w "strona w budowie" (bylo od prawej a jest od dolu - lepiej wyglada) -Dodanie informacji o autorze i copyright do stopki -Synchronizacja animacji -Usuniecie z wersji mobilnej przyciskow social media (nie widza mi sie te przyciski w mobilnej wersji) -Usuniecie z wersji mobilnej informacji w stopce (zostawilem jedynie #scrolltotop)[/code] ////planowane zmiany////[code]-Zmiana przycisku "wyslij" w formularzu + nadanie mu hovera -Dodanie funkcji <a href...> do loga -Dodanie plynnego scrollowania do gory w JS[/code] //// [url=Ukryta zawartość] //// <b>Czekam na wasze sugestie odnosnie tej strony.</b>

[img]/upload/pliki/untitled_55d4eff99ff59.png[/img] <b>HTML:</b> [code]<div class="przyciskflat"> <a href="spacecms.eu" class="flatprzycisk">SPACECMS.EU</a> </div>[/code] <b>CSS:</b> [code].przyciskflat { margin: 0 auto; background: rgb(250,255,255); } .flatprzycisk { display: inline-block; font-family: "tahoma"; font-size: 15px; text-decoration: inherit; border: 2px solid; padding: 13px 40px; } .flatprzycisk:hover { -webkit-transition: 0.8s ease-in; -moz-transition: 0.8s ease-in; -o-transition: 0.8s ease-in; transition: 0.8s ease-in; } .flatprzycisk { background-color: rgba(255,255,255,0); border-color: rgb(52,168,200); color: rgb(52,168,200); } .flatprzycisk:hover { background-color: rgb(52,168,200); border-color: rgb(52,168,200); color: rgb(255,255,255); } [/code] Przycisk kiedys znalazlem, lekko przerobilem pod siebie.

Drobne poprawki. Matthew, wiem [img]emoticons/default_biggrin.png[/img] robione na szybko bo w stopce jest przycisk zrobiony na podstawie socialek. Musze przerobic kod aby przycisk byl osobno bo maja wspolny (wiec na szybko zrobilem br oraz center)

Porzadeczek jest xD wszedles w fontawesome css (fontawesome uzylem do socialek)

Uzylem tylko 3 grafik -logo -bg - strzalka do gory Chcialem w glownej mierze bawic sie css'em (i pocwiczyc go).

Niektorzy wiedza, ze postawilem sobie challenge. Jako, iz nigdy nic nie zakodowalem to tym wyzwaniem bylo wlasnie zakodowanie jakiejs strony. Strona stworzona w samym HTML i CSS (0 JS) Social icon sa przerobione z gotowca. Najwiecej czasu zeszlo mi z animacjami. [url=Ukryta zawartość] <b>CHALLANGE ZALICZONY ?</b>

Siemka [img]emoticons/default_wink.png[/img]

Autor: Phenax (Akshay Nair) Demo: Przed kliknieciem [img]Ukryta zawartość] Po kliknieciu [img]Ukryta zawartość] <b>HTML</b> [quote]<input type='checkbox' id='mmeennuu'> <label class='menu' for='mmeennuu'> <div class='barry'> <span class='bar'></span> <span class='bar'></span> <span class='bar'></span> <span class='bar'></span> </div> <ul> <li><a id='home' href='#home'>BeProLeague.pl</a></li> <li><a id='about' href='#about'>Liga</a></li> <li><a id='contact' href='#contact'>Cs</a></li> <li><a id='link' href='#link'>GO</a></li> </ul> </label> [/quote] <p style=""><b>CSS</b> <p style=""> [quote]$lred:#E57373; $red:#F44336; @mixin transition($in) { transition:$in; -webkit-transition:$in; -moz-transition:$in; -o-transition:$in; -ms-transition:$in; } body { margin:0; padding:0; background-color:#222; } * { font-family:Helvetica,sans-serif; color:#555; } #mmeennuu { display:none; } #mmeennuu:checked ~ .menu { width:500px; border-radius:5px; background-color:transparent; border:3px solid $red; height:85px; &>ul { display:block; opacity:1; } &>.barry { display:none; } } .menu { display:block; margin:30px auto; width:100px; height:100px; background-color:$red; border:3px solid transparent; border-radius:50%; overflow:hidden; cursor:pointer; @include transition(all 0.5s ease-in-out); div.barry { width:40px; margin:35px auto; .bar { display:block; width:100%; height:5px; margin-top:3px; border-radius:2px; background-color:#fff; } } ul { opacity:0; display:none; @include transition(all 0.5s ease-in-out); list-style-type:none; padding:0; width:500px; text-align:center; li { display:inline-block; a { text-decoration:none; display:inline-block; padding:15px 25px; color:$red; font-size:20px; @include transition(all 0.3s ease-in-out); border:3px solid transparent; border-radius:5px; &:hover { border-color:$red; } &:target { border-bottom-color:$red; } } } } } <p style=""> [/quote]

Nazwa: AutoModal (bez mozliwosci zamkniecia) Autor: blanken (wraz z kodami z neta) Demo: [url=Ukryta zawartość] [u]Stworzylem ten "dodatek", aby zablokowac dostep do zakladki, w ktorej prowadze prace. W necie znajdziecie wiele podobnych rzeczy lecz moj wyroznia sie tym, ze:[/u][code] - stworzony zostal pod (budowe podstrony) - nie da sie wylaczyc poprzez klikniecie (na prosbe moge dodac kod, ktory doda przycisk do zamykania) -latwo go edytowac - stworzony w samym html oraz css (w wiekszosci taki prac uzywa sie rowniez JS co usprawnia w pewnym stopniu ten dodatek)[/code] ______________________________________________________________________________________ <b>HTML</b> [quote][code]<div class="popup-wrapper" id="popup"> <div class="popup-container"> <b><center>Strona w budowie</b></center> <div class="meter"> <span style="width:70%"></span> <p>Prace ukonczone w 70%</p> </div> <center><p>Aktualnie pracujemy nad autorska drabinka dla naszej strony. <br>Juz niebawem</p></center> <br><center><a href="index.php"><span class="bluetext">Wroc do Glownej</span></a></center> </div> </div>[/code] [/quote]CSS [quote][code]body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 15px; } #popup { background-color: rgba(0,0,0,0.9); position: fixed; top:0; left:0; right:0; bottom:0; margin:0; -webkit-animation:autopopup 1s; -moz-animation:autopopup 1s; animation:autopopup s; } #popup:target { -webkit-transition:all 1s; -moz-transition:all 1s; transition:all 1s; opacity: 0; visibility: hidden; }@media (min-width: 768px){ .popup-container { width:600px; } } @media (max-width: 767px){ .popup-container { width:100%; } } .popup-container { position: relative; margin:7% auto; padding:30px 50px; background-color: #fafafa; color:#333; border-radius: 3px; }a.popup-close { position: absolute; top:3px; right:3px; background-color: #333; padding:7px 10px; font-size: 20px; text-decoration: none; height: 25px; border: 1px solid #b0b0b0; margin-top: 50px; /* viewing purposes */ margin-left: 0px; /* viewing purposes */ -webkit-box-shadow: inset 0 3px 5px 0 #d3d0d0; -moz-box-shadow: inset 0 3px 5px 0 #d3d0d0; box-shadow: inset 0 3px 5px 0 #d3d0d0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } div.meter span { display: block; height: 100%; animation: grower 1s linear; -moz-animation: grower 1s linear; -webkit-animation: grower 1s linear; -o-animation: grower 1s linear; position: relative; top: -1px; left: -1px; -webkit-border-radius: 244px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.2); box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.2); border: 1px solid #3c84ad; background: #6eb2d1; background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent)); -webkit-background-size: 45px 45px; } div.meter span:before { content: ''; display: block; width: 100%; height: 50%; position: relative; top: 50%; background: rgba(0, 0, 0, 0.04); } div.meter p { position: absolute; top: 0; margin: 0 10px; font-family: 'Helvetica'; font-weight: bold; -webkit-font-smoothing: antialised; font-size: 15px; color: #333; text-shadow: 0 1px rgba(255, 255, 255, 0.6); } @keyframes grower { 0% { width: 0%; } } .bluetext { background:#0000ff; border-radius: 1px; color: #ffffff; padding: 4px 6px; text-transform:uppercase; font-size:13px; }[/code] [/quote]Zakazuje udostepniania tego pliku bez mojej zgody. Chcesz go gdzies udostepnic napisz mi na PW [img]emoticons/default_smile.png[/img] Niektore kody pisane przeze mnie a niektore z neta :) . Niestety nie jestem w stanie podac dokladnych autorow dlatego przepraszam.

Dzieki, kodzik skopiowalem, przerobilem i smiga pieknie.

Nadal szukam

Witam ! Potrzebuje jakiegos hostingu plikow, ktory bede mogl zamiescic za podstronie swojej strony. Cos jak modyfikacja dodajaca hosting na forum przema by Krasnal. Moze dacie rade jak przerobic ten mod i umiescic na swojej stronie.

Sieeemka