Skip to content

Commit 04de210

Browse files
crnacuracrnacura
committed
Updated
1 parent b423323 commit 04de210

File tree

9 files changed

+196
-0
lines changed

9 files changed

+196
-0
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ A 3D Advent calendar with fun hover effects and background color animations. Cli
66

77
[Demo](http://tympanus.net/Development/CubesAdventCalendar/)
88

9+
This demo is sponsored by [Webydo: Design and development, all-in-one](https://goo.gl/Z3wbtl).
10+
911
## License
1012

1113
Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".

‎css/pater.css‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
.pater {
2+
position: fixed;
3+
width: 320px;
4+
height: auto;
5+
bottom: 0;
6+
left: 0;
7+
padding: 1em 2em 2em 2em;
8+
font-family: 'Helvetica Neue', Arial, sans-serif;
9+
color: #000;
10+
font-size: 0.85em;
11+
pointer-events: none;
12+
-webkit-touch-callout: none;
13+
-webkit-user-select: none;
14+
-khtml-user-select: none;
15+
-moz-user-select: none;
16+
-ms-user-select: none;
17+
user-select: none;
18+
z-index: 10000;
19+
}
20+
21+
.pater:hover {
22+
pointer-events: auto;
23+
}
24+
25+
.pater__title {
26+
line-height: 1;
27+
position: relative;
28+
z-index: 10;
29+
padding: 10px 0 8px 52px;
30+
cursor: default;
31+
background: url(../img/sponsor/webydo-logo.png) no-repeat 0% 50%;
32+
-webkit-transform: translateY(40px);
33+
transform: translateY(40px);
34+
opacity: 0;
35+
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
36+
transition: transform 0.3s, opacity 0.3s;
37+
}
38+
39+
.pater:hover .pater__title {
40+
opacity: 1;
41+
-webkit-transform: translateY(0);
42+
transform: translateY(0);
43+
}
44+
45+
.pater__hidden {
46+
position: relative;
47+
z-index: 100;
48+
opacity: 0;
49+
-webkit-transition: opacity 0.3s;
50+
transition: opacity 0.3s;
51+
}
52+
53+
.pater:hover .pater__hidden {
54+
opacity: 1;
55+
}
56+
57+
.pater__description {
58+
line-height: 1.2;
59+
color: #717070;
60+
cursor: default;
61+
}
62+
63+
.pater__sponsor {
64+
font-size: 0.875em;
65+
position: relative;
66+
display: block;
67+
z-index: 10;
68+
cursor: default;
69+
-webkit-transform: translate3d(0,-45px,0);
70+
transform: translate3d(0,-45px,0);
71+
-webkit-transition: -webkit-transform 0.3s;
72+
transition: transform 0.3s;
73+
}
74+
75+
.pater:hover .pater__sponsor {
76+
-webkit-transform: translate3d(0,0,0);
77+
transform: translate3d(0,0,0);
78+
}
79+
80+
.pater__button {
81+
background: #f9cf21;
82+
color: #000;
83+
cursor: pointer;
84+
padding: 0.65em 1.25em;
85+
border-radius: 1.5em;
86+
display: inline-block;
87+
position: absolute;
88+
right: 0;
89+
top: 100%;
90+
margin: 0.5em 0 0;
91+
z-index: 100;
92+
font-weight: bold;
93+
line-height: 1;
94+
-webkit-transition: background-color 0.2s, color 0.2s;
95+
transition: background-color 0.2s, color 0.2s;
96+
}
97+
98+
.pater__button:hover {
99+
background: #000;
100+
color: #fff;
101+
}
102+
103+
.pater__effect {
104+
position: absolute;
105+
pointer-events: auto;
106+
width: 260px;
107+
top: -4.5em;
108+
left: 0;
109+
-webkit-transform: rotate(-22.5deg);
110+
transform: rotate(-22.5deg);
111+
}
112+
113+
.pater__effect img {
114+
display: block;
115+
float: left;
116+
position: relative;
117+
-webkit-transition: -webkit-transform 0.3s;
118+
transition: transform 0.3s;
119+
}
120+
121+
.pater__effect img:nth-child(2) {
122+
margin: 2em 0 0 -4em;
123+
}
124+
125+
.pater__effect img:nth-child(3) {
126+
margin: -3.85em 0 0 3em;
127+
}
128+
129+
.pater:hover .pater__effect img:nth-child(-n+3) {
130+
-webkit-transform: translateY(-80px);
131+
transform: translateY(-80px);
132+
}
133+
134+
.pater:hover .pater__effect img:nth-child(3) {
135+
-webkit-transform: translateY(53px);
136+
transform: translateY(53px);
137+
}
138+
139+
.pater-responsive {
140+
position: fixed;
141+
display: none;
142+
bottom: 0;
143+
width: 100%;
144+
left: 0;
145+
z-index: 1000;
146+
font-size: 0.85em;
147+
padding: 1.5em 1em 1.5em 5em;
148+
color: #000;
149+
font-family: 'Helvetica Neue', Arial, sans-serif;
150+
background: #fff url(../img/sponsor/webydo-logo.png) no-repeat 0.75em 50%;
151+
}
152+
153+
@media screen and (max-width: 50.75em) {
154+
.pater {
155+
display: none;
156+
}
157+
.pater-responsive {
158+
display: block;
159+
}
160+
}

‎css/style1.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,10 @@
5353
background: #aaa;
5454
}
5555

56+
.js .content__block {
57+
text-align: right;
58+
}
59+
5660
.content__number {
5761
font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;
5862
font-size: 40vw;

‎img/sponsor/ipad1.png‎

22.5 KB
Loading

‎img/sponsor/ipad2.png‎

20.2 KB
Loading

‎img/sponsor/ipad3.png‎

15.3 KB
Loading

‎img/sponsor/webydo-logo.png‎

758 Bytes
Loading

‎index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
1414
<link rel="stylesheet" type="text/css" href="css/common.css" />
1515
<link rel="stylesheet" type="text/css" href="css/style1.css" />
16+
<link rel="stylesheet" type="text/css" href="css/pater.css" />
1617
<!--[if IE]>
1718
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
1819
<![endif]--><script>document.documentElement.className = 'js';</script>
@@ -194,6 +195,20 @@ <h3 class="content__title">Better World</h3>
194195
<button class="btn-back" aria-label="Back to the grid view">&crarr;</button>
195196
</div><!-- /content -->
196197
</div><!-- /calendar-wrap -->
198+
<div class="pater">
199+
<h3 class="pater__title">Design and development,<br/>all-in-one:</h3>
200+
<div class="pater__hidden">
201+
<p class="pater__description">Design just as you would in Photoshop while Webydo generates clean, semantic code optimized for SEO to help clients rank in search results.</p>
202+
<a href="https://goo.gl/Z3wbtl" class="pater__button">Try It Now</a>
203+
</div>
204+
<span class="pater__sponsor">Sponsored by <strong>Webydo</strong></span>
205+
<div class="pater__effect">
206+
<img src="img/sponsor/ipad1.png" alt="Ipad">
207+
<img src="img/sponsor/ipad2.png" alt="Ipad">
208+
<img src="img/sponsor/ipad3.png" alt="Ipad">
209+
</div>
210+
</div>
211+
<a href="https://goo.gl/Z3wbtl" class="pater-responsive">Sponsored by <strong>Webydo</strong></a>
197212
</main>
198213
<script src="js/charming.min.js"></script>
199214
<script src="js/anime.min.js"></script>

‎index2.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
1414
<link rel="stylesheet" type="text/css" href="css/common.css" />
1515
<link rel="stylesheet" type="text/css" href="css/style2.css" />
16+
<link rel="stylesheet" type="text/css" href="css/pater.css" />
1617
<!--[if IE]>
1718
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
1819
<![endif]--><script>document.documentElement.className = 'js';</script>
@@ -194,6 +195,20 @@ <h3 class="content__title">Better World</h3>
194195
<button class="btn-back" aria-label="Back to the grid view">&crarr;</button>
195196
</div><!-- /content -->
196197
</div>
198+
<div class="pater">
199+
<h3 class="pater__title">Design and development,<br/>all-in-one:</h3>
200+
<div class="pater__hidden">
201+
<p class="pater__description">Design just as you would in Photoshop while Webydo generates clean, semantic code optimized for SEO to help clients rank in search results.</p>
202+
<a href="https://goo.gl/Z3wbtl" class="pater__button">Try It Now</a>
203+
</div>
204+
<span class="pater__sponsor">Sponsored by <strong>Webydo</strong></span>
205+
<div class="pater__effect">
206+
<img src="img/sponsor/ipad1.png" alt="Ipad">
207+
<img src="img/sponsor/ipad2.png" alt="Ipad">
208+
<img src="img/sponsor/ipad3.png" alt="Ipad">
209+
</div>
210+
</div>
211+
<a href="https://goo.gl/Z3wbtl" class="pater-responsive">Sponsored by <strong>Webydo</strong></a>
197212
</main>
198213
<script src="js/charming.min.js"></script>
199214
<script src="js/anime.min.js"></script>

0 commit comments

Comments
 (0)