Skip to content

Commit 19c704f

Browse files
solygambassolygambas
committed
add demo section
1 parent 61cbf56 commit 19c704f

File tree

4 files changed

+387
-11
lines changed

4 files changed

+387
-11
lines changed

‎96-cloud hosting service/index.html

+148-3
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,16 @@
2323
<h1 class="logo">Loruki.</h1>
2424
<nav>
2525
<ul>
26-
<li><a href="#home">Home</a></li>
26+
<li><a href="#demo">Demo</a></li>
2727
<li><a href="#features">Features</a></li>
2828
<li><a href="#docs">Docs</a></li>
2929
</ul>
3030
</nav>
3131
</div>
3232
</div>
33-
<!-- Showcase -->
34-
<section class="showcase">
33+
34+
<!-- showcase -->
35+
<section class="showcase" id="demo">
3536
<div class="container grid">
3637
<div class="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+
<section class="stats">
71+
<div class="container">
72+
<h3 class="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+
<div class="grid grid-3 text-center my-4">
77+
<div>
78+
<i class="fas fa-server fa-3x"></i>
79+
<h3>10,349,405</h3>
80+
<p class="text-secondary">Deployments</p>
81+
</div>
82+
<div>
83+
<i class="fas fa-upload fa-3x"></i>
84+
<h3>987 TB</h3>
85+
<p class="text-secondary">Published</p>
86+
</div>
87+
<div>
88+
<i class="fas fa-project-diagram fa-3x"></i>
89+
<h3>2,343,265</h3>
90+
<p class="text-secondary">Projects</p>
91+
</div>
92+
</div>
93+
</div>
94+
</section>
95+
96+
<!-- cli -->
97+
<section class="cli">
98+
<div class="container grid">
99+
<img
100+
src="https://github.com/bradtraversy/loruki-website/blob/master/images/cli.png?raw=true"
101+
alt=""
102+
/>
103+
<div class="card">
104+
<h3>Easy to use, cross platform CLI</h3>
105+
</div>
106+
<div class="card">
107+
<h3>Deploy in seconds</h3>
108+
</div>
109+
</div>
110+
</section>
111+
112+
<!-- cloud -->
113+
<section class="cloud bg-primary my-2 py-2">
114+
<div class="container grid">
115+
<div class="text-center">
116+
<h2 class="lg">Extreme Cloud Hosting</h2>
117+
<p class="lead my-1">
118+
Cloud hosting like you've never seen. Fast, efficient and scalable
119+
</p>
120+
<a href="#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+
<section class="languages">
131+
<h2 class="md text-center my-2">Supported Languages</h2>
132+
<div class="container flex">
133+
<div class="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+
<div class="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+
<div class="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+
<div class="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+
<div class="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+
<div class="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+
<div class="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+
<footer class="footer bg-dark py-5">
187+
<div class="container grid grid-3">
188+
<div>
189+
<h1>Loruki</h1>
190+
<p>
191+
Copyright &copy;
192+
<script>
193+
document.write(new Date().getFullYear());
194+
</script>
195+
</p>
196+
</div>
197+
<nav>
198+
<ul>
199+
<li><a href="#demo">Demo</a></li>
200+
<li><a href="#features">Features</a></li>
201+
<li><a href="#docs">Docs</a></li>
202+
</ul>
203+
</nav>
204+
<div class="social">
205+
<a href="#"><i class="fab fa-github fa-2x"></i></a>
206+
<a href="#"><i class="fab fa-facebook fa-2x"></i></a>
207+
<a href="#"><i class="fab fa-instagram fa-2x"></i></a>
208+
<a href="#"><i class="fab fa-twitter fa-2x"></i></a>
209+
</div>
210+
</div>
211+
</footer>
67212
</body>
68213
</html>

‎96-cloud hosting service/style.css

+85-4
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ pre {
112112
}
113113

114114
.showcase-text {
115-
animation: slideInFromLeft 0.2s ease-in;
115+
animation: slideInFromLeft 0.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: slideInFromRight 0.2s ease-in;
126+
animation: slideInFromRight 0.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: slideInFromBottom 0.5s ease-out;
165+
}
166+
167+
.stats-heading {
168+
max-width: 500px;
169+
margin: auto;
170+
}
171+
172+
.stats .grid h3 {
173+
font-size: 2.25rem;
174+
}
175+
176+
.stats .grid p {
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 / span 2;
190+
grid-row: 1 / span 2;
191+
}
192+
193+
/* cloud */
194+
195+
.cloud .grid {
196+
grid-template-columns: 4fr 3fr;
197+
}
198+
199+
/* languages */
200+
201+
.languages .flex {
202+
flex-wrap: wrap;
203+
}
204+
205+
.languages .card {
206+
text-align: center;
207+
margin: 18px 10px 40px;
208+
transition: transform 0.2s ease-out;
209+
}
210+
211+
.languages .card:hover {
212+
transform: translateY(-15px);
213+
}
214+
215+
.languages .card h4 {
216+
font-size: 1.25rem;
217+
margin-bottom: 10px;
218+
}
219+
220+
/* footer */
221+
222+
.footer .social a {
223+
margin: 0 10px;
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)