Skip to content

Commit cf74d00

Browse files
helloswapnadeephelloswapnadeep
committed
Coming Soon
1 parent 5ab3459 commit cf74d00

File tree

6 files changed

+519
-7
lines changed

6 files changed

+519
-7
lines changed

‎css/style.css

+329
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,329 @@
1+
html {
2+
box-sizing: border-box;
3+
}
4+
5+
* {
6+
box-sizing: inherit;
7+
}
8+
9+
body,
10+
html {
11+
height: 100%;
12+
}
13+
14+
body {
15+
background-image: linear-gradient(
16+
to bottom,
17+
rgba(0, 0, 0, 0.5),
18+
rgba(0, 0, 0, 0.7)
19+
),
20+
url("../images/bg.jpg");
21+
background-attachment: fixed;
22+
background-position: center;
23+
background-repeat: no-repeat;
24+
background-size: cover;
25+
font-family: "Overpass", serif;
26+
margin: 0;
27+
position: relative;
28+
}
29+
30+
textarea,
31+
input[type="text"],
32+
input[type="button"],
33+
input[type="submit"] {
34+
-webkit-appearance: none;
35+
opacity: 1;
36+
}
37+
38+
::-webkit-input-placeholder {
39+
color: #dcdcdc;
40+
}
41+
42+
::-moz-placeholder {
43+
color: #dcdcdc;
44+
}
45+
46+
:-ms-input-placeholder {
47+
color: #dcdcdc;
48+
}
49+
50+
:-moz-placeholder {
51+
color: #dcdcdc;
52+
}
53+
54+
.highlight {
55+
color: #ff303c;
56+
}
57+
58+
/*-- loader --*/
59+
.preloader.fade {
60+
opacity: 0;
61+
}
62+
63+
#preloader {
64+
position: fixed;
65+
top: 0;
66+
left: 0;
67+
width: 100%;
68+
height: 100%;
69+
background: #312a2b;
70+
z-index: 999;
71+
}
72+
73+
#loader {
74+
display: block;
75+
position: relative;
76+
left: 50%;
77+
top: 50%;
78+
width: 150px;
79+
height: 150px;
80+
margin: -75px 0 0 -75px;
81+
border-radius: 50%;
82+
border: 3px solid transparent;
83+
border-top-color: #ff3f22;
84+
-webkit-animation: spin 2s linear infinite;
85+
animation: spin 2s linear infinite;
86+
}
87+
88+
#loader:before {
89+
content: "";
90+
position: absolute;
91+
top: 5px;
92+
left: 5px;
93+
right: 5px;
94+
bottom: 5px;
95+
border-radius: 50%;
96+
border: 3px solid transparent;
97+
border-top-color: #ff3b00;
98+
-webkit-animation: spin 3s linear infinite;
99+
animation: spin 3s linear infinite;
100+
}
101+
102+
#loader:after {
103+
content: "";
104+
position: absolute;
105+
top: 15px;
106+
left: 15px;
107+
right: 15px;
108+
bottom: 15px;
109+
border-radius: 50%;
110+
border: 3px solid transparent;
111+
border-top-color: #ff00ff;
112+
-webkit-animation: spin 1.5s linear infinite;
113+
animation: spin 1.5s linear infinite;
114+
}
115+
116+
@-webkit-keyframes spin {
117+
0% {
118+
-webkit-transform: rotate(0deg);
119+
-ms-transform: rotate(0deg);
120+
transform: rotate(0deg);
121+
}
122+
100% {
123+
-webkit-transform: rotate(360deg);
124+
-ms-transform: rotate(360deg);
125+
transform: rotate(360deg);
126+
}
127+
}
128+
129+
@keyframes spin {
130+
0% {
131+
-webkit-transform: rotate(0deg);
132+
-ms-transform: rotate(0deg);
133+
transform: rotate(0deg);
134+
}
135+
100% {
136+
-webkit-transform: rotate(360deg);
137+
-ms-transform: rotate(360deg);
138+
transform: rotate(360deg);
139+
}
140+
}
141+
142+
/*-- loader --*/
143+
.content-wrap {
144+
margin: 20px auto 40px auto;
145+
max-width: 700px;
146+
padding: 0 15px;
147+
text-align: center;
148+
}
149+
150+
.logo-box img {
151+
max-width: 110px;
152+
}
153+
154+
.cta-box h1 {
155+
color: #fff;
156+
font-size: 58px;
157+
font-weight: 800;
158+
text-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
159+
}
160+
161+
.cta-box p {
162+
color: #fff;
163+
font-size: 20px;
164+
margin-top: 20px;
165+
}
166+
167+
.newsletter {
168+
margin: 40px auto 0 auto;
169+
max-width: 450px;
170+
position: relative;
171+
}
172+
173+
.newsletter .form-field {
174+
background: rgba(99, 99, 99, 0.5);
175+
border: 1px solid rgba(0, 0, 0, 0.17);
176+
border-radius: 30px;
177+
box-shadow: 0 0 0px 4px rgba(132, 115, 115, 0.28);
178+
color: #fff;
179+
font-size: 16px;
180+
height: 52px;
181+
padding: 0 20px 0 20px;
182+
width: 100%;
183+
}
184+
185+
.newsletter .form-field:focus {
186+
border: 1px solid rgba(0, 0, 0, 0.17);
187+
box-shadow: 0 0 0px 4px rgba(132, 115, 115, 0.28);
188+
outline: none;
189+
}
190+
191+
.btn-main {
192+
background: linear-gradient(45deg, #ff0785, #ff5200);
193+
border: none;
194+
border-radius: 30px;
195+
color: #fff;
196+
cursor: pointer;
197+
font-size: 14px;
198+
font-weight: 600;
199+
height: 52px;
200+
position: absolute;
201+
top: 0;
202+
right: 0;
203+
padding: 0 20px;
204+
text-transform: uppercase;
205+
z-index: 11;
206+
}
207+
208+
.btn-main:hover {
209+
background: linear-gradient(45deg, #ff5200, #ff0785);
210+
color: #fff;
211+
}
212+
213+
.btn-main:focus {
214+
outline: none;
215+
}
216+
217+
.social-icons {
218+
margin-top: 20px;
219+
}
220+
221+
.social-icons a {
222+
padding: 0 10px;
223+
text-decoration: none;
224+
}
225+
226+
.social-icons a:hover,
227+
.social-icons a:active,
228+
.social-icons a:visited {
229+
color: #fff;
230+
}
231+
232+
.social-icons svg {
233+
fill: #fff;
234+
transition: all.2s ease-in-out;
235+
width: 20px;
236+
}
237+
238+
.social-icons a:hover svg {
239+
transform: scale(1.1);
240+
}
241+
242+
.countdown {
243+
color: #fff;
244+
margin-top: 40px;
245+
}
246+
247+
.timer-cta {
248+
font-size: 18px;
249+
}
250+
251+
.countdown ul {
252+
margin-top: 30px;
253+
padding-left: 0;
254+
}
255+
256+
.countdown ul li {
257+
background: rgba(230, 230, 230, 0.12);
258+
border-radius: 100%;
259+
display: inline-block;
260+
height: 80px;
261+
list-style: none;
262+
position: relative;
263+
text-align: center;
264+
margin: 0px 15px;
265+
width: 80px;
266+
}
267+
268+
ul > li::before {
269+
border-radius: 100%;
270+
content: "";
271+
background-image: linear-gradient(45deg, #ff5200, #ff0785 100%);
272+
top: -10px;
273+
left: -10px;
274+
bottom: -10px;
275+
right: -10px;
276+
position: absolute;
277+
z-index: -1;
278+
}
279+
280+
.time-box {
281+
position: absolute;
282+
top: 50%;
283+
left: 50%;
284+
transform: translate(-50%, -50%);
285+
}
286+
287+
.time {
288+
font-size: 32px;
289+
font-weight: 800;
290+
}
291+
292+
.time-txt {
293+
display: block;
294+
font-size: 12px;
295+
}
296+
297+
@media screen and (min-width: 1200px) {
298+
.content-wrap {
299+
position: absolute;
300+
top: 50%;
301+
left: 50%;
302+
transform: translate(-50%, -50%);
303+
width: 700px;
304+
}
305+
}
306+
307+
@media screen and (max-width: 767px) {
308+
.content-wrap {
309+
margin-top: 80px;
310+
width: 100%;
311+
}
312+
.cta-box h1 {
313+
font-size: 28px;
314+
}
315+
.cta-box p {
316+
font-size: 17px;
317+
}
318+
.time {
319+
font-size: 22px;
320+
}
321+
.newsletter .form-field,
322+
.btn-main {
323+
height: 46px;
324+
}
325+
.countdown ul li {
326+
height: 75px;
327+
width: 75px;
328+
}
329+
}

‎images/bg.jpg

229 KB
Loading

‎images/favicon.png

1.46 KB
Loading

‎images/logo.png

5.05 KB
Loading

0 commit comments

Comments
 (0)