Problem z nawigacją

komentarz 23 marca 2019 przez BIREXD Obywatel (1,180 p.)

Naświetl problem bardziej :) Najlepiej daj kodzik

komentarz 23 marca 2019 przez LinosiK Obywatel (1,920 p.)

<body>
		<a href="#" class="scrollup"></a>
        <header class="header" style="background-color: green;">
            <nav id="main">
                    <img src="logo.png" alt="logo" id="imie-logo"/>
                <ul>
                    <div id="menu">
                        <li><a href="#" id="link0">Start</a></li>
                        <li><a href="#" id="link1">Dlaczego ja?</a></li>
                        <li><a href="#" id="link2">Czego się uczę</a></li>
                        <li><a href="#" class="link3">o Mnie</a></li>
                        <li><a href="#" id="link4">Moje prace</a></li>
                        <li><a href="#" id="link5">Kontakt</a></li>
                    </div>
                </ul>
            </nav>
        </header>
        <section>
        <div class="wrapper wrapper-flex">
            <aside>
                <div class="wrapper">
                    <div class="text-center">
                        <h1>Maciej Hancyk</h1>
                        <!-- Swoje zdjęcie umieść w ./src/img i uruchom gulpa, by zoptymalizował je -->
                        <!-- Jeśli nie używasz gulpa, wstaw zdjęcie do ./dist/img -->
                        <img src="twarz.jpg" alt="Photo">
                    </div>
                    <ul>
                        <li>
                            <i class="fa fa-globe fa-fw"></i> <a href="javascript:void(0)">jan-nowak.pl</a>
                        </li>
                        <li>
                            <!-- wewnątrz href podaj adres e-mail poprzedzony mailto: -->
                            <!-- np. href="mailto:adres@domena.com" -->
                            <i class="fa fa-envelope fa-fw"></i> <a href="javascript:void(0)">kontakt@jan-nowak.pl</a>
                        </li>
                        <li>
                            <i class="fa fa-phone fa-fw"></i> +48 666 666 666
                        </li>
                        <li>
                            <i class="fa fa-map-marker fa-fw"></i> Warszawa, Polska
                        </li>
                        <li>
                            <i class="fa fa-calendar fa-fw"></i> 01.01.1990
                        </li>
                    </ul>
                </div>
                <div class="social">
                    <ul>
                        <li>
                            <i class="fa fa-facebook fa-fw"></i> <a href="https://fb.com/username">fb.com/username</a>
                        </li>
                        <li>
                            <i class="fa fa-twitter fa-fw"></i> <a href="https://twitter.com/username">@username</a>
                        </li>
                        <li>
                            <i class="fa fa-linkedin fa-fw"></i> <a href="https://linkedin.com/in/username">linkedin.com/in/username</a>
                        </li>
                    </ul>
                </div>
            </aside>
            <main>
                <h2>Doświadczenie zawodowe</h2>
                <ul>
                    <li>
                        <strong>ABC S.A.</strong> <span class="pull-right">styczeń 2013 &ndash; obecnie</span>
                        <div class="position">Senior web developer</div>
                        <div class="position-description">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in eros ex.
                            Phasellus vestibulum egestas venenatis.
                        </div>
                    </li>
                    <li>
                        <strong>XYZ Sp. z o.o.</strong> <span class="pull-right">styczeń 2010 &ndash; grudzień 2012</span>
                        <div class="position">Web developer</div>
                        <div class="position-description">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in eros ex.
                            Phasellus vestibulum egestas venenatis.
                        </div>
                    </li>
                </ul>
    
                <h2>Edukacja</h2>
                <ul>
                    <li>
                        <strong>Uniwersytet Warszawski</strong> <span class="pull-right">2009 &ndash; 2014</span>
                        <div class="position">Informatyka</div>
                        <div class="position-description">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in eros ex.
                            Phasellus vestibulum egestas venenatis.
                        </div>
                    </li>
                </ul>
    
                <h2>Projekty
                    <span class="pull-right">
                        <i class="fa fa-github fa-fw"></i> <a href="https://github.com/username">github.com/username</a>
                    </span>
                </h2>
                <ul>
                    <li>
                        <strong><a href="https://github.com/username/repo">Repozytorium</a></strong>
                        <div class="position-description">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in eros ex.
                        </div>
                    </li>
                    <li>
                        <strong><a href="https://github.com/username/repo">Repozytorium</a></strong>
                        <div class="position-description">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in eros ex.
                        </div>
                    </li>
                    <li>
                        <strong><a href="https://github.com/username/repo">Repozytorium</a></strong>
                        <div class="position-description">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in eros ex.
                        </div>
                    </li>
                </ul>
    
                <h2>Umiejętności</h2>
                <h3>Programowanie</h3>
                <p>HTML, CSS, SASS, JavaScript, jQuery, Angular.js, vue.js, PHP, Symfony, SQL</p>
    
                <div class="container">
                    <div class="col-1-2">
                        <h3>Narzędzia</h3>
                        <p>Git, Node.js, gulp, JIRA</p>
                    </div>
                    <div class="col-1-2">
                        <h3>Języki</h3>
                        <ul>
                            <li><strong>Polski</strong> <span class="pull-right">język ojczysty</span></li>
                            <li><strong>Angielski</strong> <span class="pull-right">komunikatywny</span></li>
                            <li><strong>Niemiecki</strong> <span class="pull-right">podstawowy</span></li>
                        </ul>
                    </div>
                </div>
            </main>
        </div>
    </section>
        <footer>
            Wyrażam zgodę na przetwarzanie danych osobowych zawartych w mojej aplikacji dla potrzeb niezbędnych do realizacji procesów rekrutacyjnych zgodnie z ustawą z dnia 29 sierpnia 1997 r. o ochronie danych osobowych (t.j. Dz. U. z 2015 r. poz. 2135, 2281, z 2016 r. poz. 195, 677).
        </footer>

komentarz 24 marca 2019 przez kalczur Gaduła (4,320 p.)

Wrzuć jeszcze css

komentarz 24 marca 2019 przez LinosiK Obywatel (1,920 p.)

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext);
html{background-color:#eee;font-size:16px}
body{
    display:-webkit-flex;
    display:-ms-flex;
    display:flex;
    flex-direction:column;
    min-height:100vh;
    background-color:#fff;
    height:297mm;
    width:210mm;
    margin:0 auto;
    padding:0;}
    body,body *{
        font-family:'Open Sans',sans-serif;box-sizing:border-box}
    a{color:inherit;text-decoration:none}
    .pull-right{float:right}
    .text-center{text-align:center}
    .wrapper{
            flex:1}
    .wrapper.wrapper-flex{
        display:-webkit-flex;
        display:-ms-flex;
        display:flex;
        flex-direction:row;
    }
    aside{display:-webkit-flex;display:-ms-flex;display:flex;flex-basis:calc(1/3*100%);flex-direction:column;background-color:#3f51b5;color:#fff;padding:3mm}
    aside h1{margin-top:5px;margin-bottom:20px}aside img{border:3px solid #fff;border-radius:50%;height:75%;margin-bottom:25px;width:75%}
    aside ul{list-style-type:none;margin:0;padding:0}
    aside ul li{margin-bottom:10px}
    aside ul li i{margin-right:10px}
    aside ul li:last-of-type{margin-bottom:0}
    aside .social{font-size:.8rem}
    main{display:-webkit-flex;display:-ms-flex;display:flex;flex-basis:calc(2/3*100%);flex-direction:column;background-color:#fff;color:#212121;padding:3mm 5mm}
    main a{color:#3f51b5}
    main h2{line-height:1;margin:10px 0}
    main h2 span{font-size:1rem;padding-top:.25rem}
    main h3{margin:10px 0}
    main ul{list-style-type:square;margin:0;margin-bottom:5px;padding:0;padding-left:20px}
    main ul li{line-height:1.5;margin-bottom:10px}
    main ul li .position,main ul li span{color:#616161}
    main ul li .position{font-weight:700}
    main .container{display:-webkit-flex;display:-ms-flex;display:flex}
    main .col-1-2{flex-basis:50%}
    footer{border-top:1px solid #212121;color:#212121;font-size:calc(5/8*1rem);padding:3mm;text-align:center}

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci