cruci veggies

3 years ago · 458ff4d36f
parent 2dc70075b6
commit 458ff4d36f
3 changed files with 97 additions and 0 deletions
--- a/cms.js
+++ b/cms.js
--- a/index.html
+++ b/index.html
@ -0,0 +1,50 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="cms.js" defer></script>
    <title>food list</title>
 </head>
 <body>
    <h1>the ultimate grgr's guide to food</h1>
    <p>a list of allowed food and forbidden food,</p>
    <div class="allfood">
        <div class="allowed">
            <h2>✔✔✔</h2>
            <div class="veggies">
                <h3>Cruciferous vegetables</h3>
                <ul>
                    <li>arugula <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.XWnDDq0mOvMv9d2QoGolrgHaFF%26pid%3DApi&f=1" alt=""></li>
                    <li>bok choy <img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2F3stylelife.com%2Fwp-content%2Fuploads%2F2015%2F06%2Fbok-choy.jpg&f=1&nofb=1" alt=""></li>
                    <li>broccoli</li>
                    <li>brussel sprouts</li>
                    <li>cauliflower</li>
                    <li>collards</li>
                    <li>kale</li>
                    <li>kimchi</li>
                    <li>kohlrabi</li>
                    <li>napa cabbage</li>
                    <li>radicchio</li>
                </ul>
            </div>
            <div class="veggies">
                <h3>Leafy greens</h3>
                <ul>
                    <li></li>
                </ul>
            </div>
        </div>
        <div class="forbidden">
            <h2>❌❌❌</h2>
        </div>
    </div>
 </body>
 </html>
--- a/style.css
+++ b/style.css
@ -0,0 +1,47 @@
 body{
    margin: 0;
    padding: 24px;
    font-family: Arial, Helvetica, sans-serif;
 }
 h1,h3{
    margin: 0;
 }
 .allfood{
    display: flex;
    justify-content:center;
    flex-direction: row;
    column-gap:8px;
    margin-top: 6ch;
 }
 .allowed{
    flex-basis: 50vw;
    border: 1px solid palegreen;
    border-radius: 8px;
    padding: 8px;
 }
 .forbidden{
    flex-basis: 50vw;
    border: 1px solid palevioletred;
    border-radius: 8px;
    padding: 8px;
 }
 img{
    display:none;
    border-radius: 8px;
 }
 li{
    position: relative;
 }
 li:hover img{
    display:block;
    position: absolute;
    left: 70%;
    width: 100px;
    object-fit: contain;
 }