Recipe Card Generator Plugin for SquareSpace & Wix

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="robots" content="index, follow" /> <link rel="canonical" href="https://www.recipesgenerator.com" /> <link rel="alternate" href="https://www.recipesgenerator.com/" hreflang="en-us" /> <link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://d1f8f9xcsvx3ha.cloudfront.net"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/blog.css"> <title>Recipe Card Generator Plugin for SquareSpace & Wix</title>  <link rel="shortcut icon" href="favicon/favicon.ico"> <link rel="icon" sizes="16x16 32x32 64x64" href="favicon/favicon.ico"> <link rel="icon" type="image/png" sizes="196x196" href="favicon/favicon-192.png"> <link rel="icon" type="image/png" sizes="160x160" href="favicon/favicon-160.png"> <link rel="icon" type="image/png" sizes="96x96" href="favicon/favicon-96.png"> <link rel="icon" type="image/png" sizes="64x64" href="favicon/favicon-64.png"> <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32.png"> <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16.png"> <link rel="apple-touch-icon" href="favicon/favicon-57.png"> <link rel="apple-touch-icon" sizes="114x114" href="favicon/favicon-114.png"> <link rel="apple-touch-icon" sizes="72x72" href="favicon/favicon-72.png"> <link rel="apple-touch-icon" sizes="144x144" href="favicon/favicon-144.png"> <link rel="apple-touch-icon" sizes="60x60" href="favicon/favicon-60.png"> <link rel="apple-touch-icon" sizes="120x120" href="favicon/favicon-120.png"> <link rel="apple-touch-icon" sizes="76x76" href="favicon/favicon-76.png"> <link rel="apple-touch-icon" sizes="152x152" href="favicon/favicon-152.png"> <link rel="apple-touch-icon" sizes="180x180" href="favicon/favicon-180.png">  <meta property="og:locale" content="en_US" /> <meta property="og:type" content="website" /> <meta property="og:title" content="Recipe Card Generator Plugin for SquareSpace & Wix" /> <meta property="og:description" content="Recipes Generator Plugin to create Google-optimized recipe cards with star ratings, json-ld code, Pinterest pins, templates for SquareSpace, WIX, Blogger, Weebly, Shopify etc." /> <meta property="og:url" content="https://www.recipesgenerator.com/" /> <meta property="og:site_name" content="Recipes Generator" /> <meta property="og:image" content="https://www.recipesgenerator.com/images/examples/example45.png" /> <meta name="description" content="Create Google-optimized recipe cards with star ratings, json-ld code. Recipes Generator offer recipe card plugin, template for SquareSpace, WIX, Blogger, Weebly and more."> <meta name="keywords" content="How To Create A Recipe Card On Squarespace, How To Make A Recipe Card For Blog, Json-Ld Code WIX, Recipe Card For Squarespace, Recipe Card For WIX, Recipe Card Generator, Recipe Card Plugin For Blogger, Recipe Card Plugin For Squarespace, Recipe Card Plugin for WIX, Recipe Card Plugin Squarespace, Recipe Card Plugin WIX, Recipe Card Squarespace, Recipe Card Template For Blogger, Recipe Card Weebly, Recipe Card WIX, Recipe Cards For Squarespace, Recipe Generator For Squarespace, Recipe Plugin Squarespace, Recipe Plugin Weebly, Recipe Plugin WIX, Recipe.Generator, Recipegenerator, Recipes Generator, Squarespace Recipe Plugin, WIX Recipe Plugin" /> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">  <script type='text/javascript'> if (!localStorage.getItem("userEmail")) { window.__lo_site_id = 248924; (function () { var wa = document.createElement('script'); wa.type = 'text/javascript'; wa.async = true; wa.src = 'https://d10lpsik1i8c69.cloudfront.net/w.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wa, s); })(); } </script> <style type="text/css"> main { margin: 70px 0 200px; } article { max-width: 740px; margin: 2rem auto; border-radius: 10px; box-shadow: 0 3px 20px 5px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s; } article:hover { box-shadow: 0 3px 20px 5px rgba(0, 0, 0, 0.3); } .blog-post>a { display: block; padding: 2rem; } img { border-radius: 10px; } h2 { margin: 1.8rem 0 0; font-size: 2.5rem; line-height: 1.2; } </style> </head> <body> <div class="nav"> <div class="nav-inner"> <a class="logo" href="/" title="Recipes Generator"> <svg fill="#6672E5" viewBox="0 0 546.58586 159.76346" xmlns="http://www.w3.org/2000/svg"> <g transform="matrix(1.3333333,0,0,-1.3333333,-0.58621332,985.62751)"> <g transform="translate(-344.59024,309.30905)"> <g> <g transform="translate(482.3408,391.687)"> <path d="m 0,0 h 9.764 c 2.118,0 3.686,0.43 4.706,1.294 1.018,0.861 1.53,2.195 1.53,4 0,1.803 -0.512,3.135 -1.53,3.999 -0.941,0.941 -2.353,1.413 -4.235,1.413 L 0,10.706 Z M -8.353,-22.824 V 13.41 c 0,1.177 0.412,2.177 1.235,3.001 0.824,0.823 1.824,1.235 3.001,1.235 h 15.41 c 4.393,0 7.647,-0.941 9.766,-2.823 2.194,-1.962 3.294,-4.824 3.294,-8.589 0,-2.51 -0.55,-4.588 -1.648,-6.234 -0.942,-1.57 -2.432,-2.707 -4.47,-3.413 1.803,-0.628 3.059,-1.569 3.764,-2.824 0.706,-1.176 1.136,-3.176 1.294,-5.998 l 0.235,-4.825 v -1.529 c 0,-0.55 0.039,-1.059 0.118,-1.53 0.236,-1.412 0.707,-2.312 1.412,-2.705 h -9.177 c -0.393,0.782 -0.628,1.607 -0.705,2.471 -0.158,1.253 -0.235,2.117 -0.235,2.589 l -0.118,4.351 c -0.158,2.353 -0.629,4.038 -1.411,5.059 -0.864,0.862 -2.393,1.295 -4.588,1.295 H 0 v -15.765 z"> </path> </g> <g transform="translate(521.0928,368.8633)"> <path d="m 0,0 v 36.234 c 0,1.177 0.412,2.177 1.235,3 0.824,0.824 1.824,1.236 3,1.236 H 29.411 V 33.529 H 8.234 v -8.705 h 15.765 v -2.706 c 0,-1.178 -0.411,-2.178 -1.236,-3.001 C 21.94,18.294 20.94,17.882 19.765,17.882 H 8.234 V 7.53 H 29.411 V 0 Z"> </path> </g> <g transform="translate(600.0801,382.8618)"> <path d="m 0,0 c -0.395,-4.705 -2.158,-8.392 -5.293,-11.056 -3.22,-2.591 -7.454,-3.884 -12.706,-3.884 -6.117,0 -10.784,1.843 -14.001,5.529 -3.216,3.53 -4.822,8.744 -4.822,15.648 0,7.058 1.646,12.352 4.939,15.882 3.372,3.686 8.237,5.529 14.589,5.529 5.176,0 9.293,-1.294 12.352,-3.883 2.901,-2.511 4.547,-6.04 4.942,-10.587 h -5.06 c -1.882,0 -3.215,0.823 -4,2.47 -0.549,1.019 -1.215,1.921 -2,2.706 -1.57,1.177 -3.646,1.764 -6.234,1.764 -3.608,0 -6.393,-1.175 -8.352,-3.529 -1.882,-2.353 -2.825,-5.804 -2.825,-10.352 0,-4.395 0.943,-7.766 2.825,-10.117 1.802,-2.433 4.509,-3.65 8.118,-3.65 2.508,0 4.588,0.629 6.234,1.884 1.489,1.175 2.548,3.058 3.176,5.646 z"> </path> </g> <g transform="translate(613.8896,368.8633)"> <path d="m 0,0 v 36.234 c 0,1.177 0.412,2.177 1.234,3 0.825,0.824 1.825,1.236 3,1.236 H 8.352 V 0 Z"> </path> </g> <g transform="translate(642.9932,390.6284)"> <path d="m 0,0 h 8.118 c 2.195,0 3.766,0.469 4.707,1.411 1.019,0.862 1.529,2.353 1.529,4.471 0,1.803 -0.47,3.253 -1.412,4.353 -1.098,0.941 -2.549,1.411 -4.353,1.411 H 0 Z m 0,-7.296 v -14.469 h -8.352 v 36.234 c 0,1.177 0.413,2.177 1.235,3 0.824,0.823 1.824,1.236 3,1.236 H 9.647 c 4.314,0 7.53,-1.1 9.647,-3.294 2.196,-2.197 3.296,-5.453 3.296,-9.765 0,-4.079 -1.059,-7.294 -3.176,-9.646 -2.12,-2.199 -5.179,-3.296 -9.177,-3.296 z"> </path> </g> <g transform="translate(679.1582,368.8633)"> <path d="m 0,0 v 36.234 c 0,1.177 0.413,2.177 1.234,3 0.825,0.824 1.826,1.236 3,1.236 H 29.412 V 33.529 H 8.235 v -8.705 h 15.764 v -2.706 c 0,-1.178 -0.412,-2.178 -1.233,-3.001 C 21.94,18.294 20.94,17.882 19.765,17.882 H 8.235 V 7.53 H 29.412 V 0 Z"> </path> </g> <g transform="translate(722.0293,381.4497)"> <path d="m 0,0 h 8.234 c 0.313,-2.352 1.217,-3.998 2.707,-4.939 1.569,-1.1 3.724,-1.647 6.469,-1.647 2.431,0 4.276,0.43 5.53,1.293 1.254,0.862 1.883,2.117 1.883,3.764 0,2.511 -3.529,4.55 -10.589,6.119 l -0.233,0.118 -0.942,0.234 c -4,0.862 -6.667,1.766 -8,2.707 -1.571,0.862 -2.667,2.118 -3.295,3.764 -0.785,1.412 -1.176,3.215 -1.176,5.412 0,3.842 1.333,6.862 4,9.058 2.664,2.118 6.548,3.177 11.646,3.177 4.785,0 8.472,-1.099 11.06,-3.294 2.664,-2.433 4.077,-5.608 4.234,-9.53 h -4.705 c -1.806,0 -3.099,0.825 -3.883,2.471 -0.392,0.783 -0.941,1.451 -1.646,2.001 -1.412,1.017 -3.336,1.529 -5.764,1.529 -2.354,0 -4.041,-0.433 -5.059,-1.294 -1.178,-0.864 -1.766,-2.079 -1.766,-3.648 0,-2.117 2.275,-3.688 6.825,-4.705 1.331,-0.393 2.311,-0.629 2.939,-0.706 1.413,-0.471 2.649,-0.844 3.708,-1.117 1.058,-0.277 1.9,-0.492 2.529,-0.648 1.097,-0.471 2.193,-0.94 3.293,-1.411 1.567,-0.942 2.784,-2.158 3.647,-3.649 0.862,-1.647 1.294,-3.451 1.294,-5.41 0,-4.237 -1.412,-7.53 -4.236,-9.884 -2.822,-2.196 -6.822,-3.293 -11.998,-3.293 -5.334,0 -9.334,1.135 -12.001,3.412 C 1.804,-7.843 0.233,-4.469 0,0"> </path> </g> </g> <g> <g transform="translate(490.8525,330.7803) scale(1.5)"> <path d="m 0,0 c -0.561,-0.812 -1.232,-1.402 -2.01,-1.776 -0.81,-0.341 -1.698,-0.514 -2.663,-0.514 -2.306,0 -4.128,0.764 -5.467,2.29 -1.371,1.494 -2.055,3.55 -2.055,6.168 0,2.585 0.669,4.626 2.008,6.119 1.402,1.559 3.255,2.338 5.561,2.338 1.993,0 3.644,-0.482 4.952,-1.448 1.277,-1.029 2.041,-2.367 2.29,-4.019 H 0.374 c -0.655,0 -1.138,0.294 -1.45,0.888 -0.218,0.374 -0.53,0.717 -0.934,1.026 -0.623,0.437 -1.448,0.656 -2.476,0.656 -1.34,0 -2.399,-0.483 -3.177,-1.448 -0.779,-1.029 -1.169,-2.401 -1.169,-4.112 0,-1.746 0.404,-3.116 1.215,-4.111 0.778,-0.968 1.885,-1.451 3.318,-1.451 1.059,0 1.931,0.297 2.617,0.888 0.683,0.624 1.121,1.481 1.308,2.569 h -1.963 c -0.467,0 -0.865,0.165 -1.191,0.492 -0.327,0.328 -0.491,0.723 -0.491,1.193 V 6.821 H 2.663 V -1.916 H 1.775 c -0.872,0 -1.418,0.436 -1.636,1.308 z"> </path> </g> <g transform="translate(508.3555,326.8643) scale(1.5)"> <path d="m 0,0 v 14.392 c 0,0.466 0.164,0.863 0.49,1.19 0.327,0.328 0.725,0.491 1.192,0.491 h 10 V 13.316 H 3.271 V 9.859 H 9.532 V 8.783 C 9.532,8.316 9.368,7.921 9.042,7.593 8.714,7.266 8.317,7.102 7.85,7.102 H 3.271 V 2.989 h 8.411 V 0 Z"> </path> </g> <g transform="translate(539.7363,326.8643) scale(1.5)"> <path d="m 0,0 v 14.392 c 0,0.466 0.164,0.863 0.49,1.19 0.327,0.328 0.725,0.507 1.192,0.538 H 3.458 L 9.999,5.046 V 16.12 H 13.27 V 0 H 9.859 L 3.271,11.074 V 0 Z"> </path> </g> <g transform="translate(572.7988,326.8643) scale(1.5)"> <path d="m 0,0 v 14.392 c 0,0.466 0.164,0.863 0.49,1.19 0.328,0.328 0.725,0.491 1.193,0.491 h 9.999 V 13.316 H 3.271 V 9.859 H 9.532 V 8.783 C 9.532,8.316 9.368,7.921 9.042,7.593 8.714,7.266 8.317,7.102 7.851,7.102 H 3.271 V 2.989 h 8.411 V 0 Z"> </path> </g> <g transform="translate(607.4971,339.9287) scale(1.5)"> <path d="M 0,0 H 3.879 C 4.72,0 5.343,0.171 5.748,0.514 6.151,0.856 6.355,1.386 6.355,2.103 6.355,2.819 6.151,3.349 5.748,3.691 5.374,4.065 4.812,4.252 4.065,4.252 H 0 Z M -3.317,-9.064 V 5.327 c 0,0.467 0.164,0.863 0.49,1.191 0.328,0.328 0.724,0.491 1.192,0.491 H 4.486 C 6.23,7.009 7.522,6.635 8.364,5.887 9.235,5.108 9.673,3.973 9.673,2.477 9.673,1.479 9.455,0.655 9.019,0 8.645,-0.624 8.053,-1.075 7.243,-1.354 c 0.716,-0.25 1.215,-0.625 1.494,-1.123 0.282,-0.466 0.452,-1.26 0.515,-2.382 l 0.093,-1.915 v -0.609 c 0,-0.219 0.015,-0.42 0.048,-0.606 0.092,-0.562 0.28,-0.921 0.56,-1.075 H 6.309 c -0.158,0.311 -0.25,0.636 -0.282,0.98 -0.061,0.498 -0.092,0.841 -0.092,1.029 l -0.046,1.728 c -0.064,0.934 -0.251,1.604 -0.562,2.01 -0.343,0.342 -0.95,0.513 -1.822,0.513 H 0 v -6.26 z"> </path> </g> <g transform="translate(644.9062,344.7139) scale(1.5)"> <path d="M 0,0 -2.242,-6.821 H 2.243 Z M -0.747,3.224 H 1.869 L 7.71,-12.85 H 4.205 L 3.131,-9.532 H -3.13 l -1.028,-3.318 h -3.504 l 5.326,14.998 c 0.28,0.717 0.81,1.076 1.589,1.076"> </path> </g> <g transform="translate(674.2695,326.8643) scale(1.5)"> <path d="m 0,0 v 13.224 h -4.767 v 1.168 c 0,0.466 0.164,0.863 0.491,1.19 0.328,0.328 0.724,0.491 1.192,0.491 H 8.036 V 13.224 H 3.317 V 0 Z"> </path> </g> <g transform="translate(702.0889,338.8994) scale(1.5)"> <path d="m 0,0 c 0,-1.806 0.389,-3.176 1.168,-4.109 0.778,-0.967 1.884,-1.45 3.317,-1.45 1.402,0 2.507,0.483 3.318,1.45 C 8.612,-3.113 9.018,-1.743 9.018,0 9.018,1.747 8.612,3.132 7.803,4.161 6.992,5.126 5.887,5.608 4.485,5.608 3.052,5.608 1.946,5.126 1.168,4.161 0.389,3.194 0,1.809 0,0 m -3.317,0 c 0,2.618 0.684,4.69 2.055,6.217 1.463,1.525 3.38,2.289 5.747,2.289 2.337,0 4.253,-0.764 5.747,-2.289 1.404,-1.558 2.103,-3.629 2.103,-6.217 0,-2.584 -0.699,-4.641 -2.103,-6.165 -1.431,-1.496 -3.348,-2.244 -5.747,-2.244 -2.429,0 -4.345,0.748 -5.747,2.244 -1.371,1.493 -2.055,3.55 -2.055,6.165"> </path> </g> <g transform="translate(737.6279,339.9287) scale(1.5)"> <path d="m 0,0 h 3.878 c 0.841,0 1.465,0.171 1.87,0.514 0.404,0.342 0.606,0.872 0.606,1.589 0,0.716 -0.202,1.246 -0.606,1.588 C 5.374,4.065 4.813,4.252 4.065,4.252 H 0 Z M -3.317,-9.064 V 5.327 c 0,0.467 0.164,0.863 0.491,1.191 0.326,0.328 0.723,0.491 1.191,0.491 H 4.486 C 6.23,7.009 7.522,6.635 8.363,5.887 9.235,5.108 9.672,3.973 9.672,2.477 9.672,1.479 9.455,0.655 9.019,0 8.645,-0.624 8.052,-1.075 7.244,-1.354 c 0.715,-0.25 1.215,-0.625 1.493,-1.123 0.282,-0.466 0.452,-1.26 0.514,-2.382 l 0.096,-1.915 v -0.609 c 0,-0.219 0.014,-0.42 0.046,-0.606 0.092,-0.562 0.279,-0.921 0.56,-1.075 H 6.308 c -0.156,0.311 -0.25,0.636 -0.279,0.98 -0.064,0.498 -0.095,0.841 -0.095,1.029 l -0.046,1.728 c -0.063,0.934 -0.251,1.604 -0.561,2.01 -0.343,0.342 -0.951,0.513 -1.821,0.513 H 0 v -6.26 z"> </path> </g> <g transform="translate(430.2729,364.6836)"> <path d="m 0,0 -2.166,-0.678 -0.038,-3.693 v -12.164 h -59.06 V -4.951 L -61.283,-0.678 -63.468,0 c -9.282,2.881 -15.51,11.332 -15.51,21.059 0,11.313 8.587,20.672 19.571,21.91 -0.426,-1.953 -0.638,-3.984 -0.638,-6.052 h 6.265 c 0,12.144 9.883,22.045 22.046,22.045 12.164,0 22.046,-9.901 22.046,-22.045 h 6.265 c 0,2.068 -0.212,4.099 -0.638,6.052 C 6.923,41.731 15.51,32.372 15.51,21.059 15.51,11.332 9.283,2.881 0,0 m -6.304,49.37 c -4.622,9.399 -14.291,15.858 -25.43,15.858 -11.139,0 -20.808,-6.459 -25.43,-15.858 -15.509,-0.135 -28.079,-12.783 -28.079,-28.311 0,-6.169 1.953,-12.028 5.627,-16.941 3.095,-4.138 7.329,-7.387 12.087,-9.32 v -26.262 c 0,-6.516 5.279,-11.815 11.816,-11.815 h 2.049 v 6.265 h -1.141 c -2.958,0 -5.492,1.875 -6.459,4.525 -0.27,0.735 -0.425,1.528 -0.425,2.359 v 0.445 c 0,0.831 0.155,1.624 0.425,2.36 0.967,2.649 3.501,4.524 6.459,4.524 H 4.062 v 17.599 c 4.756,1.933 8.992,5.182 12.086,9.32 3.674,4.913 5.627,10.772 5.627,16.941 0,15.528 -12.57,28.176 -28.079,28.311"> </path> </g> <g transform="translate(393.2905,331.957)"> <path d="m 0,0 v -21.868 l -2.106,2.851 -2.852,3.86 -1.241,1.673 -1.051,-1.421 -2.67,-3.608 -2.482,-3.355 V 0 Z"> </path> </g> <g transform="translate(388.2104,394.4053)"> <path d="m 0,0 c -1.057,0 -1.917,-0.86 -1.917,-1.917 v -9.986 h -2.068 v 9.986 C -3.985,-0.86 -4.845,0 -5.902,0 -6.959,0 -7.819,-0.86 -7.819,-1.917 v -9.986 h -2.068 v 9.986 c 0,1.057 -0.86,1.917 -1.917,1.917 -1.057,0 -1.917,-0.86 -1.917,-1.917 V -13.82 c 0,-3.579 2.46,-6.711 5.902,-7.58 v -27.933 c 0,-1.057 0.86,-1.917 1.917,-1.917 1.057,0 1.917,0.86 1.917,1.917 V -21.4 c 3.441,0.869 5.902,4.001 5.902,7.58 V -1.917 C 1.917,-0.86 1.058,0 0,0"> </path> </g> <g transform="translate(403.9771,394.1162)"> <path d="M 0,0 C -0.558,0.351 -1.273,0.383 -1.867,0.086 -6.162,-2.061 -8.83,-6.415 -8.83,-11.277 v -11.108 c 0,-3.579 2.461,-6.711 5.903,-7.58 v -19.079 c 0,-1.058 0.86,-1.917 1.917,-1.917 1.057,0 1.917,0.859 1.917,1.917 V -1.628 C 0.907,-0.96 0.567,-0.351 0,0"> </path> </g> <g transform="translate(416.9302,394.4053)"> <path d="m 0,0 c -4.385,0 -7.819,-4.774 -7.819,-10.869 0,-5.054 2.41,-9.289 5.902,-10.454 v -28.01 c 0,-1.057 0.86,-1.917 1.917,-1.917 1.057,0 1.917,0.86 1.917,1.917 v 28.01 c 3.492,1.165 5.902,5.4 5.902,10.454 C 7.819,-4.774 4.384,0 0,0"> </path> </g> <g transform="translate(437.1963,324.5371)"> <path d="m 0,0 c 0,-1.741 -1.392,-3.133 -3.133,-3.133 h -37.4 v 6.266 h 37.4 C -1.392,3.133 0,1.74 0,0"> </path> </g> </g> </g> </g> </svg> </a> <div class="navlinks-wrapper"> <button class="toggle-menu close-menu">脳</button> <a class="navlinks-wrapper__link" href="/#benefits">Benefits</a> <a class="navlinks-wrapper__link" href="/#how-it-works">How it works</a> <a class="navlinks-wrapper__link" href="/#features">Features</a> <a class="navlinks-wrapper__link" href="/recipe-card-templates">Recipe card examples</a> <a class="navlinks-wrapper__link" href="/#testimonials">Testimonials</a> <a class="navlinks-wrapper__link" href="/#faqs">FAQ</a>  </div> <div class="mobile-navlinks-backdrop"></div> <button class="button nav-btn button-secondary nav-get-access-btn" data-fsc-action="Add,Checkout" data-fsc-item-path-value="recipes-generator">Get Started</button> <a class="button nav-btn login" href="/login">Login</a> <button class="button nav-btn toggle-menu open-menu">Menu</button> </div> </div> <style> .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 5; background: #fff; } .nav-inner { max-width: 1400px; padding: 10px 20px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .logo { margin-right: 15px; position: relative; font-size: 0; width: 145px; cursor: pointer; } .navlinks-wrapper { margin-left: auto; position: relative; display: -webkit-box; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .navlinks-wrapper__link { position: relative; padding: 20px 15px; font-size: 0.9rem; color: #000; text-transform: capitalize; letter-spacing: 0.05em; text-decoration: none; cursor: pointer; } .navlinks-wrapper__link:last-child { margin-right: 10px; } .navlinks-wrapper__dropdown { position: absolute; top: 100%; left: 50%; padding: 15px 0; list-style: none; color: #000; background: #fff; border-radius: 5px; white-space: nowrap; transform: translate(-50%, 10px); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); transition: all 0.3s; } .navlinks-wrapper__link:not(:hover) .navlinks-wrapper__dropdown { opacity: 0; visibility: hidden; pointer-events: none; } .navlinks-wrapper__link:hover .navlinks-wrapper__dropdown { transform: translate(-50%, 0); } .navlinks-wrapper__dropdown a { display: block; padding: 12px 25px; transition: all 0.3s; } .navlinks-wrapper__dropdown a:hover { color: #fff; background: var(--keycolor); } .navlinks-wrapper.open { opacity: 1; visibility: visible; -webkit-transform: translateX(0); transform: translateX(0); } .mobile-navlinks-backdrop { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); z-index: 98; } .navlinks-wrapper.open~.mobile-navlinks-backdrop { display: block; } .nav-btn { padding: 10px 20px; } .login { margin-left: 10px; } @media only screen and (min-width: 851px) { .toggle-menu { display: none; } } @media only screen and (max-width: 850px) { .navlinks-wrapper { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 270px; background: #fff; flex-direction: column; transition: all 0.3s; z-index: 100; /* align-items: stretch; */ } .navlinks-wrapper:not(.open) { transform: translateX(100%); } .navlinks-wrapper__link { color: #000; padding: 20px 30px; } .open-menu { padding: 10px; margin-left: 10px; display: -webkit-inline-box; display: inline-flex; -webkit-box-align: center; align-items: center; } .open-menu:before { content: ""; display: block; width: 15px; height: 2px; margin-right: 8px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; } .close-menu { font-size: 30px; padding: 10px 30px; } .nav-get-access-btn { margin-left: auto; } } @media only screen and (max-width: 500px) { .login, .nav-get-access-btn { display: none; } } </style> <script defer> var toggleMenu = document.querySelectorAll(".toggle-menu"); toggleMenu.forEach(function (item) { item.addEventListener("click", function () { document.querySelector(".navlinks-wrapper").classList.toggle("open"); }); }); document.querySelector(".mobile-navlinks-backdrop").addEventListener("click", function () { document.querySelector(".navlinks-wrapper").classList.remove("open"); }); </script> <main> <article class="blog-post"> <a href="blog/how-to-create-recipe-schema-markup"> <img src="./images/blog/how-to-create-recipe-schema-markup.png" alt="How to create recipe schema markup and why"> <h2>How to create recipe schema markup and why</h2> </a> </article> </main> <footer class="main-footer"> <div class="main-footer__inner"> <div class="main-footer__col"> <h5 class="main-footer__title">Quick links</h5> <p><a class="main-footer__link" href="/#benefits">Why use Recipes Generator</a></p> <p class="mtm"><a class="main-footer__link" href="/#features">Features</a></p> <p class="mtm"><a class="main-footer__link" href="/#testimonials">Testimonials</a></p>  <p class="mtm"><a class="main-footer__link" href="/#faqs">Frequently asked questions</a></p> </div> <div class="main-footer__col"> <h5 class="main-footer__title">Explore</h5> <p><a class="main-footer__link" href="/recipe-card-for-wix">Wix recipe plugin</a></p> <p class="mtm"><a class="main-footer__link" href="/recipe-card-for-squarespace">Squarespace recipe plugin</a> <p class="mtm"><a class="main-footer__link" href="/recipe-card-templates">Recipe card templates</a></p> <p class="mtm"><a class="main-footer__link" href="/blog">Blog</a></p> </div> <div class="main-footer__col"> <h5 class="main-footer__title">Newsletter</h5> <p>Subscribe to our newsletter for news and special discounts delivered to your inbox</p> <form class="mtm" action="https://recipesgenerator.us1.list-manage.com/subscribe/post?u=450ee404939660d9a13b54e5d&id=3c79d1d215" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank"> <div id="mc_embed_signup_scroll" style="display: flex;"> <input type="form-control" value="" name="EMAIL" class="form-control" id="mce-EMAIL" placeholder="Enter your email address" required=""> <div style="position: absolute;opacity: 0;visibility: hidden;" aria-hidden="true"><input type="text" name="b_450ee404939660d9a13b54e5d_3c79d1d215" tabindex="-1" value=""></div> <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button button-secondary" style="margin-left: 10px;border:0;"> </div> </form> </div> </div> </footer> <style> .main-footer { --bg: transparent; color: rgba(0, 0, 0, 0.85); background: var(--bg); } .main-footer__inner { max-width: 1400px; margin-left: auto; margin-right: auto; display: flex; flex-wrap: wrap; align-items: flex-start; padding: 40px 20px 4vw; } @media screen and (min-width: 1920px) { .main-footer__inner { padding-bottom: 80px; } } .main-footer__col { flex: 1; min-width: 260px; padding: 0 20px 40px; } .main-footer__title { margin: 0 0 20px; font-size: 1.1rem; } .main-footer a { color: var(--color); text-decoration: none; } .main-footer a:hover { text-decoration: underline; } </style> <script src="js/on-order-complete.js" type="text/javascript"></script> <script id="fsc-api" data-popup-webhook-received="onOrderComplete" data-storefront="recipesgenerator.onfastspring.com/popup-recipesgenerator" src="https://d1f8f9xcsvx3ha.cloudfront.net/sbl/0.8.3/fastspring-builder.min.js" type="text/javascript"></script>  <script src="/__/firebase/8.4.1/firebase-app.js"></script> <script src="/__/firebase/8.4.1/firebase-analytics.js"></script>  <script src="/__/firebase/init.js"></script> <script> firebase.analytics();</script> </body> </html>

CINXE.COM

Recipe Card Generator Plugin for SquareSpace & Wix