style.css 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. /* Andrey Shevchenko. FEA-23. Home work 3-1.2.3.4. */
  2. body {
  3. font-family: Arial, Helvetica, sans-serif;
  4. }
  5. .first-element {
  6. box-sizing: border-box;
  7. font-size: 16px;
  8. width: 350px;
  9. height: 220px;
  10. padding-top: 15px;
  11. padding-left: 10px;
  12. padding-bottom: 20px;
  13. padding-right: 10px;
  14. margin: 30px;
  15. border: 2px dotted red;
  16. background-color: green;
  17. }
  18. .otstup100px {
  19. margin-bottom: 100px;
  20. }
  21. .svetofor {
  22. display: inline-block;
  23. box-sizing: border-box;
  24. padding: 20px;
  25. border: 2px solid blue;
  26. background-color: rgb(200, 200, 200);
  27. }
  28. .svetofor-red {
  29. width: 80px;
  30. height: 80px;
  31. background-color: rgb(255, 83, 83);
  32. border: 5px solid red;
  33. border-radius: 50%;
  34. margin: 5px;
  35. }
  36. .svetofor-yellow {
  37. width: 80px;
  38. height: 80px;
  39. background-color: yellow;
  40. border: 5px solid rgb(158, 158, 0);
  41. border-radius: 50%;
  42. margin: 5px;
  43. }
  44. .svetofor-green {
  45. width: 80px;
  46. height: 80px;
  47. background-color: rgb(0, 172, 0);
  48. border: 5px solid green;
  49. border-radius: 50%;
  50. margin: 5px;
  51. }
  52. .squares {
  53. display: inline-block;
  54. box-sizing: border-box;
  55. position: relative;
  56. margin-bottom: calc(3em + 50px);
  57. }
  58. .squares-pink {
  59. position: relative;
  60. width: 80px;
  61. height: 80px;
  62. background-color: #fd898a;
  63. }
  64. .squares-violet {
  65. float: left;
  66. position: relative;
  67. left: 60%;
  68. top: 60%;
  69. width: 80px;
  70. height: 80px;
  71. background-color: #7f8be8;
  72. z-index: 3;
  73. }
  74. .squares-green {
  75. position: relative;
  76. left: 120%;
  77. top: 120%;
  78. width: 80px;
  79. height: 80px;
  80. background-color: #56ec9c;
  81. }
  82. .repeatpage {
  83. }
  84. .blok1 {
  85. margin-top: 30px;
  86. position: relative;
  87. }
  88. .lor {
  89. text-align: justify;
  90. }
  91. .images1 {
  92. width: 200px;
  93. float: left;
  94. margin-right: 20px;
  95. margin-bottom: 10px;
  96. }
  97. .images2 {
  98. width: 170px;
  99. float: right;
  100. margin-top: 10px;
  101. margin-bottom: 10px;
  102. margin-left: 20px;
  103. }
  104. footer {
  105. background-color: rgb(100, 200, 100);
  106. font-weight: 700;
  107. color: blue;
  108. font-family: Arial, Helvetica, sans-serif;
  109. padding: 30px;
  110. border: 2px solid rgb(0, 80, 0);
  111. margin-top: 50px;
  112. }