Enter your Name, Github Link & Your E-Mail Address in the given format. Don't try to change anything else!!!
6 | Make sure you have updated your Name, Github link & E-Mail Id (enter your e-mail just after mailto:)!!!
11 |
57 |
Our Contributors
58 |
THANKS TO ALL CONTRIBUTORS, JOIN US
59 |
60 |
61 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
--------------------------------------------------------------------------------
/css/style.scss:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500;600;700;800;900&family=Rambla:wght@400;700&display=swap');
2 |
3 | // Reset
4 | a {
5 | text-decoration: none;
6 | color: white !important;
7 | }
8 |
9 | p,
10 | h1,
11 | h2,
12 | h3,
13 | h4,
14 | h5,
15 | h6 {
16 | margin: 0;
17 | padding: 0;
18 | }
19 |
20 | ul,
21 | li {
22 | margin: 0;
23 | padding: 0;
24 | list-style: none;
25 | }
26 |
27 | img {
28 | max-width: 100%;
29 | }
30 |
31 | body {
32 | background-color: #272727;
33 | color: #fff;
34 | font-family: rambla;
35 | font-size: 16px;
36 | overflow: auto;
37 | }
38 |
39 | .alert .alert-black {
40 | z-index: 999;
41 | }
42 |
43 | // Unlock Lock css
44 | .hide {
45 | visibility: hidden;
46 | }
47 |
48 | .lock {
49 | z-index: 9999;
50 | position: fixed;
51 | bottom: 20px;
52 | left: 50px;
53 | cursor: pointer !important;
54 | }
55 |
56 | // box-shadow: rgb(194, 202, 214) 0px 0.2em, rgb(194, 202, 214) 0px -0.2em, rgb(194, 202, 214) 0.2em 0px, rgb(194, 202, 214) -0.2em 0px;
57 |
58 | .lockUnlock {
59 | z-index: 99999;
60 | width: 100vw;
61 | height: 100vh;
62 | position: fixed;
63 | display: flex;
64 | align-items: center;
65 | background: linear-gradient(0deg, rgba(30, 255, 0, 0.3), rgba(17, 16, 17, 0.3)), url(assets/images/wallpaper2you_205177.gif);
66 | background-size: cover;
67 | opacity: 1;
68 |
69 | .unlockContent {
70 | justify-content: center;
71 | color: #fff;
72 | width: 400px;
73 |
74 | input,
75 | button {
76 | width: 100%;
77 | }
78 |
79 | input {
80 | padding: 10px 20px;
81 | border: 2px solid black;
82 | border-radius: 10px;
83 | outline: none;
84 | color: #272727;
85 | }
86 |
87 | button {
88 | color: white;
89 | border: none;
90 | outline: none;
91 | background: #000;
92 | padding: 10px 0;
93 | border-radius: 10px;
94 | border: 1px solid #fff;
95 | transition: background-color 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
96 |
97 | &:hover {
98 | color: #000;
99 | background-color: #fff;
100 | border-color: #000;
101 | }
102 | }
103 | }
104 | }
105 |
106 |
107 |
108 | .header-section {
109 | background-color: #000;
110 | box-shadow: 0 1px 10px 4px #424242;
111 | }
112 |
113 | .header {
114 | padding: 15px 0;
115 | display: flex;
116 | justify-content: space-between;
117 | align-items: center;
118 |
119 | a {
120 | // background-color: #000;
121 | border-radius: 5px;
122 | transition: background 1s ease-in-out;
123 |
124 | .logo_style {
125 | box-sizing: border-box;
126 | border-radius: 5px;
127 | border: 1px solid #fff;
128 | font-size: 1.5rem;
129 |
130 | .logoDevv {
131 | background-color: #fff;
132 | padding: 4px 10px;
133 | color: #000;
134 | border-radius: 5px;
135 | margin-left: -2px;
136 | }
137 |
138 | .logoSakib {
139 | padding: 4px 10px 4px 15px;
140 | font-size: 1.5rem;
141 | border-radius: 3px;
142 | margin-left: -13px;
143 | }
144 | }
145 |
146 | &:hover {
147 | .logoDevv {
148 | box-sizing: border-box;
149 | -webkit-box-sizing: border-box;
150 | background: #000;
151 | color: #fff;
152 | transition: 400ms ease-in-out;
153 | }
154 |
155 | .logo_style {
156 | border-color: #000;
157 | background: #fff;
158 | transition: 400ms ease-in-out;
159 | }
160 |
161 | .logoSakib {
162 | transition: 400ms ease-in-out;
163 |
164 | color: #000;
165 | }
166 | }
167 | }
168 |
169 | .menuContainer {
170 | width: 225px;
171 |
172 | ul {
173 | display: flex;
174 | justify-content: space-between;
175 |
176 | li {
177 | a {
178 | text-transform: uppercase;
179 | }
180 | }
181 | }
182 | }
183 | }
184 |
185 |
186 | .hero-section {
187 | height: calc(100vh - 67.83px);
188 | position: relative;
189 | overflow-x: hidden;
190 |
191 | .hero-title {
192 | font-weight: bold;
193 | font-size: 120px;
194 | }
195 |
196 | .hero-subtitle {
197 | font-size: 4rem;
198 | }
199 |
200 | .hero-image {
201 | img {
202 | width: 100%;
203 | }
204 | }
205 |
206 | .fixed-img {
207 | position: absolute;
208 | width: 100px;
209 | height: auto;
210 | }
211 |
212 | .git {
213 | width: 70px;
214 | top: 50px;
215 | left: 15px;
216 | animation: fixed-img 2s linear infinite alternate;
217 | }
218 |
219 | .vue {
220 | top: 50px;
221 | width: 40px;
222 | transform: translateY(20px) rotate(50deg);
223 | left: 350px;
224 | animation: fixed-img-up-down 2s forwards infinite alternate;
225 | }
226 |
227 | .github {
228 | top: 230px;
229 | width: 40px;
230 | transform: translateY(0px);
231 | left: 250px;
232 | animation: fixed-img-up-down 2s linear infinite alternate;
233 | animation-delay: 400ms;
234 | }
235 |
236 | .bigImg,
237 | .backendImg {
238 | top: 400px;
239 | opacity: .5;
240 | width: 150px;
241 | transform: translateY(0px);
242 | left: 50%;
243 | animation: fixed-img 2s backwards infinite alternate;
244 | animation-delay: 400ms;
245 | }
246 |
247 | .backendImg {
248 | top: 420px;
249 | left: 35%;
250 | }
251 |
252 | .downArrow {
253 | position: absolute;
254 | bottom: 1rem;
255 | left: 50%;
256 | right: 50%;
257 | animation: upDown 600ms linear infinite alternate;
258 |
259 | i {
260 | font-size: 1.3rem;
261 | }
262 | }
263 |
264 | @keyframes upDown {
265 | from {
266 | transform: translateY(0px);
267 | }
268 |
269 | to {
270 | transform: translateY(10px);
271 | }
272 | }
273 | }
274 |
275 |
276 | @keyframes fixed-img {
277 | 0% {
278 | transform: translateY(0);
279 | }
280 |
281 | 100% {
282 | transform: translateY(30px);
283 | }
284 | }
285 |
286 | @keyframes fixed-img-up-down {
287 | 0% {
288 | transform: translateY(0) rotate(20deg);
289 |
290 | }
291 |
292 | 100% {
293 | transform: translateX(30px) rotate(0deg);
294 | }
295 | }
296 |
297 | .alert-dismissible {
298 | margin-bottom: -5px;
299 | }
300 | .alert-dismissible {
301 | margin-bottom: -5px;
302 | }
303 |
304 | @media (max-width: 840px) {
305 | .hero-section {
306 | margin-top: -40px;
307 |
308 | .hero-title {
309 | font-size: 5rem;
310 | }
311 |
312 | .hero-subtitle {
313 | font-size: 3rem;
314 | }
315 |
316 | .hero-tagline {
317 | font-size: .8rem;
318 | }
319 |
320 | .bigImg,
321 | .backendImg {
322 | margin-top: 40px;
323 | }
324 |
325 | .backendImg {
326 | margin-left: -60px;
327 | }
328 |
329 | }
330 | }
331 | @media (max-width: 600px) {
332 | .hero-section {
333 | margin-top: -40px;
334 |
335 | .hero-title {
336 | font-size: 4rem;
337 | }
338 |
339 | .hero-subtitle {
340 | font-size: 1.4rem;
341 | }
342 |
343 | .hero-tagline {
344 | font-size: .8rem;
345 | }
346 | }
347 | }
348 | @media (max-width: 465px) {
349 | .hero-section {
350 | .forMd {
351 | display: flex;
352 | flex-direction: column;
353 | justify-content: center;
354 | align-items: center;
355 | margin-left: -100px;
356 | }
357 |
358 | .hero-title {
359 | font-size: 4rem;
360 | }
361 |
362 | .hero-subtitle {
363 | font-size: 1.5rem;
364 | }
365 |
366 | .hero-tagline {
367 | font-size: .8rem;
368 | }
369 |
370 | .hero-image {
371 | margin-top: 40px;
372 | width: 80vw;
373 | }
374 |
375 | .git {
376 | top: 80px;
377 | }
378 |
379 | .github {
380 | top: 200px;
381 | }
382 |
383 | .vue {
384 | left: 200px;
385 | }
386 |
387 | .bigImg,
388 | .backendImg {
389 | display: none;
390 | }
391 |
392 | }
393 | }
394 | @media (max-width: 360px) {
395 | .header {
396 | padding: 15px 0;
397 | display: flex;
398 | justify-content: space-between;
399 | align-items: center;
400 | flex-direction: column;
401 |
402 | .logo_style {
403 | margin-bottom: 10px;
404 | }
405 | }
406 |
407 | .hero-section {
408 | margin-top: -60px;
409 |
410 | .forMd {
411 | display: flex;
412 | flex-direction: column;
413 | justify-content: center;
414 | align-items: center;
415 | margin-left: -100px;
416 | }
417 |
418 | .hero-title {
419 | font-size: 4rem;
420 | }
421 |
422 | .hero-subtitle {
423 | font-size: 1.5rem;
424 | }
425 |
426 | .hero-tagline {
427 | font-size: .8rem;
428 | }
429 |
430 | .hero-image {
431 | margin-top: 40px;
432 | width: 80vw;
433 | }
434 |
435 | .git {
436 | top: 80px;
437 | }
438 |
439 | .github {
440 | top: 200px;
441 | }
442 |
443 | .vue {
444 | left: 200px;
445 | }
446 |
447 | .bigImg,
448 | .backendImg {
449 | display: none;
450 | }
451 |
452 | }
453 | }
454 |
455 | @media (max-width: 275px) {
456 | .header {
457 | padding: 15px 0;
458 | display: flex;
459 | justify-content: space-between;
460 | align-items: center;
461 | flex-direction: column;
462 |
463 | .logo_style {
464 | margin-bottom: 10px;
465 | }
466 | }
467 | .hero-section {
468 | margin-top: -40px;
469 | text-align: center;
470 | width: 100vw;
471 | .forMd{
472 | margin: 0 auto;
473 | }
474 | .col-6{
475 | width: 100vw;
476 | padding: 0;
477 | }
478 | .hero-title {
479 | margin-left: -50px !important;
480 | font-size: 20vw;
481 | }
482 | .hero-subtitle{
483 | font-size: 12vw;
484 | margin-left: -50px !important;
485 | }
486 | .hero-tagline{
487 | margin-left: -50px !important;
488 | font-size: 7vw;
489 | }
490 | }
491 |
492 |
493 | }
494 | // Footer section design
495 | .footer-section{
496 | footer{
497 | padding: 10px;
498 | text-align: center;
499 | background-color: #414040;
500 | }
501 | }
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500;600;700;800;900&family=Rambla:wght@400;700&display=swap");
2 | a {
3 | text-decoration: none;
4 | color: white !important;
5 | }
6 |
7 | p,
8 | h1,
9 | h2,
10 | h3,
11 | h4,
12 | h5,
13 | h6 {
14 | margin: 0;
15 | padding: 0;
16 | }
17 |
18 | ul,
19 | li {
20 | margin: 0;
21 | padding: 0;
22 | list-style: none;
23 | }
24 |
25 | img {
26 | max-width: 100%;
27 | }
28 |
29 | body {
30 | background-color: #272727;
31 | color: #fff;
32 | font-family: rambla;
33 | font-size: 16px;
34 | overflow: auto;
35 | }
36 |
37 | .alert .alert-black {
38 | z-index: 999;
39 | }
40 |
41 | .hide {
42 | visibility: hidden;
43 | }
44 |
45 | .lock {
46 | z-index: 9999;
47 | position: fixed;
48 | bottom: 20px;
49 | left: 50px;
50 | cursor: pointer !important;
51 | padding: 6px 12px;
52 | background-color:rgb(36, 36, 36);
53 | border: 1px solid rgba(212, 212, 212, 0.881);
54 | border-radius: 7px;
55 | box-shadow: inset 0 0 4px .3px rgba(165, 165, 165, 0.5)
56 | , 0 0 4px .3px rgba(165, 165, 165, 0.5);
57 | }
58 |
59 | .lock:hover{
60 | background-color: #fff;
61 | color: #000;
62 | box-shadow: inset 0 0 4px .3px rgba(0, 0, 0, 0.5)
63 | , 0 0 4px .3px rgba(0, 0, 0, 0.5);
64 |
65 | }
66 |
67 | .lockUnlock {
68 | z-index: 99999;
69 | width: 100vw;
70 | height: 100vh;
71 | position: fixed;
72 | display: flex;
73 | align-items: center;
74 | background: linear-gradient(0deg, rgba(30, 255, 0, 0.3), rgba(17, 16, 17, 0.3)), url(assets/images/wallpaper2you_205177.gif);
75 | background-size: cover;
76 | opacity: 1;
77 | }
78 | .lockUnlock .unlockContent {
79 | justify-content: center;
80 | color: #fff;
81 | width: 400px;
82 | }
83 | .lockUnlock .unlockContent input,
84 | .lockUnlock .unlockContent button {
85 | width: 100%;
86 | }
87 | .lockUnlock .unlockContent input {
88 | padding: 10px 20px;
89 | border: 2px solid black;
90 | border-radius: 10px;
91 | outline: none;
92 | color: #272727;
93 | }
94 |
95 | .lockUnlock img:hover{
96 | -webkit-animation:spin 2s linear infinite;
97 | -moz-animation:spin 2s linear infinite;
98 | animation:spin 4s linear infinite;
99 | }
100 |
101 | @-moz-keyframes spin {
102 | 0% { transform: translateX(0);}
103 | 25% {transform: translateX(75px);}
104 | 50% {transform: translateX(0);}
105 | 75% {transform: translateX(-75px);}
106 | 100% {transform: translateX(0);}
107 |
108 | }
109 | @-webkit-keyframes spin {
110 | 0% { transform: translateX(0);}
111 | 25% {transform: translateX(75px);}
112 | 50% {transform: translateX(0);}
113 | 75% {transform: translateX(-75px);}
114 | 100% {transform: translateX(0);}
115 | }
116 |
117 | @keyframes spin {
118 | 0% { transform: translateX(0);}
119 | 25% {transform: translateX(75px);}
120 | 50% {transform: translateX(0);}
121 | 75% {transform: translateX(-75px);}
122 | 100% {transform: translateX(0);}
123 |
124 | }
125 |
126 |
127 | .lockUnlock .unlockContent button {
128 | color: white;
129 | border: none;
130 | outline: none;
131 | background: #000;
132 | padding: 10px 0;
133 | border-radius: 10px;
134 | border: 1px solid #fff;
135 | transition: background-color 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
136 | }
137 | .lockUnlock .unlockContent button:hover {
138 | color: #000;
139 | background-color: #fff;
140 | border-color: #000;
141 | }
142 |
143 | .header-section {
144 | background-color: #000;
145 | box-shadow: 0 1px 10px 4px #424242;
146 | }
147 |
148 | .header {
149 | padding: 15px 0;
150 | display: flex;
151 | justify-content: space-between;
152 | align-items: center;
153 | }
154 | .header a {
155 | border-radius: 5px;
156 | transition: background 1s ease-in-out;
157 | }
158 | .header a .logo_style {
159 | box-sizing: border-box;
160 | border-radius: 5px;
161 | border: 1px solid #fff;
162 | font-size: 1.5rem;
163 | }
164 | .header a .logo_style .logoDevv {
165 | background-color: #fff;
166 | padding: 4px 10px;
167 | color: #000;
168 | border-radius: 5px;
169 | margin-left: -2px;
170 | }
171 | .header a .logo_style .logoSakib {
172 | padding: 4px 10px 4px 15px;
173 | font-size: 1.5rem;
174 | border-radius: 3px;
175 | margin-left: -13px;
176 | }
177 | .header a:hover .logoDevv {
178 | box-sizing: border-box;
179 | -webkit-box-sizing: border-box;
180 | background: #000;
181 | color: #fff;
182 | transition: 400ms ease-in-out;
183 | }
184 | .header a:hover .logo_style {
185 | border-color: #000;
186 | background: #fff;
187 | transition: 400ms ease-in-out;
188 | }
189 | .header a:hover .logoSakib {
190 | transition: 400ms ease-in-out;
191 | color: #000;
192 | }
193 | .header .menuContainer {
194 | width: 225px;
195 | }
196 | .header .menuContainer ul {
197 | display: flex;
198 | justify-content: space-between;
199 | }
200 | .header .menuContainer ul li a {
201 | text-transform: uppercase;
202 | }
203 |
204 | /* sticky navbar */
205 | .sticky-nav{
206 | position: fixed;
207 | top: 25px;
208 | width: 35% !important;
209 | left: 50%;
210 | transform: translate(-50%,-50%);
211 | background-color: rgb(0, 0, 0);
212 | padding: 15px;
213 | z-index: 1;
214 | border-bottom-left-radius: 30px;
215 | border-bottom-right-radius: 30px;
216 | border: 1px solid rgba(212, 212, 212, 0.881);
217 | box-shadow: inset 0 0 4px 0.3px rgb(165 165 165 / 50%), 0 0 4px 0.3px rgb(165 165 165 / 50%);
218 | transition: width 1s;
219 | }
220 | /* sticky navbar end */
221 | .hero-section {
222 | height: calc(100vh - 67.83px);
223 | position: relative;
224 | overflow-x: hidden;
225 | }
226 | .hero-section .hero-title {
227 | font-weight: bold;
228 | font-size: 120px;
229 | }
230 | .hero-section .hero-subtitle {
231 | font-size: 4rem;
232 | }
233 | .hero-section .hero-image img {
234 | width: 100%;
235 | }
236 | .hero-section .fixed-img {
237 | position: absolute;
238 | width: 100px;
239 | height: auto;
240 | }
241 | .hero-section .git {
242 | width: 70px;
243 | top: 50px;
244 | left: 15px;
245 | -webkit-animation: fixed-img 2s linear infinite alternate;
246 | animation: fixed-img 2s linear infinite alternate;
247 | }
248 | .hero-section .vue {
249 | top: 50px;
250 | width: 40px;
251 | transform: translateY(20px) rotate(50deg);
252 | left: 350px;
253 | -webkit-animation: fixed-img-up-down 2s forwards infinite alternate;
254 | animation: fixed-img-up-down 2s forwards infinite alternate;
255 | }
256 | .hero-section .github {
257 | top: 230px;
258 | width: 40px;
259 | transform: translateY(0px);
260 | left: 250px;
261 | -webkit-animation: fixed-img-up-down 2s linear infinite alternate;
262 | animation: fixed-img-up-down 2s linear infinite alternate;
263 | -webkit-animation-delay: 400ms;
264 | animation-delay: 400ms;
265 | }
266 | .hero-section .bigImg,
267 | .hero-section .backendImg {
268 | top: 400px;
269 | opacity: 0.5;
270 | width: 150px;
271 | transform: translateY(0px);
272 | left: 50%;
273 | -webkit-animation: fixed-img 2s backwards infinite alternate;
274 | animation: fixed-img 2s backwards infinite alternate;
275 | -webkit-animation-delay: 400ms;
276 | animation-delay: 400ms;
277 | }
278 | .hero-section .backendImg {
279 | top: 420px;
280 | left: 35%;
281 | }
282 | .hero-section .downArrow {
283 | position: absolute;
284 | bottom: 1rem;
285 | left: 50%;
286 | right: 50%;
287 | -webkit-animation: upDown 600ms linear infinite alternate;
288 | animation: upDown 600ms linear infinite alternate;
289 | }
290 | .hero-section .downArrow i {
291 | font-size: 1.3rem;
292 | }
293 | @-webkit-keyframes upDown {
294 | from {
295 | transform: translateY(0px);
296 | }
297 | to {
298 | transform: translateY(10px);
299 | }
300 | }
301 | @keyframes upDown {
302 | from {
303 | transform: translateY(0px);
304 | }
305 | to {
306 | transform: translateY(10px);
307 | }
308 | }
309 |
310 | @-webkit-keyframes fixed-img {
311 | 0% {
312 | transform: translateY(0);
313 | }
314 | 100% {
315 | transform: translateY(30px);
316 | }
317 | }
318 |
319 | @keyframes fixed-img {
320 | 0% {
321 | transform: translateY(0);
322 | }
323 | 100% {
324 | transform: translateY(30px);
325 | }
326 | }
327 | @-webkit-keyframes fixed-img-up-down {
328 | 0% {
329 | transform: translateY(0) rotate(20deg);
330 | }
331 | 100% {
332 | transform: translateX(30px) rotate(0deg);
333 | }
334 | }
335 | @keyframes fixed-img-up-down {
336 | 0% {
337 | transform: translateY(0) rotate(20deg);
338 | }
339 | 100% {
340 | transform: translateX(30px) rotate(0deg);
341 | }
342 | }
343 | .alert-dismissible {
344 | margin-bottom: -5px;
345 | }
346 |
347 | .alert-dismissible {
348 | margin-bottom: -5px;
349 | }
350 |
351 | @media (max-width: 840px) {
352 | .hero-section {
353 | margin-top: -40px;
354 | }
355 | .hero-section .hero-title {
356 | font-size: 5rem;
357 | }
358 | .hero-section .hero-subtitle {
359 | font-size: 3rem;
360 | }
361 | .hero-section .hero-tagline {
362 | font-size: 0.8rem;
363 | }
364 | .hero-section .bigImg,
365 | .hero-section .backendImg {
366 | margin-top: 40px;
367 | }
368 | .hero-section .backendImg {
369 | margin-left: -60px;
370 | }
371 | .sticky-nav{width:50% !important;}
372 | }
373 | @media (max-width: 600px) {
374 | .hero-section {
375 | margin-top: -40px;
376 | }
377 | .hero-section .hero-title {
378 | font-size: 4rem;
379 | }
380 | .hero-section .hero-subtitle {
381 | font-size: 1.4rem;
382 | }
383 | .hero-section .hero-tagline {
384 | font-size: 0.8rem;
385 | }
386 | }
387 | @media (max-width: 465px) {
388 | .hero-section .forMd {
389 | display: flex;
390 | flex-direction: column;
391 | justify-content: center;
392 | align-items: center;
393 | margin-left: -100px;
394 | }
395 | .hero-section .hero-title {
396 | font-size: 4rem;
397 | }
398 | .hero-section .hero-subtitle {
399 | font-size: 1.5rem;
400 | }
401 | .hero-section .hero-tagline {
402 | font-size: 0.8rem;
403 | }
404 | .hero-section .hero-image {
405 | margin-top: 40px;
406 | width: 80vw;
407 | }
408 | .hero-section .git {
409 | top: 80px;
410 | }
411 | .hero-section .github {
412 | top: 200px;
413 | }
414 | .hero-section .vue {
415 | left: 200px;
416 | }
417 | .hero-section .bigImg,
418 | .hero-section .backendImg {
419 | display: none;
420 | }
421 | .sticky-nav{width:80% !important;}
422 | }
423 | @media (max-width: 360px) {
424 | .header {
425 | padding: 15px 0;
426 | display: flex;
427 | justify-content: space-between;
428 | align-items: center;
429 | flex-direction: column;
430 | }
431 | .header .logo_style {
432 | margin-bottom: 10px;
433 | }
434 | .hero-section {
435 | margin-top: -60px;
436 | }
437 | .hero-section .forMd {
438 | display: flex;
439 | flex-direction: column;
440 | justify-content: center;
441 | align-items: center;
442 | margin-left: -100px;
443 | }
444 | .hero-section .hero-title {
445 | font-size: 4rem;
446 | }
447 | .hero-section .hero-subtitle {
448 | font-size: 1.5rem;
449 | }
450 | .hero-section .hero-tagline {
451 | font-size: 0.8rem;
452 | }
453 | .hero-section .hero-image {
454 | margin-top: 40px;
455 | width: 80vw;
456 | }
457 | .hero-section .git {
458 | top: 80px;
459 | }
460 | .hero-section .github {
461 | top: 200px;
462 | }
463 | .hero-section .vue {
464 | left: 200px;
465 | }
466 | .hero-section .bigImg,
467 | .hero-section .backendImg {
468 | display: none;
469 | }
470 | }
471 | @media (max-width: 275px) {
472 | .header {
473 | padding: 15px 0;
474 | display: flex;
475 | justify-content: space-between;
476 | align-items: center;
477 | flex-direction: column;
478 | }
479 | .header .logo_style {
480 | margin-bottom: 10px;
481 | }
482 | .hero-section {
483 | margin-top: -40px;
484 | text-align: center;
485 | width: 100vw;
486 | }
487 | .hero-section .forMd {
488 | margin: 0 auto;
489 | }
490 | .hero-section .col-6 {
491 | width: 100vw;
492 | padding: 0;
493 | }
494 | .hero-section .hero-title {
495 | margin-left: -50px !important;
496 | font-size: 20vw;
497 | }
498 | .hero-section .hero-subtitle {
499 | font-size: 12vw;
500 | margin-left: -50px !important;
501 | }
502 | .hero-section .hero-tagline {
503 | margin-left: -50px !important;
504 | font-size: 7vw;
505 | }
506 | }
507 | .footer-section footer {
508 | padding: 10px;
509 | text-align: center;
510 | background-color: #414040;
511 | }/*# sourceMappingURL=style.css.map */
--------------------------------------------------------------------------------
41 |
55 | 
86 | 
91 | 
96 | 
101 | 
102 | 
111 |