Responsive Flex Layout

Intro

\n This project is a template for creating a web page based on a wrapping\n flexbox layout. This technique is an easy way to make web pages that\n scale nicely to different screen sizes without having cluttered and\n complex CSS.\n

\n\n

Structure

\n In the HTML, notice that all of the main content is inside the flex-container div. This acts as the container for most or all\n content. Even headers, footers, and main logos can go into this\n container.\n

\n Inside the flex-container div are multiple flex-item\n divs. Each of these acts as a smaller container for one item on the\n page. An item can be a main image, navigation bar, photo with caption,\n chunk of text, etc. Think of an item as a block of the page that you\n want to keep together even if the overall layout changes.\n

\n\n

Styling

\n Currently, there is only minimal styling for testing on this page.\n There is no flex styling. That's up to you!\n

\n Use display: flex; and flex-wrap: wrap; on\n your container.\n
\n Set the flex-item width in pixels for initial testing. Later, it\n will be better to set this as a percent.\n
\n Set the flex-item padding to create internal blank space and give\n each flex-item more depth.\n
\n Use a media query to set a different flex-item width for smaller\n screens.\n
\n This demo is especially helpful.\n

\n\n

\n \n",[105],"52b1b42e8593fcd8d065eac2dd2bb2a9bf1772d14e3dbd816f35ad0dc2940ac1","dc40cf2e-023b-11f1-bd1c-42dde27851f2","019c2b7e-0f66-73aa-9cd7-28dbb7bc4fa1",["D",1770259154658],15,"\n\n \n Responsive Flex Template\n \n \n \n \n \n \n

Responsive Flex Layout

Intro

Structure

Styling

\n Currently, there is only minimal styling for testing on this page.\n There is no flex styling. That's up to you!\n

\n Use display: flex; and flex-wrap: wrap; on\n your container.\n
\n Set the flex-item width in pixels for initial testing. Later, it\n will be better to set this as a percent.\n
\n Set the flex-item padding to create internal blank space and give\n each flex-item more depth.\n
\n Use a media query to set a different flex-item width for smaller\n screens.\n
\n This demo is especially helpful.\n

\n \n",[105],"acee97e4360d5133bc1865b5f5c210e6301c0618b060e16fc15ee6b6f26f9af0",{"_72":133,"_74":-7,"_76":134},{"_72":124,"_74":-7,"_76":125},"effects.html",{"_32":126,"_13":124,"_79":127,"_81":-5,"_82":58,"_83":57,"_85":26,"_34":128,"_40":129,"_88":89,"_90":130,"_66":48,"_92":-5,"_93":-7,"_72":131,"_95":132},"8c53df4e-0cd9-11f1-87e3-42dde27851f2","255bf40a-0c13-11f1-8e13-42dde27851f2",["D",1771426392678],9,"\n\n \n Fancy CSS Demo\n \n \n \n \n \n \n

\n \n

Iron Man

\n\n

\n He built the world's first miniaturized Arc Reactor in a cave with a box\n of scraps in order to save his own life and escape the terrorists. He\n became the super hero Iron Man and defeted foes such as Obadiah Stane\n (Iron Monger), Ivan Vanko (Whiplash), and Aldrich Killian (The\n \"Mandarin\"). He joined the Avengers and fought along side other heroes\n like Thor, Hulk, Captain America, Hawkeye, and Black Widdow. As an\n Avenger he helped defete other foes such as Loki, Ultron, and Thanos and\n his army (twice). He eventually sacrificed his own life to weild all 6\n Infinity Stones and snap his fingers to \"dust\" Thanos and his whole\n army.\n

\n\n

\n\n \n \n",[124],"22ed8290f49668e2fb2f8aca435fc489f07f4d22ef8d5149ae44d3510df99da9","effects.css",{"_32":135,"_13":133,"_79":136,"_81":-5,"_82":58,"_83":20,"_85":26,"_34":137,"_40":138,"_88":89,"_90":139,"_66":48,"_92":-5,"_93":-7,"_72":140,"_95":141},"8802b654-0cd9-11f1-b144-42dde27851f2","3cbf5362-0c13-11f1-ab17-42dde27851f2",["D",1771426385440],17,"* {\n box-sizing: border-box;\n margin: 0;\n}\n\ndiv.polaroid {\n width: 80%;\n background-color: white;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n}\n\nimg {width: 100%}\n\ndiv.container {\n text-align: center;\n padding: 10px 20px;\n}\n\n.box {\n width: 500px; /* Set the width of the box */\n height: 300px; /* Set the height of the box */\n border: 2px solid black; /* Add a border to make the box visible */\n}\n\n.raindow {\n background-image: linear-gradient(to right, red, orange, yellow, green, blue, purple)\n}",[133],"f46009e6864e5006088f0e908331330561875e9ab93e3bfc6400a90f8ae9783b",["D",1770390267705],"legacyEnvVars","httpPrivacy","description","Template for a basic HTML + CSS + JavaScript static website","imageUrl","userId","019b8ed7-c6cc-740e-8689-1d3b65598e4e","pinnedFileId","019c337b-a8f4-70a9-a3d4-a3fe0dd94298","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"019b8ed7-c6cd-76a2-9a8a-38ef7fc1f298","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_182":178},"org",{"_11":12,"_176":-5,"_177":178,"_148":149,"_179":180,"_181":48},"branch","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzM3cVFJbFo2UzFsSUlKVFFKUzV4cDgxWFdQcSJ9","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":268,"_46":-5,"_143":48,"_49":50,"_144":50,"_145":146,"_147":-5,"_148":149,"_150":151,"_152":26,"_153":-5,"_154":-5,"_155":156,"_53":157,"_158":-5,"_159":-5,"_160":-5,"_161":-5,"_162":163,"_164":163,"_165":166,"_167":166,"_168":166,"_169":163,"_170":163,"_171":269,"_173":270,"_175":271,"_47":48},"tree",[248,249,250,251,252,253],"files",[248,249,250,251,252,253],"counts",{"_238":156,"_239":222,"_240":156,"_241":242,"_243":244},"contents",[211,212,213,214,215,216],"upstreamProject",{"_32":39,"_13":56,"_145":208,"_147":-5,"_49":50,"_171":209},"upstreamBranch",{"_32":33,"_34":206,"_36":207,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1770256207664],["D",1775079721464],"Practice in using flexbox to create responsive layouts",{"_11":52,"_182":210},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zN294dm1HMFFyZ0NhbWJUNmpBeEN3U0s1QWgifQ",{"_32":135,"_13":133,"_79":136,"_81":-5,"_82":58,"_83":20,"_85":26,"_34":236,"_40":138,"_88":89,"_90":139,"_66":48,"_92":-5,"_72":237},{"_32":126,"_13":124,"_79":127,"_81":-5,"_82":58,"_83":57,"_85":26,"_34":234,"_40":129,"_88":89,"_90":130,"_66":48,"_92":-5,"_72":235},{"_32":108,"_13":105,"_79":109,"_81":-5,"_82":58,"_83":110,"_85":26,"_34":232,"_40":101,"_88":89,"_90":112,"_66":48,"_92":-5,"_72":233},{"_32":226,"_13":227,"_79":151,"_81":-5,"_82":58,"_83":222,"_85":26,"_34":228,"_40":156,"_88":229,"_90":230,"_66":48,"_92":-5,"_72":231},{"_32":219,"_13":220,"_79":221,"_81":-5,"_82":58,"_83":222,"_85":26,"_34":223,"_40":156,"_88":224,"_90":183,"_66":48,"_92":-5,"_72":225},{"_32":78,"_13":73,"_79":80,"_81":-5,"_82":58,"_83":84,"_85":26,"_34":217,"_40":87,"_88":89,"_90":91,"_66":48,"_92":-5,"_72":218},["D",1770995446515],[73],"21fc33be-036d-11f1-8bf6-42dde27851f2","script.js","019c337b-a8f4-70a9-a3d4-a6644b08bcb0",1,["D",1770390267705],"script",[220],"21fc2edc-036d-11f1-8bf6-42dde27851f2","main.ts",["D",1770390267705],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer(import.meta.url);",[227],["D",1770651874523],[105],["D",1771426392678],[124],["D",1771426385440],[133],"pulls","branches","forks","envVars",{"_245":156,"_247":156},"connections",{"_245":156,"_246":156},"count","unfilledCount","emptyCount",{"_32":135,"_13":133,"_79":136,"_81":-5,"_82":58,"_83":20,"_85":26,"_34":137,"_40":138,"_88":89,"_90":139,"_66":48,"_92":-5,"_93":266,"_72":267},{"_32":126,"_13":124,"_79":127,"_81":-5,"_82":58,"_83":57,"_85":26,"_34":128,"_40":129,"_88":89,"_90":130,"_66":48,"_92":-5,"_93":264,"_72":265},{"_32":108,"_13":105,"_79":109,"_81":-5,"_82":58,"_83":110,"_85":26,"_34":111,"_40":101,"_88":89,"_90":112,"_66":48,"_92":-5,"_93":262,"_72":263},{"_32":226,"_13":227,"_79":151,"_81":-5,"_82":58,"_83":222,"_85":26,"_34":259,"_40":156,"_88":229,"_90":230,"_66":48,"_92":-5,"_93":260,"_72":261},{"_32":219,"_13":220,"_79":221,"_81":-5,"_82":58,"_83":222,"_85":26,"_34":256,"_40":156,"_88":224,"_90":183,"_66":48,"_92":-5,"_93":257,"_72":258},{"_32":78,"_13":73,"_79":80,"_81":-5,"_82":58,"_83":84,"_85":26,"_34":86,"_40":87,"_88":89,"_90":91,"_66":48,"_92":-5,"_93":254,"_72":255},[],[73],["D",1770390267705],[],[220],["D",1770390267705],[],[227],[],[105],[],[124],[],[133],["D",1770390267705],{"_11":12,"_182":178},{"_11":12,"_176":-5,"_177":178,"_148":149,"_179":180,"_181":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"ctx",{"_171":-5,"_203":305,"_306":307,"_308":309,"_310":48,"_311":48,"_312":48,"_313":26,"_314":-5,"_315":-7,"_316":-7,"_317":156,"_318":48,"_319":48,"_320":-5,"_321":48,"_322":48,"_323":48,"_324":-5},"ENV",{"_276":277,"_278":279,"_280":16,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294,"_295":296,"_297":298,"_299":300,"_301":302,"_303":304},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Compare

MergeCollin08/mainintoceculbe/main

index.html+17-5

style.css+74-1

effects.css+27-0

effects.html+41-0