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

Commit61cbf56

Browse files
committed
add hero
1 parentcdb7913 commit61cbf56

File tree

4 files changed

+330
-0
lines changed

4 files changed

+330
-0
lines changed

‎96-cloud hosting service/index.html

Lines changed: 68 additions & 0 deletions
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+
<htmllang="en">
6+
<head>
7+
<metacharset="UTF-8"/>
8+
<metaname="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+
<linkrel="stylesheet"href="utilities.css"/>
16+
<linkrel="stylesheet"href="style.css"/>
17+
<title>Loruki | Cloud Hosting For Everyone</title>
18+
</head>
19+
<body>
20+
<!-- Navbar -->
21+
<divclass="navbar">
22+
<divclass="container flex">
23+
<h1class="logo">Loruki.</h1>
24+
<nav>
25+
<ul>
26+
<li><ahref="#home">Home</a></li>
27+
<li><ahref="#features">Features</a></li>
28+
<li><ahref="#docs">Docs</a></li>
29+
</ul>
30+
</nav>
31+
</div>
32+
</div>
33+
<!-- Showcase -->
34+
<sectionclass="showcase">
35+
<divclass="container grid">
36+
<divclass="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+
<ahref="#features"class="btn btn-outline">Learn More</a>
44+
</div>
45+
<divclass="showcase-form card">
46+
<h2>Request a Demo</h2>
47+
<formonsubmit="event.preventDefault()">
48+
<divclass="form-control">
49+
<inputtype="text"name="name"placeholder="Name"required/>
50+
</div>
51+
<divclass="form-control">
52+
<input
53+
type="text"
54+
name="company"
55+
placeholder="Company Name"
56+
required
57+
/>
58+
</div>
59+
<divclass="form-control">
60+
<inputtype="email"name="email"placeholder="Email"required/>
61+
</div>
62+
<inputtype="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

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
@importurl("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:10px0;
39+
}
40+
41+
p {
42+
margin:10px0;
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+
.navbarul {
70+
display: flex;
71+
}
72+
73+
.navbara {
74+
color:#fff;
75+
padding:10px;
76+
margin:05px;
77+
}
78+
79+
.navbara:hover {
80+
border-bottom:2px#fff solid;
81+
}
82+
83+
.navbar .flex {
84+
justify-content: space-between;
85+
}
86+
87+
.navbarh1 {
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+
.showcaseh1 {
101+
font-size:2.5rem;
102+
}
103+
104+
.showcasep {
105+
margin:20px0;
106+
}
107+
108+
.showcase .grid {
109+
overflow: visible;
110+
grid-template-columns:55% auto;
111+
gap:30px;
112+
}
113+
114+
.showcase-text {
115+
animation: slideInFromLeft0.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: slideInFromRight0.2s ease-in;
127+
}
128+
129+
.showcase-form .form-control {
130+
margin:30px0;
131+
}
132+
133+
.showcase-forminput[type="text"],
134+
.showcase-forminput[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-forminput: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+
}
Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
.container {
2+
max-width:1100px;
3+
margin:0 auto;
4+
padding:040px;
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:03px10pxrgba(0,0,0,0.2);
28+
padding:20px;
29+
margin:10px;
30+
}
31+
32+
.btn {
33+
display: inline;
34+
padding:10px30px;
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-primarya,
77+
.btn-primarya,
78+
.bg-secondarya,
79+
.btn-secondarya,
80+
.bg-darka,
81+
.btn-darka {
82+
color:#fff;
83+
}

‎README.md

Lines changed: 1 addition & 0 deletions
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)
[8]ページ先頭
©2009-2025 Movatter.jp