Mng 12 style out starting page (initially)

index.html

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>CodersCamp2020 | Star Wars API QUIZ</title>
+    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
     <link rel="stylesheet" href="styles/App.css"/>
-
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
           rel="stylesheet">
 </head>

src/app/showStartingPage.js

@@ -1,31 +1,34 @@
 export const showStartingPage = () => {
     const appScreen = document.querySelector('#pokequiz-app');
     const startingPageTemplate = 
-    `<div id="headerWithLogo">
-        <img src="https://static.wikia.nocookie.net/logo-timeline/images/8/8c/Pok%C3%A9mon.svg/revision/latest/scale-to-width-down/300?cb=20181024042907" alt='Pokemon' id='pokemonLogo'/>
+    `<div id="headerWithLogo" class="firstColumn spanInPortrait">
+        <img src="./static/assets/ui/logo.png" alt='Pokemon' id='pokemonLogo'/>
         <p id='quizLogo' class='fancyFontStyle'>Quiz</p>
     </div>
 
-        <ul id="selectModeMenu">
-            <li id='whoIsThatPokemonOption'>Who's that pokemon?</li>
-            <li id='whatItLooksLikeOption'>What it looks like?</li>
-            <li id='guessTheTypeOption'>Guess the type!</li>
+        <ul id="selectModeMenu" class="firstColumn spanInPortrait">
+            <li id='whoIsThatPokemonOption' class="buttonWithText">Who's that pokemon?</li>
+            <li id='whatItLooksLikeOption' class="buttonWithText">What it looks like?</li>
+            <li id='guessTheTypeOption' class="buttonWithText">Guess the type!</li>
         </ul>
 
-    <div id='enterNameAndPlayMenu'>
+    <div id='enterNameAndPlayMenu' class="secondColumn spanInPortrait">
         <p id='enterYourName' class='fancyFontStyle'>ENTER YOUR NAME</p>
         <div id='enterYourNameArea'>
             <img src='https://cdn4.iconfinder.com/data/icons/small-n-flat/24/user-alt-512.png' alt='playerIcon' id='playerIcon'/>
             <input type='text' id='enterYourNameInput'>
         </div>
-        <input type='button' id='startGameButton' value='PLAY'>
     </div>
 
-    <ul class='bottomOfThePageOptions'>
+    <div id='startGame' class="secondColumn spanInPortrait">
+        <input type='button' id='startGameButton' class="buttonWithText" value='PLAY'>
+    </div>
+
+    <ul class='bottomOfThePageOptions firstColumn'>
         <li id='helpOption'>?</li>
-        <li id='leaderboard'><img src="https://img.icons8.com/ios/452/crown.png" alt='leaderboard' id='leaderboardImg'/></li>
+        <li id='leaderboard'><i class="fa fa-trophy"></i></li>
     </ul>
 
-    <img src='https://static.wikia.nocookie.net/pokemon/images/e/e1/025Pikachu_OS_anime_4.png/revision/latest/scale-to-width-down/1000?cb=20150101100259' alt='Pikachu' id='pikachuImg'/>`
+    <img src='./static/assets/ui/pikach1.png' alt='Pikachu' id='pikachuImg' class="secondColumn"/>`
     appScreen.innerHTML = startingPageTemplate;
 }

styles/App.css

@@ -1,4 +1,170 @@
+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600;900&family=Ranchers&family=Secular+One&display=swap');
+/* text on the web (font-weight: 600) */
+/* font-family: 'Raleway', sans-serif;
+/* "enter name" */
+/* font-family: 'Ranchers', cursive; */
+/* header Quiz */
+/* font-family: 'Secular One', sans-serif; */ 
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Raleway', sans-serif;
+    font-weight: 600;
+    color: #FFCB05;
+}
 body {
+    max-height: 100vh;
+    padding: 1.5vh 5vw ;
     font-family: 'Montserrat', sans-serif;
-    margin: 10; /* final version */
 }
+
+.buttonWithText{
+    border-radius: 7vh;
+    background-color: #3762AC;
+    font-size: 3.5vh;
+}
+
+#pokequiz-app{
+    display: grid;
+    grid-template-columns: 50% 50%;
+    grid-template-rows: 1fr 25vh 10vh 28vh;
+}
+
+.firstColumn{
+    grid-column: 1;
+}
+.secondColumn{
+    grid-column: 2;
+}
+
+/* div headerWithLogo */
+
+#pokemonLogo{
+    height: 18vh;
+}
+#quizLogo{
+    padding-left: 15vh;
+    font-family: 'Secular One', sans-serif;
+    font-size: 8.5vh
+}
+
+/* ul selectModeMenu */
+
+#selectModeMenu{
+    grid-row: span 2/4;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding-top: 5%;
+    padding-left: 6%;
+    list-style:none;
+}
+#selectModeMenu li{
+    margin-bottom: 4px;
+    padding: 1vh 2.5vw;
+    width: 60%;
+    text-align:center;
+}
+
+/* div EnterName */
+
+#enterNameAndPlayMenu{
+    grid-row: 2;
+    justify-self: center;
+}
+
+#enterYourName{
+    padding-bottom: 5%;
+    font-family: 'Ranchers', cursive;
+    font-size: 5.5vh;
+}
+
+#enterYourNameArea{
+    display:flex;
+    justify-content: center;
+}
+
+#playerIcon{
+    height: 4vh;
+}
+
+#enterYourNameInput{
+    border:none;
+    border-bottom: black solid 1px;
+    padding: 2% 5%;
+}
+
+/* div buttonPlay */
+
+#startGame{
+    grid-row-start: 3;
+}
+#startGameButton{
+    margin-left:30%;
+    padding: 0.5% 2%;
+    width: 40%;
+    border-color: transparent;
+}
+
+/* ul bottomOfThePageOptions */
+
+ul.bottomOfThePageOptions{
+    grid-row-end:-1;
+    display: flex;
+    align-items: flex-end;
+    list-style:none;
+}
+ul.bottomOfThePageOptions li{
+    width: 8.5vh;
+    height: 8.5vh;
+    border-radius: 50%;
+    margin: 10px;
+    font-size: 5vh;
+    background-color: #3762AC;
+    text-align: center;
+    line-height: 8.5vh;
+    font-weight: 900;
+}
+
+/* pikachu */
+
+#pikachuImg{
+    grid-row-end: -1;
+    justify-self: end;
+    height: 100%;
+}
+
+@media(max-width:850px){
+    #pikachuImg{
+        justify-self: center;
+    }
+}
+
+@media(orientation:portrait){
+    #pokequiz-app{
+        grid-template-rows:  1fr 17vh 27vh 5vh 16vh;
+    }
+    .spanInPortrait{
+        grid-column: span 2/-1;
+    }
+    #enterNameAndPlayMenu{
+        padding-top: 4%;
+    }
+    #selectModeMenu{
+        grid-row: 3;
+        padding-left: 0;
+    }
+    #selectModeMenu li{
+        margin-left:10%;
+        width: 80%;
+        text-align: center;
+    }
+    #startGame{
+        grid-row:4;
+    }
+    #pikachuImg{
+        justify-self: end;
+    }
+}