Skip to content

Commit 61cbf56

Browse files
solygambassolygambas
committed
add hero
1 parent cdb7913 commit 61cbf56

File tree

4 files changed

+330
-0
lines changed

4 files changed

+330
-0
lines changed

‎96-cloud hosting service/index.html

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!-- Based on Build a Responsive Website by Brad Traversy (2020)
2+
see: https://www.youtube.com/watch?v=p0bGHP-PXD4 -->
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<link
10+
rel="stylesheet"
11+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
12+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
13+
crossorigin="anonymous"
14+
/>
15+
<link rel="stylesheet" href="utilities.css" />
16+
<link rel="stylesheet" href="style.css" />
17+
<title>Loruki | Cloud Hosting For Everyone</title>
18+
</head>
19+
<body>
20+
<!-- Navbar -->
21+
<div class="navbar">
22+
<div class="container flex">
23+
<h1 class="logo">Loruki.</h1>
24+
<nav>
25+
<ul>
26+
<li><a href="#home">Home</a></li>
27+
<li><a href="#features">Features</a></li>
28+
<li><a href="#docs">Docs</a></li>
29+
</ul>
30+
</nav>
31+
</div>
32+
</div>
33+
<!-- Showcase -->
34+
<section class="showcase">
35+
<div class="container grid">
36+
<div class="showcase-text">
37+
<h1>Easier Deployment</h1>
38+
<p>
39+
Deploy web apps of all kinds, from large scale enterprise APIs to
40+
static websites for individuals. Fill out the form to try a demo of
41+
our platform
42+
</p>
43+
<a href="#features" class="btn btn-outline">Learn More</a>
44+
</div>
45+
<div class="showcase-form card">
46+
<h2>Request a Demo</h2>
47+
<form onsubmit="event.preventDefault()">
48+
<div class="form-control">
49+
<input type="text" name="name" placeholder="Name" required />
50+
</div>
51+
<div class="form-control">
52+
<input
53+
type="text"
54+
name="company"
55+
placeholder="Company Name"
56+
required
57+
/>
58+
</div>
59+
<div class="form-control">
60+
<input type="email" name="email" placeholder="Email" required />
61+
</div>
62+
<input type="submit" value="Send" class="btn btn-primary" />
63+
</form>
64+
</div>
65+
</div>
66+
</section>
67+
</body>
68+
</html>

‎96-cloud hosting service/style.css

+178
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap");
2+
3+
:root {
4+
--primary-color: #047aed;
5+
--secondary-color: #1c3fa8;
6+
--dark-color: #002240;
7+
--light-color: #f4f4f4;
8+
--success-color: #5cb85c;
9+
--error-color: #d9534f;
10+
--grey-color: #333;
11+
}
12+
13+
* {
14+
box-sizing: border-box;
15+
margin: 0;
16+
padding: 0;
17+
}
18+
19+
body {
20+
font-family: "Lato", sans-serif;
21+
color: var(--grey-color);
22+
line-height: 1.6;
23+
}
24+
25+
ul {
26+
list-style-type: none;
27+
}
28+
29+
a {
30+
text-decoration: none;
31+
color: var(--grey-color);
32+
}
33+
34+
h1,
35+
h2 {
36+
font-weight: 300;
37+
line-height: 1.2;
38+
margin: 10px 0;
39+
}
40+
41+
p {
42+
margin: 10px 0;
43+
}
44+
45+
img {
46+
width: 100%;
47+
}
48+
49+
code,
50+
pre {
51+
background-color: var(--grey-color);
52+
color: #fff;
53+
padding: 10px;
54+
}
55+
56+
.hidden {
57+
visibility: hidden;
58+
height: 0;
59+
}
60+
61+
/* navbar */
62+
63+
.navbar {
64+
background-color: var(--primary-color);
65+
color: #fff;
66+
height: 70px;
67+
}
68+
69+
.navbar ul {
70+
display: flex;
71+
}
72+
73+
.navbar a {
74+
color: #fff;
75+
padding: 10px;
76+
margin: 0 5px;
77+
}
78+
79+
.navbar a:hover {
80+
border-bottom: 2px #fff solid;
81+
}
82+
83+
.navbar .flex {
84+
justify-content: space-between;
85+
}
86+
87+
.navbar h1 {
88+
margin: 0;
89+
}
90+
91+
/* showcase */
92+
93+
.showcase {
94+
height: 400px;
95+
background-color: var(--primary-color);
96+
color: #fff;
97+
position: relative;
98+
}
99+
100+
.showcase h1 {
101+
font-size: 2.5rem;
102+
}
103+
104+
.showcase p {
105+
margin: 20px 0;
106+
}
107+
108+
.showcase .grid {
109+
overflow: visible;
110+
grid-template-columns: 55% auto;
111+
gap: 30px;
112+
}
113+
114+
.showcase-text {
115+
animation: slideInFromLeft 0.2s ease-in;
116+
}
117+
118+
.showcase-form {
119+
position: relative;
120+
top: 60px;
121+
height: 350px;
122+
width: 400px;
123+
padding: 40px;
124+
z-index: 100;
125+
justify-self: flex-end;
126+
animation: slideInFromRight 0.2s ease-in;
127+
}
128+
129+
.showcase-form .form-control {
130+
margin: 30px 0;
131+
}
132+
133+
.showcase-form input[type="text"],
134+
.showcase-form input[type="email"] {
135+
border: 0;
136+
border-bottom: 1px solid #b4becb;
137+
width: 100%;
138+
padding: 3px;
139+
font-size: 1rem;
140+
}
141+
142+
.showcase-form input:focus {
143+
outline: none;
144+
}
145+
146+
.showcase::before,
147+
.showcase::after {
148+
content: "";
149+
position: absolute;
150+
height: 100px;
151+
bottom: -70px;
152+
right: 0;
153+
left: 0;
154+
background-color: #fff;
155+
transform: skewY(-3deg);
156+
}
157+
158+
@keyframes slideInFromLeft {
159+
0% {
160+
opacity: 0;
161+
transform: translateX(-33%);
162+
}
163+
100% {
164+
opacity: 1;
165+
transform: translateX(0);
166+
}
167+
}
168+
169+
@keyframes slideInFromRight {
170+
0% {
171+
opacity: 0;
172+
transform: translateX(133%);
173+
}
174+
100% {
175+
opacity: 1;
176+
transform: translateX(0);
177+
}
178+
}

‎96-cloud hosting service/utilities.css

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
.container {
2+
max-width: 1100px;
3+
margin: 0 auto;
4+
padding: 0 40px;
5+
}
6+
7+
.flex {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
height: 100%;
12+
}
13+
14+
.grid {
15+
display: grid;
16+
grid-template-columns: repeat(2, 1fr);
17+
gap: 20px;
18+
justify-content: center;
19+
align-items: center;
20+
height: 100%;
21+
}
22+
23+
.card {
24+
background-color: #fff;
25+
color: var(--grey-color);
26+
border-radius: 10px;
27+
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
28+
padding: 20px;
29+
margin: 10px;
30+
}
31+
32+
.btn {
33+
display: inline;
34+
padding: 10px 30px;
35+
cursor: pointer;
36+
background-color: var(--primary-color);
37+
color: #fff;
38+
border: none;
39+
border-radius: 5px;
40+
}
41+
42+
.btn-outline {
43+
background-color: transparent;
44+
border: 1px solid #fff;
45+
}
46+
47+
.btn:hover {
48+
transform: scale(0.98);
49+
}
50+
51+
/* Backgrounds & colored buttons */
52+
.bg-primary,
53+
.btn-primary {
54+
background-color: var(--primary-color);
55+
color: #fff;
56+
}
57+
58+
.bg-secondary,
59+
.btn-secondary {
60+
background-color: var(--secondary-color);
61+
color: #fff;
62+
}
63+
64+
.bg-dark,
65+
.btn-dark {
66+
background-color: var(--dark-color);
67+
color: #fff;
68+
}
69+
70+
.bg-light,
71+
.btn-light {
72+
background-color: var(--light-color);
73+
color: var(--grey-color);
74+
}
75+
76+
.bg-primary a,
77+
.btn-primary a,
78+
.bg-secondary a,
79+
.btn-secondary a,
80+
.bg-dark a,
81+
.btn-dark a {
82+
color: #fff;
83+
}

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -101,6 +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) |
104105

105106
This repository is mostly based on 2 courses by Brad Traversy (2020):
106107

0 commit comments

Comments
 (0)