├── scss ├── utils │ ├── _index.scss │ └── _variables.scss ├── base │ ├── _index.scss │ ├── _base.scss │ └── _normalize.scss ├── styles.scss └── components │ ├── _typography.scss │ ├── _scoreboard.scss │ ├── _index.scss │ ├── _mediaqueries.scss │ ├── _letters.scss │ ├── _overlay.scss │ ├── _keyboard.scss │ └── _animations.scss ├── images ├── liveHeart.png └── lostHeart.png ├── .sass-cache ├── cfeb1da58a2fd2e10e4fdf12730ff73b3d2d2c38 │ ├── _base.scssc │ ├── _normalize.scssc │ └── _index.scssc ├── 07db57c0bfd9960f6e07c8bd16c1c156cb01c810 │ ├── _letters.scssc │ ├── _overlay.scssc │ ├── _animations.scssc │ ├── _keyboard.scssc │ ├── _mediaqueries.scssc │ ├── _index.scssc │ ├── _typography.scssc │ └── _scoreboard.scssc ├── 7cc8784d265d4ab9c9777508c4d28cbbcf96d57a │ ├── _variables.scssc │ └── _index.scssc └── 19699f31bd945a150ab1a27f841a75b4cac64065 │ └── styles.scssc ├── classes.js ├── .gitignore ├── .gitattributes ├── index.html ├── README.md ├── js └── logic.js └── css ├── styles.css.map ├── normalize.css └── styles.css /scss/utils/_index.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | -------------------------------------------------------------------------------- /scss/base/_index.scss: -------------------------------------------------------------------------------- 1 | @import "normalize", "base"; 2 | -------------------------------------------------------------------------------- /scss/styles.scss: -------------------------------------------------------------------------------- 1 | @import "utils/index", "base/index", "components/index"; 2 | -------------------------------------------------------------------------------- /scss/components/_typography.scss: -------------------------------------------------------------------------------- 1 | /* Title */ 2 | .header { 3 | color: #000; 4 | } 5 | -------------------------------------------------------------------------------- /scss/components/_scoreboard.scss: -------------------------------------------------------------------------------- 1 | /* Scoreboard */ 2 | .tries img{ 3 | width:35px; 4 | } 5 | -------------------------------------------------------------------------------- /images/liveHeart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HubSpotContentOffers/game_show_app_v1/HEAD/images/liveHeart.png -------------------------------------------------------------------------------- /images/lostHeart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HubSpotContentOffers/game_show_app_v1/HEAD/images/lostHeart.png -------------------------------------------------------------------------------- /scss/components/_index.scss: -------------------------------------------------------------------------------- 1 | @import "typography", "animations", "overlay", "keyboard", "letters", "scoreboard", "mediaqueries"; 2 | -------------------------------------------------------------------------------- /.sass-cache/cfeb1da58a2fd2e10e4fdf12730ff73b3d2d2c38/_base.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HubSpotContentOffers/game_show_app_v1/HEAD/.sass-cache/cfeb1da58a2fd2e10e4fdf12730ff73b3d2d2c38/_base.scssc -------------------------------------------------------------------------------- /.sass-cache/07db57c0bfd9960f6e07c8bd16c1c156cb01c810/_letters.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HubSpotContentOffers/game_show_app_v1/HEAD/.sass-cache/07db57c0bfd9960f6e07c8bd16c1c156cb01c810/_letters.scssc -------------------------------------------------------------------------------- /.sass-cache/07db57c0bfd9960f6e07c8bd16c1c156cb01c810/_overlay.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HubSpotContentOffers/game_show_app_v1/HEAD/.sass-cache/07db57c0bfd9960f6e07c8bd16c1c156cb01c810/_overlay.scssc -------------------------------------------------------------------------------- /.sass-cache/07db57c0bfd9960f6e07c8bd16c1c156cb01c810/_animations.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HubSpotContentOffers/game_show_app_v1/HEAD/.sass-cache/07db57c0bfd9960f6e07c8bd16c1c156cb01c810/_animations.scssc -------------------------------------------------------------------------------- /.sass-cache/07db57c0bfd9960f6e07c8bd16c1c156cb01c810/_keyboard.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HubSpotContentOffers/game_show_app_v1/HEAD/.sass-cache/07db57c0bfd9960f6e07c8bd16c1c156cb01c810/_keyboard.scssc -------------------------------------------------------------------------------- /.sass-cache/7cc8784d265d4ab9c9777508c4d28cbbcf96d57a/_variables.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HubSpotContentOffers/game_show_app_v1/HEAD/.sass-cache/7cc8784d265d4ab9c9777508c4d28cbbcf96d57a/_variables.scssc -------------------------------------------------------------------------------- /.sass-cache/cfeb1da58a2fd2e10e4fdf12730ff73b3d2d2c38/_normalize.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HubSpotContentOffers/game_show_app_v1/HEAD/.sass-cache/cfeb1da58a2fd2e10e4fdf12730ff73b3d2d2c38/_normalize.scssc -------------------------------------------------------------------------------- /.sass-cache/07db57c0bfd9960f6e07c8bd16c1c156cb01c810/_mediaqueries.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HubSpotContentOffers/game_show_app_v1/HEAD/.sass-cache/07db57c0bfd9960f6e07c8bd16c1c156cb01c810/_mediaqueries.scssc -------------------------------------------------------------------------------- /classes.js: -------------------------------------------------------------------------------- 1 | //overlay 2 | -title 3 | -button 4 | -text 5 | 6 | //keyboard 7 | -keyrows = 3 8 | -buttons = 7,9,10 9 | -letter 10 | 11 | //score 12 | -score = var 13 | -Wins = var 14 | -losses = var 15 | 16 | //phrase 17 | -words 18 | -letters 19 | -text 20 | 21 | //gameInstance 22 | -state 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows thumbnail cache files 2 | Thumbs.db 3 | ehthumbs.db 4 | ehthumbs_vista.db 5 | 6 | # Folder config file 7 | Desktop.ini 8 | 9 | # Recycle Bin used on file shares 10 | $RECYCLE.BIN/ 11 | 12 | # Windows Installer files 13 | *.cab 14 | *.msi 15 | *.msm 16 | *.msp 17 | 18 | # Windows shortcuts 19 | *.lnk 20 | 21 | # ========================= 22 | # Operating System Files 23 | # ========================= 24 | -------------------------------------------------------------------------------- /scss/utils/_variables.scss: -------------------------------------------------------------------------------- 1 | ///Import fonts 2 | @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&Roboto:300'); 3 | 4 | 5 | 6 | $color-won: #78CF82; 7 | $color-lost: #D94545; 8 | $color-start: #292a2b; 9 | $color-neutral: #445069; 10 | $color-neutral-light: #D2D2D2; 11 | $color-keys: #37474F; 12 | $color-keys-light: #E5E5E5; 13 | $font-size-large: 60px; 14 | $font-size-medium: 25px; 15 | $transition: all 1s ease-in-out; 16 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /scss/components/_mediaqueries.scss: -------------------------------------------------------------------------------- 1 | @media screen and (min-width: 768px) { 2 | button{ 3 | min-width: 40px; 4 | min-height: 40px; 5 | margin: 3px; 6 | } 7 | .letter{ 8 | height: 40px; 9 | width: 40px; 10 | margin-right: 2px; 11 | } 12 | .tries img{ 13 | width:50px; 14 | } 15 | } 16 | @media screen and (min-width: 1024px) { 17 | button{ 18 | min-width: 50px; 19 | min-height: 50px; 20 | margin: 3px; 21 | } 22 | .letter{ 23 | height: 50px; 24 | width: 50px; 25 | } 26 | .tries img{ 27 | width:70px; 28 | } 29 | } 30 | 31 | -------------------------------------------------------------------------------- /scss/components/_letters.scss: -------------------------------------------------------------------------------- 1 | /* Phrase */ 2 | 3 | .letter { 4 | font-size: $font-size-medium; 5 | height: 30px; 6 | width: 30px; 7 | /* padding: 10px 1px 0 1px; */ 8 | margin-right: 1px; 9 | margin-bottom: 10px; 10 | color: transparent; 11 | background: $color-neutral-light; 12 | opacity: 0; 13 | border-radius: 5px; 14 | -webkit-transition: $transition; 15 | -o-transition: $transition; 16 | transition: $transition; 17 | border: 1px solid black; 18 | box-shadow: 5px 5px 5px black; 19 | } 20 | 21 | .space { 22 | width: 15px; 23 | } 24 | .show { 25 | color: #000; 26 | background-color: #76CE82; 27 | transform: rotateY(360deg); 28 | } 29 | -------------------------------------------------------------------------------- /.sass-cache/7cc8784d265d4ab9c9777508c4d28cbbcf96d57a/_index.scssc: -------------------------------------------------------------------------------- 1 | 3.5.6 2 | 821fe63194b908bdb3eeef9d46c5f04c3e536201 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::ImportNode :@imported_filenameI"variables:ET;[:@filename0: @options{:@template0: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"ZC:/xampp/htdocs/GitHub/Treehouse/FEWDProjects/game_show_app_v1/scss/utils/_index.scss; T:@importero: Sass::Importers::Filesystem: 6 | @rootI"CC:/xampp/htdocs/GitHub/Treehouse/FEWDProjects/game_show_app_v1; T:@real_rootI"CC:/xampp/htdocs/GitHub/Treehouse/FEWDProjects/game_show_app_v1; T:@same_name_warningso:Set: 7 | @hash}F:@imported_file0; 8 | 0; @ 9 | ; I"@import "variables"; 10 | ; T; i;o; ;o;; i;i;o;; i;i;@;@:@has_childrenT -------------------------------------------------------------------------------- /scss/components/_overlay.scss: -------------------------------------------------------------------------------- 1 | /* Overlay */ 2 | 3 | #overlay { 4 | display: flex; 5 | flex-direction: column; 6 | position: fixed; 7 | color: #FFFFFF; 8 | justify-content: center; 9 | top: 0; 10 | bottom: 0; 11 | left: 0; 12 | right: 0; 13 | border-radius: 5px; 14 | z-index: 10000; 15 | } 16 | 17 | .title { 18 | color: #000; 19 | } 20 | 21 | .start { 22 | background: linear-gradient(to bottom, #f4f5f6 0%, #8b8b8b 50%, #000000 100%); 23 | } 24 | 25 | .start a { 26 | color: $color-start; 27 | } 28 | 29 | .won { 30 | background: linear-gradient(to bottom, #f4f5f6 0%, #c4f1ce 50%, #18722b 100%); 31 | } 32 | 33 | .won a { 34 | color: $color-start; 35 | } 36 | 37 | .lost { 38 | background: linear-gradient(to bottom, #f4f5f6 0%, #e59393 50%, #4c0101 100%); 39 | } 40 | 41 | .lost a { 42 | color: $color-lost; 43 | } 44 | -------------------------------------------------------------------------------- /scss/components/_keyboard.scss: -------------------------------------------------------------------------------- 1 | /* Keyboard */ 2 | 3 | .keyrow { 4 | display: flex; 5 | justify-content: center; 6 | } 7 | 8 | button{ 9 | border: 1px solid black; 10 | color: $color-keys; 11 | font-size: $font-size-medium; 12 | background-color: $color-keys-light; 13 | border-radius: 5px; 14 | min-width: 30px; 15 | min-height: 30px; 16 | margin: 2px; 17 | box-shadow: 0px 5px 5px black; 18 | &.wrong { 19 | box-shadow: inset 0px 2px 2px black; 20 | background-color: $color-lost; 21 | transition: box-shadow ease-in-out 1s both; 22 | } 23 | &.correct{ 24 | box-shadow: inset 0px 2px 2px black; 25 | background-color: $color-won; 26 | transition: box-shadow ease-in-out 1s both; 27 | } 28 | } 29 | .startBtn { 30 | padding: 8px; 31 | margin: 50px auto; 32 | background: #FFFFFF; 33 | border-radius: 5px; 34 | font-size: $font-size-medium; 35 | } 36 | -------------------------------------------------------------------------------- /.sass-cache/cfeb1da58a2fd2e10e4fdf12730ff73b3d2d2c38/_index.scssc: -------------------------------------------------------------------------------- 1 | 3.5.6 2 | 4297c7ef7c5e4f7a13748e92bd79fa0c83279808 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::ImportNode :@imported_filenameI"normalize:ET;[:@filename0: @options{:@template0: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"YC:/xampp/htdocs/GitHub/Treehouse/FEWDProjects/game_show_app_v1/scss/base/_index.scss; T:@importero: Sass::Importers::Filesystem: 6 | @rootI"CC:/xampp/htdocs/GitHub/Treehouse/FEWDProjects/game_show_app_v1; T:@real_rootI"CC:/xampp/htdocs/GitHub/Treehouse/FEWDProjects/game_show_app_v1; T:@same_name_warningso:Set: 7 | @hash}F:@imported_file0o; ;I" base; T;[; 8 | 0; @ 9 | ; 0; i;o; ;o;; i;i;o;; i;i!;@;@;0; 10 | 0; @ 11 | ; I""@import "normalize", "base"; 12 | ; T; i;o; ;o;; i;i;o;; i;i;@;@:@has_childrenT -------------------------------------------------------------------------------- /.sass-cache/19699f31bd945a150ab1a27f841a75b4cac64065/styles.scssc: -------------------------------------------------------------------------------- 1 | 3.5.6 2 | f6741b28c4825ce2515176cd0f0785a791e4c1a8 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::ImportNode :@imported_filenameI"utils/index:ET;[:@filename0: @options{:@template0: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI"TC:/xampp/htdocs/GitHub/Treehouse/FEWDProjects/game_show_app_v1/scss/styles.scss; T:@importero: Sass::Importers::Filesystem: 6 | @rootI"CC:/xampp/htdocs/GitHub/Treehouse/FEWDProjects/game_show_app_v1; T:@real_rootI"CC:/xampp/htdocs/GitHub/Treehouse/FEWDProjects/game_show_app_v1; T:@same_name_warningso:Set: 7 | @hash}F:@imported_file0o; ;I"base/index; T;[; 8 | 0; @ 9 | ; 0; i;o; ;o;; i;i;o;; i;i);@;@;0o; ;I"components/index; T;[; 10 | 0; @ 11 | ; 0; i;o; ;o;; i;i+;o;; i;i=;@;@;0; 12 | 0; @ 13 | ; I">@import "utils/index", "base/index", "components/index"; 14 | ; T; i;o; ;o;; i;i;o;; i;i;@;@:@has_childrenT -------------------------------------------------------------------------------- /scss/base/_base.scss: -------------------------------------------------------------------------------- 1 | /* main */ 2 | * { 3 | box-sizing: border-box; 4 | user-select: none; 5 | transition: $transition; 6 | } 7 | 8 | body { 9 | background: linear-gradient(to bottom, #f4f5f6 0%, #8b8b8b 50%, #000000 100%); 10 | justify-content: space-between; 11 | flex-direction: column; 12 | display: flex; 13 | height: 100vh; 14 | margin:0px !important; 15 | overflow: hidden; 16 | } 17 | 18 | li, ol, ul { 19 | padding: 0; 20 | display: inline-block; 21 | } 22 | 23 | h2 { 24 | margin: 0; 25 | text-transform: uppercase; 26 | font-family: 'Open Sans', sans-serif; 27 | font-size: $font-size-large; 28 | 29 | } 30 | h3{ 31 | margin: 10px; 32 | text-transform: uppercase; 33 | font-family: 'Open Sans', sans-serif; 34 | font-size: $font-size-medium; 35 | display:inline; 36 | } 37 | 38 | button { 39 | 40 | } 41 | 42 | .main-container { 43 | display: flex; 44 | flex-direction: column; 45 | justify-content: space-around; 46 | height: 100%; 47 | max-height: 900px; 48 | text-align: center; 49 | } 50 | 51 | .section { 52 | width: 100%; 53 | padding: 10px; 54 | } 55 | -------------------------------------------------------------------------------- /scss/components/_animations.scss: -------------------------------------------------------------------------------- 1 | .animate-out { 2 | animation: roll-out-right 1s ease-in-out 1s 1 both; 3 | } 4 | .animate-in { 5 | animation: roll-in-left 1s ease-in-out 1s 1 both; 6 | } 7 | .slide-in-left { 8 | animation: slide-in-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; 9 | } 10 | .slide-out-right { 11 | animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; 12 | } 13 | 14 | @keyframes roll-in-left { 15 | 0% { 16 | transform: translateX(-100vw) rotate(-540deg); 17 | opacity: 0; 18 | } 19 | 100% { 20 | transform: translateX(0) rotate(0deg); 21 | opacity: 1; 22 | } 23 | } 24 | 25 | @keyframes roll-out-right { 26 | 0% { 27 | transform: translateX(0px) rotate(0deg); 28 | opacity: 1; 29 | } 30 | 100% { 31 | transform: translateX(100vw) rotate(540deg); 32 | opacity: 0; 33 | } 34 | } 35 | 36 | @keyframes slide-in-left { 37 | 0% { 38 | transform: translateX(-100vw); 39 | opacity: 0; 40 | } 41 | 100% { 42 | transform: translateX(0); 43 | opacity: 1; 44 | } 45 | } 46 | @keyframes slide-out-right { 47 | 0% { 48 | transform: translateX(0); 49 | opacity: 1; 50 | } 51 | 100% { 52 | transform: translateX(100vw); 53 | opacity: 0; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /.sass-cache/07db57c0bfd9960f6e07c8bd16c1c156cb01c810/_index.scssc: -------------------------------------------------------------------------------- 1 | 3.5.6 2 | dae47d7fe332b18346a39f33582760c903669542 3 | o:Sass::Tree::RootNode :@children[ o:Sass::Tree::ImportNode :@imported_filenameI"typography:ET;[:@filename0: @options{:@template0: 4 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i: @offseti: @end_poso;; i;i: 5 | @fileI" scss/components/_index.scss: encoding" IBM437:@importero: Sass::Importers::Filesystem: 6 | @rootI"CC:/xampp/htdocs/GitHub/Treehouse/FEWDProjects/game_show_app_v1; T:@real_rootI"CC:/xampp/htdocs/GitHub/Treehouse/FEWDProjects/game_show_app_v1; T:@same_name_warningso:Set: 7 | @hash}F:@imported_file0o; ;I"animations; T;[; 8 | 0; @ 9 | ; 0; i;o; ;o;; i;i;o;; i;i(;@;@;0o; ;I" overlay; T;[; 10 | 0; @ 11 | ; 0; i;o; ;o;; i;i*;o;; i;i3;@;@;0o; ;I" keyboard; T;[; 12 | 0; @ 13 | ; 0; i;o; ;o;; i;i5;o;; i;i?;@;@;0o; ;I" letters; T;[; 14 | 0; @ 15 | ; 0; i;o; ;o;; i;iA;o;; i;iJ;@;@;0o; ;I"scoreboard; T;[; 16 | 0; @ 17 | ; 0; i;o; ;o;; i;iL;o;; i;iX;@;@;0o; ;I"mediaqueries; T;[; 18 | 0; @ 19 | ; 0; i;o; ;o;; i;iZ;o;; i;ih;@;@;0; 20 | 0; @ 21 | ; I"i@import "typography", "animations", "overlay", "keyboard", "letters", "scoreboard", "mediaqueries"; 22 | ; T; i;o; ;o;; i;i;o;; i;i;@;@:@has_childrenT -------------------------------------------------------------------------------- /.sass-cache/07db57c0bfd9960f6e07c8bd16c1c156cb01c810/_typography.scssc: -------------------------------------------------------------------------------- 1 | 3.5.6 2 | 07d918b8c868487d7ec40abedf7f7d696056c871 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::CommentNode : @value[I"/* Title */:ET: 4 | @type: normal;[:@filename0: @options{: 5 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti: @end_poso;;i;i: 6 | @fileI"%scss/components/_typography.scss: encoding" IBM437:@importero: Sass::Importers::Filesystem: 7 | @rootI"CC:/xampp/htdocs/GitHub/Treehouse/FEWDProjects/game_show_app_v1; T:@real_rootI"CC:/xampp/htdocs/GitHub/Treehouse/FEWDProjects/game_show_app_v1; T:@same_name_warningso:Set: 8 | @hash}Fo:Sass::Tree::RuleNode: 9 | @rule[I" .header; T:@parsed_ruleso:"Sass::Selector::CommaSequence: @members[o:Sass::Selector::Sequence;"[o:#Sass::Selector::SimpleSequence ;"[o:Sass::Selector::Class: 10 | @nameI" header; T;i; 0: @subject0: @sourceso;;}F;o; ;o;;i;i;o;;i;i ;0;0;i; 0;i;i; 0:@selector_source_rangeo; ;o;;i;i;o;;i;i;@;@: 11 | @tabsi;[o:Sass::Tree::PropNode;&[I" 12 | color; T;[o: Sass::Script::Tree::Literal;o: Sass::Script::Value::String ;I" #000; T; @ ; 13 | :identifier:"@deprecated_interp_equivalent0;i;o; ;o;;i;i;o;;i;i;@;@;*i:@prop_syntax:new;[; 0; @ ;i;o; ;o;;i;i;o;;i;i;@;@:@name_source_rangeo; ;@6;o;;i;i ;@;@:@value_source_rangeo; ;o;;i;i;@7;@;@; 0; @ ;i;o; ;@';o;;i;i;@;@:@has_childrenT; 0; @ :@templateI",/* Title */ 14 | .header { 15 | color: #000; 16 | } 17 | ; T;i;o; ;o;;i;i;o;;i;i;@;@;4T -------------------------------------------------------------------------------- /.sass-cache/07db57c0bfd9960f6e07c8bd16c1c156cb01c810/_scoreboard.scssc: -------------------------------------------------------------------------------- 1 | 3.5.6 2 | 807560cae33f9470c23e426f58aa657b65a179a7 3 | o:Sass::Tree::RootNode :@children[o:Sass::Tree::CommentNode : @value[I"/* Scoreboard */:ET: 4 | @type: normal;[:@filename0: @options{: 5 | @linei:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i: @offseti: @end_poso;;i;i: 6 | @fileI"dC:/xampp/htdocs/GitHub/Treehouse/FEWDProjects/game_show_app_v1/scss/components/_scoreboard.scss; T:@importero: Sass::Importers::Filesystem: 7 | @rootI"CC:/xampp/htdocs/GitHub/Treehouse/FEWDProjects/game_show_app_v1; T:@real_rootI"CC:/xampp/htdocs/GitHub/Treehouse/FEWDProjects/game_show_app_v1; T:@same_name_warningso:Set: 8 | @hash}Fo:Sass::Tree::RuleNode: 9 | @rule[I".tries img; T:@parsed_ruleso:"Sass::Selector::CommaSequence: @members[o:Sass::Selector::Sequence;![o:#Sass::Selector::SimpleSequence ;![o:Sass::Selector::Class: 10 | @nameI" 11 | tries; T;i; 0: @subject0: @sourceso;;}F;o; ;o;;i;i;o;;i;i ;0;0;i; 0o;# ;![o:Sass::Selector::Element ;%I"img; T:@namespace0;i; 0;&0;'o;;}F;o; ;o;;i;i ;o;;i;i;0;0;i; 0;i;i; 0:@selector_source_rangeo; ;o;;i;i;o;;i;i;@;@: 12 | @tabsi;[o:Sass::Tree::PropNode;%[I" 13 | width; T;[o: Sass::Script::Tree::Literal;o: Sass::Script::Value::String ;I" 35px; T; @ ; 14 | :identifier:"@deprecated_interp_equivalent0;i;o; ;o;;i;i;o;;i;i;@;@;+i:@prop_syntax:new;[; 0; @ ;i;o; ;o;;i;i;o;;i;i;@;@:@name_source_rangeo; ;@>;o;;i;i ;@;@:@value_source_rangeo; ;o;;i;i;@?;@;@; 0; @ ;i;o; ;@/;o;;i;i;@;@:@has_childrenT; 0; @ :@templateI"2/* Scoreboard */ 15 | .tries img{ 16 | width:35px; 17 | } 18 | ; T;i;o; ;o;;i;i;o;;i;i;@;@;5T -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Wheel of Success! 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |

Guess This

14 | Start Game 15 |
16 | 17 | 21 | 22 |
23 | 24 |
25 |
26 |
27 | 28 |
29 |
30 | 31 |
32 |
33 | 34 |
35 |
36 | 37 |
38 |
    39 |
    2. 40 |
    3. 41 |
    4. 42 |
    5. 43 |
    6. 44 |
45 |
46 |
47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Information regarding this project repository 2 | 3 | ## Goals 4 | The goal of this project is to display a solid understanding of how to interact with the DOM and manipulate DOM objects via javascript. This project provided only a desktop mockup, leaving the design and development of the layout for screen sizes relevant to mobile and tablet devices on the student. 5 | 6 | ## Languages 7 | 1. HTML5 8 | 2. CSS3 9 | 3. SASS 10 | 4. Client side Javascript 11 | 12 | ## Technologies and Techniques 13 | 1. Chrome Dev Tools 14 | 2. Editors 15 | 3. Terminal 16 | 4. git and github 17 | 5. Mobile First Responsive Design 18 | 6. Fluid width Responsive Design 19 | 7. DOM manipulation 20 | 21 | ## Techdegree Project Description 22 | In this project, you'll create a browser version of “Wheel of Success”, a word guessing game where players will click letters from an onscreen keyboard to try to guess a random phrase. 23 | 24 | Using Javascript, you’ll create an array of phrases and write functions to choose a random phrase from that array, split the phrase into letters, and put those letters onto the game board. 25 | 26 | Each time the player guesses a letter, you’ll need to compare the letter the player has chosen with the random phrase. If the letter is in the phrase, you’ll update the game board with the chosen letters. 27 | 28 | A player can keep choosing letters until they make five incorrect guesses. If the letter they chose isn’t in the phrase, you’ll remove one of the player’s 5 guesses. 29 | 30 | If the player completes the phrase before they run out of guesses, a winning screen will display. If the player guesses incorrectly 5 times, a losing screen will display. 31 | 32 | A player can guess a letter only once. After they’ve guessed a letter, your programming will need to disable that letter. 33 | 34 | **NOTE:** _The Front End Web Development Techdegree is meant to train you in HTML, CSS and JavaScript, and let you practice and show your mastery of these fundamental building blocks of the web. Because of that, please avoid using frameworks like Bootstrap, Foundation, Skeleton, and so on for this project. Even though you may end up using frameworks like these professionally, you still need to know and be able to implement designs with your own knowledge of HTML, CSS and JavaScript._ 35 | 36 | _In addition, please avoid submitting any projects that rely on a server-side technology like PHP or Ruby on Rails._ 37 | -------------------------------------------------------------------------------- /js/logic.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', () => { 2 | 3 | // Global variables 4 | const startGame = document.querySelector('.startBtn') 5 | const overlay = document.getElementById('overlay') 6 | const phrase = document.getElementById('phrase') 7 | const qwerty = document.getElementById('qwerty') 8 | const buttons = document.querySelectorAll('#qwerty button') 9 | 10 | // Create phrases array 11 | const phrases = ['as you wish', 'whats knitten kitten', 'danger will robinson', 12 | 'single serving friends', 'si vis pacem para bellum'] 13 | 14 | // Tracking variables 15 | const displayScore = document.querySelectorAll('#banner #score') 16 | const tries = document.querySelectorAll('#scoreboard li img') 17 | let letterFound = false 18 | let letters 19 | let losses = 0 20 | let wins = 0 21 | let missed = 0 22 | let win = null 23 | addPhraseToDisplay= () => { // Pass in the splitPhrase 24 | let random = Math.floor(Math.random() * phrases.length);// Dynamic random based on the number of phrases in the array 25 | let splitPhrase = phrases[random].split('');// Split and return phrase array 26 | let word = 0; 27 | 28 | for (let i = 0; i < splitPhrase.length; i++) {// Loop through letters in phrase 29 | li = phrase.children[word].appendChild(document.createElement('LI')); 30 | 31 | (splitPhrase[i] != ' ') ? (li.appendChild(document.createTextNode(splitPhrase[i])), li.classList.add('letter'))// Style the li 32 | :(splitPhrase[i] == ' ')? (li.classList.add('space'), phrase.appendChild(document.createElement('UL')), word++) 33 | :null;// Count words 34 | } 35 | letters = document.querySelectorAll('.letter');// Update global variable for new letters 36 | rollOut(letters.length, 'animate-in');// Call for animation 37 | } 38 | 39 | checkLetter = (playerLetter) => {// Check player letter against phrase letter 40 | letterFound = false; 41 | for (let i = 0; i < letters.length; i++) {// Loop through phrase li.letters 42 | if(letters[i].innerHTML === playerLetter) { letterFound = true; letters[i].classList.add('show'); }// Is letter in phrase 43 | } 44 | if (letterFound == false) { tries[missed].src = "images/lostHeart.png"; missed++; console.log(i)}// Test if player letter is in phrase 45 | return letterFound;// return boolean for use in button call 46 | } 47 | 48 | checkWinState = () => {// Check for win or loss 49 | let found = document.querySelectorAll('.show');// Select shown letters 50 | win = (found.length === letters.length) ? "won" : (missed === 5) ? "lost" : win = null;// if niether do nothing 51 | (win == 'won') ? (setMessage(win), wins++, displayScore[0].innerHTML = `${win}: `+wins, rollOut(letters.length, 'animate-out'))// update message for win/loss screen 52 | : (win == 'lost') ? (setMessage(win), losses++, displayScore[1].innerHTML = `${win}: `+losses, rollOut(letters.length, 'animate-out')) 53 | : win = null; 54 | } 55 | 56 | setMessage = (wonLost) => { // Pass in wonLost value 57 | let message = document.querySelector('#overlay h2'); // Select headline element 58 | setTimeout(function() { 59 | message.innerHTML = `You ${wonLost}, give it another go?`;// Change headline 60 | overlay.className = `${wonLost} slide-in-left`;// Add lose class 61 | // Send win state to reset 62 | }, 2000); 63 | } 64 | 65 | rollOut = (i,direction) => {// Handle animations with delay (hoping to replace this with a sass function instead) 66 | setTimeout(() => {// set .10s timeout between each execution of a loop 67 | (i < 0) ? null // if thruthy do nothing 68 | :(i--, document.querySelectorAll(`.animate-in`) && direction === 'animate-out') ?// if falsey decrement and run conditional 69 | letters[i].className = letters[i].className.replace(/(?:^|\s)animate-in(?!\S)/g , ' animate-out')// if truthy swap classes 70 | : letters[i].classList.add(direction);// if falsey simply add the class 71 | if(i > 0) rollOut(i,direction);// If `i` is greater than `0` call rollOut() again passing in current values 72 | }, 100); 73 | } 74 | 75 | clearBoard = () =>{// Clear phrase and reset board 76 | let li = document.querySelectorAll('#phrase li');// Select phrase display letters 77 | let ul = document.querySelectorAll('#phrase ul'); 78 | missed = 0;// Reset misssed variable 79 | loopCap = (li.length >= buttons.length) ? (loopCap = li.length) : (loopCap = buttons.length);// Set max loop 80 | 81 | for (let i = 0; i < loopCap; i++) {// Reset board 82 | (i >= 0 && tries[i]) ? tries[i].src = "images/liveHeart.png" : null; 83 | (i >= 0 && buttons[i]) ? (buttons[i].className ="", buttons[i].disabled = false) : null; 84 | (i >= 0 && li[i]) ? li[i].remove() : null; 85 | (i > 0 && ul[i]) ? ul[i].remove() : null; 86 | } 87 | overlay.className = "start slide-out-right"; 88 | } 89 | 90 | qwerty.addEventListener('click', (e) => {// Use event delegation listen for button, then compare with phrase letters 91 | 92 | if (e.target.type === "submit" && win === null ) { 93 | let clickedBtn = e.target; 94 | clickedBtn.disabled = true;// Disable the button 95 | clickedBtn.className = checkLetter(clickedBtn.innerHTML) ? "correct" : "wrong"; 96 | checkWinState();// Call checkWinState function 97 | } 98 | }); 99 | 100 | startGame.addEventListener('click', () => {// Start game with addEventListener() on start game button 101 | clearBoard(); 102 | addPhraseToDisplay();// Call AddPhraseToDisplay() function pass value of splitPhrase from getRandomPhrase() 103 | }); 104 | document.addEventListener('keyup', (e) => { 105 | const buttons = document.querySelectorAll('#qwerty button'); 106 | 107 | if(e.key === "Enter" && !document.querySelector('.letter')){ 108 | clearBoard(); 109 | addPhraseToDisplay();// Call AddPhraseToDisplay() function pass value of splitPhrase from getRandomPhrase() 110 | } 111 | buttons.forEach(button => { 112 | if(e.key === button.innerHTML && win === null){ 113 | let clickedBtn = e.target; 114 | clickedBtn.disabled = true;// Disable the button 115 | clickedBtn.className = checkLetter(button.innerHTML) ? "correct" : "wrong"; 116 | checkWinState();// Call checkWinState function 117 | } 118 | }); 119 | }); 120 | }); 121 | -------------------------------------------------------------------------------- /css/styles.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": ["../scss/utils/_variables.scss","../scss/base/_normalize.scss","../scss/base/_base.scss","../scss/components/_typography.scss","../scss/components/_animations.scss","../scss/components/_overlay.scss","../scss/components/_keyboard.scss","../scss/components/_letters.scss","../scss/components/_scoreboard.scss","../scss/components/_mediaqueries.scss"], 5 | "names": [], 6 | "file": "styles.css" 7 | } -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in 9 | * IE on Windows Phone and in iOS. 10 | */ 11 | 12 | html { 13 | line-height: 1.15; /* 1 */ 14 | -ms-text-size-adjust: 100%; /* 2 */ 15 | -webkit-text-size-adjust: 100%; /* 2 */ 16 | } 17 | 18 | /* Sections 19 | ========================================================================== */ 20 | 21 | /** 22 | * Remove the margin in all browsers (opinionated). 23 | */ 24 | 25 | body { 26 | margin: 0; 27 | } 28 | 29 | /** 30 | * Add the correct display in IE 9-. 31 | */ 32 | 33 | article, 34 | aside, 35 | footer, 36 | header, 37 | nav, 38 | section { 39 | display: block; 40 | } 41 | 42 | /** 43 | * Correct the font size and margin on `h1` elements within `section` and 44 | * `article` contexts in Chrome, Firefox, and Safari. 45 | */ 46 | 47 | h1 { 48 | font-size: 2em; 49 | margin: 0.67em 0; 50 | } 51 | 52 | /* Grouping content 53 | ========================================================================== */ 54 | 55 | /** 56 | * Add the correct display in IE 9-. 57 | * 1. Add the correct display in IE. 58 | */ 59 | 60 | figcaption, 61 | figure, 62 | main { /* 1 */ 63 | display: block; 64 | } 65 | 66 | /** 67 | * Add the correct margin in IE 8. 68 | */ 69 | 70 | figure { 71 | margin: 1em 40px; 72 | } 73 | 74 | /** 75 | * 1. Add the correct box sizing in Firefox. 76 | * 2. Show the overflow in Edge and IE. 77 | */ 78 | 79 | hr { 80 | box-sizing: content-box; /* 1 */ 81 | height: 0; /* 1 */ 82 | overflow: visible; /* 2 */ 83 | } 84 | 85 | /** 86 | * 1. Correct the inheritance and scaling of font size in all browsers. 87 | * 2. Correct the odd `em` font sizing in all browsers. 88 | */ 89 | 90 | pre { 91 | font-family: monospace, monospace; /* 1 */ 92 | font-size: 1em; /* 2 */ 93 | } 94 | 95 | /* Text-level semantics 96 | ========================================================================== */ 97 | 98 | /** 99 | * 1. Remove the gray background on active links in IE 10. 100 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 101 | */ 102 | 103 | a { 104 | background-color: transparent; /* 1 */ 105 | -webkit-text-decoration-skip: objects; /* 2 */ 106 | } 107 | 108 | /** 109 | * 1. Remove the bottom border in Chrome 57- and Firefox 39-. 110 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 111 | */ 112 | 113 | abbr[title] { 114 | border-bottom: none; /* 1 */ 115 | text-decoration: underline; /* 2 */ 116 | text-decoration: underline dotted; /* 2 */ 117 | } 118 | 119 | /** 120 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 121 | */ 122 | 123 | b, 124 | strong { 125 | font-weight: inherit; 126 | } 127 | 128 | /** 129 | * Add the correct font weight in Chrome, Edge, and Safari. 130 | */ 131 | 132 | b, 133 | strong { 134 | font-weight: bolder; 135 | } 136 | 137 | /** 138 | * 1. Correct the inheritance and scaling of font size in all browsers. 139 | * 2. Correct the odd `em` font sizing in all browsers. 140 | */ 141 | 142 | code, 143 | kbd, 144 | samp { 145 | font-family: monospace, monospace; /* 1 */ 146 | font-size: 1em; /* 2 */ 147 | } 148 | 149 | /** 150 | * Add the correct font style in Android 4.3-. 151 | */ 152 | 153 | dfn { 154 | font-style: italic; 155 | } 156 | 157 | /** 158 | * Add the correct background and color in IE 9-. 159 | */ 160 | 161 | mark { 162 | background-color: #ff0; 163 | color: #000; 164 | } 165 | 166 | /** 167 | * Add the correct font size in all browsers. 168 | */ 169 | 170 | small { 171 | font-size: 80%; 172 | } 173 | 174 | /** 175 | * Prevent `sub` and `sup` elements from affecting the line height in 176 | * all browsers. 177 | */ 178 | 179 | sub, 180 | sup { 181 | font-size: 75%; 182 | line-height: 0; 183 | position: relative; 184 | vertical-align: baseline; 185 | } 186 | 187 | sub { 188 | bottom: -0.25em; 189 | } 190 | 191 | sup { 192 | top: -0.5em; 193 | } 194 | 195 | /* Embedded content 196 | ========================================================================== */ 197 | 198 | /** 199 | * Add the correct display in IE 9-. 200 | */ 201 | 202 | audio, 203 | video { 204 | display: inline-block; 205 | } 206 | 207 | /** 208 | * Add the correct display in iOS 4-7. 209 | */ 210 | 211 | audio:not([controls]) { 212 | display: none; 213 | height: 0; 214 | } 215 | 216 | /** 217 | * Remove the border on images inside links in IE 10-. 218 | */ 219 | 220 | img { 221 | border-style: none; 222 | } 223 | 224 | /** 225 | * Hide the overflow in IE. 226 | */ 227 | 228 | svg:not(:root) { 229 | overflow: hidden; 230 | } 231 | 232 | /* Forms 233 | ========================================================================== */ 234 | 235 | /** 236 | * 1. Change the font styles in all browsers (opinionated). 237 | * 2. Remove the margin in Firefox and Safari. 238 | */ 239 | 240 | button, 241 | input, 242 | optgroup, 243 | select, 244 | textarea { 245 | font-family: sans-serif; /* 1 */ 246 | font-size: 100%; /* 1 */ 247 | line-height: 1.15; /* 1 */ 248 | margin: 0; /* 2 */ 249 | } 250 | 251 | /** 252 | * Show the overflow in IE. 253 | * 1. Show the overflow in Edge. 254 | */ 255 | 256 | button, 257 | input { /* 1 */ 258 | overflow: visible; 259 | } 260 | 261 | /** 262 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 263 | * 1. Remove the inheritance of text transform in Firefox. 264 | */ 265 | 266 | button, 267 | select { /* 1 */ 268 | text-transform: none; 269 | } 270 | 271 | /** 272 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 273 | * controls in Android 4. 274 | * 2. Correct the inability to style clickable types in iOS and Safari. 275 | */ 276 | 277 | button, 278 | html [type="button"], /* 1 */ 279 | [type="reset"], 280 | [type="submit"] { 281 | -webkit-appearance: button; /* 2 */ 282 | } 283 | 284 | /** 285 | * Remove the inner border and padding in Firefox. 286 | */ 287 | 288 | button::-moz-focus-inner, 289 | [type="button"]::-moz-focus-inner, 290 | [type="reset"]::-moz-focus-inner, 291 | [type="submit"]::-moz-focus-inner { 292 | border-style: none; 293 | padding: 0; 294 | } 295 | 296 | /** 297 | * Restore the focus styles unset by the previous rule. 298 | */ 299 | 300 | button:-moz-focusring, 301 | [type="button"]:-moz-focusring, 302 | [type="reset"]:-moz-focusring, 303 | [type="submit"]:-moz-focusring { 304 | outline: 1px dotted ButtonText; 305 | } 306 | 307 | /** 308 | * Correct the padding in Firefox. 309 | */ 310 | 311 | fieldset { 312 | padding: 0.35em 0.75em 0.625em; 313 | } 314 | 315 | /** 316 | * 1. Correct the text wrapping in Edge and IE. 317 | * 2. Correct the color inheritance from `fieldset` elements in IE. 318 | * 3. Remove the padding so developers are not caught out when they zero out 319 | * `fieldset` elements in all browsers. 320 | */ 321 | 322 | legend { 323 | box-sizing: border-box; /* 1 */ 324 | color: inherit; /* 2 */ 325 | display: table; /* 1 */ 326 | max-width: 100%; /* 1 */ 327 | padding: 0; /* 3 */ 328 | white-space: normal; /* 1 */ 329 | } 330 | 331 | /** 332 | * 1. Add the correct display in IE 9-. 333 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. 334 | */ 335 | 336 | progress { 337 | display: inline-block; /* 1 */ 338 | vertical-align: baseline; /* 2 */ 339 | } 340 | 341 | /** 342 | * Remove the default vertical scrollbar in IE. 343 | */ 344 | 345 | textarea { 346 | overflow: auto; 347 | } 348 | 349 | /** 350 | * 1. Add the correct box sizing in IE 10-. 351 | * 2. Remove the padding in IE 10-. 352 | */ 353 | 354 | [type="checkbox"], 355 | [type="radio"] { 356 | box-sizing: border-box; /* 1 */ 357 | padding: 0; /* 2 */ 358 | } 359 | 360 | /** 361 | * Correct the cursor style of increment and decrement buttons in Chrome. 362 | */ 363 | 364 | [type="number"]::-webkit-inner-spin-button, 365 | [type="number"]::-webkit-outer-spin-button { 366 | height: auto; 367 | } 368 | 369 | /** 370 | * 1. Correct the odd appearance in Chrome and Safari. 371 | * 2. Correct the outline style in Safari. 372 | */ 373 | 374 | [type="search"] { 375 | -webkit-appearance: textfield; /* 1 */ 376 | outline-offset: -2px; /* 2 */ 377 | } 378 | 379 | /** 380 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. 381 | */ 382 | 383 | [type="search"]::-webkit-search-cancel-button, 384 | [type="search"]::-webkit-search-decoration { 385 | -webkit-appearance: none; 386 | } 387 | 388 | /** 389 | * 1. Correct the inability to style clickable types in iOS and Safari. 390 | * 2. Change font properties to `inherit` in Safari. 391 | */ 392 | 393 | ::-webkit-file-upload-button { 394 | -webkit-appearance: button; /* 1 */ 395 | font: inherit; /* 2 */ 396 | } 397 | 398 | /* Interactive 399 | ========================================================================== */ 400 | 401 | /* 402 | * Add the correct display in IE 9-. 403 | * 1. Add the correct display in Edge, IE, and Firefox. 404 | */ 405 | 406 | details, /* 1 */ 407 | menu { 408 | display: block; 409 | } 410 | 411 | /* 412 | * Add the correct display in all browsers. 413 | */ 414 | 415 | summary { 416 | display: list-item; 417 | } 418 | 419 | /* Scripting 420 | ========================================================================== */ 421 | 422 | /** 423 | * Add the correct display in IE 9-. 424 | */ 425 | 426 | canvas { 427 | display: inline-block; 428 | } 429 | 430 | /** 431 | * Add the correct display in IE. 432 | */ 433 | 434 | template { 435 | display: none; 436 | } 437 | 438 | /* Hidden 439 | ========================================================================== */ 440 | 441 | /** 442 | * Add the correct display in IE 10-. 443 | */ 444 | 445 | [hidden] { 446 | display: none; 447 | } 448 | -------------------------------------------------------------------------------- /scss/base/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in 9 | * IE on Windows Phone and in iOS. 10 | */ 11 | 12 | html { 13 | line-height: 1.15; /* 1 */ 14 | -ms-text-size-adjust: 100%; /* 2 */ 15 | -webkit-text-size-adjust: 100%; /* 2 */ 16 | } 17 | 18 | /* Sections 19 | ========================================================================== */ 20 | 21 | /** 22 | * Remove the margin in all browsers (opinionated). 23 | */ 24 | 25 | body { 26 | margin: 0; 27 | } 28 | 29 | /** 30 | * Add the correct display in IE 9-. 31 | */ 32 | 33 | article, 34 | aside, 35 | footer, 36 | header, 37 | nav, 38 | section { 39 | display: block; 40 | } 41 | 42 | /** 43 | * Correct the font size and margin on `h1` elements within `section` and 44 | * `article` contexts in Chrome, Firefox, and Safari. 45 | */ 46 | 47 | h1 { 48 | font-size: 2em; 49 | margin: 0.67em 0; 50 | } 51 | 52 | /* Grouping content 53 | ========================================================================== */ 54 | 55 | /** 56 | * Add the correct display in IE 9-. 57 | * 1. Add the correct display in IE. 58 | */ 59 | 60 | figcaption, 61 | figure, 62 | main { /* 1 */ 63 | display: block; 64 | } 65 | 66 | /** 67 | * Add the correct margin in IE 8. 68 | */ 69 | 70 | figure { 71 | margin: 1em 40px; 72 | } 73 | 74 | /** 75 | * 1. Add the correct box sizing in Firefox. 76 | * 2. Show the overflow in Edge and IE. 77 | */ 78 | 79 | hr { 80 | box-sizing: content-box; /* 1 */ 81 | height: 0; /* 1 */ 82 | overflow: visible; /* 2 */ 83 | } 84 | 85 | /** 86 | * 1. Correct the inheritance and scaling of font size in all browsers. 87 | * 2. Correct the odd `em` font sizing in all browsers. 88 | */ 89 | 90 | pre { 91 | font-family: monospace, monospace; /* 1 */ 92 | font-size: 1em; /* 2 */ 93 | } 94 | 95 | /* Text-level semantics 96 | ========================================================================== */ 97 | 98 | /** 99 | * 1. Remove the gray background on active links in IE 10. 100 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 101 | */ 102 | 103 | a { 104 | background-color: transparent; /* 1 */ 105 | -webkit-text-decoration-skip: objects; /* 2 */ 106 | } 107 | 108 | /** 109 | * 1. Remove the bottom border in Chrome 57- and Firefox 39-. 110 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 111 | */ 112 | 113 | abbr[title] { 114 | border-bottom: none; /* 1 */ 115 | text-decoration: underline; /* 2 */ 116 | text-decoration: underline dotted; /* 2 */ 117 | } 118 | 119 | /** 120 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 121 | */ 122 | 123 | b, 124 | strong { 125 | font-weight: inherit; 126 | } 127 | 128 | /** 129 | * Add the correct font weight in Chrome, Edge, and Safari. 130 | */ 131 | 132 | b, 133 | strong { 134 | font-weight: bolder; 135 | } 136 | 137 | /** 138 | * 1. Correct the inheritance and scaling of font size in all browsers. 139 | * 2. Correct the odd `em` font sizing in all browsers. 140 | */ 141 | 142 | code, 143 | kbd, 144 | samp { 145 | font-family: monospace, monospace; /* 1 */ 146 | font-size: 1em; /* 2 */ 147 | } 148 | 149 | /** 150 | * Add the correct font style in Android 4.3-. 151 | */ 152 | 153 | dfn { 154 | font-style: italic; 155 | } 156 | 157 | /** 158 | * Add the correct background and color in IE 9-. 159 | */ 160 | 161 | mark { 162 | background-color: #ff0; 163 | color: #000; 164 | } 165 | 166 | /** 167 | * Add the correct font size in all browsers. 168 | */ 169 | 170 | small { 171 | font-size: 80%; 172 | } 173 | 174 | /** 175 | * Prevent `sub` and `sup` elements from affecting the line height in 176 | * all browsers. 177 | */ 178 | 179 | sub, 180 | sup { 181 | font-size: 75%; 182 | line-height: 0; 183 | position: relative; 184 | vertical-align: baseline; 185 | } 186 | 187 | sub { 188 | bottom: -0.25em; 189 | } 190 | 191 | sup { 192 | top: -0.5em; 193 | } 194 | 195 | /* Embedded content 196 | ========================================================================== */ 197 | 198 | /** 199 | * Add the correct display in IE 9-. 200 | */ 201 | 202 | audio, 203 | video { 204 | display: inline-block; 205 | } 206 | 207 | /** 208 | * Add the correct display in iOS 4-7. 209 | */ 210 | 211 | audio:not([controls]) { 212 | display: none; 213 | height: 0; 214 | } 215 | 216 | /** 217 | * Remove the border on images inside links in IE 10-. 218 | */ 219 | 220 | img { 221 | border-style: none; 222 | } 223 | 224 | /** 225 | * Hide the overflow in IE. 226 | */ 227 | 228 | svg:not(:root) { 229 | overflow: hidden; 230 | } 231 | 232 | /* Forms 233 | ========================================================================== */ 234 | 235 | /** 236 | * 1. Change the font styles in all browsers (opinionated). 237 | * 2. Remove the margin in Firefox and Safari. 238 | */ 239 | 240 | button, 241 | input, 242 | optgroup, 243 | select, 244 | textarea { 245 | font-family: sans-serif; /* 1 */ 246 | font-size: 100%; /* 1 */ 247 | line-height: 1.15; /* 1 */ 248 | margin: 0; /* 2 */ 249 | } 250 | 251 | /** 252 | * Show the overflow in IE. 253 | * 1. Show the overflow in Edge. 254 | */ 255 | 256 | button, 257 | input { /* 1 */ 258 | overflow: visible; 259 | } 260 | 261 | /** 262 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 263 | * 1. Remove the inheritance of text transform in Firefox. 264 | */ 265 | 266 | button, 267 | select { /* 1 */ 268 | text-transform: none; 269 | } 270 | 271 | /** 272 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 273 | * controls in Android 4. 274 | * 2. Correct the inability to style clickable types in iOS and Safari. 275 | */ 276 | 277 | button, 278 | html [type="button"], /* 1 */ 279 | [type="reset"], 280 | [type="submit"] { 281 | -webkit-appearance: button; /* 2 */ 282 | } 283 | 284 | /** 285 | * Remove the inner border and padding in Firefox. 286 | */ 287 | 288 | button::-moz-focus-inner, 289 | [type="button"]::-moz-focus-inner, 290 | [type="reset"]::-moz-focus-inner, 291 | [type="submit"]::-moz-focus-inner { 292 | border-style: none; 293 | padding: 0; 294 | } 295 | 296 | /** 297 | * Restore the focus styles unset by the previous rule. 298 | */ 299 | 300 | button:-moz-focusring, 301 | [type="button"]:-moz-focusring, 302 | [type="reset"]:-moz-focusring, 303 | [type="submit"]:-moz-focusring { 304 | outline: 1px dotted ButtonText; 305 | } 306 | 307 | /** 308 | * Correct the padding in Firefox. 309 | */ 310 | 311 | fieldset { 312 | padding: 0.35em 0.75em 0.625em; 313 | } 314 | 315 | /** 316 | * 1. Correct the text wrapping in Edge and IE. 317 | * 2. Correct the color inheritance from `fieldset` elements in IE. 318 | * 3. Remove the padding so developers are not caught out when they zero out 319 | * `fieldset` elements in all browsers. 320 | */ 321 | 322 | legend { 323 | box-sizing: border-box; /* 1 */ 324 | color: inherit; /* 2 */ 325 | display: table; /* 1 */ 326 | max-width: 100%; /* 1 */ 327 | padding: 0; /* 3 */ 328 | white-space: normal; /* 1 */ 329 | } 330 | 331 | /** 332 | * 1. Add the correct display in IE 9-. 333 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. 334 | */ 335 | 336 | progress { 337 | display: inline-block; /* 1 */ 338 | vertical-align: baseline; /* 2 */ 339 | } 340 | 341 | /** 342 | * Remove the default vertical scrollbar in IE. 343 | */ 344 | 345 | textarea { 346 | overflow: auto; 347 | } 348 | 349 | /** 350 | * 1. Add the correct box sizing in IE 10-. 351 | * 2. Remove the padding in IE 10-. 352 | */ 353 | 354 | [type="checkbox"], 355 | [type="radio"] { 356 | box-sizing: border-box; /* 1 */ 357 | padding: 0; /* 2 */ 358 | } 359 | 360 | /** 361 | * Correct the cursor style of increment and decrement buttons in Chrome. 362 | */ 363 | 364 | [type="number"]::-webkit-inner-spin-button, 365 | [type="number"]::-webkit-outer-spin-button { 366 | height: auto; 367 | } 368 | 369 | /** 370 | * 1. Correct the odd appearance in Chrome and Safari. 371 | * 2. Correct the outline style in Safari. 372 | */ 373 | 374 | [type="search"] { 375 | -webkit-appearance: textfield; /* 1 */ 376 | outline-offset: -2px; /* 2 */ 377 | } 378 | 379 | /** 380 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. 381 | */ 382 | 383 | [type="search"]::-webkit-search-cancel-button, 384 | [type="search"]::-webkit-search-decoration { 385 | -webkit-appearance: none; 386 | } 387 | 388 | /** 389 | * 1. Correct the inability to style clickable types in iOS and Safari. 390 | * 2. Change font properties to `inherit` in Safari. 391 | */ 392 | 393 | ::-webkit-file-upload-button { 394 | -webkit-appearance: button; /* 1 */ 395 | font: inherit; /* 2 */ 396 | } 397 | 398 | /* Interactive 399 | ========================================================================== */ 400 | 401 | /* 402 | * Add the correct display in IE 9-. 403 | * 1. Add the correct display in Edge, IE, and Firefox. 404 | */ 405 | 406 | details, /* 1 */ 407 | menu { 408 | display: block; 409 | } 410 | 411 | /* 412 | * Add the correct display in all browsers. 413 | */ 414 | 415 | summary { 416 | display: list-item; 417 | } 418 | 419 | /* Scripting 420 | ========================================================================== */ 421 | 422 | /** 423 | * Add the correct display in IE 9-. 424 | */ 425 | 426 | canvas { 427 | display: inline-block; 428 | } 429 | 430 | /** 431 | * Add the correct display in IE. 432 | */ 433 | 434 | template { 435 | display: none; 436 | } 437 | 438 | /* Hidden 439 | ========================================================================== */ 440 | 441 | /** 442 | * Add the correct display in IE 10-. 443 | */ 444 | 445 | [hidden] { 446 | display: none; 447 | } -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700&Roboto:300"); 2 | /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ 3 | /* Document 4 | ========================================================================== */ 5 | /** 6 | * 1. Correct the line height in all browsers. 7 | * 2. Prevent adjustments of font size after orientation changes in 8 | * IE on Windows Phone and in iOS. 9 | */ 10 | html { 11 | line-height: 1.15; 12 | /* 1 */ 13 | -ms-text-size-adjust: 100%; 14 | /* 2 */ 15 | -webkit-text-size-adjust: 100%; 16 | /* 2 */ } 17 | 18 | /* Sections 19 | ========================================================================== */ 20 | /** 21 | * Remove the margin in all browsers (opinionated). 22 | */ 23 | body { 24 | margin: 0; } 25 | 26 | /** 27 | * Add the correct display in IE 9-. 28 | */ 29 | article, 30 | aside, 31 | footer, 32 | header, 33 | nav, 34 | section { 35 | display: block; } 36 | 37 | /** 38 | * Correct the font size and margin on `h1` elements within `section` and 39 | * `article` contexts in Chrome, Firefox, and Safari. 40 | */ 41 | h1 { 42 | font-size: 2em; 43 | margin: 0.67em 0; } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | /** 48 | * Add the correct display in IE 9-. 49 | * 1. Add the correct display in IE. 50 | */ 51 | figcaption, 52 | figure, 53 | main { 54 | /* 1 */ 55 | display: block; } 56 | 57 | /** 58 | * Add the correct margin in IE 8. 59 | */ 60 | figure { 61 | margin: 1em 40px; } 62 | 63 | /** 64 | * 1. Add the correct box sizing in Firefox. 65 | * 2. Show the overflow in Edge and IE. 66 | */ 67 | hr { 68 | box-sizing: content-box; 69 | /* 1 */ 70 | height: 0; 71 | /* 1 */ 72 | overflow: visible; 73 | /* 2 */ } 74 | 75 | /** 76 | * 1. Correct the inheritance and scaling of font size in all browsers. 77 | * 2. Correct the odd `em` font sizing in all browsers. 78 | */ 79 | pre { 80 | font-family: monospace, monospace; 81 | /* 1 */ 82 | font-size: 1em; 83 | /* 2 */ } 84 | 85 | /* Text-level semantics 86 | ========================================================================== */ 87 | /** 88 | * 1. Remove the gray background on active links in IE 10. 89 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 90 | */ 91 | a { 92 | background-color: transparent; 93 | /* 1 */ 94 | -webkit-text-decoration-skip: objects; 95 | /* 2 */ } 96 | 97 | /** 98 | * 1. Remove the bottom border in Chrome 57- and Firefox 39-. 99 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 100 | */ 101 | abbr[title] { 102 | border-bottom: none; 103 | /* 1 */ 104 | text-decoration: underline; 105 | /* 2 */ 106 | text-decoration: underline dotted; 107 | /* 2 */ } 108 | 109 | /** 110 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 111 | */ 112 | b, 113 | strong { 114 | font-weight: inherit; } 115 | 116 | /** 117 | * Add the correct font weight in Chrome, Edge, and Safari. 118 | */ 119 | b, 120 | strong { 121 | font-weight: bolder; } 122 | 123 | /** 124 | * 1. Correct the inheritance and scaling of font size in all browsers. 125 | * 2. Correct the odd `em` font sizing in all browsers. 126 | */ 127 | code, 128 | kbd, 129 | samp { 130 | font-family: monospace, monospace; 131 | /* 1 */ 132 | font-size: 1em; 133 | /* 2 */ } 134 | 135 | /** 136 | * Add the correct font style in Android 4.3-. 137 | */ 138 | dfn { 139 | font-style: italic; } 140 | 141 | /** 142 | * Add the correct background and color in IE 9-. 143 | */ 144 | mark { 145 | background-color: #ff0; 146 | color: #000; } 147 | 148 | /** 149 | * Add the correct font size in all browsers. 150 | */ 151 | small { 152 | font-size: 80%; } 153 | 154 | /** 155 | * Prevent `sub` and `sup` elements from affecting the line height in 156 | * all browsers. 157 | */ 158 | sub, 159 | sup { 160 | font-size: 75%; 161 | line-height: 0; 162 | position: relative; 163 | vertical-align: baseline; } 164 | 165 | sub { 166 | bottom: -0.25em; } 167 | 168 | sup { 169 | top: -0.5em; } 170 | 171 | /* Embedded content 172 | ========================================================================== */ 173 | /** 174 | * Add the correct display in IE 9-. 175 | */ 176 | audio, 177 | video { 178 | display: inline-block; } 179 | 180 | /** 181 | * Add the correct display in iOS 4-7. 182 | */ 183 | audio:not([controls]) { 184 | display: none; 185 | height: 0; } 186 | 187 | /** 188 | * Remove the border on images inside links in IE 10-. 189 | */ 190 | img { 191 | border-style: none; } 192 | 193 | /** 194 | * Hide the overflow in IE. 195 | */ 196 | svg:not(:root) { 197 | overflow: hidden; } 198 | 199 | /* Forms 200 | ========================================================================== */ 201 | /** 202 | * 1. Change the font styles in all browsers (opinionated). 203 | * 2. Remove the margin in Firefox and Safari. 204 | */ 205 | button, 206 | input, 207 | optgroup, 208 | select, 209 | textarea { 210 | font-family: sans-serif; 211 | /* 1 */ 212 | font-size: 100%; 213 | /* 1 */ 214 | line-height: 1.15; 215 | /* 1 */ 216 | margin: 0; 217 | /* 2 */ } 218 | 219 | /** 220 | * Show the overflow in IE. 221 | * 1. Show the overflow in Edge. 222 | */ 223 | button, 224 | input { 225 | /* 1 */ 226 | overflow: visible; } 227 | 228 | /** 229 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 230 | * 1. Remove the inheritance of text transform in Firefox. 231 | */ 232 | button, 233 | select { 234 | /* 1 */ 235 | text-transform: none; } 236 | 237 | /** 238 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 239 | * controls in Android 4. 240 | * 2. Correct the inability to style clickable types in iOS and Safari. 241 | */ 242 | button, 243 | html [type="button"], 244 | [type="reset"], 245 | [type="submit"] { 246 | -webkit-appearance: button; 247 | /* 2 */ } 248 | 249 | /** 250 | * Remove the inner border and padding in Firefox. 251 | */ 252 | button::-moz-focus-inner, 253 | [type="button"]::-moz-focus-inner, 254 | [type="reset"]::-moz-focus-inner, 255 | [type="submit"]::-moz-focus-inner { 256 | border-style: none; 257 | padding: 0; } 258 | 259 | /** 260 | * Restore the focus styles unset by the previous rule. 261 | */ 262 | button:-moz-focusring, 263 | [type="button"]:-moz-focusring, 264 | [type="reset"]:-moz-focusring, 265 | [type="submit"]:-moz-focusring { 266 | outline: 1px dotted ButtonText; } 267 | 268 | /** 269 | * Correct the padding in Firefox. 270 | */ 271 | fieldset { 272 | padding: 0.35em 0.75em 0.625em; } 273 | 274 | /** 275 | * 1. Correct the text wrapping in Edge and IE. 276 | * 2. Correct the color inheritance from `fieldset` elements in IE. 277 | * 3. Remove the padding so developers are not caught out when they zero out 278 | * `fieldset` elements in all browsers. 279 | */ 280 | legend { 281 | box-sizing: border-box; 282 | /* 1 */ 283 | color: inherit; 284 | /* 2 */ 285 | display: table; 286 | /* 1 */ 287 | max-width: 100%; 288 | /* 1 */ 289 | padding: 0; 290 | /* 3 */ 291 | white-space: normal; 292 | /* 1 */ } 293 | 294 | /** 295 | * 1. Add the correct display in IE 9-. 296 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. 297 | */ 298 | progress { 299 | display: inline-block; 300 | /* 1 */ 301 | vertical-align: baseline; 302 | /* 2 */ } 303 | 304 | /** 305 | * Remove the default vertical scrollbar in IE. 306 | */ 307 | textarea { 308 | overflow: auto; } 309 | 310 | /** 311 | * 1. Add the correct box sizing in IE 10-. 312 | * 2. Remove the padding in IE 10-. 313 | */ 314 | [type="checkbox"], 315 | [type="radio"] { 316 | box-sizing: border-box; 317 | /* 1 */ 318 | padding: 0; 319 | /* 2 */ } 320 | 321 | /** 322 | * Correct the cursor style of increment and decrement buttons in Chrome. 323 | */ 324 | [type="number"]::-webkit-inner-spin-button, 325 | [type="number"]::-webkit-outer-spin-button { 326 | height: auto; } 327 | 328 | /** 329 | * 1. Correct the odd appearance in Chrome and Safari. 330 | * 2. Correct the outline style in Safari. 331 | */ 332 | [type="search"] { 333 | -webkit-appearance: textfield; 334 | /* 1 */ 335 | outline-offset: -2px; 336 | /* 2 */ } 337 | 338 | /** 339 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. 340 | */ 341 | [type="search"]::-webkit-search-cancel-button, 342 | [type="search"]::-webkit-search-decoration { 343 | -webkit-appearance: none; } 344 | 345 | /** 346 | * 1. Correct the inability to style clickable types in iOS and Safari. 347 | * 2. Change font properties to `inherit` in Safari. 348 | */ 349 | ::-webkit-file-upload-button { 350 | -webkit-appearance: button; 351 | /* 1 */ 352 | font: inherit; 353 | /* 2 */ } 354 | 355 | /* Interactive 356 | ========================================================================== */ 357 | /* 358 | * Add the correct display in IE 9-. 359 | * 1. Add the correct display in Edge, IE, and Firefox. 360 | */ 361 | details, 362 | menu { 363 | display: block; } 364 | 365 | /* 366 | * Add the correct display in all browsers. 367 | */ 368 | summary { 369 | display: list-item; } 370 | 371 | /* Scripting 372 | ========================================================================== */ 373 | /** 374 | * Add the correct display in IE 9-. 375 | */ 376 | canvas { 377 | display: inline-block; } 378 | 379 | /** 380 | * Add the correct display in IE. 381 | */ 382 | template { 383 | display: none; } 384 | 385 | /* Hidden 386 | ========================================================================== */ 387 | /** 388 | * Add the correct display in IE 10-. 389 | */ 390 | [hidden] { 391 | display: none; } 392 | 393 | /* main */ 394 | * { 395 | box-sizing: border-box; 396 | user-select: none; 397 | transition: all 1s ease-in-out; } 398 | 399 | body { 400 | background: linear-gradient(to bottom, #f4f5f6 0%, #8b8b8b 50%, #000000 100%); 401 | justify-content: space-between; 402 | flex-direction: column; 403 | display: flex; 404 | height: 100vh; 405 | margin: 0px !important; 406 | overflow: hidden; } 407 | 408 | li, ol, ul { 409 | padding: 0; 410 | display: inline-block; } 411 | 412 | h2 { 413 | margin: 0; 414 | text-transform: uppercase; 415 | font-family: 'Open Sans', sans-serif; 416 | font-size: 60px; } 417 | 418 | h3 { 419 | margin: 10px; 420 | text-transform: uppercase; 421 | font-family: 'Open Sans', sans-serif; 422 | font-size: 25px; 423 | display: inline; } 424 | 425 | .main-container { 426 | display: flex; 427 | flex-direction: column; 428 | justify-content: space-around; 429 | height: 100%; 430 | max-height: 900px; 431 | text-align: center; } 432 | 433 | .section { 434 | width: 100%; 435 | padding: 10px; } 436 | 437 | /* Title */ 438 | .header { 439 | color: #000; } 440 | 441 | .animate-out { 442 | animation: roll-out-right 1s ease-in-out 1s 1 both; } 443 | 444 | .animate-in { 445 | animation: roll-in-left 1s ease-in-out 1s 1 both; } 446 | 447 | .slide-in-left { 448 | animation: slide-in-left 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; } 449 | 450 | .slide-out-right { 451 | animation: slide-out-right 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; } 452 | 453 | @keyframes roll-in-left { 454 | 0% { 455 | transform: translateX(-100vw) rotate(-540deg); 456 | opacity: 0; } 457 | 100% { 458 | transform: translateX(0) rotate(0deg); 459 | opacity: 1; } } 460 | @keyframes roll-out-right { 461 | 0% { 462 | transform: translateX(0px) rotate(0deg); 463 | opacity: 1; } 464 | 100% { 465 | transform: translateX(100vw) rotate(540deg); 466 | opacity: 0; } } 467 | @keyframes slide-in-left { 468 | 0% { 469 | transform: translateX(-100vw); 470 | opacity: 0; } 471 | 100% { 472 | transform: translateX(0); 473 | opacity: 1; } } 474 | @keyframes slide-out-right { 475 | 0% { 476 | transform: translateX(0); 477 | opacity: 1; } 478 | 100% { 479 | transform: translateX(100vw); 480 | opacity: 0; } } 481 | /* Overlay */ 482 | #overlay { 483 | display: flex; 484 | flex-direction: column; 485 | position: fixed; 486 | color: #FFFFFF; 487 | justify-content: center; 488 | top: 0; 489 | bottom: 0; 490 | left: 0; 491 | right: 0; 492 | border-radius: 5px; 493 | z-index: 10000; } 494 | 495 | .title { 496 | color: #000; } 497 | 498 | .start { 499 | background: linear-gradient(to bottom, #f4f5f6 0%, #8b8b8b 50%, #000000 100%); } 500 | 501 | .start a { 502 | color: #292a2b; } 503 | 504 | .won { 505 | background: linear-gradient(to bottom, #f4f5f6 0%, #c4f1ce 50%, #18722b 100%); } 506 | 507 | .won a { 508 | color: #292a2b; } 509 | 510 | .lost { 511 | background: linear-gradient(to bottom, #f4f5f6 0%, #e59393 50%, #4c0101 100%); } 512 | 513 | .lost a { 514 | color: #D94545; } 515 | 516 | /* Keyboard */ 517 | .keyrow { 518 | display: flex; 519 | justify-content: center; } 520 | 521 | button { 522 | border: 1px solid black; 523 | color: #37474F; 524 | font-size: 25px; 525 | background-color: #E5E5E5; 526 | border-radius: 5px; 527 | min-width: 30px; 528 | min-height: 30px; 529 | margin: 2px; 530 | box-shadow: 0px 5px 5px black; } 531 | button.wrong { 532 | box-shadow: inset 0px 2px 2px black; 533 | background-color: #D94545; 534 | transition: box-shadow ease-in-out 1s both; } 535 | button.correct { 536 | box-shadow: inset 0px 2px 2px black; 537 | background-color: #78CF82; 538 | transition: box-shadow ease-in-out 1s both; } 539 | 540 | .startBtn { 541 | padding: 8px; 542 | margin: 50px auto; 543 | background: #FFFFFF; 544 | border-radius: 5px; 545 | font-size: 25px; } 546 | 547 | /* Phrase */ 548 | .letter { 549 | font-size: 25px; 550 | height: 30px; 551 | width: 30px; 552 | /* padding: 10px 1px 0 1px; */ 553 | margin-right: 1px; 554 | margin-bottom: 10px; 555 | color: transparent; 556 | background: #D2D2D2; 557 | opacity: 0; 558 | border-radius: 5px; 559 | -webkit-transition: all 1s ease-in-out; 560 | -o-transition: all 1s ease-in-out; 561 | transition: all 1s ease-in-out; 562 | border: 1px solid black; 563 | box-shadow: 5px 5px 5px black; } 564 | 565 | .space { 566 | width: 15px; } 567 | 568 | .show { 569 | color: #000; 570 | background-color: #76CE82; 571 | transform: rotateY(360deg); } 572 | 573 | /* Scoreboard */ 574 | .tries img { 575 | width: 35px; } 576 | 577 | @media screen and (min-width: 768px) { 578 | button { 579 | min-width: 40px; 580 | min-height: 40px; 581 | margin: 3px; } 582 | 583 | .letter { 584 | height: 40px; 585 | width: 40px; 586 | margin-right: 2px; } 587 | 588 | .tries img { 589 | width: 50px; } } 590 | @media screen and (min-width: 1024px) { 591 | button { 592 | min-width: 50px; 593 | min-height: 50px; 594 | margin: 3px; } 595 | 596 | .letter { 597 | height: 50px; 598 | width: 50px; } 599 | 600 | .tries img { 601 | width: 70px; } } 602 | 603 | /*# sourceMappingURL=styles.css.map */ 604 | --------------------------------------------------------------------------------