First-page-HTML/index.html at master · ppotaczek/First-page-HTML · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!DOCTYPE html>
<html lang="pl-PL">
<head>
    <meta charset="UTF-8">
    <title>Sit on chair</title>
    <link rel="stylesheet" href="css/reset.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800&amp;subset=latin-ext" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header class="mainHeader">
    <div class="container row">
      <p class="logo white text">
        SIT <span class="important">ON </span>CHAIR
      </p>
      <ul class="menu white text">
        <li>KONTAKT</li>
        <li>GALERIA</li>
        <li class="dropdown">
          <span>O FIRMIE</span>
          <ul class="openMenu">
            <li>Aktualności</li>
            <li>Nasz team</li>
            <li>Historia</li>
          </ul>
        </li>
      </ul>
    </div>
  </header>
  <section class="gradient">
    <div class="container row firstSection">
      <img class="chair-img" src="images/black_chair.png">
      <article class="main-article">
        <h1>SIT <span class="important">ON</span> OUR <span class="important">CHAIR</span></h1>
        <p>
          Lorem ipsum dolor sit amet enim. Etiam ullamcorper. </br>Suspendisse a pellentesque dui, non felis. Maecenas </br>malesuada elit lectus felis, malesuada ultricies. Curabitur et </br>ligula. Ut molestie a, ultricies porta urna.
        </p>
        <a class="seeMore white" href="#">ZOBACZ WIĘCEJ</a>
      </article>
      <p class="arrow arrowLeft"> < </p>
      <p class="arrow arrowRight"> > </p>
    </div>
  </section>
  <section class="images">
    <div class="container row">
      <div class="photo photo1">
        <div class="transparentPart uText">
          Chair CLAIR
        </div>
      </div>
      <div class="photo photo2">
        <div class="transparentPart uText">
          Chair MARGARITA
        </div>
      </div>
      <div class="article">
        <p class="uText">Finds all inputs</p>
        <p class="article-text">
          Finds all inputs that are not checked and highlights the next sibling span. Notice there is no change when clicking the checkboxes since no click events have been linked.
          <br/><br/>Notice there is no change when clicking the checkboxes since no click events have been
        </p>
      </div>
    </div>
  </section>
  <section class="prices">
    <div class="container row">
      <header class="uText2 uText">CENNIK</header>
    </div>
    <div class="container row">
      <div class="priceBox">
        <h3 class="planName">BASIC PLAN</h3>
        <div class="circlePrice">
          <span class="price">8</span>5<sup>99</sup>
          <span class="priceDescription">PLN/MSC</span>
        </div>
        <ul class="listBox">
          <li>Zakup towaru + dowóz</li>
          <li>Serwis</li>
        </ul>
        <a href="#" class="join">
          DOŁĄCZ
        </a>
      </div>
      <div class="priceBox active2">
        <h3 class="planName activeName">STANDARD PLAN</h3>
        <div class="circlePrice activeText">
          9<span class="price">5</span><sup>99</sup>
          <span class="priceDescription">PLN/MSC</span>
        </div>
        <ul class="listBox listBox2">
          <li>Zakup towaru + dowóz</li>
          <li>Serwis</li>
          <li>Gwarancja 5 lat</li>
        </ul>
        <a href="#" class="join activeText">
          DOŁĄCZ
        </a>
      </div>
      <div class="priceBox priceBoxLast">
        <h3 class="planName">STANDARD PLAN</h3>
        <div class="circlePrice">
          <span class="price">211</span><sup>00</sup>
          <span class="priceDescription">PLN/MSC</span>
        </div>
        <ul class="listBox">
          <li>Zakup towaru + dowóz</li>
          <li>Serwis</li>
          <li>Gwarancja 6 lat</li>
          <li>Porady projektanta</li>
        </ul>
        <a href="#" class="join">
          DOŁĄCZ
        </a>
      </div>
    </div>
  </section>
  <section class="application ">
    <div class="container row">
      <section class="choice_part inline">
        <header>
          <h3>SKOMPONUJ SWOJE KRZESŁO</h3>
          <span class="green_bell"></span>
        </header>
        <div class="form">
          <div class="drop_down_list">
            <span class="list_label">Wybierz rodzaj</span>
            <span class="list_arrow"></span>
            <ul class="list_panel">
              <li data-name-price="675">Clair</li>
              <li data-name-price="1240">Margarita</li>
              <li data-name-price="890">Selena</li>
            </ul>
          </div>
          <div class="drop_down_list">
            <span class="list_label">Wybierz kolor</span>
            <span class="list_arrow"></span>
            <ul class="list_panel">
              <li data-color-price="15">Czerwony</li>
              <li data-color-price="25">Czarny</li>
              <li data-color-price="10">Pomarańczowy</li>
            </ul>
          </div>
            <div class="drop_down_list">
              <span class="list_label">Wybierz materiał</span>
              <span class="list_arrow"></span>
              <ul class="list_panel">
                <li data-material-price="50">Tkanina</li>
                <li data-material-price="120">Skóra</li>
              </ul>
            </div>
            <div class="checkbox check-box">
              <input type="checkbox" id="transport" data-transport-price="200">
              <label for="transport">Transport</label>
            </div>
          </div>
        </section>
        <section class="image_part inline">
          <img src="images/red_chair.png">
        </section>
        <section class="summary_part inline">
            <header class="align_right">
              <h3>PODSUMOWANIE</h3>
              <span class="green_bell"></span>
            </header>
            <div class="summary_panel">
              <div class="panel_left">
                <h4 class="title">Twój fotel</h4>
                <span class="color"></span>
                <span class="pattern"></span>
                <span class="transport"></span>
              </div>
            <div class="panel_right">
              <h4 class="title value"></h4>
              <span class="color value"></span>
              <span class="pattern value"></span>
              <span class="transport value"></span>
            </div>
            <div class="sum_label">SUMA</div>
            <div class="sum"><strong></strong></div>
          </div>
        <a href="" class="green_button">Zamawiam</a>
      </section>
    </div>
  </section>
  <section class="formSection">
    <div class="container row">
      <div class="formLeft">
        <header class="uText2 uText contactHeader">KONTAKT</header>
        <form>
          <input class="formContact" type="text" placeholder="Imię" />
          <input class="formContact" type="email" placeholder="email" />
          <textarea class="formContact noReSize" type="text" placeholder="Wiadomość"></textarea>
        </form>
      </div>
      <div class="formRight">
        <div id="redChair"></div>
        <div class="checkbox check-box confirm-box">
          <input type="checkbox" id="confirm">
          <label id="confirm-Text" for="confirm">Zgadzam sie na przetwarzanie danych osobowych</label>
        </div>
        <input class="sendAll" type="button" value="WYŚLIJ" />
      </div>
    </div>
  </section>
  <footer>
    <div class="container row">
      <div class="formLeft">
        <p class="footerText">Copyright 2014 | All Rights Reserved. - Sit On Chair</p>
      </div>
      <div class="footerRight formRight">
        <a href="#"><div class="icon flickr"></div></a>
        <a href="#"><div class="icon vimeo"></div></a>
        <a href="#"><div class="icon pinterest"></div></a>
        <a href="#"><div class="icon twitter"></div></a>
        <p class="footerText2">SIT <span class="bold">ON</span> CHAIR</p>
      </div>
    </div>
  </footer>
<script src="js/app.js" type="text/javascript"></script>
</body>
</html>