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;
+}