Two Clickable Logo Promo Box Section Foundation

Two Clickable Logo Promo Box Section Foundation Demo

View Demo Full Screen View Demo New Tab

Two Clickable Logo Promo Box Section Foundation Code

HTML

<!-- 
Handy Links:
https://cssgradient.io/
https://logoipsum.com/
-->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/css/foundation.min.css" integrity="sha512-IyYpCJ+7aODR+LWiU+buuFnKg69IYu7SCmn+3IBNxvEcfsDC7z1xyWhAZTAFTGTlLMnDwcQBFWhhe7JiSw6TEg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<section class="two-box-wrap">
  <div class="grid-container">
    <div class="two-box-inner">
      <div class="grid-x grid-padding-x">
        <div class="large-6 cell">
          <div class="two-box-item" onclick="window.open('#!','_self');">
            <div class="two-box-logo">
              <svg id="logo-55" width="168" height="41" viewBox="0 0 168 41" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M49.2775 28.9524H61.2295V25.3524H53.5255V11.7924H49.2775V28.9524Z" class="cneutral" fill="#3C2B1F"></path> <path d="M68.3107 26.5524C66.6067 26.5524 65.7187 25.0644 65.7187 22.8324C65.7187 20.6004 66.6067 19.0884 68.3107 19.0884C70.0147 19.0884 70.9267 20.6004 70.9267 22.8324C70.9267 25.0644 70.0147 26.5524 68.3107 26.5524ZM68.3347 29.3364C72.2947 29.3364 74.8867 26.5284 74.8867 22.8324C74.8867 19.1364 72.2947 16.3284 68.3347 16.3284C64.3987 16.3284 61.7587 19.1364 61.7587 22.8324C61.7587 26.5284 64.3987 29.3364 68.3347 29.3364Z" class="cneutral" fill="#3C2B1F"></path> <path d="M81.7411 33.2004C83.5651 33.2004 85.1731 32.7924 86.2531 31.8324C87.2371 30.9444 87.8851 29.6004 87.8851 27.7524V16.6644H84.1411V17.9844H84.0931C83.3731 16.9524 82.2691 16.3044 80.6371 16.3044C77.5891 16.3044 75.4771 18.8484 75.4771 22.4484C75.4771 26.2164 78.0451 28.2804 80.8051 28.2804C82.2931 28.2804 83.2291 27.6804 83.9491 26.8644H84.0451V28.0884C84.0451 29.5764 83.3491 30.4404 81.6931 30.4404C80.3971 30.4404 79.7491 29.8884 79.5331 29.2404H75.7411C76.1251 31.8084 78.3571 33.2004 81.7411 33.2004ZM81.7171 25.3764C80.2531 25.3764 79.2931 24.1764 79.2931 22.3284C79.2931 20.4564 80.2531 19.2564 81.7171 19.2564C83.3491 19.2564 84.2131 20.6484 84.2131 22.3044C84.2131 24.0324 83.4211 25.3764 81.7171 25.3764Z" class="cneutral" fill="#3C2B1F"></path> <path d="M95.5835 26.5524C93.8795 26.5524 92.9915 25.0644 92.9915 22.8324C92.9915 20.6004 93.8795 19.0884 95.5835 19.0884C97.2875 19.0884 98.1995 20.6004 98.1995 22.8324C98.1995 25.0644 97.2875 26.5524 95.5835 26.5524ZM95.6075 29.3364C99.5675 29.3364 102.159 26.5284 102.159 22.8324C102.159 19.1364 99.5675 16.3284 95.6075 16.3284C91.6715 16.3284 89.0315 19.1364 89.0315 22.8324C89.0315 26.5284 91.6715 29.3364 95.6075 29.3364Z" class="cneutral" fill="#3C2B1F"></path> <path d="M103.302 28.9524H107.214V16.6644H103.302V28.9524ZM103.302 14.9604H107.214V11.7924H103.302V14.9604Z" class="cneutral" fill="#3C2B1F"></path> <path d="M108.911 33.0084H112.823V27.6804H112.871C113.639 28.7124 114.767 29.3364 116.351 29.3364C119.567 29.3364 121.703 26.7924 121.703 22.8084C121.703 19.1124 119.711 16.3044 116.447 16.3044C114.767 16.3044 113.567 17.0484 112.727 18.1524H112.655V16.6644H108.911V33.0084ZM115.343 26.3124C113.663 26.3124 112.703 24.9444 112.703 22.9524C112.703 20.9604 113.567 19.4484 115.271 19.4484C116.951 19.4484 117.743 20.8404 117.743 22.9524C117.743 25.0404 116.831 26.3124 115.343 26.3124Z" class="cneutral" fill="#3C2B1F"></path> <path d="M128.072 29.3364C131.288 29.3364 133.664 27.9444 133.664 25.2564C133.664 22.1124 131.12 21.5604 128.96 21.2004C127.4 20.9124 126.008 20.7924 126.008 19.9284C126.008 19.1604 126.752 18.8004 127.712 18.8004C128.792 18.8004 129.536 19.1364 129.68 20.2404H133.28C133.088 17.8164 131.216 16.3044 127.736 16.3044C124.832 16.3044 122.432 17.6484 122.432 20.2404C122.432 23.1204 124.712 23.6964 126.848 24.0564C128.48 24.3444 129.968 24.4644 129.968 25.5684C129.968 26.3604 129.224 26.7924 128.048 26.7924C126.752 26.7924 125.936 26.1924 125.792 24.9684H122.096C122.216 27.6804 124.472 29.3364 128.072 29.3364Z" class="cneutral" fill="#3C2B1F"></path> <path d="M138.978 29.3124C140.682 29.3124 141.762 28.6404 142.65 27.4404H142.722V28.9524H146.466V16.6644H142.554V23.5284C142.554 24.9924 141.738 26.0004 140.394 26.0004C139.146 26.0004 138.546 25.2564 138.546 23.9124V16.6644H134.658V24.7284C134.658 27.4644 136.146 29.3124 138.978 29.3124Z" class="cneutral" fill="#3C2B1F"></path> <path d="M148.168 28.9524H152.08V22.0644C152.08 20.6004 152.8 19.5684 154.024 19.5684C155.2 19.5684 155.752 20.3364 155.752 21.6564V28.9524H159.664V22.0644C159.664 20.6004 160.36 19.5684 161.608 19.5684C162.784 19.5684 163.336 20.3364 163.336 21.6564V28.9524H167.248V20.9604C167.248 18.2004 165.856 16.3044 163.072 16.3044C161.488 16.3044 160.168 16.9764 159.208 18.4644H159.16C158.536 17.1444 157.312 16.3044 155.704 16.3044C153.928 16.3044 152.752 17.1444 151.984 18.4164H151.912V16.6644H148.168V28.9524Z" class="cneutral" fill="#3C2B1F"></path> <path d="M25.4099 1.97689L21.4769 0.923031L18.1625 13.2926L15.1702 2.12527L11.2371 3.17913L14.4701 15.2446L6.41746 7.19201L3.53827 10.0712L12.371 18.904L1.37124 15.9566L0.317383 19.8896L12.336 23.11C12.1984 22.5165 12.1256 21.8981 12.1256 21.2627C12.1256 16.7651 15.7716 13.1191 20.2692 13.1191C24.7668 13.1191 28.4128 16.7651 28.4128 21.2627C28.4128 21.894 28.3409 22.5086 28.205 23.0986L39.1277 26.0253L40.1815 22.0923L28.1151 18.8591L39.1156 15.9115L38.0617 11.9785L25.9958 15.2115L34.0484 7.15895L31.1692 4.27976L22.459 12.99L25.4099 1.97689Z" class="ccustom" fill="#F97316"></path> <path d="M28.1943 23.1444C27.8571 24.57 27.1452 25.8507 26.1684 26.8768L34.0814 34.7899L36.9606 31.9107L28.1943 23.1444Z" class="ccustom" fill="#F97316"></path> <path d="M26.0884 26.9596C25.0998 27.9693 23.8505 28.7228 22.4495 29.1111L25.3289 39.8571L29.2619 38.8032L26.0884 26.9596Z" class="ccustom" fill="#F97316"></path> <path d="M22.3026 29.1504C21.6526 29.3175 20.9713 29.4063 20.2692 29.4063C19.517 29.4063 18.7886 29.3043 18.0971 29.1134L15.2151 39.8692L19.1481 40.923L22.3026 29.1504Z" class="ccustom" fill="#F97316"></path> <path d="M17.9581 29.0737C16.5785 28.6661 15.3514 27.903 14.383 26.8904L6.45052 34.8229L9.32971 37.7021L17.9581 29.0737Z" class="ccustom" fill="#F97316"></path> <path d="M14.3168 26.8203C13.365 25.8013 12.6717 24.5377 12.3417 23.1341L1.38334 26.0704L2.43719 30.0034L14.3168 26.8203Z" class="ccustom" fill="#F97316"></path> </svg>
            </div>
            <div class="two-box-text">I am a clickable Box!</div>
          </div>        
        </div>        
        <div class="large-6 cell">
          <div class="two-box-item" onclick="window.open('#!','_self');">
            <div class="two-box-logo">
<svg id="logo-50" class="gradient" width="153" height="38" viewBox="0 0 153 38" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M0.878785 28.1818L0.878788 9.39393L10.2727 14.6128L10.2727 23.0151L17.7879 27.2424L25.303 23.0151L25.303 14.6128L34.697 9.39393L34.697 28.1818L17.7879 37.5757L0.878785 28.1818Z" class="cneutral" fill="#192657"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M5.57576 12.0034L0.878784 9.39394L17.7879 0L34.697 9.39394L30 12.0034L30 25.8333L17.7879 32.8788L5.57575 25.8333L5.57576 12.0034ZM29.4912 12.2861L25.303 14.6128V14.5606L17.7879 10.3333L10.2727 14.5606V14.6128L6.08459 12.2861L6.08459 25.5443L17.7879 32.2962L29.4912 25.5443L29.4912 12.2861Z" fill="url(#paint500_linear_1501_1259)"></path> <path d="M43.7001 26.697V10.9152H46.6761V23.9915H53.8907V26.697H43.7001Z" class="cneutral" fill="#192657"></path> <path d="M60.3159 27.0126C59.2037 27.0126 58.2042 26.7872 57.3174 26.3362C56.4306 25.8853 55.7317 25.2315 55.2207 24.3748C54.7096 23.5181 54.4541 22.4885 54.4541 21.2861V20.9253C54.4541 19.7229 54.7096 18.6933 55.2207 17.8366C55.7317 16.9799 56.4306 16.3261 57.3174 15.8752C58.2042 15.4242 59.2037 15.1988 60.3159 15.1988C61.4282 15.1988 62.4277 15.4242 63.3145 15.8752C64.2013 16.3261 64.9002 16.9799 65.4112 17.8366C65.9222 18.6933 66.1778 19.7229 66.1778 20.9253V21.2861C66.1778 22.4885 65.9222 23.5181 65.4112 24.3748C64.9002 25.2315 64.2013 25.8853 63.3145 26.3362C62.4277 26.7872 61.4282 27.0126 60.3159 27.0126ZM60.3159 24.4875C61.1877 24.4875 61.9092 24.2095 62.4803 23.6533C63.0515 23.0822 63.337 22.2705 63.337 21.2184V20.993C63.337 19.9409 63.0515 19.1367 62.4803 18.5806C61.9242 18.0095 61.2027 17.7239 60.3159 17.7239C59.4442 17.7239 58.7227 18.0095 58.1516 18.5806C57.5804 19.1367 57.2949 19.9409 57.2949 20.993V21.2184C57.2949 22.2705 57.5804 23.0822 58.1516 23.6533C58.7227 24.2095 59.4442 24.4875 60.3159 24.4875Z" class="cneutral" fill="#192657"></path> <path d="M67.2443 21.1508V20.7901C67.2443 19.6177 67.4772 18.6182 67.9432 17.7915C68.4091 16.9498 69.0254 16.311 69.7919 15.8752C70.5735 15.4242 71.4227 15.1988 72.3395 15.1988C73.3616 15.1988 74.1357 15.3792 74.6617 15.7399C75.1878 16.1006 75.5711 16.4764 75.8115 16.8672H76.2174V15.5144H79.013V28.681C79.013 29.4475 78.7875 30.0562 78.3366 30.5072C77.8857 30.9731 77.2845 31.2061 76.533 31.2061H69.0479V28.7261H75.541C75.9618 28.7261 76.1723 28.5006 76.1723 28.0497V25.1413H75.7664C75.6161 25.3818 75.4057 25.6298 75.1352 25.8853C74.8646 26.1258 74.5039 26.3287 74.053 26.4941C73.6021 26.6594 73.0309 26.7421 72.3395 26.7421C71.4227 26.7421 70.5735 26.5241 69.7919 26.0882C69.0254 25.6373 68.4091 24.9985 67.9432 24.1719C67.4772 23.3302 67.2443 22.3232 67.2443 21.1508ZM73.1512 24.2621C74.0229 24.2621 74.7519 23.984 75.3381 23.4279C75.9243 22.8718 76.2174 22.0902 76.2174 21.0832V20.8577C76.2174 19.8356 75.9243 19.0541 75.3381 18.513C74.7669 17.9569 74.038 17.6788 73.1512 17.6788C72.2794 17.6788 71.5504 17.9569 70.9643 18.513C70.3781 19.0541 70.085 19.8356 70.085 20.8577V21.0832C70.085 22.0902 70.3781 22.8718 70.9643 23.4279C71.5504 23.984 72.2794 24.2621 73.1512 24.2621Z" class="cneutral" fill="#192657"></path> <path d="M86.4687 27.0126C85.3564 27.0126 84.3569 26.7872 83.4701 26.3362C82.5833 25.8853 81.8844 25.2315 81.3734 24.3748C80.8624 23.5181 80.6069 22.4885 80.6069 21.2861V20.9253C80.6069 19.7229 80.8624 18.6933 81.3734 17.8366C81.8844 16.9799 82.5833 16.3261 83.4701 15.8752C84.3569 15.4242 85.3564 15.1988 86.4687 15.1988C87.5809 15.1988 88.5804 15.4242 89.4672 15.8752C90.354 16.3261 91.0529 16.9799 91.5639 17.8366C92.075 18.6933 92.3305 19.7229 92.3305 20.9253V21.2861C92.3305 22.4885 92.075 23.5181 91.5639 24.3748C91.0529 25.2315 90.354 25.8853 89.4672 26.3362C88.5804 26.7872 87.5809 27.0126 86.4687 27.0126ZM86.4687 24.4875C87.3404 24.4875 88.0619 24.2095 88.633 23.6533C89.2042 23.0822 89.4898 22.2705 89.4898 21.2184V20.993C89.4898 19.9409 89.2042 19.1367 88.633 18.5806C88.0769 18.0095 87.3555 17.7239 86.4687 17.7239C85.5969 17.7239 84.8755 18.0095 84.3043 18.5806C83.7332 19.1367 83.4476 19.9409 83.4476 20.993V21.2184C83.4476 22.2705 83.7332 23.0822 84.3043 23.6533C84.8755 24.2095 85.5969 24.4875 86.4687 24.4875Z" class="cneutral" fill="#192657"></path> <path d="M93.9381 26.697V15.5144H96.7788V26.697H93.9381ZM95.3584 14.2068C94.8474 14.2068 94.4115 14.0415 94.0508 13.7108C93.7051 13.3801 93.5323 12.9442 93.5323 12.4032C93.5323 11.8621 93.7051 11.4262 94.0508 11.0955C94.4115 10.7649 94.8474 10.5995 95.3584 10.5995C95.8845 10.5995 96.3204 10.7649 96.6661 11.0955C97.0118 11.4262 97.1846 11.8621 97.1846 12.4032C97.1846 12.9442 97.0118 13.3801 96.6661 13.7108C96.3204 14.0415 95.8845 14.2068 95.3584 14.2068Z" class="cneutral" fill="#192657"></path> <path d="M98.9122 31.2061V15.5144H101.708V16.8672H102.114C102.369 16.4313 102.767 16.048 103.309 15.7173C103.85 15.3716 104.624 15.1988 105.631 15.1988C106.533 15.1988 107.367 15.4242 108.133 15.8752C108.9 16.311 109.516 16.9573 109.982 17.8141C110.448 18.6708 110.681 19.7079 110.681 20.9253V21.2861C110.681 22.5035 110.448 23.5406 109.982 24.3973C109.516 25.2541 108.9 25.9079 108.133 26.3588C107.367 26.7947 106.533 27.0126 105.631 27.0126C104.954 27.0126 104.383 26.9299 103.917 26.7646C103.466 26.6143 103.098 26.4189 102.813 26.1784C102.542 25.9229 102.324 25.6674 102.159 25.4119H101.753V31.2061H98.9122ZM104.774 24.5326C105.661 24.5326 106.39 24.2545 106.961 23.6984C107.547 23.1273 107.84 22.3006 107.84 21.2184V20.993C107.84 19.9108 107.547 19.0916 106.961 18.5355C106.375 17.9644 105.646 17.6788 104.774 17.6788C103.902 17.6788 103.173 17.9644 102.587 18.5355C102.001 19.0916 101.708 19.9108 101.708 20.993V21.2184C101.708 22.3006 102.001 23.1273 102.587 23.6984C103.173 24.2545 103.902 24.5326 104.774 24.5326Z" class="cneutral" fill="#192657"></path> <path d="M116.919 27.0126C115.461 27.0126 114.266 26.697 113.334 26.0657C112.403 25.4344 111.839 24.5326 111.643 23.3602L114.259 22.6839C114.364 23.2099 114.537 23.6233 114.777 23.9239C115.033 24.2245 115.341 24.4424 115.702 24.5777C116.077 24.6979 116.483 24.7581 116.919 24.7581C117.58 24.7581 118.069 24.6453 118.385 24.4199C118.7 24.1794 118.858 23.8863 118.858 23.5406C118.858 23.1949 118.708 22.9319 118.407 22.7515C118.107 22.5561 117.626 22.3983 116.964 22.2781L116.333 22.1653C115.551 22.015 114.837 21.8121 114.191 21.5566C113.545 21.2861 113.026 20.9178 112.635 20.4519C112.245 19.9859 112.049 19.3847 112.049 18.6482C112.049 17.536 112.455 16.6868 113.267 16.1006C114.078 15.4994 115.146 15.1988 116.468 15.1988C117.716 15.1988 118.753 15.4769 119.579 16.033C120.406 16.5891 120.947 17.3181 121.203 18.2199L118.565 19.0315C118.445 18.4604 118.197 18.0545 117.821 17.8141C117.46 17.5736 117.009 17.4533 116.468 17.4533C115.927 17.4533 115.514 17.551 115.228 17.7464C114.943 17.9268 114.8 18.1823 114.8 18.513C114.8 18.8737 114.95 19.1442 115.251 19.3246C115.551 19.4899 115.957 19.6177 116.468 19.7079L117.099 19.8206C117.941 19.9709 118.7 20.1738 119.377 20.4293C120.068 20.6698 120.609 21.023 121 21.489C121.406 21.9399 121.609 22.5561 121.609 23.3377C121.609 24.5101 121.18 25.4194 120.323 26.0657C119.482 26.697 118.347 27.0126 116.919 27.0126Z" class="cneutral" fill="#192657"></path> <path d="M127.344 26.8773C126.473 26.8773 125.706 26.6819 125.045 26.2912C124.399 25.8853 123.895 25.3292 123.534 24.6228C123.174 23.9164 122.993 23.1047 122.993 22.1879V15.5144H125.834V21.9624C125.834 22.8041 126.037 23.4354 126.443 23.8562C126.863 24.2771 127.457 24.4875 128.224 24.4875C129.095 24.4875 129.772 24.2019 130.253 23.6308C130.734 23.0446 130.974 22.233 130.974 21.1959V15.5144H133.815V26.697H131.019V25.2315H130.614C130.433 25.6073 130.095 25.9755 129.599 26.3362C129.103 26.697 128.351 26.8773 127.344 26.8773Z" class="cneutral" fill="#192657"></path> <path d="M135.962 26.697V15.5144H138.757V16.7319H139.163C139.358 16.3561 139.682 16.033 140.132 15.7624C140.583 15.4769 141.177 15.3341 141.914 15.3341C142.71 15.3341 143.349 15.4919 143.83 15.8075C144.311 16.1081 144.679 16.5064 144.935 17.0024H145.34C145.596 16.5215 145.957 16.1232 146.423 15.8075C146.889 15.4919 147.55 15.3341 148.407 15.3341C149.098 15.3341 149.722 15.4844 150.278 15.785C150.849 16.0705 151.3 16.5139 151.631 17.1152C151.976 17.7013 152.149 18.4453 152.149 19.3472V26.697H149.308V19.5501C149.308 18.9338 149.151 18.4754 148.835 18.1748C148.519 17.8592 148.076 17.7013 147.505 17.7013C146.859 17.7013 146.355 17.9118 145.994 18.3326C145.649 18.7384 145.476 19.3246 145.476 20.0912V26.697H142.635V19.5501C142.635 18.9338 142.477 18.4754 142.162 18.1748C141.846 17.8592 141.403 17.7013 140.831 17.7013C140.185 17.7013 139.682 17.9118 139.321 18.3326C138.975 18.7384 138.802 19.3246 138.802 20.0912V26.697H135.962Z" class="cneutral" fill="#192657"></path> <defs> <linearGradient id="paint500_linear_1501_1259" x1="5.57575" y1="7.30638" x2="30.9394" y2="7.30639" gradientUnits="userSpaceOnUse"> <stop class="ccustom" stop-color="#64C2DB"></stop> <stop offset="0.307292" class="ccompli1" stop-color="#7476ED"></stop> <stop offset="0.604167" class="ccompli1" stop-color="#C994DF"></stop> <stop offset="1" class="ccompli2" stop-color="#E56F8C"></stop> </linearGradient> </defs> </svg>            
            </div>
            <div class="two-box-text">Another Clickable Box! Amazing... </div>          </div>        
        </div>        
      </div>
    </div>
  </div>
</section>

CSS

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');

.two-box-wrap {
  margin:20px 0;
}
.two-box-item:hover {
  background:#10565224;
  background: radial-gradient(circle, rgba(238,174,202,0.8) 0%, rgba(148,187,233,0.8) 100%);
}
.two-box-item {
  margin-bottom:20px;
  cursor:pointer;
  text-align:center;
  padding:60px 40px;
  box-shadow:0px 1px 10px rgba(0,0,0,0.4);
  border-radius:10px;
  background: radial-gradient(circle, rgba(238,174,202,0.3) 0%, rgba(148,187,233,0.3) 100%);
}
.two-box-logo {
  margin-bottom:30px;
}
.two-box-text {
  font-size:22px;
  font-family: "Oswald", "Open Sans", sans-serif;
}