style 2.1 + responsive 2.0

rovicz · Jun 22, 2023 · 3db10ec · 3db10ec
1 parent b98d4af
commit 3db10ec
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -12,6 +12,14 @@
 
 <body>
 
+  <header class="header">
+    <div class=" header-item">
+      <ul>
+        <li><a target="_blank" href="https://github.com/rovicz">Dev →</a></li>
+      </ul>
+    </div>
+  </header>
+
 
   <div class="container">
     <div class="menu">

diff --git a/src/style.css b/src/style.css
@@ -12,16 +12,57 @@ body {
   margin-top: 200px;
 }
 
+/* Header */
+
+.header {
+  background-color: #222;
+  padding: 20px;
+  margin-bottom: 100px;
+}
+
+.header-item {
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+.header-item ul li {
+  text-decoration: none;
+  list-style: none;
+}
+
+.header-item a {
+  box-shadow: inset 0 0 0 0 #fff;
+  padding: 10px;
+  color: #fff;
+  text-decoration: none;
+  transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+  border-radius: 5px;
+}
+
+.header-item a:hover {
+  box-shadow: inset 100px 0 0 0 #fff;
+  color: #000;
+  border-radius: 5px;
+}
+
 button {
+  box-shadow: inset 0 0 0 0 #fff;
   height: 40px;
   width: 160px;
   font-family: monospace;
   font-weight: bold;
   background: #fff;
   color: #000;
   cursor: pointer;
-  border-radius: 15px;
+  border-radius: 5px;
   border: 3px solid #8cbeb2;
+  transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+}
+
+button:hover {
+  box-shadow: inset 160px 0 0 0 #8cbeb2;
+  color: #fff;
+  border-radius: 5px;
 }
 
 .brazilData,