Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit8f271ae

Browse files
committed
add finished cloud hosting service
1 parentf4d4c8b commit8f271ae

File tree

4 files changed

+199
-1
lines changed

4 files changed

+199
-1
lines changed

‎96-cloud hosting service/index.html

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -270,6 +270,83 @@ <h1 class="md">The Loruki Platform</h1>
270270
</div>
271271
</section>
272272

273+
<!-- docs -->
274+
<sectionid="docs">
275+
<!-- head -->
276+
<divclass="docs-head bg-primary py-3">
277+
<divclass="container grid">
278+
<div>
279+
<h1class="xl">Docs</h1>
280+
<pclass="lead">Learn how to work with the Loruki platform</p>
281+
</div>
282+
<img
283+
src="https://github.com/bradtraversy/loruki-website/blob/master/images/docs.png?raw=true"
284+
alt=""
285+
/>
286+
</div>
287+
</div>
288+
<!-- main docs -->
289+
<divclass="docs-main my-4">
290+
<divclass="container grid">
291+
<divclass="card bg-light p-3">
292+
<h3class="my-2">Essentials</h3>
293+
<nav>
294+
<ul>
295+
<li><aclass="text-primary"href="#">Introduction</a></li>
296+
<li><ahref="#">About Loruki</a></li>
297+
<li><ahref="#">Installation</a></li>
298+
</ul>
299+
</nav>
300+
301+
<h3class="my-2">Deployment</h3>
302+
<nav>
303+
<ul>
304+
<li><ahref="#">Setting up a container</a></li>
305+
<li><ahref="#">Using the CLI</a></li>
306+
<li><ahref="#">Managing resources</a></li>
307+
<li><ahref="#">Upgrade & downgrade</a></li>
308+
</ul>
309+
</nav>
310+
</div>
311+
<divclass="card">
312+
<h2>Introduction</h2>
313+
<p>
314+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
315+
Distinctio illo facere perferendis laborum? Similique recusandae
316+
incidunt eos dolorum aliquam ipsam unde perspiciatis laudantium
317+
totam quam laborum velit, at maxime minus?
318+
</p>
319+
320+
<divclass="alert alert-success">
321+
<iclass="fas fa-info"></i> Lorem ipsum dolor sit amet consectetur
322+
adipisicing elit. Quae, animi?
323+
</div>
324+
325+
<h3>Lorem, ipsum dolor.</h3>
326+
<p>
327+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima
328+
totam magni eius vitae velit id, atque veritatis! At, vero porro.
329+
</p>
330+
<ahref="#"class="btn btn-primary">Install CLI</a>
331+
332+
<h3>Requirements</h3>
333+
<ul>
334+
<li>Windows 10, Mac OSX, Linux</li>
335+
<li>Node.js v14 or higher</li>
336+
</ul>
337+
338+
<h3>Install</h3>
339+
<p>Mac (Homebrew)</p>
340+
<pre><code>$ brew install loruki-cli</code></pre>
341+
<p>NPM</p>
342+
<pre><code>$ npm install loruki-cli</code></pre>
343+
<p>Yarn</p>
344+
<pre><code>$ yarn install loruki-cli</code></pre>
345+
</div>
346+
</div>
347+
</div>
348+
</section>
349+
273350
<!-- footer -->
274351
<footerclass="footer bg-dark py-5">
275352
<divclass="container grid grid-3">

‎96-cloud hosting service/style.css

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,11 @@ pre {
220220

221221
/* features */
222222

223+
.features-head,
224+
.docs-head {
225+
margin-top:4rem;
226+
}
227+
223228
.features-headimg,
224229
.docs-headimg {
225230
width:200px;
@@ -247,6 +252,28 @@ pre {
247252
grid-column:1/ span2;
248253
}
249254

255+
/* docs */
256+
257+
.docs-mainh3 {
258+
margin:20px0;
259+
}
260+
261+
.docs-main .grid {
262+
grid-template-columns:1fr2fr;
263+
align-items: flex-start;
264+
}
265+
266+
.docs-mainnavli {
267+
font-size:1.0625rem;
268+
padding-bottom:5px;
269+
margin-bottom:5px;
270+
border-bottom:1px solid#ccc;
271+
}
272+
273+
.docs-maina:hover {
274+
font-weight: bold;
275+
}
276+
250277
/* footer */
251278

252279
.footer .sociala {
@@ -277,6 +304,16 @@ pre {
277304
}
278305
}
279306

307+
@keyframes slideInFromTop {
308+
0% {
309+
transform:translateY(-33%);
310+
}
311+
312+
100% {
313+
transform:translateX(0);
314+
}
315+
}
316+
280317
@keyframes slideInFromBottom {
281318
0% {
282319
opacity:0;
@@ -287,3 +324,77 @@ pre {
287324
transform:translateY(0);
288325
}
289326
}
327+
328+
/* media queries */
329+
330+
@media (max-width:768px) {
331+
.grid,
332+
.showcase .grid,
333+
.stats .grid,
334+
.cli .grid,
335+
.cloud .grid,
336+
.features-main .grid,
337+
.docs-main .grid {
338+
grid-template-columns:1fr;
339+
grid-template-rows:1fr;
340+
}
341+
342+
.cli .grid>*:first-child,
343+
.features-main .grid>*:first-child,
344+
.features-main .grid>*:nth-child(2) {
345+
grid-column:1;
346+
grid-row:1;
347+
}
348+
349+
.showcase {
350+
height: auto;
351+
}
352+
353+
.showcase-text {
354+
text-align: center;
355+
margin-top:40px;
356+
animation: slideInFromTop0.5s ease-out;
357+
}
358+
359+
.showcase-form {
360+
justify-self: center;
361+
margin: auto;
362+
animation: slideInFromBottom0.5s ease-out;
363+
}
364+
365+
.cloud .grid {
366+
border-radius:0;
367+
}
368+
369+
.features-head,
370+
.features-sub-head,
371+
.docs-head {
372+
text-align: center;
373+
}
374+
375+
.features-headimg,
376+
.features-sub-headimg,
377+
.docs-headimg {
378+
width:150px;
379+
justify-self: center;
380+
}
381+
}
382+
383+
@media (max-width:500px) {
384+
.navbar {
385+
height:110px;
386+
}
387+
388+
.navbar .flex {
389+
flex-direction: column;
390+
}
391+
392+
.navbarul {
393+
padding:10px;
394+
background-color:rgba(0,0,0,0.1);
395+
}
396+
397+
.showcase-form {
398+
width:300px;
399+
}
400+
}

‎96-cloud hosting service/utilities.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,16 @@
128128
text-align: center;
129129
}
130130

131+
@media (max-width:768px) {
132+
.lg {
133+
font-size:2rem;
134+
}
135+
136+
.xl {
137+
font-size:2.5rem;
138+
}
139+
}
140+
131141
/* Alert */
132142
.alert {
133143
background-color:var(--light-color);

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@
101101
| 93|[Creative Portfolio](https://github.com/solygambas/html-css-fifty-projects/tree/master/93-creative%20portfolio)|[Live Demo](https://codepen.io/solygambas/full/zYNbgxR)|
102102
| 94|[Laptop UI](https://github.com/solygambas/html-css-fifty-projects/tree/master/94-laptop%20UI)|[Live Demo](https://codepen.io/solygambas/full/eYgoxMo)|
103103
| 95|[Headphones Product Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/95-headphones%20product%20page)|[Live Demo](https://codepen.io/solygambas/full/KKaLmEr)|
104-
| 96|[Cloud Hosting Service](https://github.com/solygambas/html-css-fifty-projects/tree/master/96-cloud%20hosting%20service)|[Live Demo](#)|
104+
| 96|[Cloud Hosting Service](https://github.com/solygambas/html-css-fifty-projects/tree/master/96-cloud%20hosting%20service)|[Live Demo](https://codepen.io/solygambas/full/oNBrXYr)|
105105

106106
This repository is mostly based on 2 courses by Brad Traversy (2020):
107107

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp