style.css 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. body{
  2. font-family: 'Roboto', sans-serif;
  3. }
  4. h1{
  5. margin-bottom: 40px;
  6. text-align: center;
  7. color: #554b21;
  8. }
  9. .card-wrapper {
  10. width: 751px;
  11. height: 381px;
  12. /* border: 1px solid grey; */
  13. position: relative;
  14. margin: 0 auto;
  15. }
  16. .card-back, .card-front {
  17. width: 535px;
  18. height: 343px;
  19. border: 1px solid grey;
  20. border-radius: 15px;
  21. position: absolute;
  22. }
  23. .card-back {
  24. right: 0;
  25. bottom: 0;
  26. background: #ececec;
  27. }
  28. .card-front {
  29. background: #fff;
  30. /* background: #de1612; */
  31. }
  32. .card-back-line {
  33. width: 100%;
  34. height: 80px;
  35. background: #c0c0c0;
  36. position: absolute;
  37. top: 50px;
  38. }
  39. #cvv {
  40. position: absolute;
  41. right: 40px;
  42. bottom: 112px;
  43. width: 100px;
  44. padding: 5px;
  45. font-size: 40px;
  46. text-align: center;
  47. }
  48. .card-image {
  49. height: 60px;
  50. position: absolute;
  51. left: 30px;
  52. top: 40px;
  53. }
  54. .card-logo {
  55. height: 50px;
  56. position: absolute;
  57. bottom: 40px;
  58. right: 30px;
  59. }
  60. #card-number {
  61. position: absolute;
  62. width: 90%;
  63. margin: 0 5%;
  64. background: #f1f1f1;
  65. font-size: 40px;
  66. padding: 5px;
  67. border: none;
  68. top: 145px;
  69. outline: none;
  70. }
  71. #card-to-year, #card-to-month {
  72. position: absolute;
  73. background: #f1f1f1;
  74. font-size: 40px;
  75. padding: 5px;
  76. outline: none;
  77. border: none;
  78. width: 60px;
  79. text-align: center;
  80. bottom: 40px;
  81. left: 5%;
  82. }
  83. #card-to-year {
  84. left: 20%;
  85. }