Advertisement
Veretelnikov_VO

Untitled

Jun 28th, 2023
43
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.52 KB | None | 0 0
  1. #Зверстайте секцію з планом підписки за прикладом
  2.  
  3. #HTML
  4.  
  5. <!DOCTYPE html>
  6. <html>
  7. <head>
  8. <title>Планы ежемесячной подписки</title>
  9. <meta charset="UTF-8">
  10. <link rel="stylesheet" href="styles.css">
  11. <table class="subscription-plan">
  12. <thead>
  13. <tr>
  14. <th class="chose">Choose your plan</th>
  15. <th class="economy">Econom</th>
  16. <th class="basic">Starter</th>
  17. <th class="advanced">Advanced</th>
  18. <th class="premium">Professional</th>
  19. </tr>
  20. </thead>
  21. <tbody>
  22. <tr>
  23. <td>Price</td>
  24. <td>$8/month</td>
  25. <td>$10/month</td>
  26. <td>$20/month</td>
  27. <td>$30/month</td>
  28. </tr>
  29. <tr>
  30. <td>Amount of space</td>
  31. <td>5 GB</td>
  32. <td>8 GB</td>
  33. <td>10 GB</td>
  34. <td>50 GB</td>
  35. </tr>
  36. <tr>
  37. <td>Bandwidth</td>
  38. <td>80 GB/month</td>
  39. <td>210 GB/month</td>
  40. <td>630 GB/month</td>
  41. <td>Unlimeted</td>
  42. </tr>
  43. <tr>
  44. <td>E-mail accounts</td>
  45. <td>1</td>
  46. <td>15</td>
  47. <td>50</td>
  48. <td>Unlimeted</td>
  49. </tr>
  50. <tr>
  51. <td>MySQL databases</td>
  52. <td>1</td>
  53. <td>10</td>
  54. <td>45</td>
  55. <td>Unlimeted</td>
  56. </tr>
  57. <tr>
  58. <td>24-h support</td>
  59. <td>Buy E-mail</td>
  60. <td>Buy E-mail</td>
  61. <td>Buy E-mail & buy phone</td>
  62. <td>Buy E-mail & buy phone</td>
  63. </tr>
  64. <tr>
  65. <td><img src="img/clipart-arrow1.jpg" alt="==>"></td>
  66. <td><a href="https://www.google.com/" class="subscription-plan__button economy">Start</a></td>
  67. <td><a href="https://www.google.com/" class="subscription-plan__button basic">Start</a></td>
  68. <td><a href="https://www.google.com/" class="subscription-plan__button advanced">Start</a></td>
  69. <td><a href="https://www.google.com/" class="subscription-plan__button premium">Start</a></td>
  70. </tr>
  71. </tbody>
  72. </table>
  73.  
  74.  
  75.  
  76.  
  77.  
  78. #CSS
  79.  
  80. .subscription-plan {
  81. border-collapse: collapse;
  82. margin: 0 auto;
  83. max-width: 960px;
  84. padding: 40px 20px;
  85. width: 100%;
  86. background-color: #444343;
  87. color: #fff;
  88. }
  89.  
  90. .subscription-plan th,
  91. .subscription-plan td {
  92. border: 1px solid #ccc;
  93. padding: 10px;
  94. text-align: center;
  95. }
  96.  
  97. .subscription-plan th {
  98. font-weight: bold;
  99. }
  100.  
  101. .subscription-plan th.chose {
  102. background-color: #0090ef;
  103. }
  104.  
  105. .subscription-plan th.economy {
  106. background-color: #006fb9;
  107. color: #ffffff;
  108. }
  109.  
  110.  
  111. .subscription-plan th.basic {
  112. background-color: #00568f;
  113. color: #ffffff;
  114. }
  115.  
  116. .subscription-plan th.advanced {
  117. background-color: #003a61;
  118. color: #ffffff;
  119. }
  120.  
  121. .subscription-plan th.premium {
  122. background-color: #00192a;
  123. color: #ffffff;
  124. }
  125.  
  126. .subscription-plan__button {
  127. border: none;
  128. border-radius: 4px;
  129. color: #fff;
  130. cursor: pointer;
  131. font-size: 16px;
  132. padding: 10px 20px;
  133. transition: background-color 0.3s ease}
  134.  
  135. .subscription-plan__button.economy {
  136. background-color: #006fb9;
  137. }
  138. .subscription-plan__button.basic {
  139. background-color: #00568f;
  140. }
  141. .subscription-plan__button.advanced {
  142. background-color: #003a61;
  143. }
  144.  
  145. .subscription-plan__button.premium {
  146. background-color: #00192a;
  147. }
  148.  
  149. .subscription-plan__button:hover {
  150. opacity: 0.8;
  151. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement