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

Commit19c704f

Browse files
committed
add demo section
1 parent61cbf56 commit19c704f

File tree

4 files changed

+387
-11
lines changed

4 files changed

+387
-11
lines changed

‎96-cloud hosting service/index.html

Lines changed: 148 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,16 @@
2323
<h1class="logo">Loruki.</h1>
2424
<nav>
2525
<ul>
26-
<li><ahref="#home">Home</a></li>
26+
<li><ahref="#demo">Demo</a></li>
2727
<li><ahref="#features">Features</a></li>
2828
<li><ahref="#docs">Docs</a></li>
2929
</ul>
3030
</nav>
3131
</div>
3232
</div>
33-
<!-- Showcase -->
34-
<sectionclass="showcase">
33+
34+
<!-- showcase -->
35+
<sectionclass="showcase"id="demo">
3536
<divclass="container grid">
3637
<divclass="showcase-text">
3738
<h1>Easier Deployment</h1>
@@ -64,5 +65,149 @@ <h2>Request a Demo</h2>
6465
</div>
6566
</div>
6667
</section>
68+
69+
<!-- stats -->
70+
<sectionclass="stats">
71+
<divclass="container">
72+
<h3class="stats-heading text-center my-1">
73+
Welcome to the best platform for building applications of all types
74+
with modern architecture and scaling
75+
</h3>
76+
<divclass="grid grid-3 text-center my-4">
77+
<div>
78+
<iclass="fas fa-server fa-3x"></i>
79+
<h3>10,349,405</h3>
80+
<pclass="text-secondary">Deployments</p>
81+
</div>
82+
<div>
83+
<iclass="fas fa-upload fa-3x"></i>
84+
<h3>987 TB</h3>
85+
<pclass="text-secondary">Published</p>
86+
</div>
87+
<div>
88+
<iclass="fas fa-project-diagram fa-3x"></i>
89+
<h3>2,343,265</h3>
90+
<pclass="text-secondary">Projects</p>
91+
</div>
92+
</div>
93+
</div>
94+
</section>
95+
96+
<!-- cli -->
97+
<sectionclass="cli">
98+
<divclass="container grid">
99+
<img
100+
src="https://github.com/bradtraversy/loruki-website/blob/master/images/cli.png?raw=true"
101+
alt=""
102+
/>
103+
<divclass="card">
104+
<h3>Easy to use, cross platform CLI</h3>
105+
</div>
106+
<divclass="card">
107+
<h3>Deploy in seconds</h3>
108+
</div>
109+
</div>
110+
</section>
111+
112+
<!-- cloud -->
113+
<sectionclass="cloud bg-primary my-2 py-2">
114+
<divclass="container grid">
115+
<divclass="text-center">
116+
<h2class="lg">Extreme Cloud Hosting</h2>
117+
<pclass="lead my-1">
118+
Cloud hosting like you've never seen. Fast, efficient and scalable
119+
</p>
120+
<ahref="#features"class="btn btn-dark">Read More</a>
121+
</div>
122+
<img
123+
src="https://github.com/bradtraversy/loruki-website/blob/master/images/cloud.png?raw=true"
124+
alt=""
125+
/>
126+
</div>
127+
</section>
128+
129+
<!-- languages -->
130+
<sectionclass="languages">
131+
<h2class="md text-center my-2">Supported Languages</h2>
132+
<divclass="container flex">
133+
<divclass="card">
134+
<h4>Node.js</h4>
135+
<img
136+
src="https://github.com/bradtraversy/loruki-website/blob/master/images/logos/node.png?raw=true"
137+
alt=""
138+
/>
139+
</div>
140+
<divclass="card">
141+
<h4>Python</h4>
142+
<img
143+
src="https://github.com/bradtraversy/loruki-website/blob/master/images/logos/python.png?raw=true"
144+
alt=""
145+
/>
146+
</div>
147+
<divclass="card">
148+
<h4>C#</h4>
149+
<img
150+
src="https://github.com/bradtraversy/loruki-website/blob/master/images/logos/csharp.png?raw=true"
151+
alt=""
152+
/>
153+
</div>
154+
<divclass="card">
155+
<h4>Ruby</h4>
156+
<img
157+
src="https://github.com/bradtraversy/loruki-website/blob/master/images/logos/ruby.png?raw=true"
158+
alt=""
159+
/>
160+
</div>
161+
<divclass="card">
162+
<h4>PHP</h4>
163+
<img
164+
src="https://github.com/bradtraversy/loruki-website/blob/master/images/logos/php.png?raw=true"
165+
alt=""
166+
/>
167+
</div>
168+
<divclass="card">
169+
<h4>Scala</h4>
170+
<img
171+
src="https://github.com/bradtraversy/loruki-website/blob/master/images/logos/scala.png?raw=true"
172+
alt=""
173+
/>
174+
</div>
175+
<divclass="card">
176+
<h4>Clojure</h4>
177+
<img
178+
src="https://github.com/bradtraversy/loruki-website/blob/master/images/logos/clojure.png?raw=true"
179+
alt=""
180+
/>
181+
</div>
182+
</div>
183+
</section>
184+
185+
<!-- footer -->
186+
<footerclass="footer bg-dark py-5">
187+
<divclass="container grid grid-3">
188+
<div>
189+
<h1>Loruki</h1>
190+
<p>
191+
Copyright &copy;
192+
<script>
193+
document.write(newDate().getFullYear());
194+
</script>
195+
</p>
196+
</div>
197+
<nav>
198+
<ul>
199+
<li><ahref="#demo">Demo</a></li>
200+
<li><ahref="#features">Features</a></li>
201+
<li><ahref="#docs">Docs</a></li>
202+
</ul>
203+
</nav>
204+
<divclass="social">
205+
<ahref="#"><iclass="fab fa-github fa-2x"></i></a>
206+
<ahref="#"><iclass="fab fa-facebook fa-2x"></i></a>
207+
<ahref="#"><iclass="fab fa-instagram fa-2x"></i></a>
208+
<ahref="#"><iclass="fab fa-twitter fa-2x"></i></a>
209+
</div>
210+
</div>
211+
</footer>
67212
</body>
68213
</html>

‎96-cloud hosting service/style.css

Lines changed: 85 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ pre {
112112
}
113113

114114
.showcase-text {
115-
animation: slideInFromLeft0.2s ease-in;
115+
animation: slideInFromLeft0.5s ease-out;
116116
}
117117

118118
.showcase-form {
@@ -123,7 +123,7 @@ pre {
123123
padding:40px;
124124
z-index:100;
125125
justify-self: flex-end;
126-
animation: slideInFromRight0.2s ease-in;
126+
animation: slideInFromRight0.5s ease-out;
127127
}
128128

129129
.showcase-form .form-control {
@@ -143,7 +143,6 @@ pre {
143143
outline: none;
144144
}
145145

146-
.showcase::before,
147146
.showcase::after {
148147
content:"";
149148
position: absolute;
@@ -153,8 +152,79 @@ pre {
153152
left:0;
154153
background-color:#fff;
155154
transform:skewY(-3deg);
155+
-webkit-transform:skewY(-3deg);
156+
-moz-transform:skewY(-3deg);
157+
-ms-transform:skewY(-3deg);
156158
}
157159

160+
/* stats */
161+
162+
.stats {
163+
padding-top:100px;
164+
animation: slideInFromBottom0.5s ease-out;
165+
}
166+
167+
.stats-heading {
168+
max-width:500px;
169+
margin: auto;
170+
}
171+
172+
.stats .gridh3 {
173+
font-size:2.25rem;
174+
}
175+
176+
.stats .gridp {
177+
font-size:1.25rem;
178+
font-weight: bold;
179+
}
180+
181+
/* cli */
182+
183+
.cli .grid {
184+
grid-template-columns:repeat(3,1fr);
185+
grid-template-rows:repeat(2,1fr);
186+
}
187+
188+
.cli .grid>*:first-child {
189+
grid-column:1/ span2;
190+
grid-row:1/ span2;
191+
}
192+
193+
/* cloud */
194+
195+
.cloud .grid {
196+
grid-template-columns:4fr3fr;
197+
}
198+
199+
/* languages */
200+
201+
.languages .flex {
202+
flex-wrap: wrap;
203+
}
204+
205+
.languages .card {
206+
text-align: center;
207+
margin:18px10px40px;
208+
transition: transform0.2s ease-out;
209+
}
210+
211+
.languages .card:hover {
212+
transform:translateY(-15px);
213+
}
214+
215+
.languages .cardh4 {
216+
font-size:1.25rem;
217+
margin-bottom:10px;
218+
}
219+
220+
/* footer */
221+
222+
.footer .sociala {
223+
margin:010px;
224+
}
225+
226+
/* animations */
227+
158228
@keyframes slideInFromLeft {
159229
0% {
160230
opacity:0;
@@ -169,10 +239,21 @@ pre {
169239
@keyframes slideInFromRight {
170240
0% {
171241
opacity:0;
172-
transform:translateX(133%);
242+
transform:translateX(33%);
173243
}
174244
100% {
175245
opacity:1;
176246
transform:translateX(0);
177247
}
178248
}
249+
250+
@keyframes slideInFromBottom {
251+
0% {
252+
opacity:0;
253+
transform:translateY(33%);
254+
}
255+
100% {
256+
opacity:1;
257+
transform:translateY(0);
258+
}
259+
}

0 commit comments

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