DasWolke · March 21, 2018 13:57 · Mar 21, 2018
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<div id="app">
+  <div id="navbar" class="navbar navbar--fixed">
+    <div class="navbar__group navbar__group--left">
+      <a class="navbar__link" href="">
+        <div class="navbar__item">
+          test
+        </div>
+      </a>
+    </div>
+    <div class="navbar__group">
+      <div class="navbar__logo">
+        <img src="https://images-ext-2.discordapp.net/external/XJ4Mex2q7ROyjoKJSo2jeADjrhDsBoXstYiaKwIk0qc/https/cdn.weeb.sh/images/r1_dB-1qW.jpeg?width=70&height=81" alt="logo" />
+      </div>
+    </div>
+    <div class="navbar__group navbar__group--right">
+      <a class="navbar__link" href="">
+      <div class="navbar__item">
+        test
+      </div>
+    </a>
+    <a class="navbar__link navbar__item--special-wrapper" href="">
+      <div class="navbar__item navbar__item--special">
+        test
+      </div>
+    </a>
+    </div>
+  </div>
+</div>
diff --git a/kowrxz.markdown b/kowrxz.markdown
@@ -0,0 +1,7 @@
+KoWrxz
+------
+
+
+A [Pen](https://codepen.io/Wolke1/pen/KoWrxz) by [Wolke](https://codepen.io/Wolke1) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/Wolke1/pen/KoWrxz/license).
diff --git a/style.css b/style.css
@@ -0,0 +1,59 @@
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+  box-shadow: 0 8px 10px 0 rgba(0,0,0,.07);
+}
+.navbar__item {
+  color: grey;
+  padding: 10px 16px;
+  border: 1px solid rgba(0, 0, 0, 0);
+  border-radius: 5%;
+  margin : 0 5px;
+  text-transform: uppercase;
+  transition: border 0.25s;
+  font-size: 1.1rem;
+}
+.navbar__item:hover {
+  color: black;
+  border: 1px solid #333;
+}
+.navbar__item--special {
+  border: 1px solid transparent;
+  max-width: 200px;
+  max-height: 50px;
+  margin: 0;
+}
+.navbar__item--special:hover {
+  border: 1px solid transparent;
+  color: #ffffff;
+}
+.navbar__item--special {
+  background-color: #ffffff;
+  color: #f05e5e;
+  transition: background-color 0.25s;
+}
+.navbar__item--special-wrapper:hover .navbar__item--special{
+  background-color: transparent;
+}
+.navbar__item--special-wrapper {
+  background-image: linear-gradient(90deg, #f05e5e, #f3e769);
+  padding: 1px;
+  border-radius: 5%;
+  margin: 0 5px;
+}
+.navbar__link {
+  color: inherit;
+  text-decoration: none;
+}
+.navbar__group {
+  display: flex;
+  align-items: center;
+}
+.navbar__group--left {
+  margin-left: 10px;
+}
+.navbar__group--right {
+  margin-right: 10px;
+}