├── .gitignore ├── .idea ├── .gitignore ├── Santafied.iml ├── misc.xml ├── modules.xml └── vcs.xml ├── Christmas Activities Calendar └── New folder │ ├── css │ ├── bootstrap.min.css │ └── style.css │ ├── images │ ├── Banning.JPG │ ├── Canals.jpg │ ├── DgreenBoxBackground.jpe │ ├── DisneyConcert.jpg │ ├── Disneyland.jpg │ ├── FarmersMarket.JPG │ ├── GreenBoxBackground.jpe │ ├── Grove.jpeg │ ├── Hermosa.jpg │ ├── HollywoodParade.jpg │ ├── LaLive.jpg │ ├── ManhattanBeach.png │ ├── MissionInn.jpg │ ├── MusicHall.jpg │ ├── NaplesIsland.jpg │ ├── PershingSquare.jpg │ ├── PrintingMuseum.jpg │ ├── QueenMary.jpg │ ├── RedBoxBackground.png │ ├── RedondoBoat.jpg │ ├── Rodeo.jpg │ ├── SeasideLagoon.jpg │ ├── SleepyHollow.jpg │ ├── ThirdStreet.jpg │ ├── TorranceMemorial.jpg │ ├── Universal.jpg │ ├── YellowBoxBackground.jpg │ └── Zoo.jpg │ ├── index.html │ └── js │ ├── bootstrap.js │ ├── jquery-1.7.1.min.js │ ├── masonry.pkgd.min.js │ ├── modernizr-2.8.3.min.js │ └── script.js ├── My_Santa ├── css │ ├── activites.css │ ├── books.css │ ├── games.css │ ├── gift.css │ ├── index.css │ ├── movie.css │ ├── recipes.css │ └── songs.css ├── html pages │ ├── activites.html │ ├── books.html │ ├── games.html │ ├── gift.html │ ├── index.html │ ├── movie.html │ ├── recipes.html │ └── songs.html ├── img │ ├── 4.jpg │ ├── Facts │ │ ├── 10.jpg │ │ ├── 9.jpg │ │ └── index_bg.png │ ├── activities_bg.jpg │ ├── books │ │ ├── 1.jpg │ │ ├── 10.jpg │ │ ├── 11.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ ├── 9.jpg │ │ ├── books_bg.jpg │ │ └── books_mobile_bg.jpg │ ├── cookie.jpg │ ├── gift │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── airpods.jpg │ │ ├── earrings.jpg │ │ ├── gift_bg.jpg │ │ ├── gift_mobile_bg.jpg │ │ ├── iphone.jpg │ │ └── vr.jpg │ ├── github-logo-icon-16155.png │ ├── lights.jpg │ ├── movie │ │ ├── movie_bg.jpg │ │ └── movie_mobile_bg.jpg │ ├── recipes │ │ ├── Bûche de Noël.jpg │ │ ├── cabbage_rolls.jpg │ │ ├── gerbeaud.jpg │ │ ├── panettone.jpg │ │ ├── pudding.jpg │ │ ├── recipe_bg.jpg │ │ └── roast_turkey.jpg │ ├── santa-claus-game.jpg │ ├── sledge.jpg │ ├── songs_bg.jpg │ ├── songs_mobile_bg.jpg │ └── video │ │ └── reindeer.mp4 └── js │ ├── My_Santa-page-header.js │ └── app.js ├── Readme.md ├── assets ├── css │ ├── activities.css │ ├── blog.css │ ├── calendar.css │ ├── darkmode.css │ ├── elf-name-generator.css │ ├── facts.css │ ├── films.css │ ├── gifts.css │ ├── home.css │ ├── international.css │ ├── main.css │ ├── mouse-trail-snowball.css │ ├── name-generators.css │ ├── normalize.css │ ├── recipes.css │ ├── reindeer-name-generator.css │ ├── snowflakes.css │ └── snowman-name-generator.css ├── data │ ├── games.js │ ├── songs.js │ └── theRecipes.js ├── img │ ├── Gift.jpg │ ├── gift_banner.jpg │ ├── gift_bears.jpg │ ├── gift_books.jpg │ ├── gift_books_novel.jpg │ ├── gift_cats.jpg │ ├── gift_colours.jpg │ ├── gift_colours_pencils.jpg │ ├── gift_dolls.jpg │ ├── gift_fox.jpg │ ├── gift_homedecor.jpg │ ├── gift_homedecor2.jpg │ ├── gift_homedecor_candles.jpg │ ├── gift_mug.jpg │ ├── gift_owl.jpg │ ├── gift_reindeer.jpg │ ├── gift_sneaker_socks.jpg │ ├── gift_snowman.jpg │ ├── gift_wristwatch.jpg │ ├── gift_wristwatch_sport.jpg │ ├── reindeer.svg │ ├── santa-claus.svg │ ├── santafied.jpg │ ├── santafied_logo.svg │ └── snowman.svg └── js │ ├── .gitkeep │ ├── blog-script.js │ ├── darkmode.js │ ├── elf-name-generator.js │ ├── email-validation.js │ ├── lazyloading.js │ ├── mouse-trail-snowball.js │ ├── navLink-generator.js │ ├── pages-footer.js │ ├── pages-header.js │ ├── recipeCard.js │ ├── reindeer-name-generator.js │ ├── snowman-name-generator.js │ ├── songsCard.js │ └── stock-photos.js ├── design ├── card-designs.png ├── general-layout.png └── newdesign.png ├── img ├── activity 2.jpg ├── activity.jpg ├── books.jpg ├── calendar.jpg ├── factsSanta.jpg ├── favicon.png ├── feliz_navidad_cover.jpg ├── games.jpg ├── gift_snowman.jpg ├── gifts.jpg ├── microphone.jpg ├── movies.png ├── name.jpg ├── recipes.jpg ├── snow-xmas.jpg ├── songs.jpg └── wish.jpg ├── index.html └── pages ├── activities.html ├── blog.html ├── books.html ├── calendar.html ├── elf-name-generator.html ├── facts.html ├── films.html ├── games.html ├── gifts.html ├── international.html ├── name-generators.html ├── party-costumes.html ├── recipes.html ├── reindeer-name-generator.html ├── snowman-name-generator.html ├── songs.html ├── stock-photos.html └── wishes.html /.gitignore: -------------------------------------------------------------------------------- 1 | .vs 2 | .vscode 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Default ignored files 3 | /workspace.xml -------------------------------------------------------------------------------- /.idea/Santafied.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | /*background-color: #EDECDB;*/ 3 | font-family: sans-serif; 4 | font-size: 2em; 5 | font-family: 'Sofia', cursive; 6 | text-align: center; 7 | } 8 | 9 | #wrapper { 10 | width: 80%; 11 | margin-left: auto; 12 | margin-right: auto; 13 | } 14 | 15 | .item { 16 | /*border: 1px solid white;*/ 17 | border-radius: 5px; 18 | box-shadow: 1px 1px 2px black; 19 | color: white; 20 | font-weight:900; 21 | } 22 | 23 | .sm-box { 24 | height: 75px; 25 | width: 13%; 26 | margin-right: 1%; 27 | margin-bottom: 1%; 28 | } 29 | 30 | .md-box { 31 | height: 100px; 32 | width: 13%; 33 | margin-right: 1%; 34 | margin-bottom: 1%; 35 | } 36 | 37 | .lg-box { 38 | height: 150px; 39 | width: 13%; 40 | margin-right: 1%; 41 | margin-bottom: 1%; 42 | } 43 | 44 | .red-box { 45 | background-image: url("../images/RedBoxBackground.png"); 46 | background-size: cover; 47 | background-position: center; 48 | background-blend-mode: soft-light; 49 | background-color: rgba(41, 3, 69, 0.8); 50 | } 51 | 52 | .green-box { 53 | background-image: url("../images/GreenBoxBackground.jpe"); 54 | background-size: cover; 55 | background-position: center; 56 | background-blend-mode: soft-light; 57 | background-color: rgba(6, 35, 2, 0.8); 58 | } 59 | 60 | .yellow-box { 61 | background-image: url("../images/YellowBoxBackground.jpg"); 62 | background-size: cover; 63 | background-position: center; 64 | background-blend-mode: soft-light; 65 | background-color: rgba(38, 1, 1, 0.8); 66 | } 67 | 68 | .dgreen-box { 69 | background-image: url("../images/DgreenBoxBackground.jpe"); 70 | background-size: cover; 71 | background-position: center; 72 | background-blend-mode: soft-light; 73 | background-color: rgba(1, 3, 40, 0.8); 74 | } 75 | 76 | img { 77 | width: 200px; 78 | } -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/Banning.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/Banning.JPG -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/Canals.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/Canals.jpg -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/DgreenBoxBackground.jpe: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/DgreenBoxBackground.jpe -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/DisneyConcert.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/DisneyConcert.jpg -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/Disneyland.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/Disneyland.jpg -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/FarmersMarket.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/FarmersMarket.JPG -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/GreenBoxBackground.jpe: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/GreenBoxBackground.jpe -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/Grove.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/Grove.jpeg -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/Hermosa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/Hermosa.jpg -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/HollywoodParade.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/HollywoodParade.jpg -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/LaLive.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/LaLive.jpg -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/ManhattanBeach.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/ManhattanBeach.png -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/MissionInn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/MissionInn.jpg -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/MusicHall.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/MusicHall.jpg -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/NaplesIsland.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/NaplesIsland.jpg -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/PershingSquare.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/PershingSquare.jpg -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/PrintingMuseum.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/PrintingMuseum.jpg -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/QueenMary.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/QueenMary.jpg -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/RedBoxBackground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/RedBoxBackground.png -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/RedondoBoat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/RedondoBoat.jpg -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/Rodeo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/Rodeo.jpg -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/SeasideLagoon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/SeasideLagoon.jpg -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/SleepyHollow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/SleepyHollow.jpg -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/ThirdStreet.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/ThirdStreet.jpg -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/TorranceMemorial.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/TorranceMemorial.jpg -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/Universal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/Universal.jpg -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/YellowBoxBackground.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/YellowBoxBackground.jpg -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/images/Zoo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/Christmas Activities Calendar/New folder/images/Zoo.jpg -------------------------------------------------------------------------------- /Christmas Activities Calendar/New folder/js/script.js: -------------------------------------------------------------------------------- 1 | var container = document.querySelector('#container'); 2 | var msnry = new Masonry( container, { 3 | // options 4 | // columnWidth: 200, 5 | itemSelector: '.item' 6 | }); -------------------------------------------------------------------------------- /My_Santa/css/activites.css: -------------------------------------------------------------------------------- 1 | aside { 2 | display: flex; 3 | flex-direction: column; 4 | text-align: center; 5 | max-width: 350px; 6 | background: rgba(230, 30, 37, 1); 7 | margin-left: 2rem; 8 | margin-top: 1rem; 9 | position: fixed; 10 | padding: 2rem; 11 | border-radius: 15px; 12 | color: #fff; 13 | font-family: 'Poppins', sans-serif; 14 | } 15 | 16 | .aside-title, .label { 17 | font-size: 1.5rem; 18 | margin-bottom: 1rem; 19 | } 20 | 21 | #input, #submit { 22 | margin-bottom: 1rem; 23 | height: 2rem; 24 | font-size: 1.5rem; 25 | text-align: center; 26 | border-radius: 10px; 27 | } 28 | 29 | 30 | #generated-name { 31 | font-size: 2rem; 32 | margin-top: 2rem; 33 | margin-bottom: 2rem; 34 | } 35 | 36 | 37 | #activities { 38 | background: url('../img/activities_bg.jpg') no-repeat center center/cover fixed; 39 | } 40 | 41 | .activities-container { 42 | display: grid; 43 | grid-template-columns: 1fr; 44 | gap: 25px; 45 | max-width: 50%; 46 | margin: 1rem auto; 47 | text-align: center; 48 | font-family: 'Poppins', sans-serif; 49 | color: #fff; 50 | margin-bottom: 7rem; 51 | } 52 | 53 | .desc { 54 | color: #fff; 55 | background: rgba(230, 30, 37); 56 | border-radius: 15px; 57 | padding: 3rem; 58 | } 59 | 60 | .desc p { 61 | font-size: 1rem; 62 | } 63 | 64 | .activities-desc { 65 | border-radius: 15px; 66 | background: rgba(230, 30, 37); 67 | align-self: center; 68 | padding: 3rem; 69 | box-shadow: 0px 0px 10px rgb(0, 0, 0); 70 | } 71 | 72 | h1, h3, img { 73 | margin-bottom: 2rem; 74 | } 75 | 76 | .activities-desc h3 {font-size: 2rem;} 77 | .activities-desc p {font-size: 1.5rem;} 78 | .activities-desc img { border-radius: 15px;} 79 | 80 | /* ************************ Footer **************************** */ 81 | 82 | #main-footer { 83 | display: flex; 84 | flex-direction: row; 85 | background: rgba(230, 30, 37); 86 | color: #fff; 87 | padding: 1rem; 88 | font-size: 1.2rem; 89 | justify-content: center; 90 | position: static; 91 | left: 0; 92 | bottom: 0; 93 | width: 100%; 94 | height: 3rem; 95 | color: white; 96 | font-family: 'Poppins', sans-serif; 97 | } 98 | 99 | #main-footer p{ 100 | margin-left: 2rem; 101 | margin-right: 1rem; 102 | 103 | } 104 | 105 | .git-icon { 106 | position: absolute; 107 | margin: 0 auto; 108 | align-self: center; 109 | } 110 | 111 | /* ****************************************** RESPONSIVE ********************************** */ 112 | 113 | @media(max-width: 700px){ 114 | 115 | aside { 116 | align-self: center; 117 | max-width: 350px; 118 | margin: 0 auto; 119 | position: relative; 120 | padding: 2.5rem; 121 | } 122 | 123 | .aside-title, .label { 124 | font-size: 1rem; 125 | } 126 | 127 | #generated-name { 128 | font-size: 1.5rem; 129 | margin-top: 1rem; 130 | margin-bottom: 0.5rem; 131 | } 132 | 133 | .section{ 134 | display: flex; 135 | flex-direction: column; 136 | flex-wrap: nowrap; 137 | justify-content: flex-start; 138 | margin: 15rem auto; 139 | height: 100vh; 140 | } 141 | 142 | .activities-container { 143 | margin: 2rem auto; 144 | max-width: 360px; 145 | align-self: center; 146 | } 147 | 148 | .desc { 149 | padding: 2rem; 150 | } 151 | 152 | .desc p { 153 | font-size: 0.8rem; 154 | } 155 | 156 | .activities-desc { 157 | padding: 2rem; 158 | } 159 | 160 | .activities-desc h3 {font-size: 1rem;} 161 | .activities-desc p {font-size: 0.8rem;} 162 | 163 | #main-footer { 164 | display: none; 165 | } 166 | } 167 | -------------------------------------------------------------------------------- /My_Santa/css/books.css: -------------------------------------------------------------------------------- 1 | /* ********************** PAGES BACKGROUNDS START ********************** */ 2 | #books { 3 | background: url('../img/books/books_bg.jpg') no-repeat center center/cover fixed; 4 | } 5 | 6 | .book-section { 7 | max-width: 1300px; 8 | margin: 2rem auto; 9 | background: rgb(230,29,37); 10 | padding: 2rem; 11 | box-shadow: 0px 0px 20px rgb(241,81,85); 12 | } 13 | 14 | .book-content { 15 | display: flex; 16 | flex-direction: row; 17 | padding: 1rem; 18 | margin-top: 0.5rem; 19 | } 20 | 21 | .description { 22 | justify-content: flex-end; 23 | top: 0; 24 | margin-left: 1.5rem; 25 | } 26 | 27 | .description h3 { 28 | font-family: 'Poppins', sans-serif; 29 | margin-bottom: 1rem; 30 | font-size: 1.5rem; 31 | color: #fff; 32 | } 33 | 34 | .description p { 35 | font-family: 'Poppins', sans-serif; 36 | margin-bottom: 0.5rem; 37 | font-size: 1 rem; 38 | color: #fff; 39 | } 40 | 41 | 42 | .btn-book { 43 | color: rgb(165, 165, 165); 44 | background-image: linear-gradient(#ca1902, #4d1601 ); 45 | padding: 0.3rem 1.5rem; 46 | border: none; 47 | border-radius: 5px; 48 | font-size: 1.2rem; 49 | margin-top: 1rem; 50 | } 51 | 52 | .btn-book:hover { 53 | background-image: linear-gradient(#4d1601, #ca1902 ); 54 | color: #fff; 55 | } 56 | 57 | .top { 58 | margin-top: 1rem; 59 | text-align: center; 60 | margin-left: 40%; 61 | margin-right: 40%; 62 | } 63 | 64 | .top a { 65 | color: #fff; 66 | background-image: linear-gradient(#ca1902, #4d1601 ); 67 | padding: 1rem 1.5rem; 68 | border: none; 69 | border-radius: 15px; 70 | font-size: 1.5rem; 71 | font-family: 'Poppins', sans-serif; 72 | } 73 | 74 | .top a:hover { 75 | background-image: linear-gradient(#4d1601, #ca1902 ); 76 | } 77 | 78 | /* ****************************************** RESPONSIVE ********************************** */ 79 | @media (max-width: 700px) { 80 | #books { 81 | background: url('../img/books/books_mobile_bg.jpg') no-repeat center center/cover fixed; 82 | } 83 | 84 | .book-section { 85 | width: 80%; 86 | height: 100%; 87 | margin: 15rem auto; 88 | padding: 1rem; 89 | } 90 | .book-content { 91 | flex-direction: column; 92 | justify-content: center; 93 | margin-bottom: 1rem; 94 | } 95 | 96 | img { 97 | width: 100px; 98 | height: 150px; 99 | align-content: center; 100 | margin-left: 35%; 101 | margin-top: 3rem; 102 | } 103 | 104 | .description { 105 | align-items: center; 106 | text-align: center; 107 | margin: 2rem; 108 | padding: 2rem; 109 | } 110 | 111 | 112 | .description h3 { 113 | margin-bottom: 3rem; 114 | margin-top: -3rem; 115 | } 116 | 117 | .btn-book { 118 | text-align: center; 119 | margin-left: 15%; 120 | margin-right: 15%; 121 | margin-bottom: 2rem; 122 | 123 | } 124 | 125 | .top { 126 | margin-left: 20%; 127 | margin-right: 20%; 128 | margin-bottom: 2rem; 129 | } 130 | 131 | .top a { 132 | padding: 0.5rem 1rem; 133 | font-size: 1rem; 134 | } 135 | } -------------------------------------------------------------------------------- /My_Santa/css/games.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | margin: 0; 4 | font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 5 | font-size: 1rem; 6 | line-height: 1.4; 7 | color: #333; 8 | overflow-x: hidden; 9 | 10 | } 11 | 12 | /* *************** HEADER *************************** */ 13 | .v-header { 14 | height: 90vh; 15 | display: flex; 16 | align-items: center; 17 | color: #181d15; 18 | background: #333; 19 | } 20 | 21 | .fullscreen-video-wrap { 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | width: 100%; 26 | height: 99vh; 27 | overflow: hidden; 28 | background: url('../img/4.jpg') no-repeat center center/cover fixed; 29 | } 30 | 31 | .fullscreen-video-wrap video { 32 | min-width: 100%; 33 | min-height: 100%; 34 | } 35 | 36 | .header-content { 37 | position: absolute; 38 | bottom: 0; 39 | background: rgba(0, 0, 0, 0.6); 40 | width: 100%; 41 | padding: 30px; 42 | } 43 | .header-game-text { 44 | color: #f1f1f1; 45 | } 46 | 47 | .header-content h1 { 48 | margin-bottom: 3rem; 49 | text-align: center; 50 | font-size: 2.5rem; 51 | } 52 | 53 | .buttons { 54 | display: flex; 55 | flex-direction: row; 56 | justify-content: center; 57 | 58 | } 59 | 60 | audio{ 61 | margin-right: 2rem; 62 | } 63 | 64 | 65 | .header-content .games-btn { 66 | color: rgb(165, 165, 165); 67 | background-image: linear-gradient(#ca1902, #4d1601 ); 68 | padding: 0.5rem 2rem; 69 | border: none; 70 | border-radius: 25px; 71 | font-size: 1.5rem; 72 | margin-right: 3rem; 73 | } 74 | #myBtn { 75 | cursor: pointer; 76 | color: rgb(165, 165, 165); 77 | background-image: linear-gradient(#ca1902, #4d1601 ); 78 | padding: 0.9rem 4rem; 79 | border: none; 80 | border-radius: 25px; 81 | font-size: 1.5rem; 82 | } 83 | 84 | /* ************************************* SECTION *************************************** */ 85 | #section { 86 | padding: 20px 0; 87 | height: 95vh; 88 | background: url('../img/santa-claus-game.jpg') no-repeat center center/cover fixed; 89 | color: #f1f1f1; 90 | overflow: hidden; 91 | font-family: 'Mountains of Christmas', cursive; 92 | } 93 | .section-container { 94 | display: grid; 95 | grid-template-columns: repeat(3, 1fr); 96 | width: 100%; 97 | grid-gap: 2rem; 98 | margin-top: 3rem; 99 | } 100 | 101 | .grid-container { 102 | margin: auto; 103 | padding: 3rem; 104 | background: #fcf2f2a2; 105 | width: 500px; 106 | height: 350px; 107 | color: #4C4B4B; 108 | } 109 | .back { 110 | display: flex; 111 | justify-content: center; 112 | align-content: space-around; 113 | } 114 | .btn-back { 115 | position: relative; 116 | text-align: center; 117 | margin-top: 2rem; 118 | color: rgb(165, 165, 165); 119 | background-image: linear-gradient(#ca1902, #4d1601 ); 120 | padding: 1rem 3.5rem; 121 | border: none; 122 | border-radius: 15px; 123 | font-size: 1.8rem; 124 | letter-spacing: 1rem; 125 | cursor: pointer; 126 | } 127 | h1{ 128 | text-align: center; 129 | margin-bottom: 1rem; 130 | color: #000; 131 | font-size: 2rem; 132 | } 133 | 134 | p { 135 | color: #000; 136 | font-size: 1.4rem; 137 | } 138 | 139 | /* ****************************************** RESPONSIVE ********************************** */ 140 | @media (max-width: 700px) { 141 | 142 | body { 143 | font-size: 0.8rem; 144 | background: url('../img/4.jpg') no-repeat center center/cover fixed; 145 | } 146 | 147 | .games-container { 148 | background: none; 149 | width: 100%; 150 | } 151 | 152 | .v-header.games-container { 153 | width: 95%; 154 | padding: 1rem 1rem; 155 | margin: 0 auto; 156 | text-align: center; 157 | line-height: 2; 158 | } 159 | 160 | .header-content { 161 | position: relative; 162 | top: 60px; 163 | margin-left: 10px; 164 | right: 0; 165 | height: 50vh; 166 | } 167 | 168 | #myVideo { 169 | display: none; 170 | } 171 | 172 | #myBtn { 173 | display: none; 174 | } 175 | 176 | audio{ 177 | display: none; 178 | } 179 | 180 | .header-content .games-btn { 181 | padding: 0.5rem 1.5rem; 182 | font-size: 1rem; 183 | margin: 2rem auto; 184 | } 185 | 186 | #section { 187 | padding: 10px 0; 188 | height: 150vh; 189 | } 190 | 191 | .section-container { 192 | display: flex; 193 | flex-direction: column; 194 | margin-top: 1rem; 195 | height: 130vh; 196 | } 197 | 198 | .grid-container { 199 | margin: auto; 200 | padding: 1rem; 201 | } 202 | 203 | h1, p { 204 | font-size: 1rem; 205 | } 206 | .btn-back { 207 | padding: 0.5rem 1.5rem; 208 | font-size: 1rem; 209 | margin-bottom: 1rem; 210 | } 211 | 212 | } 213 | -------------------------------------------------------------------------------- /My_Santa/css/gift.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | justify-content: center; 6 | align-items: center; 7 | min-height: 100vh; 8 | font-family: "Poppins", sans-serif; 9 | background: url('../img/gift/gift_bg.jpg') no-repeat center center/cover fixed; 10 | } 11 | 12 | .container { 13 | width: 900px; 14 | height: 90vh; 15 | display: grid; 16 | grid-template-rows: repeat(4, 1fr); 17 | grid-template-rows: 1fr; 18 | grid-gap: 15px; 19 | margin-top: 5rem; 20 | } 21 | 22 | .container .card { 23 | position: relative; 24 | width: 340px; 25 | height: 400px; 26 | background: rgb(252, 252, 252); 27 | box-shadow: 0px 0px 30px rgba(190, 0, 0, 0.5); 28 | } 29 | 30 | h3 { 31 | text-align: center; 32 | padding-top: 0.5rem; 33 | } 34 | 35 | p { 36 | margin: 0.8rem 0.8rem; 37 | } 38 | 39 | .gift-btn { 40 | color: rgb(165, 165, 165); 41 | background-image: linear-gradient(#ca1902, #4d1601 ); 42 | padding: 0.3rem 1rem; 43 | border: none; 44 | border-radius: 5px; 45 | font-size: 0.8rem; 46 | margin-left: 33%; 47 | position: absolute; 48 | } 49 | 50 | .container .card .face { 51 | position: absolute; 52 | bottom: 0; 53 | left: 0; 54 | width: 100%; 55 | height: 100%; 56 | display: flex; 57 | justify-content: center; 58 | align-items:flex-end; 59 | font-family: 'Mountains of Christmas', cursive; 60 | } 61 | 62 | .container .card .face.face1 { 63 | box-sizing: border-box; 64 | padding: 20px; 65 | } 66 | 67 | .container .card .face.face1 h3 { 68 | margin: 0; 69 | padding: 0; 70 | } 71 | 72 | .container .card .face.face2 { 73 | transition: 0.5s; 74 | } 75 | 76 | .container .card:hover .face.face2 { 77 | display: none; 78 | } 79 | 80 | .container .card .face.face2:before { 81 | content: ""; 82 | position: absolute; 83 | top: 0; 84 | left: 0; 85 | height: 100%; 86 | width: 50%; 87 | background: rgba(255, 255, 255, 0.1); 88 | 89 | } 90 | 91 | .container .card .face.face2 h3 { 92 | margin: 0; 93 | padding: 0; 94 | font-size: 2rem; 95 | color: rgb(252, 0, 0); 96 | transition: 0.5s; 97 | } 98 | 99 | .container .card:nth-child(1) .face.face2 { 100 | background: url('../img/gift/1.jpg') center center/cover; 101 | } 102 | .container .card:nth-child(2) .face.face2 { 103 | background: url('../img/gift/2.jpg') center center/cover; 104 | } 105 | .container .card:nth-child(3) .face.face2 { 106 | background: url('../img/gift/3.jpg') center center/cover; 107 | } 108 | .container .card:nth-child(4) .face.face2 { 109 | background: url('../img/gift/4.jpg') center center/cover; 110 | } 111 | 112 | .container .card:hover .face.face2 h3 { 113 | display: none; 114 | } 115 | 116 | /* ****************************************** RESPONSIVE ********************************** */ 117 | @media (max-width: 700px) { 118 | 119 | body { 120 | background: url('../img/gift/gift_mobile_bg.jpg') no-repeat center center/cover fixed; 121 | } 122 | 123 | .container { 124 | width: 500px; 125 | height: 100vh; 126 | display: flex; 127 | flex-direction: column; 128 | margin: 15rem auto; 129 | } 130 | 131 | .container .card { 132 | width: 250px; 133 | height: 600px; 134 | margin: 2rem auto; 135 | } 136 | 137 | .container .card .face.face1 { 138 | display: none; 139 | } 140 | 141 | } 142 | 143 | -------------------------------------------------------------------------------- /My_Santa/css/index.css: -------------------------------------------------------------------------------- 1 | /* *************** RESET MARGINS ******************************************* */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | line-height: 1.4; 10 | } 11 | /* ********************** NAVBAR START ********************************* */ 12 | .navbar{ 13 | display: flex; 14 | position: fixed; 15 | width: 100%; 16 | top: 0; 17 | justify-content: space-around; 18 | z-index: 1; 19 | color: #333; 20 | background: rgba(255, 255, 255, 1); 21 | padding: 1rem; 22 | } 23 | 24 | .navbar ul { 25 | display: flex; 26 | align-items: center; 27 | list-style: none; 28 | } 29 | 30 | .navbar ul li a { 31 | color: #333; 32 | padding: 1rem; 33 | font-family: 'Mountains of Christmas', cursive; 34 | font-size: 1.5rem; 35 | font-weight: bolder; 36 | letter-spacing: 1px; 37 | text-transform: uppercase; 38 | } 39 | 40 | .navbar ul li a:hover{ 41 | background: rgb(165, 177, 190, 0.8); 42 | color: rgb(238, 89, 89); 43 | } 44 | 45 | 46 | .current { 47 | color: red !important; 48 | } 49 | 50 | a { 51 | /* padding: 1rem; */ 52 | text-decoration: none; 53 | } 54 | 55 | /* ********************** READ MORE CONTENT ********************** */ 56 | 57 | #readMore { 58 | background: rgb(255, 255, 255) url('../img/Facts/10.jpg')no-repeat center center/cover; 59 | height: 100vh; 60 | color: #fff; 61 | 62 | } 63 | 64 | #readMore .readMore-content { 65 | display: flex; 66 | flex-direction: column; 67 | text-align: center; 68 | justify-content: center; 69 | align-items: center; 70 | height: 100%; 71 | padding: 0 2rem; 72 | /* Overlay */ 73 | position: absolute; 74 | top:66px; 75 | left:0; 76 | right: 0; 77 | bottom: 0; 78 | background-color: rgba(0,0,0,0.6); 79 | } 80 | 81 | .btn { 82 | display: block; 83 | color: rgb(165, 165, 165); 84 | background-image: linear-gradient(#ca1902, #4d1601 ); 85 | padding: 0.5rem 2rem; 86 | border: none; 87 | border-radius: 5px; 88 | font-size: 1.5rem; 89 | } 90 | 91 | .back { 92 | display: flex; 93 | justify-content: center; 94 | align-content: space-around; 95 | } 96 | 97 | .btn-back { 98 | text-align: center; 99 | color: rgb(165, 165, 165); 100 | background-image: linear-gradient(#ca1902, #4d1601 ); 101 | padding: 0.8rem 2.5rem; 102 | border: none; 103 | border-radius: 15px; 104 | font-size: 1.5rem; 105 | } 106 | .btn-back:hover { 107 | background-image: linear-gradient(#4d1601, #ca1902 ); 108 | color: rgb(255, 255, 255); 109 | } 110 | 111 | .btn:hover { 112 | background-image: linear-gradient(#4d1601, #ca1902 ); 113 | color: rgb(255, 255, 255); 114 | } 115 | 116 | .text1 { 117 | font-size: 3rem; 118 | margin-bottom: 2rem; 119 | font-family: 'Poppins', sans-serif; 120 | text-shadow: 4px 4px rgb(206, 13, 13); 121 | } 122 | 123 | .text2 { 124 | font-size: 3rem; 125 | margin-bottom: 2rem; 126 | font-family: 'Poppins', sans-serif; 127 | text-shadow: 4px 4px rgb(206, 13, 13); 128 | } 129 | 130 | 131 | /* ********************** FACTS ********************** */ 132 | b { 133 | color: rgb(206, 175, 163); 134 | } 135 | 136 | .box { 137 | background-color: rgba(230, 30, 37, 0.929); 138 | padding: 2rem; 139 | } 140 | .container { 141 | display: grid; 142 | grid-template-columns: repeat(2, 1fr); 143 | grid-column-gap: 3rem; 144 | margin: 2rem; 145 | height: 70vh; 146 | } 147 | 148 | .index-img{ 149 | width: 900px; 150 | height: 600px; 151 | } 152 | 153 | .paragraph { 154 | font-size: 1.5rem; 155 | font-family: 'Poppins', sans-serif; 156 | color: rgb(255, 255, 255); 157 | text-shadow: 2px 2px #533b3b; 158 | } 159 | 160 | .link { 161 | color: rgb(206, 175, 163); 162 | text-decoration: underline; 163 | } 164 | 165 | .link:hover { 166 | color: cornflowerblue; 167 | } 168 | 169 | .santa { 170 | color: #333232; 171 | font-weight: bolder; 172 | } 173 | 174 | .index-img { 175 | background: url('../img/Facts/9.jpg') no-repeat center center/cover; 176 | border-radius: 15px; 177 | } 178 | 179 | 180 | /* ****************************************** RESPONSIVE ********************************** */ 181 | @media (max-width: 700px) { 182 | .navbar{ 183 | justify-content: center; 184 | padding: 0.2rem; 185 | ; 186 | } 187 | 188 | .navbar ul li a { 189 | padding: 0.2rem; 190 | font-size: 0.6rem; 191 | letter-spacing: 1px; 192 | } 193 | 194 | .navbar ul li a:hover{ 195 | background: none; 196 | color: rgb(238, 89, 89); 197 | } 198 | 199 | .navbar ul{ 200 | padding-top: 1rem; 201 | width: 100vw; 202 | flex-direction: row; 203 | font-size: 0.3rem; 204 | text-align: center; 205 | margin-bottom: 1rem; 206 | } 207 | 208 | .text1 { 209 | font-size: 1.5rem; 210 | text-shadow: none 211 | } 212 | 213 | .text2 { 214 | font-size: 2rem; 215 | text-shadow: none; 216 | } 217 | 218 | 219 | #readMore { 220 | background: url('../img/Facts/index_bg.png')no-repeat center center/cover; 221 | } 222 | 223 | #readMore .readMore-content { 224 | height: 95%; 225 | top: 50px; 226 | 227 | } 228 | 229 | .btn { 230 | padding: 0.2rem 1rem; 231 | font-size: 1rem; 232 | } 233 | 234 | .container { 235 | display: flex; 236 | flex-direction: column; 237 | height: 100%; 238 | } 239 | 240 | .index-img{ 241 | display: none; 242 | } 243 | 244 | .paragraph { 245 | font-size: 1rem; 246 | } 247 | 248 | .btn-back { 249 | padding: 0.3rem 1.5rem; 250 | margin-bottom: 0; 251 | font-size: 1rem; 252 | } 253 | 254 | 255 | } -------------------------------------------------------------------------------- /My_Santa/css/movie.css: -------------------------------------------------------------------------------- 1 | 2 | /* ********************** PAGES BACKGROUNDS START ********************** */ 3 | #movie { 4 | background: url('../img/movie/movie_bg.jpg') no-repeat center center/cover fixed; 5 | height: 110vh; 6 | line-height: 1.4; 7 | } 8 | 9 | h1 { 10 | text-align: center; 11 | margin-top: 5rem; 12 | color: rgb(253, 207, 0); 13 | font-size: 3.5rem; 14 | font-weight: 700; 15 | font-family: 'Poppins', sans-serif; 16 | text-shadow: 4px 4px rgb(206, 13, 13); 17 | } 18 | 19 | .iframe-container { 20 | max-width: 1200px; 21 | margin: 2rem auto; 22 | background: rgb(241,81,85,0.9); 23 | padding: 2rem; 24 | display: grid; 25 | grid-template-columns: repeat(2, 1fr); 26 | grid-gap: 2rem; 27 | height: 200%; 28 | padding: 2rem 2rem; 29 | /* Overlay */ 30 | position: absolute; 31 | top: 200px; 32 | left:0; 33 | right: 0; 34 | bottom: 0; 35 | background-color: rgba(0,0,0,0.6) 36 | } 37 | 38 | /* ****************************************** RESPONSIVE ********************************** */ 39 | 40 | @media(max-width: 700px) { 41 | #movie { 42 | height: 250%; 43 | background-color: #333; 44 | background: url('../img/movie/movie_mobile_bg.jpg') no-repeat center center/cover fixed; 45 | } 46 | 47 | h1 { 48 | margin-top: 15rem; 49 | margin-bottom: 2rem; 50 | color: #fff; 51 | font-size: 1.5rem; 52 | font-weight: bold; 53 | text-shadow: 4px 4px 4px rgb(230, 5, 5); 54 | 55 | } 56 | 57 | iframe { 58 | width: 400px; 59 | height: 550px; 60 | margin: 1rem auto; 61 | 62 | } 63 | 64 | .iframe-container { 65 | display: flex; 66 | flex-direction: column; 67 | margin-bottom: 2rem; 68 | height: 280vh; 69 | width: 85%; 70 | margin: 0 auto; 71 | top: 300px; 72 | padding: 0.5rem; 73 | } 74 | 75 | 76 | 77 | } -------------------------------------------------------------------------------- /My_Santa/css/recipes.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | background: url('../img/recipes/recipe_bg.jpg') no-repeat center center/cover fixed; 4 | } 5 | 6 | 7 | /* ************************** RECIPE CONTENT ******************************** */ 8 | .recipe-section { 9 | display: flex; 10 | flex-direction: column; 11 | position: absolute; 12 | right: 200px; 13 | border-radius: 20px; 14 | max-width: 900px; 15 | margin: 5rem auto; 16 | background: rgba(245, 240, 240, 0.5); 17 | padding: 2rem; 18 | color: #fff; 19 | font-family: 'Mountains of Christmas', cursive; 20 | } 21 | 22 | h1 { 23 | text-align: center; 24 | font-size: 2.5rem; 25 | margin-bottom: 7rem; 26 | } 27 | 28 | .recipes-content { 29 | display: flex; 30 | flex-direction: row; 31 | height: 15%; 32 | margin-top: 0.5rem; 33 | margin-bottom: 2rem; 34 | justify-content: center; 35 | align-items: center; 36 | 37 | } 38 | 39 | 40 | h3 { 41 | margin-top: 20px; 42 | text-align: center; 43 | font-size: 2rem; 44 | } 45 | 46 | p { 47 | font-size: 1.8rem; 48 | margin: 1.5rem 2rem; 49 | padding: 1.5rem; 50 | color: maroon; 51 | } 52 | 53 | img { 54 | border-radius: 50%; 55 | margin-top: 1.5rem; 56 | padding: 1rem; 57 | } 58 | img:hover { 59 | box-shadow:rgb(255, 255, 255) 0px 2px 15px, inset rgb(255, 255, 255) 0px -10px 20px; 60 | } 61 | 62 | 63 | .recipe-link { 64 | color: maroon; 65 | letter-spacing: 6px; 66 | } 67 | 68 | .recipe-link:hover { 69 | color: rgb(206, 175, 163); 70 | text-decoration: underline; 71 | } 72 | 73 | h4 { 74 | text-align: center; 75 | color: rgb(52,66,69); 76 | letter-spacing: 2px; 77 | } 78 | 79 | 80 | /* ****************************************** RESPONSIVE ********************************** */ 81 | @media (max-width: 700px) { 82 | 83 | .recipe-section { 84 | left: 5%; 85 | right: 5%; 86 | background: rgba(245, 240, 240, 0.8); 87 | padding: 1rem; 88 | margin: 0 auto; 89 | margin-top: 15rem; 90 | max-width: 500px; 91 | color: #333; 92 | } 93 | 94 | h1 { 95 | position: absolute; 96 | font-size: 1.5rem; 97 | margin: 0.5rem auto; 98 | } 99 | 100 | .recipes-content { 101 | flex-direction: column; 102 | margin: 1rem auto; 103 | } 104 | 105 | 106 | h3 { 107 | font-size: 1.6rem; 108 | margin-top: -3rem; 109 | } 110 | 111 | p { 112 | font-size: 1.5rem; 113 | margin: 0 2rem; 114 | } 115 | 116 | img { 117 | margin: 5rem auto; 118 | } 119 | 120 | } 121 | -------------------------------------------------------------------------------- /My_Santa/css/songs.css: -------------------------------------------------------------------------------- 1 | /* ********************** BACKGROUNDS ********************** */ 2 | #songs { 3 | background: url('../img/songs_bg.jpg') no-repeat center center/cover fixed; 4 | } 5 | 6 | #lyrics { 7 | height: 100vh; 8 | color: #fff; 9 | } 10 | 11 | #lyrics .lyrics-content { 12 | display: grid; 13 | grid-template-columns: repeat(3, 1fr); 14 | flex-direction: column; 15 | text-align: center; 16 | justify-content: center; 17 | align-items: center; 18 | height: 200%; 19 | padding: 0 2rem; 20 | /* Overlay */ 21 | position: absolute; 22 | top:66px; 23 | left:0; 24 | right: 0; 25 | bottom: 0; 26 | background-color: rgba(0,0,0,0.6); 27 | } 28 | 29 | .text { 30 | margin-top: 30px; 31 | font-size: 1.5rem; 32 | } 33 | 34 | .link1 { 35 | color: red; 36 | font-size: 2.8rem; 37 | } 38 | 39 | .link1:hover { 40 | color: darkgreen; 41 | } 42 | .link2:hover { 43 | color: darkorange; 44 | } 45 | .link3:hover { 46 | color: darkgreen; 47 | } 48 | 49 | .link2 { 50 | color: bisque; 51 | font-size: 2.8rem; 52 | } 53 | 54 | 55 | .link3 { 56 | color: cornflowerblue; 57 | font-size: 2.8rem; 58 | } 59 | 60 | /* ****************************************** RESPONSIVE ********************************** */ 61 | 62 | @media(max-width: 700px){ 63 | 64 | #songs { 65 | background: url('../img/songs_mobile_bg.jpg') no-repeat center center/cover fixed; 66 | } 67 | 68 | #lyrics .lyrics-content { 69 | display: flex; 70 | flex-direction: column; 71 | align-items: center; 72 | height: 450%; 73 | padding: 0 2rem; 74 | /* Overlay */ 75 | position: absolute; 76 | top: 50px; 77 | } 78 | 79 | .text { 80 | font-size: 1rem; 81 | } 82 | 83 | .link1, .link2, .link3 { 84 | font-size: 1.5rem; 85 | } 86 | } -------------------------------------------------------------------------------- /My_Santa/html pages/activites.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Santafield 2019 13 | 14 | 15 | 25 | 26 | 27 |
28 | 29 |
30 | 31 |
32 | 33 | 41 | 42 | 43 |
44 |
45 |

Fun Christmas Activities for Kids and Families

46 |

With the holidays just around the corner, you may be starting to plan your big family Christmas party. But 47 | while you're busy cooking up the perfect Christmas dinner, you'll want to keep your loved ones 48 | occupied—especially if you plan on inviting little ones. Luckily for you, there are plenty of fun Christmas 49 | games for kids that'll keep them busy for hours—and may just interest you too (in between glazing the ham and 50 | decorating your gingerbread cookies, of course!). Sure, your appetizer spread alone might be enough to keep 51 | all 52 | of your guests entertained, but you'll soon find that the following Christmas games can bring your family 53 | together too. Some activity tips:

54 |
55 | 56 |
57 |

Christmas Cookies

58 | 59 |

Do you have a cookie monster in your house? Most kids love to eat cookies, but you may be surprised by how 60 | much 61 | little ones like to make cookies, too! Peanut-butter blossoms! Spritz cookies! Gingerbread men! There are just 62 | too many tasty holiday cookies to choose from.

63 |
64 | 65 |
66 |

Sledging & Snow Fun

67 | 68 |

For the children, snow always equals fun and as well as the all-important winter activities there will be 69 | plenty of time for you to play in the snow as a family and enjoy this wonderfully memorable experience 70 | together. 71 |

72 |
73 | 74 |
75 |

Go for a Christmas light walk

76 | 77 |

This is best in a residential area where children can look out for all the Christmas lights and other 78 | decorations. Look the variety of lights, indoors and out. 79 |

80 |
81 | 82 |
83 | 84 |
85 | 86 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /My_Santa/html pages/games.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Games 13 | 14 | 15 | 25 | 26 | 27 | 28 |
29 | 30 |
31 | 32 | 33 |
34 |
35 | 36 |
37 |
38 |

Some fun Christmas party games to play with the family

39 |
40 | Read More bellow 41 | 42 |
43 |
44 |
45 | 46 | 47 |
48 |
49 |
50 |

Pin the red nose on Rudolph

51 |

52 | You will need a large cut-out or picture of a reindeer without its nose, a red circle or pom pom, blind fold, 53 | blue-tac and a marker to write down where each player places the tail. 54 | Another variation of a classic party game, blindfold each player and have them take it in turns to guess where 55 | Rudolph's nose goes. Whoever is closest to the correct position wins a prize. 56 |

57 |
58 |
59 |

Christmas memory game

60 |

Put Christmas items on a tray and give people one minute to memorize the items. Take the tray away and have 61 | them write as many down as they can remember in 30 seconds.

62 |
63 |
64 |

Santa limbo

65 |

Using a broom, have people do the limbo, but put a "santa belly" under their shirt using a pillow.

66 |
67 |
68 |

Penguin waddle game

69 |

Step aside Santa from the North Pole, the South Pole is taking over. This is a relay race where you put 70 | balloons between your legs, waddling like a penguin, racing against another team.

71 |
72 |
73 |

Christmas gift wrap relay

74 |

Set up assembly lines of gifts, boxes, scissors, wrapping paper, ribbon, and tape for each team. Either have 75 | each player wrap one gift or make an assembly line of workers. Then race to wrap!

76 |
77 |
78 |

Christmas charades

79 |

You will need a timer, bowls for clues, paper, pen or pencil and four or more players. 80 | This game takes charades and puts it in a festive setting using Christmas phrases and film titles, and music. 81 | You can find words for charades ready made for the game online.

82 |
83 |
84 | 85 |
86 | Back 87 |
88 |
89 | 90 | 91 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /My_Santa/html pages/gift.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Gift Idea 13 | 14 | 15 | 25 | 26 | 27 | 28 |
29 | 30 |
31 | 32 | 33 |
34 | 35 | 36 |
37 |

HTC Vive Pro Eye VR Virtual Reality Headset 2018/V2 Full Kit

38 |

Precision Eye Tracking. Track and analyze eye movement, attention and focus. Create more immersive virtual 39 | simulations. Gain insights about user performance and interaction. Improve training scenarios. Open the door to 40 | deeper data analysis

41 |
42 |
43 | 44 |
45 |
46 | More Details 48 |
49 |

Hover Over Me

50 |
51 |
52 | 53 | 54 |
55 |

Apple Airpods with Charging Case (latest Model) 56 |

57 |

The new AirPods combine intelligent design with breakthrough technology and crystal clear sound. Powered by 58 | the new Apple H1 headphone chip, AirPods now feature hands-free access to Siri using just your voice. And up to 59 | 3 hours of talk time on a single charge

60 |
61 |
62 | 63 |
64 |
65 | More Details 67 |
68 |

Hover Over Me

69 |
70 |
71 | 72 | 73 |
74 |

Apple iPhone 8 (64 GB) - Space Grey

75 |

4.7 Inch Retina HD display with True Tone 76 | IP67 water and dust resistant (maximum depth of 1 metre up to 30 minutes) 77 | 12MP camera with OIS and 4K video and 7MP FaceTime HD camera with Retina Flash 78 | Touch ID for secure authentication and Apple Pay 79 | A11 Bionic with Neural Engine 80 | Wireless charging - works with Qi chargers

81 |
82 |
83 | 84 |
85 |
86 | More Details 88 |
89 |

Hover Over Me

90 |
91 |
92 | 93 | 94 |
95 |

Alex Perry Christmas Earrings Gift, Elegant Gift Box Packaging

96 |

♥ This elegant and classy pair of earrings was made by two cross linked transformative circle with a round 97 | cubic 98 | zirconia stone set in the middle, the fluent design is inspired by soft and graceful silk fluttering in the sky 99 | and revolving around the true love.

100 |
101 |
102 | 103 |
104 |
105 | More Details 107 |
108 |

Hover Over Me

109 |
110 |
111 |
112 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /My_Santa/html pages/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Santafied 2019 | Facts 12 | 13 | 14 | 24 | 25 | 26 |
27 | 28 |
29 | 30 | 31 |
32 |
33 |

Interesting Facts About Christmas

34 |

WELCOME TO SANTAFIED 2019

35 | Read more below 36 |
37 |
38 | 39 | 40 |
41 |
42 |
43 |
44 | 45 |
46 |

* Jingle Bells was 47 | written 48 | for Thanksgiving, not Christmas. The song was written in 1857 by James Lord Pierpont and published 49 | under the title “One Horse Open Sleigh”. It was supposed to be played in the composer’s Sunday school class 50 | during Thanksgiving as a way to commemorate the famed Medford sleigh races. “Jingle Bells” was also the 51 | first song to be broadcast from space. *

52 | 53 |

* The tradition of hanging stockings comes from a Dutch legend. A poor man had three daughters for 54 | whom he could not afford to provide a dowry. St. Nicholas dropped a bag of gold down his chimney and gold 55 | coins fell out and into the stockings drying by the fireplace. The daughters now had dowries and could be 56 | married, avoiding a life on the streets. *

57 | 58 |

* Brenda Lee recorded Rockin’ 59 | Around the Christmas Tree when she was only 13 years old. *

60 | 61 |

* You would have to use your artificial tree for more than 20 years for it to be ‘greener’ than 62 | buying a fresh-cut tree annually. *

63 | 64 |

* Coca-Cola was the first company that used Santa Claus during the winter 65 | season for promotion. *

66 |
67 |
68 |
69 |
70 | Back 71 |
72 |
73 | 74 | 75 | -------------------------------------------------------------------------------- /My_Santa/html pages/movie.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Specific Movie 12 | 13 | 14 | 24 | 25 | 26 |
27 | 28 |
29 | 30 |

SOME GREAT MOVIE FOR WHOLE FAMILY

31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /My_Santa/html pages/recipes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | The Best recipes 13 | 14 | 15 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 | 34 | 35 |
36 |

A Few Delicious Traditional Christmas Recipes Around The World

37 | 38 | 39 |
40 | 41 | 42 | 43 |
44 |

Gerbeaud Slice(Hungary) 45 |

46 |

~ click to see the recipes ~

47 |

Gerbeaud Slice is very popular in Hungary, it’s usually baked at Christmas and special occasions.

48 | 49 |
50 |
51 | 52 | 53 |
54 | 55 | 56 | 57 |
58 |

Christmas Pudding (England) 59 |

60 |

~ click to see the recipes ~

61 |

Christmas pudding is a type of pudding traditionally served as part of the Christmas dinner in the UK, 62 | Ireland and in other countries where it has been brought by Irish and British immigrants.

63 | 64 |
65 |
66 | 67 | 68 |
69 | 71 | 72 | 73 |
74 |

Panettone (Italy) 75 |

76 |

~ click to see the recipes ~

77 |

Panettone is an Italian type of sweet bread loaf originally from Milan, usually prepared and enjoyed for 78 | Christmas and New Year

79 | 80 |
81 |
82 | 83 | 84 |
85 | 87 | 88 | 89 |
90 |

Cabbage roll s (Romania) 91 |

92 |

~ click to see the recipes ~

93 |

The Romanian Cabbage Rolls- Sarmale - are one of the most delicious dishes that Romanian people prepare for 94 | family gatherings and especially for holidays.

95 | 96 |
97 |
98 | 99 | 100 |
101 | 103 | 104 | 105 |
106 |

Roast Turkey (US) 107 |

108 |

~ click to see the recipes ~

109 |

Try a traditional Christmas turkey recipe to guarantee your roast is succulent and full of flavour.

110 | 111 |
112 |
113 | 114 | 115 |
116 | 118 | 119 | 120 |
121 |

Bûche de Noël (France) 122 |

123 |

~ click to see the recipes ~

124 |

A traditional French dessert served after the main Christmas dinner is the Bûche de Noël, a roll of light 125 | sponge cake, covered in chocolate or coffee butter cream textured to resemble bark as an evocation of the 126 | ancient tradition of burning the Yule log.

127 | 128 |
129 |
130 |
131 | 132 | 133 | -------------------------------------------------------------------------------- /My_Santa/html pages/songs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Santafield 2019 13 | 14 | 15 | 25 | 26 | 27 | 28 |
29 | 30 |
31 | 32 |
33 |
34 | 35 | 36 |
37 |

Driving Home For 38 | Christmas

39 |

~ click the title to listen ~

40 |

41 | I'm driving home for Christmas
42 | Oh, I can't wait to see those faces
43 | I'm driving home for Christmas, yea
44 | Well I'm moving down that line
45 | And it's been so long
46 | But I will be there
47 | I sing this song
48 | To pass the time away
49 | Driving in my car
50 | Driving home for Christmas
51 | It's gonna take some time
52 | But I'll get there
53 | Top to toe in tailbacks
54 | Oh, I got red lights on the run
55 | But soon there'll be a freeway yeah
56 | Get my feet on holy ground
57 | So I sing for you
58 | Though you can't hear me
59 | When I get trough
60 | And feel you near me
61 | Driving in my car
62 | I'm driving home for Christmas
63 | Driving home for Christmas
64 | With a thousand memories
65 | I take look at the driver next to me
66 | He's just the same
67 | Just the same
68 | Top to toe in tailbacks
69 | Oh, I got red lights all around
70 | I'm driving home for Christmas, yea
71 | Get my feet on holy ground
72 | So I sing for you
73 | Though you can't hear me
74 | When I get trough
75 | Oh and feel you near me
76 | Driving in my car
77 | Driving home for Christmas
78 | Driving home for Christmas
79 | With a thousand memories
80 | I take look at the driver next to me
81 | He's just the same
82 | He's driving home, driving home
83 | Driving home for Christmas
84 | Driving home for Christmas
85 |

86 |
87 | 88 | 89 |
90 |

All I Want for 91 | Christmas Is You

92 |

~ click the title to listen ~

93 |

94 | I don't want a lot for Christmas
95 | There is just one thing I need
96 | I don't care about the presents
97 | Underneath the Christmas tree
98 | I just want you for my own
99 | More than you could ever know
100 | Make my wish come true oh
101 | All I want for Christmas is you
102 | I don't want a lot for Christmas
103 | There is just one thing I need, and I
104 | Don't care about the presents
105 | Underneath the Christmas tree
106 | I don't need to hang my stocking
107 | There upon the fireplace
108 | Santa Claus won't make me happy
109 | With a toy on Christmas day
110 | I just want you for my own
111 | More than you could ever know
112 | Make my wish come true
113 | All I want for Christmas is you
114 | I won't ask for much this Christmas
115 | I won't even wish for snow, and I
116 | I just wanna keep on waiting
117 | Underneath the mistletoe
118 | I won't make a list and send it
119 | To the North Pole for Saint Nick
120 | I won't even stay awake
121 | To hear those magic reindeer click
122 | 'Cause I just want you here tonight
123 | Holding on to me so tight
124 | What more can I do
125 | Oh, Baby all I want for Christmas is you
126 | All the lights are shining
127 | So brightly everywhere
128 | And the sound of children's
129 | Laughter fills the air
130 | And everyone is singing
131 | I hear those sleigh bells ringing
132 | Santa won't you bring me
133 | The one I really need
134 | Won't you please bring my baby to me quickly
135 | I don't want a lot for Christmas
136 | This is all I'm asking for
137 | I just wanna see my baby
138 | Standing right outside my door
139 | I just want you for my own
140 | More than you could ever know
141 | Make my wish come true
142 | Baby all I want for Christmas is you
143 | All I want for Christmas is you, baby
144 |

145 |
146 | 147 | 148 |
149 |

We Wish You a 150 | Merry 151 | Christmas

152 |

~ click the title to listen ~

153 |

154 | Good tidings we bring
155 | To you and your kin;
156 | Good tidings for Christmas
157 | And a happy New Year!
158 | We wish you a Merry Christmas
159 | We wish you a Merry Christmas
160 | We wish you a Merry Christmas
161 | And a happy New Year.
162 | Bring us pudding
163 | Bring us pudding
164 | Bring us pudding
165 | And a cup of good cheer
166 | We won't go 'til we get some
167 | We won't go 'til we get some
168 | We won't go until we get some
169 | So bring it out here!
170 | We wish you a Merry Christmas
171 | We wish you a Merry Christmas
172 | We wish you a Merry Christmas
173 | And a happy New Year
174 | And a happy New Year
175 | We wish you a Merry Christmas
176 | We wish you a Merry Christmas
177 | We wish you a Merry Christmas
178 | And a happy New Year.
179 | Merry Christmas
180 | Merry Christmas
181 | Good tidings we bring
182 | To you and your kin;
183 | Good tidings for Christmas
184 | And a happy New Year!
185 | We wish you a Merry Christmas
186 | We wish you a Merry Christmas
187 | We wish you a Merry Christmas
188 | And a happy New Year
189 | Good tidings we bring
190 | To you and your kin;
191 | And a happy New Year!
192 |

193 |
194 |
195 |
196 | 197 | 198 | -------------------------------------------------------------------------------- /My_Santa/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/4.jpg -------------------------------------------------------------------------------- /My_Santa/img/Facts/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/Facts/10.jpg -------------------------------------------------------------------------------- /My_Santa/img/Facts/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/Facts/9.jpg -------------------------------------------------------------------------------- /My_Santa/img/Facts/index_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/Facts/index_bg.png -------------------------------------------------------------------------------- /My_Santa/img/activities_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/activities_bg.jpg -------------------------------------------------------------------------------- /My_Santa/img/books/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/books/1.jpg -------------------------------------------------------------------------------- /My_Santa/img/books/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/books/10.jpg -------------------------------------------------------------------------------- /My_Santa/img/books/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/books/11.jpg -------------------------------------------------------------------------------- /My_Santa/img/books/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/books/2.jpg -------------------------------------------------------------------------------- /My_Santa/img/books/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/books/3.jpg -------------------------------------------------------------------------------- /My_Santa/img/books/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/books/4.jpg -------------------------------------------------------------------------------- /My_Santa/img/books/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/books/5.jpg -------------------------------------------------------------------------------- /My_Santa/img/books/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/books/6.jpg -------------------------------------------------------------------------------- /My_Santa/img/books/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/books/7.jpg -------------------------------------------------------------------------------- /My_Santa/img/books/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/books/8.jpg -------------------------------------------------------------------------------- /My_Santa/img/books/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/books/9.jpg -------------------------------------------------------------------------------- /My_Santa/img/books/books_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/books/books_bg.jpg -------------------------------------------------------------------------------- /My_Santa/img/books/books_mobile_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/books/books_mobile_bg.jpg -------------------------------------------------------------------------------- /My_Santa/img/cookie.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/cookie.jpg -------------------------------------------------------------------------------- /My_Santa/img/gift/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/gift/1.jpg -------------------------------------------------------------------------------- /My_Santa/img/gift/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/gift/2.jpg -------------------------------------------------------------------------------- /My_Santa/img/gift/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/gift/3.jpg -------------------------------------------------------------------------------- /My_Santa/img/gift/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/gift/4.jpg -------------------------------------------------------------------------------- /My_Santa/img/gift/airpods.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/gift/airpods.jpg -------------------------------------------------------------------------------- /My_Santa/img/gift/earrings.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/gift/earrings.jpg -------------------------------------------------------------------------------- /My_Santa/img/gift/gift_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/gift/gift_bg.jpg -------------------------------------------------------------------------------- /My_Santa/img/gift/gift_mobile_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/gift/gift_mobile_bg.jpg -------------------------------------------------------------------------------- /My_Santa/img/gift/iphone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/gift/iphone.jpg -------------------------------------------------------------------------------- /My_Santa/img/gift/vr.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/gift/vr.jpg -------------------------------------------------------------------------------- /My_Santa/img/github-logo-icon-16155.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/github-logo-icon-16155.png -------------------------------------------------------------------------------- /My_Santa/img/lights.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/lights.jpg -------------------------------------------------------------------------------- /My_Santa/img/movie/movie_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/movie/movie_bg.jpg -------------------------------------------------------------------------------- /My_Santa/img/movie/movie_mobile_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/movie/movie_mobile_bg.jpg -------------------------------------------------------------------------------- /My_Santa/img/recipes/Bûche de Noël.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/recipes/Bûche de Noël.jpg -------------------------------------------------------------------------------- /My_Santa/img/recipes/cabbage_rolls.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/recipes/cabbage_rolls.jpg -------------------------------------------------------------------------------- /My_Santa/img/recipes/gerbeaud.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/recipes/gerbeaud.jpg -------------------------------------------------------------------------------- /My_Santa/img/recipes/panettone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/recipes/panettone.jpg -------------------------------------------------------------------------------- /My_Santa/img/recipes/pudding.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/recipes/pudding.jpg -------------------------------------------------------------------------------- /My_Santa/img/recipes/recipe_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/recipes/recipe_bg.jpg -------------------------------------------------------------------------------- /My_Santa/img/recipes/roast_turkey.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/recipes/roast_turkey.jpg -------------------------------------------------------------------------------- /My_Santa/img/santa-claus-game.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/santa-claus-game.jpg -------------------------------------------------------------------------------- /My_Santa/img/sledge.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/sledge.jpg -------------------------------------------------------------------------------- /My_Santa/img/songs_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/songs_bg.jpg -------------------------------------------------------------------------------- /My_Santa/img/songs_mobile_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/songs_mobile_bg.jpg -------------------------------------------------------------------------------- /My_Santa/img/video/reindeer.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/My_Santa/img/video/reindeer.mp4 -------------------------------------------------------------------------------- /My_Santa/js/My_Santa-page-header.js: -------------------------------------------------------------------------------- 1 | document.write(` 2 | 3 | 15 | 16 | `); -------------------------------------------------------------------------------- /My_Santa/js/app.js: -------------------------------------------------------------------------------- 1 | const sumbit = document.getElementById('submit'); 2 | const input = document.getElementById("input"); 3 | const message = document.getElementById("message"); 4 | 5 | 6 | let myArray = ['Rudolph', 'Santa Claus', 'Gingerbread', 'Cookie', 'Tinker', 'Perky', 'Snowflake', 'Elvis', 'Happy', 'Jingle', 'Sugar', 'Candy', 'Lulu', 'Christmas', 'Bell', 'Nick', 'Noel', 'Claus', 'Emmanuel', 'Frost']; 7 | 8 | 9 | function submitButton() { 10 | 11 | // generate random name 12 | if (input.value.length > 0) { 13 | input.style.borderColor = 'royalblue'; 14 | let randomName = Math.floor(Math.random() * (myArray.length)); 15 | document.getElementById('generated-name').innerHTML = myArray[randomName]; 16 | 17 | // add required message 18 | } if (input.value.length === 0) { 19 | setMessages('Enter Your Name'); 20 | 21 | } else { 22 | 23 | setMessages(); 24 | } 25 | 26 | // clear input 27 | input.value = ""; 28 | }; 29 | 30 | 31 | function setMessages(msg) { 32 | message.style.color = 'yellow'; 33 | message.style.fontSize = '1.5rem'; 34 | message.textContent = msg; 35 | } 36 | 37 | 38 | function pressEnter(event) { 39 | if (input.value.length > 0 && event.which === 13) { 40 | submitButton(); 41 | } 42 | } 43 | 44 | sumbit.addEventListener('click', submitButton); 45 | input.addEventListener('keypress', pressEnter); 46 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | ___ 2 | > ### **UPDATE:** Project Archived! 3 | > **This project has been archived to preserve its state at the end of Hacktoberfest 2019. Thank you to everyone that participated and made this project what it is tody and we look forward to seeing you all at Hacktoberfest 2020! 4 | > Interested in more events? keep an eye on our Events page [HERE](https://zerotomastery.io/events?utm_source=github&utm_medium=santafied)** 5 | ____ 6 | 7 | # Santafied - Hacktoberfest 2019 8 | 9 | ![Santafied](https://cdn.discordapp.com/attachments/598312632407293963/626070022447431783/santafied.png) 10 | 11 | Welcome to this year's HTML challenge for Hacktoberfest ([What is Hacktoberfest?](https://github.com/zero-to-mastery/hacktoberfest-2019#what-is-hacktoberfest)). A project with beginners and aspiring developers in mind, utilizing HTML, CSS & maybe a dash of JavaScript to achieve a simplistic yet elegant Christmas themed website. 12 | 13 | Everyone is encouraged to participate, regardless of your skill level. This is a practice project and should be considered a playground. This project has plenty of options for collaboration, here are just a few of the many that we welcome pull requests: 14 | 15 | - HTML elements 16 | - CSS styling 17 | - Images 18 | - Text/Copy 19 | - Documentation 20 | - Fix Typos, Code Bugs or Accessibility oversights 21 | 22 | ## Project Brief 23 | 24 | Over the years Santa Claus has noticed a decline in the Christmas spirit and is in desperate need of our help! Santa and his elves have put together a [basic design concept](https://github.com/zero-to-mastery/Santafied/tree/master/design) for a brand new website they want to be able to launch in November. 25 | 26 | The website should provide visitors with the following: 27 | 28 | - [ ] A page for Christmas information and facts. 29 | - [ ] Recipes page for traditional food and drinks of Christmas 30 | - [ ] Gift suggestions for secret santas 31 | - [ ] Lyrics for Christmas songs :musical_note: 32 | - [ ] Christmas games 🎮 33 | - [ ] Christmas Films 🎥 34 | - [ ] Christmas Books 📚 35 | - [ ] Christmas Activities 🤪 36 | - [ ] Christmas themed party costumes 👻 37 | - [ ] Christmas themed backgrounds 🗻 38 | - [ ] Christmas themed [name generator webapp](https://www.google.com/search?q=what+is+my+christmas+name&oq=what+is+my+christma&aqs=chrome.0.0j69i57j0l4.8031j0j4&sourceid=chrome&ie=UTF-8) 📱 39 | 40 | ### Suggestions & Ideas 41 | 42 | Santa and his elves are very much open to ideas and suggestions for new content. Please create a new issue [here](https://github.com/zero-to-mastery/Santafied/issues), ensuring that you indicate if the task is "up for grabs" or you wish to take up the task yourself. 43 | 44 | ## Getting Started 45 | 46 | Ok, so you have read the brief and checked out the designs. Ready to contribute, but not sure how or where to start? 47 | 48 | > If you've never made a pull request before, or participated in an open-source project, we recommend taking a look at our [Start Here Guidelines](https://github.com/zero-to-mastery/start-here-guidelines). This repo has everything you need to learn about open-source, with a step-by-step guide to making your very first PR. 49 | > Once you've got your feet wet, you're ready to come back and dive into Hacktoberfest fun! 50 | 51 | 1. First up you need to fork (make a copy) of this repo to your Github account. 52 | 2. Clone (download) your fork to your computer 53 | 3. Set your streams so you can sync your clone with the original repo (get the latest updates) 54 | 55 | - `git remote add upstream https://github.com/zero-to-mastery/Santafied.git` 56 | - `git pull upstream master` 57 | - The above 2 commands will synchronize your forked version of the project with the actual repository. 58 | 59 | 4. Find a task [here](https://github.com/zero-to-mastery/Santafied/projects/1?add_cards_query=is%3Aopen) or [create a task](https://github.com/zero-to-mastery/Santafied/issues) 60 | 5. Create a branch for your task and complete the task 61 | 6. Commit and push the code to your fork 62 | 7. Create a pull request to have the changes merged into the origin 63 | 64 | **All discussions around this event can now be had in our #hacktoberfest-2019 channel on Discord!** 65 | 66 | Congratulations! You are now one pull request closer to getting that free t-shirt. Repeat steps 4-7 until you have made at least 4 qualifying pull requests. You can check how many qualifying pull requests you have made at Have Fun and Happy Coding Guys! 67 | 68 | ## To ensure everyone has the best chance at participating in this project. Please follow these simple guidelines where possible: 69 | 70 | - Simplicity is key: There is not much need for React, Sass etc here. Lets stick with vanilla HTML, CSS & JavaScript. 71 | - Commenting: Try to comment your code, so everyone can understand whats going on and could learn a thing or two. 72 | - Respect Content: Only use images/content that we are licensed to use. 73 | - Issues: Use Github issues, to create/find/solve ideas and bugs. 74 | -------------------------------------------------------------------------------- /assets/css/activities.css: -------------------------------------------------------------------------------- 1 | 2 | .card-text { 3 | height: 10vh; 4 | } 5 | 6 | .btn-primary { 7 | background-color: #ff4546 !important; 8 | border-color: #ff4546 !important; 9 | } 10 | 11 | .btn-primary:hover { 12 | background-color: #e03d3e !important; 13 | border-color: #e03d3e !important; 14 | } 15 | 16 | .card { 17 | min-width: 29%; 18 | border: 0 !important; 19 | background-color: #db4646; 20 | -webkit-box-shadow: 0 16px 32px rgba(100, 27, 27, 0.1); 21 | box-shadow: 0 16px 32px rgba(100, 27, 27, 0.1); 22 | } 23 | /* had to disable hover to stop an issue with bootstrap modal - if enabled, a fix will be needed */ 24 | /* .card:hover { 25 | -webkit-box-shadow: 0 20px 36px rgba(100, 27, 27, 0.3); 26 | box-shadow: 0 20px 36px rgba(100, 27, 27, 0.3); 27 | -webkit-transform: translateY(-4px); 28 | -ms-transform: translateY(-4px); 29 | transform: translateY(-4px); 30 | } */ 31 | /*with dark mode text is not visible hence added this explicit black color for cards*/ 32 | .card-body{ 33 | color:black; 34 | } 35 | 36 | /* This is added to align know more button for all the cards in activities page */ 37 | .card-title{ 38 | height: 50px; 39 | } -------------------------------------------------------------------------------- /assets/css/blog.css: -------------------------------------------------------------------------------- 1 | .card-tag { 2 | padding: 5px 10px; 3 | border: 1px solid green; 4 | color: green; 5 | display: inline-block; 6 | } 7 | 8 | .card-tag:hover { 9 | border-color: red; 10 | color: red; 11 | } 12 | 13 | .card-title a { 14 | color: #000; 15 | } 16 | 17 | .card-subtext { 18 | color: #ccc; 19 | } 20 | 21 | .card-subtext .author:after { 22 | content: '|'; 23 | margin-left: 10px; 24 | } 25 | 26 | body.dark .card { 27 | min-width: 29%; 28 | border: 0 !important; 29 | box-shadow: 0 16px 32px rgba(100,27,27,0.1); 30 | background-color: var(--background-light-gray); 31 | } 32 | 33 | body.dark .card-title a { 34 | color: var(--text-color); 35 | } 36 | 37 | input.search-blog { 38 | color: #222; 39 | position: relative; 40 | z-index: 5; 41 | -webkit-transition: z-index 0.8s, width 0.5s, background 0.3s ease, border 0.3s; 42 | -o-transition: z-index 0.8s, width 0.5s, background 0.3s ease, border 0.3s; 43 | transition: z-index 0.8s, width 0.5s, background 0.3s ease, border 0.3s; 44 | height: 45px; 45 | width: 0; 46 | margin: 0; 47 | padding: 5px 0 5px 40px; 48 | -webkit-box-sizing: border-box; 49 | box-sizing: border-box; 50 | font-size: 1rem; 51 | cursor: pointer; 52 | border-radius: 30px; 53 | border: 1px solid transparent; 54 | 55 | background: white url("https://www.stickpng.com/assets/images/585e4adacb11b227491c3392.png") no-repeat left center; 56 | background-size: 25px; 57 | background-position: 5px; 58 | 59 | } 60 | 61 | input.search-blog:focus { 62 | z-index: 3; 63 | width: 270px; 64 | 65 | border: 1px solid #666; 66 | background-color: white; 67 | outline: none; 68 | cursor: auto; 69 | padding-right: 10px; 70 | } 71 | 72 | .blog-searchbox-container { 73 | display: -webkit-box; 74 | display: -ms-flexbox; 75 | display: flex; 76 | } 77 | 78 | .searchbox-item { 79 | margin-left: auto; 80 | } 81 | 82 | .card-shadow { 83 | box-shadow: 0 1rem 1rem rgba(0,0,0,0.2); 84 | } 85 | -------------------------------------------------------------------------------- /assets/css/calendar.css: -------------------------------------------------------------------------------- 1 | ul {list-style-type: none;} 2 | body {font-family: Verdana, sans-serif;} 3 | 4 | /* Month header */ 5 | .month { 6 | padding: 70px 25px; 7 | width: 100%; 8 | background: #1abc9c; 9 | text-align: center; 10 | } 11 | 12 | /* Month list */ 13 | .month ul { 14 | margin: 0; 15 | padding: 0; 16 | } 17 | 18 | .month ul li { 19 | color: white; 20 | font-size: 20px; 21 | text-transform: uppercase; 22 | letter-spacing: 3px; 23 | } 24 | 25 | /* Previous button inside month header */ 26 | .month .prev { 27 | float: left; 28 | padding-top: 10px; 29 | } 30 | 31 | /* Next button */ 32 | .month .next { 33 | float: right; 34 | padding-top: 10px; 35 | } 36 | 37 | /* Weekdays (Mon-Sun) */ 38 | .weekdays { 39 | display: flex; 40 | flex-wrap: nowrap; 41 | margin: 0; 42 | padding: 10px 0; 43 | background-color:#ddd; 44 | } 45 | 46 | .weekdays li { 47 | display: inline-block; 48 | width: 13.6%; 49 | color: #666; 50 | text-align: center; 51 | } 52 | 53 | /* Days (1-31) */ 54 | .days { 55 | display: flex; 56 | flex-wrap: wrap; 57 | padding: 10px 0; 58 | background: #eee; 59 | margin: 0; 60 | } 61 | 62 | .days li { 63 | list-style-type: none; 64 | display: inline-block; 65 | width: 13.6%; 66 | text-align: center; 67 | margin-bottom: 5px; 68 | font-size:12px; 69 | color: #777; 70 | } 71 | 72 | /* Highlight the "current" day */ 73 | .days li .active { 74 | padding: 5px; 75 | background: #1abc9c; 76 | color: white !important 77 | } -------------------------------------------------------------------------------- /assets/css/darkmode.css: -------------------------------------------------------------------------------- 1 | /* Fallback for older browsers or manual mode */ 2 | body.dark { 3 | /* Dark mode variables go here */ 4 | --background-color: #000000; 5 | --background-color-rgb: 0, 0, 0; 6 | 7 | --text-color: #ffffff; 8 | --text-color-rgb: 255, 255, 255; 9 | transition: all 250ms linear; 10 | } 11 | 12 | .toggle-darkmode { 13 | cursor: pointer; 14 | margin-top: 5px; 15 | } 16 | 17 | .toggle-container { 18 | display: flex; 19 | flex-direction: column; 20 | align-items: center; 21 | justify-content: center; 22 | height: auto; 23 | cursor: pointer; 24 | } 25 | 26 | .ptag { 27 | font-size: 12px; 28 | cursor: pointer; 29 | } 30 | 31 | /* The switch - the box around the slider */ 32 | .switch { 33 | display: inline-block; 34 | margin-bottom: 0; 35 | position: relative; 36 | cursor: pointer; 37 | } 38 | 39 | /* Hide default HTML checkbox */ 40 | .switch input { 41 | opacity: 0; 42 | width: 0; 43 | height: 0; 44 | } 45 | 46 | /* The slider */ 47 | .slider { 48 | position: absolute; 49 | display: inline-block; 50 | bottom: -7px; 51 | left: 0px; 52 | width: 60px; 53 | height: 5px; 54 | top: auto; 55 | margin-bottom: 0; 56 | cursor: pointer; 57 | background-color: #2d2d2d; 58 | -webkit-transition: 0.4s; 59 | transition: 0.4s; 60 | } 61 | 62 | .slider:before { 63 | position: absolute; 64 | content: ''; 65 | height: 10px; 66 | width: 10px; 67 | left: 0; 68 | bottom: -2px; 69 | background-color: #2d2d2d; 70 | -webkit-transition: 0.4s; 71 | transition: 0.4s; 72 | } 73 | 74 | input:checked + .slider { 75 | background-color: #ff4546; 76 | } 77 | 78 | input:focus + .slider { 79 | box-shadow: 0 0 1px #2196f3; 80 | } 81 | 82 | input:checked + .slider:before { 83 | background-color: white; 84 | -webkit-transform: translateX(55px); 85 | -ms-transform: translateX(55px); 86 | transform: translateX(55px); 87 | } 88 | 89 | /* Rounded sliders */ 90 | .slider.round { 91 | border-radius: 34px; 92 | } 93 | 94 | .slider.round:before { 95 | border-radius: 50%; 96 | } 97 | 98 | @media screen and (max-width: 600px) { 99 | .toggle-container { 100 | justify-content: flex-start; 101 | } 102 | } 103 | 104 | @media (min-width: 601px) and (max-width: 1200px) { 105 | .toggle-container { 106 | justify-content: flex-start; 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /assets/css/elf-name-generator.css: -------------------------------------------------------------------------------- 1 | .name-generator { 2 | display: -webkit-box; 3 | display: -ms-flexbox; 4 | display: flex; 5 | -webkit-box-align: center; 6 | -webkit-box-direction: normal; 7 | -webkit-box-orient: vertical; 8 | -webkit-box-pack: center; 9 | -ms-flex-direction: column; 10 | flex-direction: column; 11 | -ms-flex-align: center; 12 | -ms-flex-pack: center; 13 | justify-content: center; 14 | align-items: center; 15 | margin-top: 50px; 16 | } 17 | 18 | .name-generator h1 { 19 | color: #c92e2f; 20 | font-family: "Mountains of Christmas", cursive; 21 | font-size: 3rem; 22 | } 23 | 24 | .name-generator span { 25 | font-size: 5rem; 26 | } 27 | 28 | .icon-container { 29 | margin-bottom: 2rem; 30 | } 31 | 32 | .elf-icon { 33 | width: 90px; 34 | } 35 | 36 | .given-name { 37 | font-family: "Mountains of Christmas", cursive; 38 | margin: 1.5rem; 39 | } 40 | 41 | #name-box p.given-name { 42 | font-size: 6rem; 43 | font-weight: bold; 44 | } 45 | 46 | .name-generator h3 { 47 | font-weight: 300; 48 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, 49 | Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 50 | } 51 | 52 | #loadName { 53 | background-color: #ff4546; 54 | border: 0; 55 | border-radius: 1.5rem; 56 | color: white; 57 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, 58 | Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 59 | font-size: 1.5rem; 60 | margin-top: 2.5rem; 61 | margin-bottom: 3rem; 62 | padding: 15px; 63 | width: 25%; 64 | text-transform: uppercase; 65 | -o-transition: background-color 0.2s; 66 | -webkit-transition: background-color 0.2s; 67 | transition: background-color 0.2s; 68 | } 69 | 70 | #loadName:hover { 71 | background-color: #c92e2f; 72 | } 73 | 74 | .box-style { 75 | display: block; 76 | font-size: 16px; 77 | font-family: sans-serif; 78 | font-weight: 700; 79 | color: #444; 80 | line-height: 1.3; 81 | padding: 0.6em 1.4em 0.5em 0.8em; 82 | width: 100%; 83 | max-width: 100%; 84 | -webkit-box-sizing: border-box; 85 | box-sizing: border-box; 86 | margin: 0; 87 | border: 1px solid #aaa; 88 | -webkit-box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04); 89 | box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04); 90 | border-radius: 0.5em; 91 | -moz-appearance: none; 92 | -webkit-appearance: none; 93 | appearance: none; 94 | background-color: #fff; 95 | background-repeat: no-repeat, repeat; 96 | background-position: right 0.7em top 50%, 0 0; 97 | background-size: 0.65em auto, 100%; 98 | } 99 | 100 | .box-style::-ms-expand { 101 | display: none; 102 | } 103 | 104 | .box-style:hover { 105 | border-color: #888; 106 | } 107 | 108 | .box-style:focus { 109 | border-color: #aaa; 110 | -webkit-box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7); 111 | box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7); 112 | box-shadow: 0 0 0 3px -moz-mac-focusring; 113 | color: #222; 114 | outline: none; 115 | } 116 | 117 | .box-style option { 118 | font-weight: normal; 119 | } 120 | 121 | .name-choice, 122 | .month-choice { 123 | padding: 1rem; 124 | } 125 | 126 | #resultContainer { 127 | display: none; 128 | margin-bottom: 4.5rem; 129 | text-align: center; 130 | } 131 | 132 | #result { 133 | font-family: "Mountains of Christmas", cursive; 134 | font-size: 4.5rem; 135 | } 136 | 137 | body.dark .invert { 138 | filter: invert(1); 139 | } 140 | -------------------------------------------------------------------------------- /assets/css/facts.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Bitter&display=swap'); 2 | 3 | .container { 4 | font-family: 'Bitter', serif; 5 | } 6 | 7 | .title { 8 | text-align: center; 9 | margin-bottom: 20px; 10 | } 11 | 12 | .tab-navigation { 13 | margin-bottom: 16px; 14 | } 15 | 16 | .tab-content .card-img { 17 | max-height: 250px; 18 | } 19 | 20 | .tab-content .col-md-12 { 21 | padding: 0; 22 | } 23 | 24 | /*Center all images, horizontally and vertically*/ 25 | .col-lg-4 { 26 | -webkit-box-pack: center; 27 | -ms-flex-pack: center; 28 | justify-content: center; 29 | -ms-grid-row-align: center; 30 | align-self: center; 31 | } 32 | 33 | @media (max-width: 767px) { 34 | .tab-content .card-img { 35 | max-height: 300px; 36 | -o-object-fit: cover; 37 | object-fit: cover; 38 | } 39 | } 40 | 41 | /*Padding*/ 42 | img { 43 | margin: 5px; 44 | } 45 | 46 | .btn-read-more { 47 | background-color: red; 48 | color: white; 49 | border-radius: 4px; 50 | text-align: center; 51 | padding: 0.5em 1em; 52 | -webkit-transition: 0.3s; 53 | -o-transition: 0.3s; 54 | transition: 0.3s; 55 | opacity: 1; 56 | border: none red; 57 | } 58 | 59 | .btn-read-more:hover { 60 | opacity: 0.7 61 | } 62 | -------------------------------------------------------------------------------- /assets/css/films.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Bitter&display=swap'); 2 | 3 | .container { 4 | font-family: 'Bitter', serif; 5 | } 6 | 7 | body#films .list-group-item.list-group-item-action.active { 8 | background-color: #ff4546 !important; 9 | border-color: #ff4546 !important; 10 | } 11 | 12 | .title { 13 | text-align: center; 14 | margin-bottom: 20px; 15 | } 16 | 17 | button { 18 | text-decoration: none; 19 | text-align: center; 20 | background-color: #ff4546; 21 | border: none; 22 | border-radius: 8px; 23 | padding: 10px 12px; 24 | } 25 | 26 | button a { 27 | color: #fff; 28 | font-size: 0.9rem; 29 | font-weight: 500; 30 | text-decoration: none; 31 | background-color: #ff4546; 32 | } 33 | 34 | button a:hover { 35 | color: #fff; 36 | text-decoration: none; 37 | } 38 | 39 | body.dark .card { 40 | background-color: var(--background-light-gray); 41 | } 42 | 43 | body.dark div#list-tab.list-group a{ 44 | background-color: var(--background-light-gray); 45 | color: var(--text-color); 46 | } 47 | body.dark div#list-tab.list-group div{ 48 | background-color: var(--background-light-gray); 49 | color: var(--text-color); 50 | } 51 | .row{ 52 | width: 100%; 53 | } 54 | 55 | .list-group { 56 | cursor: pointer; 57 | } 58 | /* #list-tab{ 59 | height: 40%; 60 | overflow-x: hidden; 61 | overflow-y: scroll; 62 | } */ 63 | 64 | .tab-navigation{ 65 | height: 25rem; 66 | } 67 | 68 | #list-tab::-webkit-scrollbar{ 69 | width:0.1em; 70 | } 71 | 72 | #list-tab::-webkit-scrollbar-track { 73 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 74 | box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 75 | border-radius: 10px; 76 | } 77 | 78 | #list-tab::-webkit-scrollbar-thumb { 79 | border-radius: 10px; 80 | background-color: #ff4546; 81 | /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); */ 82 | } 83 | 84 | .iframe-container{ 85 | position: relative; 86 | width: 100%; 87 | padding-bottom: 56.25%; 88 | height: 0; 89 | } 90 | .iframe-container iframe{ 91 | position: absolute; 92 | top:0; 93 | left: 0; 94 | width: 100%; 95 | height: 100%; 96 | } 97 | 98 | /* Button view game */ 99 | .btn-game { 100 | text-align: center; 101 | } -------------------------------------------------------------------------------- /assets/css/gifts.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Bitter&display=swap'); 2 | 3 | 4 | body { 5 | /* min-width: 100%; */ 6 | overflow-x: hidden; 7 | font-family: 'Bitter', serif; 8 | } 9 | 10 | div.products { 11 | display: -webkit-box; 12 | display: -ms-flexbox; 13 | display: flex; 14 | -webkit-box-orient: vertical; 15 | -webkit-box-direction: normal; 16 | -ms-flex-direction: column; 17 | flex-direction: column; 18 | margin-top: 2em; 19 | } 20 | 21 | /* #giftsPage { 22 | background-color: #ff4546; 23 | } */ 24 | 25 | #bannerImage { 26 | position: relative; 27 | } 28 | 29 | #bannerImage { 30 | height: 50vh; 31 | -o-object-fit: cover; 32 | object-fit: cover; 33 | } 34 | 35 | #banner { 36 | position: relative; 37 | margin-bottom: 40px; 38 | } 39 | 40 | #banner .caption { 41 | width: 100%; 42 | position: absolute; 43 | top: 30%; 44 | left: 50%; 45 | -webkit-transform: translate(-50%, -50%); 46 | -ms-transform: translate(-50%, -50%); 47 | transform: translate(-50%, -50%); 48 | color: white; 49 | display: -webkit-box; 50 | display: -ms-flexbox; 51 | display: flex; 52 | -webkit-box-orient: vertical; 53 | -webkit-box-direction: normal; 54 | -ms-flex-direction: column; 55 | flex-direction: column; 56 | font-size: 2em; 57 | text-shadow: 3px 2px 1px rgba(0, 0, 0, 0.6); 58 | padding: 30px; 59 | } 60 | 61 | /* section#giftsPage { 62 | height: 90vh; 63 | } */ 64 | #note { 65 | padding: 20px; 66 | /* border-top: 2px solid rgba(255, 255, 255, 0.8); */ 67 | font-size: 1.8em; 68 | color: #fff; /* Better visibility over brown background */ 69 | text-shadow: 2px 2px 5px #000000; 70 | text-align: center; 71 | background-color: brown; 72 | margin-bottom: 40px; 73 | } 74 | 75 | #giftList { 76 | display: -webkit-box; 77 | display: -ms-flexbox; 78 | display: flex; 79 | -webkit-box-orient: horizontal; 80 | -webkit-box-direction: normal; 81 | -ms-flex-direction: row; 82 | flex-direction: row; 83 | -ms-flex-wrap: wrap; 84 | flex-wrap: wrap; 85 | -webkit-box-pack: center; 86 | -ms-flex-pack: center; 87 | justify-content: center; 88 | background-color: #ff4546; 89 | /* border-top: 2px solid rgba(255, 255, 255, 0.8); */ 90 | margin-bottom: 40px; 91 | } 92 | 93 | .cardBackground { 94 | background-color: rgba(0, 0, 0, 0.5); 95 | } 96 | 97 | .card-img-top { 98 | height: 50%; 99 | } 100 | 101 | .card-title, 102 | .card-text { 103 | color: white; 104 | } 105 | 106 | .single-product { 107 | border-radius: 15px; 108 | margin: 10px !important; 109 | } 110 | 111 | .single-product img { 112 | border-top-left-radius: 15px; 113 | border-bottom-left-radius: 15px; 114 | } 115 | 116 | .single-product .content { 117 | padding-top: 10px; 118 | padding-left: 20px; 119 | } 120 | 121 | .single-product span { 122 | display: block; 123 | margin-top: 10px; 124 | margin-bottom: 10px; 125 | } 126 | 127 | .single-product-2 { 128 | border-radius: 15px; 129 | height: 100%; 130 | } 131 | 132 | .single-product-2 img { 133 | border-top-left-radius: 15px; 134 | border-top-right-radius: 15px; 135 | height: 250px; 136 | } 137 | 138 | .single-product-2 .content { 139 | padding-left: 40px; 140 | } 141 | 142 | .single-product-2 span { 143 | display: block; 144 | margin-top: 10px; 145 | margin-bottom: 10px; 146 | } 147 | 148 | .img-fluid { 149 | width: 100vw; 150 | height: 100%; 151 | border: 1px groove black; 152 | } 153 | 154 | .img-fluid.plush-toys { 155 | height: 150px; 156 | width: auto; 157 | object-fit: cover; 158 | } 159 | 160 | .flex { 161 | display: -webkit-box; 162 | display: -ms-flexbox; 163 | display: flex; 164 | -webkit-box-align: center; 165 | -ms-flex-align: center; 166 | align-items: center; 167 | -webkit-box-orient: vertical; 168 | -webkit-box-direction: normal; 169 | -ms-flex-direction: column; 170 | flex-direction: column; 171 | width: 100vw; 172 | } 173 | 174 | a:hover { 175 | text-decoration: none; 176 | } 177 | 178 | @media screen and (max-width: 600px) { 179 | #banner .caption { 180 | font-size: 1em; 181 | margin-top: 10%; 182 | } 183 | } 184 | 185 | /* Want to vertically center price, title and button */ 186 | 187 | .content.col-md-6.col-sm-12 { 188 | display: -webkit-box; 189 | display: -ms-flexbox; 190 | display: flex; 191 | -webkit-box-orient: vertical; 192 | -webkit-box-direction: normal; 193 | -ms-flex-direction: column; 194 | flex-direction: column; 195 | -webkit-box-pack: center; 196 | -ms-flex-pack: center; 197 | justify-content: center; 198 | -webkit-box-align: center; 199 | -ms-flex-align: center; 200 | align-items: center; 201 | background-color: cornflowerblue; 202 | } 203 | 204 | .card-body.row.p-0 { 205 | display: -webkit-box; 206 | display: -ms-flexbox; 207 | display: flex; 208 | -webkit-box-pack: justify; 209 | -ms-flex-pack: justify; 210 | justify-content: space-between; 211 | width: 100%; 212 | } -------------------------------------------------------------------------------- /assets/css/international.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Bitter&display=swap'); 2 | 3 | .container { 4 | font-family: 'Bitter', serif; 5 | } 6 | 7 | .title { 8 | text-align: center; 9 | margin-bottom: 20px; 10 | } 11 | 12 | .tab-navigation { 13 | margin-bottom: 16px; 14 | } 15 | 16 | .tab-content .card-img { 17 | max-height: 250px; 18 | } 19 | 20 | .tab-content .col-md-12 { 21 | padding: 0; 22 | } 23 | 24 | /*Center all images, horizontally and vertically*/ 25 | .col-lg-4 { 26 | -webkit-box-pack: center; 27 | -ms-flex-pack: center; 28 | justify-content: center; 29 | -ms-grid-row-align: center; 30 | align-self: center; 31 | } 32 | 33 | @media (max-width: 767px) { 34 | .tab-content .card-img { 35 | max-height: 300px; 36 | -o-object-fit: cover; 37 | object-fit: cover; 38 | } 39 | } 40 | 41 | /*Padding*/ 42 | img { 43 | margin: 5px; 44 | } 45 | 46 | .btn-read-more { 47 | background-color: red; 48 | color: white; 49 | border-radius: 4px; 50 | text-align: center; 51 | padding: 0.5em 1em; 52 | -webkit-transition: 0.3s; 53 | -o-transition: 0.3s; 54 | transition: 0.3s; 55 | opacity: 1; 56 | border: none red; 57 | } 58 | 59 | .btn-read-more:hover { 60 | opacity: 0.7 61 | } 62 | 63 | 64 | .list-group { 65 | max-height: 300px; 66 | overflow: scroll; 67 | overflow-x: hidden; 68 | -webkit-overflow-scrolling: touch; 69 | } -------------------------------------------------------------------------------- /assets/css/mouse-trail-snowball.css: -------------------------------------------------------------------------------- 1 | #snowball1 { 2 | position: absolute; 3 | -webkit-animation: pulse 2s infinite; /* Chrome, Safari, Opera */ 4 | animation: pulse 2s infinite; 5 | background: white; 6 | border-radius: 50%; 7 | height: 1em; 8 | width: 1em; 9 | margin-top: -0.3em; 10 | margin-left: -0.5em; 11 | z-index: 100; 12 | pointer-events: none; 13 | } 14 | 15 | #snowball2 { 16 | position: absolute; 17 | -webkit-animation: pulse 2s infinite 0.3s; /* Chrome, Safari, Opera */ 18 | animation: pulse 2s infinite 0.3s; 19 | background: white; 20 | border-radius: 50%; 21 | height: 0.8em; 22 | width: 0.8em; 23 | margin-top: -0.3em; 24 | margin-left: -0.5em; 25 | z-index: 100; 26 | pointer-events: none; 27 | } 28 | 29 | #snowball3 { 30 | position: absolute; 31 | -webkit-animation: pulse 2s infinite 0.6s; /* Chrome, Safari, Opera */ 32 | animation: pulse 2s infinite 0.6s; 33 | background: white; 34 | border-radius: 50%; 35 | height: 0.6em; 36 | width: 0.6em; 37 | margin-top: -0.3em; 38 | margin-left: -0.5em; 39 | z-index: 100; 40 | pointer-events: none; 41 | } 42 | 43 | @keyframes pulse { 44 | 0% { 45 | opacity: 0.2; 46 | } 47 | 50% { 48 | opacity: 0.9; 49 | } 50 | 100% { 51 | opacity: 0.2; 52 | } 53 | } 54 | 55 | @-webkit-keyframes pulse { 56 | 0% { 57 | opacity: 0.2; 58 | } 59 | 50% { 60 | opacity: 0.9; 61 | } 62 | 100% { 63 | opacity: 0.2; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /assets/css/name-generators.css: -------------------------------------------------------------------------------- 1 | main { 2 | -webkit-box-align: center; 3 | -ms-flex-align: center; 4 | align-items: center; 5 | display: -webkit-box; 6 | display: -ms-flexbox; 7 | display: flex; 8 | -webkit-box-orient: horizontal; 9 | -webkit-box-direction: normal; 10 | flex-flow: row wrap; 11 | -webkit-box-pack: center; 12 | -ms-flex-pack: center; 13 | justify-content: center; 14 | margin: 5% 0 10%; 15 | width: 100vw; 16 | } 17 | 18 | .generator-title { 19 | margin-top: 5%; 20 | text-align: center; 21 | } 22 | 23 | .generator-tile { 24 | background-color: #ff4546; 25 | border-radius: .7rem; 26 | height: 12rem; 27 | margin: 1rem; 28 | padding-top: 1.2rem; 29 | text-align: center; 30 | width: 15rem; 31 | } 32 | 33 | .generator-tile a { 34 | text-decoration: none; 35 | } 36 | 37 | svg { 38 | display: block; 39 | fill: #fff; 40 | margin: 0 auto 15px; 41 | width: 75px; 42 | } 43 | 44 | .generator-tile span { 45 | color: #fff; 46 | font-size: 1.2rem; 47 | text-decoration: none; 48 | } 49 | -------------------------------------------------------------------------------- /assets/css/recipes.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Bitter&display=swap'); 2 | 3 | .container { 4 | font-family: 'Bitter', serif; 5 | } 6 | 7 | .title { 8 | text-align: center; 9 | margin-bottom: 20px; 10 | } 11 | 12 | .tab-navigation { 13 | margin-bottom: 16px; 14 | } 15 | 16 | .tab-content .col-lg-4 > ul { 17 | margin: 16px 0 0; 18 | } 19 | 20 | .card-mb-3 { 21 | max-width: 670px; 22 | } 23 | 24 | .tab-content .card-img { 25 | max-width: 222px; 26 | height: auto; 27 | } 28 | 29 | .tab-pane ul, 30 | li { 31 | padding: 5px 0; 32 | } 33 | 34 | .tab-pane ul { 35 | list-style-type: none; 36 | } 37 | 38 | .tab-pane li { 39 | text-transform: capitalize; 40 | } 41 | 42 | .list-group { 43 | max-height: 300px; 44 | overflow: scroll; 45 | overflow-x: hidden; 46 | -webkit-overflow-scrolling: touch; 47 | } 48 | 49 | .card-title { 50 | color: #ff4546; 51 | } 52 | 53 | .card-img { 54 | width: 180px; 55 | height: auto; 56 | border: 2px solid #ff4546; 57 | border-radius: 5px; 58 | } 59 | 60 | @media (max-width: 767px) { 61 | .tab-content .card-img { 62 | max-height: 300px; 63 | -o-object-fit: cover; 64 | object-fit: cover; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /assets/css/reindeer-name-generator.css: -------------------------------------------------------------------------------- 1 | .name-generator { 2 | display: -webkit-box; 3 | display: -ms-flexbox; 4 | display: flex; 5 | -webkit-box-align: center; 6 | -webkit-box-direction: normal; 7 | -webkit-box-orient: vertical; 8 | -webkit-box-pack: center; 9 | -ms-flex-direction: column; 10 | flex-direction: column; 11 | -ms-flex-align: center; 12 | -ms-flex-pack: center; 13 | justify-content: center; 14 | align-items: center; 15 | margin-top: 50px; 16 | } 17 | 18 | .name-generator h1 { 19 | color: #c92e2f; 20 | font-family: "Mountains of Christmas", cursive; 21 | font-size: 3rem; 22 | } 23 | 24 | .name-generator span { 25 | font-size: 5rem; 26 | } 27 | 28 | .icon-container { 29 | margin-bottom: 2rem; 30 | } 31 | 32 | .reindeer-icon { 33 | width: 90px; 34 | } 35 | 36 | .given-name { 37 | font-family: "Mountains of Christmas", cursive; 38 | margin: 1.5rem; 39 | } 40 | 41 | #name-box p.given-name { 42 | font-size: 6rem; 43 | font-weight: bold; 44 | } 45 | 46 | .name-generator h3 { 47 | font-weight: 300; 48 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, 49 | Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 50 | } 51 | 52 | #loadName { 53 | background-color: #ff4546; 54 | border: 0; 55 | border-radius: 1.5rem; 56 | color: white; 57 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, 58 | Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 59 | font-size: 1.5rem; 60 | margin-top: 2.5rem; 61 | margin-bottom: 3rem; 62 | padding: 15px; 63 | width: 25%; 64 | text-transform: uppercase; 65 | -o-transition: background-color 0.2s; 66 | -webkit-transition: background-color 0.2s; 67 | transition: background-color 0.2s; 68 | } 69 | 70 | #loadName:hover { 71 | background-color: #c92e2f; 72 | } 73 | 74 | .box-style { 75 | display: block; 76 | font-size: 16px; 77 | font-family: sans-serif; 78 | font-weight: 700; 79 | color: #444; 80 | line-height: 1.3; 81 | padding: 0.6em 1.4em 0.5em 0.8em; 82 | width: 100%; 83 | max-width: 100%; 84 | -webkit-box-sizing: border-box; 85 | box-sizing: border-box; 86 | margin: 0; 87 | border: 1px solid #aaa; 88 | -webkit-box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04); 89 | box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04); 90 | border-radius: 0.5em; 91 | -moz-appearance: none; 92 | -webkit-appearance: none; 93 | appearance: none; 94 | background-color: #fff; 95 | background-repeat: no-repeat, repeat; 96 | background-position: right 0.7em top 50%, 0 0; 97 | background-size: 0.65em auto, 100%; 98 | } 99 | 100 | .box-style::-ms-expand { 101 | display: none; 102 | } 103 | 104 | .box-style:hover { 105 | border-color: #888; 106 | } 107 | 108 | .box-style:focus { 109 | border-color: #aaa; 110 | -webkit-box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7); 111 | box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7); 112 | color: #222; 113 | outline: none; 114 | } 115 | 116 | .box-style option { 117 | font-weight: normal; 118 | } 119 | 120 | .name-choice, 121 | .month-choice { 122 | padding: 1rem; 123 | } 124 | 125 | #resultContainer { 126 | display: none; 127 | margin-bottom: 4.5rem; 128 | text-align: center; 129 | } 130 | 131 | #result { 132 | font-family: "Mountains of Christmas", cursive; 133 | font-size: 4.5rem; 134 | } 135 | 136 | body.dark .invert { 137 | filter: invert(1); 138 | } 139 | -------------------------------------------------------------------------------- /assets/css/snowflakes.css: -------------------------------------------------------------------------------- 1 | .snowflake { 2 | color: #fff; 3 | font-size: 1em; 4 | font-family: Arial, sans-serif; 5 | text-shadow: 0 0 5px #000; 6 | } 7 | 8 | @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s} 9 | 10 | -------------------------------------------------------------------------------- /assets/css/snowman-name-generator.css: -------------------------------------------------------------------------------- 1 | .name-generator { 2 | align-items: center; 3 | display: -webkit-box; 4 | display: -ms-flexbox; 5 | display: flex; 6 | -webkit-box-align: center; 7 | -webkit-box-direction: normal; 8 | -webkit-box-orient: vertical; 9 | -webkit-box-pack: center; 10 | -ms-flex-direction: column; 11 | flex-direction: column; 12 | -ms-flex-align: center; 13 | -ms-flex-pack: center; 14 | justify-content: center; 15 | margin-top: 50px; 16 | } 17 | 18 | .name-generator h1 { 19 | color: #c92e2f; 20 | font-family: "Mountains of Christmas", cursive; 21 | font-size: 3rem; 22 | } 23 | 24 | .name-generator span { 25 | font-size: 5rem; 26 | } 27 | 28 | .given-name { 29 | font-family: "Mountains of Christmas", cursive; 30 | margin: 1.5rem; 31 | } 32 | 33 | #name-box p.given-name { 34 | font-size: 6rem; 35 | font-weight: bold; 36 | } 37 | 38 | .name-generator h3, 39 | label { 40 | font-weight: 300; 41 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, 42 | Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 43 | } 44 | 45 | .name-generator label { 46 | font-size: 1.75rem; 47 | } 48 | 49 | #loadName { 50 | background-color: #ff4546; 51 | border: 0; 52 | border-radius: 1.5rem; 53 | color: white; 54 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, 55 | Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 56 | font-size: 1.5rem; 57 | margin-top: 2.5rem; 58 | margin-bottom: 3rem; 59 | padding: 15px; 60 | width: 25%; 61 | text-transform: uppercase; 62 | -o-transition: background-color 0.2s; 63 | -webkit-transition: background-color 0.2s; 64 | transition: background-color 0.2s; 65 | } 66 | 67 | #loadName:hover { 68 | background-color: #c92e2f; 69 | } 70 | 71 | .box-style { 72 | -moz-appearance: none; 73 | -webkit-appearance: none; 74 | appearance: none; 75 | background-color: #fff; 76 | background-repeat: no-repeat, repeat; 77 | background-position: right 0.7em top 50%, 0 0; 78 | background-size: 0.65em auto, 100%; 79 | -webkit-box-sizing: border-box; 80 | box-sizing: border-box; 81 | border: 1px solid #aaa; 82 | -webkit-box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04); 83 | box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04); 84 | border-radius: 0.5em; 85 | color: #444; 86 | display: block; 87 | font-family: sans-serif; 88 | font-size: 16px; 89 | font-weight: 700; 90 | line-height: 1.3; 91 | margin: 0; 92 | max-width: 100%; 93 | padding: 0.6em 1.4em 0.5em 0.8em; 94 | width: 100%; 95 | } 96 | 97 | .box-style::-ms-expand { 98 | display: none; 99 | } 100 | 101 | .box-style:hover { 102 | border-color: #888; 103 | } 104 | 105 | .box-style:focus { 106 | border-color: #aaa; 107 | -webkit-box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7); 108 | box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7); 109 | color: #222; 110 | outline: none; 111 | } 112 | 113 | .box-style option { 114 | font-weight: normal; 115 | } 116 | 117 | .name-choice, 118 | .month-choice { 119 | padding: 1rem; 120 | } 121 | 122 | .icon-container { 123 | margin-bottom: 2rem; 124 | } 125 | 126 | .snowman-icon { 127 | width: 90px; 128 | } 129 | 130 | #resultContainer { 131 | display: none; 132 | margin-bottom: 4.5rem; 133 | text-align: center; 134 | } 135 | 136 | #result { 137 | font-family: "Mountains of Christmas", cursive; 138 | font-size: 4.5rem; 139 | } 140 | 141 | @media only screen and (max-width: 768px) { 142 | .container h1 { 143 | text-align: center; 144 | } 145 | 146 | #loadName { 147 | width: 75%; 148 | } 149 | } 150 | 151 | body.dark .invert { 152 | filter: invert(1); 153 | } 154 | -------------------------------------------------------------------------------- /assets/data/games.js: -------------------------------------------------------------------------------- 1 | const linkList = [ 2 | { 3 | title: 'Candy Canes', 4 | description: 5 | 'Similar to Spoons, only with candy canes. To play this game, grab a few candy canes, a deck of cards, and a group of three-to-six individuals or any number of people that can be accommodated by your dinner table. All the gamers must be able to reach the center of the table. And for more great holiday coverage, here are the 16 Ways Christmas Was Way Better in the 90s.', 6 | link: 'https://bestlifeonline.com/16-ways-christmas-was-better-in-the-90s/', 7 | imageLink: 8 | 'https://i1.wp.com/bestlifeonline.com/wp-content/uploads/2017/12/shutterstock_518406193.jpg?w=1024&ssl=1' 9 | }, 10 | { 11 | title: 'Snowball Throw', 12 | description: 13 | 'No, this is not a traditional snowball fight like you might have done as a kid. This one involves a person tossing marshmallows to fellow team members, aiming for his or her mouth. The team gains a point every time a marshmallow is caught—just make sure everyone washes their hands before and after the game.', 14 | link: 15 | 'https://i1.wp.com/bestlifeonline.com/wp-content/uploads/2017/12/shutterstock_572772310.jpg?w=1024&ssl=1', 16 | imageLink: 17 | 'https://upload.wikimedia.org/wikipedia/commons/d/de/Throwing_a_snowball_in_Boston.jpg' 18 | }, 19 | { 20 | title: 'Monopoly', 21 | description: 22 | "The greatest Christmas game of all time. If you aren't prepared to lose every friend you have over a game of Monopoly then you aren't playing hard enough!", 23 | link: 'https://en.wikipedia.org/wiki/Monopoly_(game)', 24 | imageLink: 25 | 'https://images.unsplash.com/photo-1566477479308-2b7abe8d7db9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60' 26 | }, 27 | { 28 | title: 'Christmas Stocking Game', 29 | description: 30 | 'Young and old love playing this game, and can be played using common Christmas items that can be found in your household.', 31 | link: 32 | 'https://www.ornamentshop.com/xmas_trivia/xmas_games.asp?game=STOCKINGGAME', 33 | imageLink: 34 | 'https://www.publicdomainpictures.net/pictures/280000/nahled/christmas-stocking-1544937611jzU.jpg' 35 | }, 36 | { 37 | title: 'Activity Board Game', 38 | description: 39 | "This is a party game from Piatnik played in 2-4 teams with at least 2 players each. The teams' meeples move over the board, the goal is to reach the finish. Depending on the sort of field they are currently standing at, one player has to act (pantomime) or to describe or to paint a phrase given on a card and the other members of his team have to find out what that should be. If they manage to do so, their meeple moves forward. There are several editions and expansions for this game. Here you will find more about the game!", 40 | link: 'https://boardgamegeek.com/boardgame/8790/activity', 41 | imageLink: 42 | 'https://cf.geekdo-images.com/imagepage/img/r2D0JuBwl0H77aaCcuqvPt3b6xk=/fit-in/900x600/filters:no_upscale()/pic3186165.jpg' 43 | }, 44 | { 45 | title: 'Christmas Piñatas', 46 | description: 47 | 'A mexican christmas tradition. A blindfolded person must attempt to break the piñata with a stick. Once the piñata is broken, the filling, usually consisting of candy, is released for everyone to enjoy!', 48 | link: 49 | 'https://www.apartmenttherapy.com/pinatas-a-christmas-tradition-162867', 50 | imageLink: 51 | 'https://cdn.apartmenttherapy.info/image/fetch/f_auto,q_auto:eco,c_fit,w_960/https%3A%2F%2Fstorage.googleapis.com%2Fgen-atmedia%2F2%2F2011%2F12%2Fa2cb1d3971d815e84b9a820b43a83139076adafc.jpeg' 52 | }, 53 | { 54 | title: 'Pin the nose on the Reindeer', 55 | description: 56 | 'If you have ever played Pin the Tail on the Donkey then you already know how to play Pin the nose on the Reindeer Party Accessory rudolph. The object of this game is to get the pacifier as close to the center as you can while you are blindfolded. ', 57 | link: 58 | 'https://www.amazon.com/nose-Reindeer-Party-Accessory-rudolph/dp/B0184QMFL8', 59 | imageLink: 60 | 'https://images-na.ssl-images-amazon.com/images/I/410FcZtkmOL.jpg' 61 | }, 62 | { 63 | title: 'Ornament Guess', 64 | description: 65 | 'have guests guess how many ornaments are on your tree when they walk into the party.', 66 | link: 'https://www.partygameideas.com/christmas-ornament-guess/', 67 | imageLink: 68 | 'https://images.unsplash.com/photo-1544130973-522ef28d62fc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80' 69 | }, 70 | { 71 | title: 'Toy Touchdown', 72 | description: 73 | 'Players must pass small toys or ornaments under their legs like they’re hiking a football and have a teammate catch them in a small Christmas basket that’s attached to the second player’s back. Teams race to be the first team to catch five or see who can get the most in a minute.', 74 | link: 'https://www.playpartyplan.com/christmas-games/', 75 | imageLink: 76 | 'https://www.playpartyplan.com/wp-content/uploads/2016/10/CHRISTMAS-GAMES-touchdown-01.png' 77 | }, 78 | { 79 | title: 'Hallmark Movie Bingo Game', 80 | description: 81 | 'If you and your crew are planning to watch one of the Christmas movies premiering on Hallmark this holiday season, make your viewing even more fun with this Bingo sheet.', 82 | link: 'https://www.countryliving.com/life/g23477105/family-christmas-games/?slide=6', 83 | imageLink: 84 | 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/hallmark-movie-bingo-1542052363.png?crop=0.850xw:1.00xh;0.0777xw,0&resize=980:*' 85 | }, 86 | { 87 | title: 'You’ve Been Jingled', 88 | description: 89 | 'You’ve been jingled is a fun, surprising and definitely exciting family tradition especially during the Christmas season. It’s a nice way to promote the spirit of gift giving without the need of saying, “Hey! The gift’s from me.”', 90 | link: 'https://christiancamppro.com/youve-been-jingled-a-christmas-game-that-spreads-joy/', 91 | imageLink: 92 | 'https://christiancamppro.com/wp-content/uploads/2018/12/youve-been-jingled-christmas-game.jpg' 93 | }, 94 | { 95 | title: 'Go Santa Go', 96 | description: 97 | 'Oh dear. It looks like Santa Claus hit the snooze button again, and barely got dressed, as he rushed out to work. Go, Santa! Go as quickly as possible, as you bounce along to deliver the gifts in timely fashion for the kids this Christmas. Make sure you put some clothes on before you drop down the chimney!', 98 | link: 'https://www.miniclip.com/games/go-santa-go/en/#t-c-f-C', 99 | imageLink: 100 | 'https://static3.miniclipcdn.com/content/game-icons/medium/gosantago.jpg' 101 | }, 102 | { 103 | title: 'Christmas Carol Pictionary Relay', 104 | description: 105 | 'Everyone knows Pictionary, but this version turns it up a few holiday-themed notches. Teams of party gamers race to depict familiar Christmas carols. As soon as the team figures out which carol has been drawn, they have to sing the song to score more points.', 106 | link: 'https://www.partygameideas.com/christmas-carol-pictionary-relay/', 107 | imageLink: 108 | 'https://www.partygameideas.com/wp/wp-content/uploads/2017/11/Christmas-Carol-Pictionary-Relay.jpg' 109 | }, 110 | { 111 | title: 'Christmas Puzzle Game - Christmas Games', 112 | description: 113 | 'Easy to play Christmas Puzzle game with beautiful graphics, the kids will love it! Fun Puzzle for Christmas with beautiful drawings for kids.', 114 | link: 'https://chrome.google.com/webstore/detail/christmas-puzzle-game-chr/phglegapajbnleklhlanfejghkcbjijd', 115 | imageLink: 116 | 'https://lh3.googleusercontent.com/7AVaTuRPRhq6S7kH3nSX_EY5YPleMqX2DDMOLTZbK0lBM_NgmrlUsAMMBBCfxe9XPZR1KQsdAA=w640-h400-e365' 117 | }, 118 | { 119 | title: 'White Elephant Gift Exchange', 120 | description: 121 | 'A white elephant gift exchange, Yankee swap or Dirty Santa is a party game where amusing, impractical gifts are exchanged during festivities. Usually, the goal of a white elephant gift exchange is to entertain party-goers rather than to gain a genuinely valuable or highly sought-after item.', 122 | link: 'https://www.whiteelephantrules.com/', 123 | imageLink: 124 | 'https://www.halfwaycreek.org/wp-content/uploads/2015/11/WhiteElephantChristmas.jpg' 125 | }, 126 | { 127 | title: 'Mr Rocket Penguin', 128 | description: 129 | 'This penguin is unstoppable in his Christmass Quest to reach every place on the planet. Just let him strap his trusty old rocket and watch this bird fly high!', 130 | link: 'http://www.merry-christmas.com/games/mr-rocket-penguin', 131 | imageLink: 132 | 'http://www.merry-christmas.com/images/mr-rocket-penguin-merry-christmas-christmas-games-christmas-recipies-kids-games-fun.png' 133 | } 134 | ]; 135 | 136 | 137 | 138 | 139 | 140 | 141 | -------------------------------------------------------------------------------- /assets/img/Gift.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/assets/img/Gift.jpg -------------------------------------------------------------------------------- /assets/img/gift_banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/assets/img/gift_banner.jpg -------------------------------------------------------------------------------- /assets/img/gift_bears.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/assets/img/gift_bears.jpg -------------------------------------------------------------------------------- /assets/img/gift_books.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/assets/img/gift_books.jpg -------------------------------------------------------------------------------- /assets/img/gift_books_novel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/assets/img/gift_books_novel.jpg -------------------------------------------------------------------------------- /assets/img/gift_cats.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/assets/img/gift_cats.jpg -------------------------------------------------------------------------------- /assets/img/gift_colours.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/assets/img/gift_colours.jpg -------------------------------------------------------------------------------- /assets/img/gift_colours_pencils.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/assets/img/gift_colours_pencils.jpg -------------------------------------------------------------------------------- /assets/img/gift_dolls.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/assets/img/gift_dolls.jpg -------------------------------------------------------------------------------- /assets/img/gift_fox.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/assets/img/gift_fox.jpg -------------------------------------------------------------------------------- /assets/img/gift_homedecor.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/assets/img/gift_homedecor.jpg -------------------------------------------------------------------------------- /assets/img/gift_homedecor2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/assets/img/gift_homedecor2.jpg -------------------------------------------------------------------------------- /assets/img/gift_homedecor_candles.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/assets/img/gift_homedecor_candles.jpg -------------------------------------------------------------------------------- /assets/img/gift_mug.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/assets/img/gift_mug.jpg -------------------------------------------------------------------------------- /assets/img/gift_owl.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/assets/img/gift_owl.jpg -------------------------------------------------------------------------------- /assets/img/gift_reindeer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/assets/img/gift_reindeer.jpg -------------------------------------------------------------------------------- /assets/img/gift_sneaker_socks.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/assets/img/gift_sneaker_socks.jpg -------------------------------------------------------------------------------- /assets/img/gift_snowman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/assets/img/gift_snowman.jpg -------------------------------------------------------------------------------- /assets/img/gift_wristwatch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/assets/img/gift_wristwatch.jpg -------------------------------------------------------------------------------- /assets/img/gift_wristwatch_sport.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/assets/img/gift_wristwatch_sport.jpg -------------------------------------------------------------------------------- /assets/img/reindeer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 12 | 34 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /assets/img/santa-claus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 10 | 12 | 15 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /assets/img/santafied.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/assets/img/santafied.jpg -------------------------------------------------------------------------------- /assets/img/santafied_logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/snowman.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 22 | 26 | 32 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /assets/js/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/assets/js/.gitkeep -------------------------------------------------------------------------------- /assets/js/blog-script.js: -------------------------------------------------------------------------------- 1 | let searchBlog = () => { 2 | const input = document.getElementById('search-blog'); 3 | const filter = input.value.toUpperCase(); 4 | 5 | const blogpost = document.getElementsByClassName("card"); 6 | for (let i = 0; i < blogpost.length; i++) { 7 | let card = blogpost[i].getElementsByTagName('h5'); 8 | if (card[0].innerHTML.toUpperCase().indexOf(filter) > -1) { 9 | blogpost[i].style.display = ""; 10 | } else { 11 | blogpost[i].style.display = "none"; 12 | } 13 | } 14 | } 15 | 16 | searchBlog(); -------------------------------------------------------------------------------- /assets/js/darkmode.js: -------------------------------------------------------------------------------- 1 | // Query for the toggle that is used to change between themes 2 | const toggle = document.querySelector("#themeToggle"); 3 | const storedMode = localStorage.getItem("darkmode"); 4 | const navbar = document.querySelector(".navbar "); 5 | 6 | const createElement = (elem, cssClass, txt = undefined) => { 7 | let node = document.createElement(elem); //create the List element 8 | 9 | if (cssClass) { 10 | node.classList.add(cssClass); 11 | } 12 | 13 | if (txt) { 14 | node.appendChild(document.createTextNode(txt)); 15 | } 16 | 17 | return node; 18 | }; 19 | 20 | const tc = createElement("DIV", "toggle-container"); 21 | const switchLabel = createElement("LABEL", "switch"); 22 | const checkbox = createElement("INPUT"); 23 | const spanSlider = createElement("SPAN", "slider"); 24 | const pTag = createElement("SPAN", "ptag", "dark mode"); 25 | 26 | checkbox.setAttribute("id", "themeToggle"); 27 | checkbox.setAttribute("type", "checkbox"); 28 | spanSlider.classList.add("round"); 29 | switchLabel.appendChild(pTag); 30 | switchLabel.appendChild(checkbox); 31 | switchLabel.appendChild(spanSlider); 32 | 33 | tc.appendChild(switchLabel); 34 | 35 | navbar.appendChild(tc); 36 | 37 | // Listen for the toggle check/uncheck to toggle the dark class on the 38 | checkbox.addEventListener("click", ev => toggleDarkMode(ev.target.checked)); 39 | 40 | // Called by the media query to check/uncheck the toggle 41 | function checkToggle(shouldCheck) { 42 | checkbox.checked = shouldCheck; 43 | } 44 | 45 | // Called when the page loads 46 | if (storedMode === null || storedMode === "false") { 47 | toggleDarkMode(false); 48 | } else { 49 | toggleDarkMode(true); 50 | } 51 | 52 | function toggleDarkMode(shouldEnable) { 53 | document.body.classList.toggle("dark", shouldEnable); 54 | checkToggle(shouldEnable); 55 | localStorage.setItem("darkmode", shouldEnable); 56 | } 57 | -------------------------------------------------------------------------------- /assets/js/elf-name-generator.js: -------------------------------------------------------------------------------- 1 | let choice = {firstLetter: "", monthChoice: ""}; 2 | let result = document.getElementById("result"); 3 | 4 | // letterChoice function 5 | function letterChoice() { 6 | letter = document.getElementById("name").value; 7 | choice.firstLetter = letter; 8 | } 9 | 10 | // monthChoice function 11 | function monthChoice() { 12 | month = document.getElementById("month").value; 13 | choice.monthChoice = month; 14 | } 15 | 16 | //function to generate elf name 17 | function generateName() { 18 | if (choice.firstLetter && choice.monthChoice) { 19 | document.getElementById("resultContainer").style.display = "block"; 20 | result.textContent = choice.firstLetter + " " + choice.monthChoice; 21 | } else { 22 | alert("Please input your data first."); 23 | } 24 | } 25 | 26 | function displayButtonText() { 27 | const button = document.getElementById('loadName'); 28 | if (document.body.offsetWidth < 600) { 29 | button.innerText = 'Go!' 30 | } 31 | } 32 | 33 | displayButtonText(); 34 | -------------------------------------------------------------------------------- /assets/js/email-validation.js: -------------------------------------------------------------------------------- 1 | const emailInput = document.getElementsByClassName('validate-me')[0]; 2 | const errorMsg = document.getElementsByClassName('error-msg')[0]; 3 | const pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i; 4 | 5 | window.onload = function() { 6 | 7 | emailInput.addEventListener('blur', () => { 8 | const input = emailInput.value; 9 | if (!pattern.test(input) && input != '' ) { 10 | errorMsg.style.display = "block"; 11 | } else { 12 | errorMsg.style.display = "none"; 13 | } 14 | }); 15 | 16 | } -------------------------------------------------------------------------------- /assets/js/lazyloading.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function() { 2 | var lazyloadImages; 3 | 4 | if ("IntersectionObserver" in window) { 5 | lazyloadImages = document.querySelectorAll(".card-img, .img-fluid"); 6 | var imageObserver = new IntersectionObserver(function(entries, observer) { 7 | entries.forEach(function(entry) { 8 | if (entry.isIntersecting) { 9 | var image = entry.target; 10 | image.src = image.dataset.src; 11 | image.classList.remove("lazy"); 12 | imageObserver.unobserve(image); 13 | } 14 | }); 15 | }); 16 | 17 | lazyloadImages.forEach(function(image) { 18 | imageObserver.observe(image); 19 | }); 20 | } else { 21 | var lazyloadThrottleTimeout; 22 | lazyloadImages = document.querySelectorAll(".card-img, .img-fluid"); 23 | 24 | function lazyload () { 25 | if(lazyloadThrottleTimeout) { 26 | clearTimeout(lazyloadThrottleTimeout); 27 | } 28 | 29 | lazyloadThrottleTimeout = setTimeout(function() { 30 | var scrollTop = window.pageYOffset; 31 | lazyloadImages.forEach(function(img) { 32 | if(img.offsetTop < (window.innerHeight + scrollTop)) { 33 | img.src = img.dataset.src; 34 | img.classList.remove('lazy'); 35 | } 36 | }); 37 | if(lazyloadImages.length == 0) { 38 | document.removeEventListener("scroll", lazyload); 39 | window.removeEventListener("resize", lazyload); 40 | window.removeEventListener("orientationChange", lazyload); 41 | } 42 | }, 20); 43 | } 44 | 45 | document.addEventListener("scroll", lazyload); 46 | window.addEventListener("resize", lazyload); 47 | window.addEventListener("orientationChange", lazyload); 48 | } 49 | }) 50 | -------------------------------------------------------------------------------- /assets/js/mouse-trail-snowball.js: -------------------------------------------------------------------------------- 1 | const snow1 = document.getElementById("snowball1"); 2 | const snow2 = document.getElementById("snowball2"); 3 | const snow3 = document.getElementById("snowball3"); 4 | 5 | const mouseX = event => { 6 | return event.clientX; 7 | } 8 | 9 | const mouseY = event => { 10 | return event.clientY; 11 | } 12 | 13 | const positionElement = (event, snow) => { 14 | const mouse = { 15 | x: mouseX(event), 16 | y: mouseY(event) 17 | } 18 | 19 | snow.style.top = `${mouse.y + document.documentElement.scrollTop}px`; 20 | snow.style.left = `${mouse.x}px`; 21 | } 22 | 23 | window.onmousemove = event => { 24 | setTimeout(() => { 25 | positionElement(event, snow1); 26 | }, 100); 27 | 28 | setTimeout(() => { 29 | positionElement(event, snow2); 30 | }, 200); 31 | 32 | setTimeout(() => { 33 | positionElement(event, snow3); 34 | }, 300); 35 | } 36 | -------------------------------------------------------------------------------- /assets/js/navLink-generator.js: -------------------------------------------------------------------------------- 1 | const navLinks = [{ 2 | label: "Home", 3 | href: "index.html", 4 | }, 5 | { 6 | label: "Facts", 7 | href: "pages/facts.html", 8 | }, 9 | { 10 | label: "Recipes", 11 | href: "pages/recipes.html", 12 | }, 13 | { 14 | label: "Gifts", 15 | href: "pages/gifts.html", 16 | }, 17 | { 18 | label: "Songs", 19 | href: "pages/songs.html", 20 | }, 21 | { 22 | label: "Games", 23 | href: "pages/games.html", 24 | }, 25 | { 26 | label: "Films", 27 | href: "pages/films.html", 28 | }, 29 | { 30 | label: "Books", 31 | href: "pages/books.html", 32 | }, 33 | { 34 | label: "Activities", 35 | href: "pages/activities.html", 36 | }, 37 | { 38 | label: "Name Generators", 39 | href: "pages/name-generators.html", 40 | }, 41 | { 42 | label: "International", 43 | href: "pages/international.html", 44 | }, 45 | { 46 | label: "Party Costumes", 47 | href: "pages/party-costumes.html", 48 | }, 49 | { 50 | label: "Wishes", 51 | href: "pages/wishes.html" 52 | }, 53 | { 54 | label: "Blog", 55 | href: "pages/blog.html", 56 | }, 57 | { 58 | label: "Stock Photos", 59 | href: "pages/stock-photos.html", 60 | }, 61 | { 62 | label: "Calendar", 63 | href: "pages/calendar.html", 64 | }, 65 | { 66 | label: "Contact Us", 67 | href: "#footer", 68 | }, 69 | ]; 70 | 71 | const generateLinks = () => { 72 | let dropdownEl = null; 73 | if (document.getElementById("nav-dropdown")) { 74 | dropdownEl = document.getElementById("nav-dropdown"); 75 | } else { 76 | dropdownEl = document.getElementById("nav-dropdown-from-page"); 77 | navLinks.pop(); 78 | } 79 | 80 | navLinks.forEach(navLink => { 81 | if (document.getElementById("nav-dropdown-from-page")) { 82 | navLink.href = `../${navLink.href}`; 83 | } 84 | 85 | const anchor = document.createElement("a"); 86 | anchor.href = navLink.href; 87 | anchor.className = "dropdown-item"; 88 | anchor.innerText = navLink.label; 89 | dropdownEl.appendChild(anchor); 90 | }); 91 | } 92 | 93 | document.addEventListener("DOMContentLoaded", () => { 94 | generateLinks(); 95 | }); -------------------------------------------------------------------------------- /assets/js/pages-footer.js: -------------------------------------------------------------------------------- 1 | document.write(` 2 | 74 | 75 | `); -------------------------------------------------------------------------------- /assets/js/pages-header.js: -------------------------------------------------------------------------------- 1 | document.write(` 2 |
3 |
4 |
5 |
6 | 23 |
24 | `); -------------------------------------------------------------------------------- /assets/js/recipeCard.js: -------------------------------------------------------------------------------- 1 | /* Renders recipes in theRecipes.js file. 2 | Use recipes.css to add Style 3 | */ 4 | 5 | window.onload = function() { 6 | 7 | recipes = listOf.sort(function(a, b){ 8 | 9 | if (a.name < b.name){ 10 | return -1; 11 | } 12 | if (a.name > b.name){ 13 | return 1; 14 | } 15 | return 0; 16 | 17 | }); 18 | 19 | for ( i=0; i < recipes.length; i++) { 20 | 21 | var id = recipes[i].id; 22 | var name = recipes[i].name; 23 | var description = recipes[i].description; 24 | var summary = recipes[i].summary; 25 | var img = recipes[i].img; 26 | var link = recipes[i].link; 27 | 28 | if (i == 0) { 29 | // Creates First Nav Link Element 30 | var getListTab = document.getElementById("list-tab"); 31 | var getContentTab = document.getElementById("nav-tabContent"); 32 | //Create Card Nav Link Item. 33 | getListTab.insertAdjacentHTML("afterbegin", ''+name+''); 34 | 35 | // Create tabe pane. SET to active. 36 | tabPane = TabPaneActive(true, id + "-a") 37 | getContentTab.appendChild(tabPane); 38 | } 39 | else{ 40 | //Create Card Nav Link Item. 41 | var getAncor = document.getElementById(recipes[i-1].id); 42 | getAncor.insertAdjacentHTML("afterend", ''+name+''); 43 | 44 | var getContentTab = document.getElementById("nav-tabContent"); 45 | // Create tabe pane. SET to fade. 46 | var tabPane = TabPaneActive(false, id + "-a"); 47 | getContentTab.appendChild(tabPane); 48 | } 49 | 50 | 51 | // Create Card 52 | var card = CreateCard(); 53 | tabPane.appendChild(card); 54 | // Create Row 55 | var row = CreateRow(); 56 | card.appendChild(row); 57 | // Create Left Section 58 | var leftSection = createLeftSection(); 59 | row.appendChild(leftSection); 60 | // Create Image 61 | leftSection.appendChild(getImg(img)); 62 | // Create Summary Points 63 | var summaryList = summary[0]; 64 | leftSection.appendChild(CreateSummary(summaryList)); 65 | // Create Right Section 66 | var rightSection = CreateRightSection(); 67 | row.appendChild(rightSection); 68 | // Create Card Body 69 | var cardBody = CreateCardBody(); 70 | rightSection.appendChild(cardBody); 71 | // Create Title 72 | var cardTitle = CreateCardTitle(name); 73 | cardBody.appendChild(cardTitle); 74 | // Create Text 75 | var mainCardText = CreateMainText(description); 76 | cardBody.appendChild(mainCardText); 77 | // Create Footer 78 | var footer = CreateCardFooter(link); 79 | cardBody.appendChild(footer); 80 | 81 | $('a[data-toggle="list"]').on('shown.bs.tab', function (e) { 82 | //e.target // newly activated tab 83 | //e.relatedTarget // previous active tab 84 | //$(window).scrollTop(0); 85 | $("html, body").animate({ scrollTop: 0 },10); 86 | }) 87 | } 88 | 89 | function CreateSummary(summary) { 90 | // takes array {id: id, name: name, age: age} 91 | if (summary.length != 0) { 92 | 93 | var cardSummary = document.createElement("ul"); 94 | for (item in summary) { 95 | //console.log(item) 96 | var cardPoint = document.createElement("li"); 97 | cardPoint.appendChild(document.createTextNode(item + ": " +summary[item])); 98 | cardSummary.appendChild(cardPoint); 99 | } 100 | //console.log(cardSummary); 101 | return cardSummary; 102 | } 103 | else { 104 | 105 | var cardPoint = document.createElement("li"); 106 | cardPoint.innerHTML = "no summary available"; 107 | 108 | return cardPoint; 109 | } 110 | } 111 | 112 | function TabPaneActive(isActive, id) { 113 | 114 | var tabPane = document.createElement("div"); 115 | tabPane.id = id; 116 | 117 | if (isActive) { 118 | tabPane.setAttribute("class", "tab-pane active"); 119 | } 120 | else { 121 | tabPane.setAttribute("class", "tab-pane fade"); 122 | } 123 | 124 | tabPane.setAttribute("role", "tabpanel"); 125 | 126 | return tabPane; 127 | } 128 | 129 | function CreateCard() { 130 | 131 | var card = document.createElement("div"); 132 | card.setAttribute("class", "card-mb-3"); 133 | 134 | return card 135 | } 136 | 137 | function CreateRow() { 138 | 139 | var row = document.createElement("div"); 140 | row.setAttribute("class", "row no-gutters"); 141 | 142 | return row; 143 | } 144 | 145 | function createLeftSection() { 146 | var leftSection = document.createElement("div"); 147 | leftSection.setAttribute("class", "col-md-4"); 148 | 149 | return leftSection; 150 | } 151 | 152 | function getImg(img) { 153 | var image = document.createElement("img"); 154 | image.setAttribute("class", "card-img"); 155 | image.setAttribute("src", img); 156 | 157 | return image; 158 | } 159 | 160 | function CreateRightSection() { 161 | var rightSection = document.createElement("div"); 162 | rightSection.setAttribute("class", "col-md-8"); 163 | 164 | return rightSection; 165 | } 166 | 167 | function CreateCardBody() { 168 | var cardBody = document.createElement("div"); 169 | cardBody.setAttribute("class", "card-body"); 170 | 171 | return cardBody; 172 | } 173 | 174 | function CreateCardTitle(name) { 175 | var cardTitle = document.createElement("h5"); 176 | cardTitle.setAttribute("class", "card-title"); 177 | cardTitle.innerHTML = name; 178 | 179 | return cardTitle; 180 | } 181 | 182 | function CreateMainText(string) { 183 | var cardText = document.createElement("p"); 184 | cardText.setAttribute("class", "card-text"); 185 | cardText.innerHTML = string; 186 | 187 | //console.log(cardText); 188 | return cardText; 189 | } 190 | 191 | function CreateCardFooter(link) { 192 | 193 | var smallTextCard = document.createElement("a"); 194 | smallTextCard.setAttribute("class", "btn button-color"); 195 | smallTextCard.setAttribute("role", "button"); 196 | smallTextCard.setAttribute("href", link); 197 | smallTextCard.innerHTML = "Know More"; 198 | 199 | return smallTextCard; 200 | } 201 | 202 | } -------------------------------------------------------------------------------- /assets/js/reindeer-name-generator.js: -------------------------------------------------------------------------------- 1 | let choice = { firstLetter: "", monthChoice: "" }; 2 | let result = document.getElementById("result"); 3 | 4 | // letterChoice function 5 | function letterChoice() { 6 | letter = document.getElementById("name").value; 7 | choice.firstLetter = letter; 8 | } 9 | 10 | // monthChoice function 11 | function monthChoice() { 12 | month = document.getElementById("month").value; 13 | choice.monthChoice = month; 14 | } 15 | 16 | //function to generate reindeer name 17 | function generateName() { 18 | if (choice.firstLetter && choice.monthChoice) { 19 | document.getElementById("resultContainer").style.display = "block"; 20 | result.textContent = choice.firstLetter + " " + choice.monthChoice; 21 | } else { 22 | alert("Please input your data first."); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /assets/js/snowman-name-generator.js: -------------------------------------------------------------------------------- 1 | function generateName() { 2 | 3 | let firstLetter = document.getElementById('firstLetter').value, 4 | userMonth = document.getElementById('selectMonth').value, 5 | index = 0, 6 | snowmanName, 7 | snowmanSurname, 8 | result = document.getElementById('result'); 9 | 10 | const alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']; 11 | 12 | const snowNames = ['Carrot', 'Eve', 'Sherry', 'Cozy', 'Teddy', 'Sweetie', 'Hope', 'Cookie', 'Robin', 'Tinsel', 'Joy', 'Sugarplum', 'Sparkle', 'Magic', 'Candy', 'Festive', 'Berry', 'Holly', 'Rosie', 'Twinkle', 'Angel', 'Frostie', 'Bells', 'Merry', 'Jingle', 'Joy']; 13 | 14 | const snowSurnames = ['McSnowflake', 'McSparkles', 'McBlizzard', 'McIcicles', 'McSnowballs', 'McFreeze', 'McFrosty', 'McSparkle', 'McGlisten', 'McChilly', 'McSlushy', 'McSnowy']; 15 | 16 | if (firstLetter && userMonth) { 17 | index = alphabet.indexOf(firstLetter.toLowerCase()); 18 | snowmanName = snowNames[index]; 19 | snowmanSurname = snowSurnames[userMonth]; 20 | document.getElementById("resultContainer").style.display = "block"; 21 | result.textContent = snowmanName + ' ' + snowmanSurname; 22 | } else { 23 | alert('Please input your data first.'); 24 | } 25 | 26 | } -------------------------------------------------------------------------------- /assets/js/songsCard.js: -------------------------------------------------------------------------------- 1 | window.onload = function () { 2 | 3 | // Sort the songs on title 4 | const songsSorted = songs.sort(function (a, b) { 5 | if (a.title < b.title) { 6 | return -1; 7 | } 8 | if (a.title > b.title) { 9 | return 1; 10 | } 11 | return 0; 12 | }); 13 | 14 | // Render songs using HTML template 15 | songsSorted.forEach(function(song, index){ 16 | renderSong(song, index); 17 | }) 18 | } 19 | 20 | const renderSong = function (song, index) { 21 | const { title, description, imageUrl, youtubeUrl, audioUrl, lyrics } = song; 22 | 23 | const menuContainer = document.querySelector("#list-tab"); 24 | const cardContainer = document.querySelector("#card-container"); 25 | 26 | const menuTemplate = document.querySelector('#menu-template'); 27 | const cardTemplate = document.querySelector('#card-template'); 28 | 29 | const menuClone = document.importNode(menuTemplate.content, true); 30 | const cardClone = document.importNode(cardTemplate.content, true); 31 | 32 | // Menu item 33 | const menuItem = menuClone.querySelector("a.list-group-item"); 34 | menuItem.textContent = title; 35 | 36 | //Image url 37 | const images = cardClone.querySelector("img.card-img"); 38 | images.setAttribute('src', imageUrl); 39 | 40 | // Card title 41 | const cardTitle = cardClone.querySelector("h5.card-title"); 42 | cardTitle.textContent = title; 43 | 44 | // Description 45 | const cardDescription = cardClone.querySelector("p.card-text"); 46 | cardDescription.innerHTML = description; 47 | 48 | // Caption 49 | const cardCaption = cardClone.querySelector("figcaption"); 50 | cardCaption.innerHTML = title; 51 | 52 | // Youtube 53 | if (youtubeUrl && youtubeUrl !== '') { 54 | const cardYoutube = cardClone.querySelector("small.text-muted a"); 55 | cardYoutube.setAttribute("href", youtubeUrl); 56 | } 57 | 58 | // Audio 59 | if (audioUrl && audioUrl !== '') { 60 | const cardAudio = cardClone.querySelector("audio"); 61 | cardAudio.setAttribute("src", audioUrl); 62 | } 63 | 64 | // Lyrics 65 | const cardLyrics = cardClone.querySelector("p#lyrics"); 66 | cardLyrics.innerHTML = lyrics; 67 | 68 | // Set correct ids 69 | menuClone.querySelector("a").setAttribute("href", `#card${index}`); 70 | cardClone.querySelector(".tab-pane").setAttribute("id", `card${index}`); 71 | 72 | 73 | // If first item, make it active 74 | if (index === 0) { 75 | menuClone.querySelector("a").classList.toggle('active'); 76 | cardClone.querySelector(".tab-pane").classList.toggle('active'); 77 | cardClone.querySelector(".tab-pane").classList.toggle('show'); 78 | } 79 | 80 | menuContainer.appendChild(menuClone); 81 | cardContainer.appendChild(cardClone); 82 | }; -------------------------------------------------------------------------------- /assets/js/stock-photos.js: -------------------------------------------------------------------------------- 1 | window.onload = async () => { 2 | const clientString = 'client' 3 | 4 | const x = '371db87cae6cbce09dcab5e63f' 5 | const random = '_id=5f15d1d0b2164d7a7e6f' 6 | const hash = 'd0d0214b40a21d4b7a' 7 | 8 | const response = await fetch(`https://api.unsplash.com/photos/random?${clientString}${random}${x}${hash}&count=21&query=christmas`) 9 | 10 | const myJson = await response.json() 11 | 12 | const filteredPhotos = myJson.map((photo) => ({ 13 | link: photo.links.html, 14 | url: photo.urls.thumb, 15 | alt_description: photo.alt_description, 16 | description: photo.description, 17 | photographer: photo.user.name 18 | })) 19 | 20 | const container = document.querySelector('#stock-photos-container') 21 | 22 | container.setAttribute('style', 23 | "padding: 0 3px; align-self: center" 24 | ) 25 | 26 | const row = document.createElement('div') 27 | row.classList.add('row') 28 | row.style.justifyContent = 'center' 29 | container.appendChild(row) 30 | 31 | filteredPhotos.forEach((photo) => { 32 | const image = (photoProps) => { 33 | const imgDiv = document.createElement('div') 34 | 35 | imgDiv.setAttribute('style', 36 | "padding: 7px 0; margin: 7px; border: 1px solid black; border-radius: 7px; text-align: center; width: 30%; box-shadow: 5px 5px 10px 1px;", 37 | ) 38 | 39 | imgDiv.innerHTML = `${photoProps.alt_description}
Photo by ${photoProps.photographer}` 40 | 41 | return imgDiv 42 | } 43 | 44 | row.appendChild(image(photo)) 45 | }) 46 | } -------------------------------------------------------------------------------- /design/card-designs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/design/card-designs.png -------------------------------------------------------------------------------- /design/general-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/design/general-layout.png -------------------------------------------------------------------------------- /design/newdesign.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/design/newdesign.png -------------------------------------------------------------------------------- /img/activity 2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/img/activity 2.jpg -------------------------------------------------------------------------------- /img/activity.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/img/activity.jpg -------------------------------------------------------------------------------- /img/books.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/img/books.jpg -------------------------------------------------------------------------------- /img/calendar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/img/calendar.jpg -------------------------------------------------------------------------------- /img/factsSanta.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/img/factsSanta.jpg -------------------------------------------------------------------------------- /img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/img/favicon.png -------------------------------------------------------------------------------- /img/feliz_navidad_cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/img/feliz_navidad_cover.jpg -------------------------------------------------------------------------------- /img/games.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/img/games.jpg -------------------------------------------------------------------------------- /img/gift_snowman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/img/gift_snowman.jpg -------------------------------------------------------------------------------- /img/gifts.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/img/gifts.jpg -------------------------------------------------------------------------------- /img/microphone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/img/microphone.jpg -------------------------------------------------------------------------------- /img/movies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/img/movies.png -------------------------------------------------------------------------------- /img/name.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/img/name.jpg -------------------------------------------------------------------------------- /img/recipes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/img/recipes.jpg -------------------------------------------------------------------------------- /img/snow-xmas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/img/snow-xmas.jpg -------------------------------------------------------------------------------- /img/songs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/img/songs.jpg -------------------------------------------------------------------------------- /img/wish.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zero-to-mastery/Santafied/bc568a7351ad729cf7b97323522413cc1a5e42ef/img/wish.jpg -------------------------------------------------------------------------------- /pages/blog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | Santafied | Blog 20 | 21 | 22 | 23 | 24 | 25 | 28 | 29 | 30 | 31 |
32 |
33 |

Blog

34 | 35 |
36 |
37 |
38 | 41 |
42 |
43 |
44 |
45 | 46 |
47 |
48 |
49 |
50 | ... 51 | Christmas 52 |
53 | Santa's Favorite Cookies 54 |
55 |
56 | By Santa Clause 57 | Oct 1, 2019 58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 | ... 66 | Christmas 67 |
68 | How to Guide Santa's Sleigh 69 |
70 |
71 | By Rudolph 72 | Nov 28, 2019 73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 | ... 81 | Christmas 82 |
How to Wrap Gifts
83 |
84 | By Mrs. Clause 85 | Nov 26, 2019 86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 | ... 96 | Christmas 97 |
First Time Caroling
98 |
99 | By An Elf 100 | Nov 21, 2019 101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 | ... 109 | Christmas 110 |
111 | Building a Gingerbread House 112 |
113 |
114 | By Gingerbread Man 115 | Nov 15, 2019 116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 | ... 124 | Christmas 125 |
Best Christmas Songs
126 |
127 | By Santa Clause 128 | Nov 1, 2019 129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 | ... 137 | Christmas 138 |
139 | Christmas at the Tropicals: Best refreshing beverages for 140 | warmer Christmas Nights 141 |
142 |
143 | By Mrs. Clause 144 | Oct 15, 2019 145 |
146 |
147 |
148 |
149 |
150 |
151 | 152 | 153 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | -------------------------------------------------------------------------------- /pages/calendar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Calendar 21 | 22 | 23 | 24 | 25 | 26 | 29 | 30 | 31 | 32 | 33 | 97 | 98 | 99 |
100 | 105 |
106 | 107 | 116 | 117 | 150 | 151 | 152 | 153 | 154 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 165 | 167 | 169 | 181 | 182 | 183 | 184 | -------------------------------------------------------------------------------- /pages/games.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 18 | 19 | 20 | 21 | 22 | 26 | 27 | 28 | 29 | 30 | Santafied | Games 31 | 32 | 33 | 34 | 35 | 38 | 39 | 40 |
41 |

Christmas Games

42 |
43 |
44 |
45 |
46 | 47 | 48 | 49 |
50 |
51 |
52 |
53 |
54 |
55 | ... 56 |
57 |
58 |
59 |
60 |

61 |

62 | View Game 65 |

66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 | 74 |
75 |
76 | 77 | 78 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 92 | 97 | 102 | 151 | 152 | 153 | -------------------------------------------------------------------------------- /pages/stock-photos.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | Santafied | Stock Photos 27 | 28 | 29 | 30 | 33 | 34 | 35 | 38 | 39 | 40 |

Christmas Stock Photos

41 |
42 |
43 | 44 | 45 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 58 | 60 | 62 | 63 | 64 | --------------------------------------------------------------------------------