Skip to content

Commit 8fbbb49

Browse files
StanleyMasindeStanleyMasinde
committed
Transfered the layout from opensource254/WebTempate. It still has not styling
1 parent 47f9535 commit 8fbbb49

2 files changed

Lines changed: 172 additions & 117 deletions

File tree

‎layouts/default.vue‎

Lines changed: 114 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,117 @@
11
<template>
2-
<div>
2+
<main>
3+
<div>
4+
<nav
5+
class="navbar navbar-light navbar-expand-md fixed-top navigation-clean-button"
6+
>
7+
<div class="container">
8+
<a class="navbar-brand" href="#">opensource254</a
9+
><button
10+
class="navbar-toggler"
11+
data-toggle="collapse"
12+
data-target="#navcol-1"
13+
>
14+
<span class="sr-only">Toggle navigation</span
15+
><span class="navbar-toggler-icon"></span>
16+
</button>
17+
<div id="navcol-1" class="collapse navbar-collapse">
18+
<ul class="nav navbar-nav mr-auto">
19+
<li class="nav-item" role="presentation">
20+
<a class="nav-link active" href="#">First Item</a>
21+
</li>
22+
<li class="nav-item" role="presentation">
23+
<a class="nav-link active" href="#">Second Item</a>
24+
</li>
25+
<li class="dropdown nav-item">
26+
<a
27+
class="dropdown-toggle nav-link"
28+
data-toggle="dropdown"
29+
aria-expanded="false"
30+
href="#"
31+
>Dropdown
32+
</a>
33+
<div class="dropdown-menu" role="menu">
34+
<a class="dropdown-item" role="presentation" href="#"
35+
>First Item</a
36+
><a class="dropdown-item" role="presentation" href="#"
37+
>Second Item</a
38+
><a class="dropdown-item" role="presentation" href="#"
39+
>Third Item</a
40+
>
41+
</div>
42+
</li>
43+
</ul>
44+
<span class="navbar-text actions">
45+
<a
46+
class="btn btn-light text-truncate shadow-sm pulse animated infinite action-button"
47+
role="button"
48+
href="#"
49+
style="filter: saturate(116%);"
50+
>join us</a
51+
></span
52+
>
53+
</div>
54+
</div>
55+
</nav>
56+
</div>
57+
<!-- End: Navigation with Button -->
358
<nuxt />
4-
</div>
59+
<footer>
60+
<div class="row">
61+
<div class="col-sm-6 col-md-4 footer-navigation">
62+
<h3></h3>
63+
<p class="links">
64+
<a href="#">Home</a><strong> · · · </strong><a href="#">About</a
65+
><strong> · </strong><a href="#">Faq</a><strong> · </strong
66+
><a href="#">Contact</a>
67+
</p>
68+
<p class="company-name">opensource kenya © 2020</p>
69+
</div>
70+
<div class="col-sm-6 col-md-4 footer-contacts">
71+
<div>
72+
<span
73+
class="fa fa-map-marker footer-contacts-icon"
74+
style="color: rgb(18,149,138);"
75+
>
76+
</span>
77+
<p><span class="new-line-span">kenya</span></p>
78+
</div>
79+
<div>
80+
<i
81+
class="fa fa-phone footer-contacts-icon"
82+
style="color: rgb(18,149,138);"
83+
></i>
84+
<p class="footer-center-info email text-left">+254</p>
85+
</div>
86+
<div>
87+
<i
88+
class="fa fa-envelope footer-contacts-icon"
89+
style="color: rgb(18,149,138);"
90+
></i>
91+
<p><a href="#" target="_blank">support@opensource.com</a></p>
92+
</div>
93+
</div>
94+
<div class="clearfix"></div>
95+
<div class="col-md-4 footer-about">
96+
<h4>About the opensource</h4>
97+
<p>
98+
Lorem ipsum dolor sit amet, consectateur adispicing elit. Fusce
99+
euismod convallis velit, eu auctor lacus vehicula sit amet.
100+
</p>
101+
<div class="social-links social-icons">
102+
<a href="#"
103+
><i class="fa fa-facebook" style="color: rgb(18,149,138);"></i></a
104+
><a href="#"
105+
><i class="fa fa-twitter" style="color: rgb(18,149,138);"></i></a
106+
><a href="#"
107+
><i class="fa fa-linkedin" style="color: rgb(18,149,138);"></i
108+
></a>
109+
<a href="#"
110+
><i class="fa fa-github" style="color: rgb(18,149,138);"></i
111+
></a>
112+
</div>
113+
</div>
114+
</div>
115+
</footer>
116+
</main>
5117
</template>
6-
7-
<style>
8-
html {
9-
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
10-
Roboto, 'Helvetica Neue', Arial, sans-serif;
11-
font-size: 16px;
12-
word-spacing: 1px;
13-
-ms-text-size-adjust: 100%;
14-
-webkit-text-size-adjust: 100%;
15-
-moz-osx-font-smoothing: grayscale;
16-
-webkit-font-smoothing: antialiased;
17-
box-sizing: border-box;
18-
}
19-
20-
*,
21-
*:before,
22-
*:after {
23-
box-sizing: border-box;
24-
margin: 0;
25-
}
26-
27-
.button--green {
28-
display: inline-block;
29-
border-radius: 4px;
30-
border: 1px solid #3b8070;
31-
color: #3b8070;
32-
text-decoration: none;
33-
padding: 10px 30px;
34-
}
35-
36-
.button--green:hover {
37-
color: #fff;
38-
background-color: #3b8070;
39-
}
40-
41-
.button--grey {
42-
display: inline-block;
43-
border-radius: 4px;
44-
border: 1px solid #35495e;
45-
color: #35495e;
46-
text-decoration: none;
47-
padding: 10px 30px;
48-
margin-left: 15px;
49-
}
50-
51-
.button--grey:hover {
52-
color: #fff;
53-
background-color: #35495e;
54-
}
55-
</style>

‎pages/index.vue‎

Lines changed: 58 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,63 @@
11
<template>
2-
<div class="container">
3-
<div>
4-
<logo />
5-
<h1 class="title">
6-
opensource254
7-
</h1>
8-
<h2 class="subtitle">
9-
Welcome to opensource254. We are about the Kenyan techie interested in
10-
contributing to opensource and other projects. We give you a chance to
11-
increase your collaboration skills. Visit our about page for more.
12-
</h2>
13-
<div class="links">
14-
<a href="https://nuxtjs.org/" target="_blank" class="button--green">
15-
Documentation
16-
</a>
17-
<a
18-
href="https://github.com/nuxt/nuxt.js"
19-
target="_blank"
20-
class="button--grey"
21-
>
22-
GitHub
23-
</a>
2+
<!-- Start: Features Boxed -->
3+
<div class="features-boxed">
4+
<div class="container">
5+
<!-- Start: Intro -->
6+
<div class="intro">
7+
<h2 class="text-center">About us</h2>
8+
<p class="text-center">
9+
Nunc luctus in metus eget fringilla. Aliquam sed justo ligula.
10+
Vestibulum nibh erat, pellentesque ut laoreet vitae.
11+
</p>
12+
</div>
13+
<!-- End: Intro -->
14+
<!-- Start: Features -->
15+
<div class="row justify-content-center features">
16+
<div class="col-sm-6 col-md-5 col-lg-4 item">
17+
<div class="box">
18+
<h3 data-aos="fade" class="name">Works everywhere</h3>
19+
<p class="description">
20+
Aenean tortor est, vulputate quis leo in, vehicula rhoncus lacus.
21+
Praesent aliquam in tellus eu.
22+
</p>
23+
</div>
24+
</div>
25+
<div class="col-sm-6 col-md-5 col-lg-4 item">
26+
<div class="box">
27+
<h3 data-aos="fade" class="name">Always available</h3>
28+
<p class="description">
29+
Aenean tortor est, vulputate quis leo in, vehicula rhoncus lacus.
30+
Praesent aliquam in tellus eu.
31+
</p>
32+
</div>
33+
</div>
34+
<div class="col-sm-6 col-md-5 col-lg-4 item">
35+
<div class="box">
36+
<h3 data-aos="fade" class="name">Customizable</h3>
37+
<p class="description">
38+
Aenean tortor est, vulputate quis leo in, vehicula rhoncus lacus.
39+
Praesent aliquam in tellus eu.
40+
</p>
41+
</div>
42+
</div>
43+
</div>
44+
<!-- End: Features -->
45+
</div>
46+
<!-- End: Features Boxed -->
47+
<!-- Start: Features Boxed -->
48+
<div class="features-boxed" style="background-color: rgb(255,255,255);">
49+
<div class="container" style="background-color: #ffffff;">
50+
<!-- Start: Intro -->
51+
<div class="intro">
52+
<h2 class="text-center">About us</h2>
53+
<p class="text-center">
54+
Nunc luctus in metus eget fringilla. Aliquam sed justo ligula.
55+
Vestibulum nibh erat, pellentesque ut laoreet vitae.
56+
</p>
57+
</div>
58+
<!-- End: Intro -->
2459
</div>
2560
</div>
2661
</div>
62+
<!-- End: Features Boxed -->
2763
</template>
28-
29-
<script>
30-
import Logo from '~/components/Logo.vue'
31-
32-
export default {
33-
components: {
34-
Logo
35-
}
36-
}
37-
</script>
38-
39-
<style>
40-
.container {
41-
margin: 0 auto;
42-
min-height: 100vh;
43-
display: flex;
44-
justify-content: center;
45-
align-items: center;
46-
text-align: center;
47-
}
48-
49-
.title {
50-
font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
51-
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
52-
display: block;
53-
font-weight: 300;
54-
font-size: 100px;
55-
color: #35495e;
56-
letter-spacing: 1px;
57-
}
58-
59-
.subtitle {
60-
font-weight: 300;
61-
font-size: 42px;
62-
color: #526488;
63-
word-spacing: 5px;
64-
padding-bottom: 15px;
65-
}
66-
67-
.links {
68-
padding-top: 15px;
69-
}
70-
</style>

0 commit comments

Comments
 (0)