<!-- From Uiverse.io by KSAplay --> <div class="card"> <section class="info-section"> <div class="background-design"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div> <div class="left-side"> <div class="weather"> <div> <svg stroke="#ffffff" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" > <g stroke-width="0" id="SVGRepo_bgCarrier"></g> <g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier" ></g> <g id="SVGRepo_iconCarrier"> <path d="M512 704a192 192 0 1 0 0-384 192 192 0 0 0 0 384zm0 64a256 256 0 1 1 0-512 256 256 0 0 1 0 512zm0-704a32 32 0 0 1 32 32v64a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 768a32 32 0 0 1 32 32v64a32 32 0 1 1-64 0v-64a32 32 0 0 1 32-32zM195.2 195.2a32 32 0 0 1 45.248 0l45.248 45.248a32 32 0 1 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm543.104 543.104a32 32 0 0 1 45.248 0l45.248 45.248a32 32 0 0 1-45.248 45.248l-45.248-45.248a32 32 0 0 1 0-45.248zM64 512a32 32 0 0 1 32-32h64a32 32 0 0 1 0 64H96a32 32 0 0 1-32-32zm768 0a32 32 0 0 1 32-32h64a32 32 0 1 1 0 64h-64a32 32 0 0 1-32-32zM195.2 828.8a32 32 0 0 1 0-45.248l45.248-45.248a32 32 0 0 1 45.248 45.248L240.448 828.8a32 32 0 0 1-45.248 0zm543.104-543.104a32 32 0 0 1 0-45.248l45.248-45.248a32 32 0 0 1 45.248 45.248l-45.248 45.248a32 32 0 0 1-45.248 0z" fill="#ffffff" ></path> </g> </svg> </div> <div>Sunny</div> </div> <div class="temperature">36°</div> <div class="range">42°/28°</div> </div> <div class="right-side"> <div> <div class="hour">23:56</div> <div class="date">MON 08-23</div> </div> <div class="city">A Coruña</div> </div> </section> <section class="days-section"> <button> <span class="day">TUE</span> <span class="icon-weather-day" ><svg stroke="#ffffff" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" > <g stroke-width="0" id="SVGRepo_bgCarrier"></g> <g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier" ></g> <g id="SVGRepo_iconCarrier"> <path d="M512 704a192 192 0 1 0 0-384 192 192 0 0 0 0 384zm0 64a256 256 0 1 1 0-512 256 256 0 0 1 0 512zm0-704a32 32 0 0 1 32 32v64a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 768a32 32 0 0 1 32 32v64a32 32 0 1 1-64 0v-64a32 32 0 0 1 32-32zM195.2 195.2a32 32 0 0 1 45.248 0l45.248 45.248a32 32 0 1 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm543.104 543.104a32 32 0 0 1 45.248 0l45.248 45.248a32 32 0 0 1-45.248 45.248l-45.248-45.248a32 32 0 0 1 0-45.248zM64 512a32 32 0 0 1 32-32h64a32 32 0 0 1 0 64H96a32 32 0 0 1-32-32zm768 0a32 32 0 0 1 32-32h64a32 32 0 1 1 0 64h-64a32 32 0 0 1-32-32zM195.2 828.8a32 32 0 0 1 0-45.248l45.248-45.248a32 32 0 0 1 45.248 45.248L240.448 828.8a32 32 0 0 1-45.248 0zm543.104-543.104a32 32 0 0 1 0-45.248l45.248-45.248a32 32 0 0 1 45.248 45.248l-45.248 45.248a32 32 0 0 1-45.248 0z" fill="#ffffff" ></path> </g></svg ></span> </button> <button> <span class="day">WED</span> <span class="icon-weather-day"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff" > <g id="SVGRepo_bgCarrier" stroke-width="0"></g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" ></g> <g id="SVGRepo_iconCarrier"> <path d="M16 18.5L15 21M8 18.5L7 21M12 18.5L11 21M7 15C4.23858 15 2 12.7614 2 10C2 7.23858 4.23858 5 7 5C7.03315 5 7.06622 5.00032 7.09922 5.00097C8.0094 3.2196 9.86227 2 12 2C14.5192 2 16.6429 3.69375 17.2943 6.00462C17.3625 6.00155 17.4311 6 17.5 6C19.9853 6 22 8.01472 22 10.5C22 12.9853 19.9853 15 17.5 15C13.7434 15 11.2352 15 7 15Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ></path> </g> </svg> </span> </button> <button> <span class="day">THU</span> <span class="icon-weather-day"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff" > <g id="SVGRepo_bgCarrier" stroke-width="0"></g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" ></g> <g id="SVGRepo_iconCarrier"> <path d="M16 18.5L15 21M8 18.5L7 21M12 18.5L11 21M7 15C4.23858 15 2 12.7614 2 10C2 7.23858 4.23858 5 7 5C7.03315 5 7.06622 5.00032 7.09922 5.00097C8.0094 3.2196 9.86227 2 12 2C14.5192 2 16.6429 3.69375 17.2943 6.00462C17.3625 6.00155 17.4311 6 17.5 6C19.9853 6 22 8.01472 22 10.5C22 12.9853 19.9853 15 17.5 15C13.7434 15 11.2352 15 7 15Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ></path> </g> </svg> </span> </button> <button> <span class="day">FRI</span> <span class="icon-weather-day"> <svg stroke="#ffffff" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" > <g stroke-width="0" id="SVGRepo_bgCarrier"></g> <g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier" ></g> <g id="SVGRepo_iconCarrier"> <path d="M512 704a192 192 0 1 0 0-384 192 192 0 0 0 0 384zm0 64a256 256 0 1 1 0-512 256 256 0 0 1 0 512zm0-704a32 32 0 0 1 32 32v64a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 768a32 32 0 0 1 32 32v64a32 32 0 1 1-64 0v-64a32 32 0 0 1 32-32zM195.2 195.2a32 32 0 0 1 45.248 0l45.248 45.248a32 32 0 1 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm543.104 543.104a32 32 0 0 1 45.248 0l45.248 45.248a32 32 0 0 1-45.248 45.248l-45.248-45.248a32 32 0 0 1 0-45.248zM64 512a32 32 0 0 1 32-32h64a32 32 0 0 1 0 64H96a32 32 0 0 1-32-32zm768 0a32 32 0 0 1 32-32h64a32 32 0 1 1 0 64h-64a32 32 0 0 1-32-32zM195.2 828.8a32 32 0 0 1 0-45.248l45.248-45.248a32 32 0 0 1 45.248 45.248L240.448 828.8a32 32 0 0 1-45.248 0zm543.104-543.104a32 32 0 0 1 0-45.248l45.248-45.248a32 32 0 0 1 45.248 45.248l-45.248 45.248a32 32 0 0 1-45.248 0z" fill="#ffffff" ></path> </g> </svg> </span> </button> </section> </div>
/* From Uiverse.io by KSAplay */ .card { display: flex; flex-direction: column; align-items: center; height: 180px; width: 280px; border-radius: 25px; background: lightgrey; overflow: hidden; transition: 100ms ease; box-shadow: rgba(0, 0, 0, 0.15) 2px 3px 4px; } /* ---------- Info section ---------- */ .info-section { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 75%; color: white; } .left-side { display: flex; flex-direction: column; justify-content: space-around; height: 100%; z-index: 1; padding-left: 18px; } button { display: block; border: none; background: transparent; } .weather { display: flex; align-items: center; justify-content: flex-start; gap: 5px; } .weather div { display: flex; align-items: center; } .weather div:nth-child(1) { width: 40%; height: auto; } .temperature { font-size: 34pt; font-weight: 500; line-height: 8%; } .right-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-around; height: 100%; padding-right: 18px; z-index: 1; } .right-side > div { display: flex; flex-direction: column; align-items: flex-end; } .hour { font-size: 19pt; line-height: 1em; } .date { font-size: 15px; } /* ---------- Background ---------- */ .background-design { position: absolute; height: 100%; width: 100%; background-color: #ec7263; overflow: hidden; } .circle { background-color: #efc745; } .circle:nth-child(1) { position: absolute; top: -80%; right: -50%; width: 300px; height: 300px; opacity: 0.4; border-radius: 50%; } .circle:nth-child(2) { position: absolute; top: -70%; right: -30%; width: 210px; height: 210px; opacity: 0.4; border-radius: 50%; } .circle:nth-child(3) { position: absolute; top: -35%; right: -8%; width: 100px; height: 100px; opacity: 1; border-radius: 50%; } /* ---------- Days section ---------- */ .days-section { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 25%; background-color: #974859; gap: 2px; box-shadow: inset 0px 2px 5px #974859; } .days-section button { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; background-color: #a75265; box-shadow: inset 0px 2px 5px #974859; cursor: pointer; transition: 100ms ease; gap: 5px; } .days-section button:hover { scale: 0.9; border-radius: 10px; } .days-section .day { font-size: 10pt; font-weight: 500; color: white; opacity: 0.7; } .icon-weather-day { display: flex; align-items: center; width: 20px; height: 100%; }
100%
Comments
Please log in to join the conversation
Loading Comments