Skip to content

Commit 3780c75

Browse files
StanleyMasindeStanleyMasinde
committed
(Template styling)
1 parent 8fbbb49 commit 3780c75

File tree

4 files changed

+1550
-3
lines changed

4 files changed

+1550
-3
lines changed

‎assets/css/app.scss

Lines changed: 330 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,330 @@
1+
.plat {
2+
border-radius: 0
3+
}
4+
5+
.btn-primary.focus,
6+
.btn-primary:focus {
7+
box-shadow: 0 0 0 0 #048f83!important
8+
}
9+
10+
.btn-primary:hover {
11+
color: #fff;
12+
background-color: #016090;
13+
border-color: #016090
14+
}
15+
16+
.btn.btn-primary {
17+
background-color: #048f83!important;
18+
border-color: #048f83!important
19+
}
20+
21+
span {
22+
font-style: inherit;
23+
font-weight: inherit
24+
}
25+
26+
.features-boxed {
27+
color: #313437;
28+
background-color: #eef4f7
29+
}
30+
31+
.features-boxed p {
32+
color: #7d8285
33+
}
34+
35+
.features-boxed h2 {
36+
font-weight: 700;
37+
margin-bottom: 40px;
38+
padding-top: 40px;
39+
color: inherit
40+
}
41+
42+
@media (max-width:767px) {
43+
.features-boxed h2 {
44+
margin-bottom: 25px;
45+
padding-top: 25px;
46+
font-size: 24px
47+
}
48+
}
49+
50+
.features-boxed .intro {
51+
font-size: 16px;
52+
max-width: 500px;
53+
margin: 0 auto
54+
}
55+
56+
.features-boxed .intro p {
57+
margin-bottom: 0
58+
}
59+
60+
.features-boxed .features {
61+
padding: 50px 0
62+
}
63+
64+
.features-boxed .item {
65+
text-align: center
66+
}
67+
68+
.features-boxed .item .box {
69+
text-align: center;
70+
padding: 30px;
71+
background-color: #fff;
72+
margin-bottom: 30px
73+
}
74+
75+
.features-boxed .item .icon {
76+
font-size: 60px;
77+
color: #12958a;
78+
margin-top: 20px;
79+
margin-bottom: 35px
80+
}
81+
82+
.features-boxed .item .name {
83+
font-weight: 700;
84+
font-size: 18px;
85+
margin-bottom: 8px;
86+
margin-top: 0;
87+
color: inherit
88+
}
89+
90+
.features-boxed .item .description {
91+
font-size: 15px;
92+
margin-top: 15px;
93+
margin-bottom: 20px
94+
}
95+
96+
#brand-logo {
97+
font-size: 34px
98+
}
99+
100+
#app-navbar {
101+
background: linear-gradient(120deg, #00e4d0, #5983e8)
102+
}
103+
104+
.navigation-clean-button {
105+
background: #fff;
106+
padding-top: .75rem;
107+
padding-bottom: .75rem;
108+
color: #333;
109+
border-radius: 0;
110+
box-shadow: none;
111+
border: none;
112+
margin-bottom: 0
113+
}
114+
115+
@media (min-width:768px) {
116+
.navigation-clean-button {
117+
padding-top: 1rem;
118+
padding-bottom: 1rem
119+
}
120+
}
121+
122+
.navigation-clean-button .navbar-brand {
123+
font-weight: 700;
124+
color: inherit
125+
}
126+
127+
.navigation-clean-button .navbar-brand:hover {
128+
color: #222
129+
}
130+
131+
.navigation-clean-button .navbar-toggler {
132+
border-color: #ddd;
133+
color: #888
134+
}
135+
136+
.navigation-clean-button .navbar-toggler:focus,
137+
.navigation-clean-button .navbar-toggler:hover {
138+
background: 0 0
139+
}
140+
141+
.navigation-clean-button .form-inline,
142+
.navigation-clean-button .navbar-collapse {
143+
border-top-color: #ddd
144+
}
145+
146+
.navigation-clean-button .navbar-nav a.active,
147+
.navigation-clean-button .navbar-nav>.show>a {
148+
background: 0 0;
149+
box-shadow: none
150+
}
151+
152+
.navigation-clean-button.navbar-light .navbar-nav a.active,
153+
.navigation-clean-button.navbar-light .navbar-nav a.active:focus,
154+
.navigation-clean-button.navbar-light .navbar-nav a.active:hover {
155+
color: #8f8f8f;
156+
box-shadow: none;
157+
background: 0 0;
158+
pointer-events: none
159+
}
160+
161+
.navigation-clean-button.navbar .navbar-nav .nav-link {
162+
padding-left: 18px;
163+
padding-right: 18px
164+
}
165+
166+
.navigation-clean-button.navbar-light .navbar-nav .nav-link {
167+
color: #465765
168+
}
169+
170+
.navigation-clean-button.navbar-light .navbar-nav .nav-link:focus,
171+
.navigation-clean-button.navbar-light .navbar-nav .nav-link:hover {
172+
color: #37434d!important;
173+
background-color: transparent
174+
}
175+
176+
.navigation-clean-button .navbar-nav>li>.dropdown-menu {
177+
margin-top: -5px;
178+
box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
179+
background-color: #fff;
180+
border-radius: 2px
181+
}
182+
183+
.navigation-clean-button .dropdown-menu .dropdown-item,
184+
.navigation-clean-button .dropdown-menu .dropdown-item:focus {
185+
line-height: 2;
186+
font-size: 14px;
187+
color: #37434d
188+
}
189+
190+
.navigation-clean-button .dropdown-menu .dropdown-item:focus,
191+
.navigation-clean-button .dropdown-menu .dropdown-item:hover {
192+
background: #eee;
193+
color: inherit
194+
}
195+
196+
.navigation-clean-button .actions .login {
197+
margin-right: 1rem;
198+
text-decoration: none;
199+
color: #465765
200+
}
201+
202+
.navigation-clean-button .navbar-text .action-button,
203+
.navigation-clean-button .navbar-text .action-button:active,
204+
.navigation-clean-button .navbar-text .action-button:hover {
205+
background: #56c6c6;
206+
border-radius: 20px;
207+
color: #fff;
208+
box-shadow: none;
209+
border: none;
210+
text-shadow: none;
211+
padding: .5rem 1rem;
212+
transition: background-color .25s;
213+
font-size: inherit
214+
}
215+
216+
.navigation-clean-button .navbar-text .action-button:hover {
217+
background: #66d7d7
218+
}
219+
220+
footer {
221+
background-color: #292c2f;
222+
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .12);
223+
box-sizing: border-box;
224+
width: 100%;
225+
text-align: left;
226+
font: 700 16px sans-serif;
227+
padding: 55px 50px;
228+
margin-top: 80px;
229+
bottom: 0;
230+
color: #fff
231+
}
232+
233+
.footer-navigation h3 {
234+
margin: 0 0 20px;
235+
font: 400 36px Cookie, cursive;
236+
color: #fff
237+
}
238+
239+
.footer-navigation h3 a {
240+
text-decoration: none;
241+
color: #fff
242+
}
243+
244+
.footer-navigation h3 span {
245+
color: #5383d3
246+
}
247+
248+
.footer-navigation p.links a {
249+
color: #fff;
250+
text-decoration: none
251+
}
252+
253+
.footer-navigation p.company-name {
254+
color: #8f9296;
255+
font-size: 14px;
256+
font-weight: 400;
257+
margin-top: 20px
258+
}
259+
260+
@media (max-width:767px) {
261+
.footer-contacts {
262+
margin: 30px 0
263+
}
264+
}
265+
266+
.footer-contacts p {
267+
display: inline-block;
268+
color: #fff;
269+
vertical-align: middle
270+
}
271+
272+
.footer-contacts p a {
273+
color: #5383d3;
274+
text-decoration: none
275+
}
276+
277+
.fa.footer-contacts-icon {
278+
background-color: #33383b;
279+
color: #fff;
280+
font-size: 18px;
281+
width: 38px;
282+
height: 38px;
283+
border-radius: 50%;
284+
text-align: center;
285+
line-height: 38px;
286+
margin: 10px 15px 10px 0
287+
}
288+
289+
span.new-line-span {
290+
display: block;
291+
font-weight: 400;
292+
font-size: 14px;
293+
line-height: 2
294+
}
295+
296+
.footer-about h4 {
297+
display: block;
298+
color: #fff;
299+
font-size: 14px;
300+
font-weight: 700;
301+
margin-bottom: 20px
302+
}
303+
304+
.footer-about p {
305+
line-height: 20px;
306+
color: #92999f;
307+
font-size: 13px;
308+
font-weight: 400;
309+
margin: 0
310+
}
311+
312+
div.social-links {
313+
margin-top: 20px;
314+
color: #fff
315+
}
316+
317+
.social-links a {
318+
display: inline-block;
319+
width: 35px;
320+
height: 35px;
321+
cursor: pointer;
322+
background-color: #33383b;
323+
border-radius: 2px;
324+
font-size: 20px;
325+
color: #fff;
326+
text-align: center;
327+
line-height: 35px;
328+
margin-right: 5px;
329+
margin-bottom: 5px
330+
}

‎nuxt.config.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ export default {
1919
content: process.env.npm_package_description || ''
2020
}
2121
],
22-
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
22+
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
23+
{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css' }]
2324
},
2425
/*
2526
** Customize the progress-bar color
@@ -28,7 +29,7 @@ export default {
2829
/*
2930
** Global CSS
3031
*/
31-
css: [],
32+
css: ['@/assets/css/app.scss'],
3233
/*
3334
** Plugins to load before mounting the App
3435
*/

0 commit comments

Comments
 (0)