update SkillfactoryCoding#10 add user styles

Author: cookieru

bjs/10_function_object/index.html

@@ -20,18 +20,23 @@
                     <div class="row">
                         <div class="col">
                             <h3 class="card-title"><span id="surnameOutput">Генерация фамилии</span></h3>
-                            <h4>Имя: <span id="firstNameOutput">Генерация имени</span></h4>
-                            <h4>Отчество: <span id="fatherNameOutput">Генерация отчества</span></h4>
+                            <h4>Имя:<span id="firstNameOutput">Генерация имени</span></h4>
+                            <h4>Отчество:<span id="fatherNameOutput">Генерация отчества</span></h4>
+                            <hr>
                             <p>
                                 <span id="genderOutput">Генерация пола</span><!--
                              --><span>, </span><!--
-                             --><span id="birthYearOutput">Генерация года рождения</span><!--
+                             --><span id="birthYearOutput">Генерация даты рождения</span> рождения<!--
                              --><span>, </span><!--
                              --><span id="jobOutput">Генерация работы</span>
                             </p>
                         </div>
                     </div>
                 </div>
+                <div class="card-footer text-right">
+                    <button class="btn btn-primary">Сгенерировать</button>
+                    <button class="btn btn-primary">Очистить</button>
+                </div>
             </div>
         </div>
     </div>

bjs/10_function_object/style.css

@@ -0,0 +1,38 @@
+@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');
+
+.game-card
+{
+    font-family: 'Play', sans-serif;
+
+    height: 100vh;
+}
+
+.game-card h3
+{
+    font-weight: bold;
+}
+
+.game-card h4
+{
+    font-weight: bold;
+
+    text-align: left;
+}
+
+.game-card h4 span
+{
+    position: absolute;
+    left: 6em;
+
+    font-weight: normal;
+}
+
+.game-card p
+{
+    text-align: left;
+}
+
+.game-card p span:nth-child(5)
+{
+    text-transform: lowercase;
+}