Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Counter Box Design</title>
- <style>
- body {
- margin: 0;
- height: 100vh;
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: #e9ecef; /* sau orice altă culoare de fundal preferată */
- }
- .counter-box {
- font-family: 'Arial', sans-serif;
- width: 150px; /* Ajustați lățimea după cum este necesar */
- height: 150px; /* Ajustați înălțimea după cum este necesar */
- background-color: #fff;
- border-radius: 20px;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
- position: relative;
- overflow: hidden;
- display: flex;
- align-items: center;
- flex-direction: column;
- }
- .counter-box::before {
- content: '';
- position: absolute;
- background-color: #51d658;
- top: 0;
- left: 0;
- right: 0;
- bottom: 25%; /* Ajustați valoarea bottom pentru a schimba aria verde */
- z-index: 0;
- }
- .counter-content {
- z-index: 1;
- text-align: center;
- color: #333;
- position: absolute;
- width: 100%;
- bottom: 0; /* Așezați conținutul la partea de jos a containerului */
- padding-bottom: 10px; /* Spațiu la partea de jos */
- }
- .counter-icon {
- background-color: #fff;
- border-radius: 50%;
- padding: 10px;
- /* dimensiunea containerului iconiței */
- width: 40px;
- height: 40px;
- display: flex;
- justify-content: center;
- align-items: center;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- margin: 0 auto; /* Centrarea iconiței */
- position: relative;
- top: -20px; /* Ridicați iconița pentru a se suprapune cu partea verde */
- }
- .counter-text {
- font-size: 14px; /* Ajustați dimensiunea fontului după cum este necesar */
- margin: 0;
- padding: 0;
- }
- .counter-number {
- font-size: 24px; /* Ajustați dimensiunea fontului după cum este necesar */
- font-weight: bold;
- margin: 0;
- }
- </style>
- </head>
- <body>
- <div class="counter-box">
- <div class="counter-icon">
- <!-- Inserați aici imaginea iconiței -->
- <img src="path_to_your_icon.png" alt="Icon" style="width: 24px; height: 24px;">
- </div>
- <div class="counter-content">
- <div class="counter-text">Web Designing</div>
- <div class="counter-number">1963</div>
- </div>
- </div>
- </body>
- </html>
Add Comment
Please, Sign In to add comment