Skip to content

Commit 19c704f

Browse files
solygambassolygambas
committedApr 30, 2021
add demo section
1 parent 61cbf56 commit 19c704f

File tree

4 files changed

+387
-11
lines changed

4 files changed

+387
-11
lines changed
 

Diff for: ‎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>

Diff for: ‎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+
}

Diff for: ‎96-cloud hosting service/utilities.css

+153-3
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@
2020
height: 100%;
2121
}
2222

23+
.grid-3 {
24+
grid-template-columns: repeat(3, 1fr);
25+
}
26+
2327
.card {
2428
background-color: #fff;
2529
color: var(--grey-color);
@@ -30,18 +34,18 @@
3034
}
3135

3236
.btn {
33-
display: inline;
37+
display: inline-block;
3438
padding: 10px 30px;
3539
cursor: pointer;
36-
background-color: var(--primary-color);
40+
background: var(--primary-color);
3741
color: #fff;
3842
border: none;
3943
border-radius: 5px;
4044
}
4145

4246
.btn-outline {
4347
background-color: transparent;
44-
border: 1px solid #fff;
48+
border: 1px #fff solid;
4549
}
4650

4751
.btn:hover {
@@ -81,3 +85,149 @@
8185
.btn-dark a {
8286
color: #fff;
8387
}
88+
89+
/* Text colors */
90+
.text-primary {
91+
color: var(--primary-color);
92+
}
93+
94+
.text-secondary {
95+
color: var(--secondary-color);
96+
}
97+
98+
.text-dark {
99+
color: var(--dark-color);
100+
}
101+
102+
.text-light {
103+
color: var(--light-color);
104+
}
105+
106+
/* Text sizes */
107+
.lead {
108+
font-size: 1.25rem;
109+
}
110+
111+
.sm {
112+
font-size: 1rem;
113+
}
114+
115+
.md {
116+
font-size: 2rem;
117+
}
118+
119+
.lg {
120+
font-size: 3rem;
121+
}
122+
123+
.xl {
124+
font-size: 4rem;
125+
}
126+
127+
.text-center {
128+
text-align: center;
129+
}
130+
131+
/* Alert */
132+
.alert {
133+
background-color: var(--light-color);
134+
padding: 10px 20px;
135+
font-weight: bold;
136+
margin: 15px 0;
137+
}
138+
139+
.alert i {
140+
margin-right: 10px;
141+
}
142+
143+
.alert-success {
144+
background-color: var(--success-color);
145+
color: #fff;
146+
}
147+
148+
.alert-error {
149+
background-color: var(--error-color);
150+
color: #fff;
151+
}
152+
153+
/* Margin */
154+
.my-1 {
155+
margin: 1rem 0;
156+
}
157+
158+
.my-2 {
159+
margin: 1.5rem 0;
160+
}
161+
162+
.my-3 {
163+
margin: 2rem 0;
164+
}
165+
166+
.my-4 {
167+
margin: 3rem 0;
168+
}
169+
170+
.my-5 {
171+
margin: 4rem 0;
172+
}
173+
174+
.m-1 {
175+
margin: 1rem;
176+
}
177+
178+
.m-2 {
179+
margin: 1.5rem;
180+
}
181+
182+
.m-3 {
183+
margin: 2rem;
184+
}
185+
186+
.m-4 {
187+
margin: 3rem;
188+
}
189+
190+
.m-5 {
191+
margin: 4rem;
192+
}
193+
194+
/* Padding */
195+
.py-1 {
196+
padding: 1rem 0;
197+
}
198+
199+
.py-2 {
200+
padding: 1.5rem 0;
201+
}
202+
203+
.py-3 {
204+
padding: 2rem 0;
205+
}
206+
207+
.py-4 {
208+
padding: 3rem 0;
209+
}
210+
211+
.py-5 {
212+
padding: 4rem 0;
213+
}
214+
215+
.p-1 {
216+
padding: 1rem;
217+
}
218+
219+
.p-2 {
220+
padding: 1.5rem;
221+
}
222+
223+
.p-3 {
224+
padding: 2rem;
225+
}
226+
227+
.p-4 {
228+
padding: 3rem;
229+
}
230+
231+
.p-5 {
232+
padding: 4rem;
233+
}

Diff for: ‎README.md

+1-1
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](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](#) |
105105

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

0 commit comments

Comments
 (0)
Please sign in to comment.