Guest User

Elemente untereinander statt nebeneinander

a guest
May 4th, 2021
12
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. HTML:
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.  
  6. <head>
  7. <meta charset="UTF-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9. <link rel="stylesheet" href="style copy.css">
  10. <title>Meine Website</title>
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  12. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>
  13. </head>
  14.  
  15. <body>
  16.  
  17. <section id="skills">
  18. <div class="wrapper">
  19. <div class="card webdesign">
  20. <div class="circle">
  21. <div class="bar"></div>
  22. <div class="box"><span></span></div>
  23. </div>
  24. <div class="text">WebDesign</div>
  25. </div>
  26. <div class="card egitarre">
  27. <div class="circle">
  28. <div class="bar"></div>
  29. <div class="box"><span></span></div>
  30. </div>
  31. <div class="text">E-Gitarre</div>
  32. </div>
  33. <div class="card djing">
  34. <div class="circle">
  35. <div class="bar"></div>
  36. <div class="box"><span></span></div>
  37. </div>
  38. <div class="text">Djing</div>
  39. </div>
  40. <div class="card editieren">
  41. <div class="circle">
  42. <div class="bar"></div>
  43. <div class="box"><span></span></div>
  44. </div>
  45. <div class="text">Videobearbeitung</div>
  46. </div>
  47. <div class="card zeichnen">
  48. <div class="circle">
  49. <div class="bar"></div>
  50. <div class="box"><span></span></div>
  51. </div>
  52. <div class="text">Zeichnen</div>
  53. </div>
  54. <div class="card editieren">
  55. <div class="circle">
  56. <div class="bar"></div>
  57. <div class="box"><span></span></div>
  58. </div>
  59. <div class="text">Videobearbeitung</div>
  60. </div>
  61. </div>
  62.  
  63. <script>
  64. let options = {
  65. startAngle: -1.55,
  66. size: 150,
  67. value: 0.80,
  68. fill: {gradient: ['#091179', '#00d4ff']}
  69. }
  70. $(".circle .bar").circleProgress(options).on('circle-animation-progress',
  71. function(event, progress, stepValue){
  72. $(this).parent().find("span").text(String(stepValue.toFixed(2).substr(2)) + "%");
  73. });
  74. $(".egitarre .bar").circleProgress({
  75. value: 0.92
  76. });
  77. $(".djing .bar").circleProgress({
  78. value: 0.65
  79. });
  80. $(".editieren .bar").circleProgress({
  81. value: 0.87
  82. });
  83. </script>
  84.  
  85. </section>
  86.  
  87. </body>
  88.  
  89. </html>
  90.  
  91. CSS:
  92.  
  93.  
  94.  
  95. @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
  96.  
  97.  
  98. .wrapper{
  99. width: 250px;
  100. display: grid;
  101. flex-wrap: wrap;
  102. align-items: center;
  103. justify-content: space-between;
  104. }
  105. .wrapper .card{
  106. background: white;
  107. width: 250px;
  108. height: 300px;
  109. border-radius: 5px;
  110. display: flex;
  111. align-items: center;
  112. justify-content: space-evenly;
  113. flex-direction: column;
  114. box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
  115. }
  116. .wrapper .card .circle{
  117. position: relative;
  118. height: 150px;
  119. width: 150px;
  120. border-radius: 50%;
  121. cursor: default;
  122. }
  123. .card .circle .box,
  124. .card .circle .box span{
  125. position: absolute;
  126. top: 50%;
  127. left: 50%;
  128. }
  129. .card .circle .box{
  130. height: 100%;
  131. width: 100%;
  132. background: white;
  133. border-radius: 50%;
  134. transform: translate(-50%, -50%) scale(0.8);
  135. transition: all 0.2s;
  136. }
  137. .card .circle:hover .box{
  138. transform: translate(-50%, -50%) scale(0.9);
  139. }
  140. .card .circle .box span,
  141. .wrapper .card .text{
  142. background: -webkit-linear-gradient(left, #091179, #00d4ff);
  143. -webkit-background-clip: text;
  144. -webkit-text-fill-color: transparent;
  145. }
  146. .circle .box span{
  147. font-size: 35px;
  148. font-family: sans-serif;
  149. font-weight: 600;
  150. transform: translate(-45%, -45%);
  151. transition: all 0.1s;
  152. }
  153. .card .circle:hover .box span{
  154. transform: translate(-45%, -45%) scale(1.1);
  155. }
  156. .card .text{
  157. font-size: 25px;
  158.  
  159. }
  160.  
RAW Paste Data