add files

pawel-w88 · Feb 7, 2023 · ce84d39 · ce84d39
1 parent 943cb21
commit ce84d39
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -369,6 +369,30 @@
             >Googel Fonts</a
           >
         </li>
+        <li>
+          <a
+            href="http://fontawesome.com/icons"
+            target="_blank"
+            rel="noopener noreferrer"
+            >FontAwesome Icons</a
+          >
+        </li>
+        <li>
+          <a
+            href="http://cdnjs.com/libraries/font-awesome"
+            target="_blank"
+            rel="noopener noreferrer"
+            >Library Awesome</a
+          >
+        </li>
+        <li>
+          <a
+            href="http://www.iconfinder.com/"
+            target="_blank"
+            rel="noopener noreferrer"
+            >IconFinder</a
+          >
+        </li>
         <li>
           <a
             href="http://www.fontsquirrel.com/"
@@ -662,7 +686,7 @@
     <div class="box">
       <ul>
         <p class="title" style="background-color: greenyellow">
-          CheatSheet Shortcuts
+          Cheat Sheet Shortcuts
         </p>
 
         <li>
@@ -681,14 +705,6 @@
             >Git CheatSheet</a
           >
         </li>
-        <li>
-          <a
-            href="http://en.wikipedia.org/wiki/Table_of_keyboard_shortcuts"
-            target="_blank"
-            rel="noopener noreferrer"
-            >Keyboard Schortcuts</a
-          >
-        </li>
         <li>
           <a
             href="http://support.apple.com/en-us/HT201236"
@@ -801,14 +817,6 @@
             >Typing Games</a
           >
         </li>
-        <li>
-          <a
-            href="http://www.bbc.co.uk/bitesize/topics/zf2f9j6/articles/z3c6tfr#zgkpn39"
-            target="_blank"
-            rel="noopener noreferrer"
-            >Typing Exercises</a
-          >
-        </li>
       </ul>
     </div>
     <h2>You want more</h2>

diff --git a/style.css b/style.css
@@ -10,24 +10,28 @@ ul,
 ul li {
   /* border: 1px solid red; */
   display: flex;
+  flex-wrap: wrap;
   list-style: none;
   justify-content: space-between;
-  align-items: center;
+  /* align-items: center; */
 }
 
 .title {
   margin-left: -30px;
   margin-bottom: -15px;
   padding-top: 10px;
-  max-width: 100%;
-  height: 445px;
-  width: 150px;
+  min-width: 100px;
+  min-height: 445px;
   writing-mode: vertical-rl;
 }
 
 a {
   text-decoration: none;
   color: black;
+  font-size: 1rem;
+  text-align: center;
+  padding: 0 5px;
+  margin-top: 100px;
 }
 
 a:visited {
@@ -49,14 +53,13 @@ p {
 
 .menu {
   position: fixed;
-  text-align: end;
-  justify-content: space-between;
+  text-align: center;
   width: 100%;
   height: 30px;
 }
 
 .menu a {
-  margin: 15px;
+  margin: 0 50px;
   padding: 15px;
   border: 1px solid black;
   border-radius: 8px;
@@ -78,3 +81,25 @@ h2 {
   color: white;
   background-color: black;
 }
+
+@media (max-width: 768px) {
+  ul {
+    display: inline-block;
+    /* flex-direction: column; */
+    /* justify-content: space-between; */
+  }
+
+  li {
+    font-size: 2rem;
+    padding-top: 10px;
+  }
+  .title {
+    text-align: center;
+    width: 400px;
+    writing-mode: horizontal-tb;
+  }
+
+  .menu {
+    display: block;
+  }
+}