HTMLify
footer.css
Views: 14 | 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 115 116 117 118 | body { margin: 0; font-family: 'Lato', sans-serif; } #containerFooter { width: 100%; background-color: rgb(29, 29, 29); color: white; letter-spacing: 1px; display: grid; grid-template-columns: repeat(4, 1fr); text-transform: uppercase; font-size: 15px; padding: 15px 300px; box-sizing: border-box; } #containerFooter h3:hover, #containerFooter p:hover { color: lightslategray; cursor: pointer; } #webFooter { padding-top: 30px; font-size: 12px; } #credit { width: 100%; margin: auto; padding: 20px 0; text-align: center; background-color: rgb(29, 29, 29); color: white; font-size: 11px; letter-spacing: 1px; } #credit a { color: white; text-decoration: none; position: relative; } #credit a::after { content: ""; background: white; mix-blend-mode: exclusion; width: calc(100% + 18px); height: 0; position: absolute; bottom: -4px; left: -10px; transition: all .3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } #credit a:hover::after { height: calc(100% + 8px) } /* ----------------------------- MEDIA QUERY --------------------------- */ @media(max-width: 1350px) { #containerFooter { padding: 15px 200px; } } @media(max-width: 1166px) { #containerFooter { padding: 15px 100px; } } @media(max-width: 950px) { #containerFooter { padding: 15px 50px; } } @media(max-width: 850px) { #containerFooter { font-size: 13px; } #webFooter { font-size: 10px; } } @media(max-width: 750px) { #containerFooter { display: grid; grid-template-columns: 1fr 1fr; padding: 15px 100px; } #webFooter { padding: 15px 20px; } } @media(max-width: 540px) { #containerFooter { padding: 0 25px; } } |