Skip to content

Commit 4e84b90

Browse files
author
thanush
committed
Barclay ui
barclay ui demo
1 parent c85c792 commit 4e84b90

File tree

9 files changed

+3842
-0
lines changed

9 files changed

+3842
-0
lines changed

‎css/animate.css

Lines changed: 3158 additions & 0 deletions
Large diffs are not rendered by default.

‎css/app.css

Lines changed: 386 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,386 @@
1+
html,body{
2+
padding: 0;
3+
margin: 0;
4+
}
5+
.cf:before,
6+
.cf:after {
7+
content: "";
8+
display: table;
9+
}
10+
.cf:after {
11+
clear: both;
12+
}
13+
header{
14+
background-color: #3366B0;
15+
color: #fff;
16+
font-family: 'Lora', serif;
17+
font-size: 2em;
18+
padding: 20px;
19+
/* padding-bottom: 50px; */
20+
}
21+
header span{
22+
margin-left: 10px;
23+
}
24+
header img{
25+
opacity: 0.9;
26+
z-index: -1;
27+
border-radius: 50%;
28+
height: 40px;
29+
float: left;
30+
}
31+
a{
32+
text-decoration: none;
33+
color: #fff;
34+
/* opacity: 0.5; */
35+
}
36+
nav{
37+
background-color: #3366B0;
38+
text-align: center;
39+
box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
40+
}
41+
ul{
42+
display: inline;
43+
padding-bottom: 2px;
44+
45+
}
46+
ul li{
47+
display: inline-block;
48+
font-family: georgia;
49+
font-size: 1.2em;
50+
text-transform: uppercase;
51+
padding:10px;
52+
margin-left: 25px;
53+
border-bottom: 2px;
54+
/* padding-bottom: 2px; */
55+
56+
}
57+
ul li:hover{
58+
border-bottom:2px solid yellow ;
59+
}
60+
.container{
61+
background-color: #5E9DFF;
62+
/* height: 600px; */
63+
width: 100%;
64+
}
65+
.nav-holder{
66+
background-color: #3366B0;
67+
padding: 10px;
68+
color: #fff;
69+
padding-bottom: 20px;
70+
}
71+
.clear{
72+
width: 100%;
73+
}
74+
.first-section{
75+
width:40%;
76+
float: left;
77+
}
78+
.second-section{
79+
width: 25%;
80+
float: left;
81+
margin-left: 20px;
82+
}
83+
.third-section{
84+
width: 22%;
85+
float: left;
86+
margin-left: 20px;
87+
}
88+
.main-wrap{
89+
background-color: #f7f7f7;
90+
width: 100%;
91+
padding-bottom: 10px;
92+
margin-top: 14px;
93+
margin-left: 10px;
94+
box-shadow: 1px 2px 6px rgba(0,0,0,0.6);
95+
}
96+
.fa-ic{
97+
width: 12%;
98+
float: right;
99+
}
100+
.na-fa{
101+
margin-right: 5px;
102+
}
103+
.con-body{
104+
/* clear: both; */
105+
}
106+
.menu-con{
107+
margin-top: 25px;
108+
/* display: flex; */
109+
}
110+
.menu-con span{
111+
font-size: 1.8em;
112+
font-family: 'Open Sans', sans-serif;
113+
margin-left: 25px;
114+
}
115+
.menu-fa{
116+
float: right;
117+
margin-right: 20px;
118+
}
119+
table{
120+
border-spacing: 0;
121+
border-collapse: collapse;
122+
width: 100%;
123+
background-color: transparent;
124+
margin-top: 10px;
125+
}
126+
.table>thead>tr>th {
127+
vertical-align: bottom;
128+
border-bottom: 2px solid #ddd;
129+
}
130+
.table>thead>tr>th {
131+
padding: 8px;
132+
line-height: 1.42857143;
133+
vertical-align: top;
134+
text-align: center;
135+
color: #aaa;
136+
/* border-top: 1px solid #ddd; */
137+
}
138+
.table>tbody>tr>td{
139+
padding: 8px;
140+
line-height: 1.42857143;
141+
vertical-align: top;
142+
text-align: center;
143+
text-transform: uppercase;
144+
}
145+
.td-menu{
146+
float: right;
147+
}
148+
.td-menufa{
149+
margin-left: 10px;
150+
}
151+
.td-text{
152+
color: #ccc;
153+
}
154+
.slidedown{
155+
border-top:2px solid #eee;
156+
display: none;
157+
}
158+
.slidedown-table{
159+
width: 80%;
160+
margin: 0 auto;
161+
margin-top: 20px;
162+
}
163+
tbody>tr>td{
164+
text-align: left;
165+
padding: 5px;
166+
}
167+
.products{
168+
background-color: #f7f7f7;
169+
width: 100%;
170+
padding-bottom: 10px;
171+
margin-top: 14px;
172+
margin-left: 10px;
173+
box-shadow: 1px 2px 6px rgba(0,0,0,0.6);
174+
}
175+
.pro-body{
176+
margin-top: 10px;
177+
}
178+
.pro-body span{
179+
font-size: 1.8em;
180+
font-family: 'Open Sans', sans-serif;
181+
margin-left: 25px;
182+
}
183+
.pro-cont{
184+
width: 80%;
185+
margin: 0 auto;
186+
}
187+
.pro-cont span{
188+
font-size: 1.2em;
189+
}
190+
.pro-cont p{
191+
color: #aaa;
192+
margin: 5px;
193+
}
194+
.try{
195+
background-color: #AA0078;
196+
padding: 10px;
197+
border-radius:50%;
198+
color: #fff;
199+
}
200+
.tryp{
201+
background-color: #000;
202+
padding: 10px;
203+
border-radius:50%;
204+
color: #fff;
205+
}
206+
.smartspend{
207+
background-color: #f7f7f7;
208+
width: 100%;
209+
padding-bottom: 10px;
210+
margin-top: 14px;
211+
margin-left: 10px;
212+
box-shadow: 1px 2px 6px rgba(0,0,0,0.6);
213+
}
214+
.smartspend-body img{
215+
width: 100%;
216+
margin-top: 1px;
217+
/* height:155px; */
218+
}
219+
.smartspend-body span{
220+
font-size: 1.8em;
221+
font-family: 'Open Sans', sans-serif;
222+
margin-left: 25px;
223+
}
224+
.smartspend-body p{
225+
font-family: 'Open Sans',sans-serif;
226+
color: #aaa;
227+
padding: 0px 10px;
228+
text-align: justify;
229+
margin: 5px;
230+
}
231+
.myButton {
232+
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77b55a), color-stop(1, #72b352));
233+
background:-moz-linear-gradient(top, #77b55a 5%, #72b352 100%);
234+
background:-webkit-linear-gradient(top, #77b55a 5%, #72b352 100%);
235+
background:-o-linear-gradient(top, #77b55a 5%, #72b352 100%);
236+
background:-ms-linear-gradient(top, #77b55a 5%, #72b352 100%);
237+
background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
238+
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77b55a', endColorstr='#72b352',GradientType=0);
239+
background-color:#77b55a;
240+
border:1px solid #4b8f29;
241+
display:inline-block;
242+
cursor:pointer;
243+
color:#ffffff;
244+
font-family:arial;
245+
font-size:18px;
246+
padding:2px 5px;
247+
text-decoration:none;
248+
margin-left: 10px;
249+
}
250+
.myButton:hover {
251+
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #72b352), color-stop(1, #77b55a));
252+
background:-moz-linear-gradient(top, #72b352 5%, #77b55a 100%);
253+
background:-webkit-linear-gradient(top, #72b352 5%, #77b55a 100%);
254+
background:-o-linear-gradient(top, #72b352 5%, #77b55a 100%);
255+
background:-ms-linear-gradient(top, #72b352 5%, #77b55a 100%);
256+
background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
257+
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#72b352', endColorstr='#77b55a',GradientType=0);
258+
background-color:#72b352;
259+
}
260+
.myButton:active {
261+
position:relative;
262+
top:1px;
263+
}
264+
.sm-pa{
265+
font-size: 1.3em;
266+
margin-left: 30px;
267+
color: #aaa;
268+
text-transform: capitalize;
269+
}
270+
.sm-partners{
271+
margin-top: 10px;
272+
background-color: #fff;
273+
width: 42%;
274+
margin-left: 20px;
275+
float: left;
276+
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
277+
}
278+
.sm-partners span{
279+
font-size: 18px;
280+
}
281+
.sm-partners p{
282+
margin: 5px;
283+
color: #aaa;
284+
}
285+
.sm-pw{
286+
width: 100%;
287+
}
288+
.sm-partners-body{
289+
background-color: #eee;
290+
padding: 30px 0px;
291+
}
292+
.sm-partners-body span:nth-child(1){
293+
font-size: 1.3em;
294+
color: orange;
295+
margin-left: 8px;
296+
text-transform: capitalize;
297+
}
298+
.sm-partners-body span:nth-child(2){
299+
font-size: 1.3em;
300+
color: blue;
301+
margin-left: 8px;
302+
text-transform: capitalize;
303+
}
304+
.author{
305+
background-color: #f7f7f7;
306+
width: 100%;
307+
padding-bottom: 10px;
308+
margin-top: 14px;
309+
margin-left: 10px;
310+
box-shadow: 1px 2px 6px rgba(0,0,0,0.6);
311+
}
312+
.quick{
313+
background-color: #f7f7f7;
314+
width: 100%;
315+
padding-bottom: 10px;
316+
margin-top: 14px;
317+
margin-left: 10px;
318+
box-shadow: 1px 2px 6px rgba(0,0,0,0.6);
319+
}
320+
.author-body img{
321+
width: 100%;
322+
/* height: 170px; */
323+
}
324+
.author-body span{
325+
font-size: 1.8em;
326+
font-family: 'Open Sans', sans-serif;
327+
margin-left: 25px;
328+
}
329+
.author-phone{
330+
width: 80%;
331+
margin: 0 auto;
332+
}
333+
.author-phone strong{
334+
font-size: 1.2em;
335+
margin-left: 30px;
336+
font-weight: 100;
337+
}
338+
.author-phone span{
339+
font-size: 16px;
340+
display: block;
341+
color: #aaa;
342+
margin-left: 60px;
343+
}
344+
.fa-phone{
345+
margin-top: 10px;
346+
}
347+
/* modal class start here */
348+
.pop-up{
349+
top: 0;
350+
position: fixed;
351+
background-color: #5E9DFF;
352+
width: 100%;
353+
height: 100%;
354+
padding-bottom: 10px;
355+
/* z-index: 0; */
356+
}
357+
.pop-main{
358+
margin: 20px 100px;
359+
position: absolute;
360+
z-index: 3;
361+
width: 80%;
362+
}
363+
.top{
364+
top:0;
365+
left:10px;
366+
}
367+
/* modal class end */
368+
369+
370+
.blue-box {
371+
width: 20%;
372+
height: 200px;
373+
background-color: blue;
374+
margin: 20px 20px;
375+
}
376+
.red-box{
377+
width: 20%;
378+
height: 200px;
379+
background-color: red;
380+
margin: 20px 20px;
381+
}
382+
383+
/* js class */
384+
.display{
385+
display: none;
386+
}

‎images/barclays.jpg

36.1 KB
Loading

‎images/beach.jpg

2.68 MB
Loading

‎images/kitten.jpg

7.04 KB
Loading

0 commit comments

Comments
 (0)