Skocz do zawartości

Gibek

Użytkownicy
 Wyświetl profil  Zobacz jego aktywność

  • Zawartość

    19

  • Rejestracja

  • Ostatnio

Wszystko napisane przez Gibek

  1. Witam serdecznie, po dłuższej przerwie chciałbym na poważnie powrócić do tematu kodowania stron www, troszkę poczytałem troszkę sobie przypomniałem i postanowiłem coś napisać. Chciał bym oddać to wam do oceny, chodzi mi głównie o kod, tok myślenia ponieważ dużo się zmieniło w HTML5 i nie chciał bym uczyć się źle, rozumiem przez to utrwalanie błędów które za pewne robię. http://bartlomiej-dalek.bl.ee/web/ <!doctype html> <html class="no-js" lang="pl"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Strona internetowa</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/style.css"> <script src="js/vendor/modernizr-2.8.3.min.js"></script> </head> <body> <header> <nav> <div class="center"> <a href="#"> <img src="img/logo.png" alt="" class="logo" /></a> </div> <ul> <li><a href="#"> Home </a></li> <li><a href="#"> News </a></li> <li><a href="#"> Contact </a></li> </ul> </nav> <div class="slogan"> <h2> Think. Define. Desing.</h2> <div class="border"></div> <p> We design solutions for digital interactions. With its approach, our team generates extraordinary value for brands through innovative design.</p> </div> </header> <section class="offer"> <h2 class="center1"> SERVICE WE OFFER </h2> <hr/> <p class="center1">Buzz analytics business-to-consumer. Partner network ramen social media freemium iteration.</p> <div class="info1"> <img src="img/box.jpg" alt="" class="trav" /> <img src="img/ico1.png" alt="" class="ic" /> <p class="ic1-txt">Canvas metri essar. Incubator ramen viral product management drect mailing. Canvas metri essar. Incubator ramen viral product management drect mailing. such founders gamification Effct.</p> </div> <div class="info1 t"> <img src="img/box.jpg" alt="" class="trav" /> <img src="img/ico2.png" alt="" class="ic" /> <p class="ic1-txt">Canvas metri essar. Incubator ramen viral product management drect mailing. Canvas metri essar. Incubator ramen viral product management drect mailing. such founders gamification Effct.</p> </div> </section> <section class="kontakt"> <h2> Kontakt </h2> <hr /> <div class="contact-group"> <div class="localization"> <img src="img/facebook30.png" alt="" /> <p>Zduńska Wola Ul.Kwadratowa 15/22</p> </div> <div class="email"> <img src="img/mail3.png" alt="" /> <p>gibekrecords@gmail.com</p> </div> <div class="phone"> <img src="img/phone325.png" alt="" /> <p>600 - 151 - 388</p> </div> <div class="clear-both"></div> <p class="center1 contact-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis efficitur orci eget risus suscipit vestibulum in non lectus. Suspendisse sollicitudin ut leo id lacinia. Praesent maximus rhoncus ipsum a hendrerit. Donec tempor, dui et lobortis pulvinar, elit neque rhoncus arcu, ac feugiat purus lorem in felis. Etiam ac massa in ipsum ornare pharetra eu non lorem.</p> </div> </section> <footer> <p> Bartłomiej Dałek 2015 © </p> </footer> </body> </html> .clear-both {clear: both;} .center1 { text-align: center;} nav { width:980px; margin:0 auto;} nav ul { margin:0; padding: 15px 0; text-align: center; } nav ul li { display:inline-block; padding:25px; } nav ul li a { text-decoration:none; color:#d2d5db; transition-duration: 1s; font-family: 'Roboto Condensed', sans-serif; font-size: 18px;} nav ul li a:hover { color: white; font-weight: bold;} header { background: url("../img/1.jpg") center; opacity: 0.9; height: 470px; width: 100%; background-size: cover;} .logo { position: absolute; padding: 20px;} .slogan { color: white; padding-top: 50px;} .slogan h2 { width: 980px; margin: 0 auto;} .slogan p { width: 980px; margin: 0 auto; margin-top: 10px; } .border { border:rgba(255,255,255,0.3) 1px solid; width: 77%; float: right; } .trav { } .offer hr { display: block; height: 3px; border: 0; margin: 3em 0; padding: 0; background-image: -webkit-linear-gradient(left, #fff, #e6e6e6, #fff); background-image: -moz-linear-gradient(left, #fff, #e6e6e6, #fff); background-image: -ms-linear-gradient(left, #fff, #e6e6e6, #fff); background-image: -o-linear-gradient(left, #fff, #e6e6e6, #fff); width: 50%; left: 25%; position: relative; border: none; } .info1 {width: 980px; margin: 0 auto; } .ic { padding-left: 50px;} .ic1-txt { width: 300px; margin-left: 510px; margin-top: -180px; text-align: center;} .t {padding-top: 50px;} .kontakt { padding-top: 220px;} .kontakt h2 { text-align: center; font-size: 30px; padding-top: 20px; color: #666;} .kontakt hr { display: block; height: 3px; border: 0; margin: 3em 0; padding: 0; background-image: -webkit-linear-gradient(left, #fff, #e6e6e6, #fff); background-image: -moz-linear-gradient(left, #fff, #e6e6e6, #fff); background-image: -ms-linear-gradient(left, #fff, #e6e6e6, #fff); background-image: -o-linear-gradient(left, #fff, #e6e6e6, #fff); width: 50%; left: 25%; position: relative; border: none; } .localization { float: left; text-align: center; width: 320px; } .email {float: left; text-align: center; width: 320px;} .phone { float: left; text-align: center; width: 320px;} .contact-group {width: 980px; margin: 0 auto;} .contact-text { line-height: 30px;} footer {background: #2b2b2b; color: whitesmoke; text-align: center; font-size: 17px; height: 60px; margin-top: 100px; } footer p { padding-top: 15px; font-family: 'Roboto Condensed', sans-serif; } @media screen and (max-width:1000px) { nav { width: auto;} .logo { position: relative; padding: 25px 0px 0px 0px;} .center {text-align: center;} .border { display: none;} .slogan { padding-top: 65px;} .slogan h2 { width: auto; position: relative; text-align: center; border:rgba(255,255,255,0.3) 1px solid; padding: 40px 0px 40px 0px;} .slogan p { width: auto; position: relative; text-align: center; padding-top: 50px; } header { height: 600px; } .contact-group {width: auto; margin: 0;} .localization {width: 99%; } .email {width: 99%;} .phone { width: 99%;} .trav {display: none;} .info1 {width: auto; margin: 0;} .ic1-txt { width: 99%; margin-left: 0; margin-top: 0; text-align: center;} .ic {padding-left: 45%; } .kontakt {padding-top: 50px;} } Także czekam na opinię czego nie powinienem robić co jest nie tak wykonane lub może jest ok.

  2. Poprawność kodu struktura

    Gibek odpisał Gibek na temat w xHTML / CSS / Javascript

    z tymi tabami nie zrozumiałem co jest nie tak i ewentualnie jak ustawić

  3. Poprawność kodu struktura

    Gibek odpisał Gibek na temat w xHTML / CSS / Javascript

    przepraszam ale mógł byś wytłumaczyć inaczej bo nie zrozumiałem ;/

  4. Poprawność kodu struktura

    Gibek odpisał Gibek na temat w xHTML / CSS / Javascript

    Razor dzięki za stronkę Xorg wielkie dzięki popracuję nad tym.

  5. Poprawność kodu struktura

    Gibek odpisał Gibek na temat w xHTML / CSS / Javascript

    Wielkie dzięki za opinię, postaram nauczyć się wykorzystywać :after czy :before muszę to przyswoić, tak samo SASS jeszcze o tym nie słyszałem także biorę się za naukę
  6. Nadal aktualne ? jak tak napisz na pw
  7. Witam zamierzam postawić swoją stronę dlatego że dużo osób przy zleceniu prosi właśnie o okazanie swojej strony lub portfolio. Jak według was to wygląda, czy strona jest czytelna czy ma jakieś błędy jakie są wasze odczucia czy chętnie zapoznacie z ofertą czy odstrasza was ? Czekam na szczere opinie ponieważ samemu ciężko mi ocenić obiektywnie moją prace ;] http://gibek22.ct8.pl/

  8. Moja strona - portfolio

    Gibek odpisał Gibek na temat w Strony do oceny

    Dziękuje wszystkim za opinie i rady, wkrótce zbiore sobię to wszystko do "kupy" i poprawię, jeszcze raz dzięki

  9. Moja strona - portfolio

    Gibek odpisał Gibek na temat w Strony do oceny

    Tak czerpałem inspiracje z roznych stron.

  10. Moja strona - portfolio

    Gibek odpisał Gibek na temat w Strony do oceny

    dzięki już znalazłem jeden problem dzięki tobie, u mnie oferta wygląda tak :
  11. Witam mam do was pytanie a mianowicie jak byś cie to zrobili ? próbowałem takich metod jak w tytule ale troszke mi to nie wychodzi, nie moge sobie poradzić dlatego proszę o pomoc

  12. Flex box ? float ?

    Gibek odpisał Gibek na temat w xHTML / CSS / Javascript

    Tak, bo jesli by mialy byc to kolumny skladajace sie z tekstu to bez problemowo natomiast jak chce im nadac tlo to mi po prostu nie wychodzi
  13. Witam w ramach ćwiczeń koduje sobie layout ale w trakcie pracy zauważyłem dziwny błąd a mianowicie na komputerze stacjonarnym ( monitro 22 cale ) oraz laptopie ( 15,6 ) nie ma żadnego problemu z wyświetlaniem strony natomiast na telefonie jest dziwna przerwa po prawej stronie i nie mam pojęcia gdzie zrobiłem błąd i czemu tylko na telefonie jest błąd. Proszę o pomoc, stronę online można podejrzeć na www.gibek.ct8.pl Zdjęcie z telefonu w załączniku <!DOCTYPE HTML> <html lang="pl"> <head> <meta charset="utf-8"> <title>Ćwiczenia</title> <meta http-equiv="Content-Language" content="pl" /> <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div id="top"> <div id="nav"> <ul> <li><a href="#" class="activ"> Home </a></li> <li><a href="#"> Services </a></li> <li><a href="#"> Portfolio </a></li> <li><a href="#"> Blog </a></li> <li><a href="#"> Hire me </a></li> </ul> <img src="img/logo.png" alt="" /> <div id="slid"> <a href="#"> View my work </a> </div> </div> </div> <div id="service"> <div id="serwis"> <!-- Kolumna 1 --> <div id="web-design"> <img src="img/1.png" alt="" /> <p>Web Desing</p> <div id="txt"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dictum metus nec nunc consectetur dapibus. Donec tristique ornare tempor. . </div> </div> <!-- Kolumna 2 --> <div id="mobile-design"> <img src="img/2.png" alt="" /> <p>Mobile Desing</p> <div id="txt"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dictum metus nec nunc consectetur dapibus. Donec tristique ornare tempor. . </div> </div> </div> </div> <div id="portfolio"> <div id="txt-area1"> <p>Bartłomiej Dałek</p> <br /> <p class="in"> 30.08.2013</p> <br /><br /> <div id="kol"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis mauris, iaculis eget dapibus mollis, sodales eu lacus. Aenean commodo in turpis et laoreet. Suspendisse non faucibus erat, quis tincidunt sem. Donec semper eros posuere, fringilla leo sed, bibendum est. Nunc feugiat orci a tellus condimentum, non ullamcorper neque luctus. In nulla tortor, venenatis vitae vestibulum sit amet, tincidunt elementum ipsum.</p> </div> <br /><br /> <p class="in">Klient :</p> <br /> <p > Joe Tree </p> <br /> <p class="in">Zadanie :</p> <br /> <p > Kodowanie Layoutu </p> <img src="img/iphone5.png" alt="" id="iphone" /> </div> </div> <div id="hello"> </div> </body> </html> #top { background:url(../img/header.jpg); height:660px;} #nav { width:950px; margin:0 auto;} #nav ul { margin:0; padding: 50px 0; float:right; } #nav ul li { display:inline; list-style: none; padding:10px; } #nav ul li a { text-decoration:none; color:#000; transition-duration: 1s; color:#FFF;} .activ { font-weight:bold; } #nav > img {position:absolute; margin-top:50px;} #slid { background:url(../img/sider.png); width:794px; height:390px; position:absolute; margin-top:129px; } #slid a { text-decoration:none; color:#FFF; font-weight:bold; display:block; position:absolute; top:347px; left:33px; font-size:17px; transition:1s;} #slid a:hover { color:#F00;} #service { background:#FFF; height:400px; } #serwis { width:950px; margin:0 auto; margin-top:200px; } #web-design { font-size:31px; font-family: 'Open Sans Condensed', sans-serif;} #web-design p { display:block; position:absolute; margin-left:80px; margin-top:-55px;} #txt {width:300px; font-size:22px; margin-left:80px; } #mobile-design { font-size:31px; font-family: 'Open Sans Condensed', sans-serif; margin-left:550px; margin-top:-178px;} #mobile-design p { display:block; position:absolute; margin-left:80px; margin-top:-55px;} #portfolio { height:650px; background:rgba(204,204,204,0.5);} #txt-area1 { width:950px; margin:0 auto; padding:100px;} #txt-area1 p {font-family: 'Lato', sans-serif; font-size:19px;} .in { color:rgba(153,153,153,0.6); font-size:1px;} #kol { width:500px; font-family: 'Open Sans Condensed', sans-serif;} #iphone { display:block; float:right; margin-top:-530px;} #hello { height:700px; background:#FFF;}

  14. Kodowanie Layoutu

    Gibek odpisał Gibek na temat w xHTML / CSS / Javascript

    dzięki niestety to rozwiązanie nic nie dało, ale usiadłem i w końcu rozwiązałem problem który był banalny ( jak go znalazłem ) mianowicie do wyśroddkowania #txt-area1 użyłem paddingu który był odpowiedzialny za całe zdarzenie
  15. Witam nie wiem czemu ale nie działa mi pseudoklasa visited. Chciał bym uzyskać taki efekt że na podstronie gdzie się aktualnie znajduję był podświetlony tekst np na czerwono natomiast działa tylko hover a jak zmieniam podstronę to nic się nie dzieje. live : http://gibek.p.ht/ ( podstrona home i kontakt narazie dostępne ) Css body { margin: 0; background:url(../gfx/bg.png); font-family:Verdana, Tahoma, Geneva, sans-serif; font-size: 11px; color: #FFF;} #wrapper { width:978px; margin: 0 auto;} #top { background:url(../gfx/banner.png); height: 260px; width: 978px; } #logo { background:url(../gfx/logo.png) no-repeat; height: 202px; position: absolute; width:210px; margin-left: 10px; top:25px;} #logo h1 { display:block; text-indent: -999px; } #nav { background:; border-top:1px #999 solid;} #nav ul { margin:0; padding: 10px;} #nav ul li { display:inline; list-style: none; padding:10px; } #nav ul li a { text-decoration:none; color:#FFF; font-weight:bold; transition-duration: 1s;} #nav ul li a:visited { color:F00;} #nav ul li a:hover { color:#F00; } #txt { display:block; position:absolute; width:978px; margin-top: 20px; } #stopka { border-top: 1px #999 solid; text-align:right; margin-top:60px; } #nr { display:block; position:absolute; margin-left: 750px; margin-top: -100px; width:100px; }

  16. Visited ( nie działa )

    Gibek odpisał Gibek na temat w xHTML / CSS / Javascript

    dobry pomysł dzięki

  17. Visited ( nie działa )

    Gibek odpisał Gibek na temat w xHTML / CSS / Javascript

    A wiec zle rozumialem mozliwosc visited, to w takim razie jak mozna osiagnac efekt ttai jak pisalem czyli np jesli uzytkownik znajduje sie na podstronie kontakt to kontakt zmienia swoj kolor ?

  18. Visited ( nie działa )

    Gibek odpisał Gibek na temat w xHTML / CSS / Javascript

    ale gafa ale teraz wystąpił inny błąd a mianowicie wszystkie elementy nav zmieniły kolor ;/ a nie oto mi chodziło. http://www19.zippyshare.com/v/63890494/file.html
  19. Witam ćwiczę sobie tworzenie stron www i mam pytanko jak zrobić a by ten hover który jest w menu trwał dłużej bo jak najeżdżam to wszystko ok jest wolniej ale chciał bym też aby powoli wracał do oryginalnej formy. Strona - http://gibek.p.ht/ Mój kod css body { margin: 0; background:url(../gfx/bg.png); font-family:Verdana, Tahoma, Geneva, sans-serif; font-size: 11px; color: #FFF;} #wrapper { width:978px; margin: 0 auto;} #top { background:url(../gfx/banner.jpg); height: 260px; width: 978px; border-top:#0CF; border-top: #CCC 5px solid;} #logo { background:url(../gfx/logo.png) no-repeat; height: 202px; position: absolute; width:210px; margin-left: 10px; top:25px;} #logo h1 { display:block; text-indent: -999px; } #nav { background:#999; border-top:1px #999 solid;} #nav ul { margin:0; padding: 10px;} #nav ul li { display:inline; list-style: none; padding:10px; } #nav ul li a { text-decoration:none; color:#FFF; font-weight:bold;} #nav ul li a:hover { color:#F00; transition-duration:1s;}

  20. Hover ( czas trwania )

    Gibek odpisał Gibek na temat w xHTML / CSS / Javascript

    super wielkie dzięki
×