Skip to content

Commit 60d99fb

Browse files
Богдан БердниковБогдан Бердников
Богдан Бердников
authored and
Богдан Бердников
committed
commit
0 parents  commit 60d99fb

18 files changed

+1472
-0
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.git
2+
.idea
3+
.sass-cache

‎css/font-awesome.min.css

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/main.css

Lines changed: 321 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/main.css.map

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/main.sass

Lines changed: 314 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,314 @@
1+
@import "font-awesome.min.css"
2+
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300)
3+
4+
@mixin clear()
5+
&:before
6+
content: ''
7+
clear: both
8+
&:after
9+
content: ''
10+
clear: both
11+
display: table
12+
13+
*
14+
box-sizing: border-box
15+
16+
html
17+
font-size: 100%
18+
height: 100%
19+
width: 100%
20+
21+
body
22+
font-family: 'Open Sans', sans-serif
23+
font-size: 1em
24+
font-weight: 300
25+
height: 100%
26+
margin: 0
27+
padding: 0
28+
width: 100%
29+
30+
h1
31+
text-transform: uppercase
32+
33+
#outerWrapper
34+
height: 100vh
35+
margin: auto
36+
overflow: hidden
37+
position: relative
38+
width: 100vw
39+
#innerWrapper
40+
position: absolute
41+
transition: left .5s ease
42+
width: 9999px
43+
+clear
44+
.slide
45+
float: left
46+
height: 100vh
47+
position: relative
48+
width: 100vw
49+
#first
50+
background-image: url("../img/overlay.png"), -webkit-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../img/01.jpg")
51+
background-image: url("../img/overlay.png"), linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../img/01.jpg")
52+
background-repeat: repeat, no-repeat, no-repeat
53+
background-size: 100px 100px, cover, cover
54+
background-position: top left, center center, center center
55+
background-attachment: fixed
56+
z-index: 3
57+
#main-content-wrapper
58+
left: 50%
59+
padding: 2em
60+
position: fixed
61+
top: 50%
62+
transform: translate(-50%, -50%)
63+
z-index: 2
64+
& > *
65+
z-index: 1
66+
#main-content
67+
position: relative
68+
max-width: 100%
69+
min-width: 25em
70+
padding: 4.5em 3em 3em 3em
71+
background: #fff
72+
border-radius: 5px
73+
text-align: center
74+
p
75+
text-transform: uppercase
76+
.avatar
77+
display: block
78+
margin-bottom: 1.5em
79+
position: relative
80+
img
81+
display: block
82+
margin: 0 auto
83+
border-radius: 100%
84+
box-shadow: 0 0 0 1.5em #fff
85+
width: 125px
86+
height: 125px
87+
&::before
88+
background: #c8cccf
89+
content: ''
90+
height: 1px
91+
left: -3em
92+
position: absolute
93+
top: 50%
94+
width: calc(100% + 6em)
95+
z-index: -1
96+
footer
97+
.icons
98+
display: inline-block
99+
padding: 0
100+
margin: 0
101+
li
102+
display: inline-block
103+
list-style: none
104+
padding: 0.675em 0.5em
105+
a
106+
border: 1px solid #c8cccf
107+
border-radius: 100%
108+
display: block
109+
height: 3.75em
110+
overflow: hidden
111+
position: relative
112+
text-align: center
113+
text-decoration: none
114+
text-indent: 3.75em
115+
transition: border-color .5s
116+
white-space: nowrap
117+
width: 3.75em
118+
&:before
119+
color: #fff
120+
text-shadow: 1.25px 0 0 #c8cccf, -1.25px 0 0 #c8cccf, 0 1.25px 0 #c8cccf, 0 -0.25px 0 #c8cccf
121+
position: absolute
122+
top: 25%
123+
left: 0
124+
width: inherit
125+
height: inherit
126+
line-height: inherit
127+
font-size: 1.85em
128+
text-align: center
129+
text-indent: 0
130+
transition: text-shadow .5s
131+
&:hover
132+
border-color: #ff7496
133+
&:before
134+
text-shadow: 1.25px 0 0 #ff7496, -1.25px 0 0 #ff7496, 0 1.25px 0 #ff7496, 0 -0.25px 0 #ff7496
135+
#second
136+
background-image: url("../img/overlay.png"), -webkit-linear-gradient(60deg, rgba(#00A8C5, 0.5), rgba(#FFFF7E, 0.35)), url("../img/02.jpg")
137+
background-image: url("../img/overlay.png"), linear-gradient(60deg, rgba(#00A8C5, 0.5), rgba(#FFFF7E, 0.35)), url("../img/02.jpg")
138+
background-repeat: repeat, no-repeat, no-repeat
139+
background-size: 100px 100px, cover, cover
140+
background-position: top left, center center, center center
141+
background-attachment: fixed
142+
z-index: 4
143+
#third
144+
background-image: url("../img/overlay.png"), -webkit-linear-gradient(225deg, rgba(#D4145A, 0.4), rgba(#FBB03B, 0.5)), url("../img/03.jpg")
145+
background-image: url("../img/overlay.png"), linear-gradient(225deg, rgba(#D4145A, 0.4), rgba(#FBB03B, 0.5)), url("../img/03.jpg")
146+
background-repeat: repeat, no-repeat, no-repeat
147+
background-size: 100px 100px, cover, cover
148+
background-position: top left, center center, center center
149+
background-attachment: fixed
150+
z-index: 5
151+
#forth
152+
background-image: url("../img/overlay.png"), -webkit-linear-gradient(75deg, rgba(#123, 0.75), rgba(#f26, 0.25)), url("../img/04.jpg")
153+
background-image: url("../img/overlay.png"), linear-gradient(75deg, rgba(#123, 0.75), rgba(#f26, 0.25)), url("../img/04.jpg")
154+
background-repeat: repeat, no-repeat, no-repeat
155+
background-size: 100px 100px, cover, cover
156+
background-position: top left, center center, center center
157+
background-attachment: fixed
158+
z-index: 6
159+
position: relative
160+
#form-content-wrapper
161+
left: 0
162+
padding: 2em
163+
position: absolute
164+
top: 50%
165+
transform: translateY(-50%)
166+
width: 100%
167+
z-index: 2
168+
#form-content
169+
background: #fff
170+
border-radius: 5px
171+
display: inline-block
172+
left: 50%
173+
max-width: 100%
174+
padding: 3em
175+
position: relative
176+
text-align: center
177+
width: 50%
178+
form
179+
margin: 0 0 1.5em 0
180+
& > .field
181+
margin: 0 0 1.5em 0
182+
&:last-child
183+
margin-bottom: 0
184+
label
185+
color: #313f47
186+
display: block
187+
font-size: 0.9em
188+
margin: 0 0 0.75em 0
189+
input[type="text"],
190+
input[type="password"],
191+
input[type="email"],
192+
input[type="tel"],
193+
select,
194+
textarea
195+
-moz-appearance: none
196+
-webkit-appearance: none
197+
-ms-appearance: none
198+
appearance: none
199+
border-radius: 5px
200+
border: solid 1px #c8cccf
201+
color: inherit
202+
display: block
203+
outline: 0
204+
padding: 0 1em
205+
text-decoration: none
206+
width: 100%
207+
&:invalid
208+
box-shadow: none
209+
&:focus
210+
border-color: #ff7496
211+
.select-wrapper
212+
text-decoration: none
213+
display: block
214+
position: relative
215+
&:before
216+
color: #c8cccf
217+
display: block
218+
height: 2.75em
219+
line-height: 2.75em
220+
pointer-events: none
221+
position: absolute
222+
right: 0
223+
text-align: center
224+
top: 0
225+
width: 2.75em
226+
select::-ms-expand
227+
display: none
228+
input[type="text"],
229+
input[type="password"],
230+
input[type="email"],
231+
select
232+
height: 2.75em
233+
textarea
234+
padding: 0.75em 1em
235+
input[type="checkbox"],
236+
input[type="radio"]
237+
-moz-appearance: none
238+
-webkit-appearance: none
239+
-ms-appearance: none
240+
appearance: none
241+
display: block
242+
float: left
243+
margin-right: -2em
244+
opacity: 0
245+
width: 1em
246+
z-index: -1
247+
& + label
248+
text-decoration: none
249+
color: #414f57
250+
cursor: pointer
251+
display: inline-block
252+
font-size: 1em
253+
font-weight: 300
254+
padding-left: 2.4em
255+
padding-right: 0.75em
256+
position: relative
257+
&:before
258+
border-radius: 4px
259+
border: solid 1px #c8cccf
260+
content: ''
261+
display: inline-block
262+
height: 1.65em
263+
left: 0
264+
line-height: 1.58125em
265+
position: absolute
266+
text-align: center
267+
top: 0.15em
268+
width: 1.65em
269+
input[type="checkbox"]:checked + label:before,
270+
input[type="radio"]:checked + label:before
271+
color: #ff7496
272+
content: '\f00c'
273+
input[type="checkbox"]:focus + label:before,
274+
input[type="radio"]:focus + label:before
275+
border-color: #ff7496
276+
input[type="checkbox"] + label:before
277+
border-radius: 4px
278+
input[type="radio"] + label:before
279+
border-radius: 100%
280+
::-webkit-input-placeholder
281+
color: #616f77 !important
282+
opacity: 1.0
283+
:-moz-placeholder
284+
color: #616f77 !important
285+
opacity: 1.0
286+
::-moz-placeholder
287+
color: #616f77 !important
288+
opacity: 1.0
289+
:-ms-input-placeholder
290+
color: #616f77 !important
291+
opacity: 1.0
292+
.controllers
293+
.controller
294+
cursor: pointer
295+
height: 100vh
296+
position: absolute
297+
width: 30px
298+
z-index: 10
299+
i
300+
color: #fff
301+
font-size: 3em
302+
position: absolute
303+
top: 50%
304+
transform: translateY(-50%)
305+
#prev
306+
background: linear-gradient(90deg, rgba(#000, .3), transparent)
307+
left: 0
308+
&:hover
309+
background: linear-gradient(90deg, rgba(#000, .5), transparent)
310+
#next
311+
background: linear-gradient(270deg, rgba(#000, .3), transparent)
312+
right: 0
313+
&:hover
314+
background: linear-gradient(270deg, rgba(#000, .5), transparent)

‎fonts/FontAwesome.otf

122 KB
Binary file not shown.

‎fonts/fontawesome-webfont.eot

74.4 KB
Binary file not shown.

0 commit comments

Comments
 (0)