{"componentChunkName":"component---src-templates-project-js","path":"/projects/single-price-grid-component","result":{"data":{"site":{"siteMetadata":{"title":"itsHally"}},"markdownRemark":{"html":"<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/565a9104bd3ee18faba74b8804e533e4/8e1fc/desktop-preview.jpg\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 73.64864864864865%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAQBAgMF/8QAFgEBAQEAAAAAAAAAAAAAAAAAAQID/9oADAMBAAIQAxAAAAHtytk5vFQv/8QAGxAAAgIDAQAAAAAAAAAAAAAAAQIAIQMQERP/2gAIAQEAAQUCqdGsiFz4tBQ//8QAFxEBAAMAAAAAAAAAAAAAAAAAAgEQUf/aAAgBAwEBPwGUsr//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAZEAEAAgMAAAAAAAAAAAAAAAAAARARMUH/2gAIAQEABj8CbrLiH//EAB0QAAICAQUAAAAAAAAAAAAAAAERADEQQWGBkbH/2gAIAQEAAT8hYWQOZsu8JKkoEL1BSOgn/9oADAMBAAIAAwAAABCA3//EABgRAAIDAAAAAAAAAAAAAAAAAAABESEx/9oACAEDAQE/EEHUhYf/xAAVEQEBAAAAAAAAAAAAAAAAAAABEP/aAAgBAgEBPxABn//EAB4QAQACAgEFAAAAAAAAAAAAAAEAESFBMVFhcdHw/9oACAEBAAE/ENzOjSC+nMORs1BIiNlN29oHB8eI/KgGp//Z'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Desktop Preview\"\n        title=\"Desktop Preview\"\n        src=\"/static/565a9104bd3ee18faba74b8804e533e4/1c72d/desktop-preview.jpg\"\n        srcset=\"/static/565a9104bd3ee18faba74b8804e533e4/a80bd/desktop-preview.jpg 148w,\n/static/565a9104bd3ee18faba74b8804e533e4/1c91a/desktop-preview.jpg 295w,\n/static/565a9104bd3ee18faba74b8804e533e4/1c72d/desktop-preview.jpg 590w,\n/static/565a9104bd3ee18faba74b8804e533e4/a8a14/desktop-preview.jpg 885w,\n/static/565a9104bd3ee18faba74b8804e533e4/8e1fc/desktop-preview.jpg 900w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<h1>Single Price Grid Component</h1>\n<img alt=\"GitHub\" src=\"https://img.shields.io/github/license/itshally/SinglePriceGridComponent?style=for-the-badge\">\n<img alt=\"GitHub top language\" src=\"https://img.shields.io/github/languages/top/itshally/SinglePriceGridComponent?style=for-the-badge\">\n<p>This is my solution for this Frontendmentor Challenge.</p>\n<h2>Tools &#x26; Technologies</h2>\n<ul>\n<li>HTML</li>\n<li>CSS</li>\n<li>Flexbox</li>\n</ul>\n<h2>Installation</h2>\n<p>To clone this project to your device, type the <code>code</code> below to your git bash:</p>\n<pre><code>git clone https://github.com/itshally/SinglePriceGridComponent.git\n</code></pre>\n<p>After cloning the repo, you can start running it locally.</p>\n<pre><code>cd SinglePriceGridComponent\n\nstart index.html\n</code></pre>\n<h2>Screenshots</h2>\n<ul>\n<li>\n<h4>Desktop Design</h4>\n</li>\n</ul>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/b0dd03fb061adc7410c2fa79ddda271d/644c5/desktop-design.jpg\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 55.4054054054054%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAWAQEBAQAAAAAAAAAAAAAAAAACAAH/2gAMAwEAAhADEAAAAdlLI0MBL//EABgQAQADAQAAAAAAAAAAAAAAAAECAxAR/9oACAEBAAEFAlIhZF3hn//EABURAQEAAAAAAAAAAAAAAAAAABAh/9oACAEDAQE/Aaf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAZEAABBQAAAAAAAAAAAAAAAAAQAAERMUH/2gAIAQEABj8Cl1pof//EABoQAQACAwEAAAAAAAAAAAAAAAEAIRARYZH/2gAIAQEAAT8hvBrkXAs4QaTcCaHmP//aAAwDAQACAAMAAAAQ/A//xAAXEQEBAQEAAAAAAAAAAAAAAAABIRAR/9oACAEDAQE/EE6jM//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABoQAQEAAgMAAAAAAAAAAAAAAAERABAhMVH/2gAIAQEAAT8QmFVOFcIsJCk0LEPEwYjTpBr/2Q=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Desktop Design\"\n        title=\"Desktop Design\"\n        src=\"/static/b0dd03fb061adc7410c2fa79ddda271d/1c72d/desktop-design.jpg\"\n        srcset=\"/static/b0dd03fb061adc7410c2fa79ddda271d/a80bd/desktop-design.jpg 148w,\n/static/b0dd03fb061adc7410c2fa79ddda271d/1c91a/desktop-design.jpg 295w,\n/static/b0dd03fb061adc7410c2fa79ddda271d/1c72d/desktop-design.jpg 590w,\n/static/b0dd03fb061adc7410c2fa79ddda271d/a8a14/desktop-design.jpg 885w,\n/static/b0dd03fb061adc7410c2fa79ddda271d/fbd2c/desktop-design.jpg 1180w,\n/static/b0dd03fb061adc7410c2fa79ddda271d/644c5/desktop-design.jpg 1440w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<ul>\n<li>\n<h4>Mobile Design</h4>\n</li>\n</ul>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 375px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/b67a197a3fbae41583d7f0411602228e/bf173/mobile-design.jpg\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 231.75675675675674%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAuABQDASIAAhEBAxEB/8QAGQABAAMBAQAAAAAAAAAAAAAAAAEDBAIF/8QAGAEAAwEBAAAAAAAAAAAAAAAAAAEDAgT/2gAMAwEAAhADEAAAAfclIuA1jrcHPtQL56t8alC1mv8A/8QAHRAAAgICAwEAAAAAAAAAAAAAAQIAAxEyEhMgIv/aAAgBAQABBQKY8GNYwbueVMWV8c/mU6PvKdCgJ6lgHEf/xAAbEQACAgMBAAAAAAAAAAAAAAAAAQIRAxAxIf/aAAgBAwEBPwHTu+keDxsj4j//xAAXEQEAAwAAAAAAAAAAAAAAAAAQERJh/9oACAECAQE/AS2En//EABsQAAMAAgMAAAAAAAAAAAAAAAABERAxICGB/9oACAEBAAY/AuTjNlY6maZ6PNx0f//EACAQAAICAQMFAAAAAAAAAAAAAAABETEQIUHwYXGRobH/2gAIAQEAAT8hjB6MVYuK2BJ9DhSJGy5LMa7HCyyKHujPoNjTLO55FwD/2gAMAwEAAgADAAAAEL/zM+M//8QAGREBAQEAAwAAAAAAAAAAAAAAAREAECGB/9oACAEDAQE/EJwrSfXdzclXCA7/xAAZEQEBAQADAAAAAAAAAAAAAAABABExkdH/2gAIAQIBAT8Q1icObevZgTzf/8QAHxAAAwACAgMBAQAAAAAAAAAAAAERITFBYVFxgbHw/9oACAEBAAE/EFaTznoVPle0Li2a8Hw/EXVjJTwXkfG30tiSVkwSqGjaLSLwIqUDVImfydEcQ2e4tDYcZ0Bnklbk/9k='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Mobile Design\"\n        title=\"Mobile Design\"\n        src=\"/static/b67a197a3fbae41583d7f0411602228e/bf173/mobile-design.jpg\"\n        srcset=\"/static/b67a197a3fbae41583d7f0411602228e/a80bd/mobile-design.jpg 148w,\n/static/b67a197a3fbae41583d7f0411602228e/1c91a/mobile-design.jpg 295w,\n/static/b67a197a3fbae41583d7f0411602228e/bf173/mobile-design.jpg 375w\"\n        sizes=\"(max-width: 375px) 100vw, 375px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<h2>License</h2>\n<p>Distributed under the\n<a href=\"https://github.com/itshally/SinglePriceGridComponent/blob/master/LICENSE\">MIT License</a></p>","id":"312f72ad-4bb1-5743-90d5-7cf1dfc6b0cb","frontmatter":{"title":"Single Price Grid Component","description":"My solution for Frontendmentor Challenge","preview":"https://single-price-grid-component-itshally.vercel.app/","tools":["HTML","CSS","Flexbox"],"sourceCode":"https://github.com/itshally/SinglePriceGridComponent","keyWords":null,"image":{"childImageSharp":{"fixed":{"src":"/static/437ed59ad292b6b18bdd8bdc7d87bff3/986a3/singlepricegrid.png"}}}}}},"pageContext":{"id":"312f72ad-4bb1-5743-90d5-7cf1dfc6b0cb","previousPostId":"51c002de-2ba3-52b9-87b6-633f2e7e16c6","nextPostId":"af5c5105-b6a5-5102-b8f7-d641ab85ed02"}},"staticQueryHashes":["143701507"]}