Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3

prof3ssorSt3v3/main.css

Last active June 17, 2026 16:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save prof3ssorSt3v3/65a11286ed982b45dba55aef4c4c7927 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save prof3ssorSt3v3/65a11286ed982b45dba55aef4c4c7927 to your computer and use it in GitHub Desktop.
Download ZIP
HTML Content Optimization
Raw
gistfile1.txt
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Get My Attention :: Tech Company</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<header>
<h1>Get My Attention :: Tech Company</h1>
<h2>Scanning Not Reading</h2>
</header>
<section class="banner">
<h2 class="banner--title">Info Banner</h2>
<p class="banner--content">
This banner is filled with information designed to make you want to click the button below. If you made it this far and actually read all of this informative text, then you are ahead of 80% of
the visitors to our website. Testing shows that most users only read the first 5 words before they read the label of the button and decide whether or not to click it.
</p>
<button class="class--action">Call to Action</button>
</section>
<main>
<h2>What We Do</h2>
<p>
The following list of features and services summarizes what we do. Each of the sections reflects something that our company offers. Everything you need to know about us is contained in this
page.
</p>
<section class="feature_box">
<h3>Cloud Sync</h3>
<p>
Our cloud sync platform keeps files, settings, and project updates aligned across every device a team uses, whether that means a laptop on a train, a tablet in a meeting, or a desktop
running behind three monitors in a busy office. It quietly handles version history, conflict resolution, and background backups so people can move between tools without losing track of what
changed, who changed it, or when the latest update was delivered to the rest of the workflow.
</p>
<button class="feature_box--action">Sign Up</button>
</section>
<section class="feature_box">
<h3>Data Vault</h3>
<p>
Data Vault gives organizations a structured place to store critical records, project archives, and long-term reference material with layered protection that is designed to feel invisible in
daily use. Under the surface, it organizes permissions, retention rules, and recovery options in a way that helps teams keep essential information accessible without making every search feel
like a security exercise or a filing expedition through decades of forgotten folders.
</p>
<button class="feature_box--action">Read More</button>
</section>
<section class="feature_box">
<h3>AI Assist</h3>
<p>
AI Assist acts like a background companion for routine work, offering suggestions, summaries, and tiny efficiency boosts that help people move through repetitive tasks with less friction.
The system is built to notice patterns in requests, drafts, and recurring workflows so it can surface practical next steps, draft useful starting points, and reduce the amount of time spent
staring at a blank screen while deciding how to begin a document, a plan, or a customer response.
</p>
<button class="feature_box--action">Try It</button>
</section>
<section class="feature_box">
<h3>Rapid Deploy</h3>
<p>
Rapid Deploy shortens the path from idea to live release by organizing build steps, deployment checks, and handoff points into a process that is fast enough for small teams and predictable
enough for larger ones. It is meant to keep product launches moving without turning every release into a fragile event, giving engineers and managers a clearer picture of what is ready, what
still needs review, and what can safely go out the door with minimal drama.
</p>
<button class="feature_box--action">Apply Now</button>
</section>
<section class="feature_box">
<h3>Threat Scan</h3>
<p>
Threat Scan reviews systems, traffic, and connected services for warning signs that could indicate a problem before that problem becomes expensive, embarrassing, or disruptive. It watches
for unusual patterns, risky settings, and behavior that looks out of place, then turns that information into practical alerts that help teams respond earlier, prioritize the right fixes, and
avoid treating every minor anomaly like a full-scale emergency.
</p>
<button class="feature_box--action">Get Started</button>
</section>
<section class="feature_box">
<h3>Team Hub</h3>
<p>
Team Hub brings communication, task tracking, and shared references into one central place so groups can keep momentum without bouncing between too many separate apps. It supports the
day-to-day rhythm of planning, assigning, checking in, and following up, making it easier for people to understand what they own, what the group is waiting on, and how their work connects to
the broader goals of the team.
</p>
<button class="feature_box--action">Join Today</button>
</section>
</main>
</body>
</html>
Raw
main.css
:root {
--primary-txt: hsl(220, 40%, 40%);
--primary-bg: hsl(220, 40%, 90%);
--secondary-txt: hsl(220, 20%, 30%);
--secondary-bg: hsl(220, 20%, 80%);
--radius: 0.5rem;
--font-xxxl: 5.61rem;
--font-xxl: 4.209rem;
--font-xl: 3.157rem;
--font-lg: 2.369rem;
--font-md: 1.777rem;
--font-sm: 1.333rem;
--font-xs: 1rem;
--font-sans: 'Noto Sans', sans-serif;
--font-serif: 'Noto Serif', sans-serif;
--font-mono: 'Noto Sans Mono', sans-serif;
}
*,
*::after,
*::before,
*::backdrop {
box-sizing: border-box;
font-family: var(--font-sans);
}
html {
font-weight: 300;
color: var(--primary-txt);
background-color: var(--primary-bg);
}
h1,
h2,
h3 {
font-family: var(--font-serif);
font-weight: 300;
}
pre {
font-family: var(--font-mono);
}
button {
background-color: var(--secondary-txt);
color: var(--secondary-bg);
padding: 0.5rem 2rem;
margin: 0.5rem 1rem 2rem 0;
border: none;
border-radius: var(--radius);
}
header,
main {
max-width: min(90vw, 1072px);
padding: 2rem;
margin-inline: auto;
background-color: var(--primary-txt);
color: var(--primary-bg);
}
header h1 {
font-size: var(--font-xl);
}
header h2 {
font-size: var(--font-lg);
}
.banner {
margin-inline: auto;
padding: 4rem 2rem;
background-image:
linear-gradient(135deg, hsl(from var(--primary-bg) h s l / 0.2) 0%, hsl(from var(--primary-bg) h s l / 0.72) 45%, hsl(from var(--primary-bg) h s l / 0.36) 100%),
url('https://picsum.photos/id/377/1400/700');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 220px;
display: flex;
flex-direction: column;
justify-content: center;
text-shadow: 0 1px 2px hsla(33, 100%, 30%, 0.45);
& > h2 {
font-size: var(--font-xl);
color: var(--secondary-txt);
text-shadow: 2px 2px 1px hsl(from var(--primary-bg) h s l / 0.32);
}
& > .banner--content {
font-size: var(--font-sm);
line-height: 1.8;
}
& > button {
align-self: flex-end;
font-size: var(--font-sm);
color: var(--secondary-bg);
background-color: var(--secondary-txt);
}
}
.feature_box {
border-block-start: 1px solid var(--primary-bg);
padding-inline: 3rem;
padding-block-start: 2rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
& > h3 {
font-size: var(--font-lg);
color: var(--primary-bg);
}
& > p {
color: var(--secondary-bg);
}
& > button {
color: var(--secondary-bg);
background-color: var(--secondary-txt);
}
}
.feature_box:nth-child(odd) > * {
justify-content: flex-start;
align-self: flex-end;
text-align: end;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment