style.scss 21 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231
  1. @charset "UTF-8";
  2. /*custom font*/
  3. @import url(https://fonts.googleapis.com/css?family=Montserrat);
  4. /*basic reset*/
  5. * {margin: 0; padding: 0;}
  6. html {
  7. min-height: 100%;
  8. height: auto;
  9. /*Image only BG fallback*/
  10. /*background = gradient + image pattern combo*/
  11. /* background:
  12. linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6)); */
  13. }
  14. body {
  15. font-family: 'Montserrat', sans-serif;
  16. background-color: white;
  17. font-size: 1.05rem;
  18. }
  19. .ml {
  20. margin-left: 10px;
  21. }
  22. .mr {
  23. margin-right: 10px;
  24. }
  25. .mb {
  26. margin-bottom: 12px;
  27. }
  28. .top {
  29. margin-top: 20px;
  30. position: sticky;
  31. top: 0;
  32. left: 50%;
  33. z-index: 20;
  34. background-color: inherit;
  35. }
  36. .navbar {
  37. background-color: white;
  38. }
  39. /* .imf {
  40. position: fixed;
  41. top: 0;
  42. left: 50%;
  43. transform: translateX(-50%);
  44. z-index: 3;
  45. } */
  46. .img_banner {
  47. background-image: url('images/banner_top1.jpg');
  48. background-repeat: no-repeat;
  49. background-size: contain;
  50. background-position: center;
  51. width: 100%;
  52. height: 65px;
  53. }
  54. /*form styles*/
  55. .img_logo {
  56. display: inline-block;
  57. margin: 0 auto;
  58. margin-bottom: 10px;
  59. }
  60. .title__block {
  61. display: flex;
  62. justify-content: center;
  63. align-items: center;
  64. margin: 0px auto;
  65. }
  66. .sub-logo {
  67. display: inline-block;
  68. font-weight: 700;
  69. font-size: 1.4rem;
  70. color: white;
  71. }
  72. .slogan {
  73. display: block;
  74. font-weight: 700;
  75. font-size: 1.2rem;
  76. color: white;
  77. }
  78. .notice_card {
  79. box-sizing: border-box;
  80. width: 80%;
  81. margin: 0 10%;
  82. margin-bottom: 1.5rem;
  83. background: white;
  84. border: 0 none;
  85. border-radius: 3px;
  86. box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  87. padding: 10px 20px;
  88. line-height: 1.5rem;
  89. }
  90. #myProgress {
  91. width: 100%;
  92. background-color: #ddd;
  93. }
  94. #myBar {
  95. width: 10%;
  96. height: 30px;
  97. background-color: #1C7CE0;
  98. text-align: center;
  99. line-height: 30px;
  100. color: white;
  101. }
  102. .go_title {
  103. color: white;
  104. font-family: 'Montserrat', sans-serif;
  105. padding: 1rem;
  106. }
  107. .nav-list {
  108. color: white;
  109. margin-top: 3rem;
  110. }
  111. .nav-list-item {
  112. font-size: 1.2rem;
  113. cursor: pointer;
  114. position: relative;
  115. }
  116. .nav-list-item::after {
  117. content: " ";
  118. position: absolute;
  119. width: 100%;
  120. height: 100%;
  121. left: 0;
  122. top: 0;
  123. border-bottom: 1px solid white;
  124. opacity: 0;
  125. transition: all .4s;
  126. }
  127. .nav-list-item:hover::after {
  128. opacity: 1;
  129. }
  130. .loader {
  131. position: absolute;
  132. top: 30%;
  133. left: 45%;
  134. }
  135. .imgfr {
  136. width:90px;
  137. height: 90px;
  138. border-radius: 50%;
  139. overflow: hidden;
  140. margin: 1rem auto 0 auto;
  141. }
  142. .card-title {
  143. font-family: 'Montserrat', sans-serif;
  144. }
  145. .strong {
  146. font-weight: 600;
  147. }
  148. .card {
  149. border: none;
  150. position: relative;
  151. }
  152. .card.active {
  153. border: 1px solid gray;
  154. }
  155. .card.active::before {
  156. position: absolute;
  157. content: "✓";
  158. bottom: 0;
  159. right: 5px;
  160. }
  161. .zoomin {
  162. display: none;
  163. position: absolute;
  164. bottom: 0;
  165. left: 0;
  166. }
  167. .script_err {
  168. display: none;
  169. }
  170. /* .history-modal {
  171. height: 80vh;
  172. }
  173. .history-modal .modal-content{
  174. height: 80vh;
  175. }
  176. .history-modal .modal-conten .modal-terms {
  177. height: 90%;
  178. overflow: scroll;
  179. } */
  180. .historyList-item {
  181. padding: 1rem;
  182. display: block;
  183. width: 80%;
  184. margin: 1rem auto;
  185. border: 1px solid rgb(177, 177, 177);
  186. border-radius: 10px;
  187. display: flex;
  188. font-size: .9rem;
  189. }
  190. .historyList-link {
  191. text-decoration: none;
  192. color: rgb(73, 73, 73);
  193. }
  194. .historyList-link:hover {
  195. color: rgb(124, 124, 124);
  196. }
  197. .content {
  198. width: calc(100% - 250px);
  199. }
  200. /*form styles*/
  201. #msform {
  202. max-width: 1000px;
  203. min-width: 370px;
  204. margin: 50px auto;
  205. margin-bottom: 20px;
  206. text-align: center;
  207. position: relative;
  208. }
  209. #msform fieldset {
  210. background: white;
  211. border: 0 none;
  212. border-radius: 3px;
  213. box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  214. padding: 20px 30px;
  215. box-sizing: border-box;
  216. width: 80%;
  217. margin: 3rem 10%;
  218. /*stacking fieldsets above each other*/
  219. position: relative;
  220. }
  221. /*Hide all except first fieldset*/
  222. /*inputs*/
  223. #msform input[type="text"], #msform textarea, #msform input[type="email"] {
  224. padding: 15px;
  225. border: 1px solid #ccc;
  226. border-radius: 3px;
  227. margin-bottom: 16px;
  228. width: 100%;
  229. box-sizing: border-box;
  230. font-family: montserrat;
  231. color: #2C3E50;
  232. font-size: 14px;
  233. }
  234. /*buttons*/
  235. #msform .action-button {
  236. width: 100px;
  237. background: #1C7CE0;
  238. font-weight: bold;
  239. color: white;
  240. border: 0 none;
  241. border-radius: 1px;
  242. cursor: pointer;
  243. padding: 10px 5px;
  244. margin: 10px auto;
  245. display: block;
  246. }
  247. #msform .action-button:hover, #msform .action-button:focus {
  248. box-shadow: 0 0 0 2px white, 0 0 0 3px #1C7CE0;
  249. }
  250. #msform .next[disabled] {
  251. background-color: grey;
  252. }
  253. /*headings*/
  254. .fs-title {
  255. font-size: 15px;
  256. text-transform: uppercase;
  257. color: #2C3E50;
  258. margin-bottom: 10px;
  259. }
  260. .fs-subtitle {
  261. display: inline-block;
  262. font-weight: normal;
  263. font-size: 18px;
  264. color: #666;
  265. margin-bottom: 20px;
  266. padding-bottom: 3px;
  267. border-bottom: 2px solid #1C7CE0;
  268. margin-left: 2rem;
  269. margin-right: 2rem;
  270. }
  271. .fs-label {
  272. display: block;
  273. text-align: left;
  274. margin-bottom: 8px;
  275. }
  276. .fs-label > i {
  277. margin-right: 3px;
  278. }
  279. /*progressbar*/
  280. #progressbar {
  281. margin-bottom: 30px;
  282. overflow: hidden;
  283. /*CSS counters to number the steps*/
  284. counter-reset: step;
  285. }
  286. #progressbar li {
  287. list-style-type: none;
  288. color: black;
  289. text-transform: uppercase;
  290. font-size: 12px;
  291. width: 33.33%;
  292. float: left;
  293. position: relative;
  294. }
  295. #progressbar li:before {
  296. content: counter(step);
  297. counter-increment: step;
  298. width: 20px;
  299. line-height: 20px;
  300. display: block;
  301. font-size: 12px;
  302. color: #333;
  303. background: white;
  304. border-radius: 3px;
  305. margin: 0 auto 5px auto;
  306. }
  307. /*progressbar connectors*/
  308. #progressbar li:after {
  309. content: '';
  310. width: 100%;
  311. height: 2px;
  312. background: white;
  313. position: absolute;
  314. left: -50%;
  315. top: 9px;
  316. z-index: -1; /*put it behind the numbers*/
  317. }
  318. #progressbar li:first-child:after {
  319. /*connector not needed before the first step*/
  320. content: none;
  321. }
  322. /*marking active/completed steps green*/
  323. /*The number of the step and the connector before it = green*/
  324. #progressbar li.active:before, #progressbar li.active:after{
  325. background: #27AE60;
  326. color: white;
  327. }
  328. p.error-text {
  329. bottom: -23px;
  330. left: 24px;
  331. color: rgba(255, 0, 0, .7);
  332. font-size: .8em;
  333. margin-bottom: 0;
  334. }
  335. #term-error {
  336. color: rgba(255, 0, 0, .7);
  337. font-size: .8em;
  338. bottom: -23px;
  339. left: 24px;
  340. }
  341. select {
  342. padding: 15px;
  343. border: 1px solid #ccc;
  344. border-radius: 3px;
  345. margin-bottom: 10px;
  346. width: 100%;
  347. box-sizing: border-box;
  348. font-family: montserrat;
  349. color: #2C3E50;
  350. font-size: 13px;
  351. background-color: transparent;
  352. }
  353. .pl-0 {
  354. padding-left: 0;
  355. }
  356. .terms {
  357. font-size: .9rem;
  358. width: 95%;
  359. min-width: 250px;
  360. height: auto;
  361. overflow: scroll;
  362. margin-bottom: 1rem;
  363. margin-left: auto;
  364. margin-right: auto;
  365. border: 1px solid rgb(163, 163, 163);
  366. line-height: 1.5rem;
  367. }
  368. .term-link a {
  369. text-decoration: none;
  370. color: black;
  371. }
  372. .h2 {
  373. text-align: center;
  374. font-size: 1.2rem;
  375. font-weight: 500;
  376. margin-top: 2rem;
  377. }
  378. .left_align {
  379. font-size: 18px;
  380. text-align: left;
  381. }
  382. #overlay {
  383. position: fixed; /* Sit on top of the page content */
  384. display: none;
  385. width: 100%;
  386. height: 100%;
  387. top: 0;
  388. left: 0;
  389. right: 0;
  390. bottom: 0;
  391. background-color: rgba(0,0,0,0.5);
  392. z-index: 2;
  393. cursor: pointer;
  394. }
  395. .thankyou {
  396. margin: auto;
  397. min-width: 350px;
  398. height: 250px;
  399. margin-top: 190px;
  400. background: #fff;
  401. padding: 15px 20px;
  402. line-height: 25px;
  403. border-radius: 4px;
  404. text-align: center;
  405. }
  406. .thankyou input {
  407. margin-top: 40px;
  408. }
  409. .thankyou h3 {
  410. font-size: 2rem;
  411. font-weight: 700;
  412. color: #21ba45;
  413. line-height: 2.5rem;
  414. margin-bottom: 1.5rem;
  415. }
  416. .check_button {
  417. display: none;
  418. }
  419. .fs-label-type {
  420. background: transparent;
  421. padding: 5px;
  422. border: 1px solid black;
  423. border-radius: 5px;
  424. display: inline-block;
  425. }
  426. .check_button:checked + .fs-label-type{
  427. background-color: #27AE60;
  428. color: white;
  429. padding: 5px;
  430. border: 1px solid #27AE60;
  431. border-radius: 5px;
  432. }
  433. #checker1, #checker2 {
  434. display: inline;
  435. }
  436. .fs-label-info {
  437. background: transparent;
  438. padding: 5px;
  439. border: 1px solid black;
  440. border-radius: 5px;
  441. display: inline-block;
  442. margin-bottom: 8px;
  443. }
  444. input[type="radio"] {
  445. display: none;
  446. }
  447. input[type="radio"]:checked + .fs-label-info {
  448. background-color: #27AE60;
  449. color: white;
  450. padding: 5px;
  451. border: 1px solid #27AE60;
  452. border-radius: 5px;
  453. }
  454. input[type="checkbox"]:checked + .fs-label-info {
  455. background-color: #27AE60;
  456. color: white;
  457. padding: 5px;
  458. border: 1px solid #27AE60;
  459. border-radius: 5px;
  460. }
  461. .btn-exit {
  462. padding: .5rem .75rem;
  463. background-color: transparent;
  464. border: 1px solid black;
  465. margin-top: .3rem;
  466. }
  467. .btn-term-exit {
  468. padding: .5rem .75rem;
  469. background-color: transparent;
  470. border: 1px solid black;
  471. margin-top: .3rem;
  472. display: block;
  473. margin-left: auto;
  474. margin-right: auto;
  475. margin-bottom: 2rem;
  476. }
  477. footer {
  478. padding: 2rem;
  479. padding-top: .5rem;
  480. }
  481. .footer {
  482. display: flex;
  483. justify-content: center;
  484. }
  485. .img_fr {
  486. width: 80%;
  487. max-width: 850px;
  488. min-width: 300px;
  489. height: 60px;
  490. object-fit: contain;
  491. object-position: center;
  492. }
  493. .img_fr img {
  494. width: 100%;
  495. height: 90%;
  496. }
  497. #msform #userid, #msform #area {
  498. height: 0;
  499. padding: 0;
  500. margin: 0;
  501. border: none;
  502. }
  503. #msform input[type="text"].error {
  504. border-color: red;
  505. }
  506. .modal-header {
  507. border-bottom: none;
  508. }
  509. #avatarmega .modal-content {
  510. background-color: transparent;
  511. border: none;
  512. }
  513. #avatarmega .modal-title {
  514. color: white;
  515. }
  516. #avatarmega .btn-close {
  517. background: none;
  518. }
  519. #avatarmega .modal-header {
  520. position: absolute;
  521. top: -.5rem;
  522. right: 1.5rem;
  523. }
  524. .linker__box {
  525. padding: .5rem 1rem;
  526. border-radius: 1rem;
  527. box-shadow: 1px 1px 5px 1px rgb(201, 201, 201);
  528. width: max-content;
  529. margin: 0 auto;
  530. display: none;
  531. }
  532. .linker__box p {
  533. margin-bottom: 0;
  534. color: gray;
  535. }
  536. .linker__box i {
  537. color: gray;
  538. position: relative;
  539. }
  540. .linker__box i::after {
  541. position: absolute;
  542. content: " ";
  543. right: -5px;
  544. top: -10%;
  545. border-right: 2px solid rgb(163, 163, 163);
  546. width: 1px;
  547. height: 120%;
  548. }
  549. .item_imgfr {
  550. width: 15%;
  551. height: 50px;
  552. border-radius: 50%;
  553. overflow: hidden;
  554. margin: auto .5rem;
  555. }
  556. .item_imgfr img {
  557. height: 100%;
  558. width: 100%;
  559. }
  560. .content-box {
  561. width: 75%;
  562. }
  563. .box-title {
  564. margin-bottom: .2rem;
  565. cursor: pointer;
  566. }
  567. .box-title:hover {
  568. color: grey;
  569. text-decoration: underline;
  570. }
  571. .box-link {
  572. cursor: pointer;
  573. }
  574. .img_uploader {
  575. display: none;
  576. }
  577. #msform input[type="text"].imgsrc {
  578. width: calc(100% - 8rem);
  579. margin-right: 5px;
  580. }
  581. .upload-btn {
  582. display: inline-block;
  583. width: 6rem;
  584. background-color: #75a7dd;
  585. color: white;
  586. padding: .4rem .5rem;
  587. font-size: .9rem;
  588. border-radius: 3px;
  589. transition: all .3s;
  590. cursor: pointer;
  591. }
  592. .upload-btn img{
  593. width: 30px;
  594. height: 30px;
  595. }
  596. .upload-btn:hover {
  597. background-color: #3b86d6;
  598. }
  599. .add, .addimg {
  600. cursor: pointer;
  601. display: inline-block;
  602. width: 2rem;
  603. height: 2rem;
  604. background-color: #67abf3;
  605. font-size: 1.2rem;
  606. color: white;
  607. border-radius: 50%;
  608. transition: all .3s;
  609. }
  610. .add:hover, .addimg:hover {
  611. background-color: #398ee9;
  612. }
  613. body {
  614. font-family: "Lato", sans-serif;
  615. }
  616. .sidenav {
  617. height: 100%;
  618. width: 250px;
  619. position: fixed;
  620. z-index: 1;
  621. top: 0;
  622. left: 0;
  623. background: linear-gradient(to bottom, #1C7CE0, #150051);
  624. overflow-x: hidden;
  625. transition: 0.5s;
  626. }
  627. .sidenav a {
  628. text-decoration: none;
  629. font-size: 25px;
  630. color: #818181;
  631. display: block;
  632. transition: 0.3s;
  633. }
  634. .sidenav a:hover {
  635. color: #f1f1f1;
  636. }
  637. .sidenav .closebtn {
  638. position: absolute;
  639. top: 0;
  640. right: 25px;
  641. font-size: 36px;
  642. margin-left: 50px;
  643. }
  644. .container-login {
  645. width: 100vw;
  646. height: 100vh;
  647. display: grid;
  648. grid-template-columns: repeat(2, 1fr);
  649. grid-gap :7rem;
  650. padding: 0rem;
  651. }
  652. .navbar-nav button {
  653. background: white;
  654. border: none;
  655. outline: none;
  656. }
  657. .img-wave {
  658. position: fixed;
  659. bottom: 0;
  660. left: 0;
  661. height: 100%;
  662. z-index: -1;
  663. }
  664. .img-wave-profile {
  665. height: 80%;
  666. }
  667. .row-img {
  668. position: relative;
  669. display: flex;
  670. justify-content: center;
  671. align-items: center;
  672. background-image: linear-gradient(to right bottom,
  673. rgba(#10448E, 0.7),
  674. rgba(#10448E, 0.7)
  675. ), url('../img/sideImg.png');
  676. background-size: cover;
  677. background-position: center;
  678. .row-img-box {
  679. color: white;
  680. }
  681. .row-img-txt {
  682. position: absolute;
  683. bottom: 2rem;
  684. color: white;
  685. left: 2rem;
  686. font-size: 1.3rem;
  687. }
  688. }
  689. .row-login {
  690. display: flex;
  691. justify-content: flex-start;
  692. align-items: center;
  693. text-align: center;
  694. .title {
  695. position: relative;
  696. color: #052859;
  697. &::after {
  698. position: absolute;
  699. content: "";
  700. left: 45%;
  701. top: 20%;
  702. width: 10%;
  703. height: 100%;
  704. border-bottom: 4px solid #052859;
  705. }
  706. }
  707. }
  708. .login-content {
  709. width: 80%;
  710. min-width: 350px;
  711. box-shadow: 0 0 12px 5px rgb(221, 221, 221);
  712. padding: 1.5rem;
  713. border-radius: 2rem;
  714. }
  715. .link_privacy {
  716. color: black;
  717. }
  718. .login-content img {
  719. height: 80px;
  720. }
  721. .row-img img {
  722. width: 450px;
  723. }
  724. .login-content .form-floating input{
  725. border: none;
  726. border-bottom: 2px solid #d9d9d9;
  727. border-radius: 0;
  728. }
  729. .login-content .form-floating input:focus{
  730. box-shadow: none;
  731. }
  732. .login-content #btn_login {
  733. background: linear-gradient(90deg, #0162c8, #55e7fc);
  734. font-weight: bold;
  735. color: white;
  736. border: 0 none;
  737. border-radius: 40px;
  738. cursor: pointer;
  739. padding: 10px 50px;
  740. margin: 10px auto;
  741. display: block;
  742. }
  743. .login-content #btn_login:hover {
  744. box-shadow: 0 0 0 2px white, 0 0 0 3px #1C7CE0;
  745. }
  746. .login-content .btn-register {
  747. background: linear-gradient(90deg, #0162c8, #55e7fc);
  748. font-weight: bold;
  749. color: white;
  750. border: 0 none;
  751. border-radius: 40px;
  752. cursor: pointer;
  753. padding: 10px 50px;
  754. margin: 10px auto;
  755. display: block;
  756. }
  757. .login-content .btn-register:hover {
  758. box-shadow: 0 0 0 2px white, 0 0 0 3px #1C7CE0;
  759. }
  760. .login-content .nav-tabs {
  761. border-bottom: none;
  762. }
  763. .login-content .nav {
  764. flex-direction: column;
  765. align-items: center;
  766. }
  767. .login-content .nav-tabs .nav-link {
  768. color: grey;
  769. }
  770. .login-content .nav-tabs .nav-link.active {
  771. border-color: #fff;
  772. text-transform: uppercase;
  773. color: black;
  774. }
  775. .navbar .btn-gocreate {
  776. background: linear-gradient(90deg, #0162c8, #55e7fc);
  777. color: white;
  778. border: 0 none;
  779. border-radius: 40px;
  780. cursor: pointer;
  781. padding: 10px 50px;
  782. }
  783. .container-profile {
  784. width: 100vw;
  785. height: 100vh;
  786. overflow-y: hidden;
  787. }
  788. .container-bg {
  789. position: absolute;
  790. width: 600px;
  791. height: 400px;
  792. right: 0;
  793. bottom: 0;
  794. }
  795. .container-profile .card-profile {
  796. width: 30%;
  797. min-width: 320px;
  798. margin: auto;
  799. margin-top: 4rem;
  800. border-radius: 10px;
  801. padding: 2rem;
  802. text-align: center;
  803. box-shadow: 0px 0px 20px 1px rgb(180, 180, 180);
  804. }
  805. .container-profile .card-profile img {
  806. width: 120px;
  807. margin: 1rem auto;
  808. }
  809. .card-profile-txt {
  810. color: rgb(109, 109, 109);
  811. font-size: 1.2rem;
  812. font-weight: 500;
  813. }
  814. .card-profile-cnt {
  815. font-size: 1.5rem;
  816. font-weight: 700;
  817. }
  818. @media screen and (max-width: 900px){
  819. .container-login{
  820. grid-template-columns: 1fr;
  821. }
  822. .row-img{
  823. display: none;
  824. }
  825. .img-wave {
  826. display: none;
  827. }
  828. .row-login{
  829. justify-content: center;
  830. }
  831. .container-bg {
  832. width: 400px;
  833. height: 300px;
  834. right: 0;
  835. bottom: 0;
  836. }
  837. }
  838. @media screen and (max-height: 450px) {
  839. .sidenav {padding-top: 15px;}
  840. .sidenav a {font-size: 18px;}
  841. }
  842. /* Pricing */
  843. .pricingTable{
  844. background: #fff;
  845. font-family: 'Open Sans', sans-serif;
  846. text-align: center;
  847. padding: 30px 15px 15px;
  848. border-radius: 25px;
  849. overflow: hidden;
  850. position: relative;
  851. z-index: 1;
  852. }
  853. .pricingTable:before,
  854. .pricingTable:after{
  855. content: '';
  856. background: linear-gradient(-45deg,#5A98FB,#5A98FB,#3F64FA,#3F64FA);
  857. height: 170px;
  858. width: 150%;
  859. outline: 5px solid #fff;
  860. outline-offset: -10px;
  861. opacity: 0.9;
  862. transform: translateX(-50%) rotate(7deg);
  863. position: absolute;
  864. left: 50%;
  865. top: -65px;
  866. z-index: -1;
  867. }
  868. .pricingTable:after{
  869. height: 250px;
  870. transform: translateX(-50%) rotate(-20deg) rotateX(180deg);
  871. top: auto;
  872. bottom: -150px;
  873. }
  874. .pricingTable .pricingTable-header{
  875. color:#fff;
  876. margin: 0 0 75px;
  877. }
  878. .pricingTable .title{
  879. font-size: 40px;
  880. font-weight: 700;
  881. text-transform:uppercase;
  882. letter-spacing: 1px;
  883. margin: 0;
  884. }
  885. .pricingTable .pricing-content{
  886. text-align: left;
  887. padding: 0;
  888. margin: 0 0 10px;
  889. display: inline-block;
  890. }
  891. .pricingTable .pricing-content li{
  892. color: #333;
  893. font-size: 17px;
  894. font-weight: 500;
  895. line-height: 22px;
  896. text-transform: uppercase;
  897. padding: 0 40px 0 0;
  898. margin: 0 0 15px;
  899. list-style-position: inside;
  900. position: relative;
  901. }
  902. .pricingTable .pricing-content li:after{
  903. content: "\f00c";
  904. color: #e58e26;
  905. font-family: "Font Awesome 5 Free";
  906. font-size: 18px;
  907. font-weight: 900;
  908. position: absolute;
  909. top: 0;
  910. right: 0;
  911. }
  912. .pricingTable .pricing-content li.disable:after{ content: "\f00d"; }
  913. .pricingTable .price-value{ margin: 0 0 15px; }
  914. .pricingTable .price-title{
  915. color: #C70039;
  916. font-size: 30px;
  917. text-align: left;
  918. text-transform: uppercase;
  919. line-height: 30px;
  920. width: calc(100% - 130px);
  921. padding: 15px 0 0;
  922. display: inline-block;
  923. }
  924. .pricingTable .price-title b{ display: block; }
  925. .pricingTable .price-amount{
  926. color: #3F64FA;
  927. background: #fff;
  928. font-size: 30px;
  929. font-weight: 700;
  930. line-height: 30px;
  931. width: 120px;
  932. height: 120px;
  933. padding: 33px 10px 10px;
  934. display: inline-block;
  935. vertical-align: top;
  936. clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
  937. position: relative;
  938. z-index: 1;
  939. }
  940. .pricingTable .price-amount:before,
  941. .pricingTable .price-amount:after{
  942. content: "";
  943. background: linear-gradient(-45deg,#5A98FB,#5A98FB,#3F64FA,#3F64FA);
  944. width: calc(100% - 12px);
  945. height: calc(100% - 12px);
  946. transform: translateX(-50%) translateY(-50%);
  947. position: absolute;
  948. top: 50%;
  949. left: 50%;
  950. z-index: -1;
  951. clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
  952. }
  953. .pricingTable .price-amount:after{
  954. background: #fff;
  955. width: calc(100% - 16px);
  956. height: calc(100% - 16px);
  957. }
  958. .pricingTable .price-amount .duration{
  959. font-size: 16px;
  960. font-weight: 600;
  961. text-transform: capitalize;
  962. display: block;
  963. }
  964. .pricingTable .pricingTable-signup a{
  965. color: #fff;
  966. font-size: 20px;
  967. font-weight: 700;
  968. letter-spacing: 2px;
  969. text-transform: uppercase;
  970. padding: 10px 20px;
  971. border: 2px solid #fff;
  972. border-radius: 50px;
  973. display: inline-block;
  974. transition: all 0.3s;
  975. }
  976. .pricingTable .pricingTable-signup a:hover{
  977. text-shadow: 3px 3px 1px rgba(0,0,0,0.5);
  978. box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
  979. }
  980. .pricingTable.green:before,
  981. .pricingTable.green:after,
  982. .pricingTable.green .price-amount:before{
  983. background: linear-gradient(-45deg,#76D243,#76D243,#109739,#109739);
  984. }
  985. .pricingTable.green .price-amount{ color: #109739; }
  986. .pricingTable.pink:before,
  987. .pricingTable.pink:after,
  988. .pricingTable.pink .price-amount:before{
  989. background: linear-gradient(-45deg,#E969A6,#E969A6,#ED2E96,#ED2E96);
  990. }
  991. .pricingTable.pink .price-amount{ color: #ED2E96; }
  992. @media only screen and (max-width: 990px){
  993. .pricingTable{ margin: 0 0 40px; }
  994. }
  995. // 側邊欄選單
  996. .sidenav {
  997. height: 100%;
  998. width: 250px;
  999. position: fixed;
  1000. z-index: 1;
  1001. top: 0;
  1002. left: 0;
  1003. background: linear-gradient(to bottom, #1c7ce0, #150051);
  1004. overflow-x: hidden;
  1005. transition: 0.5s;
  1006. text-align: center;
  1007. hr{
  1008. background: #fff;
  1009. opacity: 1 !important;
  1010. height: 1px;
  1011. width: 85%;
  1012. margin: 15px auto;
  1013. }
  1014. .sidebar{
  1015. width: 80%;
  1016. margin:0 auto ;
  1017. }
  1018. .user{
  1019. object-fit: cover;
  1020. width: 100px;
  1021. }
  1022. .user-name{
  1023. font-size: 1.5rem;
  1024. }
  1025. .navbar-nav{
  1026. flex-direction: row;
  1027. .btn-gocreate{
  1028. font-size: 14px;
  1029. background: linear-gradient(90deg, #0162c8, #55e7fc);
  1030. // background:#31426C;
  1031. color: white;
  1032. border: 0 none;
  1033. border-radius: 10px;
  1034. cursor: pointer;
  1035. margin: 10px 3px;
  1036. display: inline;
  1037. }
  1038. .active{
  1039. background: linear-gradient(90deg, #0162c8, #55e7fc);
  1040. }
  1041. }
  1042. a {
  1043. text-decoration: none;
  1044. font-size: 32px;
  1045. color: #f1f1f1;
  1046. display: block;
  1047. transition: 0.3s;
  1048. &:hover{
  1049. color: #818181;
  1050. }
  1051. }
  1052. .sidenav .closebtn {
  1053. position: absolute;
  1054. top: 0;
  1055. right: 25px;
  1056. font-size: 36px;
  1057. margin-left: 50px;
  1058. }
  1059. .nav-list {
  1060. color: white;
  1061. list-style: none;
  1062. text-align: center;
  1063. .nav-list-item {
  1064. font-size: 1.2rem;
  1065. cursor: pointer;
  1066. position: relative;
  1067. }
  1068. .nav-list-item::after {
  1069. content: " ";
  1070. position: absolute;
  1071. width: 50%;
  1072. height: 100%;
  1073. left: 25%;
  1074. top: 5px;
  1075. border-bottom: 1px solid white;
  1076. opacity: 0;
  1077. transition: all 0.4s;
  1078. }
  1079. .nav-list-item:hover::after {
  1080. opacity: 1;
  1081. }
  1082. }
  1083. .right-text {
  1084. padding-top: 9vw;
  1085. color: #fff;
  1086. a{
  1087. font-size: 18px;
  1088. display: inline;
  1089. margin: 2px;
  1090. img{
  1091. filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(102deg) brightness(102%) contrast(101%);
  1092. }
  1093. }
  1094. }
  1095. }