otzv9.html 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link rel="stylesheet" href="../styles/style.css">
  7. <title>Отзывы</title>
  8. </head>
  9. <body>
  10. <div class="big_con" style="height: 100vh; display: flex; justify-content: center; align-items: center;">
  11. <div class="block_auth" style="width: 600px; border-radius: 0;">
  12. <h2 style="color: black; padding-bottom: 10px;">ОТЗЫВЫ</h2>
  13. <div class="review-container">
  14. <div class="review-item">
  15. <div class="profile-picture">
  16. <img src="../imgs/chel12.png" alt="Профиль">
  17. </div>
  18. <div class="review-info">
  19. <p class="review-name">Илья Головнов</p>
  20. <p class="review-text">Доступные цены. Цены на автомобили в этом салоне вполне доступные, что является большим плюсом.</p>
  21. </div>
  22. </div>
  23. </div>
  24. <div class="arrow-container" style="margin-top: 20px;">
  25. <span class="arrow left-arrow" onclick="window.location.href='otzv8.html'">&lt;</span>
  26. <span class="arrow right-arrow" onclick="window.location.href='otzv10.html'">&gt;</span>
  27. </div>
  28. <span class="close" onclick="window.location.href='../../mainPage.html'">&times;</span>
  29. </div>
  30. </div>
  31. <style>
  32. .big_con {
  33. display: flex;
  34. justify-content: center;
  35. align-items: center;
  36. height: 100vh;
  37. }
  38. .block_auth {
  39. background-color: #fff;
  40. padding: 30px;
  41. border-radius: 10px;
  42. box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  43. width: 600px;
  44. }
  45. .review-container {
  46. display: flex;
  47. align-items: center;
  48. margin-bottom: 20px;
  49. }
  50. .review-item {
  51. display: flex;
  52. align-items: center;
  53. padding: 20px;
  54. border: 1px solid #ccc;
  55. border-radius: 10px;
  56. width: 100%;
  57. }
  58. .profile-picture {
  59. width: 100px;
  60. height: 100px;
  61. border-radius: 50%;
  62. overflow: hidden;
  63. margin-right: 20px;
  64. position: relative;
  65. }
  66. .profile-picture img {
  67. width: 100%;
  68. height: 100%;
  69. border-radius: 50%;
  70. object-fit: cover;
  71. position: absolute;
  72. top: 0;
  73. left: 0;
  74. }
  75. .review-info {
  76. flex: 1;
  77. }
  78. .review-name {
  79. font-weight: bold;
  80. font-size: 1.2em;
  81. margin-bottom: 10px;
  82. }
  83. .review-text {
  84. font-size: 1em;
  85. line-height: 1.5;
  86. }
  87. .arrow-container {
  88. display: flex;
  89. justify-content: center;
  90. align-items: center;
  91. margin-top: 20px;
  92. }
  93. .arrow {
  94. cursor: pointer;
  95. font-size: 24px;
  96. color: #777;
  97. }
  98. .close {
  99. position: absolute;
  100. top: 10px;
  101. right: 10px;
  102. font-size: 24px;
  103. cursor: pointer;
  104. color: #777;
  105. }
  106. </style>
  107. </body>
  108. </html>