-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit ca9ccb3
Showing
10 changed files
with
1,654 additions
and
0 deletions.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,393 @@ | ||
* { | ||
box-sizing: border-box; | ||
margin: 0; | ||
padding: 0; | ||
font-weight: 900; | ||
} | ||
body { | ||
/*font-family: 'Source Sans Pro', sans-serif;*/ | ||
font-family: 'Lato'; | ||
font-weight: 900; | ||
} | ||
body ::-webkit-input-placeholder { | ||
/* WebKit browsers */ | ||
font-family: 'Lato'; | ||
font-weight: 900; | ||
} | ||
body :-moz-placeholder { | ||
/* Mozilla Firefox 4 to 18 */ | ||
font-family: 'Lato'; | ||
font-weight: 900; | ||
opacity: 1; | ||
|
||
} | ||
body ::-moz-placeholder { | ||
/* Mozilla Firefox 19+ */ | ||
font-family: 'Lato'; | ||
font-weight: bolder; | ||
opacity: 1; | ||
} | ||
body :-ms-input-placeholder { | ||
/* Internet Explorer 10+ */ | ||
font-family: 'Lato'; | ||
font-weight: bolder; | ||
} | ||
.wrapper { | ||
background: #84e6fd; | ||
background: -webkit-linear-gradient(top left, #84e6fd 0%, #fd69b4 100%); | ||
background: linear-gradient(to bottom right, #84e6fd 0%, #fd69b4 100%); | ||
position: absolute; | ||
/* top: 50%; */ | ||
left: 0; | ||
width: 100%; | ||
height: 100%; | ||
/* margin-top: -400px; */ | ||
overflow: hidden; | ||
} | ||
.wrapper.form-success .container h1 { | ||
-webkit-transform: translateY(85px); | ||
-ms-transform: translateY(85px); | ||
transform: translateY(85px); | ||
} | ||
.container { | ||
max-width: 200px; | ||
margin: 0 auto; | ||
padding: 80px 0; | ||
height: 400px; | ||
text-align: center; | ||
} | ||
.container h1 { | ||
font-size: 40px; | ||
-webkit-transition-duration: 1s; | ||
transition-duration: 1s; | ||
-webkit-transition-timing-function: ease-in-put; | ||
transition-timing-function: ease-in-put; | ||
font-weight: 200; | ||
} | ||
.bg-bubbles { | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
width: 100%; | ||
height: 100%; | ||
z-index: 1; | ||
} | ||
.bg-bubbles { | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
width: 100%; | ||
height: 100%; | ||
z-index: 1; | ||
} | ||
.bg-bubbles li { | ||
position: absolute; | ||
list-style: none; | ||
display: block; | ||
width: 40px; | ||
height: 40px; | ||
bottom: -160px; | ||
-webkit-animation: square 25s infinite; | ||
animation: square 25s infinite; | ||
-webkit-transition-timing-function: linear; | ||
transition-timing-function: linear; | ||
} | ||
|
||
.bg-bubbles li:nth-child(1) { | ||
left: 10%; | ||
} | ||
.bg-bubbles li:nth-child(2) { | ||
left: 20%; | ||
width: 80px; | ||
height: 80px; | ||
-webkit-animation-delay: 2s; | ||
animation-delay: 2s; | ||
-webkit-animation-duration: 17s; | ||
animation-duration: 17s; | ||
} | ||
.bg-bubbles li:nth-child(3) { | ||
left: 25%; | ||
-webkit-animation-delay: 4s; | ||
animation-delay: 4s; | ||
} | ||
.bg-bubbles li:nth-child(4) { | ||
left: 40%; | ||
width: 60px; | ||
height: 60px; | ||
-webkit-animation-duration: 22s; | ||
animation-duration: 22s; | ||
} | ||
.bg-bubbles li:nth-child(5) { | ||
left: 70%; | ||
} | ||
.bg-bubbles li:nth-child(6) { | ||
left: 80%; | ||
width: 120px; | ||
height: 120px; | ||
-webkit-animation-delay: 3s; | ||
animation-delay: 3s; | ||
} | ||
.bg-bubbles li:nth-child(7) { | ||
left: 32%; | ||
width: 160px; | ||
height: 160px; | ||
-webkit-animation-delay: 7s; | ||
animation-delay: 7s; | ||
} | ||
.bg-bubbles li:nth-child(8) { | ||
left: 55%; | ||
-webkit-animation-delay: 15s; | ||
animation-delay: 15s; | ||
-webkit-animation-duration: 40s; | ||
animation-duration: 40s; | ||
} | ||
.bg-bubbles li:nth-child(9) { | ||
left: 25%; | ||
width: 10px; | ||
height: 10px; | ||
-webkit-animation-delay: 2s; | ||
animation-delay: 2s; | ||
-webkit-animation-duration: 40s; | ||
animation-duration: 40s; | ||
} | ||
.bg-bubbles li:nth-child(10) { | ||
left: 90%; | ||
width: 160px; | ||
height: 160px; | ||
-webkit-animation-delay: 11s; | ||
animation-delay: 11s; | ||
} | ||
@-webkit-keyframes square { | ||
0% { | ||
-webkit-transform: translateY(0); | ||
transform: translateY(0); | ||
} | ||
100% { | ||
-webkit-transform: translateY(-700%); | ||
transform: translateY(-700%); | ||
} | ||
} | ||
@keyframes square { | ||
0% { | ||
-webkit-transform: translateY(0); | ||
transform: translateY(0); | ||
} | ||
100% { | ||
-webkit-transform: translateY(-700%); | ||
transform: translateY(-700%); | ||
} | ||
} | ||
.bg-bubbles li:nth-child(1) .heart { | ||
font-size: 50px; | ||
} | ||
.bg-bubbles li:nth-child(2) .heart { | ||
font-size: 100px; | ||
} | ||
.bg-bubbles li:nth-child(3) .heart { | ||
font-size: 70px; | ||
} | ||
.bg-bubbles li:nth-child(4) .heart { | ||
font-size: 170px; | ||
} | ||
.bg-bubbles li:nth-child(5) .heart { | ||
font-size: 120px; | ||
} | ||
.bg-bubbles li:nth-child(6) .heart { | ||
font-size: 150px; | ||
} | ||
.bg-bubbles li:nth-child(7) .heart { | ||
font-size: 60px; | ||
} | ||
.bg-bubbles li:nth-child(8) .heart { | ||
font-size: 110px; | ||
} | ||
.bg-bubbles li:nth-child(9) .heart { | ||
font-size: 80px; | ||
} | ||
.bg-bubbles li:nth-child(10) .heart { | ||
font-size: 200px; | ||
} | ||
.heart { | ||
font-size: 152px; | ||
text-align: center; | ||
color: rgba(253, 253, 253, 0.41); | ||
padding: 0; | ||
margin: 0; | ||
} | ||
|
||
.pulse2 { | ||
-webkit-animation: pulse2 1s linear infinite; | ||
-moz-animation: pulse2 1s linear infinite; | ||
-ms-animation: pulse2 1s linear infinite; | ||
animation: pulse2 1s linear infinite; | ||
} | ||
|
||
@keyframes "pulse2" { | ||
0% { | ||
-webkit-transform: scale(1.1); | ||
-moz-transform: scale(1.1); | ||
-o-transform: scale(1.1); | ||
-ms-transform: scale(1.1); | ||
transform: scale(1.1); | ||
} | ||
50% { | ||
-webkit-transform: scale(0.8); | ||
-moz-transform: scale(0.8); | ||
-o-transform: scale(0.8); | ||
-ms-transform: scale(0.8); | ||
transform: scale(0.8); | ||
} | ||
100% { | ||
-webkit-transform: scale(1); | ||
-moz-transform: scale(1); | ||
-o-transform: scale(1); | ||
-ms-transform: scale(1); | ||
transform: scale(1); | ||
} | ||
|
||
} | ||
|
||
@-moz-keyframes pulse2 { | ||
0% { | ||
-moz-transform: scale(1.1); | ||
transform: scale(1.1); | ||
} | ||
50% { | ||
-moz-transform: scale(0.8); | ||
transform: scale(0.8); | ||
} | ||
100% { | ||
-moz-transform: scale(1); | ||
transform: scale(1); | ||
} | ||
|
||
} | ||
|
||
@-webkit-keyframes "pulse2" { | ||
0% { | ||
-webkit-transform: scale(1.1); | ||
transform: scale(1.1); | ||
} | ||
50% { | ||
-webkit-transform: scale(0.8); | ||
transform: scale(0.8); | ||
} | ||
100% { | ||
-webkit-transform: scale(1); | ||
transform: scale(1); | ||
} | ||
|
||
} | ||
|
||
@-ms-keyframes "pulse2" { | ||
0% { | ||
-ms-transform: scale(1.1); | ||
transform: scale(1.1); | ||
} | ||
50% { | ||
-ms-transform: scale(0.8); | ||
transform: scale(0.8); | ||
} | ||
100% { | ||
-ms-transform: scale(1); | ||
transform: scale(1); | ||
} | ||
|
||
} | ||
|
||
.main{ | ||
margin: 170px 0 0 -250px; | ||
width: 724px; | ||
height: 300px; | ||
background: rgba(243, 243, 243, 0.75); | ||
border-radius: 25px; | ||
} | ||
.main p:nth-child(1) { | ||
text-align: left; | ||
padding: 35px 35px 5px 35px; | ||
font-size: 25px; | ||
} | ||
.main p:nth-child(2) { | ||
text-align: left; | ||
padding: 5px 35px 10px 35px; | ||
} | ||
.flexslider a:active, | ||
.flexslider a:focus { outline: none; } | ||
.slides, | ||
.flex-control-nav, | ||
.flex-direction-nav { margin: 0; padding: 0; list-style: none; } | ||
.slides li { margin: 0; padding: 0;} | ||
|
||
/* Necessary Styles */ | ||
.flexslider { | ||
position: relative; | ||
zoom: 1; | ||
margin: 0; | ||
padding: 0; | ||
} | ||
.flexslider .slides { zoom: 1; } | ||
.flexslider .slides > li { position: relative; } | ||
|
||
/* Hide the slides before the JS is loaded. Avoids image jumping */ | ||
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } | ||
/* Suggested container for slide animation setups. Can replace this with your own */ | ||
.flex-container { zoom: 1; position: relative; } | ||
|
||
/* Clearfix for .slides */ | ||
.slides:before, | ||
.slides:after { | ||
content: " "; | ||
display: table; | ||
} | ||
.slides:after { | ||
clear: both; | ||
} | ||
|
||
/* No JavaScript Fallback */ | ||
/* If you are not using another script, such as Modernizr, make sure you | ||
* include js that eliminates this class on page load */ | ||
.no-js .slides > li:first-child { display: block; } | ||
|
||
/* Slider Styles */ | ||
.slides { zoom: 1; } | ||
.slides > li { | ||
/*margin-right: 5px; */ | ||
overflow: hidden; | ||
} | ||
|
||
/* Control Nav */ | ||
.flex-control-nav { | ||
width: 100%; | ||
position: relative; | ||
bottom: -20px; | ||
text-align: center; | ||
} | ||
.flex-control-nav li { | ||
margin: 0 6px; | ||
display: inline-block; | ||
zoom: 1; | ||
*display: inline; | ||
} | ||
.flex-control-paging li a { | ||
width: 12px; | ||
height: 12px; | ||
display: block; | ||
background: #ddd; | ||
background: rgba(255, 255, 255, .3); | ||
cursor: pointer; | ||
text-indent: -9999px; | ||
-webkit-border-radius: 20px; | ||
-moz-border-radius: 20px; | ||
-o-border-radius: 20px; | ||
border-radius: 20px; | ||
box-shadow: inset 0 0 3px rgba(255, 255, 255, .3); | ||
} | ||
.flex-control-paging li a:hover { | ||
background: #CCC; | ||
background: rgba(255, 255, 255, .7); | ||
} | ||
.flex-control-paging li a.flex-active { | ||
background: #fff; | ||
background: rgba(255, 255, 255, .9); | ||
cursor: default; | ||
} |
Oops, something went wrong.