├── .bowerrc ├── img ├── intro_bg.jpg ├── thumb │ ├── july.jpg │ ├── june.jpg │ ├── may.jpg │ ├── april.jpg │ ├── august.jpg │ ├── january.jpg │ ├── march.jpg │ ├── october.jpg │ ├── december.jpg │ ├── february.jpg │ ├── november.jpg │ └── september.jpg ├── thumbnail.png └── icons │ ├── menu (1).svg │ ├── download.svg │ └── share.svg ├── bower.json ├── .gitignore ├── README.md ├── js └── main.js ├── index.html └── css └── style.css /.bowerrc: -------------------------------------------------------------------------------- 1 | {"directory": "lib"} -------------------------------------------------------------------------------- /img/intro_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansarimofid/calendar-2017/HEAD/img/intro_bg.jpg -------------------------------------------------------------------------------- /img/thumb/july.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansarimofid/calendar-2017/HEAD/img/thumb/july.jpg -------------------------------------------------------------------------------- /img/thumb/june.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansarimofid/calendar-2017/HEAD/img/thumb/june.jpg -------------------------------------------------------------------------------- /img/thumb/may.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansarimofid/calendar-2017/HEAD/img/thumb/may.jpg -------------------------------------------------------------------------------- /img/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansarimofid/calendar-2017/HEAD/img/thumbnail.png -------------------------------------------------------------------------------- /img/thumb/april.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansarimofid/calendar-2017/HEAD/img/thumb/april.jpg -------------------------------------------------------------------------------- /img/thumb/august.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansarimofid/calendar-2017/HEAD/img/thumb/august.jpg -------------------------------------------------------------------------------- /img/thumb/january.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansarimofid/calendar-2017/HEAD/img/thumb/january.jpg -------------------------------------------------------------------------------- /img/thumb/march.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansarimofid/calendar-2017/HEAD/img/thumb/march.jpg -------------------------------------------------------------------------------- /img/thumb/october.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansarimofid/calendar-2017/HEAD/img/thumb/october.jpg -------------------------------------------------------------------------------- /img/thumb/december.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansarimofid/calendar-2017/HEAD/img/thumb/december.jpg -------------------------------------------------------------------------------- /img/thumb/february.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansarimofid/calendar-2017/HEAD/img/thumb/february.jpg -------------------------------------------------------------------------------- /img/thumb/november.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansarimofid/calendar-2017/HEAD/img/thumb/november.jpg -------------------------------------------------------------------------------- /img/thumb/september.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansarimofid/calendar-2017/HEAD/img/thumb/september.jpg -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "calender-2017", 3 | "authors": [ 4 | "ansarimofid " 5 | ], 6 | "description": "", 7 | "main": "index.html", 8 | "license": "MIT", 9 | "homepage": "ansarimofid.in/calender-2017", 10 | "ignore": [ 11 | "**/.*", 12 | "node_modules", 13 | "bower_components", 14 | "/lib", 15 | "test", 16 | "tests" 17 | ], 18 | "dependencies": { 19 | "scrollmagic": "^2.0.5", 20 | "jquery": "^3.1.1", 21 | "normalize-css": "^5.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | 13 | # Directory for instrumented libs generated by jscoverage/JSCover 14 | lib-cov 15 | 16 | # Coverage directory used by tools like istanbul 17 | coverage 18 | 19 | # nyc test coverage 20 | .nyc_output 21 | 22 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 23 | .grunt 24 | 25 | # node-waf configuration 26 | .lock-wscript 27 | 28 | # Compiled binary addons (http://nodejs.org/api/addons.html) 29 | build/Release 30 | 31 | # Dependency directories 32 | node_modules 33 | jspm_packages 34 | 35 | # Optional npm cache directory 36 | .npm 37 | 38 | # Optional REPL history 39 | .node_repl_history 40 | 41 | lib 42 | .idea 43 | -------------------------------------------------------------------------------- /img/icons/menu (1).svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /img/icons/download.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /img/icons/share.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Calendar-2017 2 | The repo contains the source code of the site showcasing the **2017 calendar**. 3 | The calendar is inspired by the color of nature. 4 | The motive of this project was to get better understanding of nature's colors. 5 | 6 | ## Screenshot ([Visit Website](http://ansarimofid.in/calendar-2017/))([Video Preview](https://www.youtube.com/watch?v=rE1pQZWe5Dc)) 7 | 8 | ![Preview](http://i.imgur.com/16tTMRe.gif) 9 | 10 | ##Downloads 11 | ###January 12 | 13 | ![January](http://ansarimofid.in/calendar-2017/img/thumb/january.jpg) 14 | 15 | [Download](http://imgur.com/download/PiBjI5k) 16 | 17 | 18 | ###February 19 | 20 | ![February](http://ansarimofid.in/calendar-2017/img/thumb/february.jpg) 21 | 22 | [Download](http://imgur.com/download/2hmaO1l) 23 | 24 | 25 | ###March 26 | 27 | ![March](http://ansarimofid.in/calendar-2017/img/thumb/march.jpg) 28 | 29 | [Download](http://imgur.com/download/ZPcvtbV) 30 | 31 | 32 | ###April 33 | 34 | ![April](http://ansarimofid.in/calendar-2017/img/thumb/april.jpg) 35 | 36 | [Download](http://imgur.com/download/ptwpBHm) 37 | 38 | 39 | ###May 40 | 41 | ![May](http://ansarimofid.in/calendar-2017/img/thumb/may.jpg) 42 | 43 | [Download](http://imgur.com/download/YarclSs) 44 | 45 | 46 | ###June 47 | 48 | ![June](http://ansarimofid.in/calendar-2017/img/thumb/june.jpg) 49 | 50 | [Download](http://imgur.com/download/cg05QiZ) 51 | 52 | 53 | ###July 54 | 55 | ![July](http://ansarimofid.in/calendar-2017/img/thumb/july.jpg) 56 | 57 | [Download](http://imgur.com/download/XvV1YZs) 58 | 59 | 60 | ###August 61 | 62 | ![August](http://ansarimofid.in/calendar-2017/img/thumb/august.jpg) 63 | 64 | [Download](http://imgur.com/download/sKTz5IBV) 65 | 66 | 67 | ###September 68 | 69 | ![September](http://ansarimofid.in/calendar-2017/img/thumb/september.jpg) 70 | 71 | [Download](http://imgur.com/download/pvfJchZ) 72 | 73 | 74 | ###October 75 | 76 | ![October](http://ansarimofid.in/calendar-2017/img/thumb/october.jpg) 77 | 78 | [Download](http://imgur.com/download/W2tuzJN) 79 | 80 | 81 | ###November 82 | 83 | ![November](http://ansarimofid.in/calendar-2017/img/thumb/november.jpg) 84 | 85 | [Download](http://imgur.com/download/6nfUGUX) 86 | 87 | 88 | ###December 89 | 90 | ![December](http://ansarimofid.in/calendar-2017/img/thumb/december.jpg) 91 | 92 | [Download](http://imgur.com/download/KkHEBfX) 93 | 94 | 95 | ##[Download All](https://drive.google.com/open?id=0B-Fq2nXLB5GNaTVDTHkyZkVZVnc) 96 | 97 | Support by **starring** the project. 98 | 99 | Thank You 100 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by ansarimofid on 12/01/17. 3 | */ 4 | 5 | $(document).ready(function () { 6 | 7 | // Smooth Scroll 8 | $('a[href*="#"]:not([href="#"])').click(function () { 9 | if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 10 | var hash = this.hash; 11 | var target = $(hash); 12 | target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 13 | if (target.length && target.offset().top < $(window).scrollTop()) { 14 | var originalPosition = $(window).scrollTop(); 15 | var newTarget; 16 | $('#id_intro').css('visibility', 'hidden'); 17 | window.scrollTo(0,0); 18 | setTimeout(function(){ 19 | newTarget = $(hash).offset().top; 20 | window.scrollTo(0, originalPosition); 21 | $('#id_intro').css('visibility', 'visible'); 22 | $('html, body').animate({ 23 | scrollTop: newTarget 24 | }, 1000); 25 | },15); 26 | return false; 27 | }else{ 28 | $('html, body').animate({ 29 | scrollTop: target.offset().top 30 | }, 1000); 31 | return false; 32 | } 33 | } 34 | }); 35 | 36 | //Init ScrollMagic 37 | var controller = new ScrollMagic.Controller(); 38 | 39 | 40 | // Intro Page animation 41 | var introPage = new ScrollMagic.Scene({ 42 | triggerElement: '#id_intro', 43 | duration: '30%', 44 | triggerHook: 0 45 | }) 46 | .setPin('#id_intro', {pushFollowers: false}) 47 | .addTo(controller); 48 | 49 | var introPage2 = new ScrollMagic.Scene({ 50 | triggerElement: '#id_page1', 51 | triggerHook: 0.35 52 | }) 53 | .setPin('#id_intro', {pushFollowers: false}) 54 | .addTo(controller); 55 | 56 | // Month Animation 57 | var scene1 = new ScrollMagic.Scene({ 58 | triggerElement: '#id_page1 h1', 59 | duration: '50%', 60 | triggerHook: 0.75 61 | }) 62 | .setClassToggle('#id_page1', 'effect') 63 | .addTo(controller); 64 | 65 | $('.month:not(:last-child)').each(function () { 66 | var monthScene = new ScrollMagic.Scene({ 67 | triggerElement: this, 68 | duration: '67%', 69 | triggerHook: -0.3 70 | }) 71 | .setPin(this, {pushFollowers: false}) 72 | .addTo(controller); 73 | }); 74 | 75 | $('.month').each(function () { 76 | 77 | var monthScene = new ScrollMagic.Scene({ 78 | triggerElement: this, 79 | duration: '147%', 80 | triggerHook: 0.65 81 | }) 82 | .setClassToggle(this, 'in-view-effect') 83 | .addTo(controller); 84 | }); 85 | 86 | // Sidebar Reveal 87 | $('.nav-icon-wrapper').click(function (e) { 88 | var $this = $(this); 89 | 90 | e.preventDefault(); 91 | $this.toggleClass('nav-clicked'); 92 | $this.parent().toggleClass('nav--show') 93 | }); 94 | 95 | // Share Overlay Reveal 96 | $('.share-btn').click(function (e) { 97 | e.preventDefault(); 98 | $(this).closest('.main-wrapper').addClass('share-page--show'); 99 | }); 100 | 101 | // Share Overlay Hide 102 | $('.share-page .close-icon').click(function (e) { 103 | e.preventDefault(); 104 | $(this).closest('.main-wrapper').removeClass('share-page--show'); 105 | }) 106 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Calendar 2017 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 30 | 31 |
32 | 33 | 34 |
35 | 61 |
62 | 63 | 64 |
65 |
66 |
2017
67 |
CALENDAR
68 |
Inspired by the color of nature 70 |
71 |
72 |
Scroll to reveal 74 |
75 |
76 | 77 | 78 | 79 | 80 |
81 |
82 |
83 |
JANUARY
84 | January 85 |
86 |
87 | 90 | 91 | download-btn 92 | 93 |
94 |
95 |
96 | 97 | 98 |
99 |
100 |
101 |
February
102 | February 103 |
104 |
105 | 108 | 109 | download-btn 110 | 111 |
112 |
113 |
114 | 115 | 116 |
117 |
118 |
119 |
March
120 | March 121 |
122 |
123 | 126 | 127 | download-btn 128 | 129 |
130 |
131 |
132 | 133 | 134 |
135 |
136 |
137 |
April
138 | April 139 |
140 |
141 | 144 | 145 | download-btn 146 | 147 |
148 |
149 |
150 | 151 | 152 |
153 |
154 |
155 |
May
156 | May 157 |
158 |
159 | 162 | 163 | download-btn 164 | 165 |
166 |
167 |
168 | 169 | 170 |
171 |
172 |
173 |
June
174 | June 175 |
176 |
177 | 180 | 181 | download-btn 182 | 183 |
184 |
185 |
186 | 187 | 188 |
189 |
190 |
191 |
July
192 | July 193 |
194 |
195 | 198 | 199 | download-btn 200 | 201 |
202 |
203 |
204 | 205 | 206 |
207 |
208 |
209 |
August
210 | August 211 |
212 |
213 | 216 | 217 | download-btn 218 | 219 |
220 |
221 |
222 | 223 | 224 |
225 |
226 |
227 |
September
228 | September 229 |
230 |
231 | 234 | 235 | download-btn 236 | 237 |
238 |
239 |
240 | 241 | 242 |
243 |
244 |
245 |
October
246 | October 247 |
248 |
249 | 252 | 253 | download-btn 254 | 255 |
256 |
257 |
258 | 259 | 260 |
261 |
262 |
263 |
November
264 | November 265 |
266 |
267 | 270 | 271 | download-btn 272 | 273 |
274 |
275 |
276 | 277 | 278 |
279 |
280 |
281 |
December
282 | December 283 |
284 |
285 | 288 | 289 | download-btn 290 | 291 |
292 |
293 |
294 | 295 | 296 | 315 | 316 | 317 | 375 |
376 | 377 | 378 | 379 | 383 | 384 | 385 | 386 | 387 | 396 | 397 | 413 | 414 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /*Author: ansarimofid(ansarimofid@gmail.com)*/ 2 | 3 | /*Genearal Style*/ 4 | html { 5 | font-size: 10px; 6 | } 7 | 8 | body { 9 | font-size: 1.4rem; 10 | font-family: 'Tenor Sans', sans-serif; 11 | letter-spacing: 4px; 12 | } 13 | 14 | a { 15 | color: inherit; 16 | text-decoration: none; 17 | } 18 | 19 | .main-wrapper { 20 | overflow: hidden; 21 | } 22 | 23 | /*Helper classes*/ 24 | 25 | .ff-archivo { 26 | font-family: 'Archivo Black', sans-serif; 27 | } 28 | 29 | .ff-tenor { 30 | font-family: 'Tenor Sans', sans-serif; 31 | } 32 | 33 | .white-space { 34 | display: block; 35 | width: 100%; 36 | } 37 | 38 | .space-sm { 39 | padding: 15px 0; 40 | } 41 | 42 | .space-mini { 43 | padding: 8px 0; 44 | } 45 | 46 | .space-xsm { 47 | padding: 5px 0; 48 | } 49 | 50 | .space-md { 51 | padding: 30px 0; 52 | } 53 | 54 | .space-lg { 55 | padding: 45px 0; 56 | } 57 | 58 | .full-page { 59 | min-height: 100vh; 60 | min-width: 100vw; 61 | } 62 | 63 | .text-deco-underline { 64 | text-decoration: underline; 65 | } 66 | 67 | .text-align-center { 68 | text-align: center; 69 | } 70 | 71 | .text-color-white { 72 | color: white; 73 | } 74 | 75 | .text-color-black { 76 | color: black; 77 | } 78 | 79 | .text-color-grey-67 { 80 | color: #434343; 81 | } 82 | 83 | .text-color-grey-189 { 84 | color: #BDBDBD !important; 85 | } 86 | 87 | .text-color-grey-158 { 88 | color: #9e9e9e !important; 89 | } 90 | 91 | .text-color-primary { 92 | color: #F1A744 !important; 93 | } 94 | 95 | .bg-color-red { 96 | background-color: red; 97 | } 98 | 99 | .bg-color-blue { 100 | background-color: blue; 101 | } 102 | 103 | .bg-color-grey-67 { 104 | background-color: #434343; 105 | } 106 | 107 | .bg-color-primary { 108 | background-color: #F1A744 !important; 109 | } 110 | 111 | .margin-t-xsm { 112 | margin-top: 4px; 113 | } 114 | 115 | .margin-l-sm { 116 | margin-left: 4px; 117 | } 118 | 119 | .margin-l-md { 120 | margin-left: 16px; 121 | } 122 | 123 | .margin-b-sm { 124 | margin-bottom: 8px; 125 | } 126 | 127 | .margin-t-10x { 128 | margin-top: 10rem; 129 | } 130 | 131 | .padding-l-2x { 132 | padding-left: 2rem; 133 | } 134 | 135 | .padding-r-2x { 136 | padding-right: 2rem; 137 | } 138 | 139 | .center-align { 140 | display: -webkit-box; 141 | display: -ms-flexbox; 142 | display: flex; 143 | -webkit-box-pack: center; 144 | -ms-flex-pack: center; 145 | justify-content: center; 146 | -webkit-box-align: center; 147 | -ms-flex-align: center; 148 | align-items: center; 149 | } 150 | 151 | .bg-cover { 152 | background-size: cover; 153 | background-position: center; 154 | } 155 | 156 | .flex-d-c { 157 | -webkit-box-orient: vertical; 158 | -webkit-box-direction: normal; 159 | -ms-flex-direction: column; 160 | flex-direction: column; 161 | } 162 | 163 | .flex-d-r { 164 | -webkit-box-orient: horizontal; 165 | -webkit-box-direction: normal; 166 | -ms-flex-direction: row; 167 | flex-direction: row; 168 | } 169 | 170 | .text-s-5x { 171 | font-size: 5rem; 172 | } 173 | 174 | .text-s-4x { 175 | font-size: 4rem; 176 | } 177 | 178 | .text-s-10x { 179 | font-size: 10rem; 180 | } 181 | 182 | .text-ls-1x { 183 | letter-spacing: 1rem; 184 | } 185 | 186 | .flex-row { 187 | display: -webkit-box; 188 | display: -ms-flexbox; 189 | display: flex; 190 | -webkit-box-orient: horizontal; 191 | -webkit-box-direction: normal; 192 | -ms-flex-direction: row; 193 | flex-direction: row; 194 | } 195 | 196 | .col-ver-align { 197 | -webkit-box-align: center; 198 | -ms-flex-align: center; 199 | align-items: center; 200 | } 201 | 202 | .d-inline-flex { 203 | display: -webkit-inline-box !important; 204 | display: -ms-inline-flexbox !important; 205 | display: inline-flex !important; 206 | } 207 | 208 | .container { 209 | max-width: 960px; 210 | margin-left: auto; 211 | margin-right: auto; 212 | } 213 | 214 | .list-style-reset { 215 | list-style: none; 216 | padding: inherit; 217 | padding: 0; 218 | } 219 | 220 | .list-style-inline li { 221 | display: inline-block; 222 | } 223 | 224 | .flex-row .col-3-md { 225 | width: 33%; 226 | padding-left: 1rem; 227 | padding-right: 1rem; 228 | } 229 | 230 | .seperator:after { 231 | content: "/"; 232 | } 233 | 234 | .translate-100 { 235 | -webkit-transform: translateY(1000px); 236 | transform: translateY(1000px); 237 | } 238 | 239 | /*Action Button*/ 240 | .action-btn { 241 | background-color: white; 242 | border-radius: 50%; 243 | padding: 10px; 244 | width: 30px; 245 | height: 30px; 246 | margin: 1rem; 247 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.50); 248 | cursor: pointer; 249 | } 250 | 251 | .page1 h1 { 252 | text-transform: capitalize; 253 | letter-spacing: 10px; 254 | color: black; 255 | -webkit-transform: translateX(-500px); 256 | transform: translateX(-500px); 257 | -webkit-transition: all 2s; 258 | transition: all 2s; 259 | opacity: 0; 260 | } 261 | 262 | .page1.effect { 263 | background-color: orange; 264 | } 265 | 266 | .page1.effect h1 { 267 | -webkit-transform: translateX(0); 268 | transform: translateX(0); 269 | opacity: 1; 270 | } 271 | 272 | /*Intro Page*/ 273 | 274 | .intro { 275 | background-image: -webkit-linear-gradient(top, rgba(241, 167, 68, 0.85) 0%, rgba(67, 67, 67, 0.85) 100%), url("../img/intro_bg.jpg"); 276 | background-image: linear-gradient(-180deg, rgba(241, 167, 68, 0.85) 0%, rgba(67, 67, 67, 0.85) 100%), url("../img/intro_bg.jpg"); 277 | background-color: bisque; 278 | color: brown; 279 | -webkit-transition: background-color 1s; 280 | transition: background-color 1s; 281 | } 282 | 283 | .intro.effect { 284 | background-color: #ffa181; 285 | } 286 | 287 | .text-2017 { 288 | font-size: 15rem; 289 | } 290 | 291 | /*Month section style*/ 292 | 293 | .month .action-btn { 294 | opacity: 0; 295 | -webkit-transform: translateY(-50px); 296 | transform: translateY(-50px); 297 | -webkit-transition: 0.3s all; 298 | transition: 0.3s all; 299 | } 300 | 301 | .month.in-view-effect .action-btn { 302 | opacity: 0.7; 303 | -webkit-transform: translateY(0); 304 | transform: translateY(0); 305 | -webkit-transition: all 2s ease-in-out; 306 | transition: all 2s ease-in-out; 307 | } 308 | 309 | .month.in-view-effect .action-btn:hover { 310 | box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.50); 311 | opacity: 1; 312 | -webkit-transition: 0.3s all; 313 | transition: 0.3s all; 314 | } 315 | 316 | .icon-md { 317 | height: 25px; 318 | width: 25px; 319 | } 320 | 321 | .month { 322 | position: relative; 323 | /*transition: all 4s;*/ 324 | } 325 | 326 | .month .month__title { 327 | text-transform: uppercase; 328 | opacity: 0; 329 | -webkit-transform: translateY(100px); 330 | transform: translateY(100px); 331 | -webkit-transition: all 1s; 332 | transition: all 1s; 333 | } 334 | 335 | .month.in-view-effect .month__title { 336 | opacity: 1; 337 | -webkit-transform: translateY(0); 338 | transform: translateY(0); 339 | } 340 | 341 | .month .month__img { 342 | height: 400px; 343 | width: auto; 344 | box-shadow: 0 15px 30px 6px rgba(0, 0, 0, 0.50); 345 | position: relative; 346 | opacity: 0; 347 | -webkit-transform: translateY(100px); 348 | transform: translateY(100px); 349 | -webkit-transition: all 1.5s ease-in-out; 350 | transition: all 1.5s ease-in-out; 351 | -webkit-transition-delay: 0.3s; 352 | transition-delay: 0.3s; 353 | } 354 | 355 | .month.in-view-effect .month__img { 356 | opacity: 1; 357 | -webkit-transform: translateY(0); 358 | transform: translateY(0); 359 | } 360 | 361 | .month.jan { 362 | background-image: -webkit-linear-gradient(bottom, #69001a 0%, #E0C4C7 49%, #EBF1ED 65%, #FFFFFF 100%); 363 | background-image: linear-gradient(0deg, #69001a 0%, #E0C4C7 49%, #EBF1ED 65%, #FFFFFF 100%); 364 | } 365 | 366 | .month.jan .month__title { 367 | color: #b9b9b9; 368 | } 369 | 370 | .month.feb { 371 | background-image: -webkit-linear-gradient(top, #AD7F84 0%, #5E4C96 100%); 372 | background-image: linear-gradient(-180deg, #AD7F84 0%, #5E4C96 100%); 373 | } 374 | 375 | .month.feb .month__title { 376 | color: rgba(15, 6, 53, 0.51); 377 | } 378 | 379 | .month.mar { 380 | background-image: -webkit-linear-gradient(top, #af232b 0%, #EEAC3B 55%, #7E963F 100%); 381 | background-image: linear-gradient(-180deg, #af232b 0%, #EEAC3B 55%, #7E963F 100%); 382 | } 383 | 384 | .month.mar .month__title { 385 | color: rgba(175, 35, 43, 0.8); 386 | } 387 | 388 | .month.apr { 389 | background-image: -webkit-linear-gradient(bottom, #006385 0%, #C095A9 48%, #E4D0C3 100%); 390 | background-image: linear-gradient(0deg, #006385 0%, #C095A9 48%, #E4D0C3 100%); 391 | } 392 | 393 | .month.apr .month__title { 394 | color: rgba(193, 123, 149, 0.71); 395 | } 396 | 397 | .month.may { 398 | background-image: -webkit-linear-gradient(bottom, #008589 0%, #BBBBBB 48%, #ECECEC 100%); 399 | background-image: linear-gradient(0deg, #008589 0%, #BBBBBB 48%, #ECECEC 100%); 400 | } 401 | 402 | .month.may .month__title { 403 | color: rgba(174, 174, 174, 0.8); 404 | } 405 | 406 | .month.jun { 407 | background-image: -webkit-linear-gradient(bottom, #002F3B 0%, #00AEB0 100%); 408 | background-image: linear-gradient(0deg, #002F3B 0%, #00AEB0 100%); 409 | } 410 | 411 | .month.jun .month__title { 412 | color: rgba(0, 93, 100, 0.75); 413 | } 414 | 415 | .month.jul { 416 | background-image: -webkit-linear-gradient(bottom, #017073 8%, #BF7239 52%, #FFBC69 100%); 417 | background-image: linear-gradient(0deg, #017073 8%, #BF7239 52%, #FFBC69 100%); 418 | } 419 | 420 | .month.jul .month__title { 421 | color: rgba(180, 100, 30, 0.8); 422 | } 423 | 424 | .month.aug { 425 | background-image: -webkit-linear-gradient(bottom, #394A55 10%, #AE753D 51%, #FFD293 100%); 426 | background-image: linear-gradient(0deg, #394A55 10%, #AE753D 51%, #FFD293 100%); 427 | } 428 | 429 | .month.aug .month__title { 430 | color: rgba(153, 109, 65, 0.8); 431 | } 432 | 433 | .month.sep { 434 | background-image: -webkit-linear-gradient(bottom, #0E3551 10%, #C76236 54%, #FBC275 100%); 435 | background-image: linear-gradient(0deg, #0E3551 10%, #C76236 54%, #FBC275 100%); 436 | } 437 | 438 | .month.sep .month__title { 439 | color: rgba(168, 90, 59, 0.86); 440 | } 441 | 442 | .month.oct { 443 | background-image: -webkit-linear-gradient(bottom, #DB3301 0%, #A0AF53 49%, #AFECE6 100%); 444 | background-image: linear-gradient(0deg, #DB3301 0%, #A0AF53 49%, #AFECE6 100%); 445 | } 446 | 447 | .month.oct .month__title { 448 | color: rgba(143, 166, 99, 0.75); 449 | } 450 | 451 | .month.nov { 452 | background-image: -webkit-linear-gradient(bottom, rgb(58, 36, 0) 0%, rgb(222, 151, 58) 56%, rgb(253, 227, 130) 100%); 453 | background-image: linear-gradient(0deg, rgb(58, 36, 0) 0%, rgb(222, 151, 58) 56%, rgb(253, 227, 130) 100%); 454 | } 455 | 456 | .month.nov .month__title { 457 | color: rgba(173, 109, 19, 0.81); 458 | } 459 | 460 | .month.dec { 461 | background-image: -webkit-linear-gradient(bottom, #24658A 0%, #D2BDBD 36%, #F3EDEA 100%); 462 | background-image: linear-gradient(0deg, #24658A 0%, #D2BDBD 36%, #F3EDEA 100%); 463 | } 464 | 465 | .month.dec .month__title { 466 | color: rgba(192, 153, 154, 0.76); 467 | } 468 | 469 | /*Footer Style*/ 470 | 471 | .footer-main { 472 | position: relative; 473 | line-height: 1.6; 474 | } 475 | 476 | .column-title { 477 | text-transform: uppercase; 478 | } 479 | 480 | .link-group li:after { 481 | content: '/'; 482 | color: #F1A744; 483 | } 484 | 485 | .link-group li > a, .share-group li > a, .credits-group li > a { 486 | -webkit-transition: 0.5s all; 487 | transition: 0.5s all; 488 | } 489 | 490 | .link-group li > a:hover, .share-group li > a:hover, .credits-group li > a:hover { 491 | color: #BDBDBD; 492 | } 493 | 494 | .footer-main .dwnld-btn a { 495 | color: rgb(158, 158, 158); 496 | -webkit-transition: 0.3s all; 497 | transition: 0.3s all; 498 | } 499 | 500 | .footer-main .dwnld-btn a:hover { 501 | color: rgb(215, 215, 215); 502 | } 503 | 504 | /*Navigation, Sidebar Style*/ 505 | 506 | .nav-icon-wrapper { 507 | position: fixed; 508 | right: 30px; 509 | top: 40px; 510 | z-index: 3; 511 | cursor: pointer; 512 | width: 100px; 513 | height: 50px; 514 | } 515 | 516 | .nav-icon-wrapper .nav-icon { 517 | display: block; 518 | height: 2px; 519 | width: 50px; 520 | background-color: rgb(67, 67, 67); 521 | -webkit-transition: all 0.5s cubic-bezier(0, 0.84, 0.02, 1.06); 522 | transition: all 0.5s cubic-bezier(0, 0.84, 0.02, 1.06); 523 | -webkit-transform: translateY(25px); 524 | transform: translateY(25px); 525 | position: absolute; 526 | left: 18px; 527 | } 528 | 529 | .nav-icon-wrapper .nav-icon:before, .nav-icon-wrapper .nav-icon:after { 530 | content: ""; 531 | display: block; 532 | position: absolute; 533 | height: 2px; 534 | background-color: rgb(67, 67, 67); 535 | } 536 | 537 | .nav-icon-wrapper .nav-icon:before { 538 | width: 65px; 539 | top: -10px; 540 | -webkit-transition: all 0.5s; 541 | transition: all 0.5s; 542 | } 543 | 544 | .nav-icon-wrapper .nav-icon:after { 545 | top: 10px; 546 | width: 35px; 547 | -webkit-transition: all 0.5s; 548 | transition: all 0.5s; 549 | } 550 | 551 | .nav-icon-wrapper:hover .nav-icon:before { 552 | width: 50px; 553 | } 554 | 555 | .nav-icon-wrapper:hover .nav-icon:after { 556 | width: 50px; 557 | } 558 | 559 | .nav-icon-wrapper.nav-clicked .nav-icon { 560 | background-color: transparent; 561 | } 562 | 563 | .nav-icon-wrapper.nav-clicked .nav-icon:before, .nav-icon-wrapper.nav-clicked .nav-icon:after { 564 | width: 50px; 565 | background-color: #F1A744; 566 | -webkit-transform-origin: center; 567 | transform-origin: center; 568 | } 569 | 570 | .nav-icon-wrapper.nav-clicked .nav-icon:before { 571 | -webkit-transform: translateY(10px) rotate(45deg); 572 | transform: translateY(10px) rotate(45deg); 573 | } 574 | 575 | .nav-icon-wrapper.nav-clicked .nav-icon:after { 576 | -webkit-transform: translateY(-10px) rotate(-45deg); 577 | transform: translateY(-10px) rotate(-45deg); 578 | } 579 | 580 | .sidebar-item { 581 | position: fixed; 582 | z-index: 2; 583 | right: 0; 584 | font-size: 2rem; 585 | line-height: 2; 586 | opacity: 0; 587 | -webkit-transition: all 0.2s; 588 | transition: all 0.2s; 589 | } 590 | 591 | nav.nav--show .sidebar-item { 592 | -webkit-transition-delay: 1.5s; 593 | transition-delay: 1.5s; 594 | opacity: 1; 595 | -webkit-transition: all 0.5s cubic-bezier(1, -0.01, 1, -0.11); 596 | transition: all 0.5s cubic-bezier(1, -0.01, 1, -0.11); 597 | } 598 | 599 | .sidebar-item ul { 600 | display: none; 601 | margin: 0; 602 | background-color: #434343; 603 | padding: 2rem 5rem; 604 | width: 280px; 605 | text-transform: uppercase; 606 | height: calc(100vh - 40px); 607 | -webkit-box-orient: vertical; 608 | -webkit-box-direction: normal; 609 | -ms-flex-direction: column; 610 | flex-direction: column; 611 | -ms-flex-pack: distribute; 612 | justify-content: space-around; 613 | } 614 | 615 | nav.nav--show .sidebar-item ul { 616 | display: -webkit-box; 617 | display: -ms-flexbox; 618 | display: flex; 619 | } 620 | 621 | .sidebar-item ul li { 622 | opacity: 0; 623 | -webkit-transition: opacity 0.01s, -webkit-transform 0.5s; 624 | transition: opacity 0.01s, -webkit-transform 0.5s; 625 | transition: opacity 0.01s, transform 0.5s; 626 | transition: opacity 0.01s, transform 0.5s, -webkit-transform 0.5s; 627 | -webkit-transition-delay: 0.5s; 628 | transition-delay: 0.5s; 629 | -webkit-transform: translateX(-50px); 630 | transform: translateX(-50px); 631 | } 632 | 633 | nav.nav--show .sidebar-item ul li { 634 | opacity: 1; 635 | -webkit-transform: translateX(0); 636 | transform: translateX(0); 637 | } 638 | 639 | .sidebar-item ul a { 640 | display: inline-block; 641 | position: relative; 642 | color: rgba(241, 167, 68, 0.85); 643 | } 644 | 645 | .sidebar-item ul a:after { 646 | content: ""; 647 | display: block; 648 | position: absolute; 649 | width: 100%; 650 | height: 2px; 651 | top: 18px; 652 | background-color: rgb(241, 167, 68); 653 | -webkit-transform-origin: left; 654 | transform-origin: left; 655 | -webkit-transform: scaleX(0); 656 | transform: scaleX(0); 657 | -webkit-transition: 0.2s all; 658 | transition: 0.2s all; 659 | } 660 | 661 | .sidebar-item ul a:hover { 662 | -webkit-transition: 0.3s all; 663 | transition: 0.3s all; 664 | color: rgb(241, 167, 68); 665 | } 666 | 667 | .sidebar-item ul a:hover:after { 668 | -webkit-transition: 0.3s all; 669 | transition: 0.3s all; 670 | color: rgb(241, 167, 68); 671 | -webkit-transform: scaleX(1); 672 | transform: scaleX(1); 673 | } 674 | 675 | nav { 676 | position: fixed; 677 | z-index: 1; 678 | } 679 | 680 | .sidebar-reveal-effect { 681 | position: absolute; 682 | height: 100vh; 683 | width: 380px; 684 | -webkit-transition: 0.5s all; 685 | transition: 0.5s all; 686 | /*left: 100%;*/ 687 | -webkit-transform: scaleX(0); 688 | transform: scaleX(0); 689 | left: calc(100vw - 380px); 690 | z-index: 3; 691 | background-image: -webkit-linear-gradient(top, rgba(241, 167, 68, 1) 0%, rgba(67, 67, 67, 1) 100%); 692 | background-image: linear-gradient(-180deg, rgba(241, 167, 68, 1) 0%, rgba(67, 67, 67, 1) 100%); 693 | } 694 | 695 | nav.nav--show .sidebar-reveal-effect { 696 | -webkit-animation: reveal-left 1s ease-in-out 1; 697 | animation: reveal-left 1s ease-in-out 1; 698 | } 699 | 700 | .scroll-indicator { 701 | position: absolute; 702 | bottom: 20px; 703 | width: 100%; 704 | } 705 | 706 | /*Share Page*/ 707 | 708 | .share-page { 709 | display: -webkit-box; 710 | display: -ms-flexbox; 711 | display: flex; 712 | opacity: 0; 713 | position: fixed; 714 | z-index: -1; 715 | top: 0; 716 | background-color: white; 717 | overflow: hidden; 718 | -webkit-transition: all 0.2s; 719 | transition: all 0.2s; 720 | } 721 | 722 | .share-page--show .share-page { 723 | z-index: 4; 724 | display: -webkit-box; 725 | display: -ms-flexbox; 726 | display: flex; 727 | opacity: 1; 728 | -webkit-transition: all 0.5s; 729 | transition: all 0.5s; 730 | } 731 | 732 | .facebook-link { 733 | position: relative; 734 | top: -4px; 735 | } 736 | 737 | /*Close btn style*/ 738 | .close-icon { 739 | display: block; 740 | width: 50px; 741 | height: 50px; 742 | background-color: transparent; 743 | -webkit-transform: translateY(25px); 744 | transform: translateY(25px); 745 | position: absolute; 746 | right: 50px; 747 | top: 40px; 748 | opacity: 0.7; 749 | cursor: pointer; 750 | -webkit-transition: 0.3s opacity; 751 | transition: 0.3s opacity; 752 | } 753 | 754 | .close-icon:hover { 755 | opacity: 1; 756 | } 757 | 758 | .close-icon:before, .close-icon:after { 759 | content: ""; 760 | display: block; 761 | position: absolute; 762 | height: 2px; 763 | background-color: rgb(67, 67, 67); 764 | width: 50px; 765 | -webkit-transform-origin: center; 766 | transform-origin: center; 767 | } 768 | 769 | .close-icon:before { 770 | -webkit-transform: translateY(10px) rotate(45deg); 771 | transform: translateY(10px) rotate(45deg); 772 | } 773 | 774 | .close-icon:after { 775 | -webkit-transform: translateY(10px) rotate(-45deg); 776 | transform: translateY(10px) rotate(-45deg); 777 | } 778 | 779 | @-webkit-keyframes reveal-left { 780 | 0% { 781 | -webkit-transform: scaleX(0); 782 | transform: scaleX(0); 783 | -webkit-transform-origin: left; 784 | transform-origin: left; 785 | /*transform-origin: 0 100% 0;*/ 786 | /*background-color: white;*/ 787 | } 788 | 49% { 789 | /*transform-origin: 100% 50% 0;*/ 790 | -webkit-transform-origin: left; 791 | transform-origin: left; 792 | -webkit-transform: scaleX(1); 793 | transform: scaleX(1); 794 | /*transform-origin: 0 100% 0;*/ 795 | /*background-color: green;*/ 796 | } 797 | 50% { 798 | -webkit-transform: scaleX(1); 799 | transform: scaleX(1); 800 | -webkit-transform-origin: 100% 0 0; 801 | transform-origin: 100% 0 0; 802 | } 803 | 100% { 804 | -webkit-transform: scaleX(0); 805 | transform: scaleX(0); 806 | -webkit-transform-origin: 100% 0 0; 807 | transform-origin: 100% 0 0; 808 | } 809 | /*100%{ 810 | transform: scaleX(0); 811 | transform-origin: 100% 0 0; 812 | }*/ 813 | } 814 | 815 | @keyframes reveal-left { 816 | 0% { 817 | -webkit-transform: scaleX(0); 818 | transform: scaleX(0); 819 | -webkit-transform-origin: left; 820 | transform-origin: left; 821 | /*transform-origin: 0 100% 0;*/ 822 | /*background-color: white;*/ 823 | } 824 | 49% { 825 | /*transform-origin: 100% 50% 0;*/ 826 | -webkit-transform-origin: left; 827 | transform-origin: left; 828 | -webkit-transform: scaleX(1); 829 | transform: scaleX(1); 830 | /*transform-origin: 0 100% 0;*/ 831 | /*background-color: green;*/ 832 | } 833 | 50% { 834 | -webkit-transform: scaleX(1); 835 | transform: scaleX(1); 836 | -webkit-transform-origin: 100% 0 0; 837 | transform-origin: 100% 0 0; 838 | } 839 | 100% { 840 | -webkit-transform: scaleX(0); 841 | transform: scaleX(0); 842 | -webkit-transform-origin: 100% 0 0; 843 | transform-origin: 100% 0 0; 844 | } 845 | /*100%{ 846 | transform: scaleX(0); 847 | transform-origin: 100% 0 0; 848 | }*/ 849 | } 850 | 851 | @media screen and (max-width: 850px) { 852 | .month.in-view-effect .month__img { 853 | width: 100%; 854 | height: auto; 855 | } 856 | 857 | .month { 858 | padding: 0 3rem; 859 | } 860 | 861 | .month .month__title { 862 | font-size: 8rem; 863 | } 864 | 865 | .month > div { 866 | -webkit-box-orient: vertical; 867 | -webkit-box-direction: normal; 868 | -ms-flex-direction: column; 869 | flex-direction: column; 870 | } 871 | 872 | .month .action-btn-group { 873 | margin-top: 2rem; 874 | margin-left: 0; 875 | } 876 | 877 | .month .action-btn-group > a { 878 | display: -webkit-inline-box; 879 | display: -ms-inline-flexbox; 880 | display: inline-flex; 881 | } 882 | 883 | .month .action-btn { 884 | opacity: 0; 885 | -webkit-transform: translateY(125px); 886 | transform: translateY(125px); 887 | -webkit-transition: 0.3s all; 888 | transition: 0.3s all; 889 | } 890 | 891 | .month.in-view-effect .action-btn { 892 | opacity: 0.7; 893 | -webkit-transform: translateY(0); 894 | transform: translateY(0); 895 | -webkit-transition-delay: 0.75s; 896 | transition-delay: 0.75s; 897 | -webkit-transition: all 1.5s ease-in-out; 898 | transition: all 1.5s ease-in-out; 899 | } 900 | } 901 | 902 | /*Sidebar Animation*/ 903 | @media screen and (max-width: 640px) { 904 | .month .month__title { 905 | font-size: 6rem; 906 | } 907 | 908 | .sidebar-item ul { 909 | width: calc(100vw - 200px); 910 | } 911 | 912 | .sidebar-reveal-effect { 913 | width: calc(100vw - 100px); 914 | left: 100px; 915 | } 916 | } --------------------------------------------------------------------------------