lesson 5-1: codely page menu end

ismanapa · ismanapa · commit beefe8e01a34 · 2021-08-30T17:03:55.000+02:00
diff --git a/51-codely-page-menu/index.html b/51-codely-page-menu/index.html
@@ -12,7 +12,9 @@
 
 <body>
   <header class="header">
-    <img class="header__image" alt="Logo de Codely" src="./assets/logo-codelytv.png">
+    <div class="header__image">
+      <img alt="Logo de Codely" src="./assets/logo-codelytv.png">
+    </div>
     <nav class="header__menu">
       <ul>
         <li>
@@ -35,7 +37,7 @@
         </li>
       </ul>
     </nav>
-    <a class="header__subscribe" href="https://codely.tv/pro/cursos">Subscribete</a>
+    <a class="header__subscribe" href="https://codely.tv/pro/cursos">Subscríbete</a>
   </header>
 
   <main class="courses">
diff --git a/51-codely-page-menu/scss/_header.scss b/51-codely-page-menu/scss/_header.scss
@@ -0,0 +1,55 @@
+.header {
+  background-color: #181818;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 1rem;
+
+  a {
+    color: white;
+    text-decoration: none;
+  }
+
+  &__menu {
+    flex-basis: 100%;
+    order: 1;
+
+    @media screen and (min-width: 60rem) {
+      order: 0;
+      flex-basis: auto;
+    }
+
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      padding-left: 0;
+      margin: 0;
+
+      li {
+        flex: 1;
+        list-style-type: none;
+        text-align: center;
+        padding: 0.25rem 1rem;
+      }
+    }
+  }
+
+  &__subscribe {
+    border: 1px solid #69e081;
+    border-radius: 0.25rem;
+    padding: 0.25rem 1rem;
+  }
+
+  &__image {
+    flex: 1;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    img {
+      max-width: none;
+      max-height: 2.3em;
+    }
+  }
+}
diff --git a/51-codely-page-menu/scss/index.scss b/51-codely-page-menu/scss/index.scss
@@ -1 +1,2 @@
-@import "./base";
+@import "./base";
+@import "./header";

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`		`-@import "./base";`
	`1`	`+@import "./base";`
	`2`	`+@import "./header";`