Cards | shadowmurphy horrible rat 35
html公开前 25 行,完整代码需登录
<div class="card">
<div class="header">
<button class="header-button">
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g id="Layer_91"><g><circle cx="256" cy="256" fill="#f1f6f9" r="256" style="fill: rgb(76, 194, 255);"></circle><g><path d="m388.378 263.726c-4.267 0-7.726-3.459-7.726-7.726 0-68.733-55.919-124.652-124.652-124.652-33.556 0-65.055 13.194-88.694 37.152-2.997 3.037-7.89 3.068-10.927.073-3.038-2.997-3.07-7.889-.073-10.927 26.566-26.924 61.971-41.752 99.694-41.752 77.254 0 140.105 62.851 140.105 140.105 0 4.269-3.46 7.727-7.727 7.727z" fill="#00adfc" style="fill: rgb(51, 51, 51);"></path></g><g><path d="m388.378 263.726c-1.977 0-3.955-.755-5.463-2.263l-40.173-40.174c-3.018-3.018-3.018-7.909 0-10.928 3.018-3.016 7.91-3.016 10.927 0l40.173 40.174c3.018 3.018 3.018 7.909 0 10.928-1.509 1.509-3.487 2.263-5.464 2.263z" fill="#00adfc" style="fill: rgb(51, 51, 51);"></path></g><g><g><path d="m388.378 263.726c-1.977 0-3.955-.755-5.463-2.263-3.018-3.018-3.018-7.909 0-10.928l40.173-40.174c3.017-3.016 7.909-3.016 10.927 0 3.018 3.018 3.018 7.909 0 10.928l-40.173 40.174c-1.509 1.509-3.486 2.263-5.464 2.263z" fill="#00adfc" style="fill: rgb(51, 51, 51);"></path></g></g><g><path d="m255.86 396.109c-34.613 0-67.589-12.646-93.566-36.036-27.841-25.067-44.25-59.424-46.206-96.739-.223-4.262 3.05-7.897 7.311-8.12 4.277-.236 7.897 3.05 8.12 7.311 1.739 33.194 16.341 63.759 41.114 86.064s56.695 33.616 89.891 31.893c33.51-1.757 64.275-16.582 86.628-41.744 2.834-3.189 7.716-3.478 10.907-.645 3.19 2.834 3.479 7.717.645 10.908-25.12 28.278-59.701 44.938-97.372 46.911-2.496.132-4.991.197-7.472.197z" fill="#00adfc" style="fill: rgb(51, 51, 51);"></path></g><g><path d="m166.021 308.67c-1.842 0-3.691-.655-5.168-1.985l-42.22-38.015c-3.171-2.855-3.427-7.74-.572-10.911 2.856-3.17 7.741-3.428 10.912-.571l42.22 38.015c3.171 2.855 3.427 7.74.572 10.911-1.525 1.694-3.63 2.556-5.744 2.556z" fill="#00adfc" style="fill: rgb(51, 51, 51);"></path></g><g><g><path d="m85.785 312.875c-1.842 0-3.691-.655-5.168-1.985-3.171-2.855-3.427-7.74-.572-10.911l38.016-42.22c2.856-3.17 7.741-3.428 10.912-.571 3.171 2.855 3.427 7.74.572 10.911l-38.016 42.22c-1.525 1.694-3.63 2.556-5.744 2.556z" fill="#00adfc" style="fill: rgb(51, 51, 51);"></path></g></g></g></g></svg>
<a>The storage is full</a>
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><path d="m9 20c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l6.3-6.3-6.3-6.3c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l7 7c.4.4.4 1 0 1.4l-7 7c-.2.2-.4.3-.7.3z" fill="#000000" style="fill: rgb(255, 255, 255);"></path></g></svg>
</button>
</div>
<div class="info">
<div class="info-border">
<a>John — Personal</a>
<div class="progress-line"></div>
<a>5.0 GB of 5 GB used (100%)</a>
<a>You cannot transfer new files or send and receive email messages for this account.</a>
<button class="update-button">Update</button>
</div>
</div>
<div class="bottom">
<div class="square">
<svg viewBox="-31 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m418.804688 151h31.195312v-30h-35.730469l-30-60h-84.269531v-61h-150v61h-84.269531l-30 60h-35.730469v30h31.195312l30 361h327.609376zm-238.804688-121h90v31h-90zm-95.730469 61h281.460938l15 30h-311.460938zm4.535157 391-27.507813-331h327.40625l-27.507813 331zm0 0" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="m150 316c0-36.1875 25.757812-66.46875 59.902344-73.472656l-11.980469 11.605468 20.875 21.546876 54.734375-53.027344-57.777344-49.3125-19.476562 22.820312 18.023437 15.378906c-52.890625 5.378907-94.300781 50.175782-94.300781 104.460938 0 31.808594 14.1875 61.554688 38.921875 81.601562l18.890625-23.304687c-17.675781-14.324219-27.8125-35.574219-27.8125-58.296875zm0 0" fill="#000000" style="fill: rgb(255, 255, 255);"></path><path d="m278.03125 262.96875c14.167969 14.164062 21.96875 32.996094 21.96875 53.03125 0 33.820312-22.503906 62.472656-53.324219 71.792969l12.667969-12.269531-20.875-21.546876-54.734375 53.023438 57.777344 49.316406 19.476562-22.820312-16.726562-14.273438c48.730469-9.074218 85.738281-51.90625 85.738281-103.222656 0-28.046875-10.921875-54.414062-30.753906-74.246094zm0 0" fill="#000000" style="fill: rgb(255, 255, 255);"></path></svg>
<span class="tooltip">Bin</span>
</div>
<div class="square">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 339.033 339.033" style="enable-background:new 0 0 339.033 339.033;" xml:space="preserve"><g><g><path d="M169.516,0C76.044,0,0,76.045,0,169.517c0,93.471,76.044,169.516,169.516,169.516s169.516-76.044,169.516-169.516 S262.989,0,169.516,0z M143.367,17.224c-13.76,11.78-26.933,26.445-37.516,42.056c-4.766,7.031-9.051,14.291-12.856,21.737H42.93 C66.133,47.926,101.962,24.312,143.367,17.224z M162.016,244.596h-59.371c-8.934-19.363-15.104-41.7-16.14-66.79h75.511V244.596z M33.628,96.017h52.462c-8.754,21.293-13.708,43.833-14.594,66.79H15.156C16.19,138.717,22.756,116.037,33.628,96.017z M15.224,177.807H71.49c0.863,23.317,5.768,45.651,14.643,66.79H34.51C23.359,224.625,16.506,201.944,15.224,177.807z M44.05,259.596h49.157c3.749,7.149,7.968,14.15,12.671,20.988c12.478,18.143,25.89,31.638,37.218,41.179 C102.469,314.734,67.229,291.787,44.05,259.596z M162.016,317.587c-16.754-12.269-36.477-31.838-51.588-57.991h51.588V317.587z M162.016,162.807H86.505c0.934-23.32,6.239-45.666,15.834-66.79h59.678V162.807z M162.016,81.017H109.99 c2.556-4.502,5.31-8.944,8.276-13.32c15.442-22.78,32.369-37.697,43.75-46.15V81.017z M323.878,162.807h-56.341 c-0.886-22.957-5.84-45.497-14.594-66.79h52.461C316.276,116.037,322.844,138.717,323.878,162.807z M296.104,81.017h-50.064 c-3.805-7.446-8.091-14.706-12.856-21.737c-10.583-15.612-23.76-30.273-37.521-42.057 C237.068,24.311,272.898,47.925,296.104,81.017z M177.016,21.546c11.381,8.453,28.308,23.37,43.75,46.15 c2.966,4.376,5.72,8.818,8.276,13.32h-52.026V21.546z M177.016,96.017h59.678c9.595,21.124,14.9,43.47,15.834,66.79h-75.512 V96.017z M177.016,177.807L177.016,177.807h75.512c-1.035,25.09-7.206,47.427-16.14,66.79h-59.372V177.807z M177.016,259.596 h51.588c-15.111,26.152-34.834,45.722-51.588,57.991V259.596z M195.94,321.763c11.327-9.54,24.738-23.038,37.215-41.178 c4.703-6.838,8.922-13.839,12.671-20.988h49.157C271.805,291.786,236.566,314.733,195.94,321.763z M304.523,244.596h-51.622 c8.875-21.139,13.78-43.472,14.643-66.79h56.265C322.526,201.944,315.674,224.625,304.523,244.596z" fill="#000000" style="fill: rgb(255, 255, 255);"></path></g></g></svg>
<span class="tooltip">Search the Internet</span>