semantic_project/index.html at master · aashika0929/semantic_project · 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
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
<html>
<head>
  <meta charset="utf-8">
  <title>semantic ui</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto|Taviraj" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat|Playfair+Display+SC|Rakkas|Roboto|Taviraj" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat|Playfair+Display+SC|Rakkas|Roboto|Taviraj|Vollkorn" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lemon|Montserrat|Playfair+Display+SC|Rakkas|Roboto|Taviraj|Vollkorn" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="D:\workspace\semantic\semantic website\css\style.css">
  <link href="https://fonts.googleapis.com/css?family=Playfair+Display+SC|Rakkas|Roboto|Taviraj" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
</head>
<body>

  <!--Header-->
  <div class="header">
    <div class="ui fixed labeled stackable icon menu">
      <img src="image/logo.jpg" class="small image" style="padding-left:20px;">
      <!-- <img src="image/web.jpg" class="small image" style="padding-left:20px;"> -->
      <h1 style="font-size:25px; font-family: 'Lemon', cursive; color:#3498DB; ">WEB DESIGN</H1>
        <div class="right horizontal menu">
          <div><a class="item"><i class="home icon"></i>Home</a></div>
          <div><a class="item" id="popup"><i class="info icon"></i>About</a></div>
          <div><a class="item"><i class="call icon"></i>Contacts</a></div>
          <div><a class="item"><i class="help icon"></i>Help</a></div>
        </div>
      </div>
    </div> <!--End of Header-->


<!--Banner-->
<div class="ui fluid container">
    <div class="ui stackable grid">
  <div class="center">
    <div class="banner">
      <img src="image/config.jpg" alt="" />
      <h2>Create cute websites fast with us!</h2>
      <button class="ui teal button"><a href="signup.html">GET STARTED</a></button>
    </div>
  </div></div>
</div>  <!--End of Banner-->

 <!--Intro Section-->
 <div class="ui container">
  <div class="content">
    <h1>Present your site in the most beautiful way</h1>
    <h3>
      We are the unique set-up, that is ready to challenge and knock out such a global problem as unemployment. Our company gladly helps those, who are ready to learn, to develop and to gain new experience. company unifies people all over the world.
      Everything we do, we do it for you totally gratuitously and with great enjoyment. We work so that you could work!
    </h3>
  </div> <!--End of Intro Section-->


  <!--Card Section-->
  <div class="ui three stackable cards">
    <!--First Card-->
    <div class="ui fluid card">
      <a class="image" href="#">
        <img src="image/img1.jpg"></a>
        <div class="content">
          <a class="header" href="#" id="head1">
            Responsive Design
          </a>
          <a class="description" href="#" id="para">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi voluptatibus saepe numquam, perferendis at, sit ipsa nesciunt odio recusandae voluptates excepturi vitae error suscipit delectus, voluptate quasi unde. Dolores, adipisci!
          </a>
        </div>
    </div><!--End of First Card-->

<!--Second Card-->
    <div class="ui fluid card">
      <a class="image" href="#">
        <img src="image/img2.jpg"></a>
        <div class="content">
            <a class="header" id="head1" href="#">
              Built for mobile and up
            </a>
          <a class="description" href="#" id="para">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi voluptatibus saepe numquam, perferendis at, sit ipsa nesciunt odio recusandae voluptates excepturi vitae error suscipit delectus, voluptate quasi unde. Dolores, adipisci!
          </a>
        </div>
    </div><!--End of Second Card-->
 <!--Third Card-->
    <div class="ui fluid card">
      <a class="image" href="#">
          <img src="image/img3.jpg"></a>
          <div class="content">
              <a class="header" id="head1" href="#">
                Variant Builder included
              </a>
              <a class="description" href="#" id="para">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi voluptatibus saepe numquam, perferendis at, sit ipsa nesciunt odio recusandae voluptates excepturi vitae error suscipit delectus, voluptate quasi unde. Dolores, adipisci!
              </a>
            </div>
      </div>
    </div><!--End of Third Card-->

  <!--Two column Section-->
    <div class="ui two equal width stackable grid" style="padding-top:20px;">
      <div class="column">
        <img src="image/ipad.jpg">
      </div>
      <div class="column" >
        <h3  id="row1">Discover the Advantages</h3>
        <div class="ui list" id="ico">
          <div class="item" id="item">
            <i class="mobile icon"></i>
            <div class="content" >
              <a class="header" id="icons">Mobile-ready</a>
              <div class="description">Be ready for all visitors with a site that's optimized for any device.</div>
            </div>
          </div>
          <div class="item" id="item">
            <i class="shop icon"></i>
            <div class="content">
              <a class="header" id="icons">Simple eCommerce</a>
              <div class="description">Selling your products online has never been this easy.</div>
            </div>
          </div>
          <div class="item" id="item">
            <i class="thumbs up icon"></i>
            <div class="content">
              <a class="header" id="icons">Ready-to-go apps</a>
              <div class="description">Google Maps, FB buttons, MailChimp, Forms? Add 'em with a click.</div>
            </div>
          </div>
          <div class="item" id="item">
            <i class="google icon"></i>
            <div class="content">
              <a class="header" id="icons">Custom domain & emails</a>
              <div class="description">Nothing says "I'm a pro" more than emails @ your domain name.
              </div>
            </div>
          </div>
          <div class="item" id="item">
            <i class="map marker icon"></i>
            <div class="content">
              <a class="header" id="icons">Ready-to-go apps</a>
              <div class="description">Google Maps, FB buttons, MailChimp, Forms? Add 'em with a click.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div> <!--End Two column Section-->

  <!--Box Section-->
  <div class="ui container">
    <div class="ui three equal width stackable grid" style="background-color:#ddd; margin-top:60px;">
      <!--Personal pack-->
      <div class="column" id="rows">
        <div class="row" style="background-color:#4db677">
          <div class="column" id="row" style="height:120px">
            <h1><center>Personal</center></h1>
          </div>
        </div>
        <div class="row" style="background-color:rgb(246, 248, 250)">
          <div class="column" id="row" style="height:65px">
            <h2 style:"font-size:12px;"><center>$75/month</center></h2>
          </div>
        </div>
        <div class="row" style="background-color:#4db677">
          <div class="column" id="rows">
            <div class="ui list">
              <div class="item" style="padding-top:20px; font-size:20px;">
                <center>It resonates with the target audience.</center></div>
                <div class="item" style="padding-top:20px; font-size:20px;">
                  <center>It's always changing.</center></div>
                  <div class="item" style="padding-top:20px; font-size:20px;">
                    <center>It's optimized for multiple devices.</center></div>
                    <div class="item" style="padding-top:20px; font-size:20px;">
                      <center>It includes calls-to-action</center></div>
                      <div class="item" style="padding-top:20px; font-size:20px; padding-bottom:20px;">
                        <center>It employs great overall design.</center></div></div>
                      </div>
                    </div>
                  </div> <!--Personal pack-->
                   <!--Business pack-->
                  <div class="column" id="rows">
                    <div class="row" style="background-color:rgb(246, 248, 250)">
                      <div class="column" id="row" style="height:120px">
                        <h1><center>Business</center></h1>
                      </div>
                    </div>
                    <div class="row" style="background-color:#4db677">
                      <div class="column" id="row" style="height:65px">
                        <h2><center>$95/month</center></h2>
                      </div>
                    </div>
                    <div class="row" style="background-color:rgb(246, 248, 250)">
                      <div class="column" id="row">
                        <div class="ui list">
                          <div class="item" style="padding-top:20px;  font-size:20px">
                            <center>It resonates with the target audience.</center></div>
                            <div class="item" style="padding-top:20px; font-size:20px">
                              <center>It's always changing.</center></div>
                              <div class="item" style="padding-top:20px;  font-size:20px">
                                <center>It's optimized for multiple devices.</center></div>
                                <div class="item" style="padding-top:20px;  font-size:20px">
                                  <center>It includes calls-to-action</center></div>
                                  <div class="item" style="padding-top:20px; padding-bottom:20px;  font-size:20px">
                                    <center>It employs great overall design.</center></div>
                                  </div>
                                </div>
                              </div>
                            </div><!--End of Business pack-->

                            <!--Ultimate pack-->
                            <div class="column" id="rows">
                              <div class="row" style="background-color:#4db677">
                                <div class="column" id="row" style="height:120px">
                                  <h1><center>Ultimate</center></h1>
                                  ` </div>
                                </div>
                                <div class="row" style="background-color:rgb(246, 248, 250)">
                                  <div class="column" id="row" style="height:65px">
                                    <h2><center>$125/month</center></h2>
                                  </div>
                                </div>
                                <div class="row" style="background-color:#4db677">
                                  <div class="column" id="row">
                                    <div class="ui list">
                                      <div class="item" style="padding-top:20px;  font-size:20px">
                                        <center>It resonates with the target audience.</center></div>
                                        <div class="item" style="padding-top:20px; font-size:20px">
                                          <center>It's always changing.</center></div>
                                          <div class="item" style="padding-top:20px;  font-size:20px">
                                            <center>It's optimized for multiple devices.</center></div>
                                            <div class="item" style="padding-top:20px;  font-size:20px">
                                              <center>It includes calls-to-action</center></div>
                                              <div class="item" style="padding-top:20px; padding-bottom:20px;  font-size:20px">
                                                <center>It employs great overall design.</center></div>
                                              </div>
                                            </div>
                                          </div>
                                        </div> <!--Ultimate pack-->
                                      </div>
                                    </div>
                                  </div>
                                </div>  <!--End of Box Section-->
                                  <div class="ui container" style="margin-top:50px" id="video">
                                    <center><iframe width="640" height="360" src="https://www.youtube.com/embed/b9U7zK099tE" frameborder="0" allowfullscreen>
                                    </iframe></center>
                                  </div>
                                <!--Footer-->
                                <div class="ui black inverted footer segment" style="padding-top:30px; margin-top:40px;">
                                  <div class="ui center aligned container">
                                    <div class="ui stackable inverted grid">
                                      <div class="three wide column">
                                        <h4 class="ui inverted header">Community</h4>
                                        <div class="ui inverted link list">
                                          <a class="item" href="#">Help Translate</a>
                                          <a class="item" href="#">Submit an issue</a>
                                          <a class="item" href="#">Join our chat</a>
                                          <a class="item" href="#">Join our chat</a>
                                          <a class="item" href="#">Join our chat</a>
                                        </div>
                                      </div>
                                      <div class="three wide column">
                                        <h4 class="ui inverted header">Network</h4>
                                        <div class="ui inverted link list">
                                          <a class="item" href="#">User Forums</a>
                                          <a class="item" href="#">Join our chat</a>
                                          <a class="item" href="#">Join our chat</a>
                                          <a class="item" href="#">Join our chat</a>
                                          <a class="item" href="#">Join our chat</a>
                                        </div>
                                      </div>
                                      <div class="three wide column">
                                        <h4 class="ui inverted header">Company</h4>
                                        <div class="ui inverted link list">
                                          <a class="item" href="#">About us</a>
                                          <a class="item" href="#">Support</a>
                                          <a class="item" href="#">FAQ</a>
                                          <a class="item" href="#">Legal</a>
                                          <a class="item" href="#">Private Policy</a>
                                        </div>
                                      </div>
                                      <div class="five wide column">
                                        <h4 class="ui inverted header">Connect with us</h4>
                                        <p><a href="https://twitter.com/MISTAY_IN" target="_blank">
                                          <i class="twitter icon large"></i></a>
                                          <a href="https://facebook.com/mistay.in" target="_blank">
                                            <i class="facebook icon large"></i></a>
                                            <a href="mailto:xxxx@miatay.in" target="_blank">
                                              <i class="mail icon large"></i></a>
                                            </p>
                                          </div>
                                        </div>
                                      </div>
                                    </div><!--End of Footer-->


  </body>
</html>