MastersAcademy · vladyslav-yermolin-moc · Jan 9, 2024 · Jan 6, 2024 · Jan 6, 2024 · Jan 6, 2024
diff --git a/docs/index.html b/docs/index.html
@@ -26,6 +26,9 @@ <h1>MA Projects</h1>
                 <li>
                     Rostyslav Vyshemirskyi - <a href="./rooosss/index.html">Final Project</a>
                 </li>
+                <li>
+                    Ekaterina Sharova - <a href="./rogerosha/index.html">Final Project</a>
+                </li>
             </ul>
         </main>
     </body>

diff --git a/docs/rogerosha/calculator.html b/docs/rogerosha/calculator.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>JS Logic</title>
+        <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">
+        <link rel="stylesheet" href="css/layout.css">
+        <link
+            href="css/calculator.css"
+            rel="stylesheet"
+            type="text/css">
+    </head>
+    <body>
+        <header class="upper-header">
+            <div class="ma-logo">
+                <img class="MAlogo" src="images/MA-logo.svg" alt="Masters Academy">
+            </div>
+            <ul class="navigation">
+                <li>
+                    <a href="#" class="navigation-item calculator">Calculator</a>
+                </li>
+                <li>
+                    <a href="pokemons.html" class="navigation-item pokemons">Pokemons</a>
+                </li>
+                <li>
+                    <a href="index.html" class="navigation-item about">About</a>
+                </li>
+                <li>
+                    <a href="login.html" class="navigation-item login">Login</a>
+                </li>
+            </ul>
+        </header>
+        <div class="content">
+            <h1 class="headline">Calculate Pokemons</h1>
+            <div class="field">
+                <label>
+                    <input class="firstValue" id="firstValue">
+                </label>
+                <label>
+                    <select class="operation" name="operation" id="operation">
+                        <option value="+">+</option>
+                        <option value="-">-</option>
+                        <option value="/">/</option>
+                        <option value="*">*</option>
+                        <option value="%">%</option>
+                        <option value="**">**</option>
+                    </select>
+                </label>
+                <label>
+                    <input class="secondValue" id="secondValue">
+                </label>
+                <button class="button" id="calculate" type="button">=</button>
+                <span class="result" id="result"></span>
+            </div>
+            <div class="result-display">
+                <div class="left-column">
+                    <div class="input-history"></div>
+                </div>
+                <div class="right-column">
+                    <div class="output-history"></div>
+                </div>
+            </div>
+        </div>
+        <script src="scripts/calculator-script.js"></script>
+        <script src="scripts/homework.js"></script>
+        <footer>
+            <div class="social-networks">
+                <img class="networks" src="images/networks.svg" alt="Masters Academy">
+            </div>
+            <p class="footer-text">
+                Made with 🤍 on course <a href="https://www.mastersacademy.education/frontend-for-beginners-it" class="link"> 'Frontend for beginners' from Masters Academy in 2023</a>, by Katya Sharova
+            </p>
+        </footer>
+    </body>
+</html>
diff --git a/docs/rogerosha/css/calculator.css b/docs/rogerosha/css/calculator.css
@@ -0,0 +1,75 @@
+.pokemons, .about, .login {
+  text-decoration: none;
+}
+
+.field {
+  display: flex;
+  gap: 16px;
+}
+
+.firstValue, .secondValue {
+  padding: 13px;
+  border-radius: 6px;
+  display: flex;
+  text-align: center;
+  border: 1px solid #333;
+}
+
+.operation {
+  border-radius: 6px;
+  background-color: #FFF;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  border: 1px solid #333;
+  padding-block: 13px;
+  padding-left: 12px;
+  padding-right: 95px;
+}
+
+.button {
+  background-color: #EF4934;
+  color: #FFF;
+  border-radius: 6px;
+  border: 1px solid #EF4934;
+  display: inline-flex;
+  padding: 13px 57px;
+  justify-content: center;
+  align-items: center;
+}
+
+.result {
+  display: flex;
+  align-items: center;
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 32px;
+}
+
+.result-display {
+  display: flex;
+  flex-direction: row;
+  margin-top: 20px;
+  color: #EF4934;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 48px;
+  gap: 16px;
+  padding-bottom: 52px;
+}
+
+.content {
+  max-width: 1280px;
+}
+
+@media screen and (max-width: 768px) {
+
+  .field {
+    flex-direction: column;
+  }
+
+  .operation, .firstValue, .secondValue, .button {
+    font-size: 20px;
+  }
+}
diff --git a/docs/rogerosha/css/layout.css b/docs/rogerosha/css/layout.css
@@ -0,0 +1,103 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.upper-header {
+  background-color: #333;
+  display: flex;
+  align-items: center;
+  padding: 25px 53px;
+  color: #333;
+  gap: 18px;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.ma-logo {
+  display: flex;
+  align-items: center;
+}
+
+.navigation {
+  text-align: right;
+  display: flex;
+  align-items: center;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  gap: 50px;
+}
+
+.navigation-item {
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  color: #FFF;
+  line-height: 19px;
+}
+
+.content {
+  max-width: 575px;
+  width: 100%;
+  padding-inline: 52px;
+  padding-block: 52px;
+  gap: 24px;
+  display: flex;
+  flex-direction: column;
+}
+
+footer {
+  background-color: #EF4934;
+  color: #FFF;
+  padding: 20px;
+  text-align: center;
+  width: 100%;
+  margin-bottom: 0;
+}
+
+.footer-text {
+  font-weight: 400;
+  font-size: 22px;
+  line-height: 32px;
+}
+
+.headline {
+  text-align: center;
+  color: #221F1F;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 48px;
+  margin: 0;
+}
+
+.link {
+  color: #FFF;
+  text-decoration: none;
+}
+
+.social-networks {
+  margin-block: 30px;
+}
+
+@media screen and (max-width: 767px) {
+
+  .navigation {
+    text-align: right;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+  }
+
+  .upper-header {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}
diff --git a/docs/rogerosha/css/login.css b/docs/rogerosha/css/login.css
@@ -0,0 +1,87 @@
+.pokemons, .about, .calculator {
+  text-decoration: none;
+}
+
+.enter-content {
+  align-items: center;
+  padding-bottom: 52px;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.email {
+  font-size: 22px;
+  font-weight: 600;
+}
+
+.email-check {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 22px;
+  font-weight: 600;
+}
+
+.input-email {
+  width: 100%;
+  border-radius: 6px;
+  border: 1px solid #A9A9A9;
+  padding-block: 30px;
+  padding-inline: 20px;
+}
+
+.password {
+  font-size: 22px;
+}
+
+.password-check {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 22px;
+  font-weight: 600;
+}
+
+.input-password {
+  width: 100%;
+  border-radius: 6px;
+  border: 1px solid #A9A9A9;
+  padding-block: 30px;
+  padding-inline: 20px;
+}
+
+.robot-check {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+}
+
+.label-checkbox {
+  cursor: pointer;
+}
+
+.error {
+  color: #EF4934;
+  font-weight: 400;
+}
+
+.button-login {
+  font-size: 22px;
+  font-weight: 600;
+  background-color: #EF4934;
+  color: #FFF;
+  text-decoration: none;
+  cursor: pointer;
+  display: flex;
+  width: 100%;
+  padding: 27px 48px;
+  justify-content: center;
+  border: 2px solid #EF4934;
+  align-items: center;
+  border-radius: 6px;
+  gap: 10px;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,6 +26,9 @@ <h1>MA Projects</h1> @@
                     <li>
                         Rostyslav Vyshemirskyi - <a href="./rooosss/index.html">Final Project</a>
                     </li>
+                    <li>
+                        Ekaterina Sharova - <a href="./rogerosha/index.html">Final Project</a>
+                    </li>
                 </ul>
             </main>
         </body>
@@ Expand Down @@