-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
220 lines (153 loc) · 9.67 KB
/
index.html
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
<!DOCTYPE HTML>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<title>Business Design</title>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<h2>BD</h2>
<h3>Business Design</h3>
</div><!-- end of "logo" -->
<div class="social">
<p>Join the conversation</p>
<ul>
<li><a href="#"><i class="fa fa-facebook-square"></i></a></li>
<li><a href="#"><i class="fa fa-twitter-square"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus-square"></i></a></li>
<li><a href="#"><i class="fa fa-youtube-square"></i></a></li>
</ul>
</div><!-- end of "social" -->
<nav>
<ul class="main-nav">
<li><a href="#"><i class="fa fa-home"></i> Home </a></li>
<li><a href="#"><i class="fa fa-group"></i> About Us </a></li>
<li><a href="#"><i class="fa fa-wrench"></i> Services </a></li>
<li><a href="#"><i class="fa fa-pencil"></i> Blog </a></li>
<li><a href="#"><i class="fa fa-envelope"></i> Contact </a></li>
</ul>
<form>
<span class="search"><input type="text" placeholder="search"> <a href="#"> <i class="fa fa-search"></i> </a> </span>
</form>
</nav>
</header>
<div class="slider">
<a class="slider-prev" href="#"><i class="fa fa-chevron-left"></i></a>
<a class="slider-next" href="#"><i class="fa fa-chevron-right"></i></a>
<div class="slide">
<img class="slide-image" src="img/mobile-devices.png">
<div class="slide-content">
<h3 class="slider-title">Business Service<br><span>for the Twenty-First Century </span></h3>
<a class="slider-button" href="#">Learn More <i class="fa fa-angle-double-right"></i><br> <span>Find out how we can help your business</span>
</a>
</div><!-- end of "slide content" -->
</div><!-- end of "slide" -->
</div> <!-- end of "slider" -->
<div class="row">
<div class="column-two-thirds">
<h3>Who We Are</h3>
<p>
Lorem ipsum dolor sit amet, vim erat democritum omittantur ne. Adhuc tamquam vix cu, mel cu etiam phaedrum menandri. Sit ne evertitur dissentiet. Id utinam ridens pro, facer consequat signiferumque ad mei, ad vel essent option veritus. Cu mel iisque eleifend dissentiet. An vim sadipscing suscipiantur, pri et ornatus expetendis, quo persecuti deseruisse accommodare an.</p>
<p>Et expetendis necessitatibus sed, at duo posse ridens appetere, tantas prodesset quo an. Falli labore virtute ut est. Vix antiopam volutpat forensibus at, omnes quodsi quo in. Quo an veri dolorem.</p>
<p>
Mei ut alii utamur deterruisset, ferri signiferumque ius no. Sed an nominati aliquando, cu quis omittam has. Nec in audire iisque ocurreret. Suscipit mandamus has et, dictas doctus prodesset ius te.
</p>
</div> <!-- end of "column-two-thirds" -->
<div class="column-one-third">
<h3>From the Blog</h3>
<ul class="icons-ul">
<li><i class="fa fa-pencil"></i>
<strong>Lorem Ipsum Dolor Sit Amer</strong><br>
Jume 1,2014 by Jurica Krajacic</li>
<li><i class="fa fa-pencil"></i>
<strong>Adhuc tamquam vix cu</strong><br>
April 4,2014 by Jurica Krajacic</li>
<li><i class="fa fa-pencil"></i>
<strong>facer consequat signiferumque ad mei</strong><br>
May 3,2014 by Jurica Krajacic</li>
<li><i class="fa fa-pencil"></i>
<strong>Et expetendis necessitatibus sed</strong><br>
July 8,2014 by Jurica Krajacic</li>
</ul>
</div><!-- end of "column-one-third" -->
</div><!-- end of "row" -->
<h3 class="clear meet-the-team">Meet the Team</h3>
<div class="row clearfix">
<div class="column-one-fourth">
<div class="image-container">
<img src="http://placehold.it/220x160" width="220" height="160">
<div class="image-caption">
<strong>Janice Thomson</strong></br>
Lead Proggramer
</div>
</div> <!-- end of "image container" -->
<p>Lorem ipsum dolor sit amet, vim erat democritum omittantur ne. Adhuc tamquam vix cu, mel cu etiam phaedrum menandri. Sit ne evertitur dissentiet. Id utinam ridens pro, facer consequat signiferumque ad mei, ad vel essent option veritus.
</p>
</div> <!-- end of "column-one-fourth" -->
<div class="column-one-fourth">
<div class="image-container">
<img src="http://placehold.it/220x160" width="220" height="160">
<div class="image-caption">
<strong>Mike Milotn</strong></br>
CEO
</div>
</div> <!-- end of "image container" -->
<p>Lorem ipsum dolor sit amet, vim erat democritum omittantur ne. Adhuc tamquam vix cu, mel cu etiam phaedrum menandri. Sit ne evertitur dissentiet. Id utinam ridens pro, facer consequat signiferumque ad mei, ad vel essent option veritus.
</p>
</div> <!-- end of "column-one-fourth" -->
<div class="column-one-fourth">
<div class="image-container">
<img src="http://placehold.it/220x160" width="220" height="160">
<div class="image-caption">
<strong>Jones Holih</strong></br>
Founder
</div>
</div> <!-- end of "image container" -->
<p>Lorem ipsum dolor sit amet, vim erat democritum omittantur ne. Adhuc tamquam vix cu, mel cu etiam phaedrum menandri. Sit ne evertitur dissentiet. Id utinam ridens pro, facer consequat signiferumque ad mei, ad vel essent option veritus.
</p>
</div> <!-- end of "column-one-fourth" -->
<div class="column-one-fourth">
<div class="image-container">
<img src="http://placehold.it/220x160" width="220" height="160">
<div class="image-caption">
<strong>Janna Beom</strong>
</br>UX Designer
</div>
</div> <!-- end of "image container" -->
<p>Lorem ipsum dolor sit amet, vim erat democritum omittantur ne. Adhuc tamquam vix cu, mel cu etiam phaedrum menandri. Sit ne evertitur dissentiet. Id utinam ridens pro, facer consequat signiferumque ad mei, ad vel essent option veritus.
</p>
</div> <!-- end of "column-one-fourth" -->
</div> <!-- end of "row" -->
</div> <!-- end of ".container" -->
<footer class="clear clearfix">
<div class="footer-row">
<div class="column-one-third">
<h3>Get in touch</h3>
<p><i class="fa fa-map-marker"></i> 1234 5th St,Dallas TX, 75545 </p>
<p><i class="fa fa-envelope"></i> [email protected]</p>
</div> <!-- end of "column-one-third" -->
<div class="column-two-thirds">
<h3>Photo Stream</h3>
<ul class="thumbnails clearix">
<li><a href="#"><img src="img/th01.jpg" alt="picture1" width="50" height="50"></a></li>
<li><a href="#"><img src="img/th02.jpg" alt="picture2" width="50" height="50"></a></li>
<li><a href="#"><img src="img/th03.jpg" alt="picture3" width="50" height="50"></a></li>
<li><a href="#"><img src="img/th04.jpg" alt="picture4" width="50" height="50"></a></li>
<li><a href="#"><img src="img/th05.jpg" alt="picture5" width="50" height="50"></a></li>
<li><a href="#"><img src="img/th06.jpg" alt="picture6" width="50" height="50"></a></li>
<li><a href="#"><img src="img/th07.jpg" alt="picture7" width="50" height="50"></a></li>
<li><a href="#"><img src="img/th08.jpg" alt="picture8" width="50" height="50"></a></li>
<li><a href="#"><img src="img/th09.jpg" alt="picture9" width="50" height="50"></a></li>
<li><a href="#"><img src="img/th10.jpg" alt="picture10" width="50" height="50"></a></li>
</ul>
</div> <!-- end of "column-two-thirds" -->
</div> <!-- end of "footer-row" -->
<div class="copyright clear">©copyright 2014, Buisiness design. All right reserved.</div>
</footer>
</body>
</html>