Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>Daftcode</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <section id="main-page">
            <img id="logo" src="6BM_zdjecia/logo.png"/>
            <nav id="page-navigation">
                <ul id="page-sections">
                    <li id="section-main">HOME</li>
                    <li id="section-about">ABOUT</li>
                    <li id="section-concerts">CONCERTS</li>
                    <li id="section-photos">PHOTOS</li>
                    <li id="section-contact">CONTACT</li>
                </ul>
                <!--- myślałem nad listą, ale wtedy widać kropki, a nie chcemy żeby było je widać , więc zrobiłem oddzielne divy-->
                <!--Zastanawialem sie czy bedzie wydzielona czesc strony po lewej na pasek nawigacji , a po prawej na zdjecie-->
                <!-- Czy może trzy rzędy na stronie Navigation-Photos-SocialMedia-->
                <div id="facebook">
                    <img src="6BM_zdjecia/fb.svg" alt="facebook"/>
                </div>
                <div id="instagram">
                    <img src="6BM_zdjecia/insta.svg" alt="instagram"/>
                </div>
                <div id="last">
                    <img src="6BM_zdjecia/last.svg" alt="last"/>
                </div>
                <div id="youtube">
                    <img src="6BM_zdjecia/yout.svg" alt="youtube"/>
                </div>
            </nav>
            <section id="band-members">
                <img src="6BM_zdjecia/band-member01.png" alt="band-member01"/>
                <img src="6BM_zdjecia/band-member02.png" alt="band-member02"/>
                <img src="6BM_zdjecia/band-member03.png" alt="band-member03"/>
                <img src="6BM_zdjecia/band-member04.png" alt="band-member04"/>
                <h3>KAMIL ZGONDEK</h3>
                <span>Keys</span>
            </section>
        </section>

        <section id="about-page">
            <h1>ABOUT</h1>
            <img src="6BM_zdjecia/band01.jpg"/>
            <article id="about-band">
                <h3>STRAIGHT FROM LUBLIN</h3>
                <p>6BM is a young band which has it's <br/> origins in the city of Lublin, playing music <br/> described as
                    electorock. <br/>
                    Band members aim to convey emotions,<br/> reflexion but also hope.
                </p>
                <p> They are inspired by various genres, like: <br/>
                    alternative rock, nu-metal, synthwave or <br/>
                    even drum'n'bass. <br/>
                    As for now they released their debut EP - <br/>
                    TRINITY and they started working on their <br/>
                    first full length album.
                </p>
            </article>
        </section>

        <section id="concerts-page">
            <h1>CONCERTS</h1>
            <div id="concert-one">
                <img src="6BM_zdjecia/band02_WiechnikMarcin.jpg" alt="band02_WiechnikMarcin"/>
                <h2>20.12.2018</h2>
                <span>Lublin, klub XXX</span>
                <button>BUY TICKET</button>
            </div>
            <div id="concert-two">
                <img src="6BM_zdjecia/band03_WiechnikMarcin.jpg" alt="band03_WiechnikMarcin"/>
                <h2>20.12.2018</h2>
                <span>Warszawa, klub YYY</span>
                <button>BUY TICKET</button>
            </div>
            <div id="concert-three">
                <img src="6BM_zdjecia/band04_JakubBodys.jpg" alt="band04_JakubBodys"/>
                <h2>20.12.2018</h2>
                <span>Kraków, klub ZZZ</span>
                <button>BUY TICKET</button>
            </div>
            <div id="concert-four">
                <img src="6BM_zdjecia/band05_JakubBodys.jpg" alt="band05_JakubBodys"/>
                <h2>20.12.2018</h2>
                <span>Poznań, klub AAA</span>
                <button>BUY TICKET</button>
            </div>
        </section>
        <section id="video-page">
            <iframe width="860" height="560"
                    src="https://www.youtube.com/embed/eBgaMSEY_0Y"
                    frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen>
            </iframe>
        </section>
        <section id="photos-page">
            <h1>PHOTOS</h1>
            <div id="photos-row-one">
                <img src="6BM_zdjecia/band05_JakubBodys.jpg" alt="band05"/>
                <img src="6BM_zdjecia/band06_JakubBodys.jpg" alt="band06"/>
                <img src="6BM_zdjecia/band07.jpg" alt="band07"/>
            </div>
            <div id="photos-row-two">
                <img src="6BM_zdjecia/band08.jpg" alt="band08"/>
                <img src="6BM_zdjecia/band09.jpg" alt="band09"/>
                <img src="6BM_zdjecia/band10.jpg" alt="band10"/>
            </div>
            <div id="photos-row-three">
                <img src="6BM_zdjecia/band11.jpg" alt="band11"/>
                <img src="6BM_zdjecia/band04_JakubBodys.jpg" alt="band04"/>
                <img src="6BM_zdjecia/band05_JakubBodys.jpg" alt="band05"/>
            </div>
        </section>
        <section id="contact-page">
            <h1>CONTACT</h1>
            <img src="6BM_zdjecia/band12.jpg" alt="band12">
            <div>Tel: 00 48 999 00 00 <br/> e-mail: 6bmband@mail.mail</div>
            <br>
            <form>
                <label for="mail">Email</label>
                <input id="mail">
                <br/> <br/>
                <label for="topic">Topic</label>
                <input id="topic">
                <br/><br/>
                <button type="submit">CONTACT US!</button>
            </form>
        </section>
    </body>
</html>