index.html

<!DOCTYPE html>
<html lang="pl">
  <head>
    <title>Programuj dziewczyno</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta charset="utf-8">
    <link rel="icon" href="images/favicon.png" type="image/x-icon">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Istok+Web:400,700|Montserrat:400,600,700&amp;subset=latin-ext" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header>
      <nav class="navbar navbar-fixed-top">
        <div class="col-sm-4 brand-container">
          <a href="/" class="navbar-brand">Programuj, dziewczyno!</a>
        </div>
        <div class="collapse navbar-collapse col-sm-8">
          <ul class="nav navbar-nav nav-list">
             <li class="for-dropdown"><a href="#">Materiały do nauki</a>
              <div class="dropdown">
                <ul>
                  <li><a href="https://www.codecademy.com/" target="_blank">Codecademy</a></li>
                  <li><a href="https://www.freecodecamp.org/" target="_blank">FreeCodeCamp</a></li>
                  <li><a href="https://codecombat.com/"target="_blank">CodeCombat</a></li>
                </ul>
              </div>
            </li>
            <li><a href="https://coderslab.pl/" target="_blank">Coders Lab</a></li>
            <li><a href="http://www.wakeupandcode.pl/" target="_blank">Wake up and Code</a></li>
            <li><a href="https://www.facebook.com/groups/programujdziewczyno/" target="_blank">Grupa na Facebooku</a></li>
            <li><a href="https://github.com/CodersLab-core/Programujdziewczyno" target="_blank">Repozytorium Github</a></li>
          </ul> 
        </div>
      </nav>
    </header>
    <div class="jumbotron">
      <div class="container">
        <h2 class="main-slogan">Gotowa na naukę programowania?</h2>
        <p>
          <a class="btn btn-primary tasks-btn" href="https://github.com/CodersLab-core/Programujdziewczyno" role="button" target="_blank">
            Zobacz zadania w repozytorium
          </a>
        </p>
      </div>
    </div>
    <div class="container-fluid main-points">
      <div class="row">
        <section class="col-sm-4">
          <span class="circle heart glyphicon glyphicon-heart"></span>
          <h5>Spróbuj i zobacz, czy to coś dla Ciebie</h5>
          <p>Wiele dziewczyn uważa, że kodowanie to męskie zajęcie. Zupełnie bezpodstawnie!</p>
          <p class="more">Każdy powinien móc spróbować programowania, żeby zdecydować, czy to coś, co mu się podoba. Wystarczy zacząć!</p>
          <button class="btn btn-default read-more">więcej<span class="glyphicon glyphicon-chevron-down"></span></button>
        </section>
        <section class="col-sm-4">
          <span class="circle education glyphicon glyphicon-education"></span>
          <h5>Zdobądź nowe umiejętności</h5>
          <p>Nauka kodowania to nauka nowego sposobu myślenia, postrzegania problemów do rozwiązania.</p>
          <p class="more">Nawet jeśli nie wiążesz z tym swojej przyszłości, programownaie to świetny sposob na trening umysłu.</p>
          <button class="btn btn-default read-more">więcej<span class="glyphicon glyphicon-chevron-down"></span></button>
         </section>
        <section class="col-sm-4">
          <span class="circle star glyphicon glyphicon-star"></span>
          <h5>Udowodnij sobie, że możesz jeszcze więcej!</h5>
          <p>Twój kod pewnie nie zadziała za pierwszym razem. Za drugiem zapewnie też nie.</p>
          <p class="more">Ale gdy w końcu wszystko pójdzie dobrze, satysfakcja z rozwiązanego problemu będzie ogromna. I warto na to czekać!</p>
          <button class="btn btn-default read-more">więcej<span class="glyphicon glyphicon-chevron-down"></span></button>
         </section>
      </div>
    </div>
    <div class="plan">
      <div class="row">
        <div class="plan-description col-sm-6 col-sm-offset-1">
          <h3>Jak najlepiej zaplanować </br> naukę programowania?</h3>
          <p>Podstawą działania jest dobry plan. Wykorzystaj poniższy formularz, żeby wprowadzić pierwsze zadania na swoją listę zadań</p>
          <div class="list-container">
            <h5>Plan działania</h5>
            <div class="input-group">
              <input class="form-control" type="text" placeholder="Tutaj wpisz zadanie do wykonania">
              <span class="input-group-btn">
                <button class="btn btn-secondary add-task-btn" type="button">
                  Dodaj do listy
                </button>
              </span>  
            </div>
            <ul class="list list-group">
              <li>przykładowe zadanie do zrobienia</li>
              <li>przykładowe zadanie do zrobienia</li>
              <li>przykładowe zadanie do zrobienia</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="orgs">
      <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
          <h3>Organizatorzy</h3>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6 col-sm-offset-3 orgs-container">
          <div class="col-sm-6">
            <img src="./images/services-4-240x194.png" alt="img">
          </div>
          <div class="col-sm-6">
            <ul class="slider">
              <li class="org visible">
                <h5><a href="https://coderslab.pl/" target="_blank">Coders Lab</br>Szkoła Programowania</a></h5>
                <p>
                  Szkoła programowania, dzięki której nawet osoby bez doświadczenia w programowaniu mogą 
                  zostać w krótkim czasie junior developerami. W ofercie ma kursy typu bootcamp oparte 
                  o takie technologie jak JavaScript, WordPress, PHP, Python Ruby, Java oraz .NET (C#). 
                </p>
              </li>
              <li class="org">
                <h5><a href="http://www.wakeupandcode.pl/" target="_blank">Wake up and Code</a></h5>
                <p>
                  Blog o nauce programowania i początkach w branży IT. Motywacja, materiały do nauki,
                  zachęcanie dziewczyn do spróbowania swoich sił w kodowaniu. Przemyślenia humanistki, 
                  która postanowiła zostać programistką. I jej się udało. Dla tych, którzy nie wiedzą, 
                  od czego zacząć naukę. 
                </p>
              </li>
              <li class="org">
                <h5><a href="https://www.facebook.com/groups/programujdziewczyno/" target="_blank">Programuj, dziewczyno!</br>Grupa motywacyjna</a></h5>
                <p>
                  Grupa dla dziewczyn, które chcą zacząć swoją przygodę z programowaniem albo już kodują.
                  Materiały, wsparcie i motywacja w dziewczyńskim gronie. Obecnie grupa liczy już ponad 3500 dziewczyn
                  i nieprzerwanie tętni życiem i nowymi pomysłami.
                </p>
              </li> 
            </ul>
            <div class="dots col-sm-4 col-sm-offset-4">
              <div class="dot active"></div>
              <div class="dot"></div>
              <div class="dot"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer>
      <div class="col-sm-4">
        <p>Copyrights 2017 | All rights reserved Coders Lab</p>
      </div>
    </footer>
  </body>
</html>