Skip to content

Commit b4e3997

Browse files
cblanqueracblanquera
committed
better design
1 parent ac7280e commit b4e3997

2 files changed

Lines changed: 210 additions & 81 deletions

File tree

‎docs/images/background.jpg‎

-1.01 MB
Binary file not shown.

‎docs/index.html‎

Lines changed: 210 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -17,126 +17,255 @@
1717
<meta name="twitter:image" content="https://www.stackpress.io/images/stackpress-logo.png" />
1818
<link rel="favicon" href="https://www.stackpress.io/favicon.ico" />
1919
<link rel="shortcut icon" type="image/png" href="https://www.stackpress.io/favicon.png" />
20+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
2021
<style>
2122
html, body {
22-
background-color: #000000;
23+
background-color: #E1E8EF;
2324
font-family: Arial, sans-serif;
2425
height: 100%;
2526
margin: 0;
27+
overflow: auto;
2628
padding: 0;
2729
position: relative;
2830
width: 100%;
2931
}
3032
header {
3133
align-items: center;
3234
display: flex;
33-
justify-content: center;
34-
padding: 100px 0 50px;
35+
justify-content: space-between;
36+
margin: auto;
37+
max-width: 960px;
38+
padding: 20px;
3539
position: relative;
3640
}
37-
body::before {
38-
background-image: url(./images/background.jpg);
39-
background-repeat: no-repeat;
40-
background-size: cover;
41-
bottom: 0;
42-
content: " ";
43-
left: 0;
44-
opacity: 0.25;
41+
header::before {
42+
border: 1px solid#222222;
43+
content: '';
4544
position: absolute;
46-
right: 0;
47-
top: 0;
45+
top: 50%;
46+
left: 80px;
47+
right: 70px;
4848
}
49-
header .icon {
50-
height: 100px;
49+
header > .icon {
50+
height: 60px;
5151
}
52-
main {
53-
background-color: rgba(255, 255, 255, 0.50);
54-
border: 5px solid #FFFFFF;
55-
border-radius: 10px;
56-
box-sizing: border-box;
57-
margin: 0 auto;
58-
max-width: 960px;
59-
padding: 20px;
52+
header .text {
53+
height: 20px;
54+
}
55+
header h6 {
56+
font-size: 14px;
57+
letter-spacing: 5px;
58+
margin: 14px 0 0;
59+
text-transform: uppercase;
60+
}
61+
header .products {
62+
align-items: center;
63+
display: flex;
6064
position: relative;
6165
}
62-
ul {
66+
header .products div {
6367
align-items: center;
68+
background-color: #E1E8EF;
69+
box-sizing: border-box;
6470
display: flex;
65-
justify-content: center;
66-
list-style-type: none;
67-
padding: 0;
71+
margin-left: 40px;
72+
padding: 5px;
6873
}
69-
li {
70-
width: 33.33%;
71-
text-align: center;
74+
header .products img {
75+
height: 30px;
7276
}
73-
li .icon {
74-
height: 150px;
77+
header .products a {
78+
color: #222222;
79+
font-size: 14px;
80+
margin: 0 10px 0 0;
81+
text-decoration: none;
7582
}
76-
a {
77-
color: #EFEFEF;
78-
display: block;
79-
font-size: 25px;
80-
font-weight: bold;
81-
margin: 0;
83+
header .social {
84+
flex-grow: 1;
85+
font-size: 30px;
86+
text-align: right;
87+
}
88+
header .social a {
89+
color: #222222;
8290
text-decoration: none;
91+
}
92+
main {
93+
margin: auto;
94+
max-width: 960px;
95+
padding-top: 20px;
96+
}
97+
blockquote {
98+
background-color: #0C56A7;
99+
border-radius: 10px;
100+
color: #FFFFFF;
101+
margin: 0;
102+
overflow: hidden;
103+
padding: 20px;
104+
text-align: center;
105+
}
106+
section {
107+
border: 1px solid #222222;
108+
border-radius: 10px;
109+
margin-top: 20px;
110+
padding: 20px;
111+
}
112+
section div {
113+
align-items: center;
114+
display: flex;
115+
}
116+
section div img {
117+
height: 30px;
118+
}
119+
section div h3 {
120+
color: #222222;
121+
padding-right: 5px;
83122
text-transform: uppercase;
84123
}
85-
@media (max-width: 1092px) {
86-
main {
87-
margin: 0 20px;
88-
}
89-
}
90-
@media (max-width: 767px) {
91-
header .icon {
92-
height: 60px;
93-
margin-right: 10px;
94-
}
95-
header .text {
96-
height: 30px;
97-
}
98-
li .icon {
99-
height: 100px;
100-
}
101-
a {
102-
font-size: 20px;
103-
}
104-
}
105-
@media (max-width: 420px) {
106-
main {
107-
padding-bottom: 40px;
108-
padding-top: 0;
109-
}
110-
ul {
111-
display: block;
112-
}
113-
li {
114-
padding-top: 40px;
115-
width: 100%;
116-
}
124+
section div a {
125+
color: #666666;
126+
display: inline-block;
127+
margin-left: 5px;
128+
}
129+
section article p {
130+
margin-bottom: 40px;
131+
margin-top: 10px;
132+
}
133+
footer {
134+
border-top: 2px solid #222222;
135+
color: #0C56A7;
136+
margin: 20px auto 0;
137+
max-width: 960px;
138+
padding-top: 20px;
139+
text-align: center;
140+
141+
}
142+
footer a {
143+
color: #0C56A7;
144+
text-decoration: none;
145+
padding: 20px 0 100px;
117146
}
118147
</style>
119148
</head>
120149
<body>
121150
<header>
122151
<img class="icon" src="./images/stackpress-logo-icon.png" alt="StackPress icon" />
123-
<img class="text" src="./images/stackpress-logo-text.png" alt="StackPress text" />
124-
</header>
125-
<main>
126-
<ul>
127-
<li>
152+
<div>
153+
<img class="text" src="./images/stackpress-logo-text.png" alt="StackPress text" />
154+
<h6>Foundation</h6>
155+
</div>
156+
<nav class="products">
157+
<div>
128158
<img class="icon" src="./images/idea-logo-icon.png" alt="StackPress icon" />
129159
<a href="/idea">Idea</a>
130-
</li>
131-
<li>
160+
</div>
161+
<div>
132162
<img class="icon" src="./images/ingest-logo-icon.png" alt="StackPress icon" />
133163
<a href="/ingest">Ingest</a>
134-
</li>
135-
<li>
164+
</div>
165+
<div>
136166
<img class="icon" src="./images/ink-logo-icon.png" alt="StackPress icon" />
137167
<a href="/ink">Ink</a>
138-
</li>
139-
</ul>
168+
</div>
169+
</nav>
170+
<nav class="social">
171+
<a href="https://github.com/stackpress"><i class="fab fa-fw fa-github"></i></a>
172+
</nav>
173+
</header>
174+
<main>
175+
<blockquote>
176+
> &nbsp;We are building an open source stack on the edge of technology.
177+
</blockquote>
178+
<section>
179+
<div>
180+
<img class="icon" src="./images/idea-logo-icon.png" alt="idea icon" />
181+
<h3>Idea</h3>
182+
<a href="https://github.com/stackpress/idea" target="_blank">
183+
<i class="fab fa-fw fa-github"></i>
184+
</a>
185+
<a href="/idea"><i class="fas fa-fw fa-globe"></i></a>
186+
</div>
187+
<article>
188+
<p>
189+
Generates app code based on a schema file. Highly pluggable. Bring your own generator.
190+
</p>
191+
<nav>
192+
<a href="https://www.npmjs.com/package/@stackpress/idea">
193+
<img src="https://img.shields.io/npm/v/%40stackpress%2Fidea.svg?style=flat" />
194+
</a>
195+
<a href="https://github.com/stackpress/idea/blob/main/LICENSE">
196+
<img src="https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat" />
197+
</a>
198+
<a href="https://github.com/stackpress/idea/commits/main/">
199+
<img src="https://img.shields.io/github/last-commit/stackpress/idea" />
200+
</a>
201+
<a href="https://github.com/stackpress/ink/blob/main/README.md#contributing">
202+
<img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" />
203+
</a>
204+
</nav>
205+
</article>
206+
</section>
207+
<section>
208+
<div>
209+
<img class="icon" src="./images/ingest-logo-icon.png" alt="ingest icon" />
210+
<h3>Ingest</h3>
211+
<a href="https://github.com/stackpress/ingest" target="_blank">
212+
<i class="fab fa-fw fa-github"></i>
213+
</a>
214+
<a href="/ingest"><i class="fas fa-fw fa-globe"></i></a>
215+
</div>
216+
<article>
217+
<p>
218+
Event driven serverless framework.
219+
</p>
220+
<nav>
221+
<a href="https://www.npmjs.com/package/@stackpress/ingest">
222+
<img src="https://img.shields.io/npm/v/%40stackpress%2Fingest.svg?style=flat" />
223+
</a>
224+
<a href="https://github.com/stackpress/ingest/blob/main/LICENSE">
225+
<img src="https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat" />
226+
</a>
227+
<a href="https://github.com/stackpress/ingest/commits/main/">
228+
<img src="https://img.shields.io/github/last-commit/stackpress/ingest" />
229+
</a>
230+
<a href="https://github.com/stackpress/ingest/blob/main/README.md#contributing">
231+
<img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" />
232+
</a>
233+
</nav>
234+
</article>
235+
</section>
236+
<section>
237+
<div>
238+
<img class="icon" src="./images/ink-logo-icon.png" alt="ink icon" />
239+
<h3>Ink</h3>
240+
<a href="https://github.com/stackpress/ink" target="_blank">
241+
<i class="fab fa-fw fa-github"></i>
242+
</a>
243+
<a href="/ink"><i class="fas fa-fw fa-globe"></i></a>
244+
</div>
245+
<article>
246+
<p>
247+
Generates app code based on a schema file. Highly pluggable. Bring your own generator.
248+
</p>
249+
<nav>
250+
<a href="https://www.npmjs.com/package/@stackpress/ink">
251+
<img src="https://img.shields.io/npm/v/%40stackpress%2Fink.svg?style=flat" />
252+
</a>
253+
<a href="https://github.com/stackpress/ink/blob/main/LICENSE">
254+
<img src="https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat" />
255+
</a>
256+
<a href="https://github.com/stackpress/ink/commits/main/">
257+
<img src="https://img.shields.io/github/last-commit/stackpress/ink" />
258+
</a>
259+
<a href="https://github.com/stackpress/ink/blob/main/README.md#contributing">
260+
<img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" />
261+
</a>
262+
</nav>
263+
</article>
264+
</section>
140265
</main>
266+
<footer>
267+
<i class="fas fa-fw fa-heart"></i>
268+
<a href="https://www.stackpress.io/">Become a Sponsor</a>
269+
</footer>
141270
</body>
142271
</html>

0 commit comments

Comments
 (0)