Merge pull request #1 from Valik3201/main-styling

Updated common styles
Valik3201 · Nov 20, 2023 · 6574f2c · 6574f2c
2 parents 29cbfce + 608fc87
commit 6574f2c
Show file tree

Hide file tree

Showing 5 changed files with 195 additions and 9 deletions.
diff --git a/src/01-color-switcher.html b/src/01-color-switcher.html
@@ -3,11 +3,49 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Color switcher</title>
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="favicon/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="favicon/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="favicon/favicon-16x16.png"
+    />
+    <link rel="manifest" href="favicon/site.webmanifest" />
+    <meta name="theme-color" content="#10162F" />
+    <title>Color Switcher</title>
     <link rel="stylesheet" href="css/common.css" />
   </head>
   <body>
-    <p><a href="index.html">Go back</a></p>
+    <p>
+      <a href="index.html" class="back-button">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          fill="currentColor"
+          class="bi bi-arrow-left-short"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"
+          />
+        </svg>
+        Back
+      </a>
+    </p>
+
+    <h1 class="title">Color Switcher</h1>
 
     <button type="button" data-start>Start</button>
     <button type="button" data-stop>Stop</button>

diff --git a/src/02-timer.html b/src/02-timer.html
@@ -3,11 +3,49 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Countdown timer</title>
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="favicon/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="favicon/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="favicon/favicon-16x16.png"
+    />
+    <link rel="manifest" href="favicon/site.webmanifest" />
+    <meta name="theme-color" content="#10162F" />
+    <title>Countdown Timer</title>
     <link rel="stylesheet" href="css/common.css" />
   </head>
   <body>
-    <p><a href="index.html">Go back</a></p>
+    <p>
+      <a href="index.html" class="back-button">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          fill="currentColor"
+          class="bi bi-arrow-left-short"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"
+          />
+        </svg>
+        Back
+      </a>
+    </p>
+
+    <h1 class="title">Countdown Timer</h1>
 
     <input type="text" id="datetime-picker" />
     <button type="button" data-start>Start</button>

diff --git a/src/03-promises.html b/src/03-promises.html
@@ -3,11 +3,49 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Promise generator</title>
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="favicon/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="favicon/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="favicon/favicon-16x16.png"
+    />
+    <link rel="manifest" href="favicon/site.webmanifest" />
+    <meta name="theme-color" content="#10162F" />
+    <title>Promise Generator</title>
     <link rel="stylesheet" href="css/common.css" />
   </head>
   <body>
-    <p><a href="index.html">Go back</a></p>
+    <p>
+      <a href="index.html" class="back-button">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          fill="currentColor"
+          class="bi bi-arrow-left-short"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"
+          />
+        </svg>
+        Back
+      </a>
+    </p>
+
+    <h1 class="title">Promise Generator</h1>
 
     <form class="form">
       <label>

diff --git a/src/css/common.css b/src/css/common.css
@@ -3,8 +3,8 @@
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: #fafafa;
@@ -16,3 +16,54 @@ img {
   display: block;
   max-width: 100%;
 }
+
+button {
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.title {
+  text-align: center;
+  color: #10162f;
+}
+
+.tasks {
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  row-gap: 2rem;
+  column-gap: 1rem;
+}
+
+.tasks li a {
+  color: #10162f;
+  text-decoration: none;
+  font-weight: 700;
+  padding: 0.625rem 2rem;
+  background-color: #ffd300;
+  border-radius: 0.5rem;
+  transition: background-color 0.2s ease-in;
+}
+
+.tasks li a:hover {
+  background-color: #ffe20d;
+}
+
+.back-button {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 2rem 0.5rem 1.5rem;
+  background-color: #ffd300;
+  color: #10162f;
+  text-decoration: none;
+  font-weight: 700;
+  border-radius: 0.5rem;
+  width: fit-content;
+  transition: background-color 0.2s ease-in;
+}
+
+.back-button:hover {
+  background-color: #ffe20d;
+}
diff --git a/src/index.html b/src/index.html
@@ -3,11 +3,32 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="favicon/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="favicon/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="favicon/favicon-16x16.png"
+    />
+    <link rel="manifest" href="favicon/site.webmanifest" />
+    <meta name="theme-color" content="#10162F" />
     <title>Homework 9</title>
     <link rel="stylesheet" href="css/common.css" />
   </head>
   <body>
-    <ul>
+    <h1 class="title">JavaScript Modules and Web Storage</h1>
+
+    <ul class="tasks">
       <li><a href="01-color-switcher.html">Color switcher</a></li>
       <li><a href="02-timer.html">Countdown timer</a></li>
       <li><a href="03-promises.html">Promise generator</a></li>