luizfelipe9627/practice-time-landing-page
1
0
Fork 0
forked from M3-Academy/practice-time-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/section3 #4

Merged
luizfelipe9627 merged 4 commits from section3 into main 2022-10-18 18:33:38 +00:00
Conversation 0 Commits 4 Files Changed 7 +107 -31
7 changed files with 107 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

@ -39,6 +39,32 @@
<img src="./src/assets/svg/computadores.svg" alt="Computadores">
</div>
</section>
<section class="section3">
<div class="card">
<img src="./src/assets/svg/shopping.svg" alt="Shopping">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
<div class="card">
<img src="./src/assets/svg/compras.svg" alt="Bolsa de compras">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
<div class="card">
<img src="./src/assets/svg/moeda.svg" alt="Moeda">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
</section>
</main>
</body>
</html>

59
src/assets/css/style.css
View File

@ -9,6 +9,11 @@
font-family: 'Inter', sans-serif;
}
body {
background-color: #F0F0F0;
overflow-x: hidden;
}
header {
width: 100%;
height: 100px;
@ -58,6 +63,36 @@ header {
margin-right: 124px;
}
/* SECTION 3 */
.section3 {
padding: 74px 0;
display: grid;
/* O max-content preenche 100% do espaço disponível, no caso respeitando o tamanho dos card. */
grid-template-columns: repeat(3, max-content);
justify-content: center;
gap: 20px;
background-color: #E5E5E5;
flex-wrap: wrap;
}
.card {
text-align: center;
background-color: #FFFFFF;
padding: 34px 26px;
flex-direction: column;
box-shadow: 0px 4px 20px 0px #0000003B;
}
.card img {
padding-bottom: 26px;
}
.card p {
line-height: 24px;
max-width: 300px;
}
/* RESPONSIVIDADE -> NOTEBOOK */
@media screen and (min-width: 993px) and (max-width: 1280px) {
@ -66,6 +101,12 @@ header {
}
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
.section3 {
grid-template-columns: repeat(2, max-content);
}
}
/* RESPONSIVIDADE -> TABLET */
@media screen and (max-width: 992px) {
@ -88,7 +129,23 @@ header {
.container-img img {
width: 100%;
max-width: 240px;
margin: 67px 88px 157px 88px;
margin: 67px 0 157px 0;
}
}
@media screen and (max-width: 768px) {
.section3 {
grid-template-columns: 1fr;
padding: 37px 0;
gap: 16px;
}
.card {
margin: 0 32px;
}
.card p {
max-width: none;
}
}

12
src/assets/svg/bolsa.svg
View File

@ -1,12 +0,0 @@
<svg width="102" height="103" viewBox="0 0 102 103" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_59_952)">
<path d="M63.7912 95.3056H18.2303V26.7631H28.9V37.1243C28.9 38.2353 29.7919 39.136 30.8922 39.136C31.9923 39.136 32.8844 38.2353 32.8844 37.1243V26.7631H60.2063V37.1243C60.2063 38.2353 61.0984 39.136 62.1984 39.136C63.2985 39.136 64.1906 38.2353 64.1906 37.1243V26.7631H74.5273V48.0779H78.5117V24.7514C78.5117 23.6403 77.6196 22.7397 76.5195 22.7397H64.1906V17.7287C64.1906 7.95313 56.2751 0 46.5454 0C44.3154 0 42.1805 0.417834 40.2145 1.17967C38.2484 0.417834 36.1135 0 33.8835 0C24.1536 0 16.2381 7.95313 16.2381 17.7287V22.7395H3.90923C2.80914 22.7395 1.91704 23.6401 1.91704 24.7512V89.7613C1.91704 95.0368 6.17415 99.3288 11.4068 99.3288H69.8044C67.8365 98.2564 65.7517 96.925 63.7912 95.3056ZM46.5454 4.02344C54.0781 4.02344 60.2063 10.1717 60.2063 17.7287V22.7395H51.5287V17.7287C51.5287 12.2528 49.045 7.34901 45.1501 4.09425C45.6089 4.04758 46.0745 4.02344 46.5454 4.02344ZM40.2145 5.58614C44.5682 7.8801 47.5445 12.4624 47.5445 17.7289V22.7397H32.8844V17.7287C32.8844 12.4622 35.8607 7.8801 40.2145 5.58614ZM20.2225 17.7287C20.2225 10.1717 26.3508 4.02344 33.8835 4.02344C34.3544 4.02344 34.8198 4.04738 35.2786 4.09445C31.3837 7.34901 28.8998 12.253 28.8998 17.7289V22.7397H20.2223V17.7287H20.2225ZM14.2459 95.3056H11.4068C8.37113 95.3056 5.90142 92.8185 5.90142 89.7615V26.7631H14.2459V95.3056Z" fill="black"/>
<path d="M93.7992 54.7375C87.7766 54.7375 82.5819 51.191 80.165 46.0659H73.082C70.6651 51.1908 65.4705 54.7375 59.4479 54.7375C57.2051 54.7375 55.0772 54.2452 53.1641 53.3635V78.4196C53.1641 96.7462 76.6235 103 76.6235 103C76.6235 103 100.083 96.7462 100.083 78.4196V53.3635C98.1698 54.2452 96.0418 54.7375 93.7992 54.7375Z" fill="#0336DB"/>
<path d="M75.8531 81.6054C75.328 81.6054 74.8228 81.3957 74.4487 81.0201L70.1192 76.673C69.3389 75.8895 69.3353 74.6158 70.1113 73.828C70.8868 73.0401 72.1483 73.0364 72.9286 73.82L75.7249 76.6276L82.99 67.9301C83.6996 67.0807 84.9563 66.9733 85.7972 67.6895C86.6383 68.4059 86.745 69.6751 86.0354 70.5244L77.3762 80.891C77.0172 81.3207 76.4968 81.579 75.9406 81.6035C75.9113 81.6047 75.8824 81.6054 75.8531 81.6054Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_59_952">
<rect width="102" height="103" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

7
src/assets/svg/compra.svg
View File

@ -1,7 +0,0 @@
<svg width="104" height="86" viewBox="0 0 104 86" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M45.8327 53.512V34.6035C45.8327 33.4816 44.9233 32.5722 43.8015 32.5722H38.1581V31.5101C38.1581 27.7803 35.1077 24.7456 31.3585 24.7456C27.6092 24.7456 24.559 27.7801 24.559 31.5101V32.5722H18.95C17.8281 32.5722 16.9187 33.4816 16.9187 34.6035V53.512C16.9187 57.0242 19.7761 59.8816 23.2883 59.8816H39.4633C42.9754 59.8816 45.8327 57.0242 45.8327 53.512ZM28.6217 31.5103C28.6217 30.0204 29.8496 28.8083 31.3587 28.8083C32.8679 28.8083 34.0958 30.0204 34.0958 31.5103V32.5724H28.6217V31.5103ZM20.9812 53.512V36.6347H24.5592V38.67C24.5592 39.7917 25.4686 40.7013 26.5905 40.7013C27.7124 40.7013 28.6217 39.7917 28.6217 38.67V36.6347H34.0958V38.67C34.0958 39.7917 35.0052 40.7013 36.127 40.7013C37.2489 40.7013 38.1583 39.7917 38.1583 38.67V36.6347H41.7704V53.512C41.7704 54.7841 40.7355 55.8191 39.4635 55.8191H23.2883C22.0161 55.8191 20.9812 54.7841 20.9812 53.512Z" fill="black"/>
<path d="M101.969 66.9619H100.063V8.39056C100.063 3.82675 96.3499 0.113831 91.7861 0.113831H12.2139C7.65009 0.113831 3.93717 3.82675 3.93717 8.39056V66.9619H2.03125C0.909391 66.9619 0 67.8715 0 68.9931V76.5912C0 81.7165 4.16955 85.8862 9.2948 85.8862H94.705C99.8302 85.8862 104 81.7167 104 76.5912V68.9931C104 67.8713 103.091 66.9619 101.969 66.9619ZM12.2139 4.17633H91.7861C94.1098 4.17633 96.0003 6.06681 96.0003 8.39056V14.0448H7.99967V8.39056C7.99967 6.06681 9.89016 4.17633 12.2139 4.17633ZM7.99967 18.1073H96.0003V66.9619H66.7028C65.5809 66.9619 64.6715 67.8715 64.6715 68.9931C64.6715 70.2905 63.6161 71.3459 62.3187 71.3459H41.6812C40.3839 71.3459 39.3285 70.2905 39.3285 68.9931C39.3285 67.8715 38.4191 66.9619 37.2972 66.9619H7.99967V18.1073ZM99.9375 76.5912C99.9375 79.4764 97.5902 81.8237 94.7052 81.8237H9.2948C6.40961 81.8237 4.0625 79.4764 4.0625 76.5912V71.0244H35.5954C36.4471 73.5691 38.8533 75.4084 41.681 75.4084H62.3187C65.1465 75.4084 67.5529 73.5691 68.4044 71.0244H99.9375V76.5912Z" fill="black"/>
<path d="M50.859 10.902H53.1409C54.2628 10.902 55.1722 9.99244 55.1722 8.87079C55.1722 7.74913 54.2628 6.83954 53.1409 6.83954H50.859C49.7372 6.83954 48.8278 7.74913 48.8278 8.87079C48.8278 9.99244 49.7372 10.902 50.859 10.902Z" fill="black"/>
<path d="M55.3624 46.2268H87.9032V56.4397H55.3624V46.2268Z" fill="#0336DB"/>
<path d="M55.3624 28.4568H87.9032V38.6698H55.3624V28.4568Z" fill="#0336DB"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

12
src/assets/svg/compras.svg Normal file
View File

@ -0,0 +1,12 @@
<svg width="102" height="103" viewBox="0 0 102 103" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2_133)">
<path d="M63.7912 95.3056H18.2303V26.7631H28.9V37.1243C28.9 38.2353 29.7919 39.136 30.8922 39.136C31.9923 39.136 32.8844 38.2353 32.8844 37.1243V26.7631H60.2063V37.1243C60.2063 38.2353 61.0984 39.136 62.1985 39.136C63.2985 39.136 64.1906 38.2353 64.1906 37.1243V26.7631H74.5273V48.0779H78.5117V24.7514C78.5117 23.6403 77.6196 22.7397 76.5195 22.7397H64.1906V17.7287C64.1906 7.95313 56.2751 0 46.5454 0C44.3154 0 42.1806 0.417834 40.2145 1.17967C38.2484 0.417834 36.1135 0 33.8835 0C24.1537 0 16.2381 7.95313 16.2381 17.7287V22.7395H3.90924C2.80915 22.7395 1.91705 23.6401 1.91705 24.7512V89.7613C1.91705 95.0368 6.17416 99.3288 11.4068 99.3288H69.8044C67.8365 98.2564 65.7517 96.925 63.7912 95.3056ZM46.5454 4.02344C54.0781 4.02344 60.2063 10.1717 60.2063 17.7287V22.7395H51.5287V17.7287C51.5287 12.2528 49.045 7.34901 45.1501 4.09425C45.6089 4.04758 46.0745 4.02344 46.5454 4.02344ZM40.2145 5.58614C44.5682 7.8801 47.5445 12.4624 47.5445 17.7289V22.7397H32.8844V17.7287C32.8844 12.4622 35.8607 7.8801 40.2145 5.58614ZM20.2225 17.7287C20.2225 10.1717 26.3508 4.02344 33.8835 4.02344C34.3544 4.02344 34.8198 4.04738 35.2786 4.09445C31.3837 7.34901 28.8998 12.253 28.8998 17.7289V22.7397H20.2223V17.7287H20.2225ZM14.2459 95.3056H11.4068C8.37114 95.3056 5.90143 92.8185 5.90143 89.7615V26.7631H14.2459V95.3056Z" fill="black"/>
<path d="M93.7992 54.7374C87.7766 54.7374 82.582 51.191 80.165 46.0659H73.082C70.6651 51.1908 65.4705 54.7374 59.4479 54.7374C57.2051 54.7374 55.0772 54.2452 53.1641 53.3634V78.4196C53.1641 96.7462 76.6235 103 76.6235 103C76.6235 103 100.083 96.7462 100.083 78.4196V53.3634C98.1698 54.2452 96.0418 54.7374 93.7992 54.7374Z" fill="#00C8FF"/>
<path d="M75.8532 81.6053C75.328 81.6053 74.8228 81.3957 74.4487 81.0201L70.1193 76.673C69.3389 75.8894 69.3353 74.6158 70.1113 73.828C70.8868 73.04 72.1483 73.0364 72.9286 73.82L75.7249 76.6275L82.99 67.9301C83.6996 67.0807 84.9563 66.9733 85.7972 67.6895C86.6383 68.4058 86.7451 69.675 86.0354 70.5244L77.3762 80.891C77.0172 81.3207 76.4968 81.579 75.9406 81.6035C75.9113 81.6047 75.8825 81.6053 75.8532 81.6053Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_2_133">
<rect width="102" height="103" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

6
src/assets/svg/moeda.svg
View File

@ -1,6 +1,6 @@
<svg width="102" height="103" viewBox="0 0 102 103" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M71.4307 52.972C81.8615 52.972 90.3174 44.4332 90.3174 33.9001C90.3174 23.367 81.8615 14.8282 71.4307 14.8282C60.9998 14.8282 52.5439 23.367 52.5439 33.9001C52.5439 44.4332 60.9998 52.972 71.4307 52.972Z" fill="#0336DB"/>
<path d="M71.4307 63.8353C87.7768 63.8353 101.075 50.4065 101.075 33.9003C101.075 17.3939 87.7768 3.96512 71.4307 3.96512C55.0846 3.96512 41.7861 17.3939 41.7861 33.9003C41.7861 50.4065 55.0846 63.8353 71.4307 63.8353ZM71.4307 7.98856C85.5796 7.98856 97.0909 19.6125 97.0909 33.9003C97.0909 48.1879 85.5798 59.8118 71.4307 59.8118C57.2818 59.8118 45.7705 48.1879 45.7705 33.9003C45.7705 19.6125 57.2816 7.98856 71.4307 7.98856Z" fill="black"/>
<path d="M68.085 38.9238C67.3947 38.0586 66.1408 37.9224 65.2837 38.6193C64.4269 39.3163 64.292 40.5827 64.9821 41.4479C66.0804 42.8246 67.6548 43.6067 69.2231 43.9815C69.3066 45.0149 70.1636 45.8272 71.2085 45.8272C72.204 45.8272 73.029 45.09 73.177 44.1265C75.9828 43.6208 77.9517 41.7344 78.2746 39.1662C78.6499 36.1831 76.7336 33.3222 73.6147 32.2089C73.4726 32.1582 73.3348 32.1087 73.2007 32.0602V28.1845C73.3666 28.2913 73.4904 28.408 73.5689 28.5206C74.2004 29.4301 75.4429 29.6504 76.344 29.0119C77.2446 28.3738 77.4624 27.1191 76.8303 26.2096C76.1057 25.1665 74.8403 24.2815 73.1995 23.917C73.164 22.8373 72.2863 21.9731 71.2085 21.9731C70.1082 21.9731 69.2163 22.8737 69.2163 23.9848V24.0522C69.094 24.0846 68.9709 24.1194 68.847 24.1572C66.7556 24.7935 65.1774 26.8388 65.009 29.1314C64.8417 31.4097 66.0358 33.3858 68.2031 34.4178C68.4394 34.5304 68.7846 34.6777 69.2161 34.8513V39.7555C68.7593 39.5479 68.3625 39.2717 68.085 38.9238ZM74.3219 38.6593C74.2478 39.2485 73.8527 39.6985 73.2007 39.9653V36.4707C74.0759 37.0916 74.4086 37.9713 74.3219 38.6593ZM68.9828 29.4289C69.0018 29.1694 69.087 28.9123 69.2165 28.6878V30.261C69.0362 30.025 68.9591 29.749 68.9828 29.4289Z" fill="white"/>
<path d="M71.4307 52.9719C81.8615 52.9719 90.3174 44.4332 90.3174 33.9C90.3174 23.3669 81.8615 14.8281 71.4307 14.8281C60.9998 14.8281 52.5439 23.3669 52.5439 33.9C52.5439 44.4332 60.9998 52.9719 71.4307 52.9719Z" fill="#00C8FF"/>
<path d="M71.4307 63.8352C87.7768 63.8352 101.075 50.4064 101.075 33.9003C101.075 17.3939 87.7768 3.96509 71.4307 3.96509C55.0846 3.96509 41.7861 17.3939 41.7861 33.9003C41.7861 50.4064 55.0846 63.8352 71.4307 63.8352ZM71.4307 7.98853C85.5796 7.98853 97.0909 19.6124 97.0909 33.9003C97.0909 48.1879 85.5798 59.8118 71.4307 59.8118C57.2818 59.8118 45.7705 48.1879 45.7705 33.9003C45.7705 19.6124 57.2816 7.98853 71.4307 7.98853Z" fill="black"/>
<path d="M68.085 38.9238C67.3947 38.0585 66.1408 37.9223 65.2837 38.6192C64.4269 39.3163 64.292 40.5826 64.9821 41.4479C66.0804 42.8245 67.6548 43.6067 69.2231 43.9814C69.3066 45.0149 70.1636 45.8272 71.2085 45.8272C72.204 45.8272 73.029 45.0899 73.177 44.1265C75.9828 43.6207 77.9517 41.7343 78.2746 39.1662C78.6499 36.183 76.7336 33.3221 73.6147 32.2089C73.4726 32.1582 73.3348 32.1087 73.2007 32.0602V28.1844C73.3666 28.2912 73.4904 28.4079 73.5689 28.5206C74.2004 29.4301 75.4429 29.6503 76.344 29.0118C77.2446 28.3737 77.4624 27.119 76.8303 26.2095C76.1057 25.1664 74.8403 24.2815 73.1995 23.9169C73.164 22.8373 72.2863 21.973 71.2085 21.973C70.1082 21.973 69.2163 22.8737 69.2163 23.9847V24.0521C69.094 24.0845 68.9709 24.1193 68.847 24.1571C66.7556 24.7935 65.1774 26.8388 65.009 29.1313C64.8417 31.4096 66.0358 33.3857 68.2031 34.4177C68.4394 34.5304 68.7846 34.6776 69.2161 34.8512V39.7554C68.7593 39.5478 68.3625 39.2716 68.085 38.9238ZM74.3219 38.6592C74.2478 39.2485 73.8527 39.6985 73.2007 39.9652V36.4707C74.0759 37.0915 74.4086 37.9712 74.3219 38.6592ZM68.9828 29.4289C69.0018 29.1693 69.087 28.9122 69.2165 28.6877V30.2609C69.0362 30.0249 68.9591 29.7489 68.9828 29.4289Z" fill="white"/>
<path d="M101.992 72.3911C101.887 69.9491 100.766 67.8492 98.8342 66.4786C95.6513 64.2197 91.3553 64.612 88.6187 67.4111C88.531 67.5008 88.4517 67.5986 88.3822 67.7034L84.0117 74.2787C82.7881 71.3623 79.9453 69.3136 76.6424 69.3136L45.1993 69.2922H45.198C44.721 69.2922 44.2602 69.4648 43.8988 69.7789L36.0217 76.6221H30.2733V74.854C30.2733 73.743 29.3812 72.8423 28.2811 72.8423H19.5095V72.5671C19.5095 71.456 18.6174 70.5554 17.5173 70.5554H1.99219C0.891902 70.5554 0 71.456 0 72.5671V96.1601C0 97.2712 0.891902 98.1719 1.99219 98.1719H17.5173C18.6174 98.1719 19.5095 97.2712 19.5095 96.1601V95.8849H28.2809C29.381 95.8849 30.2731 94.9843 30.2731 93.8732V92.0156H36.8786L42.846 98.4034C43.2227 98.8066 43.747 99.0347 44.2951 99.0347C44.3045 99.0347 44.3138 99.0347 44.3232 99.0345L85.4646 98.4517C86.1065 98.4426 86.7048 98.1218 87.0715 97.5899L100.143 78.6347C100.152 78.6228 100.16 78.6107 100.168 78.5988C101.433 76.6766 102.081 74.472 101.992 72.3911ZM15.5251 94.1484H3.98438V74.5788H15.5251V94.1484ZM26.2887 91.8617H19.5095V76.8657H26.2887V91.8617ZM96.8612 76.3538L84.3863 94.4433L45.1434 94.9992L39.1875 88.6236C38.811 88.2207 38.2869 87.9924 37.7384 87.9924H30.2733V80.6456H36.7608C37.2378 80.6456 37.6986 80.473 38.0599 80.1589L45.9365 73.3163L76.6411 73.3372C78.8617 73.3372 80.6685 75.1952 80.6685 77.4791C80.6685 79.7628 78.8619 81.6206 76.6411 81.6206C76.6359 81.6206 76.6307 81.6208 76.6255 81.6208H59.4449C58.8982 81.6208 58.3755 81.8478 57.9992 82.2485L53.808 86.7125C53.051 87.5188 53.0846 88.792 53.8831 89.5565C54.2684 89.9252 54.7612 90.1083 55.2533 90.1083C55.7811 90.1083 56.3078 89.8979 56.6995 89.4806L60.3013 85.6443L80.1927 85.6451H80.1933C80.8571 85.6451 81.4775 85.3111 81.8474 84.7545L91.5757 70.119C92.9429 68.8324 95.0052 68.6787 96.5432 69.7706C98.6193 71.2438 98.275 74.1936 96.8612 76.3538Z" fill="black"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

16
src/assets/svg/shopping.svg
View File

@ -1,13 +1,13 @@
<svg width="103" height="103" viewBox="0 0 103 103" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_59_964)">
<path d="M73.2652 54.4426H96.068V75.7642H73.2652V54.4426Z" fill="#0336DB"/>
<path d="M6.93198 54.4426H29.7348V75.7642H6.93198V54.4426Z" fill="#0336DB"/>
<path d="M40.8369 54.4426H62.1631V89.3342H40.8369V54.4426Z" fill="#0336DB"/>
<path d="M95.3669 10.9888H7.63306C3.42415 10.9888 0 14.4131 0 18.6219V33.3092C0 37.012 1.97169 40.2627 4.92026 42.067V89.9995C4.92026 91.1105 5.82091 92.0112 6.93198 92.0112H96.068C97.1791 92.0112 98.0797 91.1105 98.0797 89.9995V42.067C101.028 40.2627 103 37.012 103 33.3092V18.6219C103 14.4131 99.5757 10.9888 95.3669 10.9888ZM82.4805 33.3092C82.4805 36.7479 79.683 39.5453 76.2441 39.5453C72.8053 39.5453 70.0078 36.7479 70.0078 33.3092V15.0122H82.4805V33.3092ZM65.9844 33.3092C65.9844 36.7479 63.1869 39.5453 59.748 39.5453C56.3092 39.5453 53.5117 36.7479 53.5117 33.3092V15.0122H65.9844V33.3092ZM49.4883 33.3092C49.4883 36.7479 46.6908 39.5453 43.252 39.5453C39.8131 39.5453 37.0156 36.7479 37.0156 33.3092V15.0122H49.4883V33.3092ZM32.9922 33.3092C32.9922 36.7479 30.1947 39.5453 26.7559 39.5453C23.317 39.5453 20.5195 36.7479 20.5195 33.3092V15.0122H32.9922V33.3092ZM4.02344 18.6219C4.02344 16.6315 5.64287 15.0122 7.63306 15.0122H16.4961V33.3092C16.4961 36.7479 13.6986 39.5453 10.2598 39.5453C6.82093 39.5453 4.02344 36.7479 4.02344 33.3092V18.6219ZM94.0563 87.9877H8.9437V43.4849C9.37461 43.5402 9.81397 43.569 10.2598 43.569C13.6362 43.569 16.6371 41.9294 18.5078 39.4047C20.3785 41.9294 23.3794 43.569 26.7559 43.569C30.1323 43.569 33.1332 41.9294 35.0039 39.4047C36.8746 41.9294 39.8755 43.569 43.252 43.569C46.6284 43.569 49.6293 41.9294 51.5 39.4047C53.3707 41.9294 56.3716 43.569 59.748 43.569C63.1245 43.569 66.1254 41.9294 67.9961 39.4047C69.8668 41.9294 72.8677 43.569 76.2441 43.569C79.6206 43.569 82.6215 41.9294 84.4922 39.4047C86.3629 41.9294 89.3638 43.569 92.7402 43.569C93.186 43.569 93.6254 43.5404 94.0563 43.4849V87.9877ZM98.9766 33.3092C98.9766 36.7479 96.1791 39.5453 92.7402 39.5453C89.3014 39.5453 86.5039 36.7479 86.5039 33.3092V15.0122H95.3669C97.3573 15.0122 98.9766 16.6315 98.9766 18.6219V33.3092Z" fill="black"/>
<svg width="104" height="103" viewBox="0 0 104 103" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2_145)">
<path d="M73.8313 54.6077H96.5312V75.8331H73.8313V54.6077Z" fill="#00C8FF"/>
<path d="M7.79743 54.6077H30.4974V75.8331H7.79743V54.6077Z" fill="#00C8FF"/>
<path d="M41.5493 54.6077H62.7793V89.3419H41.5493V54.6077Z" fill="#00C8FF"/>
<path d="M95.8333 11.35H8.49535C4.30542 11.35 0.896729 14.7589 0.896729 18.9486V33.5697C0.896729 37.2557 2.85952 40.4918 5.79479 42.288V90.0041C5.79479 91.1102 6.69137 92.0067 7.79743 92.0067H96.5312C97.6373 92.0067 98.5339 91.1102 98.5339 90.0041V42.288C101.469 40.4918 103.432 37.2557 103.432 33.5697V18.9486C103.432 14.7589 100.023 11.35 95.8333 11.35ZM83.005 33.5697C83.005 36.9928 80.2201 39.7777 76.7968 39.7777C73.3735 39.7777 70.5886 36.9928 70.5886 33.5697V15.3553H83.005V33.5697ZM66.5833 33.5697C66.5833 36.9928 63.7985 39.7777 60.3752 39.7777C56.9518 39.7777 54.167 36.9928 54.167 33.5697V15.3553H66.5833V33.5697ZM50.1617 33.5697C50.1617 36.9928 47.3768 39.7777 43.9535 39.7777C40.5302 39.7777 37.7453 36.9928 37.7453 33.5697V15.3553H50.1617V33.5697ZM33.74 33.5697C33.74 36.9928 30.9552 39.7777 27.5319 39.7777C24.1085 39.7777 21.3237 36.9928 21.3237 33.5697V15.3553H33.74V33.5697ZM4.90201 18.9486C4.90201 16.9672 6.51414 15.3553 8.49535 15.3553H17.3184V33.5697C17.3184 36.9928 14.5335 39.7777 11.1102 39.7777C7.68688 39.7777 4.90201 36.9928 4.90201 33.5697V18.9486ZM94.5286 88.0015H9.80007V43.6994C10.229 43.7545 10.6664 43.7831 11.1102 43.7831C14.4714 43.7831 17.4588 42.151 19.321 39.6377C21.1833 42.151 24.1706 43.7831 27.5319 43.7831C30.8931 43.7831 33.8804 42.151 35.7427 39.6377C37.6049 42.151 40.5923 43.7831 43.9535 43.7831C47.3147 43.7831 50.3021 42.151 52.1643 39.6377C54.0266 42.151 57.0139 43.7831 60.3752 43.7831C63.7364 43.7831 66.7237 42.151 68.586 39.6377C70.4482 42.151 73.4356 43.7831 76.7968 43.7831C80.1581 43.7831 83.1454 42.151 85.0076 39.6377C86.8699 42.151 89.8572 43.7831 93.2185 43.7831C93.6623 43.7831 94.0996 43.7547 94.5286 43.6994V88.0015ZM99.4267 33.5697C99.4267 36.9928 96.6418 39.7777 93.2185 39.7777C89.7952 39.7777 87.0103 36.9928 87.0103 33.5697V15.3553H95.8333C97.8147 15.3553 99.4267 16.9672 99.4267 18.9486V33.5697Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_59_964">
<rect width="103" height="103" fill="white"/>
<clipPath id="clip0_2_145">
<rect width="102.535" height="102.535" fill="white" transform="translate(0.896729 0.410767)"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB