diff --git a/task_webDev/Ananya_Mohapatra_2102070007/.vscode/settings.json b/task_webDev/Ananya_Mohapatra_2102070007/.vscode/settings.json new file mode 100644 index 0000000..e624193 --- /dev/null +++ b/task_webDev/Ananya_Mohapatra_2102070007/.vscode/settings.json @@ -0,0 +1,6 @@ +{ + "cSpell.words": [ + "colour", + "I’ve" + ] +} \ No newline at end of file diff --git a/task_webDev/Ananya_Mohapatra_2102070007/css/style.css b/task_webDev/Ananya_Mohapatra_2102070007/css/style.css new file mode 100644 index 0000000..f4dcff9 --- /dev/null +++ b/task_webDev/Ananya_Mohapatra_2102070007/css/style.css @@ -0,0 +1,1644 @@ + +body { + /* color: #797979; + background: #ffffff; */ + font-family: 'Montserrat', sans-serif; + color: var(--text); + background: var(--bg); + transition: background 500ms ease-in-out, color 1000ms ease-in-out; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + color: #414141; +} + +a { + color: #313131; + transition: .3s; +} + +a:hover, +a:active, +a:focus { + color: #820263; + outline: none; + text-decoration: none; +} + +.btn:focus, +.form-control:focus { + box-shadow: none; +} + +.container-fluid { + max-width: 1366px; +} + +.btn { + padding: 12px 25px; + font-size: 14px; + font-weight: 600; + letter-spacing: 1px; + color: #ffffff; + background: #820263; + border: 2px solid transparent; + border-radius: 0; + box-shadow: inset 0 0 0 50px #820263; + transition: ease-out 0.3s; + -webkit-transition: ease-out 0.3s; + -moz-transition: ease-out 0.3s; +} + +.btn:hover { + color: #820263; + background: transparent; + box-shadow: inset 0 0 0 0 #820263; + border-color: #820263; +} + +#loader { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + background: #ffffff; + opacity: 0; + visibility: hidden; + -webkit-transition: opacity .3s ease-out, visibility 0s linear .3s; + -o-transition: opacity .3s ease-out, visibility 0s linear .3s; + transition: opacity .3s ease-out, visibility 0s linear .3s; + z-index: 999; +} + +#loader.show { + -webkit-transition: opacity .6s ease-out, visibility 0s linear 0s; + -o-transition: opacity .6s ease-out, visibility 0s linear 0s; + transition: opacity .6s ease-out, visibility 0s linear 0s; + visibility: visible; + opacity: 1; +} + +#loader .loader { + position: relative; + width: 45px; + height: 45px; + border: 5px solid #dddddd; + border-top: 5px solid #820263; + border-radius: 50%; + -webkit-animation: spin 2s linear infinite; + animation: spin 2s linear infinite; +} + +@-webkit-keyframes spin { + 0% { -webkit-transform: rotate(0deg); } + 100% { -webkit-transform: rotate(360deg); } +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.back-to-top { + position: fixed; + display: none; + width: 44px; + height: 44px; + padding: 8px 0; + text-align: center; + line-height: 1; + font-size: 22px; + right: 15px; + bottom: 15px; + z-index: 9; +} + +.back-to-top i { + color: #ffffff; +} + +.back-to-top:hover i { + color: #414141; +} + + +/**********************************/ +/*********** Nav Bar CSS **********/ +/**********************************/ +.navbar { + position: relative; + transition: .5s; + z-index: 999; +} + +.navbar.nav-sticky { + position: fixed; + top: 0; + width: 100%; + box-shadow: 0 2px 5px rgba(0, 0, 0, .3); +} + +.navbar .navbar-brand { + margin: 0; + font-size: 45px; + line-height: 0px; + font-weight: 700; + letter-spacing: 2px; + transition: .5s; + +} + +.navbar .navbar-brand img { + max-width: 100%; + max-height: 40px; +} + +.navbar .dropdown-menu { + margin-top: 0; + border: 0; + border-radius: 0; + background: #f8f9fa; +} + +@media (min-width: 992px) { + .navbar { + position: absolute; + width: 100%; + padding: 30px 60px; + background: transparent !important; + border-bottom: 1px dashed rgba(256, 256, 256, .2); + z-index: 9; + } + + .navbar.nav-sticky { + padding: 10px 60px; + background: #ffffff !important; + } + + .navbar .navbar-brand { + color: #ffffff; + } + + .navbar.nav-sticky .navbar-brand { + color: #820263; + } + + .navbar-light .navbar-nav .nav-link, + .navbar-light .navbar-nav .nav-link:focus { + padding: 10px 10px 8px 10px; + color: #ffffff; + font-size: 15px; + font-weight: 500; + } + + .navbar-light.nav-sticky .navbar-nav .nav-link, + .navbar-light.nav-sticky .navbar-nav .nav-link:focus { + color: #414141; + } + + .navbar-light .navbar-nav .nav-link:hover, + .navbar-light .navbar-nav .nav-link.active { + color: #111111; + } + + .navbar-light.nav-sticky .navbar-nav .nav-link:hover, + .navbar-light.nav-sticky .navbar-nav .nav-link.active { + color: #820263; + } +} + +@media (max-width: 991.98px) { + .navbar { + padding: 15px; + background: #ffffff !important; + } + + .navbar .navbar-brand { + color: #820263; + } + + .navbar .navbar-nav { + margin-top: 15px; + } + + .navbar a.nav-link { + padding: 5px; + } + + .navbar .dropdown-menu { + box-shadow: none; + } +} + + +/*******************************/ +/********** Hero CSS ***********/ +/*******************************/ +.hero { + position: relative; + width: 100%; + margin-bottom: 45px; + padding: 200px 0 0 0; + overflow: hidden; + background: linear-gradient(#b43093, #820263), url(../img/hero-bg.jpg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} + +.hero .container-fluid { + padding: 0; +} + +.hero .hero-image { + position: relative; + text-align: right; + padding-right: 75px; +} + +.hero .hero-image img { + max-width: 80%; + max-height: 80%; +} + +.hero .hero-content { + position: relative; + padding-left: 75px; + display: flex; + align-items: flex-start; + justify-content: center; + flex-direction: column; +} + +.hero .hero-text p { + color: #ffffff; + font-size: 25px; + font-weight: 600; + margin-bottom: 15px; +} + +.hero .hero-text h1 { + color: #ffffff; + font-size: 60px; + font-weight: 700; + letter-spacing: 3px; + margin-bottom: 15px; +} + +.hero .hero-text h2 { + display: inline-block; + margin: 0; + height: 35px; + color: #ffffff; + font-size: 35px; + font-weight: 600; +} + +.hero .hero-text .typed-text { + display: none; +} + +.hero .hero-text .typed-cursor { + font-size: 35px; + font-weight: 300; + color: #ffffff; +} + +.hero .hero-btn .btn { + margin-top: 35px; + color: #820263; + background: #ffffff; + box-shadow: inset 0 0 0 50px #ffffff; +} + +.hero .hero-btn .btn:hover { + color: #ffffff; + background: transparent; + box-shadow: inset 0 0 0 0 #ffffff; + border-color: #ffffff; +} + +.hero .hero-btn .btn:first-child { + margin-right: 10px; +} + +@media (max-width: 991.98px) { + .hero { + padding-top: 60px; + } + + .hero .hero-content { + padding: 0 15px; + } + + .hero .hero-text p { + font-size: 20px; + } + + .hero .hero-text h1 { + font-size: 45px; + } + + .hero .hero-text h2 { + font-size: 25px; + height: 25px; + } + + .hero .hero-btn .btn { + padding: 12px 30px; + letter-spacing: 1px; + } +} + +@media (max-width: 767.98px) { + .hero { + padding-top: 60px; + padding-bottom: 60px; + } + + .hero, + .hero .hero-text, + .hero .hero-btn { + width: 100%; + text-align: center; + } + + .hero .hero-text p { + font-size: 18px; + } + + .hero .hero-text h1 { + font-size: 35px; + } + + .hero .hero-text h2 { + font-size: 22px; + height: 22px; + } + + .hero .hero-btn .btn { + padding: 10px 15px; + letter-spacing: 1px; + } +} + +@media (max-width: 575.98px) { + .hero .hero-text p { + font-size: 16px; + } + + .hero .hero-text h1 { + font-size: 30px; + } + + .hero .hero-text h2 { + font-size: 18px; + height: 18px; + } + + .hero .hero-btn .btn { + padding: 8px 10px; + letter-spacing: 0; + } +} + + +/*******************************/ +/******* Section Header ********/ +/*******************************/ +.section-header { + position: relative; + margin-bottom: 45px; +} + +.section-header p { + display: inline-block; + margin: 0 30px; + margin-bottom: 10px; + padding-left: 15px; + position: relative; + font-size: 16px; + font-weight: 600; + letter-spacing: 1px; + text-transform: uppercase; + background: #ffffff; +} + +.section-header p::before { + position: absolute; + content: ""; + height: 3px; + top: 11px; + right: 0; + left: -30px; + background: #820263; + z-index: -1; +} + +.section-header p::after { + position: absolute; + content: ""; + width: 3px; + height: 3px; + top: 11px; + left: 3px; + background: #820263; + z-index: 1; +} + +.section-header h2 { + margin: 0; + position: relative; + font-size: 45px; + font-weight: 700; +} + +@media (max-width: 767.98px) { + .section-header h2 { + font-size: 30px; + } +} + + +/*******************************/ +/********** About CSS **********/ +/*******************************/ +.about { + position: relative; + width: 100%; + margin: -45px 0 45px 0; +} + +.about .col-lg-6 { + padding: 0; +} + +.about .section-header { + margin-bottom: 30px; +} + +.about .about-img { + position: relative; + height: 100%; +} + +.about .about-img img { + position: relative; + width: 100%; + height: 100%; + object-fit: cover; +} + +.about .about-content { + padding: 0 60px; +} + +.about .about-text p { + font-size: 16px; +} + +.about .skills { + margin-bottom: 30px; +} + +.about .skill-name { + margin-top: 15px; +} + +.about .skill-name p { + display: inline-block; + margin-bottom: 5px; + font-size: 16px; + font-weight: 400; +} + +.about .skill-name p:last-child { + float: right; +} + +.about .progress { + height: 10px; + border-radius: 10px; + background: #dddddd; +} + +.about .progress .progress-bar { + width: 0px; + background: #820263; + border-radius: 10px; + transition: 2s; +} + +.about .about-text a.btn { + margin-top: 15px; +} + +@media (max-width: 991.98px) { + .about .about-content { + padding: 45px 15px 0 15px; + } +} + + +/*******************************/ +/******* Experience CSS ********/ +/*******************************/ +.experience { + position: relative; + padding: 45px 0 15px 0; +} + +.experience .timeline { + position: relative; + width: 100%; +} + +.experience .timeline::after { + content: ''; + position: absolute; + width: 2px; + background: #820263; + top: 0; + bottom: 0; + left: 50%; + margin-left: -1px; +} + +.experience .timeline .timeline-item { + position: relative; + background: inherit; + width: 50%; + margin-bottom: 30px; +} + +.experience .timeline .timeline-item.left { + left: 0; + padding-right: 30px; +} + +.experience .timeline .timeline-item.right { + left: 50%; + padding-left: 30px; +} + +.experience .timeline .timeline-item::after { + content: ''; + position: absolute; + width: 16px; + height: 16px; + top: 48px; + right: -8px; + background: #ffffff; + border: 2px solid #820263; + border-radius: 16px; + z-index: 1; +} + +.experience .timeline .timeline-item.right::after { + left: -8px; +} + +.experience .timeline .timeline-item::before { + content: ''; + position: absolute; + width: 0; + height: 0; + top: 46px; + right: 10px; + z-index: 1; + border: 10px solid; + border-color: transparent transparent transparent #dddddd; +} + +.experience .timeline .timeline-item.right::before { + left: 10px; + border-color: transparent #dddddd transparent transparent; +} + +.experience .timeline .timeline-date { + position: absolute; + width: 100%; + top: 44px; + font-size: 16px; + font-weight: 600; + color: #820263; + text-transform: uppercase; + letter-spacing: 1px; + z-index: 1; +} + +.experience .timeline .timeline-item.left .timeline-date { + text-align: left; + left: calc(100% + 55px); +} + +.experience .timeline .timeline-item.right .timeline-date { + text-align: right; + right: calc(100% + 55px); +} + +.experience .timeline .timeline-text { + padding: 30px; + background: #ffffff; + position: relative; + border-right: 5px solid #dddddd; + box-shadow: 0 0 60px rgba(0, 0, 0, .08); +} + +.experience .timeline .timeline-item.right .timeline-text { + border-right: none; + border-left: 5px solid #dddddd; +} + +.experience .timeline .timeline-text h2 { + margin: 0 0 5px 0; + font-size: 22px; + font-weight: 600; +} + +.experience .timeline .timeline-text h4 { + margin: 0 0 10px 0; + font-size: 16px; + font-style: italic; + font-weight: 400; +} + +.experience .timeline .timeline-text p { + margin: 0; + font-size: 16px; +} + +@media (max-width: 767.98px) { + .experience .timeline::after { + left: 8px; + } + + .experience .timeline .timeline-item { + width: 100%; + padding-left: 38px; + } + + .experience .timeline .timeline-item.left { + padding-right: 0; + } + + .experience .timeline .timeline-item.right { + left: 0%; + padding-left: 38px; + } + + .experience .timeline .timeline-item.left::after, + .experience .timeline .timeline-item.right::after { + left: 0; + } + + .experience .timeline .timeline-item.left::before, + .experience .timeline .timeline-item.right::before { + left: 18px; + border-color: transparent #dddddd transparent transparent; + } + + .experience .timeline .timeline-item.left .timeline-date, + .experience .timeline .timeline-item.right .timeline-date { + position: relative; + top: 0; + right: auto; + left: 0; + text-align: left; + margin-bottom: 10px; + } + + .experience .timeline .timeline-item.left .timeline-text, + .experience .timeline .timeline-item.right .timeline-text { + border-right: none; + border-left: 5px solid #dddddd; + } +} + + +/*******************************/ +/********* Service CSS *********/ +/*******************************/ +.service { + position: relative; + width: 100%; + padding: 45px 0 15px 0; +} + +.service .service-item { + position: relative; + margin-bottom: 30px; + display: flex; + align-items: center; + box-shadow: inset 0 0 0 0 transparent; + transition: ease-out 0.5s; +} + +.service .service-item:hover { + box-shadow: inset 800px 0 0 0 #820263; +} + +.service .service-icon { + position: relative; + width: 150px; + min-height: 150px; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid #820263; + background: #ffffff; +} + +.service .service-icon i { + position: relative; + font-size: 60px; + color: #820263; + transition: .3s; +} + +.service .service-item:hover i { + font-size: 75px; +} + +.service .service-text { + position: relative; + width: calc(100% - 120px); + padding: 0 30px; +} + +.service .service-text h3 { + margin-bottom: 10px; + font-size: 20px; + font-weight: 600; + transition: 1s; +} + +.service .service-text p { + margin: 0; + font-size: 16px; + transition: 1s; +} + +.service .service-item:hover .service-text h3, +.service .service-item:hover .service-text p { + color: #ffffff; +} + +@media (max-width: 575.98px) { + .service .service-text h3 { + font-size: 16px; + margin-bottom: 5px; + } + + .service .service-text p { + font-size: 14px; + } +} + + +/*******************************/ +/******** Portfolio CSS ********/ +/*******************************/ +.portfolio { + position: relative; + padding: 45px 0 15px 0; +} + +.portfolio #portfolio-filter { + padding: 0; + margin: -15px 0 25px 0; + list-style: none; + font-size: 0; + text-align: center; +} + +.portfolio #portfolio-filter li { + cursor: pointer; + display: inline-block; + margin: 5px; + padding: 6px 12px; + font-size: 14px; + font-weight: 600; + color: #ffffff; + background: #820263; + border: 2px solid transparent; + border-radius: 0; + box-shadow: inset 0 0 0 50px #820263; + transition: ease-out 0.3s; + -webkit-transition: ease-out 0.3s; + -moz-transition: ease-out 0.3s; +} + +.portfolio #portfolio-filter li:hover, +.portfolio #portfolio-filter li.filter-active { + color: #820263; + background: transparent; + box-shadow: inset 0 0 0 0 #820263; + border-color: #820263; +} + +.portfolio .portfolio-item { + position: relative; +} + +.portfolio .portfolio-wrap { + position: relative; + width: 100%; +} + +.portfolio .portfolio-img { + position: relative; + overflow: hidden; +} + +.portfolio .portfolio-img img { + position: relative; + width: 100%; + height: 100%; + object-fit: cover; + transform: scale(1.1); + transition: .5s; +} + +.portfolio .portfolio-item:hover img { + margin-left: 15px; +} + +.portfolio .portfolio-text { + position: relative; + height: 60px; + width: calc(100% - 30px); + margin: -30px 15px 30px 15px; + display: flex; + align-items: center; + background: #ffffff; + box-shadow: 0 0 15px rgba(0, 0, 0, .12); +} + +.portfolio .portfolio-text h3 { + width: calc(100% - 70px); + font-size: 18px; + font-weight: 600; + margin: 0 0 0 15px; + white-space: nowrap; + overflow: hidden; +} + +.portfolio .portfolio-text a.btn { + width: 50px; + height: 50px; + padding: 0 0 2px 1px; + display: flex; + align-items: center; + justify-content: center; + font-size: 45px; + font-weight: 100; +} + +.portfolio .portfolio-item:hover a.btn { + color: #820263; + background: transparent; + box-shadow: inset 0 0 0 0 #820263; + border-color: #820263; +} + + +/*******************************/ +/********* Banner CSS **********/ +/*******************************/ +.banner { + position: relative; + width: 100%; + margin: 45px 0; + padding: 90px 0; + background: #820263; +} + +.banner .container { + max-width: 750px; + text-align: center; +} + +.banner .section-header { + margin-bottom: 20px; +} + +.banner .section-header p { + color: #e2e2e2; + background: transparent; +} + +.banner .section-header p::after { + display: none; +} + +.banner .section-header h2 { + color: #ffffff; +} + +.banner .section-header h2 span { + color: #414141; + font-size: 50px; +} + +.banner .banner-text p { + font-size: 18px; + color: #ffffff; +} + +.banner .banner-text .btn { + margin-top: 15px; + color: #820263; + background: #ffffff; + box-shadow: inset 0 0 0 50px #ffffff; +} + +.banner .banner-text .btn:hover { + color: #ffffff; + background: transparent; + box-shadow: inset 0 0 0 0 #ffffff; + border-color: #ffffff; +} + + +/*******************************/ +/********* Pricing CSS *********/ +/*******************************/ +.price { + position: relative; + width: 100%; + padding: 45px 0 15px 0; +} + +.price .row { + padding: 0 15px; +} + +.price .col-md-4 { + padding: 0; +} + +.price .price-item { + position: relative; + margin-bottom: 30px; + background: #ffffff; +} + +.price .featured-item { + box-shadow: 0 0 30px rgba(0, 0, 0, .2); + z-index: 1; +} + +.price .price-header, +.price .price-body, +.price .price-footer { + position: relative; + text-align: center; +} + +.price .price-header { + padding: 45px 0 30px 0; + color: #414141; +} + +.price .price-item.featured-item .price-header { + color: #820263; +} + +.price .price-title h2 { + font-size: 25px; + font-weight: 400; + text-transform: uppercase; +} + +.price .price-prices h2 { + font-size: 45px; + font-weight: 700; + margin-left: 10px; +} + +.price .price-prices h2 small { + position: absolute; + font-size: 18px; + font-weight: 400; + margin-top: 9px; + margin-left: -12px; +} + +.price .price-prices h2 span { + margin-left: 1px; + font-size: 18px; + font-weight: 400; +} + +.price .price-item.featured-item h2 { + color: #820263; +} + +.price .price-body { + padding: 0 0 20px 0; +} + +.price .price-description ul { + margin: 0; + padding: 0; + list-style: none; +} + +.price .price-description ul li { + padding: 0 0 20px 0; +} + +.price .price-item .price-action { + padding-bottom: 45px; +} + +.price .price-item .price-action .btn { + color: #ffffff; + background: #414141; + box-shadow: inset 0 0 0 50px #414141; +} + +.price .price-item .price-action .btn:hover { + color: #414141; + background: transparent; + box-shadow: inset 0 0 0 0 #414141; + border-color: #414141; +} + +.price .price-item.featured-item .price-action .btn { + color: #ffffff; + background: #820263; + box-shadow: inset 0 0 0 50px #820263; +} + +.price .price-item.featured-item .price-action .btn:hover { + color: #820263; + background: transparent; + box-shadow: inset 0 0 0 0 #820263; + border-color: #820263; +} + + +/*******************************/ +/*********** Team CSS **********/ +/*******************************/ +.team { + position: relative; + width: 100%; + padding: 45px 0 15px 0; +} + +.team .team-item { + position: relative; + background: #ffffff; + margin-bottom: 30px; + display: flex; + align-items: center; + justify-content: flex-start; + box-shadow: inset 0 0 0 0 transparent; + transition: ease-out 0.5s; +} + +.team .team-img { + position: relative; + width: 50%; + overflow: hidden; +} + +.team .team-img img { + position: relative; + width: 100%; + transition: .5s; +} + +.team .team-text { + position: relative; + width: 50%; + padding: 0 30px; +} + +.team .team-text h2 { + color: #820263; + font-size: 18px; + font-weight: 600; + margin-bottom: 5px; + transition: 1s; +} + +.team .team-text h4 { + font-size: 14px; + font-weight: 600; + margin-bottom: 15px; + transition: 1s; +} + +.team .team-text p { + margin-bottom: 20px; + transition: 1s; +} + +.team .team-social { + position: relative; + display: flex; + align-items: center; + justify-content: flex-start; +} + +.team .team-social a.btn { + width: 35px; + height: 35px; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + font-weight: normal; + margin-right: 5px; +} + +.team .team-item:hover { + box-shadow: inset 800px 0 0 0 #820263; +} + +.team .team-item:hover .team-img img { + transform: scale(1.2); +} + +.team .team-item:hover .team-text h2, +.team .team-item:hover .team-text h4, +.team .team-item:hover .team-text p { + color: #ffffff; +} + +.team .team-item:hover .team-social a.btn { + background: #ffffff; +} + +.team .team-item:hover .team-social a.btn:hover { + border-color: #ffffff; +} + +@media(max-width: 575.98px) { + .team .team-text { + padding: 0 15px; + } + + .team .team-text h2 { + font-size: 16px; + margin-bottom: 0; + } + + .team .team-text h4 { + margin-bottom: 5px; + } + + .team .team-text p { + font-size: 14px; + line-height: 18px; + margin-bottom: 10px; + } +} + + +/*******************************/ +/******* Testimonial CSS *******/ +/*******************************/ +.testimonial { + position: relative; + margin: 45px 0; + padding: 90px 0; + background: #820263; +} + +.testimonial .container { + max-width: 900px; +} + +.testimonial .testimonial-icon { + margin-bottom: 45px; + text-align: center; +} + +.testimonial .testimonial-icon i { + font-size: 60px; + color: rgba(256, 256, 256, .5); +} + +.testimonial .testimonial-item { + position: relative; + margin: 0 15px; + text-align: center; +} + +.testimonial .testimonial-img { + position: relative; + margin-bottom: 15px; + z-index: 1; +} + +.testimonial .testimonial-item img { + margin: 0 auto; + width: 120px; + padding: 10px; + border: 5px dotted #ffffff; + border-radius: 100px; +} + +.testimonial .testimonial-text { + position: relative; + margin-top: -70px; + padding: 65px 35px 30px 35px; + text-align: center; + background: #ffffff; + border-radius: 500px; +} + +.testimonial .testimonial-item p { + font-size: 18px; + font-style: italic; +} + +.testimonial .testimonial-text h3 { + color: #820263; + font-size: 18px; + font-weight: 600; + margin-bottom: 10px; +} + +.testimonial .testimonial-text h4 { + color: #666666; + font-size: 14px; + margin-bottom: 0; +} + +.testimonial .owl-dots { + margin-top: 15px; + text-align: center; +} + +.testimonial .owl-dot { + display: inline-block; + margin: 0 5px; + width: 12px; + height: 12px; + border-radius: 50%; + background: rgba(256, 256, 256, .5); +} + +.testimonial .owl-dot.active { + background: #ffffff; +} + + +/*******************************/ +/********* Contact CSS *********/ +/*******************************/ +.contact { + position: relative; + width: 100%; + margin: 45px 0; + background: #820263; +} + +.contact .container-fluid { + background: url(../img/contact.jpg) left center no-repeat; + background-size: contain; +} + +.contact .contact-form { + position: relative; + padding: 90px 0 90px 45px; + background: #820263; +} + +.contact .contact-form input { + color: #ffffff; + padding: 15px 0; + background: none; + border-radius: 0; + border: none; + border-bottom: 1px solid rgba(256, 256, 256, .5); +} + +.contact .contact-form textarea { + color: #ffffff; + height: 90px; + padding: 15px 0; + background: none; + border-radius: 0; + border: none; + border-bottom: 1px solid rgba(256, 256, 256, .5); +} + +.contact .contact-form .form-control::placeholder { + color: #ffffff; + opacity: 1; +} + +.contact .contact-form .form-control:-ms-input-placeholder, +.contact .contact-form .form-control::-ms-input-placeholder { + color: #ffffff; +} + +.contact .contact-form .btn { + margin-top: 35px; + color: #820263; + background: #ffffff; + box-shadow: inset 0 0 0 50px #ffffff; +} + +.contact .contact-form .btn:hover { + color: #ffffff; + background: transparent; + box-shadow: inset 0 0 0 0 #ffffff; + border-color: #ffffff; +} + +.contact .help-block ul { + margin: 0; + padding: 0; + list-style-type: none; + font-size: 14px; + font-style: italic; + color: #ffffff; +} + +@media (max-width: 767.98px) { + .contact .container-fluid { + background: none; + } + + .contact .contact-form { + padding: 90px 0; + } +} + + +/*******************************/ +/*********** Blog CSS **********/ +/*******************************/ +.blog { + position: relative; + width: 100%; + padding: 45px 0 15px 0; +} + +.blog .blog-item { + position: relative; + margin-bottom: 30px; +} + +.blog .blog-img { + position: relative; + width: 100%; + overflow: hidden; +} + +.blog .blog-img img { + width: 100%; + transition: .5s; +} + +.blog .blog-item:hover img { + transform: scale(1.1); +} + +.blog .blog-text { + position: relative; + padding: 30px; + border-right: 1px solid rgba(0, 0, 0, .07); + border-bottom: 1px solid rgba(0, 0, 0, .07); + border-left: 1px solid rgba(0, 0, 0, .07); +} + +.blog .blog-text h2 { + font-size: 25px; + font-weight: 600; +} + +.blog .blog-text p { + margin-bottom: 10px; +} + +.blog .blog-item a.btn { + margin-top: 10px; + padding: 8px 15px; +} + +.blog .blog-item a.btn i { + margin-left: 5px; +} + +.blog .blog-meta { + position: relative; + display: flex; + margin-bottom: 15px; +} + +.blog .blog-meta p { + margin: 0 10px 0 0; + font-size: 13px; +} + +.blog .blog-meta i { + color: #414141; + margin-right: 5px; +} + +.blog .blog-meta p:last-child { + margin: 0; +} + + +/*******************************/ +/********* Footer CSS **********/ +/*******************************/ +.footer { + position: relative; + margin-top: 45px; + background: #820263; +} + +.footer .container-fluid { + padding: 60px 0 0 0; +} + +.footer .footer-info { + position: relative; + width: 100%; + text-align: center; +} + +.footer .footer-info h2 { + margin-bottom: 20px; + font-size: 30px; + font-weight: 700; + color: #ffffff; +} + +.footer .footer-info h3 { + margin-bottom: 25px; + font-size: 22px; + font-weight: 600; + color: #ffffff; +} + +.footer .footer-menu { + width: 100%; + display: flex; + justify-content: center; +} + +.footer .footer-menu p { + color: #ffffff; + font-size: 22px; + font-weight: 600; + line-height: 20px; + padding: 0 15px; + border-right: 1px solid #ffffff; +} + +.footer .footer-menu p:last-child { + border: none; +} + +.footer .footer-social { + position: relative; + margin-top: 15px; +} + +.footer .footer-social a { + display: inline-block; +} + +.footer .footer-social a i { + margin-right: 15px; + font-size: 20px; + color: #ffffff; + transition: .3s; +} + +.footer .footer-social a:last-child i { + margin: 0; +} + +.footer .footer-social a:hover i { + color: #414141; +} + +.footer .copyright { + position: relative; + text-align: center; + margin-top: 30px; + padding-top: 25px; + padding-bottom: 25px; +} + +.footer .copyright::before { + position: absolute; + content: ""; + width: 50%; + height: 1px; + top: 0; + left: 25%; + background: rgba(256, 256, 256, .2); +} + +.footer .copyright p { + margin: 0; + color: #ffffff; +} + +.footer .copyright .col-md-6:last-child p { + text-align: right; +} + +.footer .copyright p a { + color: #ffffff; + font-weight: 600; +} + +.footer .copyright p a:hover { + color: #414141; +} + +@media (max-width: 575.98px) { + .footer .footer-info h2 { + margin-bottom: 20px; + font-size: 20px; + font-weight: 600; + } + + .footer .footer-info h3 { + margin-bottom: 20px; + font-size: 16px; + } + + .footer .footer-menu p { + font-size: 16px; + line-height: 16px; + padding: 0 5px; + } +} + + +.dropdown { + position: absolute; + width: 500px; + opacity: 0; + z-index: 2; + background: var(--bg-dropdown); + border-top: 2px solid var(--border-color); + + border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; + + display: flex; + align-items: center; + justify-content: space-around; + height: 3rem; + margin-top: 2rem; + padding: 0.5rem; + + box-shadow: rgba(2, 8, 20, 0.1) 0px 0.175em 0.5em; + transform: translateX(-40%); + + transition: opacity .15s ease-out; +} + + +.has-dropdown:focus-within .dropdown { + opacity: 1; + pointer-events: auto; +} + + +.dropdown-item a { + width: 100%; + height: 100%; + size: 0.7rem; + padding-left: 10px; + font-weight: bold; +} + +.dropdown-item a::before { + content: ' '; + border: 2px solid var(--border-color); + border-radius: 50%; + width: 2rem; + height: 2rem; + display: inline-block; + vertical-align: middle; + margin-right: 10px; +} + diff --git a/task_webDev/Ananya_Mohapatra_2102070007/img/about.jpg b/task_webDev/Ananya_Mohapatra_2102070007/img/about.jpg new file mode 100644 index 0000000..954e315 Binary files /dev/null and b/task_webDev/Ananya_Mohapatra_2102070007/img/about.jpg differ diff --git a/task_webDev/Ananya_Mohapatra_2102070007/img/blog-1.jpg b/task_webDev/Ananya_Mohapatra_2102070007/img/blog-1.jpg new file mode 100644 index 0000000..cc5f526 Binary files /dev/null and b/task_webDev/Ananya_Mohapatra_2102070007/img/blog-1.jpg differ diff --git a/task_webDev/Ananya_Mohapatra_2102070007/img/blog-2.jpg b/task_webDev/Ananya_Mohapatra_2102070007/img/blog-2.jpg new file mode 100644 index 0000000..1dc8ad2 Binary files /dev/null and b/task_webDev/Ananya_Mohapatra_2102070007/img/blog-2.jpg differ diff --git a/task_webDev/Ananya_Mohapatra_2102070007/img/contact.jpg b/task_webDev/Ananya_Mohapatra_2102070007/img/contact.jpg new file mode 100644 index 0000000..c8bb629 Binary files /dev/null and b/task_webDev/Ananya_Mohapatra_2102070007/img/contact.jpg differ diff --git a/task_webDev/Ananya_Mohapatra_2102070007/img/enigma.jpg b/task_webDev/Ananya_Mohapatra_2102070007/img/enigma.jpg new file mode 100644 index 0000000..8ead4c6 Binary files /dev/null and b/task_webDev/Ananya_Mohapatra_2102070007/img/enigma.jpg differ diff --git a/task_webDev/Ananya_Mohapatra_2102070007/img/hero-bg.jpg b/task_webDev/Ananya_Mohapatra_2102070007/img/hero-bg.jpg new file mode 100644 index 0000000..5601c64 Binary files /dev/null and b/task_webDev/Ananya_Mohapatra_2102070007/img/hero-bg.jpg differ diff --git a/task_webDev/Ananya_Mohapatra_2102070007/img/hero.jpg b/task_webDev/Ananya_Mohapatra_2102070007/img/hero.jpg new file mode 100644 index 0000000..8788cef Binary files /dev/null and b/task_webDev/Ananya_Mohapatra_2102070007/img/hero.jpg differ diff --git a/task_webDev/Ananya_Mohapatra_2102070007/img/iic.jpg b/task_webDev/Ananya_Mohapatra_2102070007/img/iic.jpg new file mode 100644 index 0000000..e6445ae Binary files /dev/null and b/task_webDev/Ananya_Mohapatra_2102070007/img/iic.jpg differ diff --git a/task_webDev/Ananya_Mohapatra_2102070007/img/portfolio-1.jpg b/task_webDev/Ananya_Mohapatra_2102070007/img/portfolio-1.jpg new file mode 100644 index 0000000..d466676 Binary files /dev/null and b/task_webDev/Ananya_Mohapatra_2102070007/img/portfolio-1.jpg differ diff --git a/task_webDev/Ananya_Mohapatra_2102070007/img/portfolio-2.jpg b/task_webDev/Ananya_Mohapatra_2102070007/img/portfolio-2.jpg new file mode 100644 index 0000000..4a4cf60 Binary files /dev/null and b/task_webDev/Ananya_Mohapatra_2102070007/img/portfolio-2.jpg differ diff --git a/task_webDev/Ananya_Mohapatra_2102070007/img/portfolio-3.jpg b/task_webDev/Ananya_Mohapatra_2102070007/img/portfolio-3.jpg new file mode 100644 index 0000000..f953474 Binary files /dev/null and b/task_webDev/Ananya_Mohapatra_2102070007/img/portfolio-3.jpg differ diff --git a/task_webDev/Ananya_Mohapatra_2102070007/img/portfolio-4.jpg b/task_webDev/Ananya_Mohapatra_2102070007/img/portfolio-4.jpg new file mode 100644 index 0000000..cbd3d29 Binary files /dev/null and b/task_webDev/Ananya_Mohapatra_2102070007/img/portfolio-4.jpg differ diff --git a/task_webDev/Ananya_Mohapatra_2102070007/img/portfolio-5.jpg b/task_webDev/Ananya_Mohapatra_2102070007/img/portfolio-5.jpg new file mode 100644 index 0000000..caf49bd Binary files /dev/null and b/task_webDev/Ananya_Mohapatra_2102070007/img/portfolio-5.jpg differ diff --git a/task_webDev/Ananya_Mohapatra_2102070007/img/portfolio-6.jpg b/task_webDev/Ananya_Mohapatra_2102070007/img/portfolio-6.jpg new file mode 100644 index 0000000..71028a6 Binary files /dev/null and b/task_webDev/Ananya_Mohapatra_2102070007/img/portfolio-6.jpg differ diff --git a/task_webDev/Ananya_Mohapatra_2102070007/img/team-1.jpg b/task_webDev/Ananya_Mohapatra_2102070007/img/team-1.jpg new file mode 100644 index 0000000..0e54c7d Binary files /dev/null and b/task_webDev/Ananya_Mohapatra_2102070007/img/team-1.jpg differ diff --git a/task_webDev/Ananya_Mohapatra_2102070007/img/team-3.jpg b/task_webDev/Ananya_Mohapatra_2102070007/img/team-3.jpg new file mode 100644 index 0000000..0edf5f5 Binary files /dev/null and b/task_webDev/Ananya_Mohapatra_2102070007/img/team-3.jpg differ diff --git a/task_webDev/Ananya_Mohapatra_2102070007/img/team-4.jpg b/task_webDev/Ananya_Mohapatra_2102070007/img/team-4.jpg new file mode 100644 index 0000000..417e41a Binary files /dev/null and b/task_webDev/Ananya_Mohapatra_2102070007/img/team-4.jpg differ diff --git a/task_webDev/Ananya_Mohapatra_2102070007/img/vission.jpg b/task_webDev/Ananya_Mohapatra_2102070007/img/vission.jpg new file mode 100644 index 0000000..0f5cf64 Binary files /dev/null and b/task_webDev/Ananya_Mohapatra_2102070007/img/vission.jpg differ diff --git a/task_webDev/Ananya_Mohapatra_2102070007/index.html b/task_webDev/Ananya_Mohapatra_2102070007/index.html new file mode 100644 index 0000000..ee72b08 --- /dev/null +++ b/task_webDev/Ananya_Mohapatra_2102070007/index.html @@ -0,0 +1,766 @@ + + + + + Ananya's Portfolio + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+

I am

+

Ananya Mohapatra

+

+
Front End Developer, Ethical Hacker, Content Writer
+
+ +
+
+
+
+ Hero Image +
+
+
+
+
+ + + + +
+
+
+
+
+ Image +
+
+
+
+
+

Technical

+

Skills

+
+
+

I'm extremely passionate about learning and expanding my existing knowledge in the tech-field especially in web development and cybersecurity.

+
+
+
+

HTML5

95%

+
+
+
+
+
+

CSS3

87%

+
+
+
+
+
+

Javascript

80%

+
+
+
+
+
+

Firebase

80%

+
+
+
+
+
+

Bootstrap

75%

+
+
+
+
+
+

JQuery

70%

+
+
+
+
+
+

C

95%

+
+
+
+
+
+

C++

90%

+
+
+
+
+
+

Python

75%

+
+
+
+
+
+

Cybersecurity

45%

+
+
+
+
+
+

PHP

35%

+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+

Technical

+

Web Projects

+
+
+
+
+
+ +
+
+

Image Slider

+

+ Infinite image slider with hover effect designed using HTML, CSS and Javascript +

+
+
+
+
+
+
+ +
+
+

Photo Gallery

+

Fully responsive photo gallery designed using basics of HTML and CSS +

+
+
+
+
+
+
+ +
+
+

Resume

+

Professional resume containing all information regarding my background and skill-set using HTML and CSS

+
+
+
+
+
+
+ +
+
+

Personal Portfolio

+

Detailed description about me using HTML, CSS, Javascript

+
+
+
+
+
+
+ + + + +
+
+
+

My Background

+

Education

+
+
+
+
+
2005 - 2019
+

High School (10th) - CBSE

+

D.A.V Public School Pokhariput

+

Passed in 2019 by securing 491 out of 500 (98.20%)

+
+
+
+
+
2019 - 2021
+

Senior Secondary (12th) - CBSE

+

D.A.V Public School Pokhariput

+

Passed in 2021 by securing 483 out of 500 (96.60%)

+
+
+
+
+
2021 - present
+

Bachelor in Technology

+

Veer Surendra Sai University of Technology, Burla, Odisha

+

In the branch of Electronics & Telecommunication

+
+
+
+
+
+ + + + + + + + + +
+
+
+

Art Section

+

Drawings and Photographs

+
+
+
+
    +
  • All
  • +
  • Photos
  • +
  • Portraits
  • +
  • Cartoons
  • +
+
+
+
+
+
+
+ Image +
+
+

Rudimentary Bud

+ + +
+
+
+
+
+
+ Image +
+
+

Justin Beiber

+ + +
+
+
+
+
+
+ Image +
+
+

Laughing man

+ + +
+
+
+
+
+
+ Image +
+
+

Blooming flower

+ + +
+
+
+
+
+
+ Image +
+
+

Woman

+ + +
+
+
+
+
+
+ Image +
+
+

Uncle on the way

+ + +
+
+
+
+
+
+ + + + + + + + + +
+
+
+

My Published

+

Write-Ups

+
+
+
+
+
+
+

Collection of stories

+
+
+

Blessed Bliss

+
+
+
+
+
    +
  • Unforgettable Joy of Life
  • +
+
+
+ +
+
+
+ +
+
+
+
+
+

Poetry Anthology

+
+
+

A Head Full of Dreams

+
+
+
+
+
    +
  • The lost Library
  • +
+
+
+ +
+
+
+
+
+ + + + +
+
+
+ +
+ +
+
+ + + + +
+
+
+

Some of Best

+

Novels Read

+
+
+
+
+
+ Image +
+
+

A man called Ove

+

Fredrik Backman

+

Heartwarming story of a grumpy old man,Ove, ultimately finding the purpose of life

+
+
+
+ +
+
+
+ Image +
+
+

The Book Thief

+

Markus Zusak

+

Life of Liesel Meminger, the little book thief, being narrated by Death itself.

+
+
+
+
+
+
+
+ Image +
+
+

The Midnight Library

+

Matt Haig

+

Vision of a library existing as you are hanging somewhere between life and death

+
+
+
+
+
+ + + + + + +
+
+
+
+
+
+
+
+
+
+ +

+
+
+ +

+
+
+ +

+
+
+ +

+
+
+ +
+
+
+
+
+
+
+
+ + + + +
+
+
+

Self-composed

+

Poetry

+
+
+
+
+
+ Blog +
+
+

Utopia

+

With you
+ I want to be biased.
+ I want you to understand
+ My uncanny love for books.
+ The attachment I’ve developed
+ Over these years.
+ I want you to resonate with my feelings.
+ I want you to listen while I get crazy
+ Talking about my favorite troupe.
+ I want you to watch me skim through shelves
+ For hours, touching and feeling each page.
+ I want you to be patient with me
+ Listen me blabbering about the foolishness of the character.
+ I want you to hold my hands in silence
+ As I mourn the death of my dear protagonist.
+ I want you to read those long texts I send
+ Explaining my zeal when her long loved crush proposes her.
+ I want you to tell me over and again
+ “You look happier and sparkle around books”.
+ I want you to lay with me on the grass
+ As I read you a humorous fiction.
+ I want us to laugh through the book together
+ Lying under the shade of the maple.
+ Maybe forever is an illusion
+ I want us to be together for our little infinity.
+

+
+
+
+
+
+
+ Blog +
+
+

Do you?

+

Do you wait for my messages like I do
+ Even though I know you would never text first.
+
+ Do you note the colour of my shirts
+ Or wish us wearing the same someday.
+
+ Do you look for the chance to lock eyes
+ Even for once, even for a second.
+
+ Do you get butterflies when I smile
+ The way I do, electric and genuine.
+
+ Do you open our chats and re-read them
+ To relive the thrill, smiles and emotions.
+
+ Do you notice the little things I say,
+ The way I know your constant emojis.
+
+ Do you feel shivers when I'm close
+ I do, is it infatuation or budding love?
+ +

+
+
+
+
+
+
+ + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + diff --git a/task_webDev/Ananya_Mohapatra_2102070007/js/main.js b/task_webDev/Ananya_Mohapatra_2102070007/js/main.js new file mode 100644 index 0000000..9adea3f --- /dev/null +++ b/task_webDev/Ananya_Mohapatra_2102070007/js/main.js @@ -0,0 +1,109 @@ +(function ($) { + "use strict"; + + // loader + var loader = function () { + setTimeout(function () { + if ($('#loader').length > 0) { + $('#loader').removeClass('show'); + } + }, 1); + }; + loader(); + + + // Initiate the wowjs + new WOW().init(); + + + // Back to top button + $(window).scroll(function () { + if ($(this).scrollTop() > 200) { + $('.back-to-top').fadeIn('slow'); + } else { + $('.back-to-top').fadeOut('slow'); + } + }); + $('.back-to-top').click(function () { + $('html, body').animate({scrollTop: 0}, 1500, 'easeInOutExpo'); + return false; + }); + + + // Sticky Navbar + $(window).scroll(function () { + if ($(this).scrollTop() > 0) { + $('.navbar').addClass('nav-sticky'); + } else { + $('.navbar').removeClass('nav-sticky'); + } + }); + + + // Smooth scrolling on the navbar links + $(".navbar-nav a").on('click', function (event) { + if (this.hash !== "") { + event.preventDefault(); + + $('html, body').animate({ + scrollTop: $(this.hash).offset().top - 45 + }, 1500, 'easeInOutExpo'); + + if ($(this).parents('.navbar-nav').length) { + $('.navbar-nav .active').removeClass('active'); + $(this).closest('a').addClass('active'); + } + } + }); + + + // Typed Initiate + if ($('.hero .hero-text h2').length == 1) { + var typed_strings = $('.hero .hero-text .typed-text').text(); + var typed = new Typed('.hero .hero-text h2', { + strings: typed_strings.split(', '), + typeSpeed: 100, + backSpeed: 20, + smartBackspace: false, + loop: true + }); + } + + + // Skills + $('.skills').waypoint(function () { + $('.progress .progress-bar').each(function () { + $(this).css("width", $(this).attr("aria-valuenow") + '%'); + }); + }, {offset: '80%'}); + + + // Testimonials carousel + $(".testimonials-carousel").owlCarousel({ + center: true, + autoplay: true, + dots: true, + loop: true, + responsive: { + 0:{ + items:1 + } + } + }); + + + + // Portfolio filter + var portfolioIsotope = $('.portfolio-container').isotope({ + itemSelector: '.portfolio-item', + layoutMode: 'fitRows' + }); + + $('#portfolio-filter li').on('click', function () { + $("#portfolio-filter li").removeClass('filter-active'); + $(this).addClass('filter-active'); + portfolioIsotope.isotope({filter: $(this).data('filter')}); + }); + +})(jQuery); + diff --git a/task_webDev/Ananya_Mohapatra_2102070007/lib/animate/animate.css b/task_webDev/Ananya_Mohapatra_2102070007/lib/animate/animate.css new file mode 100644 index 0000000..1e79e03 --- /dev/null +++ b/task_webDev/Ananya_Mohapatra_2102070007/lib/animate/animate.css @@ -0,0 +1,1579 @@ +@charset "UTF-8"; + +/*! + * animate.css -http://daneden.me/animate + * Version - 3.5.2 + * Licensed under the MIT license - http://opensource.org/licenses/MIT + * + * Copyright (c) 2017 Daniel Eden + */ + +.animated { + animation-duration: 1s; + animation-fill-mode: both; +} + +.animated.infinite { + animation-iteration-count: infinite; +} + +.animated.hinge { + animation-duration: 2s; +} + +.animated.flipOutX, +.animated.flipOutY, +.animated.bounceIn, +.animated.bounceOut { + animation-duration: .75s; +} + +@keyframes bounce { + from, 20%, 53%, 80%, to { + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transform: translate3d(0,0,0); + } + + 40%, 43% { + animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transform: translate3d(0, -30px, 0); + } + + 70% { + animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + transform: translate3d(0, -15px, 0); + } + + 90% { + transform: translate3d(0,-4px,0); + } +} + +.bounce { + animation-name: bounce; + transform-origin: center bottom; +} + +@keyframes flash { + from, 50%, to { + opacity: 1; + } + + 25%, 75% { + opacity: 0; + } +} + +.flash { + animation-name: flash; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@keyframes pulse { + from { + transform: scale3d(1, 1, 1); + } + + 50% { + transform: scale3d(1.05, 1.05, 1.05); + } + + to { + transform: scale3d(1, 1, 1); + } +} + +.pulse { + animation-name: pulse; +} + +@keyframes rubberBand { + from { + transform: scale3d(1, 1, 1); + } + + 30% { + transform: scale3d(1.25, 0.75, 1); + } + + 40% { + transform: scale3d(0.75, 1.25, 1); + } + + 50% { + transform: scale3d(1.15, 0.85, 1); + } + + 65% { + transform: scale3d(.95, 1.05, 1); + } + + 75% { + transform: scale3d(1.05, .95, 1); + } + + to { + transform: scale3d(1, 1, 1); + } +} + +.rubberBand { + animation-name: rubberBand; +} + +@keyframes shake { + from, to { + transform: translate3d(0, 0, 0); + } + + 10%, 30%, 50%, 70%, 90% { + transform: translate3d(-10px, 0, 0); + } + + 20%, 40%, 60%, 80% { + transform: translate3d(10px, 0, 0); + } +} + +.shake { + animation-name: shake; +} + +@keyframes headShake { + 0% { + transform: translateX(0); + } + + 6.5% { + transform: translateX(-6px) rotateY(-9deg); + } + + 18.5% { + transform: translateX(5px) rotateY(7deg); + } + + 31.5% { + transform: translateX(-3px) rotateY(-5deg); + } + + 43.5% { + transform: translateX(2px) rotateY(3deg); + } + + 50% { + transform: translateX(0); + } +} + +.headShake { + animation-timing-function: ease-in-out; + animation-name: headShake; +} + +@keyframes swing { + 20% { + transform: rotate3d(0, 0, 1, 15deg); + } + + 40% { + transform: rotate3d(0, 0, 1, -10deg); + } + + 60% { + transform: rotate3d(0, 0, 1, 5deg); + } + + 80% { + transform: rotate3d(0, 0, 1, -5deg); + } + + to { + transform: rotate3d(0, 0, 1, 0deg); + } +} + +.swing { + transform-origin: top center; + animation-name: swing; +} + +@keyframes tada { + from { + transform: scale3d(1, 1, 1); + } + + 10%, 20% { + transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); + } + + 30%, 50%, 70%, 90% { + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + } + + 40%, 60%, 80% { + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + } + + to { + transform: scale3d(1, 1, 1); + } +} + +.tada { + animation-name: tada; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@keyframes wobble { + from { + transform: none; + } + + 15% { + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + } + + 30% { + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + } + + 45% { + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + } + + 60% { + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + } + + 75% { + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + } + + to { + transform: none; + } +} + +.wobble { + animation-name: wobble; +} + +@keyframes jello { + from, 11.1%, to { + transform: none; + } + + 22.2% { + transform: skewX(-12.5deg) skewY(-12.5deg); + } + + 33.3% { + transform: skewX(6.25deg) skewY(6.25deg); + } + + 44.4% { + transform: skewX(-3.125deg) skewY(-3.125deg); + } + + 55.5% { + transform: skewX(1.5625deg) skewY(1.5625deg); + } + + 66.6% { + transform: skewX(-0.78125deg) skewY(-0.78125deg); + } + + 77.7% { + transform: skewX(0.390625deg) skewY(0.390625deg); + } + + 88.8% { + transform: skewX(-0.1953125deg) skewY(-0.1953125deg); + } +} + +.jello { + animation-name: jello; + transform-origin: center; +} + +@keyframes bounceIn { + from, 20%, 40%, 60%, 80%, to { + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + transform: scale3d(.3, .3, .3); + } + + 20% { + transform: scale3d(1.1, 1.1, 1.1); + } + + 40% { + transform: scale3d(.9, .9, .9); + } + + 60% { + opacity: 1; + transform: scale3d(1.03, 1.03, 1.03); + } + + 80% { + transform: scale3d(.97, .97, .97); + } + + to { + opacity: 1; + transform: scale3d(1, 1, 1); + } +} + +.bounceIn { + animation-name: bounceIn; +} + +@keyframes bounceInDown { + from, 60%, 75%, 90%, to { + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + transform: translate3d(0, -3000px, 0); + } + + 60% { + opacity: 1; + transform: translate3d(0, 25px, 0); + } + + 75% { + transform: translate3d(0, -10px, 0); + } + + 90% { + transform: translate3d(0, 5px, 0); + } + + to { + transform: none; + } +} + +.bounceInDown { + animation-name: bounceInDown; +} + +@keyframes bounceInLeft { + from, 60%, 75%, 90%, to { + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + transform: translate3d(-3000px, 0, 0); + } + + 60% { + opacity: 1; + transform: translate3d(25px, 0, 0); + } + + 75% { + transform: translate3d(-10px, 0, 0); + } + + 90% { + transform: translate3d(5px, 0, 0); + } + + to { + transform: none; + } +} + +.bounceInLeft { + animation-name: bounceInLeft; +} + +@keyframes bounceInRight { + from, 60%, 75%, 90%, to { + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + from { + opacity: 0; + transform: translate3d(3000px, 0, 0); + } + + 60% { + opacity: 1; + transform: translate3d(-25px, 0, 0); + } + + 75% { + transform: translate3d(10px, 0, 0); + } + + 90% { + transform: translate3d(-5px, 0, 0); + } + + to { + transform: none; + } +} + +.bounceInRight { + animation-name: bounceInRight; +} + +@keyframes bounceInUp { + from, 60%, 75%, 90%, to { + animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + from { + opacity: 0; + transform: translate3d(0, 3000px, 0); + } + + 60% { + opacity: 1; + transform: translate3d(0, -20px, 0); + } + + 75% { + transform: translate3d(0, 10px, 0); + } + + 90% { + transform: translate3d(0, -5px, 0); + } + + to { + transform: translate3d(0, 0, 0); + } +} + +.bounceInUp { + animation-name: bounceInUp; +} + +@keyframes bounceOut { + 20% { + transform: scale3d(.9, .9, .9); + } + + 50%, 55% { + opacity: 1; + transform: scale3d(1.1, 1.1, 1.1); + } + + to { + opacity: 0; + transform: scale3d(.3, .3, .3); + } +} + +.bounceOut { + animation-name: bounceOut; +} + +@keyframes bounceOutDown { + 20% { + transform: translate3d(0, 10px, 0); + } + + 40%, 45% { + opacity: 1; + transform: translate3d(0, -20px, 0); + } + + to { + opacity: 0; + transform: translate3d(0, 2000px, 0); + } +} + +.bounceOutDown { + animation-name: bounceOutDown; +} + +@keyframes bounceOutLeft { + 20% { + opacity: 1; + transform: translate3d(20px, 0, 0); + } + + to { + opacity: 0; + transform: translate3d(-2000px, 0, 0); + } +} + +.bounceOutLeft { + animation-name: bounceOutLeft; +} + +@keyframes bounceOutRight { + 20% { + opacity: 1; + transform: translate3d(-20px, 0, 0); + } + + to { + opacity: 0; + transform: translate3d(2000px, 0, 0); + } +} + +.bounceOutRight { + animation-name: bounceOutRight; +} + +@keyframes bounceOutUp { + 20% { + transform: translate3d(0, -10px, 0); + } + + 40%, 45% { + opacity: 1; + transform: translate3d(0, 20px, 0); + } + + to { + opacity: 0; + transform: translate3d(0, -2000px, 0); + } +} + +.bounceOutUp { + animation-name: bounceOutUp; +} + +@keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +.fadeIn { + animation-name: fadeIn; +} + +@keyframes fadeInDown { + from { + opacity: 0; + transform: translate3d(0, -100%, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +.fadeInDown { + animation-name: fadeInDown; +} + +@keyframes fadeInDownBig { + from { + opacity: 0; + transform: translate3d(0, -2000px, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +.fadeInDownBig { + animation-name: fadeInDownBig; +} + +@keyframes fadeInLeft { + from { + opacity: 0; + transform: translate3d(-100%, 0, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +.fadeInLeft { + animation-name: fadeInLeft; +} + +@keyframes fadeInLeftBig { + from { + opacity: 0; + transform: translate3d(-2000px, 0, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +.fadeInLeftBig { + animation-name: fadeInLeftBig; +} + +@keyframes fadeInRight { + from { + opacity: 0; + transform: translate3d(100%, 0, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +.fadeInRight { + animation-name: fadeInRight; +} + +@keyframes fadeInRightBig { + from { + opacity: 0; + transform: translate3d(2000px, 0, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +.fadeInRightBig { + animation-name: fadeInRightBig; +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translate3d(0, 100%, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +.fadeInUp { + animation-name: fadeInUp; +} + +@keyframes fadeInUpBig { + from { + opacity: 0; + transform: translate3d(0, 2000px, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +.fadeInUpBig { + animation-name: fadeInUpBig; +} + +@keyframes fadeOut { + from { + opacity: 1; + } + + to { + opacity: 0; + } +} + +.fadeOut { + animation-name: fadeOut; +} + +@keyframes fadeOutDown { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(0, 100%, 0); + } +} + +.fadeOutDown { + animation-name: fadeOutDown; +} + +@keyframes fadeOutDownBig { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(0, 2000px, 0); + } +} + +.fadeOutDownBig { + animation-name: fadeOutDownBig; +} + +@keyframes fadeOutLeft { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(-100%, 0, 0); + } +} + +.fadeOutLeft { + animation-name: fadeOutLeft; +} + +@keyframes fadeOutLeftBig { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(-2000px, 0, 0); + } +} + +.fadeOutLeftBig { + animation-name: fadeOutLeftBig; +} + +@keyframes fadeOutRight { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(100%, 0, 0); + } +} + +.fadeOutRight { + animation-name: fadeOutRight; +} + +@keyframes fadeOutRightBig { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(2000px, 0, 0); + } +} + +.fadeOutRightBig { + animation-name: fadeOutRightBig; +} + +@keyframes fadeOutUp { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(0, -100%, 0); + } +} + +.fadeOutUp { + animation-name: fadeOutUp; +} + +@keyframes fadeOutUpBig { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(0, -2000px, 0); + } +} + +.fadeOutUpBig { + animation-name: fadeOutUpBig; +} + +@keyframes flip { + from { + transform: perspective(400px) rotate3d(0, 1, 0, -360deg); + animation-timing-function: ease-out; + } + + 40% { + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); + animation-timing-function: ease-out; + } + + 50% { + transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); + animation-timing-function: ease-in; + } + + 80% { + transform: perspective(400px) scale3d(.95, .95, .95); + animation-timing-function: ease-in; + } + + to { + transform: perspective(400px); + animation-timing-function: ease-in; + } +} + +.animated.flip { + -webkit-backface-visibility: visible; + backface-visibility: visible; + animation-name: flip; +} + +@keyframes flipInX { + from { + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + animation-timing-function: ease-in; + opacity: 0; + } + + 40% { + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + animation-timing-function: ease-in; + } + + 60% { + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + opacity: 1; + } + + 80% { + transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + } + + to { + transform: perspective(400px); + } +} + +.flipInX { + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + animation-name: flipInX; +} + +@keyframes flipInY { + from { + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + animation-timing-function: ease-in; + opacity: 0; + } + + 40% { + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + animation-timing-function: ease-in; + } + + 60% { + transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + opacity: 1; + } + + 80% { + transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + } + + to { + transform: perspective(400px); + } +} + +.flipInY { + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + animation-name: flipInY; +} + +@keyframes flipOutX { + from { + transform: perspective(400px); + } + + 30% { + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + opacity: 1; + } + + to { + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + opacity: 0; + } +} + +.flipOutX { + animation-name: flipOutX; + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; +} + +@keyframes flipOutY { + from { + transform: perspective(400px); + } + + 30% { + transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + opacity: 1; + } + + to { + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + opacity: 0; + } +} + +.flipOutY { + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + animation-name: flipOutY; +} + +@keyframes lightSpeedIn { + from { + transform: translate3d(100%, 0, 0) skewX(-30deg); + opacity: 0; + } + + 60% { + transform: skewX(20deg); + opacity: 1; + } + + 80% { + transform: skewX(-5deg); + opacity: 1; + } + + to { + transform: none; + opacity: 1; + } +} + +.lightSpeedIn { + animation-name: lightSpeedIn; + animation-timing-function: ease-out; +} + +@keyframes lightSpeedOut { + from { + opacity: 1; + } + + to { + transform: translate3d(100%, 0, 0) skewX(30deg); + opacity: 0; + } +} + +.lightSpeedOut { + animation-name: lightSpeedOut; + animation-timing-function: ease-in; +} + +@keyframes rotateIn { + from { + transform-origin: center; + transform: rotate3d(0, 0, 1, -200deg); + opacity: 0; + } + + to { + transform-origin: center; + transform: none; + opacity: 1; + } +} + +.rotateIn { + animation-name: rotateIn; +} + +@keyframes rotateInDownLeft { + from { + transform-origin: left bottom; + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } + + to { + transform-origin: left bottom; + transform: none; + opacity: 1; + } +} + +.rotateInDownLeft { + animation-name: rotateInDownLeft; +} + +@keyframes rotateInDownRight { + from { + transform-origin: right bottom; + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + + to { + transform-origin: right bottom; + transform: none; + opacity: 1; + } +} + +.rotateInDownRight { + animation-name: rotateInDownRight; +} + +@keyframes rotateInUpLeft { + from { + transform-origin: left bottom; + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + + to { + transform-origin: left bottom; + transform: none; + opacity: 1; + } +} + +.rotateInUpLeft { + animation-name: rotateInUpLeft; +} + +@keyframes rotateInUpRight { + from { + transform-origin: right bottom; + transform: rotate3d(0, 0, 1, -90deg); + opacity: 0; + } + + to { + transform-origin: right bottom; + transform: none; + opacity: 1; + } +} + +.rotateInUpRight { + animation-name: rotateInUpRight; +} + +@keyframes rotateOut { + from { + transform-origin: center; + opacity: 1; + } + + to { + transform-origin: center; + transform: rotate3d(0, 0, 1, 200deg); + opacity: 0; + } +} + +.rotateOut { + animation-name: rotateOut; +} + +@keyframes rotateOutDownLeft { + from { + transform-origin: left bottom; + opacity: 1; + } + + to { + transform-origin: left bottom; + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } +} + +.rotateOutDownLeft { + animation-name: rotateOutDownLeft; +} + +@keyframes rotateOutDownRight { + from { + transform-origin: right bottom; + opacity: 1; + } + + to { + transform-origin: right bottom; + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } +} + +.rotateOutDownRight { + animation-name: rotateOutDownRight; +} + +@keyframes rotateOutUpLeft { + from { + transform-origin: left bottom; + opacity: 1; + } + + to { + transform-origin: left bottom; + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } +} + +.rotateOutUpLeft { + animation-name: rotateOutUpLeft; +} + +@keyframes rotateOutUpRight { + from { + transform-origin: right bottom; + opacity: 1; + } + + to { + transform-origin: right bottom; + transform: rotate3d(0, 0, 1, 90deg); + opacity: 0; + } +} + +.rotateOutUpRight { + animation-name: rotateOutUpRight; +} + +@keyframes hinge { + 0% { + transform-origin: top left; + animation-timing-function: ease-in-out; + } + + 20%, 60% { + transform: rotate3d(0, 0, 1, 80deg); + transform-origin: top left; + animation-timing-function: ease-in-out; + } + + 40%, 80% { + transform: rotate3d(0, 0, 1, 60deg); + transform-origin: top left; + animation-timing-function: ease-in-out; + opacity: 1; + } + + to { + transform: translate3d(0, 700px, 0); + opacity: 0; + } +} + +.hinge { + animation-name: hinge; +} + +@keyframes jackInTheBox { + from { + opacity: 0; + transform: scale(0.1) rotate(30deg); + transform-origin: center bottom; + } + + 50% { + transform: rotate(-10deg); + } + + 70% { + transform: rotate(3deg); + } + + to { + opacity: 1; + transform: scale(1); + } +} + +.jackInTheBox { + animation-name: jackInTheBox; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@keyframes rollIn { + from { + opacity: 0; + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + } + + to { + opacity: 1; + transform: none; + } +} + +.rollIn { + animation-name: rollIn; +} + +/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ + +@keyframes rollOut { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + } +} + +.rollOut { + animation-name: rollOut; +} + +@keyframes zoomIn { + from { + opacity: 0; + transform: scale3d(.3, .3, .3); + } + + 50% { + opacity: 1; + } +} + +.zoomIn { + animation-name: zoomIn; +} + +@keyframes zoomInDown { + from { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomInDown { + animation-name: zoomInDown; +} + +@keyframes zoomInLeft { + from { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomInLeft { + animation-name: zoomInLeft; +} + +@keyframes zoomInRight { + from { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomInRight { + animation-name: zoomInRight; +} + +@keyframes zoomInUp { + from { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomInUp { + animation-name: zoomInUp; +} + +@keyframes zoomOut { + from { + opacity: 1; + } + + 50% { + opacity: 0; + transform: scale3d(.3, .3, .3); + } + + to { + opacity: 0; + } +} + +.zoomOut { + animation-name: zoomOut; +} + +@keyframes zoomOutDown { + 40% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + to { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); + transform-origin: center bottom; + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomOutDown { + animation-name: zoomOutDown; +} + +@keyframes zoomOutLeft { + 40% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); + } + + to { + opacity: 0; + transform: scale(.1) translate3d(-2000px, 0, 0); + transform-origin: left center; + } +} + +.zoomOutLeft { + animation-name: zoomOutLeft; +} + +@keyframes zoomOutRight { + 40% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); + } + + to { + opacity: 0; + transform: scale(.1) translate3d(2000px, 0, 0); + transform-origin: right center; + } +} + +.zoomOutRight { + animation-name: zoomOutRight; +} + +@keyframes zoomOutUp { + 40% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + to { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + transform-origin: center bottom; + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +.zoomOutUp { + animation-name: zoomOutUp; +} + +@keyframes slideInDown { + from { + transform: translate3d(0, -100%, 0); + visibility: visible; + } + + to { + transform: translate3d(0, 0, 0); + } +} + +.slideInDown { + animation-name: slideInDown; +} + +@keyframes slideInLeft { + from { + transform: translate3d(-100%, 0, 0); + visibility: visible; + } + + to { + transform: translate3d(0, 0, 0); + } +} + +.slideInLeft { + animation-name: slideInLeft; +} + +@keyframes slideInRight { + from { + transform: translate3d(100%, 0, 0); + visibility: visible; + } + + to { + transform: translate3d(0, 0, 0); + } +} + +.slideInRight { + animation-name: slideInRight; +} + +@keyframes slideInUp { + from { + transform: translate3d(0, 100%, 0); + visibility: visible; + } + + to { + transform: translate3d(0, 0, 0); + } +} + +.slideInUp { + animation-name: slideInUp; +} + +@keyframes slideOutDown { + from { + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + transform: translate3d(0, 100%, 0); + } +} + +.slideOutDown { + animation-name: slideOutDown; +} + +@keyframes slideOutLeft { + from { + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + transform: translate3d(-100%, 0, 0); + } +} + +.slideOutLeft { + animation-name: slideOutLeft; +} + +@keyframes slideOutRight { + from { + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + transform: translate3d(100%, 0, 0); + } +} + +.slideOutRight { + animation-name: slideOutRight; +} + +@keyframes slideOutUp { + from { + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + transform: translate3d(0, -100%, 0); + } +} + +.slideOutUp { + animation-name: slideOutUp; +} diff --git a/task_webDev/Ananya_Mohapatra_2102070007/lib/animate/animate.min.css b/task_webDev/Ananya_Mohapatra_2102070007/lib/animate/animate.min.css new file mode 100644 index 0000000..511b52a --- /dev/null +++ b/task_webDev/Ananya_Mohapatra_2102070007/lib/animate/animate.min.css @@ -0,0 +1,11 @@ +@charset "UTF-8"; + +/*! + * animate.css -http://daneden.me/animate + * Version - 3.5.2 + * Licensed under the MIT license - http://opensource.org/licenses/MIT + * + * Copyright (c) 2017 Daniel Eden + */ + +.animated{animation-duration:1s;animation-fill-mode:both}.animated.infinite{animation-iteration-count:infinite}.animated.hinge{animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{animation-duration:.75s}@keyframes bounce{0%,20%,53%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{transform:translate3d(0,-4px,0)}}.bounce{animation-name:bounce;transform-origin:center bottom}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{animation-name:flash}@keyframes pulse{0%{transform:scaleX(1)}50%{transform:scale3d(1.05,1.05,1.05)}to{transform:scaleX(1)}}.pulse{animation-name:pulse}@keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}.rubberBand{animation-name:rubberBand}@keyframes shake{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80%{transform:translate3d(10px,0,0)}}.shake{animation-name:shake}@keyframes headShake{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}.headShake{animation-timing-function:ease-in-out;animation-name:headShake}@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}.swing{transform-origin:top center;animation-name:swing}@keyframes tada{0%{transform:scaleX(1)}10%,20%{transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{transform:scaleX(1)}}.tada{animation-name:tada}@keyframes wobble{0%{transform:none}15%{transform:translate3d(-25%,0,0) rotate(-5deg)}30%{transform:translate3d(20%,0,0) rotate(3deg)}45%{transform:translate3d(-15%,0,0) rotate(-3deg)}60%{transform:translate3d(10%,0,0) rotate(2deg)}75%{transform:translate3d(-5%,0,0) rotate(-1deg)}to{transform:none}}.wobble{animation-name:wobble}@keyframes jello{0%,11.1%,to{transform:none}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{transform:skewX(.390625deg) skewY(.390625deg)}88.8%{transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{animation-name:jello;transform-origin:center}@keyframes bounceIn{0%,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scaleX(1)}}.bounceIn{animation-name:bounceIn}@keyframes bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:none}}.bounceInDown{animation-name:bounceInDown}@keyframes bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}.bounceInLeft{animation-name:bounceInLeft}@keyframes bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}.bounceInRight{animation-name:bounceInRight}@keyframes bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translateZ(0)}}.bounceInUp{animation-name:bounceInUp}@keyframes bounceOut{20%{transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(.3,.3,.3)}}.bounceOut{animation-name:bounceOut}@keyframes bounceOutDown{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}.bounceOutDown{animation-name:bounceOutDown}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}.bounceOutLeft{animation-name:bounceOutLeft}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}.bounceOutRight{animation-name:bounceOutRight}@keyframes bounceOutUp{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}.bounceOutUp{animation-name:bounceOutUp}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{animation-name:fadeIn}@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}.fadeInDown{animation-name:fadeInDown}@keyframes fadeInDownBig{0%{opacity:0;transform:translate3d(0,-2000px,0)}to{opacity:1;transform:none}}.fadeInDownBig{animation-name:fadeInDownBig}@keyframes fadeInLeft{0%{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}.fadeInLeft{animation-name:fadeInLeft}@keyframes fadeInLeftBig{0%{opacity:0;transform:translate3d(-2000px,0,0)}to{opacity:1;transform:none}}.fadeInLeftBig{animation-name:fadeInLeftBig}@keyframes fadeInRight{0%{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}.fadeInRight{animation-name:fadeInRight}@keyframes fadeInRightBig{0%{opacity:0;transform:translate3d(2000px,0,0)}to{opacity:1;transform:none}}.fadeInRightBig{animation-name:fadeInRightBig}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}.fadeInUp{animation-name:fadeInUp}@keyframes fadeInUpBig{0%{opacity:0;transform:translate3d(0,2000px,0)}to{opacity:1;transform:none}}.fadeInUpBig{animation-name:fadeInUpBig}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{animation-name:fadeOut}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;transform:translate3d(0,100%,0)}}.fadeOutDown{animation-name:fadeOutDown}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;transform:translate3d(0,2000px,0)}}.fadeOutDownBig{animation-name:fadeOutDownBig}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0)}}.fadeOutLeft{animation-name:fadeOutLeft}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{animation-name:fadeOutLeftBig}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)}}.fadeOutRight{animation-name:fadeOutRight}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;transform:translate3d(2000px,0,0)}}.fadeOutRightBig{animation-name:fadeOutRightBig}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}.fadeOutUp{animation-name:fadeOutUp}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{animation-name:fadeOutUpBig}@keyframes flip{0%{transform:perspective(400px) rotateY(-1turn);animation-timing-function:ease-out}40%{transform:perspective(400px) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out}50%{transform:perspective(400px) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(.95,.95,.95);animation-timing-function:ease-in}to{transform:perspective(400px);animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;animation-name:flip}@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateX(10deg);opacity:1}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipInX}@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipInY}@keyframes flipOutX{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateX(-20deg);opacity:1}to{transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@keyframes flipOutY{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateY(-15deg);opacity:1}to{transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipOutY}@keyframes lightSpeedIn{0%{transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%{transform:skewX(-5deg);opacity:1}to{transform:none;opacity:1}}.lightSpeedIn{animation-name:lightSpeedIn;animation-timing-function:ease-out}@keyframes lightSpeedOut{0%{opacity:1}to{transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{animation-name:lightSpeedOut;animation-timing-function:ease-in}@keyframes rotateIn{0%{transform-origin:center;transform:rotate(-200deg);opacity:0}to{transform-origin:center;transform:none;opacity:1}}.rotateIn{animation-name:rotateIn}@keyframes rotateInDownLeft{0%{transform-origin:left bottom;transform:rotate(-45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}.rotateInDownLeft{animation-name:rotateInDownLeft}@keyframes rotateInDownRight{0%{transform-origin:right bottom;transform:rotate(45deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}.rotateInDownRight{animation-name:rotateInDownRight}@keyframes rotateInUpLeft{0%{transform-origin:left bottom;transform:rotate(45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}.rotateInUpLeft{animation-name:rotateInUpLeft}@keyframes rotateInUpRight{0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}.rotateInUpRight{animation-name:rotateInUpRight}@keyframes rotateOut{0%{transform-origin:center;opacity:1}to{transform-origin:center;transform:rotate(200deg);opacity:0}}.rotateOut{animation-name:rotateOut}@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{animation-name:rotateOutDownLeft}@keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{animation-name:rotateOutDownRight}@keyframes rotateOutUpLeft{0%{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{animation-name:rotateOutUpLeft}@keyframes rotateOutUpRight{0%{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate(90deg);opacity:0}}.rotateOutUpRight{animation-name:rotateOutUpRight}@keyframes hinge{0%{transform-origin:top left;animation-timing-function:ease-in-out}20%,60%{transform:rotate(80deg);transform-origin:top left;animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);transform-origin:top left;animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0,700px,0);opacity:0}}.hinge{animation-name:hinge}@keyframes jackInTheBox{0%{opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}.jackInTheBox{animation-name:jackInTheBox}@keyframes rollIn{0%{opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;transform:none}}.rollIn{animation-name:rollIn}@keyframes rollOut{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{animation-name:rollOut}@keyframes zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{animation-name:zoomIn}@keyframes zoomInDown{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{animation-name:zoomInDown}@keyframes zoomInLeft{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{animation-name:zoomInLeft}@keyframes zoomInRight{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{animation-name:zoomInRight}@keyframes zoomInUp{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{animation-name:zoomInUp}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{animation-name:zoomOut}@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{animation-name:zoomOutDown}@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(-2000px,0,0);transform-origin:left center}}.zoomOutLeft{animation-name:zoomOutLeft}@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(2000px,0,0);transform-origin:right center}}.zoomOutRight{animation-name:zoomOutRight}@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{animation-name:zoomOutUp}@keyframes slideInDown{0%{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translateZ(0)}}.slideInDown{animation-name:slideInDown}@keyframes slideInLeft{0%{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translateZ(0)}}.slideInLeft{animation-name:slideInLeft}@keyframes slideInRight{0%{transform:translate3d(100%,0,0);visibility:visible}to{transform:translateZ(0)}}.slideInRight{animation-name:slideInRight}@keyframes slideInUp{0%{transform:translate3d(0,100%,0);visibility:visible}to{transform:translateZ(0)}}.slideInUp{animation-name:slideInUp}@keyframes slideOutDown{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,100%,0)}}.slideOutDown{animation-name:slideOutDown}@keyframes slideOutLeft{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(-100%,0,0)}}.slideOutLeft{animation-name:slideOutLeft}@keyframes slideOutRight{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(100%,0,0)}}.slideOutRight{animation-name:slideOutRight}@keyframes slideOutUp{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,-100%,0)}}.slideOutUp{animation-name:slideOutUp} diff --git a/task_webDev/Ananya_Mohapatra_2102070007/lib/easing/easing.js b/task_webDev/Ananya_Mohapatra_2102070007/lib/easing/easing.js new file mode 100644 index 0000000..3b9c776 --- /dev/null +++ b/task_webDev/Ananya_Mohapatra_2102070007/lib/easing/easing.js @@ -0,0 +1,168 @@ +/* + * jQuery Easing v1.4.1 - http://gsgd.co.uk/sandbox/jquery/easing/ + * Open source under the BSD License. + * Copyright © 2008 George McGinley Smith + * All rights reserved. + * https://raw.github.com/gdsmith/jquery-easing/master/LICENSE +*/ + +(function (factory) { + if (typeof define === "function" && define.amd) { + define(['jquery'], function ($) { + return factory($); + }); + } else if (typeof module === "object" && typeof module.exports === "object") { + exports = factory(require('jquery')); + } else { + factory(jQuery); + } +})(function($){ + +// Preserve the original jQuery "swing" easing as "jswing" +if (typeof $.easing !== 'undefined') { + $.easing['jswing'] = $.easing['swing']; +} + +var pow = Math.pow, + sqrt = Math.sqrt, + sin = Math.sin, + cos = Math.cos, + PI = Math.PI, + c1 = 1.70158, + c2 = c1 * 1.525, + c3 = c1 + 1, + c4 = ( 2 * PI ) / 3, + c5 = ( 2 * PI ) / 4.5; + +// x is the fraction of animation progress, in the range 0..1 +function bounceOut(x) { + var n1 = 7.5625, + d1 = 2.75; + if ( x < 1/d1 ) { + return n1*x*x; + } else if ( x < 2/d1 ) { + return n1*(x-=(1.5/d1))*x + .75; + } else if ( x < 2.5/d1 ) { + return n1*(x-=(2.25/d1))*x + .9375; + } else { + return n1*(x-=(2.625/d1))*x + .984375; + } +} + +$.extend( $.easing, +{ + def: 'easeOutQuad', + swing: function (x) { + return $.easing[$.easing.def](x); + }, + easeInQuad: function (x) { + return x * x; + }, + easeOutQuad: function (x) { + return 1 - ( 1 - x ) * ( 1 - x ); + }, + easeInOutQuad: function (x) { + return x < 0.5 ? + 2 * x * x : + 1 - pow( -2 * x + 2, 2 ) / 2; + }, + easeInCubic: function (x) { + return x * x * x; + }, + easeOutCubic: function (x) { + return 1 - pow( 1 - x, 3 ); + }, + easeInOutCubic: function (x) { + return x < 0.5 ? + 4 * x * x * x : + 1 - pow( -2 * x + 2, 3 ) / 2; + }, + easeInQuart: function (x) { + return x * x * x * x; + }, + easeOutQuart: function (x) { + return 1 - pow( 1 - x, 4 ); + }, + easeInOutQuart: function (x) { + return x < 0.5 ? + 8 * x * x * x * x : + 1 - pow( -2 * x + 2, 4 ) / 2; + }, + easeInQuint: function (x) { + return x * x * x * x * x; + }, + easeOutQuint: function (x) { + return 1 - pow( 1 - x, 5 ); + }, + easeInOutQuint: function (x) { + return x < 0.5 ? + 16 * x * x * x * x * x : + 1 - pow( -2 * x + 2, 5 ) / 2; + }, + easeInSine: function (x) { + return 1 - cos( x * PI/2 ); + }, + easeOutSine: function (x) { + return sin( x * PI/2 ); + }, + easeInOutSine: function (x) { + return -( cos( PI * x ) - 1 ) / 2; + }, + easeInExpo: function (x) { + return x === 0 ? 0 : pow( 2, 10 * x - 10 ); + }, + easeOutExpo: function (x) { + return x === 1 ? 1 : 1 - pow( 2, -10 * x ); + }, + easeInOutExpo: function (x) { + return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? + pow( 2, 20 * x - 10 ) / 2 : + ( 2 - pow( 2, -20 * x + 10 ) ) / 2; + }, + easeInCirc: function (x) { + return 1 - sqrt( 1 - pow( x, 2 ) ); + }, + easeOutCirc: function (x) { + return sqrt( 1 - pow( x - 1, 2 ) ); + }, + easeInOutCirc: function (x) { + return x < 0.5 ? + ( 1 - sqrt( 1 - pow( 2 * x, 2 ) ) ) / 2 : + ( sqrt( 1 - pow( -2 * x + 2, 2 ) ) + 1 ) / 2; + }, + easeInElastic: function (x) { + return x === 0 ? 0 : x === 1 ? 1 : + -pow( 2, 10 * x - 10 ) * sin( ( x * 10 - 10.75 ) * c4 ); + }, + easeOutElastic: function (x) { + return x === 0 ? 0 : x === 1 ? 1 : + pow( 2, -10 * x ) * sin( ( x * 10 - 0.75 ) * c4 ) + 1; + }, + easeInOutElastic: function (x) { + return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? + -( pow( 2, 20 * x - 10 ) * sin( ( 20 * x - 11.125 ) * c5 )) / 2 : + pow( 2, -20 * x + 10 ) * sin( ( 20 * x - 11.125 ) * c5 ) / 2 + 1; + }, + easeInBack: function (x) { + return c3 * x * x * x - c1 * x * x; + }, + easeOutBack: function (x) { + return 1 + c3 * pow( x - 1, 3 ) + c1 * pow( x - 1, 2 ); + }, + easeInOutBack: function (x) { + return x < 0.5 ? + ( pow( 2 * x, 2 ) * ( ( c2 + 1 ) * 2 * x - c2 ) ) / 2 : + ( pow( 2 * x - 2, 2 ) *( ( c2 + 1 ) * ( x * 2 - 2 ) + c2 ) + 2 ) / 2; + }, + easeInBounce: function (x) { + return 1 - bounceOut( 1 - x ); + }, + easeOutBounce: bounceOut, + easeInOutBounce: function (x) { + return x < 0.5 ? + ( 1 - bounceOut( 1 - 2 * x ) ) / 2 : + ( 1 + bounceOut( 2 * x - 1 ) ) / 2; + } +}); + +}); diff --git a/task_webDev/Ananya_Mohapatra_2102070007/lib/easing/easing.min.js b/task_webDev/Ananya_Mohapatra_2102070007/lib/easing/easing.min.js new file mode 100644 index 0000000..fc7dae4 --- /dev/null +++ b/task_webDev/Ananya_Mohapatra_2102070007/lib/easing/easing.min.js @@ -0,0 +1 @@ +!function(n){"function"==typeof define&&define.amd?define(["jquery"],function(e){return n(e)}):"object"==typeof module&&"object"==typeof module.exports?exports=n(require("jquery")):n(jQuery)}(function(n){function e(n){var e=7.5625,t=2.75;return n<1/t?e*n*n:n<2/t?e*(n-=1.5/t)*n+.75:n<2.5/t?e*(n-=2.25/t)*n+.9375:e*(n-=2.625/t)*n+.984375}void 0!==n.easing&&(n.easing.jswing=n.easing.swing);var t=Math.pow,u=Math.sqrt,r=Math.sin,i=Math.cos,a=Math.PI,c=1.70158,o=1.525*c,s=2*a/3,f=2*a/4.5;n.extend(n.easing,{def:"easeOutQuad",swing:function(e){return n.easing[n.easing.def](e)},easeInQuad:function(n){return n*n},easeOutQuad:function(n){return 1-(1-n)*(1-n)},easeInOutQuad:function(n){return n<.5?2*n*n:1-t(-2*n+2,2)/2},easeInCubic:function(n){return n*n*n},easeOutCubic:function(n){return 1-t(1-n,3)},easeInOutCubic:function(n){return n<.5?4*n*n*n:1-t(-2*n+2,3)/2},easeInQuart:function(n){return n*n*n*n},easeOutQuart:function(n){return 1-t(1-n,4)},easeInOutQuart:function(n){return n<.5?8*n*n*n*n:1-t(-2*n+2,4)/2},easeInQuint:function(n){return n*n*n*n*n},easeOutQuint:function(n){return 1-t(1-n,5)},easeInOutQuint:function(n){return n<.5?16*n*n*n*n*n:1-t(-2*n+2,5)/2},easeInSine:function(n){return 1-i(n*a/2)},easeOutSine:function(n){return r(n*a/2)},easeInOutSine:function(n){return-(i(a*n)-1)/2},easeInExpo:function(n){return 0===n?0:t(2,10*n-10)},easeOutExpo:function(n){return 1===n?1:1-t(2,-10*n)},easeInOutExpo:function(n){return 0===n?0:1===n?1:n<.5?t(2,20*n-10)/2:(2-t(2,-20*n+10))/2},easeInCirc:function(n){return 1-u(1-t(n,2))},easeOutCirc:function(n){return u(1-t(n-1,2))},easeInOutCirc:function(n){return n<.5?(1-u(1-t(2*n,2)))/2:(u(1-t(-2*n+2,2))+1)/2},easeInElastic:function(n){return 0===n?0:1===n?1:-t(2,10*n-10)*r((10*n-10.75)*s)},easeOutElastic:function(n){return 0===n?0:1===n?1:t(2,-10*n)*r((10*n-.75)*s)+1},easeInOutElastic:function(n){return 0===n?0:1===n?1:n<.5?-(t(2,20*n-10)*r((20*n-11.125)*f))/2:t(2,-20*n+10)*r((20*n-11.125)*f)/2+1},easeInBack:function(n){return(c+1)*n*n*n-c*n*n},easeOutBack:function(n){return 1+(c+1)*t(n-1,3)+c*t(n-1,2)},easeInOutBack:function(n){return n<.5?t(2*n,2)*(7.189819*n-o)/2:(t(2*n-2,2)*((o+1)*(2*n-2)+o)+2)/2},easeInBounce:function(n){return 1-e(1-n)},easeOutBounce:e,easeInOutBounce:function(n){return n<.5?(1-e(1-2*n))/2:(1+e(2*n-1))/2}})}); diff --git a/task_webDev/Ananya_Mohapatra_2102070007/lib/isotope/isotope.pkgd.js b/task_webDev/Ananya_Mohapatra_2102070007/lib/isotope/isotope.pkgd.js new file mode 100644 index 0000000..f409085 --- /dev/null +++ b/task_webDev/Ananya_Mohapatra_2102070007/lib/isotope/isotope.pkgd.js @@ -0,0 +1,3561 @@ +/*! + * Isotope PACKAGED v3.0.5 + * + * Licensed GPLv3 for open source use + * or Isotope Commercial License for commercial use + * + * https://isotope.metafizzy.co + * Copyright 2017 Metafizzy + */ + +/** + * Bridget makes jQuery widgets + * v2.0.1 + * MIT license + */ + +/* jshint browser: true, strict: true, undef: true, unused: true */ + +( function( window, factory ) { + // universal module definition + /*jshint strict: false */ /* globals define, module, require */ + if ( typeof define == 'function' && define.amd ) { + // AMD + define( 'jquery-bridget/jquery-bridget',[ 'jquery' ], function( jQuery ) { + return factory( window, jQuery ); + }); + } else if ( typeof module == 'object' && module.exports ) { + // CommonJS + module.exports = factory( + window, + require('jquery') + ); + } else { + // browser global + window.jQueryBridget = factory( + window, + window.jQuery + ); + } + +}( window, function factory( window, jQuery ) { +'use strict'; + +// ----- utils ----- // + +var arraySlice = Array.prototype.slice; + +// helper function for logging errors +// $.error breaks jQuery chaining +var console = window.console; +var logError = typeof console == 'undefined' ? function() {} : + function( message ) { + console.error( message ); + }; + +// ----- jQueryBridget ----- // + +function jQueryBridget( namespace, PluginClass, $ ) { + $ = $ || jQuery || window.jQuery; + if ( !$ ) { + return; + } + + // add option method -> $().plugin('option', {...}) + if ( !PluginClass.prototype.option ) { + // option setter + PluginClass.prototype.option = function( opts ) { + // bail out if not an object + if ( !$.isPlainObject( opts ) ){ + return; + } + this.options = $.extend( true, this.options, opts ); + }; + } + + // make jQuery plugin + $.fn[ namespace ] = function( arg0 /*, arg1 */ ) { + if ( typeof arg0 == 'string' ) { + // method call $().plugin( 'methodName', { options } ) + // shift arguments by 1 + var args = arraySlice.call( arguments, 1 ); + return methodCall( this, arg0, args ); + } + // just $().plugin({ options }) + plainCall( this, arg0 ); + return this; + }; + + // $().plugin('methodName') + function methodCall( $elems, methodName, args ) { + var returnValue; + var pluginMethodStr = '$().' + namespace + '("' + methodName + '")'; + + $elems.each( function( i, elem ) { + // get instance + var instance = $.data( elem, namespace ); + if ( !instance ) { + logError( namespace + ' not initialized. Cannot call methods, i.e. ' + + pluginMethodStr ); + return; + } + + var method = instance[ methodName ]; + if ( !method || methodName.charAt(0) == '_' ) { + logError( pluginMethodStr + ' is not a valid method' ); + return; + } + + // apply method, get return value + var value = method.apply( instance, args ); + // set return value if value is returned, use only first value + returnValue = returnValue === undefined ? value : returnValue; + }); + + return returnValue !== undefined ? returnValue : $elems; + } + + function plainCall( $elems, options ) { + $elems.each( function( i, elem ) { + var instance = $.data( elem, namespace ); + if ( instance ) { + // set options & init + instance.option( options ); + instance._init(); + } else { + // initialize new instance + instance = new PluginClass( elem, options ); + $.data( elem, namespace, instance ); + } + }); + } + + updateJQuery( $ ); + +} + +// ----- updateJQuery ----- // + +// set $.bridget for v1 backwards compatibility +function updateJQuery( $ ) { + if ( !$ || ( $ && $.bridget ) ) { + return; + } + $.bridget = jQueryBridget; +} + +updateJQuery( jQuery || window.jQuery ); + +// ----- ----- // + +return jQueryBridget; + +})); + +/** + * EvEmitter v1.1.0 + * Lil' event emitter + * MIT License + */ + +/* jshint unused: true, undef: true, strict: true */ + +( function( global, factory ) { + // universal module definition + /* jshint strict: false */ /* globals define, module, window */ + if ( typeof define == 'function' && define.amd ) { + // AMD - RequireJS + define( 'ev-emitter/ev-emitter',factory ); + } else if ( typeof module == 'object' && module.exports ) { + // CommonJS - Browserify, Webpack + module.exports = factory(); + } else { + // Browser globals + global.EvEmitter = factory(); + } + +}( typeof window != 'undefined' ? window : this, function() { + + + +function EvEmitter() {} + +var proto = EvEmitter.prototype; + +proto.on = function( eventName, listener ) { + if ( !eventName || !listener ) { + return; + } + // set events hash + var events = this._events = this._events || {}; + // set listeners array + var listeners = events[ eventName ] = events[ eventName ] || []; + // only add once + if ( listeners.indexOf( listener ) == -1 ) { + listeners.push( listener ); + } + + return this; +}; + +proto.once = function( eventName, listener ) { + if ( !eventName || !listener ) { + return; + } + // add event + this.on( eventName, listener ); + // set once flag + // set onceEvents hash + var onceEvents = this._onceEvents = this._onceEvents || {}; + // set onceListeners object + var onceListeners = onceEvents[ eventName ] = onceEvents[ eventName ] || {}; + // set flag + onceListeners[ listener ] = true; + + return this; +}; + +proto.off = function( eventName, listener ) { + var listeners = this._events && this._events[ eventName ]; + if ( !listeners || !listeners.length ) { + return; + } + var index = listeners.indexOf( listener ); + if ( index != -1 ) { + listeners.splice( index, 1 ); + } + + return this; +}; + +proto.emitEvent = function( eventName, args ) { + var listeners = this._events && this._events[ eventName ]; + if ( !listeners || !listeners.length ) { + return; + } + // copy over to avoid interference if .off() in listener + listeners = listeners.slice(0); + args = args || []; + // once stuff + var onceListeners = this._onceEvents && this._onceEvents[ eventName ]; + + for ( var i=0; i < listeners.length; i++ ) { + var listener = listeners[i] + var isOnce = onceListeners && onceListeners[ listener ]; + if ( isOnce ) { + // remove listener + // remove before trigger to prevent recursion + this.off( eventName, listener ); + // unset once flag + delete onceListeners[ listener ]; + } + // trigger listener + listener.apply( this, args ); + } + + return this; +}; + +proto.allOff = function() { + delete this._events; + delete this._onceEvents; +}; + +return EvEmitter; + +})); + +/*! + * getSize v2.0.2 + * measure size of elements + * MIT license + */ + +/*jshint browser: true, strict: true, undef: true, unused: true */ +/*global define: false, module: false, console: false */ + +( function( window, factory ) { + 'use strict'; + + if ( typeof define == 'function' && define.amd ) { + // AMD + define( 'get-size/get-size',[],function() { + return factory(); + }); + } else if ( typeof module == 'object' && module.exports ) { + // CommonJS + module.exports = factory(); + } else { + // browser global + window.getSize = factory(); + } + +})( window, function factory() { +'use strict'; + +// -------------------------- helpers -------------------------- // + +// get a number from a string, not a percentage +function getStyleSize( value ) { + var num = parseFloat( value ); + // not a percent like '100%', and a number + var isValid = value.indexOf('%') == -1 && !isNaN( num ); + return isValid && num; +} + +function noop() {} + +var logError = typeof console == 'undefined' ? noop : + function( message ) { + console.error( message ); + }; + +// -------------------------- measurements -------------------------- // + +var measurements = [ + 'paddingLeft', + 'paddingRight', + 'paddingTop', + 'paddingBottom', + 'marginLeft', + 'marginRight', + 'marginTop', + 'marginBottom', + 'borderLeftWidth', + 'borderRightWidth', + 'borderTopWidth', + 'borderBottomWidth' +]; + +var measurementsLength = measurements.length; + +function getZeroSize() { + var size = { + width: 0, + height: 0, + innerWidth: 0, + innerHeight: 0, + outerWidth: 0, + outerHeight: 0 + }; + for ( var i=0; i < measurementsLength; i++ ) { + var measurement = measurements[i]; + size[ measurement ] = 0; + } + return size; +} + +// -------------------------- getStyle -------------------------- // + +/** + * getStyle, get style of element, check for Firefox bug + * https://bugzilla.mozilla.org/show_bug.cgi?id=548397 + */ +function getStyle( elem ) { + var style = getComputedStyle( elem ); + if ( !style ) { + logError( 'Style returned ' + style + + '. Are you running this code in a hidden iframe on Firefox? ' + + 'See http://bit.ly/getsizebug1' ); + } + return style; +} + +// -------------------------- setup -------------------------- // + +var isSetup = false; + +var isBoxSizeOuter; + +/** + * setup + * check isBoxSizerOuter + * do on first getSize() rather than on page load for Firefox bug + */ +function setup() { + // setup once + if ( isSetup ) { + return; + } + isSetup = true; + + // -------------------------- box sizing -------------------------- // + + /** + * WebKit measures the outer-width on style.width on border-box elems + * IE & Firefox<29 measures the inner-width + */ + var div = document.createElement('div'); + div.style.width = '200px'; + div.style.padding = '1px 2px 3px 4px'; + div.style.borderStyle = 'solid'; + div.style.borderWidth = '1px 2px 3px 4px'; + div.style.boxSizing = 'border-box'; + + var body = document.body || document.documentElement; + body.appendChild( div ); + var style = getStyle( div ); + + getSize.isBoxSizeOuter = isBoxSizeOuter = getStyleSize( style.width ) == 200; + body.removeChild( div ); + +} + +// -------------------------- getSize -------------------------- // + +function getSize( elem ) { + setup(); + + // use querySeletor if elem is string + if ( typeof elem == 'string' ) { + elem = document.querySelector( elem ); + } + + // do not proceed on non-objects + if ( !elem || typeof elem != 'object' || !elem.nodeType ) { + return; + } + + var style = getStyle( elem ); + + // if hidden, everything is 0 + if ( style.display == 'none' ) { + return getZeroSize(); + } + + var size = {}; + size.width = elem.offsetWidth; + size.height = elem.offsetHeight; + + var isBorderBox = size.isBorderBox = style.boxSizing == 'border-box'; + + // get all measurements + for ( var i=0; i < measurementsLength; i++ ) { + var measurement = measurements[i]; + var value = style[ measurement ]; + var num = parseFloat( value ); + // any 'auto', 'medium' value will be 0 + size[ measurement ] = !isNaN( num ) ? num : 0; + } + + var paddingWidth = size.paddingLeft + size.paddingRight; + var paddingHeight = size.paddingTop + size.paddingBottom; + var marginWidth = size.marginLeft + size.marginRight; + var marginHeight = size.marginTop + size.marginBottom; + var borderWidth = size.borderLeftWidth + size.borderRightWidth; + var borderHeight = size.borderTopWidth + size.borderBottomWidth; + + var isBorderBoxSizeOuter = isBorderBox && isBoxSizeOuter; + + // overwrite width and height if we can get it from style + var styleWidth = getStyleSize( style.width ); + if ( styleWidth !== false ) { + size.width = styleWidth + + // add padding and border unless it's already including it + ( isBorderBoxSizeOuter ? 0 : paddingWidth + borderWidth ); + } + + var styleHeight = getStyleSize( style.height ); + if ( styleHeight !== false ) { + size.height = styleHeight + + // add padding and border unless it's already including it + ( isBorderBoxSizeOuter ? 0 : paddingHeight + borderHeight ); + } + + size.innerWidth = size.width - ( paddingWidth + borderWidth ); + size.innerHeight = size.height - ( paddingHeight + borderHeight ); + + size.outerWidth = size.width + marginWidth; + size.outerHeight = size.height + marginHeight; + + return size; +} + +return getSize; + +}); + +/** + * matchesSelector v2.0.2 + * matchesSelector( element, '.selector' ) + * MIT license + */ + +/*jshint browser: true, strict: true, undef: true, unused: true */ + +( function( window, factory ) { + /*global define: false, module: false */ + 'use strict'; + // universal module definition + if ( typeof define == 'function' && define.amd ) { + // AMD + define( 'desandro-matches-selector/matches-selector',factory ); + } else if ( typeof module == 'object' && module.exports ) { + // CommonJS + module.exports = factory(); + } else { + // browser global + window.matchesSelector = factory(); + } + +}( window, function factory() { + 'use strict'; + + var matchesMethod = ( function() { + var ElemProto = window.Element.prototype; + // check for the standard method name first + if ( ElemProto.matches ) { + return 'matches'; + } + // check un-prefixed + if ( ElemProto.matchesSelector ) { + return 'matchesSelector'; + } + // check vendor prefixes + var prefixes = [ 'webkit', 'moz', 'ms', 'o' ]; + + for ( var i=0; i < prefixes.length; i++ ) { + var prefix = prefixes[i]; + var method = prefix + 'MatchesSelector'; + if ( ElemProto[ method ] ) { + return method; + } + } + })(); + + return function matchesSelector( elem, selector ) { + return elem[ matchesMethod ]( selector ); + }; + +})); + +/** + * Fizzy UI utils v2.0.5 + * MIT license + */ + +/*jshint browser: true, undef: true, unused: true, strict: true */ + +( function( window, factory ) { + // universal module definition + /*jshint strict: false */ /*globals define, module, require */ + + if ( typeof define == 'function' && define.amd ) { + // AMD + define( 'fizzy-ui-utils/utils',[ + 'desandro-matches-selector/matches-selector' + ], function( matchesSelector ) { + return factory( window, matchesSelector ); + }); + } else if ( typeof module == 'object' && module.exports ) { + // CommonJS + module.exports = factory( + window, + require('desandro-matches-selector') + ); + } else { + // browser global + window.fizzyUIUtils = factory( + window, + window.matchesSelector + ); + } + +}( window, function factory( window, matchesSelector ) { + + + +var utils = {}; + +// ----- extend ----- // + +// extends objects +utils.extend = function( a, b ) { + for ( var prop in b ) { + a[ prop ] = b[ prop ]; + } + return a; +}; + +// ----- modulo ----- // + +utils.modulo = function( num, div ) { + return ( ( num % div ) + div ) % div; +}; + +// ----- makeArray ----- // + +// turn element or nodeList into an array +utils.makeArray = function( obj ) { + var ary = []; + if ( Array.isArray( obj ) ) { + // use object if already an array + ary = obj; + } else if ( obj && typeof obj == 'object' && + typeof obj.length == 'number' ) { + // convert nodeList to array + for ( var i=0; i < obj.length; i++ ) { + ary.push( obj[i] ); + } + } else { + // array of single index + ary.push( obj ); + } + return ary; +}; + +// ----- removeFrom ----- // + +utils.removeFrom = function( ary, obj ) { + var index = ary.indexOf( obj ); + if ( index != -1 ) { + ary.splice( index, 1 ); + } +}; + +// ----- getParent ----- // + +utils.getParent = function( elem, selector ) { + while ( elem.parentNode && elem != document.body ) { + elem = elem.parentNode; + if ( matchesSelector( elem, selector ) ) { + return elem; + } + } +}; + +// ----- getQueryElement ----- // + +// use element as selector string +utils.getQueryElement = function( elem ) { + if ( typeof elem == 'string' ) { + return document.querySelector( elem ); + } + return elem; +}; + +// ----- handleEvent ----- // + +// enable .ontype to trigger from .addEventListener( elem, 'type' ) +utils.handleEvent = function( event ) { + var method = 'on' + event.type; + if ( this[ method ] ) { + this[ method ]( event ); + } +}; + +// ----- filterFindElements ----- // + +utils.filterFindElements = function( elems, selector ) { + // make array of elems + elems = utils.makeArray( elems ); + var ffElems = []; + + elems.forEach( function( elem ) { + // check that elem is an actual element + if ( !( elem instanceof HTMLElement ) ) { + return; + } + // add elem if no selector + if ( !selector ) { + ffElems.push( elem ); + return; + } + // filter & find items if we have a selector + // filter + if ( matchesSelector( elem, selector ) ) { + ffElems.push( elem ); + } + // find children + var childElems = elem.querySelectorAll( selector ); + // concat childElems to filterFound array + for ( var i=0; i < childElems.length; i++ ) { + ffElems.push( childElems[i] ); + } + }); + + return ffElems; +}; + +// ----- debounceMethod ----- // + +utils.debounceMethod = function( _class, methodName, threshold ) { + // original method + var method = _class.prototype[ methodName ]; + var timeoutName = methodName + 'Timeout'; + + _class.prototype[ methodName ] = function() { + var timeout = this[ timeoutName ]; + if ( timeout ) { + clearTimeout( timeout ); + } + var args = arguments; + + var _this = this; + this[ timeoutName ] = setTimeout( function() { + method.apply( _this, args ); + delete _this[ timeoutName ]; + }, threshold || 100 ); + }; +}; + +// ----- docReady ----- // + +utils.docReady = function( callback ) { + var readyState = document.readyState; + if ( readyState == 'complete' || readyState == 'interactive' ) { + // do async to allow for other scripts to run. metafizzy/flickity#441 + setTimeout( callback ); + } else { + document.addEventListener( 'DOMContentLoaded', callback ); + } +}; + +// ----- htmlInit ----- // + +// http://jamesroberts.name/blog/2010/02/22/string-functions-for-javascript-trim-to-camel-case-to-dashed-and-to-underscore/ +utils.toDashed = function( str ) { + return str.replace( /(.)([A-Z])/g, function( match, $1, $2 ) { + return $1 + '-' + $2; + }).toLowerCase(); +}; + +var console = window.console; +/** + * allow user to initialize classes via [data-namespace] or .js-namespace class + * htmlInit( Widget, 'widgetName' ) + * options are parsed from data-namespace-options + */ +utils.htmlInit = function( WidgetClass, namespace ) { + utils.docReady( function() { + var dashedNamespace = utils.toDashed( namespace ); + var dataAttr = 'data-' + dashedNamespace; + var dataAttrElems = document.querySelectorAll( '[' + dataAttr + ']' ); + var jsDashElems = document.querySelectorAll( '.js-' + dashedNamespace ); + var elems = utils.makeArray( dataAttrElems ) + .concat( utils.makeArray( jsDashElems ) ); + var dataOptionsAttr = dataAttr + '-options'; + var jQuery = window.jQuery; + + elems.forEach( function( elem ) { + var attr = elem.getAttribute( dataAttr ) || + elem.getAttribute( dataOptionsAttr ); + var options; + try { + options = attr && JSON.parse( attr ); + } catch ( error ) { + // log error, do not initialize + if ( console ) { + console.error( 'Error parsing ' + dataAttr + ' on ' + elem.className + + ': ' + error ); + } + return; + } + // initialize + var instance = new WidgetClass( elem, options ); + // make available via $().data('namespace') + if ( jQuery ) { + jQuery.data( elem, namespace, instance ); + } + }); + + }); +}; + +// ----- ----- // + +return utils; + +})); + +/** + * Outlayer Item + */ + +( function( window, factory ) { + // universal module definition + /* jshint strict: false */ /* globals define, module, require */ + if ( typeof define == 'function' && define.amd ) { + // AMD - RequireJS + define( 'outlayer/item',[ + 'ev-emitter/ev-emitter', + 'get-size/get-size' + ], + factory + ); + } else if ( typeof module == 'object' && module.exports ) { + // CommonJS - Browserify, Webpack + module.exports = factory( + require('ev-emitter'), + require('get-size') + ); + } else { + // browser global + window.Outlayer = {}; + window.Outlayer.Item = factory( + window.EvEmitter, + window.getSize + ); + } + +}( window, function factory( EvEmitter, getSize ) { +'use strict'; + +// ----- helpers ----- // + +function isEmptyObj( obj ) { + for ( var prop in obj ) { + return false; + } + prop = null; + return true; +} + +// -------------------------- CSS3 support -------------------------- // + + +var docElemStyle = document.documentElement.style; + +var transitionProperty = typeof docElemStyle.transition == 'string' ? + 'transition' : 'WebkitTransition'; +var transformProperty = typeof docElemStyle.transform == 'string' ? + 'transform' : 'WebkitTransform'; + +var transitionEndEvent = { + WebkitTransition: 'webkitTransitionEnd', + transition: 'transitionend' +}[ transitionProperty ]; + +// cache all vendor properties that could have vendor prefix +var vendorProperties = { + transform: transformProperty, + transition: transitionProperty, + transitionDuration: transitionProperty + 'Duration', + transitionProperty: transitionProperty + 'Property', + transitionDelay: transitionProperty + 'Delay' +}; + +// -------------------------- Item -------------------------- // + +function Item( element, layout ) { + if ( !element ) { + return; + } + + this.element = element; + // parent layout class, i.e. Masonry, Isotope, or Packery + this.layout = layout; + this.position = { + x: 0, + y: 0 + }; + + this._create(); +} + +// inherit EvEmitter +var proto = Item.prototype = Object.create( EvEmitter.prototype ); +proto.constructor = Item; + +proto._create = function() { + // transition objects + this._transn = { + ingProperties: {}, + clean: {}, + onEnd: {} + }; + + this.css({ + position: 'absolute' + }); +}; + +// trigger specified handler for event type +proto.handleEvent = function( event ) { + var method = 'on' + event.type; + if ( this[ method ] ) { + this[ method ]( event ); + } +}; + +proto.getSize = function() { + this.size = getSize( this.element ); +}; + +/** + * apply CSS styles to element + * @param {Object} style + */ +proto.css = function( style ) { + var elemStyle = this.element.style; + + for ( var prop in style ) { + // use vendor property if available + var supportedProp = vendorProperties[ prop ] || prop; + elemStyle[ supportedProp ] = style[ prop ]; + } +}; + + // measure position, and sets it +proto.getPosition = function() { + var style = getComputedStyle( this.element ); + var isOriginLeft = this.layout._getOption('originLeft'); + var isOriginTop = this.layout._getOption('originTop'); + var xValue = style[ isOriginLeft ? 'left' : 'right' ]; + var yValue = style[ isOriginTop ? 'top' : 'bottom' ]; + // convert percent to pixels + var layoutSize = this.layout.size; + var x = xValue.indexOf('%') != -1 ? + ( parseFloat( xValue ) / 100 ) * layoutSize.width : parseInt( xValue, 10 ); + var y = yValue.indexOf('%') != -1 ? + ( parseFloat( yValue ) / 100 ) * layoutSize.height : parseInt( yValue, 10 ); + + // clean up 'auto' or other non-integer values + x = isNaN( x ) ? 0 : x; + y = isNaN( y ) ? 0 : y; + // remove padding from measurement + x -= isOriginLeft ? layoutSize.paddingLeft : layoutSize.paddingRight; + y -= isOriginTop ? layoutSize.paddingTop : layoutSize.paddingBottom; + + this.position.x = x; + this.position.y = y; +}; + +// set settled position, apply padding +proto.layoutPosition = function() { + var layoutSize = this.layout.size; + var style = {}; + var isOriginLeft = this.layout._getOption('originLeft'); + var isOriginTop = this.layout._getOption('originTop'); + + // x + var xPadding = isOriginLeft ? 'paddingLeft' : 'paddingRight'; + var xProperty = isOriginLeft ? 'left' : 'right'; + var xResetProperty = isOriginLeft ? 'right' : 'left'; + + var x = this.position.x + layoutSize[ xPadding ]; + // set in percentage or pixels + style[ xProperty ] = this.getXValue( x ); + // reset other property + style[ xResetProperty ] = ''; + + // y + var yPadding = isOriginTop ? 'paddingTop' : 'paddingBottom'; + var yProperty = isOriginTop ? 'top' : 'bottom'; + var yResetProperty = isOriginTop ? 'bottom' : 'top'; + + var y = this.position.y + layoutSize[ yPadding ]; + // set in percentage or pixels + style[ yProperty ] = this.getYValue( y ); + // reset other property + style[ yResetProperty ] = ''; + + this.css( style ); + this.emitEvent( 'layout', [ this ] ); +}; + +proto.getXValue = function( x ) { + var isHorizontal = this.layout._getOption('horizontal'); + return this.layout.options.percentPosition && !isHorizontal ? + ( ( x / this.layout.size.width ) * 100 ) + '%' : x + 'px'; +}; + +proto.getYValue = function( y ) { + var isHorizontal = this.layout._getOption('horizontal'); + return this.layout.options.percentPosition && isHorizontal ? + ( ( y / this.layout.size.height ) * 100 ) + '%' : y + 'px'; +}; + +proto._transitionTo = function( x, y ) { + this.getPosition(); + // get current x & y from top/left + var curX = this.position.x; + var curY = this.position.y; + + var compareX = parseInt( x, 10 ); + var compareY = parseInt( y, 10 ); + var didNotMove = compareX === this.position.x && compareY === this.position.y; + + // save end position + this.setPosition( x, y ); + + // if did not move and not transitioning, just go to layout + if ( didNotMove && !this.isTransitioning ) { + this.layoutPosition(); + return; + } + + var transX = x - curX; + var transY = y - curY; + var transitionStyle = {}; + transitionStyle.transform = this.getTranslate( transX, transY ); + + this.transition({ + to: transitionStyle, + onTransitionEnd: { + transform: this.layoutPosition + }, + isCleaning: true + }); +}; + +proto.getTranslate = function( x, y ) { + // flip cooridinates if origin on right or bottom + var isOriginLeft = this.layout._getOption('originLeft'); + var isOriginTop = this.layout._getOption('originTop'); + x = isOriginLeft ? x : -x; + y = isOriginTop ? y : -y; + return 'translate3d(' + x + 'px, ' + y + 'px, 0)'; +}; + +// non transition + transform support +proto.goTo = function( x, y ) { + this.setPosition( x, y ); + this.layoutPosition(); +}; + +proto.moveTo = proto._transitionTo; + +proto.setPosition = function( x, y ) { + this.position.x = parseInt( x, 10 ); + this.position.y = parseInt( y, 10 ); +}; + +// ----- transition ----- // + +/** + * @param {Object} style - CSS + * @param {Function} onTransitionEnd + */ + +// non transition, just trigger callback +proto._nonTransition = function( args ) { + this.css( args.to ); + if ( args.isCleaning ) { + this._removeStyles( args.to ); + } + for ( var prop in args.onTransitionEnd ) { + args.onTransitionEnd[ prop ].call( this ); + } +}; + +/** + * proper transition + * @param {Object} args - arguments + * @param {Object} to - style to transition to + * @param {Object} from - style to start transition from + * @param {Boolean} isCleaning - removes transition styles after transition + * @param {Function} onTransitionEnd - callback + */ +proto.transition = function( args ) { + // redirect to nonTransition if no transition duration + if ( !parseFloat( this.layout.options.transitionDuration ) ) { + this._nonTransition( args ); + return; + } + + var _transition = this._transn; + // keep track of onTransitionEnd callback by css property + for ( var prop in args.onTransitionEnd ) { + _transition.onEnd[ prop ] = args.onTransitionEnd[ prop ]; + } + // keep track of properties that are transitioning + for ( prop in args.to ) { + _transition.ingProperties[ prop ] = true; + // keep track of properties to clean up when transition is done + if ( args.isCleaning ) { + _transition.clean[ prop ] = true; + } + } + + // set from styles + if ( args.from ) { + this.css( args.from ); + // force redraw. http://blog.alexmaccaw.com/css-transitions + var h = this.element.offsetHeight; + // hack for JSHint to hush about unused var + h = null; + } + // enable transition + this.enableTransition( args.to ); + // set styles that are transitioning + this.css( args.to ); + + this.isTransitioning = true; + +}; + +// dash before all cap letters, including first for +// WebkitTransform => -webkit-transform +function toDashedAll( str ) { + return str.replace( /([A-Z])/g, function( $1 ) { + return '-' + $1.toLowerCase(); + }); +} + +var transitionProps = 'opacity,' + toDashedAll( transformProperty ); + +proto.enableTransition = function(/* style */) { + // HACK changing transitionProperty during a transition + // will cause transition to jump + if ( this.isTransitioning ) { + return; + } + + // make `transition: foo, bar, baz` from style object + // HACK un-comment this when enableTransition can work + // while a transition is happening + // var transitionValues = []; + // for ( var prop in style ) { + // // dash-ify camelCased properties like WebkitTransition + // prop = vendorProperties[ prop ] || prop; + // transitionValues.push( toDashedAll( prop ) ); + // } + // munge number to millisecond, to match stagger + var duration = this.layout.options.transitionDuration; + duration = typeof duration == 'number' ? duration + 'ms' : duration; + // enable transition styles + this.css({ + transitionProperty: transitionProps, + transitionDuration: duration, + transitionDelay: this.staggerDelay || 0 + }); + // listen for transition end event + this.element.addEventListener( transitionEndEvent, this, false ); +}; + +// ----- events ----- // + +proto.onwebkitTransitionEnd = function( event ) { + this.ontransitionend( event ); +}; + +proto.onotransitionend = function( event ) { + this.ontransitionend( event ); +}; + +// properties that I munge to make my life easier +var dashedVendorProperties = { + '-webkit-transform': 'transform' +}; + +proto.ontransitionend = function( event ) { + // disregard bubbled events from children + if ( event.target !== this.element ) { + return; + } + var _transition = this._transn; + // get property name of transitioned property, convert to prefix-free + var propertyName = dashedVendorProperties[ event.propertyName ] || event.propertyName; + + // remove property that has completed transitioning + delete _transition.ingProperties[ propertyName ]; + // check if any properties are still transitioning + if ( isEmptyObj( _transition.ingProperties ) ) { + // all properties have completed transitioning + this.disableTransition(); + } + // clean style + if ( propertyName in _transition.clean ) { + // clean up style + this.element.style[ event.propertyName ] = ''; + delete _transition.clean[ propertyName ]; + } + // trigger onTransitionEnd callback + if ( propertyName in _transition.onEnd ) { + var onTransitionEnd = _transition.onEnd[ propertyName ]; + onTransitionEnd.call( this ); + delete _transition.onEnd[ propertyName ]; + } + + this.emitEvent( 'transitionEnd', [ this ] ); +}; + +proto.disableTransition = function() { + this.removeTransitionStyles(); + this.element.removeEventListener( transitionEndEvent, this, false ); + this.isTransitioning = false; +}; + +/** + * removes style property from element + * @param {Object} style +**/ +proto._removeStyles = function( style ) { + // clean up transition styles + var cleanStyle = {}; + for ( var prop in style ) { + cleanStyle[ prop ] = ''; + } + this.css( cleanStyle ); +}; + +var cleanTransitionStyle = { + transitionProperty: '', + transitionDuration: '', + transitionDelay: '' +}; + +proto.removeTransitionStyles = function() { + // remove transition + this.css( cleanTransitionStyle ); +}; + +// ----- stagger ----- // + +proto.stagger = function( delay ) { + delay = isNaN( delay ) ? 0 : delay; + this.staggerDelay = delay + 'ms'; +}; + +// ----- show/hide/remove ----- // + +// remove element from DOM +proto.removeElem = function() { + this.element.parentNode.removeChild( this.element ); + // remove display: none + this.css({ display: '' }); + this.emitEvent( 'remove', [ this ] ); +}; + +proto.remove = function() { + // just remove element if no transition support or no transition + if ( !transitionProperty || !parseFloat( this.layout.options.transitionDuration ) ) { + this.removeElem(); + return; + } + + // start transition + this.once( 'transitionEnd', function() { + this.removeElem(); + }); + this.hide(); +}; + +proto.reveal = function() { + delete this.isHidden; + // remove display: none + this.css({ display: '' }); + + var options = this.layout.options; + + var onTransitionEnd = {}; + var transitionEndProperty = this.getHideRevealTransitionEndProperty('visibleStyle'); + onTransitionEnd[ transitionEndProperty ] = this.onRevealTransitionEnd; + + this.transition({ + from: options.hiddenStyle, + to: options.visibleStyle, + isCleaning: true, + onTransitionEnd: onTransitionEnd + }); +}; + +proto.onRevealTransitionEnd = function() { + // check if still visible + // during transition, item may have been hidden + if ( !this.isHidden ) { + this.emitEvent('reveal'); + } +}; + +/** + * get style property use for hide/reveal transition end + * @param {String} styleProperty - hiddenStyle/visibleStyle + * @returns {String} + */ +proto.getHideRevealTransitionEndProperty = function( styleProperty ) { + var optionStyle = this.layout.options[ styleProperty ]; + // use opacity + if ( optionStyle.opacity ) { + return 'opacity'; + } + // get first property + for ( var prop in optionStyle ) { + return prop; + } +}; + +proto.hide = function() { + // set flag + this.isHidden = true; + // remove display: none + this.css({ display: '' }); + + var options = this.layout.options; + + var onTransitionEnd = {}; + var transitionEndProperty = this.getHideRevealTransitionEndProperty('hiddenStyle'); + onTransitionEnd[ transitionEndProperty ] = this.onHideTransitionEnd; + + this.transition({ + from: options.visibleStyle, + to: options.hiddenStyle, + // keep hidden stuff hidden + isCleaning: true, + onTransitionEnd: onTransitionEnd + }); +}; + +proto.onHideTransitionEnd = function() { + // check if still hidden + // during transition, item may have been un-hidden + if ( this.isHidden ) { + this.css({ display: 'none' }); + this.emitEvent('hide'); + } +}; + +proto.destroy = function() { + this.css({ + position: '', + left: '', + right: '', + top: '', + bottom: '', + transition: '', + transform: '' + }); +}; + +return Item; + +})); + +/*! + * Outlayer v2.1.0 + * the brains and guts of a layout library + * MIT license + */ + +( function( window, factory ) { + 'use strict'; + // universal module definition + /* jshint strict: false */ /* globals define, module, require */ + if ( typeof define == 'function' && define.amd ) { + // AMD - RequireJS + define( 'outlayer/outlayer',[ + 'ev-emitter/ev-emitter', + 'get-size/get-size', + 'fizzy-ui-utils/utils', + './item' + ], + function( EvEmitter, getSize, utils, Item ) { + return factory( window, EvEmitter, getSize, utils, Item); + } + ); + } else if ( typeof module == 'object' && module.exports ) { + // CommonJS - Browserify, Webpack + module.exports = factory( + window, + require('ev-emitter'), + require('get-size'), + require('fizzy-ui-utils'), + require('./item') + ); + } else { + // browser global + window.Outlayer = factory( + window, + window.EvEmitter, + window.getSize, + window.fizzyUIUtils, + window.Outlayer.Item + ); + } + +}( window, function factory( window, EvEmitter, getSize, utils, Item ) { +'use strict'; + +// ----- vars ----- // + +var console = window.console; +var jQuery = window.jQuery; +var noop = function() {}; + +// -------------------------- Outlayer -------------------------- // + +// globally unique identifiers +var GUID = 0; +// internal store of all Outlayer intances +var instances = {}; + + +/** + * @param {Element, String} element + * @param {Object} options + * @constructor + */ +function Outlayer( element, options ) { + var queryElement = utils.getQueryElement( element ); + if ( !queryElement ) { + if ( console ) { + console.error( 'Bad element for ' + this.constructor.namespace + + ': ' + ( queryElement || element ) ); + } + return; + } + this.element = queryElement; + // add jQuery + if ( jQuery ) { + this.$element = jQuery( this.element ); + } + + // options + this.options = utils.extend( {}, this.constructor.defaults ); + this.option( options ); + + // add id for Outlayer.getFromElement + var id = ++GUID; + this.element.outlayerGUID = id; // expando + instances[ id ] = this; // associate via id + + // kick it off + this._create(); + + var isInitLayout = this._getOption('initLayout'); + if ( isInitLayout ) { + this.layout(); + } +} + +// settings are for internal use only +Outlayer.namespace = 'outlayer'; +Outlayer.Item = Item; + +// default options +Outlayer.defaults = { + containerStyle: { + position: 'relative' + }, + initLayout: true, + originLeft: true, + originTop: true, + resize: true, + resizeContainer: true, + // item options + transitionDuration: '0.4s', + hiddenStyle: { + opacity: 0, + transform: 'scale(0.001)' + }, + visibleStyle: { + opacity: 1, + transform: 'scale(1)' + } +}; + +var proto = Outlayer.prototype; +// inherit EvEmitter +utils.extend( proto, EvEmitter.prototype ); + +/** + * set options + * @param {Object} opts + */ +proto.option = function( opts ) { + utils.extend( this.options, opts ); +}; + +/** + * get backwards compatible option value, check old name + */ +proto._getOption = function( option ) { + var oldOption = this.constructor.compatOptions[ option ]; + return oldOption && this.options[ oldOption ] !== undefined ? + this.options[ oldOption ] : this.options[ option ]; +}; + +Outlayer.compatOptions = { + // currentName: oldName + initLayout: 'isInitLayout', + horizontal: 'isHorizontal', + layoutInstant: 'isLayoutInstant', + originLeft: 'isOriginLeft', + originTop: 'isOriginTop', + resize: 'isResizeBound', + resizeContainer: 'isResizingContainer' +}; + +proto._create = function() { + // get items from children + this.reloadItems(); + // elements that affect layout, but are not laid out + this.stamps = []; + this.stamp( this.options.stamp ); + // set container style + utils.extend( this.element.style, this.options.containerStyle ); + + // bind resize method + var canBindResize = this._getOption('resize'); + if ( canBindResize ) { + this.bindResize(); + } +}; + +// goes through all children again and gets bricks in proper order +proto.reloadItems = function() { + // collection of item elements + this.items = this._itemize( this.element.children ); +}; + + +/** + * turn elements into Outlayer.Items to be used in layout + * @param {Array or NodeList or HTMLElement} elems + * @returns {Array} items - collection of new Outlayer Items + */ +proto._itemize = function( elems ) { + + var itemElems = this._filterFindItemElements( elems ); + var Item = this.constructor.Item; + + // create new Outlayer Items for collection + var items = []; + for ( var i=0; i < itemElems.length; i++ ) { + var elem = itemElems[i]; + var item = new Item( elem, this ); + items.push( item ); + } + + return items; +}; + +/** + * get item elements to be used in layout + * @param {Array or NodeList or HTMLElement} elems + * @returns {Array} items - item elements + */ +proto._filterFindItemElements = function( elems ) { + return utils.filterFindElements( elems, this.options.itemSelector ); +}; + +/** + * getter method for getting item elements + * @returns {Array} elems - collection of item elements + */ +proto.getItemElements = function() { + return this.items.map( function( item ) { + return item.element; + }); +}; + +// ----- init & layout ----- // + +/** + * lays out all items + */ +proto.layout = function() { + this._resetLayout(); + this._manageStamps(); + + // don't animate first layout + var layoutInstant = this._getOption('layoutInstant'); + var isInstant = layoutInstant !== undefined ? + layoutInstant : !this._isLayoutInited; + this.layoutItems( this.items, isInstant ); + + // flag for initalized + this._isLayoutInited = true; +}; + +// _init is alias for layout +proto._init = proto.layout; + +/** + * logic before any new layout + */ +proto._resetLayout = function() { + this.getSize(); +}; + + +proto.getSize = function() { + this.size = getSize( this.element ); +}; + +/** + * get measurement from option, for columnWidth, rowHeight, gutter + * if option is String -> get element from selector string, & get size of element + * if option is Element -> get size of element + * else use option as a number + * + * @param {String} measurement + * @param {String} size - width or height + * @private + */ +proto._getMeasurement = function( measurement, size ) { + var option = this.options[ measurement ]; + var elem; + if ( !option ) { + // default to 0 + this[ measurement ] = 0; + } else { + // use option as an element + if ( typeof option == 'string' ) { + elem = this.element.querySelector( option ); + } else if ( option instanceof HTMLElement ) { + elem = option; + } + // use size of element, if element + this[ measurement ] = elem ? getSize( elem )[ size ] : option; + } +}; + +/** + * layout a collection of item elements + * @api public + */ +proto.layoutItems = function( items, isInstant ) { + items = this._getItemsForLayout( items ); + + this._layoutItems( items, isInstant ); + + this._postLayout(); +}; + +/** + * get the items to be laid out + * you may want to skip over some items + * @param {Array} items + * @returns {Array} items + */ +proto._getItemsForLayout = function( items ) { + return items.filter( function( item ) { + return !item.isIgnored; + }); +}; + +/** + * layout items + * @param {Array} items + * @param {Boolean} isInstant + */ +proto._layoutItems = function( items, isInstant ) { + this._emitCompleteOnItems( 'layout', items ); + + if ( !items || !items.length ) { + // no items, emit event with empty array + return; + } + + var queue = []; + + items.forEach( function( item ) { + // get x/y object from method + var position = this._getItemLayoutPosition( item ); + // enqueue + position.item = item; + position.isInstant = isInstant || item.isLayoutInstant; + queue.push( position ); + }, this ); + + this._processLayoutQueue( queue ); +}; + +/** + * get item layout position + * @param {Outlayer.Item} item + * @returns {Object} x and y position + */ +proto._getItemLayoutPosition = function( /* item */ ) { + return { + x: 0, + y: 0 + }; +}; + +/** + * iterate over array and position each item + * Reason being - separating this logic prevents 'layout invalidation' + * thx @paul_irish + * @param {Array} queue + */ +proto._processLayoutQueue = function( queue ) { + this.updateStagger(); + queue.forEach( function( obj, i ) { + this._positionItem( obj.item, obj.x, obj.y, obj.isInstant, i ); + }, this ); +}; + +// set stagger from option in milliseconds number +proto.updateStagger = function() { + var stagger = this.options.stagger; + if ( stagger === null || stagger === undefined ) { + this.stagger = 0; + return; + } + this.stagger = getMilliseconds( stagger ); + return this.stagger; +}; + +/** + * Sets position of item in DOM + * @param {Outlayer.Item} item + * @param {Number} x - horizontal position + * @param {Number} y - vertical position + * @param {Boolean} isInstant - disables transitions + */ +proto._positionItem = function( item, x, y, isInstant, i ) { + if ( isInstant ) { + // if not transition, just set CSS + item.goTo( x, y ); + } else { + item.stagger( i * this.stagger ); + item.moveTo( x, y ); + } +}; + +/** + * Any logic you want to do after each layout, + * i.e. size the container + */ +proto._postLayout = function() { + this.resizeContainer(); +}; + +proto.resizeContainer = function() { + var isResizingContainer = this._getOption('resizeContainer'); + if ( !isResizingContainer ) { + return; + } + var size = this._getContainerSize(); + if ( size ) { + this._setContainerMeasure( size.width, true ); + this._setContainerMeasure( size.height, false ); + } +}; + +/** + * Sets width or height of container if returned + * @returns {Object} size + * @param {Number} width + * @param {Number} height + */ +proto._getContainerSize = noop; + +/** + * @param {Number} measure - size of width or height + * @param {Boolean} isWidth + */ +proto._setContainerMeasure = function( measure, isWidth ) { + if ( measure === undefined ) { + return; + } + + var elemSize = this.size; + // add padding and border width if border box + if ( elemSize.isBorderBox ) { + measure += isWidth ? elemSize.paddingLeft + elemSize.paddingRight + + elemSize.borderLeftWidth + elemSize.borderRightWidth : + elemSize.paddingBottom + elemSize.paddingTop + + elemSize.borderTopWidth + elemSize.borderBottomWidth; + } + + measure = Math.max( measure, 0 ); + this.element.style[ isWidth ? 'width' : 'height' ] = measure + 'px'; +}; + +/** + * emit eventComplete on a collection of items events + * @param {String} eventName + * @param {Array} items - Outlayer.Items + */ +proto._emitCompleteOnItems = function( eventName, items ) { + var _this = this; + function onComplete() { + _this.dispatchEvent( eventName + 'Complete', null, [ items ] ); + } + + var count = items.length; + if ( !items || !count ) { + onComplete(); + return; + } + + var doneCount = 0; + function tick() { + doneCount++; + if ( doneCount == count ) { + onComplete(); + } + } + + // bind callback + items.forEach( function( item ) { + item.once( eventName, tick ); + }); +}; + +/** + * emits events via EvEmitter and jQuery events + * @param {String} type - name of event + * @param {Event} event - original event + * @param {Array} args - extra arguments + */ +proto.dispatchEvent = function( type, event, args ) { + // add original event to arguments + var emitArgs = event ? [ event ].concat( args ) : args; + this.emitEvent( type, emitArgs ); + + if ( jQuery ) { + // set this.$element + this.$element = this.$element || jQuery( this.element ); + if ( event ) { + // create jQuery event + var $event = jQuery.Event( event ); + $event.type = type; + this.$element.trigger( $event, args ); + } else { + // just trigger with type if no event available + this.$element.trigger( type, args ); + } + } +}; + +// -------------------------- ignore & stamps -------------------------- // + + +/** + * keep item in collection, but do not lay it out + * ignored items do not get skipped in layout + * @param {Element} elem + */ +proto.ignore = function( elem ) { + var item = this.getItem( elem ); + if ( item ) { + item.isIgnored = true; + } +}; + +/** + * return item to layout collection + * @param {Element} elem + */ +proto.unignore = function( elem ) { + var item = this.getItem( elem ); + if ( item ) { + delete item.isIgnored; + } +}; + +/** + * adds elements to stamps + * @param {NodeList, Array, Element, or String} elems + */ +proto.stamp = function( elems ) { + elems = this._find( elems ); + if ( !elems ) { + return; + } + + this.stamps = this.stamps.concat( elems ); + // ignore + elems.forEach( this.ignore, this ); +}; + +/** + * removes elements to stamps + * @param {NodeList, Array, or Element} elems + */ +proto.unstamp = function( elems ) { + elems = this._find( elems ); + if ( !elems ){ + return; + } + + elems.forEach( function( elem ) { + // filter out removed stamp elements + utils.removeFrom( this.stamps, elem ); + this.unignore( elem ); + }, this ); +}; + +/** + * finds child elements + * @param {NodeList, Array, Element, or String} elems + * @returns {Array} elems + */ +proto._find = function( elems ) { + if ( !elems ) { + return; + } + // if string, use argument as selector string + if ( typeof elems == 'string' ) { + elems = this.element.querySelectorAll( elems ); + } + elems = utils.makeArray( elems ); + return elems; +}; + +proto._manageStamps = function() { + if ( !this.stamps || !this.stamps.length ) { + return; + } + + this._getBoundingRect(); + + this.stamps.forEach( this._manageStamp, this ); +}; + +// update boundingLeft / Top +proto._getBoundingRect = function() { + // get bounding rect for container element + var boundingRect = this.element.getBoundingClientRect(); + var size = this.size; + this._boundingRect = { + left: boundingRect.left + size.paddingLeft + size.borderLeftWidth, + top: boundingRect.top + size.paddingTop + size.borderTopWidth, + right: boundingRect.right - ( size.paddingRight + size.borderRightWidth ), + bottom: boundingRect.bottom - ( size.paddingBottom + size.borderBottomWidth ) + }; +}; + +/** + * @param {Element} stamp +**/ +proto._manageStamp = noop; + +/** + * get x/y position of element relative to container element + * @param {Element} elem + * @returns {Object} offset - has left, top, right, bottom + */ +proto._getElementOffset = function( elem ) { + var boundingRect = elem.getBoundingClientRect(); + var thisRect = this._boundingRect; + var size = getSize( elem ); + var offset = { + left: boundingRect.left - thisRect.left - size.marginLeft, + top: boundingRect.top - thisRect.top - size.marginTop, + right: thisRect.right - boundingRect.right - size.marginRight, + bottom: thisRect.bottom - boundingRect.bottom - size.marginBottom + }; + return offset; +}; + +// -------------------------- resize -------------------------- // + +// enable event handlers for listeners +// i.e. resize -> onresize +proto.handleEvent = utils.handleEvent; + +/** + * Bind layout to window resizing + */ +proto.bindResize = function() { + window.addEventListener( 'resize', this ); + this.isResizeBound = true; +}; + +/** + * Unbind layout to window resizing + */ +proto.unbindResize = function() { + window.removeEventListener( 'resize', this ); + this.isResizeBound = false; +}; + +proto.onresize = function() { + this.resize(); +}; + +utils.debounceMethod( Outlayer, 'onresize', 100 ); + +proto.resize = function() { + // don't trigger if size did not change + // or if resize was unbound. See #9 + if ( !this.isResizeBound || !this.needsResizeLayout() ) { + return; + } + + this.layout(); +}; + +/** + * check if layout is needed post layout + * @returns Boolean + */ +proto.needsResizeLayout = function() { + var size = getSize( this.element ); + // check that this.size and size are there + // IE8 triggers resize on body size change, so they might not be + var hasSizes = this.size && size; + return hasSizes && size.innerWidth !== this.size.innerWidth; +}; + +// -------------------------- methods -------------------------- // + +/** + * add items to Outlayer instance + * @param {Array or NodeList or Element} elems + * @returns {Array} items - Outlayer.Items +**/ +proto.addItems = function( elems ) { + var items = this._itemize( elems ); + // add items to collection + if ( items.length ) { + this.items = this.items.concat( items ); + } + return items; +}; + +/** + * Layout newly-appended item elements + * @param {Array or NodeList or Element} elems + */ +proto.appended = function( elems ) { + var items = this.addItems( elems ); + if ( !items.length ) { + return; + } + // layout and reveal just the new items + this.layoutItems( items, true ); + this.reveal( items ); +}; + +/** + * Layout prepended elements + * @param {Array or NodeList or Element} elems + */ +proto.prepended = function( elems ) { + var items = this._itemize( elems ); + if ( !items.length ) { + return; + } + // add items to beginning of collection + var previousItems = this.items.slice(0); + this.items = items.concat( previousItems ); + // start new layout + this._resetLayout(); + this._manageStamps(); + // layout new stuff without transition + this.layoutItems( items, true ); + this.reveal( items ); + // layout previous items + this.layoutItems( previousItems ); +}; + +/** + * reveal a collection of items + * @param {Array of Outlayer.Items} items + */ +proto.reveal = function( items ) { + this._emitCompleteOnItems( 'reveal', items ); + if ( !items || !items.length ) { + return; + } + var stagger = this.updateStagger(); + items.forEach( function( item, i ) { + item.stagger( i * stagger ); + item.reveal(); + }); +}; + +/** + * hide a collection of items + * @param {Array of Outlayer.Items} items + */ +proto.hide = function( items ) { + this._emitCompleteOnItems( 'hide', items ); + if ( !items || !items.length ) { + return; + } + var stagger = this.updateStagger(); + items.forEach( function( item, i ) { + item.stagger( i * stagger ); + item.hide(); + }); +}; + +/** + * reveal item elements + * @param {Array}, {Element}, {NodeList} items + */ +proto.revealItemElements = function( elems ) { + var items = this.getItems( elems ); + this.reveal( items ); +}; + +/** + * hide item elements + * @param {Array}, {Element}, {NodeList} items + */ +proto.hideItemElements = function( elems ) { + var items = this.getItems( elems ); + this.hide( items ); +}; + +/** + * get Outlayer.Item, given an Element + * @param {Element} elem + * @param {Function} callback + * @returns {Outlayer.Item} item + */ +proto.getItem = function( elem ) { + // loop through items to get the one that matches + for ( var i=0; i < this.items.length; i++ ) { + var item = this.items[i]; + if ( item.element == elem ) { + // return item + return item; + } + } +}; + +/** + * get collection of Outlayer.Items, given Elements + * @param {Array} elems + * @returns {Array} items - Outlayer.Items + */ +proto.getItems = function( elems ) { + elems = utils.makeArray( elems ); + var items = []; + elems.forEach( function( elem ) { + var item = this.getItem( elem ); + if ( item ) { + items.push( item ); + } + }, this ); + + return items; +}; + +/** + * remove element(s) from instance and DOM + * @param {Array or NodeList or Element} elems + */ +proto.remove = function( elems ) { + var removeItems = this.getItems( elems ); + + this._emitCompleteOnItems( 'remove', removeItems ); + + // bail if no items to remove + if ( !removeItems || !removeItems.length ) { + return; + } + + removeItems.forEach( function( item ) { + item.remove(); + // remove item from collection + utils.removeFrom( this.items, item ); + }, this ); +}; + +// ----- destroy ----- // + +// remove and disable Outlayer instance +proto.destroy = function() { + // clean up dynamic styles + var style = this.element.style; + style.height = ''; + style.position = ''; + style.width = ''; + // destroy items + this.items.forEach( function( item ) { + item.destroy(); + }); + + this.unbindResize(); + + var id = this.element.outlayerGUID; + delete instances[ id ]; // remove reference to instance by id + delete this.element.outlayerGUID; + // remove data for jQuery + if ( jQuery ) { + jQuery.removeData( this.element, this.constructor.namespace ); + } + +}; + +// -------------------------- data -------------------------- // + +/** + * get Outlayer instance from element + * @param {Element} elem + * @returns {Outlayer} + */ +Outlayer.data = function( elem ) { + elem = utils.getQueryElement( elem ); + var id = elem && elem.outlayerGUID; + return id && instances[ id ]; +}; + + +// -------------------------- create Outlayer class -------------------------- // + +/** + * create a layout class + * @param {String} namespace + */ +Outlayer.create = function( namespace, options ) { + // sub-class Outlayer + var Layout = subclass( Outlayer ); + // apply new options and compatOptions + Layout.defaults = utils.extend( {}, Outlayer.defaults ); + utils.extend( Layout.defaults, options ); + Layout.compatOptions = utils.extend( {}, Outlayer.compatOptions ); + + Layout.namespace = namespace; + + Layout.data = Outlayer.data; + + // sub-class Item + Layout.Item = subclass( Item ); + + // -------------------------- declarative -------------------------- // + + utils.htmlInit( Layout, namespace ); + + // -------------------------- jQuery bridge -------------------------- // + + // make into jQuery plugin + if ( jQuery && jQuery.bridget ) { + jQuery.bridget( namespace, Layout ); + } + + return Layout; +}; + +function subclass( Parent ) { + function SubClass() { + Parent.apply( this, arguments ); + } + + SubClass.prototype = Object.create( Parent.prototype ); + SubClass.prototype.constructor = SubClass; + + return SubClass; +} + +// ----- helpers ----- // + +// how many milliseconds are in each unit +var msUnits = { + ms: 1, + s: 1000 +}; + +// munge time-like parameter into millisecond number +// '0.4s' -> 40 +function getMilliseconds( time ) { + if ( typeof time == 'number' ) { + return time; + } + var matches = time.match( /(^\d*\.?\d*)(\w*)/ ); + var num = matches && matches[1]; + var unit = matches && matches[2]; + if ( !num.length ) { + return 0; + } + num = parseFloat( num ); + var mult = msUnits[ unit ] || 1; + return num * mult; +} + +// ----- fin ----- // + +// back in global +Outlayer.Item = Item; + +return Outlayer; + +})); + +/** + * Isotope Item +**/ + +( function( window, factory ) { + // universal module definition + /* jshint strict: false */ /*globals define, module, require */ + if ( typeof define == 'function' && define.amd ) { + // AMD + define( 'isotope-layout/js/item',[ + 'outlayer/outlayer' + ], + factory ); + } else if ( typeof module == 'object' && module.exports ) { + // CommonJS + module.exports = factory( + require('outlayer') + ); + } else { + // browser global + window.Isotope = window.Isotope || {}; + window.Isotope.Item = factory( + window.Outlayer + ); + } + +}( window, function factory( Outlayer ) { +'use strict'; + +// -------------------------- Item -------------------------- // + +// sub-class Outlayer Item +function Item() { + Outlayer.Item.apply( this, arguments ); +} + +var proto = Item.prototype = Object.create( Outlayer.Item.prototype ); + +var _create = proto._create; +proto._create = function() { + // assign id, used for original-order sorting + this.id = this.layout.itemGUID++; + _create.call( this ); + this.sortData = {}; +}; + +proto.updateSortData = function() { + if ( this.isIgnored ) { + return; + } + // default sorters + this.sortData.id = this.id; + // for backward compatibility + this.sortData['original-order'] = this.id; + this.sortData.random = Math.random(); + // go thru getSortData obj and apply the sorters + var getSortData = this.layout.options.getSortData; + var sorters = this.layout._sorters; + for ( var key in getSortData ) { + var sorter = sorters[ key ]; + this.sortData[ key ] = sorter( this.element, this ); + } +}; + +var _destroy = proto.destroy; +proto.destroy = function() { + // call super + _destroy.apply( this, arguments ); + // reset display, #741 + this.css({ + display: '' + }); +}; + +return Item; + +})); + +/** + * Isotope LayoutMode + */ + +( function( window, factory ) { + // universal module definition + /* jshint strict: false */ /*globals define, module, require */ + if ( typeof define == 'function' && define.amd ) { + // AMD + define( 'isotope-layout/js/layout-mode',[ + 'get-size/get-size', + 'outlayer/outlayer' + ], + factory ); + } else if ( typeof module == 'object' && module.exports ) { + // CommonJS + module.exports = factory( + require('get-size'), + require('outlayer') + ); + } else { + // browser global + window.Isotope = window.Isotope || {}; + window.Isotope.LayoutMode = factory( + window.getSize, + window.Outlayer + ); + } + +}( window, function factory( getSize, Outlayer ) { + 'use strict'; + + // layout mode class + function LayoutMode( isotope ) { + this.isotope = isotope; + // link properties + if ( isotope ) { + this.options = isotope.options[ this.namespace ]; + this.element = isotope.element; + this.items = isotope.filteredItems; + this.size = isotope.size; + } + } + + var proto = LayoutMode.prototype; + + /** + * some methods should just defer to default Outlayer method + * and reference the Isotope instance as `this` + **/ + var facadeMethods = [ + '_resetLayout', + '_getItemLayoutPosition', + '_manageStamp', + '_getContainerSize', + '_getElementOffset', + 'needsResizeLayout', + '_getOption' + ]; + + facadeMethods.forEach( function( methodName ) { + proto[ methodName ] = function() { + return Outlayer.prototype[ methodName ].apply( this.isotope, arguments ); + }; + }); + + // ----- ----- // + + // for horizontal layout modes, check vertical size + proto.needsVerticalResizeLayout = function() { + // don't trigger if size did not change + var size = getSize( this.isotope.element ); + // check that this.size and size are there + // IE8 triggers resize on body size change, so they might not be + var hasSizes = this.isotope.size && size; + return hasSizes && size.innerHeight != this.isotope.size.innerHeight; + }; + + // ----- measurements ----- // + + proto._getMeasurement = function() { + this.isotope._getMeasurement.apply( this, arguments ); + }; + + proto.getColumnWidth = function() { + this.getSegmentSize( 'column', 'Width' ); + }; + + proto.getRowHeight = function() { + this.getSegmentSize( 'row', 'Height' ); + }; + + /** + * get columnWidth or rowHeight + * segment: 'column' or 'row' + * size 'Width' or 'Height' + **/ + proto.getSegmentSize = function( segment, size ) { + var segmentName = segment + size; + var outerSize = 'outer' + size; + // columnWidth / outerWidth // rowHeight / outerHeight + this._getMeasurement( segmentName, outerSize ); + // got rowHeight or columnWidth, we can chill + if ( this[ segmentName ] ) { + return; + } + // fall back to item of first element + var firstItemSize = this.getFirstItemSize(); + this[ segmentName ] = firstItemSize && firstItemSize[ outerSize ] || + // or size of container + this.isotope.size[ 'inner' + size ]; + }; + + proto.getFirstItemSize = function() { + var firstItem = this.isotope.filteredItems[0]; + return firstItem && firstItem.element && getSize( firstItem.element ); + }; + + // ----- methods that should reference isotope ----- // + + proto.layout = function() { + this.isotope.layout.apply( this.isotope, arguments ); + }; + + proto.getSize = function() { + this.isotope.getSize(); + this.size = this.isotope.size; + }; + + // -------------------------- create -------------------------- // + + LayoutMode.modes = {}; + + LayoutMode.create = function( namespace, options ) { + + function Mode() { + LayoutMode.apply( this, arguments ); + } + + Mode.prototype = Object.create( proto ); + Mode.prototype.constructor = Mode; + + // default options + if ( options ) { + Mode.options = options; + } + + Mode.prototype.namespace = namespace; + // register in Isotope + LayoutMode.modes[ namespace ] = Mode; + + return Mode; + }; + + return LayoutMode; + +})); + +/*! + * Masonry v4.2.1 + * Cascading grid layout library + * https://masonry.desandro.com + * MIT License + * by David DeSandro + */ + +( function( window, factory ) { + // universal module definition + /* jshint strict: false */ /*globals define, module, require */ + if ( typeof define == 'function' && define.amd ) { + // AMD + define( 'masonry-layout/masonry',[ + 'outlayer/outlayer', + 'get-size/get-size' + ], + factory ); + } else if ( typeof module == 'object' && module.exports ) { + // CommonJS + module.exports = factory( + require('outlayer'), + require('get-size') + ); + } else { + // browser global + window.Masonry = factory( + window.Outlayer, + window.getSize + ); + } + +}( window, function factory( Outlayer, getSize ) { + + + +// -------------------------- masonryDefinition -------------------------- // + + // create an Outlayer layout class + var Masonry = Outlayer.create('masonry'); + // isFitWidth -> fitWidth + Masonry.compatOptions.fitWidth = 'isFitWidth'; + + var proto = Masonry.prototype; + + proto._resetLayout = function() { + this.getSize(); + this._getMeasurement( 'columnWidth', 'outerWidth' ); + this._getMeasurement( 'gutter', 'outerWidth' ); + this.measureColumns(); + + // reset column Y + this.colYs = []; + for ( var i=0; i < this.cols; i++ ) { + this.colYs.push( 0 ); + } + + this.maxY = 0; + this.horizontalColIndex = 0; + }; + + proto.measureColumns = function() { + this.getContainerWidth(); + // if columnWidth is 0, default to outerWidth of first item + if ( !this.columnWidth ) { + var firstItem = this.items[0]; + var firstItemElem = firstItem && firstItem.element; + // columnWidth fall back to item of first element + this.columnWidth = firstItemElem && getSize( firstItemElem ).outerWidth || + // if first elem has no width, default to size of container + this.containerWidth; + } + + var columnWidth = this.columnWidth += this.gutter; + + // calculate columns + var containerWidth = this.containerWidth + this.gutter; + var cols = containerWidth / columnWidth; + // fix rounding errors, typically with gutters + var excess = columnWidth - containerWidth % columnWidth; + // if overshoot is less than a pixel, round up, otherwise floor it + var mathMethod = excess && excess < 1 ? 'round' : 'floor'; + cols = Math[ mathMethod ]( cols ); + this.cols = Math.max( cols, 1 ); + }; + + proto.getContainerWidth = function() { + // container is parent if fit width + var isFitWidth = this._getOption('fitWidth'); + var container = isFitWidth ? this.element.parentNode : this.element; + // check that this.size and size are there + // IE8 triggers resize on body size change, so they might not be + var size = getSize( container ); + this.containerWidth = size && size.innerWidth; + }; + + proto._getItemLayoutPosition = function( item ) { + item.getSize(); + // how many columns does this brick span + var remainder = item.size.outerWidth % this.columnWidth; + var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil'; + // round if off by 1 pixel, otherwise use ceil + var colSpan = Math[ mathMethod ]( item.size.outerWidth / this.columnWidth ); + colSpan = Math.min( colSpan, this.cols ); + // use horizontal or top column position + var colPosMethod = this.options.horizontalOrder ? + '_getHorizontalColPosition' : '_getTopColPosition'; + var colPosition = this[ colPosMethod ]( colSpan, item ); + // position the brick + var position = { + x: this.columnWidth * colPosition.col, + y: colPosition.y + }; + // apply setHeight to necessary columns + var setHeight = colPosition.y + item.size.outerHeight; + var setMax = colSpan + colPosition.col; + for ( var i = colPosition.col; i < setMax; i++ ) { + this.colYs[i] = setHeight; + } + + return position; + }; + + proto._getTopColPosition = function( colSpan ) { + var colGroup = this._getTopColGroup( colSpan ); + // get the minimum Y value from the columns + var minimumY = Math.min.apply( Math, colGroup ); + + return { + col: colGroup.indexOf( minimumY ), + y: minimumY, + }; + }; + + /** + * @param {Number} colSpan - number of columns the element spans + * @returns {Array} colGroup + */ + proto._getTopColGroup = function( colSpan ) { + if ( colSpan < 2 ) { + // if brick spans only one column, use all the column Ys + return this.colYs; + } + + var colGroup = []; + // how many different places could this brick fit horizontally + var groupCount = this.cols + 1 - colSpan; + // for each group potential horizontal position + for ( var i = 0; i < groupCount; i++ ) { + colGroup[i] = this._getColGroupY( i, colSpan ); + } + return colGroup; + }; + + proto._getColGroupY = function( col, colSpan ) { + if ( colSpan < 2 ) { + return this.colYs[ col ]; + } + // make an array of colY values for that one group + var groupColYs = this.colYs.slice( col, col + colSpan ); + // and get the max value of the array + return Math.max.apply( Math, groupColYs ); + }; + + // get column position based on horizontal index. #873 + proto._getHorizontalColPosition = function( colSpan, item ) { + var col = this.horizontalColIndex % this.cols; + var isOver = colSpan > 1 && col + colSpan > this.cols; + // shift to next row if item can't fit on current row + col = isOver ? 0 : col; + // don't let zero-size items take up space + var hasSize = item.size.outerWidth && item.size.outerHeight; + this.horizontalColIndex = hasSize ? col + colSpan : this.horizontalColIndex; + + return { + col: col, + y: this._getColGroupY( col, colSpan ), + }; + }; + + proto._manageStamp = function( stamp ) { + var stampSize = getSize( stamp ); + var offset = this._getElementOffset( stamp ); + // get the columns that this stamp affects + var isOriginLeft = this._getOption('originLeft'); + var firstX = isOriginLeft ? offset.left : offset.right; + var lastX = firstX + stampSize.outerWidth; + var firstCol = Math.floor( firstX / this.columnWidth ); + firstCol = Math.max( 0, firstCol ); + var lastCol = Math.floor( lastX / this.columnWidth ); + // lastCol should not go over if multiple of columnWidth #425 + lastCol -= lastX % this.columnWidth ? 0 : 1; + lastCol = Math.min( this.cols - 1, lastCol ); + // set colYs to bottom of the stamp + + var isOriginTop = this._getOption('originTop'); + var stampMaxY = ( isOriginTop ? offset.top : offset.bottom ) + + stampSize.outerHeight; + for ( var i = firstCol; i <= lastCol; i++ ) { + this.colYs[i] = Math.max( stampMaxY, this.colYs[i] ); + } + }; + + proto._getContainerSize = function() { + this.maxY = Math.max.apply( Math, this.colYs ); + var size = { + height: this.maxY + }; + + if ( this._getOption('fitWidth') ) { + size.width = this._getContainerFitWidth(); + } + + return size; + }; + + proto._getContainerFitWidth = function() { + var unusedCols = 0; + // count unused columns + var i = this.cols; + while ( --i ) { + if ( this.colYs[i] !== 0 ) { + break; + } + unusedCols++; + } + // fit container to columns that have been used + return ( this.cols - unusedCols ) * this.columnWidth - this.gutter; + }; + + proto.needsResizeLayout = function() { + var previousWidth = this.containerWidth; + this.getContainerWidth(); + return previousWidth != this.containerWidth; + }; + + return Masonry; + +})); + +/*! + * Masonry layout mode + * sub-classes Masonry + * https://masonry.desandro.com + */ + +( function( window, factory ) { + // universal module definition + /* jshint strict: false */ /*globals define, module, require */ + if ( typeof define == 'function' && define.amd ) { + // AMD + define( 'isotope-layout/js/layout-modes/masonry',[ + '../layout-mode', + 'masonry-layout/masonry' + ], + factory ); + } else if ( typeof module == 'object' && module.exports ) { + // CommonJS + module.exports = factory( + require('../layout-mode'), + require('masonry-layout') + ); + } else { + // browser global + factory( + window.Isotope.LayoutMode, + window.Masonry + ); + } + +}( window, function factory( LayoutMode, Masonry ) { +'use strict'; + +// -------------------------- masonryDefinition -------------------------- // + + // create an Outlayer layout class + var MasonryMode = LayoutMode.create('masonry'); + + var proto = MasonryMode.prototype; + + var keepModeMethods = { + _getElementOffset: true, + layout: true, + _getMeasurement: true + }; + + // inherit Masonry prototype + for ( var method in Masonry.prototype ) { + // do not inherit mode methods + if ( !keepModeMethods[ method ] ) { + proto[ method ] = Masonry.prototype[ method ]; + } + } + + var measureColumns = proto.measureColumns; + proto.measureColumns = function() { + // set items, used if measuring first item + this.items = this.isotope.filteredItems; + measureColumns.call( this ); + }; + + // point to mode options for fitWidth + var _getOption = proto._getOption; + proto._getOption = function( option ) { + if ( option == 'fitWidth' ) { + return this.options.isFitWidth !== undefined ? + this.options.isFitWidth : this.options.fitWidth; + } + return _getOption.apply( this.isotope, arguments ); + }; + + return MasonryMode; + +})); + +/** + * fitRows layout mode + */ + +( function( window, factory ) { + // universal module definition + /* jshint strict: false */ /*globals define, module, require */ + if ( typeof define == 'function' && define.amd ) { + // AMD + define( 'isotope-layout/js/layout-modes/fit-rows',[ + '../layout-mode' + ], + factory ); + } else if ( typeof exports == 'object' ) { + // CommonJS + module.exports = factory( + require('../layout-mode') + ); + } else { + // browser global + factory( + window.Isotope.LayoutMode + ); + } + +}( window, function factory( LayoutMode ) { +'use strict'; + +var FitRows = LayoutMode.create('fitRows'); + +var proto = FitRows.prototype; + +proto._resetLayout = function() { + this.x = 0; + this.y = 0; + this.maxY = 0; + this._getMeasurement( 'gutter', 'outerWidth' ); +}; + +proto._getItemLayoutPosition = function( item ) { + item.getSize(); + + var itemWidth = item.size.outerWidth + this.gutter; + // if this element cannot fit in the current row + var containerWidth = this.isotope.size.innerWidth + this.gutter; + if ( this.x !== 0 && itemWidth + this.x > containerWidth ) { + this.x = 0; + this.y = this.maxY; + } + + var position = { + x: this.x, + y: this.y + }; + + this.maxY = Math.max( this.maxY, this.y + item.size.outerHeight ); + this.x += itemWidth; + + return position; +}; + +proto._getContainerSize = function() { + return { height: this.maxY }; +}; + +return FitRows; + +})); + +/** + * vertical layout mode + */ + +( function( window, factory ) { + // universal module definition + /* jshint strict: false */ /*globals define, module, require */ + if ( typeof define == 'function' && define.amd ) { + // AMD + define( 'isotope-layout/js/layout-modes/vertical',[ + '../layout-mode' + ], + factory ); + } else if ( typeof module == 'object' && module.exports ) { + // CommonJS + module.exports = factory( + require('../layout-mode') + ); + } else { + // browser global + factory( + window.Isotope.LayoutMode + ); + } + +}( window, function factory( LayoutMode ) { +'use strict'; + +var Vertical = LayoutMode.create( 'vertical', { + horizontalAlignment: 0 +}); + +var proto = Vertical.prototype; + +proto._resetLayout = function() { + this.y = 0; +}; + +proto._getItemLayoutPosition = function( item ) { + item.getSize(); + var x = ( this.isotope.size.innerWidth - item.size.outerWidth ) * + this.options.horizontalAlignment; + var y = this.y; + this.y += item.size.outerHeight; + return { x: x, y: y }; +}; + +proto._getContainerSize = function() { + return { height: this.y }; +}; + +return Vertical; + +})); + +/*! + * Isotope v3.0.5 + * + * Licensed GPLv3 for open source use + * or Isotope Commercial License for commercial use + * + * https://isotope.metafizzy.co + * Copyright 2017 Metafizzy + */ + +( function( window, factory ) { + // universal module definition + /* jshint strict: false */ /*globals define, module, require */ + if ( typeof define == 'function' && define.amd ) { + // AMD + define( [ + 'outlayer/outlayer', + 'get-size/get-size', + 'desandro-matches-selector/matches-selector', + 'fizzy-ui-utils/utils', + 'isotope-layout/js/item', + 'isotope-layout/js/layout-mode', + // include default layout modes + 'isotope-layout/js/layout-modes/masonry', + 'isotope-layout/js/layout-modes/fit-rows', + 'isotope-layout/js/layout-modes/vertical' + ], + function( Outlayer, getSize, matchesSelector, utils, Item, LayoutMode ) { + return factory( window, Outlayer, getSize, matchesSelector, utils, Item, LayoutMode ); + }); + } else if ( typeof module == 'object' && module.exports ) { + // CommonJS + module.exports = factory( + window, + require('outlayer'), + require('get-size'), + require('desandro-matches-selector'), + require('fizzy-ui-utils'), + require('isotope-layout/js/item'), + require('isotope-layout/js/layout-mode'), + // include default layout modes + require('isotope-layout/js/layout-modes/masonry'), + require('isotope-layout/js/layout-modes/fit-rows'), + require('isotope-layout/js/layout-modes/vertical') + ); + } else { + // browser global + window.Isotope = factory( + window, + window.Outlayer, + window.getSize, + window.matchesSelector, + window.fizzyUIUtils, + window.Isotope.Item, + window.Isotope.LayoutMode + ); + } + +}( window, function factory( window, Outlayer, getSize, matchesSelector, utils, + Item, LayoutMode ) { + + + +// -------------------------- vars -------------------------- // + +var jQuery = window.jQuery; + +// -------------------------- helpers -------------------------- // + +var trim = String.prototype.trim ? + function( str ) { + return str.trim(); + } : + function( str ) { + return str.replace( /^\s+|\s+$/g, '' ); + }; + +// -------------------------- isotopeDefinition -------------------------- // + + // create an Outlayer layout class + var Isotope = Outlayer.create( 'isotope', { + layoutMode: 'masonry', + isJQueryFiltering: true, + sortAscending: true + }); + + Isotope.Item = Item; + Isotope.LayoutMode = LayoutMode; + + var proto = Isotope.prototype; + + proto._create = function() { + this.itemGUID = 0; + // functions that sort items + this._sorters = {}; + this._getSorters(); + // call super + Outlayer.prototype._create.call( this ); + + // create layout modes + this.modes = {}; + // start filteredItems with all items + this.filteredItems = this.items; + // keep of track of sortBys + this.sortHistory = [ 'original-order' ]; + // create from registered layout modes + for ( var name in LayoutMode.modes ) { + this._initLayoutMode( name ); + } + }; + + proto.reloadItems = function() { + // reset item ID counter + this.itemGUID = 0; + // call super + Outlayer.prototype.reloadItems.call( this ); + }; + + proto._itemize = function() { + var items = Outlayer.prototype._itemize.apply( this, arguments ); + // assign ID for original-order + for ( var i=0; i < items.length; i++ ) { + var item = items[i]; + item.id = this.itemGUID++; + } + this._updateItemsSortData( items ); + return items; + }; + + + // -------------------------- layout -------------------------- // + + proto._initLayoutMode = function( name ) { + var Mode = LayoutMode.modes[ name ]; + // set mode options + // HACK extend initial options, back-fill in default options + var initialOpts = this.options[ name ] || {}; + this.options[ name ] = Mode.options ? + utils.extend( Mode.options, initialOpts ) : initialOpts; + // init layout mode instance + this.modes[ name ] = new Mode( this ); + }; + + + proto.layout = function() { + // if first time doing layout, do all magic + if ( !this._isLayoutInited && this._getOption('initLayout') ) { + this.arrange(); + return; + } + this._layout(); + }; + + // private method to be used in layout() & magic() + proto._layout = function() { + // don't animate first layout + var isInstant = this._getIsInstant(); + // layout flow + this._resetLayout(); + this._manageStamps(); + this.layoutItems( this.filteredItems, isInstant ); + + // flag for initalized + this._isLayoutInited = true; + }; + + // filter + sort + layout + proto.arrange = function( opts ) { + // set any options pass + this.option( opts ); + this._getIsInstant(); + // filter, sort, and layout + + // filter + var filtered = this._filter( this.items ); + this.filteredItems = filtered.matches; + + this._bindArrangeComplete(); + + if ( this._isInstant ) { + this._noTransition( this._hideReveal, [ filtered ] ); + } else { + this._hideReveal( filtered ); + } + + this._sort(); + this._layout(); + }; + // alias to _init for main plugin method + proto._init = proto.arrange; + + proto._hideReveal = function( filtered ) { + this.reveal( filtered.needReveal ); + this.hide( filtered.needHide ); + }; + + // HACK + // Don't animate/transition first layout + // Or don't animate/transition other layouts + proto._getIsInstant = function() { + var isLayoutInstant = this._getOption('layoutInstant'); + var isInstant = isLayoutInstant !== undefined ? isLayoutInstant : + !this._isLayoutInited; + this._isInstant = isInstant; + return isInstant; + }; + + // listen for layoutComplete, hideComplete and revealComplete + // to trigger arrangeComplete + proto._bindArrangeComplete = function() { + // listen for 3 events to trigger arrangeComplete + var isLayoutComplete, isHideComplete, isRevealComplete; + var _this = this; + function arrangeParallelCallback() { + if ( isLayoutComplete && isHideComplete && isRevealComplete ) { + _this.dispatchEvent( 'arrangeComplete', null, [ _this.filteredItems ] ); + } + } + this.once( 'layoutComplete', function() { + isLayoutComplete = true; + arrangeParallelCallback(); + }); + this.once( 'hideComplete', function() { + isHideComplete = true; + arrangeParallelCallback(); + }); + this.once( 'revealComplete', function() { + isRevealComplete = true; + arrangeParallelCallback(); + }); + }; + + // -------------------------- filter -------------------------- // + + proto._filter = function( items ) { + var filter = this.options.filter; + filter = filter || '*'; + var matches = []; + var hiddenMatched = []; + var visibleUnmatched = []; + + var test = this._getFilterTest( filter ); + + // test each item + for ( var i=0; i < items.length; i++ ) { + var item = items[i]; + if ( item.isIgnored ) { + continue; + } + // add item to either matched or unmatched group + var isMatched = test( item ); + // item.isFilterMatched = isMatched; + // add to matches if its a match + if ( isMatched ) { + matches.push( item ); + } + // add to additional group if item needs to be hidden or revealed + if ( isMatched && item.isHidden ) { + hiddenMatched.push( item ); + } else if ( !isMatched && !item.isHidden ) { + visibleUnmatched.push( item ); + } + } + + // return collections of items to be manipulated + return { + matches: matches, + needReveal: hiddenMatched, + needHide: visibleUnmatched + }; + }; + + // get a jQuery, function, or a matchesSelector test given the filter + proto._getFilterTest = function( filter ) { + if ( jQuery && this.options.isJQueryFiltering ) { + // use jQuery + return function( item ) { + return jQuery( item.element ).is( filter ); + }; + } + if ( typeof filter == 'function' ) { + // use filter as function + return function( item ) { + return filter( item.element ); + }; + } + // default, use filter as selector string + return function( item ) { + return matchesSelector( item.element, filter ); + }; + }; + + // -------------------------- sorting -------------------------- // + + /** + * @params {Array} elems + * @public + */ + proto.updateSortData = function( elems ) { + // get items + var items; + if ( elems ) { + elems = utils.makeArray( elems ); + items = this.getItems( elems ); + } else { + // update all items if no elems provided + items = this.items; + } + + this._getSorters(); + this._updateItemsSortData( items ); + }; + + proto._getSorters = function() { + var getSortData = this.options.getSortData; + for ( var key in getSortData ) { + var sorter = getSortData[ key ]; + this._sorters[ key ] = mungeSorter( sorter ); + } + }; + + /** + * @params {Array} items - of Isotope.Items + * @private + */ + proto._updateItemsSortData = function( items ) { + // do not update if no items + var len = items && items.length; + + for ( var i=0; len && i < len; i++ ) { + var item = items[i]; + item.updateSortData(); + } + }; + + // ----- munge sorter ----- // + + // encapsulate this, as we just need mungeSorter + // other functions in here are just for munging + var mungeSorter = ( function() { + // add a magic layer to sorters for convienent shorthands + // `.foo-bar` will use the text of .foo-bar querySelector + // `[foo-bar]` will use attribute + // you can also add parser + // `.foo-bar parseInt` will parse that as a number + function mungeSorter( sorter ) { + // if not a string, return function or whatever it is + if ( typeof sorter != 'string' ) { + return sorter; + } + // parse the sorter string + var args = trim( sorter ).split(' '); + var query = args[0]; + // check if query looks like [an-attribute] + var attrMatch = query.match( /^\[(.+)\]$/ ); + var attr = attrMatch && attrMatch[1]; + var getValue = getValueGetter( attr, query ); + // use second argument as a parser + var parser = Isotope.sortDataParsers[ args[1] ]; + // parse the value, if there was a parser + sorter = parser ? function( elem ) { + return elem && parser( getValue( elem ) ); + } : + // otherwise just return value + function( elem ) { + return elem && getValue( elem ); + }; + + return sorter; + } + + // get an attribute getter, or get text of the querySelector + function getValueGetter( attr, query ) { + // if query looks like [foo-bar], get attribute + if ( attr ) { + return function getAttribute( elem ) { + return elem.getAttribute( attr ); + }; + } + + // otherwise, assume its a querySelector, and get its text + return function getChildText( elem ) { + var child = elem.querySelector( query ); + return child && child.textContent; + }; + } + + return mungeSorter; + })(); + + // parsers used in getSortData shortcut strings + Isotope.sortDataParsers = { + 'parseInt': function( val ) { + return parseInt( val, 10 ); + }, + 'parseFloat': function( val ) { + return parseFloat( val ); + } + }; + + // ----- sort method ----- // + + // sort filteredItem order + proto._sort = function() { + if ( !this.options.sortBy ) { + return; + } + // keep track of sortBy History + var sortBys = utils.makeArray( this.options.sortBy ); + if ( !this._getIsSameSortBy( sortBys ) ) { + // concat all sortBy and sortHistory, add to front, oldest goes in last + this.sortHistory = sortBys.concat( this.sortHistory ); + } + // sort magic + var itemSorter = getItemSorter( this.sortHistory, this.options.sortAscending ); + this.filteredItems.sort( itemSorter ); + }; + + // check if sortBys is same as start of sortHistory + proto._getIsSameSortBy = function( sortBys ) { + for ( var i=0; i < sortBys.length; i++ ) { + if ( sortBys[i] != this.sortHistory[i] ) { + return false; + } + } + return true; + }; + + // returns a function used for sorting + function getItemSorter( sortBys, sortAsc ) { + return function sorter( itemA, itemB ) { + // cycle through all sortKeys + for ( var i = 0; i < sortBys.length; i++ ) { + var sortBy = sortBys[i]; + var a = itemA.sortData[ sortBy ]; + var b = itemB.sortData[ sortBy ]; + if ( a > b || a < b ) { + // if sortAsc is an object, use the value given the sortBy key + var isAscending = sortAsc[ sortBy ] !== undefined ? sortAsc[ sortBy ] : sortAsc; + var direction = isAscending ? 1 : -1; + return ( a > b ? 1 : -1 ) * direction; + } + } + return 0; + }; + } + + // -------------------------- methods -------------------------- // + + // get layout mode + proto._mode = function() { + var layoutMode = this.options.layoutMode; + var mode = this.modes[ layoutMode ]; + if ( !mode ) { + // TODO console.error + throw new Error( 'No layout mode: ' + layoutMode ); + } + // HACK sync mode's options + // any options set after init for layout mode need to be synced + mode.options = this.options[ layoutMode ]; + return mode; + }; + + proto._resetLayout = function() { + // trigger original reset layout + Outlayer.prototype._resetLayout.call( this ); + this._mode()._resetLayout(); + }; + + proto._getItemLayoutPosition = function( item ) { + return this._mode()._getItemLayoutPosition( item ); + }; + + proto._manageStamp = function( stamp ) { + this._mode()._manageStamp( stamp ); + }; + + proto._getContainerSize = function() { + return this._mode()._getContainerSize(); + }; + + proto.needsResizeLayout = function() { + return this._mode().needsResizeLayout(); + }; + + // -------------------------- adding & removing -------------------------- // + + // HEADS UP overwrites default Outlayer appended + proto.appended = function( elems ) { + var items = this.addItems( elems ); + if ( !items.length ) { + return; + } + // filter, layout, reveal new items + var filteredItems = this._filterRevealAdded( items ); + // add to filteredItems + this.filteredItems = this.filteredItems.concat( filteredItems ); + }; + + // HEADS UP overwrites default Outlayer prepended + proto.prepended = function( elems ) { + var items = this._itemize( elems ); + if ( !items.length ) { + return; + } + // start new layout + this._resetLayout(); + this._manageStamps(); + // filter, layout, reveal new items + var filteredItems = this._filterRevealAdded( items ); + // layout previous items + this.layoutItems( this.filteredItems ); + // add to items and filteredItems + this.filteredItems = filteredItems.concat( this.filteredItems ); + this.items = items.concat( this.items ); + }; + + proto._filterRevealAdded = function( items ) { + var filtered = this._filter( items ); + this.hide( filtered.needHide ); + // reveal all new items + this.reveal( filtered.matches ); + // layout new items, no transition + this.layoutItems( filtered.matches, true ); + return filtered.matches; + }; + + /** + * Filter, sort, and layout newly-appended item elements + * @param {Array or NodeList or Element} elems + */ + proto.insert = function( elems ) { + var items = this.addItems( elems ); + if ( !items.length ) { + return; + } + // append item elements + var i, item; + var len = items.length; + for ( i=0; i < len; i++ ) { + item = items[i]; + this.element.appendChild( item.element ); + } + // filter new stuff + var filteredInsertItems = this._filter( items ).matches; + // set flag + for ( i=0; i < len; i++ ) { + items[i].isLayoutInstant = true; + } + this.arrange(); + // reset flag + for ( i=0; i < len; i++ ) { + delete items[i].isLayoutInstant; + } + this.reveal( filteredInsertItems ); + }; + + var _remove = proto.remove; + proto.remove = function( elems ) { + elems = utils.makeArray( elems ); + var removeItems = this.getItems( elems ); + // do regular thing + _remove.call( this, elems ); + // bail if no items to remove + var len = removeItems && removeItems.length; + // remove elems from filteredItems + for ( var i=0; len && i < len; i++ ) { + var item = removeItems[i]; + // remove item from collection + utils.removeFrom( this.filteredItems, item ); + } + }; + + proto.shuffle = function() { + // update random sortData + for ( var i=0; i < this.items.length; i++ ) { + var item = this.items[i]; + item.sortData.random = Math.random(); + } + this.options.sortBy = 'random'; + this._sort(); + this._layout(); + }; + + /** + * trigger fn without transition + * kind of hacky to have this in the first place + * @param {Function} fn + * @param {Array} args + * @returns ret + * @private + */ + proto._noTransition = function( fn, args ) { + // save transitionDuration before disabling + var transitionDuration = this.options.transitionDuration; + // disable transition + this.options.transitionDuration = 0; + // do it + var returnValue = fn.apply( this, args ); + // re-enable transition for reveal + this.options.transitionDuration = transitionDuration; + return returnValue; + }; + + // ----- helper methods ----- // + + /** + * getter method for getting filtered item elements + * @returns {Array} elems - collection of item elements + */ + proto.getFilteredItemElements = function() { + return this.filteredItems.map( function( item ) { + return item.element; + }); + }; + + // ----- ----- // + + return Isotope; + +})); + diff --git a/task_webDev/Ananya_Mohapatra_2102070007/lib/isotope/isotope.pkgd.min.js b/task_webDev/Ananya_Mohapatra_2102070007/lib/isotope/isotope.pkgd.min.js new file mode 100644 index 0000000..f6361b9 --- /dev/null +++ b/task_webDev/Ananya_Mohapatra_2102070007/lib/isotope/isotope.pkgd.min.js @@ -0,0 +1,12 @@ +/*! + * Isotope PACKAGED v3.0.5 + * + * Licensed GPLv3 for open source use + * or Isotope Commercial License for commercial use + * + * https://isotope.metafizzy.co + * Copyright 2017 Metafizzy + */ + +!function(t,e){"function"==typeof define&&define.amd?define("jquery-bridget/jquery-bridget",["jquery"],function(i){return e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("jquery")):t.jQueryBridget=e(t,t.jQuery)}(window,function(t,e){"use strict";function i(i,s,a){function u(t,e,o){var n,s="$()."+i+'("'+e+'")';return t.each(function(t,u){var h=a.data(u,i);if(!h)return void r(i+" not initialized. Cannot call methods, i.e. "+s);var d=h[e];if(!d||"_"==e.charAt(0))return void r(s+" is not a valid method");var l=d.apply(h,o);n=void 0===n?l:n}),void 0!==n?n:t}function h(t,e){t.each(function(t,o){var n=a.data(o,i);n?(n.option(e),n._init()):(n=new s(o,e),a.data(o,i,n))})}a=a||e||t.jQuery,a&&(s.prototype.option||(s.prototype.option=function(t){a.isPlainObject(t)&&(this.options=a.extend(!0,this.options,t))}),a.fn[i]=function(t){if("string"==typeof t){var e=n.call(arguments,1);return u(this,t,e)}return h(this,t),this},o(a))}function o(t){!t||t&&t.bridget||(t.bridget=i)}var n=Array.prototype.slice,s=t.console,r="undefined"==typeof s?function(){}:function(t){s.error(t)};return o(e||t.jQuery),i}),function(t,e){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",e):"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}("undefined"!=typeof window?window:this,function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},o=i[t]=i[t]||[];return o.indexOf(e)==-1&&o.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{},o=i[t]=i[t]||{};return o[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var o=i.indexOf(e);return o!=-1&&i.splice(o,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){i=i.slice(0),e=e||[];for(var o=this._onceEvents&&this._onceEvents[t],n=0;n