style.css 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. /* Добавил внешние отступы, чтобы было красивее
  2. и были видны границы */
  3. body {
  4. margin-left: 50px;
  5. margin-top: 50px;
  6. }
  7. /* 2.Второй уровень */
  8. p:first-child {
  9. width: 350px;
  10. height: 220px;
  11. padding: 15px 10px 20px 10px;
  12. margin-bottom: 30px;
  13. border: 2px red dashed;
  14. background: #0ada0a;
  15. }
  16. /* 3.Третий уровень
  17. Добавил рамку, чтобы показать внутренние отступы,
  18. потому что в оригинале отступы есть */
  19. .block {
  20. border: 1px red solid;
  21. width: 615px;
  22. text-align: justify;
  23. padding: 8px 10px 15px 6px;
  24. margin-bottom: 10px;
  25. box-sizing: border-box;
  26. }
  27. .photo-html {
  28. width: 200px;
  29. height: 112px;
  30. float: left;
  31. padding: 0 20px 5px 0;
  32. }
  33. .photo-53 {
  34. width: 150px;
  35. height: 85px;
  36. float: right;
  37. padding: 25px 0 15px 20px;
  38. }
  39. /* 4.Четвертый уровень */
  40. .positive {
  41. margin: 50px;
  42. position: relative;
  43. }
  44. .pink {
  45. background: #e72344;
  46. width: 100px;
  47. height: 100px;
  48. }
  49. .green {
  50. background: #09c212;
  51. width: 100px;
  52. height: 100px;
  53. z-index: 2;
  54. position: absolute;
  55. left: 120px;
  56. top: 120px;
  57. margin-bottom: 50px;
  58. }
  59. .blue {
  60. background: #0a32e2;
  61. width: 100px;
  62. height: 100px;
  63. position: absolute;
  64. top: 60px;
  65. left: 60px;
  66. z-index: 3;
  67. }