diff --git a/app/app.css b/app/app.css index a30919f..2088a48 100644 --- a/app/app.css +++ b/app/app.css @@ -1,15 +1,177 @@ -/* @import "tailwindcss"; +@import "tailwindcss"; -@theme { - --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + +body{ + padding: 0px; + margin: 0px; + background-color: rgb(231, 235, 237); + overflow-x: hidden; } -html, -body { - @apply bg-white dark:bg-gray-950; - - @media (prefers-color-scheme: dark) { - color-scheme: dark; +#Header{ + color: white; + /* padding: 10px; */ + background-color: rgb(43, 46, 208); + display: grid; + grid-template-columns: 70% 30%; + #title{ + padding: 10px; + font-size: 2.7em; } -} */ + + #main_nav{ + text-align: center; + + ul{ + height: 100%; + display: grid; + /* grid-template-rows: 33% 33% 33%; */ + grid-template-columns: 33% 33% 33%; + li{ + grid-row: 2; + padding: 5px; + } + } + } +} + + +#content{ + /* padding: 10px; */ + + #hero{ + + } + #sales_plate{ + h3{ + font-weight: bold; + } + padding: 1.2em; + text-align: center; + } + #info_shelf{ + padding: 1em; + margin: 10px 0px 10px 0px; + + #exec_summary{ + background-color: rgb(255, 255, 255); + border-radius: 5px; + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.26); + border: 2px solid black; + padding: 8px; + margin: 2px; + } + #engineering_dive{ + background-color: rgb(255, 255, 255); + border-radius: 5px; + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.26); + border: 2px solid black; + padding: 8px; + margin: 2px; + margin-top: 10px; + } + } + #service_plate{ + #web_cms_plate{ + display: grid; + grid-template-columns: 50% 50%; + /* background-color: aliceblue; */ + /* border-radius: 5px; */ + + + } + #alt_service_plate{ + /* background-color: gainsboro; */ + /* border-radius: 5px; */ + margin-top: 10px; + display: grid; + grid-template-columns: 50% 50%; + + + } + .pricing{ + font-weight: 500; + } + h3{ + width: 100%; + font-size: 1.2em; + font-weight: bold; + padding-left: 0.2em; + } + padding: 1em; + #service_carousel{ + display: grid; + grid-template-columns: 30% 30% 30% 30%; + overflow-x: scroll; + overflow-y: hidden; + align-items: center; + align-content: center; + text-align: center; + @media screen and (width <= 800px) { + display: inline; + } + div{ + width: 90%; + margin: 0.2em; + height: 100%; + @media screen and (width <= 800px) { + width: 100%; + } + } + #bespoke_service_plate{ + border-radius: 5px; + margin: 0.2em; + background-color: aliceblue; + align-items: center; + text-align: center; + padding: 1em; + h4{ + font-weight: bold; + } + + } + #CMS_service_plate{ + border-radius: 5px; + margin: 0.2em; + background-color: aliceblue; + align-items: center; + text-align: center; + padding: 1em; + h4{ + font-weight: bold; + } + } + #consulting_service_plate{ + border-radius: 5px; + background-color: gainsboro; + margin: 0.2em; + text-align: center; + align-items: center; + padding: 1em; + } + #general_infotech_service_plate{ + border-radius: 5px; + background-color: gainsboro; + margin: 0.2em; + text-align: center; + align-items: center; + padding: 1em; + } + h4{ + font-weight: bold; + } + img{ + border-radius: 5px; + } + } + } + .npo_info{ + font-style: italic; + font-size: 0.83em; + } +} + +img{ + width: 100%; +} + diff --git a/app/components/header.tsx b/app/components/header.tsx index a55c4cc..09ac26f 100644 --- a/app/components/header.tsx +++ b/app/components/header.tsx @@ -2,9 +2,9 @@ export default function Header(){ return( -
+