Add Games Project to docs.

MastersAcademy · Jan 9, 2024 · 89390fd · 89390fd
1 parent 0758810
commit 89390fd
Show file tree

Hide file tree

Showing 23 changed files with 14,407 additions and 0 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -44,6 +44,8 @@ <h1>MA Projects</h1>
                 </li>
                 <li>
                     Ekaterina Sharova - <a href="./rogerosha/index.html">Final Project</a>
+                <li>
+                    Sasha Demidenko - <a href="./sasha.demidenko/index.html">Lecture 10 - Games Project</a>
                 </li>
             </ul>
         </main>

diff --git a/docs/sasha.demidenko/Images/Overwatch_img.jpg b/docs/sasha.demidenko/Images/Overwatch_img.jpg
diff --git a/docs/sasha.demidenko/Images/about_logo.png b/docs/sasha.demidenko/Images/about_logo.png
diff --git a/docs/sasha.demidenko/Images/about_pic.png b/docs/sasha.demidenko/Images/about_pic.png
diff --git a/docs/sasha.demidenko/Images/facebook_logo.svg b/docs/sasha.demidenko/Images/facebook_logo.svg
diff --git a/docs/sasha.demidenko/Images/instagram_logo.svg b/docs/sasha.demidenko/Images/instagram_logo.svg
diff --git a/docs/sasha.demidenko/Images/linkedin_logo.svg b/docs/sasha.demidenko/Images/linkedin_logo.svg
diff --git a/docs/sasha.demidenko/calculator.html b/docs/sasha.demidenko/calculator.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport"
+            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <title>Calculator</title>
+        <link rel="stylesheet" href="css/calculator.css">
+    </head>
+    <body class="body">
+        <header class="header">
+            <img src="Images/about_logo.png" alt="no img" class="header_logo">
+            <nav class="header_menu">
+                <input type="checkbox" id="checkbox" class="burger">
+                <label for="checkbox" class="burger_button">
+                    <span class="button_line"></span>
+                    <span class="button_line"></span>
+                    <span class="button_line"></span>
+                </label>
+                <ul class="header_ul">
+                    <li class="header_li header_li--underline">Calculator</li>
+                    <li>
+                        <a href="games.html" class="header_li">Games</a>
+                    </li>
+                    <li>
+                        <a href="index.html" class="header_li">About</a>
+                    </li>
+                    <li>
+                        <a href="login.html" class="header_li">Login</a>
+                    </li>
+                </ul>
+            </nav>
+        </header>
+        <div class="_container">
+            <main class="main">
+                <h1 class="name-title">Calculate Games</h1>
+                <label>
+                    <input id="firstValue" class="input-value">
+                </label>
+                <label>
+                    <select name="operation" id="operation" class="select-operation">
+                        <option value="+">+</option>
+                        <option value="-">-</option>
+                        <option value="/">/</option>
+                        <option value="*">*</option>
+                        <option value="**">**</option>
+                    </select>
+                </label>
+                <label>
+                    <input id="secondValue" class="input-value">
+                </label>
+                <button id="calculate" type="button" class="button-result">=</button>
+                <span id="result" class="result"></span>
+            </main>
+        </div>
+        <footer class="footer">
+            <ul class="footer_ul">
+                <li>
+                    <a href="https://www.facebook.com/profile.php?id=100006067830226">
+                        <img src="Images/facebook_logo.svg" alt="no img" class="footer_img">
+                    </a>
+                </li>
+                <li>
+                    <a href="https://ua.linkedin.com/">
+                        <img src="Images/linkedin_logo.svg" alt="no img" class="footer_img">
+                    </a>
+                </li>
+                <li>
+                    <a href="https://www.instagram.com/sasha.dmk/">
+                        <img src="Images/instagram_logo.svg" alt="no img" class="footer_img">
+                    </a>
+                </li>
+            </ul>
+            <p class="footer_p">
+                Made with 💗 on course 'Frontend for beginners' from Masters Academy in 2023, by Sasha Demidenko
+            </p>
+        </footer>
+        <script src="scripts/calculator-script.js"></script>
+        <script src="scripts/calculator.js"></script>
+    </body>
+</html>
diff --git a/docs/sasha.demidenko/css/calculator.css b/docs/sasha.demidenko/css/calculator.css
@@ -0,0 +1,250 @@
+.body {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+}
+
+._container {
+  max-width: 1219px;
+  margin: 0 auto;
+  padding: 0 10px;
+}
+
+.header {
+  background: #EF4934;
+  height: 80px;
+  display: grid;
+  grid-template: 1fr/ 1fr 1fr;
+  width: 100%;
+}
+
+.header_logo {
+  width: 55px;
+  height: 57px;
+  margin: 11px 0 11px 60px;
+}
+
+.header_menu {
+  display: grid;
+  justify-content: end;
+}
+
+.burger {
+  display: none;
+}
+
+.header_ul {
+  display: inline-grid;
+  justify-items: end;
+  grid-template: 1fr/ 78px 78px 78px 78px;
+  list-style-type: none;
+  font-family: Roboto, sans-serif;
+  padding-right: 60px;
+  align-items: center;
+}
+
+.header_li--underline {
+  border-bottom: 2px solid #FFF;
+  padding-bottom: 2px;
+}
+
+.header_li {
+  color: #FFF;
+  text-decoration: none;
+}
+
+.main {
+  width: 100%;
+  height: auto;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: calc(100vh - 160px);
+}
+
+.name-title {
+  font-family: Roboto, sans-serif;
+  font-weight: 700;
+  font-size: 48px;
+  display: flex;
+  justify-content: center;
+}
+
+.input-value {
+  width: 140px;
+  height: 36px;
+  border-radius: 6px;
+  border: 1px solid #221F1F;
+  background: #FFF;
+  color: #221F1F;
+  padding-left: 30px;
+  font-size: 25px;
+}
+
+.select-operation {
+  width: 140px;
+  height: 40px;
+  border-radius: 6px;
+  border-color: #221F1F;
+  background: #FFF;
+  color: #221F1F;
+  font-size: 25px;
+}
+
+.button-result {
+  width: 140px;
+  height: 42px;
+  border-radius: 6px;
+  border: 1px solid #221F1F;
+  background: #EF4934;
+  color: #FFF;
+  font-size: 25px;
+}
+
+.result {
+  height: 42px;
+  font-size: 25px;
+  margin: 7px;
+}
+
+.footer {
+  width: 100%;
+  height: 160px;
+  background: #221F1F;
+  margin-top: 10px;
+}
+
+.footer_ul {
+  list-style: none;
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  padding: 15px 0 0;
+}
+
+.footer_p {
+  color: #FFF;
+  font-size: 22px;
+  text-align: center;
+}
+
+.footer_img {
+  width: 100%;
+}
+
+@media (max-width: 1222px) {
+
+  .header_logo {
+    margin: 11px 0 11px 15px;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+
+  .footer_p {
+    font-size: 20px;
+  }
+}
+
+@media (max-width: 767px) {
+
+  .header {
+    height: 50px;
+  }
+
+  .header_logo {
+    width: 35px;
+    height: 36px;
+    margin: 6px 0 0 8px;
+  }
+
+  .footer {
+    height: 90px;
+  }
+
+  .footer_img {
+    width: 30px;
+  }
+
+  .footer_p {
+    font-size: 10px;
+  }
+
+  .footer_ul {
+    padding: 0;
+    gap: 10px;
+  }
+
+  .burger {
+    display: none;
+  }
+
+
+  .header_ul {
+    position: fixed;
+    right: -100%;
+    background: rgba(0, 0, 0, 90%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-end;
+    margin-top: 0;
+    padding: 100px 40px 40px;
+    -o-transition: right 400ms;
+    transition: right 400ms;
+    border-bottom-left-radius: 100px;
+  }
+
+  .burger:checked ~ .header_ul {
+    right: 0;
+  }
+
+  .button_line {
+    width: 30px;
+    height: 3px;
+    background: #FFF;
+    margin: 2px 0;
+    position: relative;
+    transition: all .1s linear 200ms;
+  }
+
+  .burger:checked ~ .burger_button .button_line:nth-child(1) {
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+    top: 8px;
+  }
+
+  .burger:checked ~ .burger_button .button_line:nth-child(2) {
+    opacity: 0;
+  }
+
+  .burger:checked ~ .burger_button .button_line:nth-child(3) {
+    -ms-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+    top: -6px;
+  }
+
+  .burger_button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    top: 5px;
+    right: 20px;
+    z-index: 1;
+  }
+
+
+  .header_li {
+    font-size: 18px;
+    line-height: 20px;
+    color: #FFF;
+    text-transform: uppercase;
+    text-decoration: none;
+    margin-bottom: 30px;
+    padding: 5px 10px;
+    transition: all .2s linear;
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -44,6 +44,8 @@ <h1>MA Projects</h1> @@
                     </li>
                     <li>
                         Ekaterina Sharova - <a href="./rogerosha/index.html">Final Project</a>
+                    <li>
+                        Sasha Demidenko - <a href="./sasha.demidenko/index.html">Lecture 10 - Games Project</a>
                     </li>
                 </ul>
             </main>
@@ Expand Down @@