Skip to content

Commit a350ec1

Browse files
monapdxmonapdx
committed
upload
1 parent 5743d56 commit a350ec1

2 files changed

Lines changed: 172 additions & 32 deletions

File tree

‎neo-brutalist-light.css‎

Lines changed: 158 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -35,29 +35,130 @@ html {
3535
}
3636

3737
body {
38-
margin: 0;
39-
min-height: 100vh;
40-
padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 3vw, 1.75rem) 3rem;
41-
color: var(--ink);
42-
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
43-
font-size: 16px;
44-
line-height: 1.55;
38+
position: relative;
39+
overflow-x: hidden;
4540
background:
46-
radial-gradient(circle at 10% 5%, rgba(184, 255, 36, 0.24), transparent 22rem),
47-
radial-gradient(circle at 95% 8%, rgba(255, 69, 189, 0.16), transparent 25rem),
48-
radial-gradient(circle at 80% 92%, rgba(110, 231, 255, 0.18), transparent 24rem),
49-
linear-gradient(135deg, #ffffff 0%, #f7f7f2 48%, #ffffff 100%);
41+
linear-gradient(135deg, #eebfff 0%, #ffffff 45%, #73ff00 100%);
5042
}
5143

52-
::selection {
53-
background: var(--electric-lime);
54-
color: var(--ink);
44+
body::before,
45+
body::after {
46+
content: "";
47+
position: fixed;
48+
z-index: -1;
49+
pointer-events: none;
5550
}
5651

57-
body > * {
58-
width: min(var(--max-width), 100%);
59-
margin-left: auto;
60-
margin-right: auto;
52+
/* pink halftone dots */
53+
body::before {
54+
top: 0;
55+
left: 0;
56+
width: 360px;
57+
height: 360px;
58+
opacity: 0.45;
59+
60+
background-image: radial-gradient(circle, #ff45bd 0 3px, transparent 3.5px);
61+
background-size: 18px 18px;
62+
63+
mask-image: radial-gradient(circle at top left, black 0%, transparent 72%);
64+
-webkit-mask-image: radial-gradient(circle at top left, black 0%, transparent 72%);
65+
}
66+
67+
/* lime halftone dots */
68+
body::after {
69+
right: -40px;
70+
bottom: -40px;
71+
width: 420px;
72+
height: 420px;
73+
opacity: 0.35;
74+
75+
background-image: radial-gradient(circle, #73ff00 0 4px, transparent 4.5px);
76+
background-size: 20px 20px;
77+
78+
mask-image: radial-gradient(circle at bottom right, black 0%, transparent 72%);
79+
-webkit-mask-image: radial-gradient(circle at bottom right, black 0%, transparent 72%);
80+
}
81+
82+
.halftone-green {
83+
position: fixed;
84+
85+
right: -50px;
86+
bottom: -50px;
87+
88+
width: 500px;
89+
height: 500px;
90+
91+
pointer-events: none;
92+
z-index: -1;
93+
94+
background-image:
95+
radial-gradient(
96+
circle,
97+
rgba(115,255,0,0.55) 0 4px,
98+
transparent 4.5px
99+
);
100+
101+
background-size: 18px 18px;
102+
103+
mask-image:
104+
radial-gradient(
105+
circle at bottom right,
106+
black 0%,
107+
black 40%,
108+
transparent 85%
109+
);
110+
111+
-webkit-mask-image:
112+
radial-gradient(
113+
circle at bottom right,
114+
black 0%,
115+
black 40%,
116+
transparent 85%
117+
);
118+
}
119+
120+
.bg-scribble,
121+
.bg-lightning {
122+
position: fixed;
123+
z-index: -1;
124+
pointer-events: none;
125+
}
126+
127+
/* lime scribble */
128+
.bg-scribble {
129+
left: 2rem;
130+
bottom: 8rem;
131+
width: 180px;
132+
height: 120px;
133+
opacity: 0.8;
134+
background: repeating-linear-gradient(
135+
-18deg,
136+
transparent 0 14px,
137+
#b8ff24 14px 24px,
138+
transparent 24px 38px
139+
);
140+
clip-path: polygon(0 35%, 80% 0, 88% 18%, 10% 55%, 100% 38%, 100% 60%, 8% 82%, 72% 72%, 78% 90%, 0 100%);
141+
}
142+
143+
/* black lightning */
144+
.bg-lightning {
145+
position: fixed;
146+
right: -10px;
147+
top: 5rem;
148+
width: 150px;
149+
height: 210px;
150+
z-index: -1;
151+
pointer-events: none;
152+
background: #000;
153+
clip-path: polygon(45% 0, 100% 0, 62% 38%, 95% 38%, 25% 100%, 48% 55%, 15% 55%);
154+
}
155+
156+
.bg-lightning::after {
157+
content: "";
158+
position: absolute;
159+
inset: 10px;
160+
background: #b8ff24;
161+
clip-path: inherit;
61162
}
62163

63164
img,
@@ -165,22 +266,22 @@ section {
165266
.card {
166267
border: var(--border);
167268
border-radius: var(--radius);
168-
background:
169-
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,247,242,0.96));
269+
background:rgba(255,255,255,.88);
270+
backdrop-filter: blur(4px);
170271
box-shadow: var(--shadow);
171272
padding: clamp(1.25rem, 3vw, 2rem);
172273
}
173274

174275
.panel:nth-of-type(odd) {
175276
background:
176-
radial-gradient(circle at top right, rgba(184,255,36,0.18), transparent 16rem),
177-
#ffffff;
277+
rgba(255,255,255,.88);
278+
backdrop-filter: blur(4px);
178279
}
179280

180281
.panel:nth-of-type(even) {
181282
background:
182-
radial-gradient(circle at top left, rgba(110,231,255,0.18), transparent 16rem),
183-
#ffffff;
283+
rgba(255,255,255,.88);
284+
backdrop-filter: blur(4px);
184285
}
185286

186287
.panel h2 {
@@ -600,8 +701,40 @@ section:last-of-type p {
600701
height: 40px;
601702
transform: translateY(-50%);
602703

603-
background-image: url("images/bullet.gif");
704+
background-image: url("arrow-head-right.gif");
604705
background-size: contain;
605706
background-repeat: no-repeat;
606707
background-position: center;
708+
}
709+
710+
.centered-panel h2 {
711+
text-align: center;
712+
max-width: none;
713+
}
714+
715+
.centered-panel h2::after {
716+
margin-left: auto;
717+
margin-right: auto;
718+
}
719+
720+
.panel {
721+
position: relative;
722+
overflow: hidden;
723+
}
724+
725+
.panel::before {
726+
content: "";
727+
position: absolute;
728+
729+
width: 220px;
730+
height: 220px;
731+
732+
top: -80px;
733+
right: -80px;
734+
735+
border-radius: 50%;
736+
737+
background: rgba(255, 69, 189, 0.12);
738+
739+
pointer-events: none;
607740
}

‎sales.html‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
<link rel="stylesheet" href="neo-brutalist-light.css">
77
<title>Pub2Hub Blog Editor</title>
88
</head>
9-
<body>
9+
<body><div class="bg-scribble"></div>
10+
<div class="bg-lightning"></div>
1011

1112
<h1>Pub2Hub Blog Editor</h1>
1213

@@ -15,18 +16,20 @@ <h1>Pub2Hub Blog Editor</h1>
1516
<section class="panel">
1617
<h2>Create Blogs on Github Pages With One Click </h2>
1718

18-
<ul>
19-
<li>Connect your GitHub repository once and publish directly from the editor</li>
19+
20+
<ul class="gif-list">
21+
<li>Connect GitHub once and publish directly from editor</li>
2022
<li>No manual uploads</li>
2123
<li>No deployment commands</li>
2224
<li>Just click publish</li>
2325
</ul>
26+
2427
</section>
2528

2629
<section class="panel">
2730
<h2>Newly Published Posts Are Added Automatically</h2>
2831

29-
<ul>
32+
<ul class="gif-list">
3033

3134
<li>
3235
New posts are automatically added to your homepage
@@ -49,13 +52,17 @@ <h2>Newly Published Posts Are Added Automatically</h2>
4952

5053
<h2>Github Pages Setup Done For You</h2>
5154

52-
<p></p>
55+
<p></p><ul class="gif-list">
56+
<li>Blog structure and deployment workflow automated</li>
57+
<li>Never build the file structure from scratch</li>
58+
<li>Edit and update posts right from the editor</li>
59+
</ul>
5360

5461
<a href=""></a>
5562

5663
</section>
5764

58-
<section class="panel">
65+
<section class="panel centered-panel">
5966

6067
<center><h2>Get It Now</h2>
6168

@@ -65,6 +72,6 @@ <h2>Github Pages Setup Done For You</h2>
6572
<a href=""></a>
6673

6774
</section>
68-
75+
<div class="halftone-green"></div>
6976
</body>
7077
</html>

0 commit comments

Comments
 (0)