viithiisys / spotlight-frontend

Download as
Browse Code »

Commit 988b5d20ac45ea29f2884db14119902fc8b82613

Authored by Digvijay Singh
1 parent db67a6d259
Exists in master and in 1 other branch admin

new changes

Showing 86 changed files with 612 additions and 262 deletions   Show diff stats
1 <template> 1 <template>
2 <div id="app"> 2 <div id="app">
3 <router-view /> 3 <router-view />
4 </div> 4 </div>
5 </template> 5 </template>
6 6
7 <script> 7 <script>
8 import "bootstrap/dist/css/bootstrap.min.css"; 8 import "bootstrap/dist/css/bootstrap.min.css";
9 export default { 9 export default {
10 name: "App", 10 name: "App",
11 data() { 11 data() {
12 return { 12 return {
13 }; 13 };
14 }, 14 },
15 mounted() { 15 mounted() {
16 16
17 } 17 }
18 }; 18 };
19 19
20 </script> 20 </script>
21 21
22 <style> 22 <style>
23 @import "assets/css/custom.css"; 23 @import "assets/css/custom.css";
24 @import "assets/fonts/fonts.css";
24 25
25 #row { 26 #row {
26 display: -webkit-box; 27 display: -webkit-box;
27 display: flex; 28 display: flex;
28 -ms-flex-wrap: wrap; 29 -ms-flex-wrap: wrap;
29 flex-wrap: wrap; 30 flex-wrap: wrap;
30 } 31 }
31 </style> 32 </style>
32 33
33 34
src/assets/css/custom.css
Diff comments   View file @988b5d2
1 html, 1 html,
2 body { 2 body {
3 height: 100%; 3 height: 100%;
4 } 4 }
5 5
6 body { 6 body {
7 display: -ms-flexbox; 7 display: -ms-flexbox;
8 display: flex; 8 display: flex;
9 -ms-flex-align: center; 9 -ms-flex-align: center;
10 align-items: center; 10 align-items: center;
11 padding-top: 0px; 11 padding-top: 0px;
12 padding-bottom: 0px; 12 padding-bottom: 0px;
13 background-color:#DFE7EF; 13 background-color:#DFE7EF;
14 } 14 }
15 15
16 /* heading */ 16 /* heading */
17 h1{font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 600; font-size: 48px; line-height: 58px; color: #000000;} 17 h1{font-family: 'Bebas Neue', cursive;font-style: normal; font-weight: 600; font-size: 48px; line-height: 58px; color: #000000;}
18 18
19 /* spaces */ 19 /* spaces */
20 .wc-spc-lf-tp{ padding-top: 262px; padding-left: 40px; } 20 .wc-spc-lf-tp{ padding-top: 262px; padding-left: 40px; }
21 21
22 22
23 .h-100{height: 100%;} 23 .h-100{height: 100%;}
24 .main-wrp{ height: 100%;padding-left: 56px; padding-right: 233px; background-image:url('../images/bg.svg'); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom -10px left -130px; 24 .main-wrp{ height: 100%;padding-left: 56px; padding-right: 233px; background-image:url('../images/bg.svg'); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom -10px left -130px;
25 background-size: 45%;} 25 background-size: 45%;}
26 /* navbar */ 26 /* navbar */
27 .spotLight-nav{ margin-top: 20px;} 27 .spotLight-nav{ margin-top: 20px;}
28 .spotLight-nav li a{font-family: 'Montserrat', sans-serif; 28 .spotLight-nav li a{font-family: 'Montserrat', sans-serif;
29 font-size: 16px; 29 font-size: 16px;
30 font-style: normal; 30 font-style: normal;
31 font-weight: 400; 31 font-weight: 400;
32 line-height: 22px; 32 line-height: 22px;
33 letter-spacing: -0.7470597624778748px; 33 letter-spacing: -0.7470597624778748px;
34 text-align: left; color:#000; opacity: 0.6; 34 text-align: left; color:#000; opacity: 0.6;
35 } 35 }
36 .spotLight-nav li {margin-right: 14px;} 36 .spotLight-nav li {margin-right: 14px;}
37 .spotLight-nav li.active a{font-weight: 600; opacity: 1;} 37 .spotLight-nav li.active a{font-weight: 600; opacity: 1;}
38 .spotLight-nav li.spotLight-img a{opacity: 1;} 38 .spotLight-nav li.spotLight-img a{opacity: 1;}
39 .navbar-brand{ margin-right: 57px;} 39 .navbar-brand{ margin-right: 57px;}
40 40
41 /* ul list style */ 41 /* ul list style */
42 .sign-in-up-list{ width: 325px; list-style-type: none; margin: 0px; padding:0px;font-family: 'Montserrat', sans-serif; 42 .sign-in-up-list{ width: 325px; list-style-type: none; margin: 0px; padding:0px;font-family: 'Montserrat', sans-serif;
43 font-size: 20px; 43 font-size: 20px;
44 font-style: normal; 44 font-style: normal;
45 font-weight: 500; 45 font-weight: 500;
46 line-height: 24px; float: left; margin-top: 24px; } 46 line-height: 24px; float: left; margin-top: 24px; }
47 .sign-in-up-list li{ margin-bottom: 26px;display: flex; color:#000;} 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;} 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;} 49 .sign-in-up-list li span{ float: left;}
50 /* form */ 50 /* form */
51 .form-layout{ width: 100%; display: block; float: left;} 51 .form-layout{ width: 100%; display: block; float: left;}
52 .form-layout form{ display:block; float: left; width: 100%;} 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;} 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; 54 .form-layout .social-login{ display: block; width: 339px;
55 margin: 0 auto; margin-top: 37px; margin-bottom: 37px; } 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;} 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;} 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;} 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 ;} 59 .form-layout .fill-form{ width: 100%; display: block; float: left; margin-top:24px ;}
60 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; 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 62
63 font-family: 'Montserrat', sans-serif; 63 font-family: 'Montserrat', sans-serif;
64 font-size: 13px; 64 font-size: 13px;
65 font-style: normal; 65 font-style: normal;
66 font-weight: 600 !important; margin-bottom:16px;padding:0 18px !important;} 66 font-weight: 600 !important; margin-bottom:16px;padding:0 18px !important;}
67 form input:focus{ box-shadow:0px !important; outline: 0px !important;} 67 form input:focus{ box-shadow:0px !important; outline: 0px !important;}
68 68
69 /* placeholder */ 69 /* placeholder */
70 form input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ 70 form input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
71 line-height: 18px; 71 line-height: 18px;
72 color: #000000; 72 color: #000000;
73 opacity: 0.5; 73 opacity: 0.5;
74 font-family: 'Montserrat', sans-serif; 74 font-family: 'Montserrat', sans-serif;
75 font-size: 13px; 75 font-size: 13px;
76 font-style: normal; 76 font-style: normal;
77 font-weight: 600; 77 font-weight: 600;
78 } 78 }
79 79
80 form input:-ms-input-placeholder { /* Internet Explorer 10-11 */ 80 form input:-ms-input-placeholder { /* Internet Explorer 10-11 */
81 line-height: 18px; 81 line-height: 18px;
82 color: #000000; 82 color: #000000;
83 opacity: 0.5; 83 opacity: 0.5;
84 font-family: 'Montserrat', sans-serif; 84 font-family: 'Montserrat', sans-serif;
85 font-size: 13px; 85 font-size: 13px;
86 font-style: normal; 86 font-style: normal;
87 font-weight: 600; 87 font-weight: 600;
88 } 88 }
89 89
90 form input::-ms-input-placeholder { /* Microsoft Edge */ 90 form input::-ms-input-placeholder { /* Microsoft Edge */
91 line-height: 18px; 91 line-height: 18px;
92 color: #000000; 92 color: #000000;
93 opacity: 0.5; 93 opacity: 0.5;
94 font-family: 'Montserrat', sans-serif; 94 font-family: 'Montserrat', sans-serif;
95 font-size: 13px; 95 font-size: 13px;
96 font-style: normal; 96 font-style: normal;
97 font-weight: 600; 97 font-weight: 600;
98 } 98 }
99 /* placeholder */ 99 /* placeholder */
100 .sb-button{ background: #514DA7; 100 .sb-button{ background: #514DA7;
101 height: 50px; 101 height: 50px;
102 line-height: 35px; 102 line-height: 35px;
103 color: #fff; 103 color: #fff;
104 font-family: 'Montserrat', sans-serif; 104 font-family: 'Montserrat', sans-serif;
105 font-size: 13px; 105 font-size: 13px;
106 font-style: normal; 106 font-style: normal;
107 font-weight: 600; 107 font-weight: 600;
108 width: 100%;} 108 width: 100%;}
109 .sb-button img{ margin-right: 10px;} 109 .sb-button img{ margin-right: 10px;}
110 .sb-button:hover{ color:#fff;} 110 .sb-button:hover{ color:#fff;}
111 .form-layout p{margin-top:17px ;} 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;} 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;} 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;} 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; 115 .form-layout .forget-pass a{font-weight: 700;color: #514DA7 !important; text-decoration: none !important;
116 } 116 }
117 .form-layout p a:hover{ color:#000;} 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;} 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;} 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;} 120 .form-layout.signup-frm-spc{width: 300px; display: block; float: left; margin-top: 214px;}
121 .welcome-hd-back{ 121 .welcome-hd-back{
122 font-family: 'Bebas Neue', cursive; 122 font-family: 'Bebas Neue', cursive;
123 font-style: normal; 123 font-style: normal;
124 font-weight: 600; 124 font-weight: 600;
125 font-size: 106px; 125 font-size: 106px;
126 line-height: 106px; 126 line-height: 106px;
127 color: #000000; 127 color: #000000;
128 } 128 }
129 .form-layout .go-back span{ font-weight: 500 !important;} 129 .form-layout .go-back span{ font-weight: 500 !important;}
130 .reset-pass-spc{ margin-top: 110px;}
130 .reset-pass-spc{ margin-top: 110px;}
131
132 /* profile */
133 .inner-wrp {
134 height: 100%;
135 padding-left: 88px;
136 padding-right: 37px;
137 background:#fff;;
138 font-family: 'Montserrat', sans-serif;
139
140 }
141 .user-profile-photo{width: 32px; height: 32px;}
142 .user-profile-photo a, img{ width: 100%;}
143 .inner-profile-ps{ width: 148px; height: 148px; float: left; display: block;}
144 .inner-wrp h1{ font-weight: 400; font-size:32px; line-height: 40px; color:#000; font-family: 'Montserrat', sans-serif;}
145 .tags{background: #BDDBFF; font-weight: 600; font-size:10px; color: #fff; padding: 2px 8px; border-radius:3px;}
146 .user-profile{ display: block;
147 float: left;
148 margin-left:30px;
149 position: relative;
150 width: 760px;}
151 .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;}
152 .talk-to-me{ width: 100%; display: block; float: left; margin-top:20px;}
153 .talk-to-me span{font-weight: 500; font-size: 14px; line-height: 21px; color: #000; opacity: 0.5; float: left; margin-right:10px;}
154 .talk-to-me ul{ list-style-type: none; margin:0px; padding: 0px; float: left;margin-top:-1px;}
155 .talk-to-me ul li{ display: block; float: left;margin-right:3px;}
156 .talk-to-me ul li a{color:#000; text-decoration: none; font-weight: 500;}
157 .joined-info{ display: block; list-style-type: none; margin: 0px; padding: 0px; font-size: 13px; color:#000; }
158 .joined-info li a{ color:#000; opacity: 0.5;}
159 .joined-info li span{ width: 5px; height: 5px; background-color: #000; float: right; margin: 8px 10px 0 10px; border-radius:100%; opacity: 0.5;}
160 .joined-info li img{ width: 15px; float: right; margin-right: 5px; position: relative; margin-top:2px;}
161 .joined-info li{ float: left;}
162
163 /* list style */
164 .list-style-group{ width: 100%; display: block; float: left;}
165 .list-style-group p{color:#000; opacity: 0.5; letter-spacing: 2px;margin-bottom: 7px; font-size: 14px; text-transform: uppercase; font-weight: 600;}
166 .list-style{list-style-type: none; margin:0px; padding: 0px;}
167 .list-style li{ float: left;}
168 .list-style li a{ display: block; float: left;}
169 .list-style li a img{ width: 48px; display: block; float: left; }
170 .list-spc-top{ margin-top:15px ;}
171
172 /* social connects */
173 .social-connects{ display: block; list-style-type: none; margin: 0px; padding: 0px;}
174 .social-connects li{ float: left; margin-right:0px ;}
175 .social-connects li a{ display: block; float: left; padding: 11px;}
176 .social-connects li a img.twitter{ margin-top:3px;}
177 .social-connects li a.active{background: #f9fafc; width: 40px; height: 40px; border-radius: 5px;}
178 .social-connects li a img{ width: 19px; display: block; float: left;}
179 .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;
180 float: left;}
181 .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;}
182
183 /* profile tab */
184 .profile-tab-spc-top{margin-top:45px ; padding-top: 15px;}
185 .top-brd{border-top: 1px solid #DFE7EF;}
186 .profile-tab{ list-style-type: none; display: block; float: left; margin:0px ; padding: 0px;}
187 .profile-tab li{ float: left; padding-bottom: 10px; margin-right:76px ;}
188 .profile-tab li.active{ border-bottom: 4px solid #ef484f;}
189 .profile-tab li a{font-size: 20px;color:#000; text-decoration: none; font-weight: 400; line-height: 33px; }
190
191 /* profile data wrp */
192 .profile-data-wrp{ background:#dfe7ef; position: absolute; width: 100%; left: 0px;}
193 .data-wrp{padding-left: 88px; padding-right: 37px; padding-bottom: 88px; padding-top: 88px;}
194 .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;}
195 .company-detail{ width: 100%;
196 display: block;
197 float: left;
198 position: relative;
199 margin-top: -63px;
200 margin-bottom: 21px;}
201 .company-detail .c-logo{ width: 82px; display: block; float: left;}
202 .company-detail .c-logo img{ width: 100%;}
203 .company-detail .c-tag img{ width: 100%;}
204 .company-detail .c-tag { width: 89px; display: block; float: right;}
205 .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;}
206 .card-warpper .u-detail{ padding: 7px 0 7px 0; border-bottom:1px solid #a5a5a5; width: 198px; display: block; float: left;}
207 .card-warpper .u-detail img{ display: block; float: left; width: 24px; margin-right:17px;}
208 .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;}
209 .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; }
210 .card-warpper .tags-list{ width: 198px; float: left; display: block; list-style-type: none; margin:0px; padding:0px;}
211 .card-warpper .tags-list li{ float: left; margin-right:9px ; margin-bottom: 9px;}
212 .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;}
213 /* colors */
214 .cape-honey{ background: #fde2a3;}
215 .rose-bud{ background: #fba29a;}
216 .pattens-blue{ background: #ceeced;}
217
218 /* add new card */
219 .add-card-warpper{ width: 283px; background: transparent; border-radius: 4px; padding:23px; height: 356px; float: left; margin-right: 0px; border:2px dashed #fff;}
220 .add-card-warpper a{ display: block;
221 width: 86px;
222 margin: 0 auto;
223 margin-top: 92px;}
224
225 /* New Profile Buttons */
226 .profile-buttons{ width: 261px; display: block; margin:0 auto;}
227 /* button sm */
228 .profile-sm-bt{ width: 180px;
229 height: 54px;
230 border-radius: 5px;
231 border: 1px solid #514DA7;
232 color: #514DA7;
233 font-size: 16px;
234 font-weight: 500;
235 display: block;
236 line-height: 55px;
237 text-align: center;}
238 .profile-sm-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;}
239 /* button md */
240 .profile-md-bt{ width:233px;
241 height: 54px;
242 border-radius: 5px;
243 border: 1px solid #514DA7;
244 color: #514DA7;
245 font-size: 16px;
246 font-weight: 500;
247 display: block;
248 line-height: 55px;
249 text-align: center;}
250 .profile-md-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;}
251 /* button lg */
252 .profile-lg-bt{ width:261px;
253 height: 54px;
254 border-radius: 5px;
255 border: 1px solid #514DA7;
256 color: #514DA7;
257 font-size: 16px;
258 font-weight: 500;
259 display: block;
260 line-height: 55px;
261 text-align: center;}
262 .profile-lg-bt:hover{ background-color:#514DA7; color:#fff; text-decoration: none;}
263 .center-and-spc{ margin:0 auto; margin-bottom:15px;}
264 .bt-active{ background-color:#514DA7; color:#fff; text-decoration: none;}
265 /* Replies */
src/assets/css/media.css
Diff comments   View file @988b5d2
1 1
2 2
3 /* ----------- Non-Retina Screens ----------- */ 3 /* ----------- Non-Retina Screens ----------- */
4 @media screen 4 @media screen
5 and (min-device-width: 1200px) 5 and (min-device-width: 1200px)
6 and (max-device-width: 1400px) 6 and (max-device-width: 1400px)
7 and (-webkit-min-device-pixel-ratio: 1) { 7 and (-webkit-min-device-pixel-ratio: 1) {
8 .wc-spc-lf-tp{ padding-top: 88px; padding-left: 0px; } 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
12 /* ----------- Retina Screens ----------- */ 14 /* ----------- Retina Screens ----------- */
13 @media screen 15 @media screen
14 and (min-device-width: 900px) 16 and (min-device-width: 900px)
15 and (max-device-width: 1440px) 17 and (max-device-width: 1440px)
16 and (-webkit-min-device-pixel-ratio: 1) { 18 and (-webkit-min-device-pixel-ratio: 1) {
17 .wc-spc-lf-tp{ padding-top: 162px; padding-left: 0px; } 19 .wc-spc-lf-tp{ padding-top: 162px; padding-left: 0px; }
18 .form-layout.signup-frm-spc { margin-top: 114px; float:right;} 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
22 @media screen 25 @media screen
23 and (min-device-width: 1050px) 26 and (min-device-width: 1050px)
24 and (max-device-width: 1440px) 27 and (max-device-width: 1440px)
25 and (-webkit-min-device-pixel-ratio: 1) { 28 and (-webkit-min-device-pixel-ratio: 1) {
26 .wc-spc-lf-tp{ padding-top: 162px; padding-left: 0px; } 29 .wc-spc-lf-tp{ padding-top: 162px; padding-left: 0px; }
27 .form-layout.signup-frm-spc { margin-top: 114px;} 30 .form-layout.signup-frm-spc { margin-top: 114px;}
31 .user-profile{padding-right: 90px; width: 675px;}
28 32
29 } 33 }
30 @media screen 34 @media screen
31 and (min-device-width: 768px) 35 and (min-device-width: 768px)
32 and (max-device-width: 1366px) 36 and (max-device-width: 1366px)
33 and (-webkit-min-device-pixel-ratio: 1) { 37 and (-webkit-min-device-pixel-ratio: 1) {
34 .wc-spc-lf-tp{ padding-top: 90px; padding-left: 0px; } 38 .wc-spc-lf-tp{ padding-top: 90px; padding-left: 0px; }
35 .form-layout.signup-frm-spc { margin-top: 41px;} 39 .form-layout.signup-frm-spc { margin-top: 41px;}
40 .user-profile{padding-right: 90px;width: 570px;}
36 41
37 42
38 } 43 }
39 44
40 /* mobile */ 45 /* mobile */
41 /* Portrait and Landscape */ 46 /* Portrait and Landscape */
42 @media only screen 47 @media only screen
43 and (min-device-width: 320px) 48 and (min-device-width: 320px)
44 and (max-device-width: 960px) 49 and (max-device-width: 960px)
45 and (-webkit-min-device-pixel-ratio: 2) { 50 and (-webkit-min-device-pixel-ratio: 2) {
51
52
46 .main-wrp{ padding-left: 15px; padding-right: 15px;} 53 .main-wrp{ padding-left: 15px; padding-right: 15px;}
47 .wc-spc-lf-tp { 54 .wc-spc-lf-tp {
48 padding-top: 52px; 55 padding-top: 52px;
49 padding-left: 28px; 56 padding-left: 28px;
50 padding-bottom:50px; 57 padding-bottom:50px;
51 } 58 }
52 .form-layout.signup-frm-spc{margin-top: 50px; float:unset; margin: 50px auto;} 59 .form-layout.signup-frm-spc{margin-top: 50px; float:unset; margin: 50px auto;}
53 60
54 .navbar-toggler{ padding: 0px; margin-top: -10px; 61 .navbar-toggler{ padding: 0px; margin-top: -10px;
55 width: 40px; 62 width: 40px;
56 height: 40px; 63 height: 40px;
57 float: right; box-shadow: 0px; outline: 0px;} 64 float: right; box-shadow: 0px; outline: 0px;}
58 .navbar-toggler span{ width: 100%; display: block; height: 3px; background:#000; margin:7px 0;} 65 .navbar-toggler span{ width: 100%; display: block; height: 3px; background:#000; margin:7px 0;}
59 66
60 .col-reverse{display: flex; 67 .col-reverse{display: flex;
61 flex-direction: column-reverse;} 68 flex-direction: column-reverse;}
62 .reset-pass-spc { 69 .reset-pass-spc {
63 margin-top: 20px; 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 /* tab */ 87 /* tab */
69 /* Portrait and Landscape */ 88 /* Portrait and Landscape */
70 @media only screen 89 @media only screen
71 and (min-device-width: 1024px) 90 and (min-device-width: 1024px)
72 and (max-device-width: 1366px) 91 and (max-device-width: 1366px)
73 and (-webkit-min-device-pixel-ratio: 2) { 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 }
78 @media only screen 98 @media only screen
79 and (min-device-width: 1024px) 99 and (min-device-width: 1024px)
80 and (max-device-width: 1024px) 100 and (max-device-width: 1024px)
81 and (orientation: portrait) 101 and (orientation: portrait)
82 and (-webkit-min-device-pixel-ratio: 2) { 102 and (-webkit-min-device-pixel-ratio: 2) {
83 103
84 } 104 }
85 /* / 105 /* /
86 106
87 /* Portrait */ 107 /* Portrait */
88 @media only screen 108 @media only screen
89 and (min-device-width: 768px) 109 and (min-device-width: 768px)
90 and (max-device-width: 1024px) 110 and (max-device-width: 1024px)
91 and (orientation: portrait) 111 and (orientation: portrait)
92 and (-webkit-min-device-pixel-ratio: 1) { 112 and (-webkit-min-device-pixel-ratio: 1) {
93 .col-reverse{ 113 .col-reverse{
94 flex-direction:unset;} 114 flex-direction:unset;}
95 .main-wrp{background-size: 100%; background-position: bottom -10px left -130px;} 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 /* Portrait and Landscape */ 122 /* Portrait and Landscape */
99 @media only screen 123 @media only screen
100 and (min-device-width: 768px) 124 and (min-device-width: 768px)
101 and (max-device-width: 1024px) 125 and (max-device-width: 1024px)
102 and (-webkit-min-device-pixel-ratio: 1) { 126 and (-webkit-min-device-pixel-ratio: 1) {
103 .main-wrp{background-position: bottom -10px left -130px !important;} 127 .main-wrp{background-position: bottom -10px left -130px !important;}
104 .wc-spc-lf-tp{ padding-left: 0px; padding-top: 100px;} 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
107 134
src/assets/css/style.css
View file @db67a6d
1 html, File was deleted
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;}
src/assets/css/tagsinput.css
View file @db67a6d
1 /* The input */ File was deleted
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 }
src/assets/fonts/BebasNeue.woff
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/BebasNeue.woff2
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/BebasNeueBold.woff
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/BebasNeueBold.woff2
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/BebasNeueRegular.woff
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/BebasNeueRegular.woff2
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-Black.woff
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-Black.woff2
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-BlackItalic.woff
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-BlackItalic.woff2
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-Bold.woff
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-Bold.woff2
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-BoldItalic.woff
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-BoldItalic.woff2
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-ExtraBold.woff
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-ExtraBold.woff2
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-ExtraBoldItalic.woff
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-ExtraBoldItalic.woff2
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-ExtraLight.woff
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-ExtraLight.woff2
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-ExtraLightItalic.woff
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-ExtraLightItalic.woff2
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-Italic.woff
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-Italic.woff2
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-Light.woff
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-Light.woff2
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-LightItalic.woff
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-LightItalic.woff2
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-Medium.woff
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-Medium.woff2
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-MediumItalic.woff
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-MediumItalic.woff2
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-Regular.woff
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-Regular.woff2
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-SemiBold.woff
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-SemiBold.woff2
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-SemiBoldItalic.woff
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-SemiBoldItalic.woff2
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-Thin.woff
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-Thin.woff2
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-ThinItalic.woff
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/Montserrat-ThinItalic.woff2
Diff comments   View file @988b5d2
No preview for this file type
src/assets/fonts/fonts.css
Diff comments   View file @988b5d2
File was created 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
191
src/assets/fonts/montserrat-bold-webfont.woff
View file @db67a6d
No preview for this file type
src/assets/fonts/montserrat-bold-webfont.woff2
View file @db67a6d
No preview for this file type
src/assets/fonts/montserrat-medium-webfont.woff
View file @db67a6d
No preview for this file type
src/assets/fonts/montserrat-medium-webfont.woff2
View file @db67a6d
No preview for this file type
src/assets/fonts/montserrat-regular-webfont.woff
View file @db67a6d
No preview for this file type
src/assets/fonts/montserrat-regular-webfont.woff2
View file @db67a6d
No preview for this file type
src/assets/fonts/montserrat-semibold-webfont.woff
View file @db67a6d
No preview for this file type
src/assets/fonts/montserrat-semibold-webfont.woff2
View file @db67a6d
No preview for this file type
src/assets/fonts/worksans-bold-webfont.woff
View file @db67a6d
No preview for this file type
src/assets/fonts/worksans-bold-webfont.woff2
View file @db67a6d
No preview for this file type
src/assets/fonts/worksans-regular-webfont.woff
View file @db67a6d
No preview for this file type
src/assets/fonts/worksans-regular-webfont.woff2
View file @db67a6d
No preview for this file type
src/assets/fonts/worksans-semibold-webfont.woff
View file @db67a6d
No preview for this file type
src/assets/fonts/worksans-semibold-webfont.woff2
View file @db67a6d
No preview for this file type
src/assets/images/add-new.png
Diff comments   View file @988b5d2

1.82 KB
src/assets/images/behance1.png
Diff comments   View file @988b5d2

649 Bytes
src/assets/images/c-tag.png
Diff comments   View file @988b5d2

3.46 KB
src/assets/images/card-bg.png
Diff comments   View file @988b5d2

214 Bytes
src/assets/images/icon-1.png
Diff comments   View file @988b5d2

3.75 KB
src/assets/images/icon-2.png
Diff comments   View file @988b5d2

3.78 KB
src/assets/images/icon-3.png
Diff comments   View file @988b5d2

3.91 KB
src/assets/images/icon-4.png
Diff comments   View file @988b5d2

3.62 KB
src/assets/images/icon-5.png
Diff comments   View file @988b5d2

3.84 KB
src/assets/images/icon-6.png
Diff comments   View file @988b5d2

1.85 KB
src/assets/images/image 46.png
Diff comments   View file @988b5d2

2.26 KB
src/assets/images/linkedin.png
Diff comments   View file @988b5d2

363 Bytes
src/assets/images/medium1.png
Diff comments   View file @988b5d2

468 Bytes
src/assets/images/phone-pay.png
Diff comments   View file @988b5d2

1.61 KB
src/assets/images/plus.png
Diff comments   View file @988b5d2

267 Bytes
src/assets/images/twitter.png
Diff comments   View file @988b5d2

462 Bytes
src/assets/images/u-info-icon.png
Diff comments   View file @988b5d2

3.45 KB
src/assets/images/user-2.png
Diff comments   View file @988b5d2

1.6 KB
src/assets/images/user.png
Diff comments   View file @988b5d2

11.2 KB
src/components/LandingPage.vue
Diff comments   View file @988b5d2
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 <div class="container-fluid main-wrp"> 3 <div class="container-fluid main-wrp">
4 <nav class="navbar navbar-expand-sm spotLight-nav"> 4 <nav class="navbar navbar-expand-sm spotLight-nav">
5 <a class="navbar-brand" href="#" 5 <a class="navbar-brand" href="#"
6 ><img src="../assets/images/logo.png" 6 ><img src="../assets/images/logo.png"
7 /></a> 7 /></a>
8 <button 8 <button
9 class="navbar-toggler" 9 class="navbar-toggler"
10 type="button" 10 type="button"
11 data-toggle="collapse" 11 data-toggle="collapse"
12 data-target="#navbarsExample03" 12 data-target="#navbarsExample03"
13 aria-controls="navbarsExample03" 13 aria-controls="navbarsExample03"
14 aria-expanded="false" 14 aria-expanded="false"
15 aria-label="Toggle navigation" 15 aria-label="Toggle navigation"
16 > 16 >
17 <span class="navbar-toggler-icon"></span> 17 <span class="navbar-toggler-icon"></span>
18 <span class="navbar-toggler-icon"></span> 18 <span class="navbar-toggler-icon"></span>
19 <span class="navbar-toggler-icon"></span> 19 <span class="navbar-toggler-icon"></span>
20 </button> 20 </button>
21 21
22 <div class="collapse navbar-collapse" id="navbarsExample03"> 22 <div class="collapse navbar-collapse" id="navbarsExample03">
23 <ul class="navbar-nav mr-auto"> 23 <ul class="navbar-nav mr-auto">
24 <li class="nav-item active"> 24 <li class="nav-item active">
25 <a class="nav-link" href="#">About</a> 25 <a class="nav-link" href="#">About</a>
26 </li> 26 </li>
27 <li class="nav-item"> 27 <li class="nav-item">
28 <a class="nav-link" href="#">Masterclass</a> 28 <a class="nav-link" href="#">Masterclass</a>
29 </li> 29 </li>
30 <li class="nav-item"> 30 <li class="nav-item">
31 <a class="nav-link" href="#">Stories</a> 31 <a class="nav-link" href="#">Stories</a>
32 </li> 32 </li>
33 <li class="nav-item spotLight-img"> 33 <li class="nav-item spotLight-img">
34 <a class="nav-link" href="#" 34 <a class="nav-link" href="#"
35 ><img src="../assets/images/SPOTLight.svg" 35 ><img src="../assets/images/SPOTLight.svg"
36 /></a> 36 /></a>
37 </li> 37 </li>
38 <li class="nav-item"> 38 <li class="nav-item">
39 <a class="nav-link" href="#">Library</a> 39 <a class="nav-link" href="#">Library</a>
40 </li> 40 </li>
41 </ul> 41 </ul>
42 </div> 42 </div>
43 </nav> 43 </nav>
44 <!-- menu wrapper --> 44 <!-- menu wrapper -->
45 <div class="row col-reverse"> 45 <div class="row col-reverse">
46 <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div> 46 <div class="col-sm-3 col-md-1 col-lg-1 col-xl-3"></div>
47 <!-- users land image --> 47 <!-- users land image -->
48 <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp"> 48 <div class="col-sm-5 col-md-6 col-lg-7 col-xl-4 wc-spc-lf-tp">
49 <h1 class="welcome-hd-back"> 49 <h1 class="welcome-hd-back">
50 Welcome <br /> 50 Welcome <br />
51 back 51 back
52 </h1> 52 </h1>
53 </div> 53 </div>
54 <!-- users land image --> 54 <!-- users land image -->
55 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 55 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
56 <div class="form-layout signup-frm-spc"> 56 <div class="form-layout signup-frm-spc">
57 <form> 57 <form>
58 <h5>LogIn using</h5> 58 <h5>LogIn using</h5>
59 <div class="social-login"> 59 <div class="social-login">
60 <ul> 60 <ul>
61 <li> 61 <li>
62 <a href="#"><img src="../assets/images/google.svg" /></a> 62 <a href="#"><img src="../assets/images/google.svg" /></a>
63 </li> 63 </li>
64 <li> 64 <li>
65 <a href="#"><img src="../assets/images/linkdin.svg" /></a> 65 <a href="#"><img src="../assets/images/linkdin.svg" /></a>
66 </li> 66 </li>
67 <li> 67 <li>
68 <a href="#"><img src="../assets/images/twitter.svg" /></a> 68 <a href="#"><img src="../assets/images/twitter.svg" /></a>
69 </li> 69 </li>
70 </ul> 70 </ul>
71 </div> 71 </div>
72 <h5>or LogIn with email</h5> 72 <h5>or LogIn with email</h5>
73 <div class="fill-form"> 73 <div class="fill-form">
74 <label for="inputEmail" class="sr-only">Email address</label> 74 <label for="inputEmail" class="sr-only">Email address</label>
75 <input 75 <input
76 type="email" 76 type="email"
77 id="inputEmail" 77 id="inputEmail"
78 class="form-control" 78 class="form-control"
79 placeholder="Your Email ID" 79 placeholder="Your Email ID"
80 required 80 required
81 autofocus 81 autofocus
82 /> 82 />
83 <label for="inputPassword" class="sr-only">Password</label> 83 <label for="inputPassword" class="sr-only">Password</label>
84 <input 84 <input
85 type="password" 85 type="password"
86 id="inputPassword" 86 id="inputPassword"
87 class="form-control" 87 class="form-control"
88 placeholder="Password" 88 placeholder="Password"
89 required 89 required
90 /> 90 />
91 91
92 <button class="btn btn-lg sb-button" type="submit"> 92 <button class="btn btn-lg sb-button" type="submit">
93 <img src="../assets/images/key.svg" /> Log In to your account 93 <img src="../assets/images/key.svg" /> Log In to your account
94 </button> 94 </button>
95 <p class="forget-pass"> 95 <p class="forget-pass">
96 Forgot Password? <a href="#">Reset</a> 96 Forgot Password? <a @click="goToReset">Reset</a>
97 </p> 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 </div> 99 </div>
100 </form> 100 </form>
101 </div> 101 </div>
102 </div> 102 </div>
103 <!-- sign up --> 103 <!-- sign up -->
104 </div> 104 </div>
105 <!-- body wrapper --> 105 <!-- body wrapper -->
106 </div> 106 </div>
107 </main> 107 </main>
108 </template> 108 </template>
109 109
110 <script> 110 <script>
111 111
112 import Vue from "vue"; 112 import Vue from "vue";
113 import router from "../router"; 113 import router from "../router";
114 import $ from "jquery"; 114 import $ from "jquery";
115 115
116 export default { 116 export default {
117 name: "LandingPage", 117 name: "LandingPage",
118 118
119 data() { 119 data() {
120 return { 120 return {
121 loggedinFlag: false, 121 loggedinFlag: false,
122 }; 122 };
123 }, 123 },
124 mounted() {}, 124 mounted() {},
125 methods: { 125 methods: {
126 login() {}, 126 login() {},
127 goToSignUp(){
128 this.$router.push("/signup");
129 },
130 goToReset() {
131 this.$router.push("/reset");
132 },
127 }, 133 },
128 }; 134 };
129 </script> 135 </script>
130 136
src/components/Reset.vue
Diff comments   View file @988b5d2
File was created 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>
132
src/components/SignUp.vue
Diff comments   View file @988b5d2
File was created 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>
103
src/components/welcome.vue
Diff comments   View file @988b5d2
1 <template> 1 <template>
2 <div class="component-card-section text-center full-height"> 2 <div class="component-card-section text-center full-height">
3 <div class="row h-100 mr-0 ml-0"> 3 <div class="row h-100 mr-0 ml-0">
4 <div class="col-sm-12 my-auto welcome-content"> 4 <div class="col-sm-12 my-auto welcome-content">
5 <h3 class="mb-4">Welcome to Gigs For Me</h3> 5 <h3 class="mb-4">Welcome to Gigs For Me</h3>
6 <p class="mb-5"> 6 <p class="mb-5">
7 Before we recommend the right gigs, 7 Before we recommend the right gigs,
8 <br />we need some information 8 <br />we need some information
9 </p> 9 </p>
10 <router-link class="yellow-btn btn-large" to="/profileWizard"> 10 <router-link class="yellow-btn btn-large" to="/profileWizard">
11 Get Started 11 Get Started
12 <img src="@/assets/img/onboarding/arrow.svg" width="20" /> 12 <!-- <img src="@/assets/img/onboarding/arrow.svg" width="20" /> -->
13 </router-link> 13 </router-link>
14 </div> 14 </div>
15 </div> 15 </div>
16 </div> 16 </div>
17 </template> 17 </template>
18 18
src/router/index.js
Diff comments   View file @988b5d2
1 import Vue from 'vue' 1 import Vue from 'vue'
2 import Router from 'vue-router' 2 import Router from 'vue-router'
3 import { authGuard } from "../auth/authGuard" 3 import { authGuard } from "../auth/authGuard"
4 import LandingPage from '@/components/LandingPage' 4 import LandingPage from '@/components/LandingPage'
5 import SignUp from '@/components/SignUp'
6 import Reset from '@/components/Reset'
5 import welcome from '@/components/welcome' 7 import welcome from '@/components/welcome'
6 8
7 import router from '../router' 9 import router from '../router'
8 Vue.use(Router) 10 Vue.use(Router)
9 11
10 export default new Router({ 12 export default new Router({
11 mode: 'history', 13 mode: 'history',
12 routes: [{ 14 routes: [{
13 path: '/', 15 path: '/',
14 name: 'LandingPage', 16 name: 'LandingPage',
15 component: LandingPage, 17 component: LandingPage,
16 beforeEnter: function(to, from, next) { 18 beforeEnter: function(to, from, next) {
17 var userdata = localStorage.getItem('gigs_usertoken') 19 var userdata = localStorage.getItem('gigs_usertoken')
18 if (userdata) { 20 if (userdata) {
19 router.push({ name: 'Welcome' }) 21 router.push({ name: 'Welcome' })
20 } 22 }
21 next() 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 scrollBehavior(to, from, savedPosition) { 38 scrollBehavior(to, from, savedPosition) {
27 this.seen = false 39 this.seen = false
28 return { x: 0, y: 0 } 40 return { x: 0, y: 0 }
29 } 41 }
30 }) 42 })