HTMLify
cart.css
Views: 12 | Author: cody
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | body { margin: 0; font-family: 'Lato', sans-serif; } #cartMainContainer { padding: 90px 50px; } #cartContainer { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } img { width: 80px; float: left; border-radius: 10px; margin-right: 50px; } #boxContainer { display: grid; grid-gap: 20px; padding: 20px; width: 100%; /* float: left; */ } #box { background-color: white; box-shadow: 1px 2px 6px 2px rgb(219, 219, 219); border-radius: 10px; width: 100%; /* margin: auto */ padding: 20px 10px; } #box:hover { box-shadow: 0px 1px 3px 2px rgb(185, 185, 185); } #totalContainer { width: 50%; padding: 20px; margin: auto; background-color: white; border-radius: 10px; box-shadow: 1px 2px 6px 2px rgb(219, 219, 219); } #totalContainer:hover { box-shadow: 0px 1px 3px 2px rgb(185, 185, 185); } button { padding: 8px 12px; background-color: rgb(3, 122, 122); border: none; border-radius: 5px; cursor: pointer; } button a { text-decoration: none; color: white; font-size: 15px; } button:hover { background-color: rgb(3, 94, 94); } button a:focus { outline: none; } /* ----------------------------- MEDIA QUERY --------------------------- */ @media(max-width: 800px) { img { width: 60px; margin-right: 20px; } h3, h4 { font-size: 14px; } h2 { font-size: 18px; } #cartMainContainer { padding: 90px 20px; } } @media(max-width: 555px) { #cartContainer { display: grid; grid-template-columns: 1fr; } #boxContainer { padding: 20px; width: 80%; } } |