Commit 988b5d20ac45ea29f2884db14119902fc8b82613
1 parent
db67a6d259
Exists in
master
and in
1 other branch
new changes
Showing
86 changed files
with
612 additions
and
262 deletions
Show diff stats
src/App.vue
src/assets/css/custom.css
... | ... | @@ -127,4 +127,140 @@ h1{font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 600; font |
127 | 127 | color: #000000; |
128 | 128 | } |
129 | 129 | .form-layout .go-back span{ font-weight: 500 !important;} |
130 | - .reset-pass-spc{ margin-top: 110px;} | |
131 | 130 | \ No newline at end of file |
131 | + .reset-pass-spc{ margin-top: 110px;} | |
132 | + | |
133 | + /* profile */ | |
134 | + .inner-wrp { | |
135 | + height: 100%; | |
136 | + padding-left: 88px; | |
137 | + padding-right: 37px; | |
138 | + background:#fff;; | |
139 | + font-family: 'Montserrat', sans-serif; | |
140 | + | |
141 | +} | |
142 | +.user-profile-photo{width: 32px; height: 32px;} | |
143 | +.user-profile-photo a, img{ width: 100%;} | |
144 | +.inner-profile-ps{ width: 148px; height: 148px; float: left; display: block;} | |
145 | +.inner-wrp h1{ font-weight: 400; font-size:32px; line-height: 40px; color:#000; font-family: 'Montserrat', sans-serif;} | |
146 | +.tags{background: #BDDBFF; font-weight: 600; font-size:10px; color: #fff; padding: 2px 8px; border-radius:3px;} | |
147 | +.user-profile{ display: block; | |
148 | + float: left; | |
149 | + margin-left:30px; | |
150 | + position: relative; | |
151 | + width: 760px;} | |
152 | +.user-profile p{ font-weight: 500; font-size: 14px; line-height: 21px; color: #000; opacity: 0.5; width: 100%; display: block; float: left; margin:20px 0 0 0;} | |
153 | +.talk-to-me{ width: 100%; display: block; float: left; margin-top:20px;} | |
154 | +.talk-to-me span{font-weight: 500; font-size: 14px; line-height: 21px; color: #000; opacity: 0.5; float: left; margin-right:10px;} | |
155 | +.talk-to-me ul{ list-style-type: none; margin:0px; padding: 0px; float: left;margin-top:-1px;} | |
156 | +.talk-to-me ul li{ display: block; float: left;margin-right:3px;} | |
157 | +.talk-to-me ul li a{color:#000; text-decoration: none; font-weight: 500;} | |
158 | +.joined-info{ display: block; list-style-type: none; margin: 0px; padding: 0px; font-size: 13px; color:#000; } | |
159 | +.joined-info li a{ color:#000; opacity: 0.5;} | |
160 | +.joined-info li span{ width: 5px; height: 5px; background-color: #000; float: right; margin: 8px 10px 0 10px; border-radius:100%; opacity: 0.5;} | |
161 | +.joined-info li img{ width: 15px; float: right; margin-right: 5px; position: relative; margin-top:2px;} | |
162 | +.joined-info li{ float: left;} | |
163 | + | |
164 | +/* list style */ | |
165 | +.list-style-group{ width: 100%; display: block; float: left;} | |
166 | +.list-style-group p{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px; font-size: 14px; text-transform: uppercase; font-weight: 600;} | |
167 | +.list-style{list-style-type: none; margin:0px; padding: 0px;} | |
168 | +.list-style li{ float: left;} | |
169 | +.list-style li a{ display: block; float: left;} | |
170 | +.list-style li a img{ width: 48px; display: block; float: left; } | |
171 | +.list-spc-top{ margin-top:15px ;} | |
172 | + | |
173 | +/* social connects */ | |
174 | +.social-connects{ display: block; list-style-type: none; margin: 0px; padding: 0px;} | |
175 | +.social-connects li{ float: left; margin-right:0px ;} | |
176 | +.social-connects li a{ display: block; float: left; padding: 11px;} | |
177 | +.social-connects li a img.twitter{ margin-top:3px;} | |
178 | +.social-connects li a.active{background: #f9fafc; width: 40px; height: 40px; border-radius: 5px;} | |
179 | +.social-connects li a img{ width: 19px; display: block; float: left;} | |
180 | +.social-connects li span{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px;font-size: 14px; text-transform: uppercase; font-weight: 600; margin: 11px 30px 0 0; | |
181 | + float: left;} | |
182 | +.connect-social-channel{ margin-left: 10px !important; margin-top:8px !important; font-weight: 500 !important; font-style: normal !important; font-size: 14px !important; line-height: 22px !important; text-transform: unset !important; letter-spacing: 0px !important;} | |
183 | + | |
184 | + /* profile tab */ | |
185 | + .profile-tab-spc-top{margin-top:45px ; padding-top: 15px;} | |
186 | + .top-brd{border-top: 1px solid #DFE7EF;} | |
187 | +.profile-tab{ list-style-type: none; display: block; float: left; margin:0px ; padding: 0px;} | |
188 | +.profile-tab li{ float: left; padding-bottom: 10px; margin-right:76px ;} | |
189 | +.profile-tab li.active{ border-bottom: 4px solid #ef484f;} | |
190 | +.profile-tab li a{font-size: 20px;color:#000; text-decoration: none; font-weight: 400; line-height: 33px; } | |
191 | + | |
192 | +/* profile data wrp */ | |
193 | +.profile-data-wrp{ background:#dfe7ef; position: absolute; width: 100%; left: 0px;} | |
194 | +.data-wrp{padding-left: 88px; padding-right: 37px; padding-bottom: 88px; padding-top: 88px;} | |
195 | +.card-warpper{ width: 283px; background: #fff; border-radius: 4px; padding:23px; background-image: url('../images/card-bg.png'); background-repeat: repeat-y; background-position: top 0 right 20px; float: left; margin-right: 68px;} | |
196 | +.company-detail{ width: 100%; | |
197 | + display: block; | |
198 | + float: left; | |
199 | + position: relative; | |
200 | + margin-top: -63px; | |
201 | + margin-bottom: 21px;} | |
202 | +.company-detail .c-logo{ width: 82px; display: block; float: left;} | |
203 | +.company-detail .c-logo img{ width: 100%;} | |
204 | +.company-detail .c-tag img{ width: 100%;} | |
205 | +.company-detail .c-tag { width: 89px; display: block; float: right;} | |
206 | +.card-warpper h1{width: 198px; padding-bottom: 7px; border-bottom:1px solid #a5a5a5; font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 400; font-size: 35px; line-height: 42px; letter-spacing: 0.36px; color: #000000;} | |
207 | +.card-warpper .u-detail{ padding: 7px 0 7px 0; border-bottom:1px solid #a5a5a5; width: 198px; display: block; float: left;} | |
208 | +.card-warpper .u-detail img{ display: block; float: left; width: 24px; margin-right:17px;} | |
209 | +.card-warpper .u-detail h2{font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 700; font-size: 14px; line-height: 17px; letter-spacing: 0.15px; color: #000000;} | |
210 | +.card-warpper p{ float: left; padding: 12px 0 12px 0; width: 198px; border-bottom:1px solid #a5a5a5; font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 400; font-size: 14px;line-height: 18px; letter-spacing: 0.15px; color: #000000; } | |
211 | +.card-warpper .tags-list{ width: 198px; float: left; display: block; list-style-type: none; margin:0px; padding:0px;} | |
212 | +.card-warpper .tags-list li{ float: left; margin-right:9px ; margin-bottom: 9px;} | |
213 | +.card-warpper .tags-list li a{text-transform: uppercase; padding:5px 13px; border-radius: 10px; color: #fff;font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 600; font-size: 12px;line-height: 16px; letter-spacing: 0.15px;} | |
214 | +/* colors */ | |
215 | +.cape-honey{ background: #fde2a3;} | |
216 | +.rose-bud{ background: #fba29a;} | |
217 | +.pattens-blue{ background: #ceeced;} | |
218 | + | |
219 | +/* add new card */ | |
220 | +.add-card-warpper{ width: 283px; background: transparent; border-radius: 4px; padding:23px; height: 356px; float: left; margin-right: 0px; border:2px dashed #fff;} | |
221 | +.add-card-warpper a{ display: block; | |
222 | + width: 86px; | |
223 | + margin: 0 auto; | |
224 | + margin-top: 92px;} | |
225 | + | |
226 | + /* New Profile Buttons */ | |
227 | + .profile-buttons{ width: 261px; display: block; margin:0 auto;} | |
228 | + /* button sm */ | |
229 | + .profile-sm-bt{ width: 180px; | |
230 | + height: 54px; | |
231 | + border-radius: 5px; | |
232 | + border: 1px solid #514DA7; | |
233 | + color: #514DA7; | |
234 | + font-size: 16px; | |
235 | + font-weight: 500; | |
236 | + display: block; | |
237 | + line-height: 55px; | |
238 | + text-align: center;} | |
239 | + .profile-sm-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} | |
240 | + /* button md */ | |
241 | + .profile-md-bt{ width:233px; | |
242 | + height: 54px; | |
243 | + border-radius: 5px; | |
244 | + border: 1px solid #514DA7; | |
245 | + color: #514DA7; | |
246 | + font-size: 16px; | |
247 | + font-weight: 500; | |
248 | + display: block; | |
249 | + line-height: 55px; | |
250 | + text-align: center;} | |
251 | + .profile-md-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} | |
252 | + /* button lg */ | |
253 | + .profile-lg-bt{ width:261px; | |
254 | + height: 54px; | |
255 | + border-radius: 5px; | |
256 | + border: 1px solid #514DA7; | |
257 | + color: #514DA7; | |
258 | + font-size: 16px; | |
259 | + font-weight: 500; | |
260 | + display: block; | |
261 | + line-height: 55px; | |
262 | + text-align: center;} | |
263 | + .profile-lg-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;} | |
264 | + .center-and-spc{ margin:0 auto; margin-bottom:15px;} | |
265 | + .bt-active{ background-color:#514DA7; color:#fff; text-decoration: none;} | |
266 | +/* Replies */ | |
267 | +.replies{ width: 100%; display: block; float: left;} | |
132 | 268 | \ No newline at end of file | ... | ... |
src/assets/css/media.css
... | ... | @@ -6,6 +6,8 @@ |
6 | 6 | and (max-device-width: 1400px) |
7 | 7 | and (-webkit-min-device-pixel-ratio: 1) { |
8 | 8 | .wc-spc-lf-tp{ padding-top: 88px; padding-left: 0px; } |
9 | + .user-profile{padding-right: 90px; width: 675px;} | |
10 | + | |
9 | 11 | |
10 | 12 | } |
11 | 13 | |
... | ... | @@ -16,6 +18,7 @@ |
16 | 18 | and (-webkit-min-device-pixel-ratio: 1) { |
17 | 19 | .wc-spc-lf-tp{ padding-top: 162px; padding-left: 0px; } |
18 | 20 | .form-layout.signup-frm-spc { margin-top: 114px; float:right;} |
21 | + .user-profile{padding-right: 90px; width: 675px;} | |
19 | 22 | |
20 | 23 | } |
21 | 24 | |
... | ... | @@ -25,6 +28,7 @@ |
25 | 28 | and (-webkit-min-device-pixel-ratio: 1) { |
26 | 29 | .wc-spc-lf-tp{ padding-top: 162px; padding-left: 0px; } |
27 | 30 | .form-layout.signup-frm-spc { margin-top: 114px;} |
31 | + .user-profile{padding-right: 90px; width: 675px;} | |
28 | 32 | |
29 | 33 | } |
30 | 34 | @media screen |
... | ... | @@ -33,6 +37,7 @@ |
33 | 37 | and (-webkit-min-device-pixel-ratio: 1) { |
34 | 38 | .wc-spc-lf-tp{ padding-top: 90px; padding-left: 0px; } |
35 | 39 | .form-layout.signup-frm-spc { margin-top: 41px;} |
40 | + .user-profile{padding-right: 90px;width: 570px;} | |
36 | 41 | |
37 | 42 | |
38 | 43 | } |
... | ... | @@ -43,6 +48,8 @@ |
43 | 48 | and (min-device-width: 320px) |
44 | 49 | and (max-device-width: 960px) |
45 | 50 | and (-webkit-min-device-pixel-ratio: 2) { |
51 | + | |
52 | + | |
46 | 53 | .main-wrp{ padding-left: 15px; padding-right: 15px;} |
47 | 54 | .wc-spc-lf-tp { |
48 | 55 | padding-top: 52px; |
... | ... | @@ -62,7 +69,19 @@ |
62 | 69 | .reset-pass-spc { |
63 | 70 | margin-top: 20px; |
64 | 71 | } |
65 | - | |
72 | +/* profile */ | |
73 | +.inner-wrp{ padding-left: 15px; padding-right: 15px; height: 100%; overflow: auto;} | |
74 | +.user-profile{ padding-right: 0px; margin-left: 0px;position: unset; margin-top:20px ; width: 100%;} | |
75 | +.data-wrp {padding-left: 15px;padding-right: 15px;padding-bottom: 50px; padding-top: 0px;} | |
76 | +.card-warpper{ margin-left: 15px; margin-right: 0px; float: unset;margin-left:15px; margin-top: 90px;} | |
77 | +.add-card-warpper{margin-left: 15px; margin-right: 0px; float: unset; margin-left:15px; margin-top: 50px;} | |
78 | + .talk-to-me{ margin-bottom: 30px;} | |
79 | + .profile-data-wrp{ position: relative;} | |
80 | + .user-profile-photo { | |
81 | + position: absolute; | |
82 | + right: 82px; | |
83 | + top: 16px; | |
84 | +} | |
66 | 85 | } |
67 | 86 | |
68 | 87 | /* tab */ |
... | ... | @@ -71,7 +90,8 @@ |
71 | 90 | and (min-device-width: 1024px) |
72 | 91 | and (max-device-width: 1366px) |
73 | 92 | and (-webkit-min-device-pixel-ratio: 2) { |
74 | - .main-wrp{ background-position: bottom 100px left -100px;} | |
93 | + .main-wrp{background-position: bottom 100px left -100px;} | |
94 | + | |
75 | 95 | |
76 | 96 | |
77 | 97 | } |
... | ... | @@ -80,7 +100,7 @@ |
80 | 100 | and (max-device-width: 1024px) |
81 | 101 | and (orientation: portrait) |
82 | 102 | and (-webkit-min-device-pixel-ratio: 2) { |
83 | - | |
103 | + | |
84 | 104 | } |
85 | 105 | /* / |
86 | 106 | |
... | ... | @@ -93,6 +113,10 @@ |
93 | 113 | .col-reverse{ |
94 | 114 | flex-direction:unset;} |
95 | 115 | .main-wrp{background-size: 100%; background-position: bottom -10px left -130px;} |
116 | + .card-warpper{ float: left;} | |
117 | + .add-card-warpper{ float: left; margin-top: 0px;} | |
118 | + .user-profile{ width: 540px; | |
119 | + margin-left: 30px; margin-top: 0px;} | |
96 | 120 | |
97 | 121 | } |
98 | 122 | /* Portrait and Landscape */ |
... | ... | @@ -102,5 +126,8 @@ |
102 | 126 | and (-webkit-min-device-pixel-ratio: 1) { |
103 | 127 | .main-wrp{background-position: bottom -10px left -130px !important;} |
104 | 128 | .wc-spc-lf-tp{ padding-left: 0px; padding-top: 100px;} |
129 | + .user-profile{padding-right: 0px; width: 380px;} | |
130 | + .card-warpper{margin-bottom: 40px; margin-right: 25px;} | |
131 | + | |
105 | 132 | } |
106 | 133 | ... | ... |
src/assets/css/style.css
... | ... | @@ -1,130 +0,0 @@ |
1 | -html, | |
2 | -body { | |
3 | - height: 100%; | |
4 | -} | |
5 | - | |
6 | -body { | |
7 | - display: -ms-flexbox; | |
8 | - display: flex; | |
9 | - -ms-flex-align: center; | |
10 | - align-items: center; | |
11 | - padding-top: 0px; | |
12 | - padding-bottom: 0px; | |
13 | - background-color:#DFE7EF; | |
14 | -} | |
15 | - | |
16 | -/* heading */ | |
17 | -h1{font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 600; font-size: 48px; line-height: 58px; color: #000000;} | |
18 | - | |
19 | -/* spaces */ | |
20 | -.wc-spc-lf-tp{ padding-top: 262px; padding-left: 40px; } | |
21 | - | |
22 | - | |
23 | -.h-100{height: 100%;} | |
24 | -.main-wrp{ height: 100%;padding-left: 56px; padding-right: 233px; background-image:url('assets/images/bg.svg'); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom -10px left -130px; | |
25 | - background-size: 45%;} | |
26 | -/* navbar */ | |
27 | -.spotLight-nav{ margin-top: 20px;} | |
28 | -.spotLight-nav li a{font-family: 'Montserrat', sans-serif; | |
29 | - font-size: 16px; | |
30 | - font-style: normal; | |
31 | - font-weight: 400; | |
32 | - line-height: 22px; | |
33 | - letter-spacing: -0.7470597624778748px; | |
34 | - text-align: left; color:#000; opacity: 0.6; | |
35 | - } | |
36 | - .spotLight-nav li {margin-right: 14px;} | |
37 | - .spotLight-nav li.active a{font-weight: 600; opacity: 1;} | |
38 | - .spotLight-nav li.spotLight-img a{opacity: 1;} | |
39 | - .navbar-brand{ margin-right: 57px;} | |
40 | - | |
41 | - /* ul list style */ | |
42 | - .sign-in-up-list{ width: 325px; list-style-type: none; margin: 0px; padding:0px;font-family: 'Montserrat', sans-serif; | |
43 | - font-size: 20px; | |
44 | - font-style: normal; | |
45 | - font-weight: 500; | |
46 | - line-height: 24px; float: left; margin-top: 24px; } | |
47 | - .sign-in-up-list li{ margin-bottom: 26px;display: flex; color:#000;} | |
48 | - .sign-in-up-list li img{ margin-right: 10px; float: left; width: 24px; height: 24px;} | |
49 | - .sign-in-up-list li span{ float: left;} | |
50 | - /* form */ | |
51 | - .form-layout{ width: 100%; display: block; float: left;} | |
52 | - .form-layout form{ display:block; float: left; width: 100%;} | |
53 | - .form-layout h5{font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity: 0.5; text-align:center;} | |
54 | - .form-layout .social-login{ display: block; width: 339px; | |
55 | - margin: 0 auto; margin-top: 37px; margin-bottom: 37px; } | |
56 | - .form-layout .social-login ul{ list-style-type: none; margin:0px; padding:0px; display: flex;} | |
57 | - .form-layout .social-login ul li a img{ width:75px; height: 75px; float: left;} | |
58 | - .form-layout .social-login ul li:nth-child(2){margin:0 37px;} | |
59 | - .form-layout .fill-form{ width: 100%; display: block; float: left; margin-top:24px ;} | |
60 | - | |
61 | - form input{background:#D2DCE7 !important; border: 1px solid rgba(0, 0, 0, 0.3) !important; box-sizing: border-box; border-radius: 5px !important; height: 50px !important; line-height: 50px !important; color: #000000; | |
62 | - | |
63 | - font-family: 'Montserrat', sans-serif; | |
64 | - font-size: 13px; | |
65 | - font-style: normal; | |
66 | - font-weight: 600 !important; margin-bottom:16px;padding:0 18px !important;} | |
67 | - form input:focus{ box-shadow:0px !important; outline: 0px !important;} | |
68 | - | |
69 | - /* placeholder */ | |
70 | - form input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ | |
71 | - line-height: 18px; | |
72 | - color: #000000; | |
73 | - opacity: 0.5; | |
74 | - font-family: 'Montserrat', sans-serif; | |
75 | - font-size: 13px; | |
76 | - font-style: normal; | |
77 | - font-weight: 600; | |
78 | - } | |
79 | - | |
80 | - form input:-ms-input-placeholder { /* Internet Explorer 10-11 */ | |
81 | - line-height: 18px; | |
82 | - color: #000000; | |
83 | - opacity: 0.5; | |
84 | - font-family: 'Montserrat', sans-serif; | |
85 | - font-size: 13px; | |
86 | - font-style: normal; | |
87 | - font-weight: 600; | |
88 | - } | |
89 | - | |
90 | - form input::-ms-input-placeholder { /* Microsoft Edge */ | |
91 | - line-height: 18px; | |
92 | - color: #000000; | |
93 | - opacity: 0.5; | |
94 | - font-family: 'Montserrat', sans-serif; | |
95 | - font-size: 13px; | |
96 | - font-style: normal; | |
97 | - font-weight: 600; | |
98 | - } | |
99 | - /* placeholder */ | |
100 | - .sb-button{ background: #514DA7; | |
101 | - height: 50px; | |
102 | - line-height: 35px; | |
103 | - color: #fff; | |
104 | - font-family: 'Montserrat', sans-serif; | |
105 | - font-size: 13px; | |
106 | - font-style: normal; | |
107 | - font-weight: 600; | |
108 | - width: 100%;} | |
109 | - .sb-button img{ margin-right: 10px;} | |
110 | - .sb-button:hover{ color:#fff;} | |
111 | - .form-layout p{margin-top:17px ;} | |
112 | - .form-layout p{font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;opacity: 0.5; text-align:center;} | |
113 | - .form-layout p a{ font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 500;line-height: 19px; color: #000000;text-decoration: underline;} | |
114 | - .form-layout .forget-pass{font-family: 'Montserrat', sans-serif;font-size: 15px; font-style: normal;font-weight: 700;line-height: 19px; color: #000000;opacity:1 !important; text-align:center;} | |
115 | - .form-layout .forget-pass a{font-weight: 700;color: #514DA7 !important; text-decoration: none !important; | |
116 | - } | |
117 | - .form-layout p a:hover{ color:#000;} | |
118 | - .form-layout h3{font-family: 'Montserrat', sans-serif;font-size: 18px; font-style: normal;font-weight: 700;line-height: 21px; color: #000000; text-align: center;margin-top: 24px;} | |
119 | - .form-layout h3 a{font-family: 'Montserrat', sans-serif;font-size: 18px; font-style: normal;font-weight: 700;line-height: 21px; color: #514DA7; opacity: 1;} | |
120 | - .form-layout.signup-frm-spc{width: 300px; display: block; float: left; margin-top: 214px;} | |
121 | - .welcome-hd-back{ | |
122 | - font-family: 'Bebas Neue', cursive; | |
123 | - font-style: normal; | |
124 | - font-weight: 600; | |
125 | - font-size: 106px; | |
126 | - line-height: 106px; | |
127 | - color: #000000; | |
128 | - } | |
129 | - .form-layout .go-back span{ font-weight: 500 !important;} | |
130 | - .reset-pass-spc{ margin-top: 110px;} | |
131 | 0 | \ No newline at end of file |
src/assets/css/tagsinput.css
... | ... | @@ -1,125 +0,0 @@ |
1 | -/* The input */ | |
2 | -.tags-input { | |
3 | - display: flex; | |
4 | - flex-wrap: wrap; | |
5 | - align-items: center; | |
6 | -} | |
7 | - | |
8 | -.tags-input input { | |
9 | - flex: 1; | |
10 | - background: transparent; | |
11 | - border: none; | |
12 | -} | |
13 | - | |
14 | -.tags-input input:focus { | |
15 | - outline: none; | |
16 | -} | |
17 | - | |
18 | -.tags-input input[type="text"] { | |
19 | - color: #495057; | |
20 | -} | |
21 | - | |
22 | -.tags-input-wrapper-default { | |
23 | - padding: .5rem .25rem; | |
24 | - | |
25 | - background: #fff; | |
26 | - | |
27 | - border: 1px solid transparent; | |
28 | - border-radius: .25rem; | |
29 | - border-color: #dbdbdb; | |
30 | -} | |
31 | - | |
32 | -/* The tag badges & the remove icon */ | |
33 | -.tags-input span { | |
34 | - margin-right: 0.3rem; | |
35 | -} | |
36 | - | |
37 | -.tags-input-remove { | |
38 | - cursor: pointer; | |
39 | - position: relative; | |
40 | - display: inline-block; | |
41 | - width: 0.5rem; | |
42 | - height: 0.5rem; | |
43 | - overflow: hidden; | |
44 | -} | |
45 | - | |
46 | -.tags-input-remove:before, .tags-input-remove:after { | |
47 | - content: ''; | |
48 | - position: absolute; | |
49 | - width: 100%; | |
50 | - top: 50%; | |
51 | - left: 0; | |
52 | - background: #5dc282; | |
53 | - | |
54 | - height: 2px; | |
55 | - margin-top: -1px; | |
56 | -} | |
57 | - | |
58 | -.tags-input-remove:before { | |
59 | - transform: rotate(45deg); | |
60 | -} | |
61 | -.tags-input-remove:after { | |
62 | - transform: rotate(-45deg); | |
63 | -} | |
64 | - | |
65 | -/* Tag badge styles */ | |
66 | -.tags-input-badge { | |
67 | - display: inline-block; | |
68 | - padding: 0.25em 0.4em; | |
69 | - font-size: 75%; | |
70 | - font-weight: 700; | |
71 | - line-height: 1; | |
72 | - text-align: center; | |
73 | - white-space: nowrap; | |
74 | - vertical-align: baseline; | |
75 | - border-radius: 0.25rem; | |
76 | -} | |
77 | - | |
78 | -.tags-input-badge-pill { | |
79 | - padding-right: 0.6em; | |
80 | - padding-left: 0.6em; | |
81 | - border-radius: 10rem; | |
82 | -} | |
83 | - | |
84 | -.tags-input-badge-selected-default { | |
85 | - color: #212529; | |
86 | - background-color: #f0f1f2; | |
87 | -} | |
88 | - | |
89 | -/* Typeahead */ | |
90 | -.typeahead-hide-btn { | |
91 | - color: #999 !important; | |
92 | - font-style: italic; | |
93 | -} | |
94 | - | |
95 | -/* Typeahead - badges */ | |
96 | -.typeahead-badges > span { | |
97 | - cursor: pointer; | |
98 | - margin-right: 0.3rem; | |
99 | -} | |
100 | - | |
101 | -/* Typeahead - dropdown */ | |
102 | -.typeahead-dropdown { | |
103 | - list-style-type: none; | |
104 | - padding: 0; | |
105 | - margin: 0; | |
106 | - position: absolute; | |
107 | - width: 100%; | |
108 | - z-index: 1000; | |
109 | -} | |
110 | - | |
111 | -.typeahead-dropdown li { | |
112 | - padding: .25rem 1rem; | |
113 | - cursor: pointer; | |
114 | -} | |
115 | - | |
116 | -/* Typeahead elements style/theme */ | |
117 | -.tags-input-typeahead-item-default { | |
118 | - color: #fff; | |
119 | - background-color: #343a40; | |
120 | -} | |
121 | - | |
122 | -.tags-input-typeahead-item-highlighted-default { | |
123 | - color: #fff; | |
124 | - background-color: #007bff; | |
125 | -} | |
126 | 0 | \ No newline at end of file |
src/assets/fonts/BebasNeue.woff
No preview for this file type
src/assets/fonts/BebasNeue.woff2
No preview for this file type
src/assets/fonts/BebasNeueBold.woff
No preview for this file type
src/assets/fonts/BebasNeueBold.woff2
No preview for this file type
src/assets/fonts/BebasNeueRegular.woff
No preview for this file type
src/assets/fonts/BebasNeueRegular.woff2
No preview for this file type
src/assets/fonts/Montserrat-Black.woff
No preview for this file type
src/assets/fonts/Montserrat-Black.woff2
No preview for this file type
src/assets/fonts/Montserrat-BlackItalic.woff
No preview for this file type
src/assets/fonts/Montserrat-BlackItalic.woff2
No preview for this file type
src/assets/fonts/Montserrat-Bold.woff
No preview for this file type
src/assets/fonts/Montserrat-Bold.woff2
No preview for this file type
src/assets/fonts/Montserrat-BoldItalic.woff
No preview for this file type
src/assets/fonts/Montserrat-BoldItalic.woff2
No preview for this file type
src/assets/fonts/Montserrat-ExtraBold.woff
No preview for this file type
src/assets/fonts/Montserrat-ExtraBold.woff2
No preview for this file type
src/assets/fonts/Montserrat-ExtraBoldItalic.woff
No preview for this file type
src/assets/fonts/Montserrat-ExtraBoldItalic.woff2
No preview for this file type
src/assets/fonts/Montserrat-ExtraLight.woff
No preview for this file type
src/assets/fonts/Montserrat-ExtraLight.woff2
No preview for this file type
src/assets/fonts/Montserrat-ExtraLightItalic.woff
No preview for this file type
src/assets/fonts/Montserrat-ExtraLightItalic.woff2
No preview for this file type
src/assets/fonts/Montserrat-Italic.woff
No preview for this file type
src/assets/fonts/Montserrat-Italic.woff2
No preview for this file type
src/assets/fonts/Montserrat-Light.woff
No preview for this file type
src/assets/fonts/Montserrat-Light.woff2
No preview for this file type
src/assets/fonts/Montserrat-LightItalic.woff
No preview for this file type
src/assets/fonts/Montserrat-LightItalic.woff2
No preview for this file type
src/assets/fonts/Montserrat-Medium.woff
No preview for this file type
src/assets/fonts/Montserrat-Medium.woff2
No preview for this file type
src/assets/fonts/Montserrat-MediumItalic.woff
No preview for this file type
src/assets/fonts/Montserrat-MediumItalic.woff2
No preview for this file type
src/assets/fonts/Montserrat-Regular.woff
No preview for this file type
src/assets/fonts/Montserrat-Regular.woff2
No preview for this file type
src/assets/fonts/Montserrat-SemiBold.woff
No preview for this file type
src/assets/fonts/Montserrat-SemiBold.woff2
No preview for this file type
src/assets/fonts/Montserrat-SemiBoldItalic.woff
No preview for this file type
src/assets/fonts/Montserrat-SemiBoldItalic.woff2
No preview for this file type
src/assets/fonts/Montserrat-Thin.woff
No preview for this file type
src/assets/fonts/Montserrat-Thin.woff2
No preview for this file type
src/assets/fonts/Montserrat-ThinItalic.woff
No preview for this file type
src/assets/fonts/Montserrat-ThinItalic.woff2
No preview for this file type
src/assets/fonts/fonts.css
... | ... | @@ -0,0 +1,190 @@ |
1 | +@font-face { | |
2 | + font-family: 'Bebas Neue'; | |
3 | + src: url('BebasNeueRegular.woff2') format('woff2'), | |
4 | + url('BebasNeueRegular.woff') format('woff'); | |
5 | + font-weight: normal; | |
6 | + font-style: normal; | |
7 | + font-display: swap; | |
8 | +} | |
9 | + | |
10 | +@font-face { | |
11 | + font-family: 'Bebas Neue'; | |
12 | + src: url('BebasNeueBold.woff2') format('woff2'), | |
13 | + url('BebasNeueBold.woff') format('woff'); | |
14 | + font-weight: bold; | |
15 | + font-style: normal; | |
16 | + font-display: swap; | |
17 | +} | |
18 | + | |
19 | +@font-face { | |
20 | + font-family: 'Bebas Neue'; | |
21 | + src: url('BebasNeue.woff2') format('woff2'), | |
22 | + url('BebasNeue.woff') format('woff'); | |
23 | + font-weight: normal; | |
24 | + font-style: normal; | |
25 | + font-display: swap; | |
26 | +} | |
27 | + | |
28 | +/*== */ | |
29 | +@font-face { | |
30 | + font-family: 'Montserrat'; | |
31 | + src: url('Montserrat-Black.woff2') format('woff2'), | |
32 | + url('Montserrat-Black.woff') format('woff'); | |
33 | + font-weight: 900; | |
34 | + font-style: normal; | |
35 | + font-display: swap; | |
36 | +} | |
37 | + | |
38 | +@font-face { | |
39 | + font-family: 'Montserrat'; | |
40 | + src: url('Montserrat-BlackItalic.woff2') format('woff2'), | |
41 | + url('Montserrat-BlackItalic.woff') format('woff'); | |
42 | + font-weight: 900; | |
43 | + font-style: italic; | |
44 | + font-display: swap; | |
45 | +} | |
46 | + | |
47 | +@font-face { | |
48 | + font-family: 'Montserrat'; | |
49 | + src: url('Montserrat-Bold.woff2') format('woff2'), | |
50 | + url('Montserrat-Bold.woff') format('woff'); | |
51 | + font-weight: bold; | |
52 | + font-style: normal; | |
53 | + font-display: swap; | |
54 | +} | |
55 | + | |
56 | +@font-face { | |
57 | + font-family: 'Montserrat'; | |
58 | + src: url('Montserrat-BoldItalic.woff2') format('woff2'), | |
59 | + url('Montserrat-BoldItalic.woff') format('woff'); | |
60 | + font-weight: bold; | |
61 | + font-style: italic; | |
62 | + font-display: swap; | |
63 | +} | |
64 | + | |
65 | +@font-face { | |
66 | + font-family: 'Montserrat'; | |
67 | + src: url('Montserrat-ExtraBold.woff2') format('woff2'), | |
68 | + url('Montserrat-ExtraBold.woff') format('woff'); | |
69 | + font-weight: 800; | |
70 | + font-style: normal; | |
71 | + font-display: swap; | |
72 | +} | |
73 | + | |
74 | +@font-face { | |
75 | + font-family: 'Montserrat'; | |
76 | + src: url('Montserrat-ExtraBoldItalic.woff2') format('woff2'), | |
77 | + url('Montserrat-ExtraBoldItalic.woff') format('woff'); | |
78 | + font-weight: 800; | |
79 | + font-style: italic; | |
80 | + font-display: swap; | |
81 | +} | |
82 | + | |
83 | +@font-face { | |
84 | + font-family: 'Montserrat'; | |
85 | + src: url('Montserrat-ExtraLight.woff2') format('woff2'), | |
86 | + url('Montserrat-ExtraLight.woff') format('woff'); | |
87 | + font-weight: 200; | |
88 | + font-style: normal; | |
89 | + font-display: swap; | |
90 | +} | |
91 | + | |
92 | +@font-face { | |
93 | + font-family: 'Montserrat'; | |
94 | + src: url('Montserrat-ExtraLightItalic.woff2') format('woff2'), | |
95 | + url('Montserrat-ExtraLightItalic.woff') format('woff'); | |
96 | + font-weight: 200; | |
97 | + font-style: italic; | |
98 | + font-display: swap; | |
99 | +} | |
100 | + | |
101 | +@font-face { | |
102 | + font-family: 'Montserrat'; | |
103 | + src: url('Montserrat-Italic.woff2') format('woff2'), | |
104 | + url('Montserrat-Italic.woff') format('woff'); | |
105 | + font-weight: normal; | |
106 | + font-style: italic; | |
107 | + font-display: swap; | |
108 | +} | |
109 | + | |
110 | +@font-face { | |
111 | + font-family: 'Montserrat'; | |
112 | + src: url('Montserrat-Light.woff2') format('woff2'), | |
113 | + url('Montserrat-Light.woff') format('woff'); | |
114 | + font-weight: 300; | |
115 | + font-style: normal; | |
116 | + font-display: swap; | |
117 | +} | |
118 | + | |
119 | +@font-face { | |
120 | + font-family: 'Montserrat'; | |
121 | + src: url('Montserrat-LightItalic.woff2') format('woff2'), | |
122 | + url('Montserrat-LightItalic.woff') format('woff'); | |
123 | + font-weight: 300; | |
124 | + font-style: italic; | |
125 | + font-display: swap; | |
126 | +} | |
127 | + | |
128 | +@font-face { | |
129 | + font-family: 'Montserrat'; | |
130 | + src: url('Montserrat-Medium.woff2') format('woff2'), | |
131 | + url('Montserrat-Medium.woff') format('woff'); | |
132 | + font-weight: 500; | |
133 | + font-style: normal; | |
134 | + font-display: swap; | |
135 | +} | |
136 | + | |
137 | +@font-face { | |
138 | + font-family: 'Montserrat'; | |
139 | + src: url('Montserrat-MediumItalic.woff2') format('woff2'), | |
140 | + url('Montserrat-MediumItalic.woff') format('woff'); | |
141 | + font-weight: 500; | |
142 | + font-style: italic; | |
143 | + font-display: swap; | |
144 | +} | |
145 | + | |
146 | +@font-face { | |
147 | + font-family: 'Montserrat'; | |
148 | + src: url('Montserrat-Regular.woff2') format('woff2'), | |
149 | + url('Montserrat-Regular.woff') format('woff'); | |
150 | + font-weight: normal; | |
151 | + font-style: normal; | |
152 | + font-display: swap; | |
153 | +} | |
154 | + | |
155 | +@font-face { | |
156 | + font-family: 'Montserrat'; | |
157 | + src: url('Montserrat-SemiBold.woff2') format('woff2'), | |
158 | + url('Montserrat-SemiBold.woff') format('woff'); | |
159 | + font-weight: 600; | |
160 | + font-style: normal; | |
161 | + font-display: swap; | |
162 | +} | |
163 | + | |
164 | +@font-face { | |
165 | + font-family: 'Montserrat'; | |
166 | + src: url('Montserrat-SemiBoldItalic.woff2') format('woff2'), | |
167 | + url('Montserrat-SemiBoldItalic.woff') format('woff'); | |
168 | + font-weight: 600; | |
169 | + font-style: italic; | |
170 | + font-display: swap; | |
171 | +} | |
172 | + | |
173 | +@font-face { | |
174 | + font-family: 'Montserrat'; | |
175 | + src: url('Montserrat-Thin.woff2') format('woff2'), | |
176 | + url('Montserrat-Thin.woff') format('woff'); | |
177 | + font-weight: 100; | |
178 | + font-style: normal; | |
179 | + font-display: swap; | |
180 | +} | |
181 | + | |
182 | +@font-face { | |
183 | + font-family: 'Montserrat'; | |
184 | + src: url('Montserrat-ThinItalic.woff2') format('woff2'), | |
185 | + url('Montserrat-ThinItalic.woff') format('woff'); | |
186 | + font-weight: 100; | |
187 | + font-style: italic; | |
188 | + font-display: swap; | |
189 | +} | |
190 | + | ... | ... |
src/assets/fonts/montserrat-bold-webfont.woff
No preview for this file type
src/assets/fonts/montserrat-bold-webfont.woff2
No preview for this file type
src/assets/fonts/montserrat-medium-webfont.woff
No preview for this file type
src/assets/fonts/montserrat-medium-webfont.woff2
No preview for this file type
src/assets/fonts/montserrat-regular-webfont.woff
No preview for this file type
src/assets/fonts/montserrat-regular-webfont.woff2
No preview for this file type
src/assets/fonts/montserrat-semibold-webfont.woff
No preview for this file type
src/assets/fonts/montserrat-semibold-webfont.woff2
No preview for this file type
src/assets/fonts/worksans-bold-webfont.woff
No preview for this file type
src/assets/fonts/worksans-bold-webfont.woff2
No preview for this file type
src/assets/fonts/worksans-regular-webfont.woff
No preview for this file type
src/assets/fonts/worksans-regular-webfont.woff2
No preview for this file type
src/assets/fonts/worksans-semibold-webfont.woff
No preview for this file type
src/assets/fonts/worksans-semibold-webfont.woff2
No preview for this file type
src/assets/images/add-new.png
1.82 KB
src/assets/images/behance1.png
649 Bytes
src/assets/images/c-tag.png
3.46 KB
src/assets/images/card-bg.png
214 Bytes
src/assets/images/icon-1.png
3.75 KB
src/assets/images/icon-2.png
3.78 KB
src/assets/images/icon-3.png
3.91 KB
src/assets/images/icon-4.png
3.62 KB
src/assets/images/icon-5.png
3.84 KB
src/assets/images/icon-6.png
1.85 KB
src/assets/images/image 46.png
2.26 KB
src/assets/images/linkedin.png
363 Bytes
src/assets/images/medium1.png
468 Bytes
src/assets/images/phone-pay.png
1.61 KB
src/assets/images/plus.png
267 Bytes
src/assets/images/twitter.png
462 Bytes
src/assets/images/u-info-icon.png
3.45 KB
src/assets/images/user-2.png
1.6 KB
src/assets/images/user.png
11.2 KB
src/components/LandingPage.vue
... | ... | @@ -93,9 +93,9 @@ |
93 | 93 | <img src="../assets/images/key.svg" /> Log In to your account |
94 | 94 | </button> |
95 | 95 | <p class="forget-pass"> |
96 | - Forgot Password? <a href="#">Reset</a> | |
96 | + Forgot Password? <a @click="goToReset">Reset</a> | |
97 | 97 | </p> |
98 | - <h3>Donโt have an account? <a href="#">SignUp</a></h3> | |
98 | + <h3>Donโt have an account? <a @click="goToSignUp">SignUp</a></h3> | |
99 | 99 | </div> |
100 | 100 | </form> |
101 | 101 | </div> |
... | ... | @@ -124,6 +124,12 @@ export default { |
124 | 124 | mounted() {}, |
125 | 125 | methods: { |
126 | 126 | login() {}, |
127 | + goToSignUp(){ | |
128 | + this.$router.push("/signup"); | |
129 | + }, | |
130 | + goToReset() { | |
131 | + this.$router.push("/reset"); | |
132 | + }, | |
127 | 133 | }, |
128 | 134 | }; |
129 | 135 | </script> | ... | ... |
src/components/Reset.vue
... | ... | @@ -0,0 +1,131 @@ |
1 | +<template> | |
2 | + <main class="landing-page"> | |
3 | + <div class="container-fluid main-wrp"> | |
4 | + <nav class="navbar navbar-expand-sm spotLight-nav"> | |
5 | + <a class="navbar-brand" href="#" | |
6 | + ><img src="../assets/images/logo.png" | |
7 | + /></a> | |
8 | + <button | |
9 | + class="navbar-toggler" | |
10 | + type="button" | |
11 | + data-toggle="collapse" | |
12 | + data-target="#navbarsExample03" | |
13 | + aria-controls="navbarsExample03" | |
14 | + aria-expanded="false" | |
15 | + aria-label="Toggle navigation" | |
16 | + > | |
17 | + <span class="navbar-toggler-icon"></span> | |
18 | + <span class="navbar-toggler-icon"></span> | |
19 | + <span class="navbar-toggler-icon"></span> | |
20 | + </button> | |
21 | + | |
22 | + <div class="collapse navbar-collapse" id="navbarsExample03"> | |
23 | + <ul class="navbar-nav mr-auto"> | |
24 | + <li class="nav-item active"> | |
25 | + <a class="nav-link" href="#">About</a> | |
26 | + </li> | |
27 | + <li class="nav-item"> | |
28 | + <a class="nav-link" href="#">Masterclass</a> | |
29 | + </li> | |
30 | + <li class="nav-item"> | |
31 | + <a class="nav-link" href="#">Stories</a> | |
32 | + </li> | |
33 | + <li class="nav-item spotLight-img"> | |
34 | + <a class="nav-link" href="#" | |
35 | + ><img src="../assets/images/SPOTLight.svg" | |
36 | + /></a> | |
37 | + </li> | |
38 | + <li class="nav-item"> | |
39 | + <a class="nav-link" href="#">Library</a> | |
40 | + </li> | |
41 | + </ul> | |
42 | + </div> | |
43 | + </nav> | |
44 | + <!-- menu wrapper --> | |
45 | + <div class="row col-reverse"> | |
46 | + <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div> | |
47 | + <!-- users land image --> | |
48 | + <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp"> | |
49 | + <h1> | |
50 | + Welcome to <br /> | |
51 | + Productgrowth | |
52 | + </h1> | |
53 | + <ul class="sign-in-up-list"> | |
54 | + <li> | |
55 | + <img src="../assets/images/check.svg" /><span | |
56 | + >Connect & learn from fellow product enthusiasts</span | |
57 | + > | |
58 | + </li> | |
59 | + <li> | |
60 | + <img src="../assets/images/check.svg" /><span | |
61 | + >Share & pickup deeper insights from real world products</span | |
62 | + > | |
63 | + </li> | |
64 | + <li> | |
65 | + <img src="../assets/images/check.svg" /><span | |
66 | + >Access to XX Casestudies</span | |
67 | + > | |
68 | + </li> | |
69 | + </ul> | |
70 | + </div> | |
71 | + <!-- users land image --> | |
72 | + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | |
73 | + <div class="form-layout signup-frm-spc"> | |
74 | + <form class="reset-pass-spc"> | |
75 | + <h5> | |
76 | + Forgot password? Enter your e-Mail ID<br /> | |
77 | + to retrive | |
78 | + </h5> | |
79 | + <div class="fill-form"> | |
80 | + <label for="inputEmail" class="sr-only">Email address</label> | |
81 | + <input | |
82 | + type="email" | |
83 | + id="inputEmail" | |
84 | + class="form-control" | |
85 | + placeholder="Your Email ID" | |
86 | + required | |
87 | + autofocus | |
88 | + /> | |
89 | + | |
90 | + <button class="btn btn-lg sb-button" type="submit"> | |
91 | + <img src="../assets/images/key.svg" /> Reset Password | |
92 | + </button> | |
93 | + | |
94 | + <h3 class="go-back"> | |
95 | + <span>Go back to </span><a @click="goToLogin">Login</a><span> / </span | |
96 | + ><a @click="goToSignUp">SignUp</a> | |
97 | + </h3> | |
98 | + </div> | |
99 | + </form> | |
100 | + </div> | |
101 | + </div> | |
102 | + <!-- sign up --> | |
103 | + </div> | |
104 | + <!-- body wrapper --> | |
105 | + </div> | |
106 | + <!-- main wrapper --> | |
107 | + </main> | |
108 | +</template> | |
109 | + | |
110 | +<script> | |
111 | +import Vue from "vue"; | |
112 | +import router from "../router"; | |
113 | + | |
114 | +export default { | |
115 | + name: "Reset", | |
116 | + | |
117 | + data() { | |
118 | + return {}; | |
119 | + }, | |
120 | + mounted() {}, | |
121 | + methods: { | |
122 | + goToLogin() { | |
123 | + this.$router.push("/"); | |
124 | + }, | |
125 | + goToSignUp() { | |
126 | + this.$router.push("/signup"); | |
127 | + }, | |
128 | + | |
129 | + }, | |
130 | +}; | |
131 | +</script> | ... | ... |
src/components/SignUp.vue
... | ... | @@ -0,0 +1,102 @@ |
1 | +<template> | |
2 | + <main class="landing-page"> | |
3 | + <div class="container-fluid main-wrp"> | |
4 | + | |
5 | + | |
6 | + <nav class="navbar navbar-expand-sm spotLight-nav"> | |
7 | + <a class="navbar-brand" href="#"><img src="../assets/images/logo.png" /></a> | |
8 | + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> | |
9 | + <span class="navbar-toggler-icon"></span> | |
10 | + <span class="navbar-toggler-icon"></span> | |
11 | + <span class="navbar-toggler-icon"></span> | |
12 | + </button> | |
13 | + | |
14 | + <div class="collapse navbar-collapse" id="navbarsExample03"> | |
15 | + <ul class="navbar-nav mr-auto"> | |
16 | + <li class="nav-item active"> | |
17 | + <a class="nav-link" href="#">About</a> | |
18 | + </li> | |
19 | + <li class="nav-item"> | |
20 | + <a class="nav-link" href="#">Masterclass</a> | |
21 | + </li> | |
22 | + <li class="nav-item"> | |
23 | + <a class="nav-link" href="#">Stories</a> | |
24 | + </li> | |
25 | + <li class="nav-item spotLight-img"> | |
26 | + <a class="nav-link" href="#"><img src="../assets/images/SPOTLight.svg" /></a> | |
27 | + </li> | |
28 | + <li class="nav-item"> | |
29 | + <a class="nav-link" href="#">Library</a> | |
30 | + </li> | |
31 | + </ul> | |
32 | + </div> | |
33 | + </nav><!-- menu wrapper --> | |
34 | + <div class="row col-reverse"> | |
35 | + <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"> | |
36 | + | |
37 | + </div><!-- users land image --> | |
38 | + <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp"> | |
39 | + <h1>Welcome to <br /> | |
40 | + Productgrowth</h1> | |
41 | + <ul class="sign-in-up-list"> | |
42 | + <li><img src="../assets/images/check.svg" /><span>Connect & learn from fellow product enthusiasts</span></li> | |
43 | + <li><img src="../assets/images/check.svg" /><span>Share & pickup deeper insights from real world products</span></li> | |
44 | + <li><img src="../assets/images/check.svg" /><span>Access to XX Casestudies</span></li> | |
45 | + </ul> | |
46 | + </div><!-- users land image --> | |
47 | + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> | |
48 | +<div class="form-layout signup-frm-spc"> | |
49 | + <form> | |
50 | + | |
51 | + <h5>SignUp Using</h5> | |
52 | + <div class="social-login"> | |
53 | + <ul> | |
54 | + <li><a href="#"><img src="../assets/images/google.svg" /></a></li> | |
55 | + <li><a href="#"><img src="../assets/images/linkdin.svg" /></a></li> | |
56 | + <li><a href="#"><img src="../assets/images/twitter.svg" /></a></li> | |
57 | + </ul> | |
58 | + </div> | |
59 | + <h5>or Signup with email</h5> | |
60 | + <div class="fill-form"> | |
61 | + <label for="inputEmail" class="sr-only">Email address</label> | |
62 | + <input type="email" id="inputEmail" class="form-control" placeholder="Your Email ID" required autofocus> | |
63 | + <label for="inputPassword" class="sr-only">Password</label> | |
64 | + <input type="password" id="inputPassword" class="form-control" placeholder="Password" required> | |
65 | + | |
66 | + <button class="btn btn-lg sb-button" type="submit"><img src="../assets/images/user-plus.svg" /> Create Account</button> | |
67 | + <p class=""> | |
68 | + By signing up I agree to the <a href="#">Privacy Policy</a> and <a href="#">Terms of Service</a> | |
69 | + </p> | |
70 | + <h3>Have an account? <a @click="goToLogin">Login</a></h3> | |
71 | + </div> | |
72 | + </form> | |
73 | +</div> | |
74 | + | |
75 | + </div><!-- sign up --> | |
76 | + </div> | |
77 | + <!-- body wrapper --> | |
78 | + </div> | |
79 | + </main> | |
80 | +</template> | |
81 | + | |
82 | +<script> | |
83 | + | |
84 | +import Vue from "vue"; | |
85 | +import router from "../router"; | |
86 | + | |
87 | +export default { | |
88 | + name: "SignUp", | |
89 | + | |
90 | + data() { | |
91 | + return { | |
92 | + }; | |
93 | + }, | |
94 | + mounted() {}, | |
95 | + methods: { | |
96 | + goToLogin(){ | |
97 | + this.$router.push("/"); | |
98 | + | |
99 | + } | |
100 | + }, | |
101 | +}; | |
102 | +</script> | ... | ... |
src/components/welcome.vue
... | ... | @@ -9,7 +9,7 @@ |
9 | 9 | </p> |
10 | 10 | <router-link class="yellow-btn btn-large" to="/profileWizard"> |
11 | 11 | Get Started |
12 | - <img src="@/assets/img/onboarding/arrow.svg" width="20" /> | |
12 | + <!-- <img src="@/assets/img/onboarding/arrow.svg" width="20" /> --> | |
13 | 13 | </router-link> |
14 | 14 | </div> |
15 | 15 | </div> | ... | ... |
src/router/index.js
... | ... | @@ -2,6 +2,8 @@ import Vue from 'vue' |
2 | 2 | import Router from 'vue-router' |
3 | 3 | import { authGuard } from "../auth/authGuard" |
4 | 4 | import LandingPage from '@/components/LandingPage' |
5 | +import SignUp from '@/components/SignUp' | |
6 | +import Reset from '@/components/Reset' | |
5 | 7 | import welcome from '@/components/welcome' |
6 | 8 | |
7 | 9 | import router from '../router' |
... | ... | @@ -21,6 +23,16 @@ export default new Router({ |
21 | 23 | next() |
22 | 24 | } |
23 | 25 | }, |
26 | + { | |
27 | + path: '/signup', | |
28 | + name: 'SignUp', | |
29 | + component: SignUp, | |
30 | + }, | |
31 | + { | |
32 | + path: '/reset', | |
33 | + name: 'Reset', | |
34 | + component: Reset, | |
35 | + } | |
24 | 36 | |
25 | 37 | ], |
26 | 38 | scrollBehavior(to, from, savedPosition) { | ... | ... |