More design work and a new card
This commit is contained in:
Jessi McKissick
+173
-11
@@ -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%;
|
||||
}
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
export default function Header(){
|
||||
return(
|
||||
<header>
|
||||
<header id="Header">
|
||||
<h1 id="title">J.M. Technical Services</h1>
|
||||
<nav>
|
||||
<nav id="main_nav">
|
||||
<ul>
|
||||
<li className="navitem">HOME</li>
|
||||
<li className="navitem">ABOUT</li>
|
||||
|
||||
+25
-11
@@ -14,7 +14,7 @@ export default function Home() {
|
||||
<div id="app">
|
||||
<Header />
|
||||
<div id="content">
|
||||
<img id="hero" alt="Hero Image"/>
|
||||
<img id="hero" alt="Hero Image" src="https://placehold.co/1200x400/blue/gray?text=Hero+image+placeholder"/>
|
||||
<hr />
|
||||
<div id="sales_plate">
|
||||
<h3>High performance web application architecture and custom CMS solutions. Over 10 years of experience delivering speed, security, and scale.</h3>
|
||||
@@ -22,7 +22,7 @@ export default function Home() {
|
||||
Lorem Ipsum Dolor sit amet blah blah
|
||||
</p>
|
||||
</div>
|
||||
<div id="info shelf">
|
||||
<div id="info_shelf">
|
||||
<h3>Why my services?</h3>
|
||||
<div id="exec_summary">
|
||||
<h3>Business</h3>
|
||||
@@ -50,26 +50,40 @@ export default function Home() {
|
||||
<p>This site itself is a custom React application served via Node.js, built with Vite and Tailwind CSS.</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<hr />
|
||||
<div id="service_plate">
|
||||
<h3>Services</h3>
|
||||
<div id="web_cms_plate">
|
||||
{/* plates for bespoke services and CMS services. side by side*/}
|
||||
<div id="service_carousel">
|
||||
<div id="bespoke_service_plate">
|
||||
<img alt="Bespoke Web Applications" />
|
||||
<img alt="Bespoke Web Applications" src="https://placehold.co/600x600"/>
|
||||
<h4>Bespoke Web Applications</h4>
|
||||
<p>End-to-end fully custom application development for when off-the-shelf solutions don't cut it. <br />Engineered for scale, security, and complex business logic to ensure a perfect fit.</p>
|
||||
<h5 className="pricing">Starting at $45/h</h5>
|
||||
<p className="npo_info"><i>Discounted services are available for 501(c)(3) non-profit organizations.</i></p>
|
||||
</div>
|
||||
<div id="CMS_service plate">
|
||||
<img alt="Advanced CMS services" />
|
||||
<div id="CMS_service_plate">
|
||||
<img alt="Advanced CMS services" src="https://placehold.co/600x600"/>
|
||||
<h4>Comprehensive CMS solutions</h4>
|
||||
<p>High performance sites built on platforms of your choice.
|
||||
<br />Optimized for core vitals, SEO, and effortless management by your team after launch.</p>
|
||||
<h5 className="pricing">Starting at $25/h</h5>
|
||||
<p className="npo_info"><i>Discounted services are available for 501(c)(3) non-profit organizations.</i></p>
|
||||
</div>
|
||||
<div id="consulting_service_plate">
|
||||
<img alt="consulting services" src="https://placehold.co/600x600"/>
|
||||
<h4>Consulting Services</h4>
|
||||
<p>Consulting services across various information technology topics including general I.T., software development, web development, tutoring, and beyond.</p>
|
||||
<h5 className="pricing">Starting at $20/h</h5>
|
||||
<p className="npo_info"><i>Discounted services are available for 501(c)(3) non-profit organizations.</i></p>
|
||||
</div>
|
||||
<div id="general_infotech_service_plate">
|
||||
<img alt="General information technology services" src="https://placehold.co/600x600"/>
|
||||
<h4>Generalist Services</h4>
|
||||
<p>General information technology related services including but not limited to DNS configuration, VPS setup and hardening, security services, etc.</p>
|
||||
<h5 className="pricing">Starting at $25/h</h5>
|
||||
<p className="npo_info"><i>Discounted services are available for 501(c)(3) non-profit organizations.</i></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="alt_service_plate">
|
||||
{/* plates for secondary services like consultation, design, refactors, etc. */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user