Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!DOCTYPE html>

<head>
    <html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Product Landing Page</title>
    <link rel="stylesheet" type="text/css" href="productpage.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
    <header id="header">
        <div id="wrapper">
            <nav id="nav-bar">
                <div id="logo" class="logo">
                    <img id="header-img" src="https://res.cloudinary.com/dg45lvfuu/image/upload/v1529649421/pet-food_pqcmti.svg">
                    <p>Cute Dog Food</p>
                </div>
                <div id="links" class="links">
                    <div></div>
                    <a href="#description" class="nav-link">Description</a>
                    <a href="#shipping" class="nav-link">Shipping</a>
                    <a href="#pricing" class="nav-link">Pricing</a>
                    <a href="#ingredients" class="nav-link">Ingredients</a>
                </div>
            </nav>
        </div>
        <h1>Cute Dog Food</h1>
    </header>
    <main>
        <section id="description">
            <h2>Description</h2>
            <div id="descripwithimgage" class="withicons">
                <div id="bulb-icon">
                        <?xml version="1.0" encoding="UTF-8" standalone="no"?>
                        <!-- Created with Inkscape (http://www.inkscape.org/) -->
                        <svg
                            xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
                            xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
                            xmlns="http://www.w3.org/2000/svg"
                            xmlns:cc="http://creativecommons.org/ns#"
                            xmlns:dc="http://purl.org/dc/elements/1.1/"
                            xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
                            id="svg3416"
                            sodipodi:docname="_svgclean2.svg"
                            viewBox="0 0 177.91 187.84"
                            version="1.1"
                            inkscape:version="0.48.3.1 r9886"
                          >
                          <sodipodi:namedview
                              id="base"
                              fit-margin-left="0"
                              inkscape:zoom="0.98975522"
                              borderopacity="1.0"
                              inkscape:current-layer="layer1"
                              inkscape:cx="123.62503"
                              inkscape:cy="-780.40224"
                              inkscape:grid-bbox="true"
                              inkscape:window-maximized="0"
                              showgrid="true"
                              fit-margin-right="0"
                              inkscape:document-units="px"
                              bordercolor="#666666"
                              inkscape:window-x="974"
                              inkscape:window-y="483"
                              fit-margin-bottom="0"
                              inkscape:window-width="512"
                              inkscape:pageopacity="0.0"
                              inkscape:pageshadow="2"
                              pagecolor="#ffffff"
                              inkscape:window-height="452"
                              fit-margin-top="0"
                          />
                          <g
                              id="layer1"
                              inkscape:label="Layer 1"
                              inkscape:groupmode="layer"
                              transform="translate(76.364 79.336)"
                            >
                            <path
                                id="path3237"
                                style="fill-rule:evenodd;fill:#000000"
                                d="m-0.51897 92.754c-0.24619-0.0675-0.3249-0.68914-0.31718-1.8124 0.007714-1.1232 0.09916-2.7515 0.09642-4.8411-0.00274-2.0897-0.1019-4.6455-0.53533-7.5704s-1.2029-6.2238-2.5761-9.6724c-1.2306-3.1519-2.9924-6.4213-5.246-9.8394s-5.0031-6.9841-7.954-10.84c-2.4126-3.0864-4.9874-6.4164-7.4384-10.141-2.451-3.7242-4.7783-7.8429-6.5597-12.557-0.000001-0.000004-0.000003-0.000007-0.000004-0.00001-2.2358-6.0874-3.2336-12.898-2.684-19.861 0.54963-6.9625 2.6479-14.075 6.531-20.518 3.4514-5.6783 8.2302-10.668 13.967-14.48 5.7365-3.8122 12.429-6.445 19.564-7.3752 0.31494-0.04106 0.63032-0.07875 0.94608-0.11304 7.346-0.76597 14.66 0.3505 21.236 2.9259 6.5767 2.5754 12.414 6.6082 16.983 11.673 5.0562 5.6581 8.358 12.396 9.974 19.241 1.616 6.8443 1.5472 13.792 0.0042 20.147-0.93548 3.6812-2.2402 7.0082-3.6296 10.09-1.3894 3.0823-2.8637 5.9199-4.2148 8.6012-0.000001 0.000002-0.000003 0.000005-0.000004 0.000008-7.3947 14.839-12.131 27.666-15.322 36.634-1.5953 4.4841-2.8062 8.0117-3.7321 10.393-0.92587 2.3809-1.5698 3.6153-1.9499 3.5333-0.38007-0.08199-0.47606-1.4769-0.25284-4.0448s0.76861-6.309 1.7541-11.051c0.98552-4.7416 2.414-10.484 4.4428-17.015 2.0288-6.5311 4.6604-13.851 8.0524-21.702 0.000002-0.000003 0.000003-0.000006 0.000004-0.000009 1.2152-2.8463 2.5162-5.6965 3.6776-8.5761s2.1832-5.7884 2.7637-8.7747c1.048-5.041 0.887-10.582-0.558-15.997-1.446-5.4158-4.176-10.705-8.157-14.968-3.5637-3.8622-8.2087-6.9507-13.413-8.9299-5.204-1.9792-10.965-2.8482-16.603-2.2368-0.24316 0.025-0.48628 0.05276-0.7293 0.08326-5.5056 0.69108-10.795 2.7666-15.367 5.7531-4.5721 2.9865-8.4253 6.8826-11.179 11.275-3.1476 4.968-4.9466 10.649-5.5413 16.272-0.59469 5.6226 0.0151 11.185 1.6409 16.155l0.000003 0.000009c1.2387 3.9334 3.1346 7.5885 5.2357 11.085 2.1011 3.4967 4.4074 6.8348 6.602 10.081 2.7697 4.0066 5.3961 7.965 7.5313 11.867 2.1351 3.9023 3.7827 7.7463 4.8616 11.443 1.1656 4.0803 1.5856 7.8568 1.6106 11.122 0.025032 3.2649-0.34285 6.0232-0.81798 8.209s-1.0557 3.8041-1.5498 4.8565c-0.49414 1.0523-0.90025 1.5423-1.1464 1.4748z"
                                inkscape:path-effect="#path-effect3239;#path-effect3241"
                                inkscape:connector-curvature="0"
                                inkscape:original-d="m -0.51897231,92.754041 c -0.74399999,-6.8439 1.74704001,-17.01685 -0.71428999,-24.77919 -5.34631,-16.86074 -24.1489997,-24.18095 -25.7142797,-43.92675 -3.2369,-40.832957 62.2736,-24.64174658 78.21428,-7.884277 2.81966,2.96412 -5.91206,15.433517 -7.14286,18.021227 -11.68112,24.55928 -17.5,22.17928 -17.5,52.18647"
                            />
                            <path
                                id="path3261"
                                style="fill-rule:evenodd;fill:#000000"
                                d="m2.4684 72.974c0.32477-2.7408 5.9894-4.3253 12.644-3.5367 6.6549 0.78857 11.792 3.653 11.468 6.3938-0.32478 2.7408-5.9894 4.3253-12.644 3.5367-6.6549-0.789-11.792-3.653-11.468-6.394z"
                                inkscape:path-effect="#path-effect3263;#path-effect3265"
                                inkscape:connector-curvature="0"
                                inkscape:original-d="m 2.4684277,72.974091 c 8.1567403,0.46851 16.1400803,1.91252 24.1118603,2.85714"
                            />
                            <path
                                id="path3267"
                                style="fill-rule:evenodd;fill:#000000"
                                d="m-0.87612 87.403c0.22652-2.751 7.2104-4.423 15.589-3.733s14.995 3.4824 14.768 6.2331c-0.22653 2.7507-7.2104 4.4231-15.589 3.7331s-14.995-3.4824-14.768-6.2331z"
                                inkscape:path-effect="#path-effect3269;#path-effect3271"
                                inkscape:connector-curvature="0"
                                inkscape:original-d="m -0.87612231,87.402661 c 9.64024001,-0.3156 23.56547031,2.04722 30.35715031,2.5"
                            />
                            <path
                                id="path3273"
                                style="fill-rule:evenodd;fill:#000000"
                                d="m-0.37612 100.97c0.40447-2.726 7.2127-3.982 15.197-2.799 7.9843 1.1829 14.136 4.3587 13.732 7.0889-0.40447 2.7302-7.2127 3.986-15.197 2.8032s-14.136-4.3587-13.732-7.0889z"
                                inkscape:path-effect="#path-effect3275;#path-effect3277"
                                inkscape:connector-curvature="0"
                                inkscape:original-d="M -0.37612231,100.97409 C 9.2970677,101.93601 18.832718,105.2598 28.552458,105.2598"
                            />
                            <path
                                id="path3303"
                                style="fill-rule:evenodd;fill:#000000"
                                d="m-54.471-52.626c1.7376-2.1443 9.7099 1.4328 17.795 7.9846 8.0853 6.5518 13.237 13.61 11.499 15.754-1.7376 2.1443-9.7099-1.4328-17.795-7.9846-8.0853-6.5518-13.237-13.61-11.499-15.754z"
                                inkscape:path-effect="#path-effect3305;#path-effect3307"
                                inkscape:connector-curvature="0"
                                inkscape:original-d="m -54.471432,-52.626166 c 8.45443,9.56307 18.12908,17.53561 29.29442,23.73858"
                            />
                            <path
                                id="path3309"
                                style="fill-rule:evenodd;fill:#000000"
                                d="m4.6225-79.331c2.7507-0.226 5.5485 6.463 6.2455 14.93 0.697 8.468-0.9694 15.525-3.7201 15.751s-5.5489-6.462-6.2459-14.93c-0.69697-8.468 0.9698-15.524 3.7205-15.751z"
                                inkscape:path-effect="#path-effect3311;#path-effect3313"
                                inkscape:connector-curvature="0"
                                inkscape:original-d="m 4.6224877,-79.330796 c 1.8819,9.67038 2.09021,20.29575 2.52538,30.68081"
                            />
                            <path
                                id="path3315"
                                style="fill-rule:evenodd;fill:#000000"
                                d="m75.721-62.816c2.2121 1.6506-0.91827 9.5915-6.9874 17.725-6.0691 8.1338-12.79 13.396-15.002 11.745-2.2121-1.6506 0.91827-9.5915 6.9874-17.725 6.0691-8.1338 12.79-13.396 15.002-11.745z"
                                inkscape:path-effect="#path-effect3317;#path-effect3319"
                                inkscape:connector-curvature="0"
                                inkscape:original-d="m 75.721328,-62.815656 c -4.34104,11.37928 -13.18816,21.36245 -21.98952,29.47036"
                            />
                            <path
                                id="path3321"
                                style="fill-rule:evenodd;fill:#000000"
                                d="m65.92-0.89867c-1.197-2.4868 5.782-8.3326 15.578-13.048 9.7962-4.716 18.718-6.5252 19.916-4.0384 1.1972 2.4868-5.7817 8.3326-15.578 13.049-9.7962 4.716-18.718 6.5252-19.916 4.0384z"
                                inkscape:path-effect="#path-effect3323;#path-effect3325"
                                inkscape:connector-curvature="0"
                                inkscape:original-d="M 65.920258,-0.89866558 C 77.088848,-9.2995656 88.950178,-13.123156 101.41361,-17.985646"
                            />
                            <path
                                id="path3333"
                                style="fill-rule:evenodd;fill:#000000"
                                d="m-76.202-10.247c1.2958-2.4369 10.047-0.32059 19.533 4.7239 9.4862 5.0444 16.133 11.116 14.838 13.553-1.2958 2.4369-10.047 0.32059-19.533-4.7239-9.4862-5.0444-16.133-11.116-14.838-13.553z"
                                inkscape:path-effect="#path-effect3335;#path-effect3337"
                                inkscape:connector-curvature="0"
                                inkscape:original-d="m -76.202312,-10.246886 c 10.64502,7.2223804 21.79238,16.2460604 34.37039,18.2769904"
                            />
                            <path
                                id="path3339"
                                style="fill:#ffff00"
                                inkscape:connector-curvature="0"
                                d="m25.561 73.158c-3.0657-3.7144-17.188-5.3718-21.53-2.5268-1.1982 0.78506-1.1985 0.78464-1.1985-1.4184 0-6.899-4.5691-17.075-13.422-29.892-9.6528-13.975-11.496-17.386-13.346-24.703-2.4122-9.5365-0.16448-22.171 5.3221-29.917 13.641-19.258 39.761-21.756 56.13-5.3694 7.8871 7.8953 11.751 20.542 9.5686 31.315-0.94315 4.6546-1.9989 7.5655-6.3698 17.563-6.8363 15.636-12.049 32.084-14.233 44.904-0.15794 0.92743-0.19155 0.92905-0.92154 0.0446z"
                            />
                          </g
                          >
                          <metadata
                              id="metadata34"
                            >
                            <rdf:RDF
                              >
                              <cc:Work
                                >
                                <dc:format
                                  >image/svg+xml</dc:format
                                >
                                <dc:type
                                    rdf:resource="http://purl.org/dc/dcmitype/StillImage"
                                />
                                <cc:license
                                    rdf:resource="http://creativecommons.org/licenses/publicdomain/"
                                />
                                <dc:publisher
                                  >
                                  <cc:Agent
                                      rdf:about="http://openclipart.org/"
                                    >
                                    <dc:title
                                      >Openclipart</dc:title
                                    >
                                  </cc:Agent
                                  >
                                </dc:publisher
                                >
                              </cc:Work
                              >
                              <cc:License
                                  rdf:about="http://creativecommons.org/licenses/publicdomain/"
                                >
                                <cc:permits
                                    rdf:resource="http://creativecommons.org/ns#Reproduction"
                                />
                                <cc:permits
                                    rdf:resource="http://creativecommons.org/ns#Distribution"
                                />
                                <cc:permits
                                    rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
                                />
                              </cc:License
                              >
                            </rdf:RDF
                            >
                          </metadata
                          >
                        </svg
                        >
                </div> <!--end bulb-icon-->
            <p>Give your pet everything they need to thrive with Cute Dog Food. Made with high-quality ingredients that work
                cohesively to soothe sensitive systems and deliver precise nutrients, this unique formula is designed to
                support healthy skin while promoting soft and shiny coats. Antioxidants help support immune system health
                while wholesome barley settles sensitive stomachs. Support your pet’s total well-being through this highly
                digestible formula and watch as they flourish.</p>
            </div>
            <iframe id="video" src="https://www.youtube.com/embed/RT2rocKAW3M?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media"
                allowfullscreen></iframe>
        </section>
        <section id="shipping">
            <h2>Shipping</h2>
            <div id="shippingwithimage" class="withicons">
                <div id="truck-icon">
                        <?xml version="1.0" encoding="UTF-8" standalone="no"?>
                        <!-- Created with Inkscape (http://www.inkscape.org/) -->
                        <svg
                            xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
                            xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
                            xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink"
                            xmlns:ns1="http://sozi.baierouge.fr"
                            xmlns:cc="http://creativecommons.org/ns#"
                            xmlns:dc="http://purl.org/dc/elements/1.1/"
                            xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
                            id="svg3149"
                            sodipodi:docname="truck13.svg"
                            viewBox="30 30 40 40"
                            version="1.1"
                            inkscape:version="0.48.4 r9939"
                          >
                          <sodipodi:namedview
                              id="base"
                              bordercolor="#666666"
                              inkscape:pageshadow="2"
                              inkscape:window-y="25"
                              pagecolor="#ffffff"
                              inkscape:window-height="1005"
                              inkscape:window-maximized="0"
                              inkscape:zoom="2.8"
                              inkscape:window-x="960"
                              showgrid="false"
                              borderopacity="1.0"
                              inkscape:current-layer="layer1"
                              inkscape:cx="46.160714"
                              inkscape:cy="48.392857"
                              inkscape:window-width="958"
                              inkscape:pageopacity="0.0"
                              inkscape:document-units="px"
                          />
                          <g
                              id="layer1"
                              inkscape:label="Layer 1"
                              inkscape:groupmode="layer"
                              transform="translate(0 -952.36)"
                            >
                            <path
                                id="path7753"
                                style="block-progression:tb;text-indent:0;color:black;text-transform:none;fill:#28383c"
                                inkscape:connector-curvature="0"
                                d="m46.981 993.36c-0.2666 0.028-0.5014 0.2944-0.5 0.5625v10.812c-0.02 0.1245 0.029 0.2663 0.094 0.375 0.016 0.028 0.01 0.038 0.031 0.062-0.0001 0-0.0001 0.027 0 0.031 0.033 0.039 0.082 0.065 0.125 0.094 0.058 0.039 0.1498 0.08 0.2187 0.094 0.067 0.013 0.12 0.013 0.1875 0h16.375c0.2861 0 0.5625-0.2763 0.5625-0.5625v-6.8124c0.01-0.049 0.01-0.1072 0-0.1562 0-0.051-0.013-0.1088-0.031-0.1563l-0.031-0.031c-0.021-0.045-0.03-0.087-0.062-0.125-0.01-0.01-0.023-0.024-0.031-0.031-0.011-0.012-0.02-0.02-0.031-0.031-0.1151-0.097-0.2879-0.1438-0.4375-0.125-0.019 0-0.044-0.01-0.062 0l-16.344-4c-0.019-0.0009-0.044-0.0009-0.062 0zm0.5938 1.0938 15.406 4v5.8436h-15.406v-9.8436zm-8.6563 4.125a0.54655 0.54655 0 0 0 -0.3125 0.2812l-2.5937 4.5312a0.54655 0.54655 0 0 0 -0.0937 0.2812v4.25a0.54655 0.54655 0 0 0 0.5625 0.5313h2a0.54655 0.54655 0 0 0 0.5312 -0.4063c0.4454-1.674 1.9684-2.9062 3.7813-2.9062 0.6036 0 1.1722 0.1266 1.6875 0.375a0.54655 0.54655 0 0 0 0.75 -0.625v-5.7812a0.54655 0.54655 0 0 0 -0.5313 -0.5312h-5.5938a0.54655 0.54655 0 0 0 -0.062 0 0.54655 0.54655 0 0 0 -0.125 0zm0.5 1.0937h4.7188v4.5937c-0.4327-0.1246-0.8709-0.2188-1.3438-0.2188-2.1542 0-3.9536 1.3935-4.6562 3.3125h-1.125v-3.5312l2.4062-4.1562zm6.2813 6.6874c-0.3573 0.037-0.5803 0.4982-0.4063 0.8125l1 1.9063c0.1312 0.2563 0.4625 0.3811 0.7188 0.25 0.2563-0.1312 0.3811-0.4937 0.25-0.75l-0.5938-1.125h2.5l-0.5937 1.125c-0.1311 0.2563-0.01 0.6188 0.25 0.75 0.2563 0.1311 0.6188 0.01 0.75-0.25l0.9687-1.9063c0.1741-0.3143-0.049-0.7751-0.4062-0.8125h-0.5625-3.3125-0.5625zm7.875 0c-1.3706 0-2.5 1.1294-2.5 2.5s1.1294 2.5 2.5 2.5 2.4687-1.1294 2.4687-2.5-1.0981-2.5-2.4687-2.5zm5.4375 0c-1.3706 0-2.5 1.1294-2.5 2.5s1.1294 2.5 2.5 2.5 2.5-1.1294 2.5-2.5-1.1294-2.5-2.5-2.5zm3.4375 0a0.54655 0.54655 0 0 0 -0.4375 0.8125l1 1.9063a0.54996 0.54996 0 0 0 0.9688 -0.5l-1-1.9063a0.54655 0.54655 0 0 0 -0.5313 -0.3125zm-20 0.031c-1.3706 0-2.5 1.0983-2.5 2.4688 0 1.3706 1.1294 2.5 2.5 2.5 1.3705 0 2.5-1.1294 2.5-2.5 0-1.3705-1.1294-2.4688-2.5-2.4688zm11.125 1.0625c0.7799 0 1.375 0.6264 1.375 1.4063s-0.5951 1.4062-1.375 1.4062-1.4063-0.6263-1.4063-1.4062 0.6264-1.4063 1.4063-1.4063zm5.4375 0c0.7799 0 1.4062 0.6264 1.4062 1.4063s-0.6263 1.4062-1.4062 1.4062-1.4063-0.6263-1.4063-1.4062 0.6264-1.4063 1.4063-1.4063zm-16.562 0.031c0.7798 0 1.4062 0.5952 1.4062 1.375 0 0.7799-0.6264 1.4063-1.4062 1.4063-0.7799 0-1.4063-0.6264-1.4063-1.4063 0-0.7798 0.6263-1.375 1.4063-1.375z"
                            />
                          </g
                          >
                          <metadata
                            >
                            <rdf:RDF
                              >
                              <cc:Work
                                >
                                <dc:format
                                  >image/svg+xml</dc:format
                                >
                                <dc:type
                                    rdf:resource="http://purl.org/dc/dcmitype/StillImage"
                                />
                                <cc:license
                                    rdf:resource="http://creativecommons.org/licenses/publicdomain/"
                                />
                                <dc:publisher
                                  >
                                  <cc:Agent
                                      rdf:about="http://openclipart.org/"
                                    >
                                    <dc:title
                                      >Openclipart</dc:title
                                    >
                                  </cc:Agent
                                  >
                                </dc:publisher
                                >
                              </cc:Work
                              >
                              <cc:License
                                  rdf:about="http://creativecommons.org/licenses/publicdomain/"
                                >
                                <cc:permits
                                    rdf:resource="http://creativecommons.org/ns#Reproduction"
                                />
                                <cc:permits
                                    rdf:resource="http://creativecommons.org/ns#Distribution"
                                />
                                <cc:permits
                                    rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
                                />
                              </cc:License
                              >
                            </rdf:RDF
                            >
                          </metadata
                          >
                        </svg
                        >
                </div><!--end truck-icon-->
            <p>We can deliver the Cute Dog Food to your door in less then a week. If you order more than one package, make sure
                to contact us before ordering because we would like to offer you a combined shipping discount.</p>
            </div>
            <form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
                <label for="email">We would like to hear from you!</label>
                <input type="email" id="email" placeholder="Write your email here" name="email" required>
                <input id="submit" type="submit" value="Contact us now">
            </form>
        </section>
        <section id="pricing">
            <h2>Pricing</h2>
            <div id="products" class="products">
                <div id="product1" class="product">
                    <p class="prod-title">Small Package</p>
                    <p class="prod-subtitle">Cute Dog 3 kg</p>
                    <p class="prod-descrip">Lorem ipsum.</p>
                    <p class="prod-descrip">Lorem ipsum.</p>
                    <p class="prod-descrip">Lorem ipsum.</p>
                    <p class="price">$10</p>
                    <button type="button" onclick="window.location.href='http://ionv.co.nf';">Order now!</button>
                </div>
                <div id="product2" class="product">
                    <p class="prod-title">Medium Package</p>
                    <p class="prod-subtitle">Cute Dog 12 kg</p>
                    <p class="prod-descrip">Lorem ipsum.</p>
                    <p class="prod-descrip">Lorem ipsum.</p>
                    <p class="prod-descrip">Lorem ipsum.</p>
                    <p class="price">$35</p>
                    <button type="button" onclick="window.location.href='http://ionv.co.nf';">Order now!</button>
                </div>
                <div id="product3" class="product">
                    <p class="prod-title">Huge Package</p>
                    <p class="prod-subtitle">Cute Dog 20 kg</p>
                    <p class="prod-descrip">Lorem ipsum.</p>
                    <p class="prod-descrip">Lorem ipsum.</p>
                    <p class="prod-descrip">Lorem ipsum.</p>
                    <p class="price">$50</p>
                    <button type="button" onclick="window.location.href='http://ionv.co.nf';">Order now!</button>
                </div>
            </div>
        </section>
        <section id="ingredients">
            <h2>Ingredients</h2>
            <div id="ingredwithimage" class="withicons">
                <div id="gears-icon">
                        <?xml version="1.0" encoding="UTF-8" standalone="no"?>
                        <!-- Created with Inkscape (http://www.inkscape.org/) -->
                        <svg
                            xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
                            xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
                            xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink"
                            xmlns:ns1="http://sozi.baierouge.fr"
                            xmlns:cc="http://creativecommons.org/ns#"
                            xmlns:dc="http://purl.org/dc/elements/1.1/"
                            xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
                            id="svg2995"
                            sodipodi:docname="aplicacionProyectada.svg"
                            inkscape:export-filename="/home/aztlek/Documentos/IDU/TOGAF IDU/TOGAF IDU V2.0/aplicacionProyectada-48x48.png"
                            viewBox="0 0 50 50"
                            inkscape:export-xdpi="90"
                            version="1.1"
                            inkscape:export-ydpi="90"
                            inkscape:version="0.48.3.1 r9886"
                          >
                          <sodipodi:namedview
                              id="base"
                              bordercolor="#666666"
                              inkscape:pageshadow="2"
                              inkscape:window-y="27"
                              pagecolor="#ffffff"
                              inkscape:window-height="712"
                              inkscape:grid-bbox="true"
                              inkscape:window-maximized="1"
                              inkscape:zoom="11.291667"
                              inkscape:window-x="0"
                              showgrid="true"
                              borderopacity="1.0"
                              inkscape:current-layer="layer1"
                              inkscape:cx="24"
                              inkscape:cy="24"
                              inkscape:window-width="1366"
                              inkscape:pageopacity="0.0"
                              inkscape:document-units="px"
                          />
                          <g
                              id="layer1"
                              inkscape:label="Layer 1"
                              inkscape:groupmode="layer"
                            >
                            <path
                                id="path2989"
                                style="fill:#ff0000"
                                inkscape:connector-curvature="0"
                                d="m14.477 17.899c-0.8272 0-1.639 0.07439-2.4278 0.20885l-0.38506 4.079c-0.81588 0.22743-1.5881 0.54542-2.3104 0.95286l-3.1525-2.604c-1.3315 0.94256-2.497 2.1013-3.4394 3.4329l2.6106 3.1523c-0.407 0.722-0.7321 1.496-0.9595 2.311l-4.0725 0.38506c-0.13454 0.78912-0.20885 1.6004-0.20885 2.4279 0 0.82888 0.073848 1.6374 0.20885 2.4278l4.0725 0.384c0.22739 0.81479 0.55244 1.5889 0.95939 2.3104l-2.604 3.153c0.9407 1.3279 2.0985 2.4922 3.4264 3.4329l3.1588-2.6106c0.72275 0.4078 1.4939 0.73187 2.3104 0.95939l0.38506 4.079c0.78888 0.13447 1.6006 0.20234 2.4278 0.20234s1.6324-0.06786 2.4213-0.20234l0.38506-4.079c0.81647-0.22752 1.5876-0.55159 2.3104-0.95939l3.1588 2.6106c1.3278-0.94074 2.4857-2.105 3.4264-3.4329l-2.6041-3.1523c0.40695-0.72143 0.732-1.4956 0.95939-2.3104l4.0725-0.38508c0.13499-0.79041 0.20885-1.5989 0.20885-2.4278 0-0.82747-0.07432-1.6387-0.20885-2.4279l-4.072-0.385c-0.22739-0.8148-0.55244-1.5889-0.95939-2.3104l2.6106-3.1523c-0.943-1.333-2.109-2.491-3.44-3.434l-3.1523 2.6041c-0.72229-0.40744-1.4945-0.72544-2.3104-0.95286l-0.386-4.079c-0.78888-0.13445-1.5941-0.20885-2.4213-0.20885zm0 8.8825c3.0165 0 5.4561 2.4462 5.4561 5.4627s-2.4396 5.4626-5.4561 5.4626-5.4626-2.4462-5.4626-5.4626c0-3.0165 2.4462-5.4627 5.4626-5.4627z"
                            />
                            <path
                                id="path2985"
                                d="m29.722 1.5887c-0.79544 0.227-1.5556 0.5213-2.2773 0.86707l0.74908 4.0281c-0.722 0.4426-1.377 0.9602-1.96 1.5503l-3.746-1.6391c-1.022 1.2718-1.824 2.7059-2.365 4.2449l3.3754 2.3149c-0.19336 0.8054-0.29349 1.639-0.28856 2.4849l-3.8105 1.4878c0.08718 0.79574 0.23834 1.5963 0.46541 2.392 0.22746 0.79706 0.52035 1.5543 0.86706 2.2773l4.0218-0.74727c0.44225 0.72111 0.96726 1.3763 1.5566 1.9584l-1.6391 3.7458c1.269 1.0188 2.7019 1.8206 4.2369 2.3609l2.3212-3.3772c0.80691 0.19381 1.6374 0.29382 2.4849 0.28855l1.4896 3.8168c0.7955-0.08718 1.5947-0.24468 2.3902-0.47167 0.79544-0.227 1.5511-0.51322 2.2728-0.85902l-0.749-4.029c0.72269-0.44284 1.3753-0.96608 1.9584-1.5566l3.7539 1.6436c1.0187-1.269 1.8126-2.7064 2.3528-4.2414l-3.3691-2.3167c0.19336-0.80541 0.29349-1.639 0.28856-2.4849l3.8105-1.4879c-0.087-0.797-0.237-1.595-0.465-2.392-0.227-0.795-0.521-1.555-0.867-2.2769l-4.022 0.7472c-0.442-0.7211-0.967-1.3763-1.556-1.9584l1.6453-3.7477c-1.272-1.0218-2.71-1.8162-4.249-2.3572l-2.317 3.3691c-0.807-0.1936-1.636-0.2874-2.483-0.2823l-1.4896-3.8168c-0.79549 0.087191-1.5902 0.23662-2.3857 0.46362zm2.4375 8.5415c2.9007-0.82777 5.9179 0.855 6.7457 3.7557 0.82777 2.9007-0.84694 5.9224-3.7476 6.7502-2.9007 0.82777-5.9242-0.85321-6.752-3.7539-0.82778-2.9007 0.85321-5.9242 3.7539-6.752z"
                                style="fill:#550000"
                                inkscape:connector-curvature="0"
                            />
                          </g
                          >
                          <metadata
                            >
                            <rdf:RDF
                              >
                              <cc:Work
                                >
                                <dc:format
                                  >image/svg+xml</dc:format
                                >
                                <dc:type
                                    rdf:resource="http://purl.org/dc/dcmitype/StillImage"
                                />
                                <cc:license
                                    rdf:resource="http://creativecommons.org/licenses/publicdomain/"
                                />
                                <dc:publisher
                                  >
                                  <cc:Agent
                                      rdf:about="http://openclipart.org/"
                                    >
                                    <dc:title
                                      >Openclipart</dc:title
                                    >
                                  </cc:Agent
                                  >
                                </dc:publisher
                                >
                              </cc:Work
                              >
                              <cc:License
                                  rdf:about="http://creativecommons.org/licenses/publicdomain/"
                                >
                                <cc:permits
                                    rdf:resource="http://creativecommons.org/ns#Reproduction"
                                />
                                <cc:permits
                                    rdf:resource="http://creativecommons.org/ns#Distribution"
                                />
                                <cc:permits
                                    rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
                                />
                              </cc:License
                              >
                            </rdf:RDF
                            >
                          </metadata
                          >
                        </svg
                        >
                </div><!--end gears-icon-->
            <p>Ingredients: Lamb, lamb meal, peas, chickpeas, lentils, pea flour, canola oil (preserved with mixed tocopherols),
                pea protein, pea fiber, natural flavor, salmon oil (a source of DHA), salt, sodium tripolyphosphate, choline
                chloride, dried chicory root, vitamin E supplement, zinc oxide, zinc proteinate, ferrous sulfate, manganous
                oxide, vitamin A supplement, d-calcium pantothenate, copper sulfate, manganese proteinate, niacin supplement,
                calcium iodate, riboflavin supplement, dried Lactobacillus acidophilus fermentation product, dried Lactobacillus
                casei fermentation product, dried Lactobacillus plantarum fermentation product, dried Enterococcus faecium
                fermentation product, thiamine mononitrate, copper proteinate, pyridoxine hydrochloride, vitamin D3 supplement,
                folic acid, sodium selenite, biotin, vitamin B12 supplement, cobalt carbonate</p>
            </div>
        </section>
        <div id="source">Food bag icon made by
            <a href="http://www.freepik.com" title="Freepik">Freepik</a> from
            <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by
            <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
        </div>
    </main>




    <footer>
        <h6 class="textcenter">Made by
                <a href="https://www.ionvarsescu.tk" target="_blank">Ion Varsescu</a>
        </h6>
        <div id="contact">
            <a href="https://www.facebook.com/varsescu.ion" target="_blank">
                <i class="fa fa-facebook-square fa-3x"></i>
            </a>
            <a href="https://twitter.com/IonVcoding" target="_blank">
                <i class="fa fa-twitter fa-3x"></i>
            </a>
            <a href="https://www.linkedin.com/in/ionvarsescu/" target="_blank">
                <i class="fa fa-linkedin fa-3x"></i>
            </a>
            <a href="https://plus.google.com/100730160336168112160" target="_blank">
                <i class="fa fa-google-plus fa-3x"></i>
            </a>
            <a href="https://github.com/Nei-V" target="_blank">
                <i class="fa fa-github fa-3x"></i>
            </a>
            <a href="https://www.freecodecamp.org/portofolio/nei-v" target="_blank">
                <img src="https://res.cloudinary.com/dg45lvfuu/image/upload/v1465845327/fcc-app-icon_gqbnku.png">
            </a>
        </div>
    </footer>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>

</html>
            
          
!
            
              html {
    min-width: 290px;
}

:root {
    --max-width: 800px;
}

body {
    max-width: var(--max-width);
    margin: auto;
    padding-top: 20px;
    text-align: center;
    background-color: rgb(243, 243, 213);
    font-family: Arial, Helvetica, sans-serif;
    color:#414241;
}

header {
    background-color: rgb(243, 243, 213);
    font-family: "Comic Sans MS", "comic sans", cursive;
    color:#409e34;
}

#wrapper {
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
}

nav {
    display: flex;
    flex-direction: row;
    background-color: rgb(243, 243, 213);
}



.logo {
    text-align: left;
    flex-basis: 10%;
    min-width: 290px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-self: center;
}

@media screen and (max-width:390px) {
    .logo {
        justify-content: center;
    }
}

#header-img {
    width: 30px;
    height: 30px;
}

.logo>p {
    font-size: 1.5em;
    padding: 0px;
    margin: 0px;
}

.links {
    align-self: center;
    flex-basis: 90%;
    display: flex;
    justify-content: space-between;
}

.nav-link {
    padding: 5px;
    flex-shrink: 1;
    flex-basis: 20%;
    text-decoration: none;
    color:#409e34;
}

.links>div {
    flex-shrink: 10;
    flex-basis: 20%;
}

@media screen and (max-width: 600px) {
    .links {
        flex-direction: column;
    }
    h1 {
        padding-top: 100px;
    }
}

@media screen and (max-width:390px) {
    nav {
        flex-direction: column;
    }
    h1 {
        padding-top: 140px;
    }
}


main {
    background-color: rgb(243, 243, 213);
}

h2 {
    background-color: rgb(243, 243, 213);
    color:#409e34;
    font-style:italic;
    font-family: "Comic Sans MS", "comic sans", cursive;
}

.withicons {
    display:flex;
   align-items:center;
}

#bulb-icon, #truck-icon, #gears-icon {
    width: 50px;
    height: 50px;
}

section>div>p {
    text-align: justify;
    margin-left: 10px;
    margin-right: 10px;
    width:90%;
    
}

@media screen and (max-width:600px){
    #bulb-icon, #truck-icon, #gears-icon{
        width:0px;
    }
    section>div>p{
        width:100%;
    }
}

iframe {
    max-width: 290px;
    height: auto;
}

input[type="submit"] {
    background-color: #00FFA3;
}


.products {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.product {
    width: 30%;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(185, 146, 60);
    font-family: "Comic Sans MS", "comic sans", cursive;
    
}

@media screen and (max-width:700px) {
    .products {
        flex-direction: column;
        align-items: center;
    }
    .product {
        width: 290px;
    }
}

.prod-title {
    background-color: rgb(219, 219, 191);
    font-size: 20px;
    font-weight: bold;
    color:#409e34;
}

.prod-subtitle, .price {
    font-size: 19px;
    font-weight: bold;
}

button {
    background-color: #00FFa3;
    font-weight: bold;
    font-size: 20px;
}

button:hover {
    cursor: grab;
}

#source {
    font-size: 12px;
}

footer {
    text-align: center;
    border-top: 1px solid rgb(45, 45, 68);
    max-height: max-content;
    margin-top: 1em;
}

footer p {
    font-size: 1em;
}

footer a img {
    height: 2.5em;
    margin-bottom: -0.2em;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console