styling fix

rafael-vasconcellos · Mar 11, 2024 · ed1803a · ed1803a
1 parent badb35e
commit ed1803a
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 40 deletions.
diff --git a/coffe.css b/coffe.css
@@ -17,12 +17,12 @@ body {
     flex-direction: column;
     align-items: center;
     gap: 50px;
-    min-width: 100vw;
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     position: relative;
     overflow-x: hidden;
+
 }
 
 ul {
@@ -32,12 +32,18 @@ ul {
 nav {
     display: flex;
     justify-content: center;
-    align-items: center;
+    transform: translateX(2vw);
+}
+
+nav > div { 
     width: 100%;
-    gap: 6vw;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
     animation: opacity 2s;
     animation-fill-mode: forwards;
     position: relative;
+    gap: 10vw;
 }
 
 nav ul {
@@ -60,13 +66,24 @@ nav ul li:hover {
     border-bottom: 2px solid #8257E5;
 }
 
+.background-box {
+    position: absolute;
+    border-radius: 200px;
+    width: 150px;
+    height: 150px;
+    /*background-color: rgb(130, 87, 229);*/
+    filter: blur(120px);
+    box-shadow: 0 0 0 100px rgb(130, 87, 229);
+    z-index: -1;
+}
+
 .logo {
     background-image: url("assets/logo-desktop.svg");
     object-fit: contain;
     width: 44px;
     height: 50px;
-    position: absolute;
-    left: 15%;
+    /* position: absolute;
+    left: 15%; */
 }
 
 .get-coffe {
@@ -81,36 +98,15 @@ nav ul li:hover {
     justify-content: center;
     align-items: center;
     gap: 15px;
-    position: absolute;
-    right: 10%;
+    /* position: absolute;
+    right: 10%; */
 }
 
 .get-coffe:hover {
     background-color: #8257E5;
     cursor: pointer;
 }
 
-.background-box {
-    position: absolute;
-    border-radius: 200px;
-    width: 150px;
-    height: 150px;
-    /*background-color: rgb(130, 87, 229);*/
-    filter: blur(120px);
-    box-shadow: 0 0 0 100px rgb(130, 87, 229);
-    z-index: -1;
-}
-
-.b1 {
-    right: 0;
-    top: 0;
-}
-
-.b2 {
-    bottom: 0; 
-    left: 0;
-}
-
 main {
     display: flex;
     flex-direction: column;
@@ -140,7 +136,15 @@ h1 {
     display: none;
 }
 
+.b1 {
+    right: 0;
+    top: 0;
+}
 
+.b2 {
+    bottom: 0; 
+    left: 0;
+}
 
 
 
@@ -192,7 +196,7 @@ h1 {
         position: static;
     }
 
-    nav {
+    nav > div {
         background-color: #000;
         flex-direction: column;
         align-items: flex-start;
@@ -226,6 +230,10 @@ h1 {
         border-bottom: 1px solid #A8A8B3;
     }
 
+    nav img {
+        cursor: pointer;
+    }
+
     .selected {
         border-left: 4px solid #8257E5;
         color: white;

diff --git a/index.html b/index.html
@@ -13,17 +13,18 @@
     <div class="background-box b1"></div>
     <div class="background-box b2"></div>
     <nav>
-        <div class="logo"></div>
-        <ul>
-            <li class="selected">Home</li>
-            <li>Menu</li>
-            <li>Recompensas</li>
-            <li>Gift cards</li>
-            <li>Lojas</li>
-        </ul>
-        <button class="get-coffe gc1">PEGAR MEU CAFÉ</button>
-        <img src="assets/menu-buguer-open.svg" class="buguer">
-
+        <div>
+            <div class="logo"></div>
+            <ul>
+                <li class="selected">Home</li>
+                <li>Menu</li>
+                <li>Recompensas</li>
+                <li>Gift cards</li>
+                <li>Lojas</li>
+            </ul>
+            <button class="get-coffe gc1">PEGAR MEU CAFÉ</button>
+            <img src="assets/menu-buguer-open.svg" class="buguer">
+        </div>
     </nav>
     <main>
         <div class="mobile-container">

diff --git a/readme.md b/readme.md
@@ -1,3 +1,5 @@
 # Café rocketseat
 
 Exercício de design, css e responsividade. com algumas animações
+
+Solução de desafio de html, css e javascript da [rocketseat](https://efficient-sloth-d85.notion.site/Desafio-RocketCoffee-7802895f0dd44da5a6f71a64badc7e72)