Version 39

css/shop.css

@@ -13,7 +13,22 @@ body {
 } 
 
 /* Clisks */
+.joe{
+  position: fixed;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+  width: 100%;
+  margin: 0;
+  top: 0;
+  border-radius: 0 0 90px 90px;
+  background: linear-gradient(#11ABFF, #ccccccab);
+
+}
 #logclick{
+  position: relative;
   background-color: papayawhip;
   display: flex;
   align-items: center;
@@ -25,6 +40,7 @@ body {
   border-radius: 1rem;
   z-index: 69;
   width: auto;
+  top: 30px;
   height: 85px;
   filter: drop-shadow(10px 8px 6px #333);
 }
@@ -40,28 +56,6 @@ body {
   pointer-events: none
 }
 
-#links{
-  position: relative;
-  width: 100%;
-  margin: 1rem auto;
-  padding: 10px;
-  display: flex;
-  justify-content: space-around;
-}
-.link{
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--color);
-  min-width: 200px;
-  height: 50px;
-  margin: 1rem auto;
-  border: 3.69px none #333333;
-  filter: drop-shadow(10px 8px 6px #333);
-  border-radius: 69px;
-}
-
 .backtop{
   height: 230px;
   max-width: auto;
@@ -148,17 +142,6 @@ main{
   flex-direction: row;
   justify-content: center;
 }
-
-/*@media only screen and (max-width: 1100px){
-  .row .item{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    left: 50%;
-    transform: translateXyy(-50%);
-  }
-}*/
-
 button{
   border: none;
   filter: drop-shadow(8px 6px 4px #555);
@@ -176,4 +159,90 @@ button{
     width: auto;
     margin: 2rem 10vw 2rem 10vw;
   }
+}
+
+
+.menu-container{
+  position: fixed;
+  top: 50px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: 'Poppins';
+  z-index: 500;
+}
+.button{
+  position: relative;
+  background: #1b1b1b;
+  color: #fff;
+  font-size: 20px;
+  padding: 8px 20px;
+  width: 150px;/* 100% */
+  line-height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 25px;
+  cursor: pointer;
+  transition: width .4s;
+}
+.button.expand{
+  width: 100%;
+}
+.fas.expand:before{
+  content: '\f00d';
+}
+ul{
+  list-style: none;
+  position: absolute;
+  top: 65px;
+  display: block;
+  background: #1b1b1b;
+  width: 100%;
+  text-align: center;
+  border-radius: 5px;
+  display: none;
+  box-shadow: 0 3px 6px rgba(0,0,0,.3);
+  padding-inline-start: 0px;
+}
+ul:before{
+  position: absolute;
+  content: '';
+  width: 20px;
+  height: 20px;
+  background: #1b1b1b;
+  top: -10px;
+  right: 15px;
+  transform: rotate(45deg);
+  z-index: -1;
+}
+ul li{
+  line-height: 35px;
+  padding: 8px 20px;
+  cursor: pointer;
+  border-bottom: 1px solid rgba(255,255,255,.1);
+}
+ul li:hover:first-child{
+  border-radius: 5px 5px 0 0;
+}
+ul li:hover:last-child{
+  border-radius: 0 0 5px 5px;
+}
+ul li:hover{
+  box-shadow: inset 0 0 5px #33ff33,
+              inset 0 0 10px #66ff66;
+}
+ul li:last-child{
+  border-bottom: none;
+}
+ul li a{
+  color: #fff;
+  font-size: 18px;
+  text-decoration: none;
+}
+ul li:hover a{
+  color: #44dd44;
 }